*{
  margin:0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

/*Mise en forme pour le body*/

body{
  padding: 0;
  margin: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Police d'écriture a utiliser dans les pages */
  font-size: 18px;
}


#page{
  border: 0;
  overflow: hidden; /* on supprime le surdepassement */
  width: auto; /* ont definit la largeur en automatique */
  height: 100vh; /* ont définit la hauteur en valeur et hauteur du navvigateur */
  color: #FFF;
  background-repeat: no-repeat; /* interdir l'image de se repeté  */
  background-position: center; /* centrer l'image */
  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8) 100%), url("../images/D1.jfif"); /* on applique la couleur de fond de l'image ensuite on insère l''image dans la page */
}

#page h3{
  color: #FFF;
  display: inline-block;
  vertical-align: middle;
  margin: 10% 8%;
  font-size: 4.6rem;
  max-width: 100%;
  padding: 5px;
  animation: UpText 0.5s linear; /* ont démare l'énement de l'annimation */
}

/* ont recherche la clé ou l'indice de l'annimation en utilisant @keyframe suivi du nom de l'annimation */
@keyframes UpText{
  /* départ de l'annimation */
  from{
    transform: translateY(-10px);
  }
/* arriver de l'annimation */
  to{
    transform: translateY(0);
  }
}



/*Publication*/

#publication{
  border: 0;
  overflow: hidden;
  width: auto;
  height: auto;
  padding: 8px;
  max-width: 100%;
}

#publication ul{
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

#publication ul ol{
  text-align: left;
}

#publication ul > li{
  display: inline-block;
  vertical-align: top;
  margin: 2px 5px;
}

#publication ul li > div{
  border: 0px;
  width: 400px;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 2px 2px 0px 2px #CCC;
  text-align: left;
}

#publication div > .imageFond{
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  display: block;
  width: auto;
  height: 200px;
}

#publication div > .imageFond img{
  width: 100%;
  height: auto;
  transition: 0.5s;
}

#publication div > .imageFond img:hover{
  filter: grayscale(100%) blur(1px); /* ont définit le filtre noir et blanc et le flou sur les images lors du survole */
  cursor: pointer;
}

#publication div > .texte{
  padding: 5px;
  display: block;
  font-size: 16px;
  text-align: left;
}

#publication a{
  display: inline-block;
  width: auto;
  border-radius: 8px;
  padding: 10px;
  color: #FFF;
  background-color: #000;
  text-decoration: none;
 /* float: right;*/
}


/*photo*/
#photo{
  border: 0;
  overflow: hidden;
  width: auto;
  height: auto;
  padding: 8px;
  max-width: 100%;
}
#photo ul{
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

#photo ul > li{
  display: inline-block;
  vertical-align: top;
  margin: 2px 6px;
  animation: UpText 0.5s linear;
}
#photo ul li > .date{
  display: block;
  width: auto;
  overflow: hidden;
  text-align: center;
  background-color: #000;
  color: #FFF;
  padding: 6px;
}
#photo ul li > .profile{
  display: block;
  width: auto;
  height: 300px;
  overflow: hidden;
}
#photo ul li .profile > img{
  width: auto;
  height: 300px;
}


/*A rpops*/
#appropos{
  margin: 3% auto;
  padding: 10px;
  text-align: center;
  color: #000;
  width: 399px;
  font-size: 20px;
}

/*Cv*/

.cvdocument iframe{
  display: block;
  margin: 3px auto;
}