body 
{
  font-family:  Dayrom, FreeMono, monospace; /*les polices de la pages, plusieurs choix selon navigateur*/
  color : #FFB04C;
  width: 100%;
}

*
{
  margin: 0;/*afin de e pas avoir d'espace par defaut */
}

html
{
  scroll-behavior: smooth; /*scroll stylisé */
}

ul li
{
  list-style: none;
  font-size: 2vmin;
  font-size: 2.5vmax;
  text-align: center;
}

a:link, a:active, a:hover, a:visited /*plus esthétique */
{
  text-decoration: none;
  color : #FFB04C;  
}

#top-page
{
  height: 100vh; /*1 page d'arrivée complète */
  background: url("../img/fond.webp");
  background-repeat: no-repeat;
  justify-content: space-between;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  display: flex;
  flex-direction: column;
  text-align: center;
}

h1 
{
  font-style: italic;
  color: #FFD440;
  font-size: 15vw;
}

h2
{
  font-size: 2vmin;
  font-size: 2.8vmax;
}

ul
{
  display: flex;
  justify-content: space-around;
  flex-wrap: nowrap;
  padding-top: 3vh;
  height: 10vh;  
}

#title
{
  flex-direction: column;
  display: flex;
  justify-content: center;
  align-items: center;
}

#fleche img 
{
  display: flex;
  justify-content: center;
  margin: auto;
  height: 25vh;    
}

#fleche2 
{
  position: fixed; /* Flèche permettant de remonter tout en haut */
  left: 0%;
  bottom: 2%;
  width: 5%;
}

#fleche2 img
{
  height: 10vw;
}

#page
{
  margin: 0;
  display: flex;
  align-items: center;
  flex-direction: column;
	background: linear-gradient(-45deg, #cf6646, #be3369, #1c88af, #1a9c7e); /*set des couleurs */
	animation: gradient 10s ease infinite; /*Pour l'animation */
  background-size: 200% 200%; /*afin d'avoir des couleurs moins vives */
}

#diapo,
#a-propos
{
  border: 5px solid #53687E;
}

#diapo
{
  margin-top: 5%;
  height: 60%;
  width: 75%;
  background-color:#495C70;
  border-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}


#photo
{
  max-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#photo img
{
  max-width: 100%;
  max-height: 100%;
  object-fit: cover; 
  width: 90%;
  margin: 2%;
}

#desc
{
  max-width: 45%;
  color: #83A4C5 ;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

#page h2
{
  margin-top: 3vh;
  border-bottom: 2px white solid;
  margin-bottom: 3vh;
  text-align: center;
}

#a-propos
{
  height: 60%;
  width: 75%;
  background-color:#495C70;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

#nous
{
  text-align: justify;
  text-indent: 5em;
  padding: 5% 5% 2% 5%;
  color: #83A4C5;
}

#nous + p
{
  text-align: center;
  padding: 2% 0% 3% 0%;
}

#a-propos img
{
  width: 85%;
  margin-bottom: 5%;
}


h3
{
  margin-bottom: 1%;
  text-align: center;
}

#contact
{
  width: 75%;
  display: flex;
  flex-direction: column;
  align-items:  center;
}

.form
{
  width: 96%; /*100% - les 4% du pading suivant */
  padding: 3% 2%;
  display: flex;
  flex-direction: column;
  background: #495C70;
  border: 5px solid #53687E;
  border-radius: 15px;
}
  
label
{
  display: flex;
  justify-content: space-between;
  padding: 2% 0%;
}

label input,
label textarea
{
  background: transparent;
	border: none;
	border-bottom: 1px dashed #83A4C5;
  overflow: hidden; 
  resize:none; /*sinon triangle  */
  outline: none; /*sinon bande blanche pas esthétique */
  width: 40%;
}

label *
{
  color: #83A4C5 ;
}

.form textarea:focus, 
.form input[type=text]:focus,
.form input[type=email]:focus
{
	border-bottom: 1px dashed #D9FFA9;
}

.form input[type=submit]
{
  border: none;
  background: #576E86;
  width: 15%;
}

.form input[type=submit]:hover
{
  background: #394D61;
}

#contact img
{
  margin-top: 3vh;
  margin-left: 5vw; /*car facteur sur la gauche de l'image  */
  width: 15vh;
  height: 15vh;
  display: flex;
  align-items: center;

}

#footer
{
  width: 70%;
  height: 10vh;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px red doted;
}


@media screen and (max-width: 992px) /* Pour le responsive (téléphone)*/
{
  #title h2, ul li
  {
    padding: 0% 5%;
  }
  #diapo
  {
    height: 75%;
  }
  .colonne {
    width: 100%;
  }
  #desc
  {
    max-width: 70%;
    font-size: 1.6vmax;
    padding: 5% 0;
  }
  #nous
  {
    padding: 5% 6% 5% 6%;
    text-indent: 4em;
  }
  p
  {
    font-size: 1.6vmax;
  }
  h3
  {
    margin-bottom: 5%;
    font-size: 1vmax;
  }
  #contact img
  {
    margin-top: 3vh;
    width: 10vh;
    height: 10vh;
  }
  #fleche2 img
  {
    height: 15vh;
  }
}

@keyframes gradient /* Pour transition background #page | ça donne des effets visuels de transition */
{
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}