/* Ref écran taille */
/* Les largeurs d’écran inférieures à 600px utilisent une mise en page de type mobile de 400px de large.
Les largeurs d’écran comprises entre 600px et 999px utilisent une mise en page de type tablette de 600px de large.
Les largeurs d’écran supérieures à 1 000px utilisent une mise en page de type ordinateur de bureau de 1000px de large. */

/* modifier le tout par ecran */

/* réf color */
/* rose = color: rgb(255, 87, 87); */
:root {
  --color-rose: rgb(255, 87, 87);
  --color-vert: rgb(0, 191, 99);
}
* {
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}
body {
  padding: 0%;
  margin: 0%;
  background-color: white;
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

nav {
  width: 100%;
  height: auto;
  min-height: 400px;
  /* background-color: rgb(245, 245, 245); */
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
#barreNavMobile {
  z-index: 599;
  display: none;
}
button {
  cursor: pointer;
}
#containerPresentationNom {
  display: flex;
  flex-direction: row;
  height: 334px;
  justify-content: center;
  align-items: center;
  text-align: center;
  /* padding: 40px 0 ; */
}
#containerPresentationNom h1 {
  font-size: xx-large;
  margin: 7px;
}
#containerPresentationNom h3 {
  color: var(--color-rose);
  margin: 5px;
}

#containerPresentationOnglets {
  background-color: var(--color-vert);
  width: 100%;
}
#containerPresentationOnglets ul {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
#containerPresentationOnglets ul li {
  list-style: none;
  padding: 3px 7px;
  margin: 0 0px;
  color: var(--color-rose);
  cursor: pointer;
  position: relative;
  text-align: center;
}
#containerPresentationOnglets ul li a {
  text-decoration: none;
  font-size: x-large;
  color: white;
  padding: 7px;
}
#containerPresentationOnglets ul li::after {
  position: absolute;
  content: "";
  background-color: var(--color-rose);
  color: black;
  width: 0%;
  height: 2px;
  bottom: 0px;
  left: 50%;
  transition: 1s;
}
#containerPresentationOnglets ul li:hover::after {
  width: 100%;
  left: 0%;
}
#croixSortieNavBarre {
  display: none;
}
#containerPresentationLogo {
  background-image: linear-gradient(rgba(0, 0, 0,0.4), rgb(0, 0, 0, 0.4)), url("../images/fondAccueil.jpg");
  background-position: 50% 20%;
  background-repeat: no-repeat;
  background-size: 100%;
  height: 40vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}


#containerPresentationLogo h1 {
  color: white;
  font-size: xx-large;
}
/* -----------------------------------Footer */
.ligneSeparation{
  border-top: solid 1px;
  width: 50%;
  margin: 20px 0;
}
footer{
  position: relative;
  display: flex;
  background-color: var(--color-rose);
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  min-height: 400px;
}
#displayFooter {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
}
#displayFooter .containerFooter{
  margin: 0 150px;
}
#displayFooter #containerFooterDescription h1, #displayFooter #containerFooterDescription h3{
  text-align: center;
}
#displayFooter #containerFooterDescription h3{
  color: black;
}
#displayFooterLogo {
  width: auto;
}
#containerFooterLogo {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  /* border: solid black 1px; */
}
#containerFooterLogo img {
  background-color: rgb(255, 255, 255);
  /* background-color: white; */
  border-radius: 50%;
  padding: 5px;
  margin: 15px;
  height: 150px;
}
#containerFooterLogo h1 {
  /* color: var(--color-vert); */
  color: white;
  margin: 10px 0;
}
#containerFooterLogo h3 {
  color: white;
  margin: 10px 0;
}
#footerAccroche h1 {
  text-align: center;
  color: white;
  margin: 10px 0;
  font-size: 1.5em;
}
#displayFooterInformation {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: auto;
  /* align-items: center; */
}
#displayFooterInformation article {
  display: flex;
  flex-direction: row;
  font-size: large;
  color: white;
  margin: 5px 0;
}
.containerFooterRenseignement{
  width: 100%;
  color: white;
  margin: 7px 0px;
}
#displayFooter .footerTitre{
  font-size: x-large;
  text-decoration: underline;
}
.containerFooterRenseignement div {
  margin: 5px 0;
  /* text-align: center; */
}
.containerFooterRenseignement a{
  text-decoration: none;
  color: white;
}
.containerFooterRenseignement span, .containerFooterRenseignement a{
  font-size: large;
}
.containerFooterRenseignement .iconReseau{
  margin-right: 5px;
}
.containerFooterRenseignement .iconReseau img{ 
  border-radius: 0.5em;
}
#containerFooterCVG{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  margin-top: 10px;
  width: 90%;
  text-align: center;
}
#containerFooterCVG a{
  text-decoration: none;
  color: white;
  font-size: large;
}
/* COOKIE */
#cookieLand{
  z-index: 700 ;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: fixed;
  width: 100%;
  background-color: var(--color-rose);
  font-size: large;
  text-align: center;
  bottom: 0;
  border-top: solid white 2px;
}
#cookieLand p{
  padding: 0 10px;
}
#cookieYes, #cookieNo{
  padding: 10px;
  margin: 10px;
  font-size: large;
  color: white;
  border: white 1px solid;
}
#cookieYes{
  background: var(--color-vert) ;
}
#cookieNo{
  background: red ;
}
#btnCookie{
  cursor: pointer;
  color: white;
  font-size: large;
  padding: 5px;
  margin: 5px;
}

#btnRemontePage {
  z-index: 600;
  position: fixed;
  transform: rotate(-90deg);
  font-size: xx-large;
  color: var(--color-vert);
  /* background-color: rgb(255, 87, 87, 0.5); */
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 25%;
  padding: 15px;
  bottom: 10px;
  right: 25px;
  cursor: pointer;
}
#btnRemontePage:hover {
  background-color: rgb(0, 0, 0, 0.6);
}

/* @media (max-height: 450px), screen and (orientation: portrait){   */
@media (max-width: 999px) {
  nav {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    /* height: 20vh; */
    height: auto;
    /* background-color: rgb(245, 245, 245); */
  }
  #containerPresentationNom {
    margin-left: 0px;
    flex-direction: column;
    text-align: center;
  }
  #containerPresentationNom h1 {
    /* color: var(--color-rose); */
    font-size: x-large;
  }
  #containerPresentationNom h2 {
    color: var(--color-vert);
    font-size: large;
  }
  #containerPresentationLogo {
    /* color: var(--color-rose); */
    font-size: x-large;
  }
  #barreNavMobile {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 50px;
    position: sticky;
    top: 0px;
    background-color: white;
  }
  #barreNavMobile div {
    cursor: pointer;
    width: 50px;
    height: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  #barreNavMobile div span {
    width: 25px;
    margin: 3px;
    background-color: var(--color-vert);
    height: 3px;
  }
  #containerPresentationOnglets {
    z-index: 600;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    justify-content: center;
    align-items: center;
    background-color: white;
    width: 100%;
    height: 100vh;
    margin-right: 0px;
  }
  #croixSortieNavBarre {
    cursor: pointer;
    display: flex;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0px;
    right: 0px;
    width: 50px;
    height: 50px;
    font-size: xx-large;
    color: var(--color-rose);
  }
  #containerPresentationOnglets ul {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-left: 0px;
  }
  #containerPresentationOnglets ul li {
    padding: 20px;
  }
  #containerPresentationOnglets ul li a {
    text-decoration: none;
    font-size: x-large;
    color: var(--color-rose);
    padding: 7px;
  }
  #containerPresentationOnglets ul li::after {
    position: absolute;
    content: "";
    background-color: var(--color-rose);
    color: black;
    width: 0%;
    height: 2px;
    bottom: 0px;
    left: 50%;
    transition: 1s;
  }
  #containerPresentationOnglets ul li:hover::after {
    width: 100%;
    left: 0%;
  }
  #containerPresentationLogo h1 {
    width: 90%;
    text-align: center;
  }
  #displayFooter {
    padding: 50px 0;
    flex-direction: column;
  }
  #displayFooterLogo {
    width: 90%;
  }
  #containerFooterLogo {
    flex-direction: column;
  }
  #containerFooterLogo img {
    height: 200px;
  }
  #containerFooterLogo h1 {
    text-align: center;
  }
  #containerFooterLogo h3 {
    text-align: center;
  }
  #footerAccroche h1 {
    text-align: center;
  }
  #displayFooterInformation {
    width: 90%;
    align-items: center;
  }
  .containerFooterRenseignement {
    text-align: center;
  }
}

@media (max-width: 600px) and (min-height: 601px) {
  #containerPresentationLogo {
    height: auto;
    padding: 50px;
  }
}

@media (max-height: 600px) {

}