body {
  /*change la couleur du fond*/
  background-color: rgb(160, 154, 154);
}

header {
  /*met le textre au centre*/
  text-align: center;
}

.boutton {
  /*permet d'avoir la mise en forme des 
  boutton de ma navigation*/
  color: white;
  text-decoration: none;
  padding: 10px 20px;
  padding-top: 20px;
  padding-bottom: 20px;
}

.head {
  /*permet d'avoir la mise en forme de l'en-tête*/
  text-align: center;
}

#photo25 {
  /*change la taille de l'image*/
  width: 25%;
}

.photo80 {
  /*change la taille de l'image*/
  width: 80%;
}

.photo1400px {
  /*change la taille de l'image*/
  width: 1400px;
}

.iconique {
  /*change la taille de l'image*/
  width: 80%;
}

#horloge {
  /*met au centre l'horloge du pied de page*/
  text-align: center;
}

video {
  /*met au centre et change la taille de la video*/
  display: block;
  margin: auto;
  width: 50%;
}

.video {
  text-align: center;
}

nav {
  /*met en forme ma navigation*/
  background-color: red;
  color: white;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.marque {
  /*permet d'avoir les titre et image 
  sur une même ligne avec un espace égal*/
  column-count: 4;
  text-align: center;
  padding-top: 2cm;
}

article {
  /*met en forme article*/
  margin-right: 20px;
  text-align: justify;
  margin-top: 20px;
  display: flex;
  align-items: center;
}

.img {
  /*met en forme ma classe img*/
  float: left;
  margin-left: 50px;
  margin-right: 40px;
}

.text {
  /*met en forme ma classe texte*/
  font-size: 150%;
}

.center {
  display: block;
  text-align: center;
}

nav :hover {
  /*permet de changer l'apparence de la case sur 
  laquelle nous somme dans le menu nav*/
  color: white;
  text-decoration: none;
  border: 1px solid rgb(255, 255, 255);
  padding: 10px 30px;

}

.menuActif {
  /*permet de changer l'apparence de la page active dans ma nav*/
  color: white;
  text-decoration: none;
  border: 1px solid rgb(245, 245, 245);
  padding: 10px 30px;

}



@media screen and (max-width:600px) {

  /*permet de changer la mise en page du site*/
  img {
    display: none;
  }

  nav {
    flex-direction: column;
  }
}



/*****carrousel 3d avec navigation*****/

* {
  box-sizing: border-box
}


img {
  max-width: 100%
}





.caroussel_diapo input {

  position: absolute;
  left: -9999px
}


.caroussel_diapo {

  text-align: center;
  display: block;
  margin: auto;

}


.contenu_carou {

  width: 500px;
  height: 332px;
  perspective: 4000px;
  display: block;
  margin: auto;

}


.caroussel {

  transform-style: preserve-3d;
  position: relative;
  width: 500px;
  height: 332px;
  transition: 1s;

}

.caroussel img {

  position: absolute;
  top: 0;
  left: 0;
  outline: 1px solid transparent;
  backface-visibility: hidden;
  transition: 1s;

}

.caroussel img {

  filter: blur(3px);
  opacity: .8
}

.caroussel img:nth-child(1) {
  transform: translate3d(0, 0, 540px) scale(.8)
}

.caroussel img:nth-child(2) {
  transform: rotateY(45deg) translateZ(540px) scale(.8)
}

.caroussel img:nth-child(3) {
  transform: rotateY(90deg) translateZ(540px) scale(.8)
}

.caroussel img:nth-child(4) {
  transform: rotateY(135deg) translateZ(540px) scale(.8)
}

.caroussel img:nth-child(5) {
  transform: rotateY(180deg) translateZ(540px) scale(.8)
}

.caroussel img:nth-child(6) {
  transform: rotateY(225deg) translateZ(540px) scale(.8)
}

.caroussel img:nth-child(7) {
  transform: rotateY(270deg) translateZ(540px) scale(.8)
}

.caroussel img:nth-child(8) {
  transform: rotateY(315deg) translateZ(540px) scale(.8)
}

.caroussel_diapo input[type=radio]+label {

  cursor: pointer;
  background: hsl(203, 77%, 81%);
  display: inline-block;
  width: 20px;
  border-radius: 50%;
  height: 20px
}

.caroussel_diapo input[type=radio]:checked+label {

  background: hsl(203, 77%, 61%)
}

.caroussel_diapo label {

  background: hsl(203, 77%, 61%)
}



.caroussel_diapo input[name="rotation"]:checked~.contenu_carou .caroussel img:nth-child(n) {

  filter: drop-shadow(12px 12px 7px hsla(0, 0%, 0%, .5))
}

/*gauche*/
.caroussel_diapo #carou_un:checked~.contenu_carou .caroussel {
  transform: translateZ(-540px)
}

.caroussel_diapo #carou_deux:checked~.contenu_carou .caroussel {
  transform: translateZ(-540px) rotateY(-45deg)
}

.caroussel_diapo #carou_trois:checked~.contenu_carou .caroussel {
  transform: translateZ(-540px) rotateY(-90deg)
}

.caroussel_diapo #carou_quatre:checked~.contenu_carou .caroussel {
  transform: translateZ(-540px) rotateY(-135deg)
}

.caroussel_diapo #carou_cinq:checked~.contenu_carou .caroussel {
  transform: translateZ(-540px) rotateY(-180deg)
}

.caroussel_diapo #carou_six:checked~.contenu_carou .caroussel {
  transform: translateZ(-540px) rotateY(-225deg)
}

.caroussel_diapo #carou_sept:checked~.contenu_carou .caroussel {
  transform: translateZ(-540px) rotateY(-270deg)
}

.caroussel_diapo #carou_huit:checked~.contenu_carou .caroussel {
  transform: translateZ(-540px) rotateY(-315deg)
}


/*droite*/
.caroussel_diapo #carou_un:checked~.contenu_carou .caroussel img:nth-child(1) {
  transform: translateZ(540px) scale(1);
  opacity: 1
}

.caroussel_diapo #carou_deux:checked~.contenu_carou .caroussel img:nth-child(2) {
  transform: rotateY(45deg) translateZ(540px) scale(1);
  opacity: 1
}

.caroussel_diapo #carou_trois:checked~.contenu_carou .caroussel img:nth-child(3) {
  transform: rotateY(90deg) translateZ(540px) scale(1);
  opacity: 1
}

.caroussel_diapo #carou_quatre:checked~.contenu_carou .caroussel img:nth-child(4) {
  transform: rotateY(135deg) translateZ(540px) scale(1);
  opacity: 1
}

.caroussel_diapo #carou_cinq:checked~.contenu_carou .caroussel img:nth-child(5) {
  transform: rotateY(180deg) translateZ(540px) scale(1);
  opacity: 1
}

.caroussel_diapo #carou_six:checked~.contenu_carou .caroussel img:nth-child(6) {
  transform: rotateY(225deg) translateZ(540px) scale(1);
  opacity: 1
}

.caroussel_diapo #carou_sept:checked~.contenu_carou .caroussel img:nth-child(7) {
  transform: rotateY(270deg) translateZ(540px) scale(1);
  opacity: 1
}

.caroussel_diapo #carou_huit:checked~.contenu_carou .caroussel img:nth-child(8) {
  transform: rotateY(315deg) translateZ(540px) scale(1);
  opacity: 1
}