/*GENERAL*/
*{}
body {font-family: 'Poppins', sans-serif;padding: 1%; font-size: 1.2em; margin: auto; font-weight: 200; color:#ebfaf5; background-color:#151c1b}
main { clear: both; margin: auto; width: 100%;}
h1 {clear:both;text-align: center; font-weight: bold; padding: 1%;margin-top: 2%; font-size:1.5em}
h2,h3 {text-align:center; padding:1%; margin-top:2%; font-size:1.3em; font-weight: 200; clear:both ;}
a{color:whitesmoke;}
strong {font-weight:200;}

/*EN-TÊTE */
header {display: inline;}

#logo {float:right; width:12%; padding-right: 1%; margin-right : 2%; margin-top: O.5%;}

nav {float:left; display: flex; width: 80%;}

nav a { display: block; padding:1%;text-align: center; box-sizing: border-box;width: 20em; color:#ebfaf5; text-decoration: none; margin: auto; border: solid #ebfaf5; border-radius: 2em;background-color: #272c2d; border-width: thin ; margin: 1%; font-size: small;text-decoration:none;}

nav a:hover {background-color: #555B61;border: solid #ebfaf5; border-radius: 2em; border-width: thin; color:  #cecabe; }

#menu {display: none;}
#hamburger {display: none;}



#titresansmarges {margin: 0; padding:  0;}

#grandissilvaacentrer { width: 50%; animation-duration: 5s;
    animation-name: slidein; margin-bottom:-5%;}
    @keyframes slidein {
        from {
          margin-left: 100%;
          width: 140%;
        }
        to {
          margin-left: 0%;
          width: 30%;
        }
      }


/*FOOTER*/
footer {width: 90%;}
#yeux {margin-left:10%; clear:both; width:90%;}
    

#mentions {text-align: center; font-weight: lighter; font-size: xx-small;font-family:serif;padding-left: 18%; clear:both;}


/* BOUTON REMONTER */

#boutonRemonter {
  display: none; 
  position: fixed; 
  bottom: 5%; 
  right: 5%;
  z-index: 10; 
  border: solid  #ebfaf5; 
  border-radius: 2em; border-width: thin;
  background-color:rgb(185, 183, 183,0.2); 
  color:  #ebfaf5; 
  cursor: pointer; 
  padding: 9px; 
  font-size: 15px; 
  font-weight: bolder;
  width:3em;
  text-align: center;

}

#boutonRemonter:hover {
  background-color:rgba(128, 128, 128, 0.41);
  transform: scale(1.5);
}


/* PAGE INDEX*/

/* SLIDER ANIMÉ - CARROUSEL */
.container {
  position: relative;
  width: 100%;
  min-height: 50vh;
  perspective: 800px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  margin-top: 1%;
  margin-bottom: O; 
  padding: 0;}

.container .slide {
  width: 100%;
  transform-style: preserve-3d;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: rotation 30s infinite linear;
}

  .container .slide:hover {
  animation-play-state: paused;}
  



/* -- TRANSFORMATION ROTATION --- */
.container .slide .carrousel {
  max-width: 100%;
  position: absolute;}

.container .slide .carrousel:nth-child(1) {
  transform: rotateY(60deg) translateZ(300px);}

.container .slide .carrousel:nth-child(2) {
  transform: rotateY(120deg) translateZ(300px);}

.container .slide .carrousel:nth-child(3) {
  transform: rotateY(180deg) translateZ(300px);}

.container .slide .carrousel:nth-child(4) {
  transform: rotateY(240deg) translateZ(300px);}

.container .slide .carrousel:nth-child(5) {
  transform: rotateY(300deg) translateZ(300px);}

.container .slide .carrousel:nth-child(6) {
  transform: rotateY(360deg) translateZ(300px);}

/* Images */
.container .carrousel .quitourne {
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin-bottom: 10px;
  border-radius: 15px;
  transition: all 1s ease-in-out;
 background-color: rgba(34, 31, 31, 0.372);
  /*background: linear-gradient(217deg, rgba(127, 189, 230, 0.383), rgba(203, 125, 125, 0.16) 70.71%),
  linear-gradient(127deg, rgba(136, 192, 136, 0.435), rgba(225, 123, 189, 0.18) 70.71%),
  linear-gradient(336deg, rgba(255, 230, 0, 0.223), rgba(225, 152, 225, 0.301) 70.71%);*/
  padding: 10%;}



.container .carrousel:hover .quitourne {
  transform: scale(1.5);}

/*.container .carrousel .quitourne  {
  width: 100%;
  height: 100%;
  border-radius: 15px;}*/
  .photocarrousel {}




  @keyframes rotation {
    0% {
      transform: rotateY(0deg);
    }
    100% {
      transform: rotateY(-360deg);
    }
  }
  /* -- FIN CSS POUR SLIDER ANIMÉ - CARROUSEL -- */


/* AUTRES sur PAGE INDEX */

    
.message {background-color: rgba(0, 0, 0, 0.301); color:  #ebfaf5; padding: 1%; border: solid thin  #ebfaf5; border-radius: 2em; margin-top: 4%; margin-bottom: 2%; text-align: justify;}
.messageacentrer {text-align: center; color: #ebfaf5; margin-bottom: 2%;}

.lecture {width: 100%; padding: 1%;display:block }

.blocgauche {width: 43.5%; padding: 1%;float: left;}
 
.blocdroit {width: 43%;padding: 1%; float: right; background: linear-gradient(#2d3334, #202627); padding-bottom:4%; margin-bottom:2%;margin-right:1%; border-radius:2em;}
.blocbas {width: 97%;padding: 2%; margin: auto; display:block; clear:both}

article {border: solid  #ebfaf5; border-radius: 1em;background-color: rgb(185, 183, 183,0.1); border-width: thin ;padding-top: 0; margin: auto;}
#acentrer {text-align: center; color: #ebfaf5; margin-top: 2%; }

.jackpetit {width: 8%; padding-top: 2%;}
.jackpetit:hover{ transform: scale(1.5); -webkit-transform: scale(1.5) ;transform: scale(1.5);}

#sousblocbas {text-align: center; margin: 5%; }


#standard {font-weight: bold; text-align: center;}

#centre {max-width: 50%; margin-left:20%; clear:both; text-align: center;}

.noschiens {display: flex; justify-content: space-around; margin-top:1%;padding-top:1%;}
#voirchiens { background: linear-gradient(##272c2d, #1d2122);margin-top:2%; padding-top:2%; margin-bottom:2%; width:98%; }
.reduire { max-width: 80%;flex-shrink: 2; flex-basis: 10%; margin-top: 8%}
img.reduire:hover { transform: scale(2); -webkit-transform: scale(2) ;transform: scale(2);}

.pedigree {text-align: center; border: solid  #ebfaf5; border-radius: 1em;background-color: rgb(185, 183, 183,0.2); border-width: thin ; justify-content: space-around; margin: 0.5%; color:  #ebfaf5 ;min-width: 15%;}

.jackpluspetit {width: 80%; padding-top: 0,5%; margin-top: 1%;}
img.jackpluspetit:hover  { transform: scale(1.2); -webkit-transform: scale(1.2) ;transform: scale(1.2);}

#sousblocbas {text-align: center; margin: 5%;}

#orthographe {visibility: hidden; text-align: center;}

/*CSS POUR LIRE LA SUITE*/


#lirelasuite  {
  cursor: pointer; 
  width:120px;
  background-color: #272c2d;
  text-decoration: none;
  border: 1px solid; color: #ebfaf5;
  padding: 3px 10px;
  border-radius: 10px;
  margin-left:3px
 
  }
  
  #lirelasuite:hover {background-color:#1d2122;}
  
  button:hover{background-color:#1d2122;}
  
  #informationslecture{
    text-align: center; ; width:90%; margin:auto
  }
  
  #popuplecture{
    display: none;
    background: linear-gradient(rgba(0, 0, 0, 0.1), #272c2d);
    background-color: linear ;
  }
  .popup-containerlecture{
    height: auto;
    width: 100%;
    display: block;
    text-align:left;
    
  }
  .popuplecture{
    padding: 1%o;
    width: 100%;
    margin:auto;
    text-align:center
  }
  .close-popuplecture{
    display: flex;
    justify-content: flex-end;
    padding: 2%;
    margin-right: 5%;
    color: #ebfaf5;
  }
  
  #pourfermerlecture{color: #ebfaf5; text-decoration: none; font-size: large;}
  

/* FENETRE AVERTISSEMENT COOKIES*/

.cookie {
    display:block;
  text-align :center;
  margin-right:2%;
  margin-left:auto;
  width: 98%;
  padding:0%;
background: linear-gradient(180deg, rgba(39,44,45,0.44021358543417366) 0%, rgba(39,44,45,0.8463760504201681) 18%, rgba(39,44,45,0.896796218487395) 38%, rgba(39,44,45,0.938813025210084) 62%, rgba(39,44,45,0.8715861344537815) 84%, rgba(39,44,45,0.3701855742296919) 100%);
  color: #ebfaf5;
  position: fixed;
  bottom: 50px;
  font-size:smaller;
  }
 
.cookies {width: 8%; margin-top: 3px;margin-bottom: -5px; padding-bottom: 0;}


#btncookie {
  cursor: pointer; 
  width: 20%; margin: 2%;background-color: #272c2d;
  height: auto;
  margin-top: 5px;
  margin-bottom:20px;
  border-radius: 2em  ;color: #ebfaf5; text-decoration: none;  border: solid  #ebfaf5; border-radius: 2em; border-width: thin ; font-size: small
}

button:hover{background-color:rgba(128, 128, 128, 0.41);}



/* PAGE ACHAT*/
#engros {text-align: center;font-size: larger; line-height: 200%; color:  #ebfaf5;}

#achat { clear: both; width: 98%;margin: 1%; padding: 1%;}
#sectionachat {width :98%; margin : auto; display :flex; justify-content :space-around; margin:1%}
#asavoir {width: 20%;float: left;border: solid #ebfaf5; border-radius: 1em; border-width: thin ;background-color: rgb(185, 183, 183, 0.2);padding: 1%; color:  #ebfaf5;}
#adroitedeasavoir {width: 75%; float: right; text-align: center;border: solid  #ebfaf5; border-radius: 1em ; border-width : thin; padding: 1%; }
#poubelle {width: 10%;}
#millionsdamis {width: 30%; text-align: center; margin: auto;}
.millionsdamis {display: flex;}



/*PAGE  ACTU CONTACT*/


#enanglais { font-size: medium; font-style: italic;  padding: 1%;margin-top: 3%; margin-bottom: 3%; text-align: center;}
.carte {display: block; margin: auto; text-align: center;}
iframe {width: 95%; }
.rdv {text-align: center; margin-top: 2%; margin-bottom: 2%;}
#beber{clear:both; display:flex; text-align: center; max-width:20%; margin:auto;}


/* CSS POUR PHOTO À OUVRIR */


#afficherportee  {
cursor: pointer; 
width: 30%; margin: 2%;background-color: grey;
height: auto;
margin-top: 5px;
margin-bottom:20px;
border-radius: 2em;color:#ebfaf5; text-decoration: none;  border: solid #ebfaf5 ; border-radius: 2em; border-width: thin ; font-size: small
}

#afficherportee:hover {background-color:#1d2122;}

button:hover{background-color:#1d2122;}

#informationsportee{
  text-align: center;
}

#popup{
  display: none;
  background: linear-gradient(rgba(0, 0, 0, 0.264), #1d2122);
  background-color: linear ;
}
.popup-container{
  height: auto;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: black 70%;
}
.popup{
  padding: auto;
  width: 90%;
}
.close-popup{
  display: flex;
  justify-content: flex-end;
  padding: 2%;
  margin-right: 5%;
  color:#ebfaf5;
}

#pourfermer{color: white; text-decoration: none; font-size: large;}
.popup-btn{
  cursor: pointer; 
  display: inline-block;
  text-decoration: none;
  border: 2px solid; color: #ebfaf5;
  padding: 5px 15px;
  border-radius: 20px;
  margin: 10px 0px;
  transition: .2s all ease-in;
}
.popup-btn:hover{
  color: grey;
}
.saillie { width: 80%; text-align: center; margin: auto;}



/*FORMULAIRE*/
.mail {text-align: center; clear: both;padding: 1%; margin-bottom: 2%; color:whitesmoke; border: solid #ebfaf5; border-radius: 2em; background: linear-gradient(#545c5e30, #1d2122); border-width: thin ; margin: 2%; font-size: small; text-decoration: none;}
.zonetexte {width: 100%;}
input {display:inline-flex; text-align: center; width: 20%; background-color:#ebfaf5; margin-bottom:10px;}
.zonetexte {background-color: #ebfaf5; color: black;outline: #ebfaf5;}
#idprenom {display:none;}
.questionhumaine {font-size:0.7em; font-style:italic;padding:0; margin-top:-10px;}

fieldset {border: none; text-align: center; }
#envoi{border: 1px solid #ebfaf5; color: black;
  padding: 5px 15px;
  border-radius: 20px;
  margin: 10px 0px;
    width:auto;
    text-align:center;
}
#envoi:hover {background-color:#555B61;transform: scale(1.2); -webkit-transform: scale(1.2) ;transform: scale(1.2); color:#cecab;}
.messageenvoye { text-align:center; font-size:2em; margin-top:-4.5%;}

/*PAGE EXPO RÉSULTATS*/

.expo {line-height: 200%;}
span { font-style: italic; font-size:1.3em; font-weight:bold}