body {
  font-family: 'Open Sans', sans-serif;
  /* background-color: #1F1A78; */
  width: 1080px;
  margin: 0 auto;
  color: white;
  background-image: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/77d69b3e-e906-424b-97f8-ea2bbbd0a0c9/d7mcg4p-ec7ce4dd-2244-4536-bb98-004ca6c8b358.jpg/v1/fill/w_1414,h_565,q_70,strp/ghibli_parade__by_level_up_project_d7mcg4p-pre.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9MTYwMCIsInBhdGgiOiJcL2ZcLzc3ZDY5YjNlLWU5MDYtNDI0Yi05N2Y4LWVhMmJiYmQwYTBjOVwvZDdtY2c0cC1lYzdjZTRkZC0yMjQ0LTQ1MzYtYmI5OC0wMDRjYTZjOGIzNTguanBnIiwid2lkdGgiOiI8PTQwMDAifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6aW1hZ2Uub3BlcmF0aW9ucyJdfQ.vMdV90tks6oO_F2Ub2y_SwX9DAqfavGCR6GxQ4Op-4g);
  /* -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px); */
}

/* font-family: 'Bubblegum Sans', sans-serif;
font-family: 'East Sea Dokdo', sans-serif;
font-family: 'Open Sans', sans-serif;*/

/* en-tete */
header {
  background-color: #2A26A6;
  height: 130px;
  position: relative; 
}
#logo {
  height: 80px;
  position: relative;
  top: 22px;
  left: 22px;
}
#titre {
  height: 40px;
  position: relative;
  top: 8px;
  left: 27px;
}
#slogan {
  height: 29px;
  z-index: 6;
  position: relative;
  top: 72px;
  left: -392px;
}

h1 {
  color: #d904b5;
  margin-top: 10px;
  font-family: 'Bubblegum Sans', sans-serif;
  font-size: 45px;
  margin: 10px;
}
h2 {
  color: #ee05f2;
  font-family: 'East Sea Dokdo', sans-serif;
  font-size: 35px;
  margin: 10px 175px;
}

/* navigation */
nav {
  background-color: #2A26A6;
  height: 50px;
  padding: 5px;
  position: sticky;
  top: 0px;
  z-index: 5;
  border-bottom: 3px solid #d904b5;
  font-family: 'Bubblegum Sans', sans-serif;
}
nav ul {
  display: flex;
  justify-content: flex-end;
}
nav li {
  list-style: none;
  padding: 10px;
  margin: 6px;
  position: relative;
  top: -17px;
}
nav li a {
  text-decoration: none;
  color: white;
  font-size: 22px;
  text-shadow: 0 0 7px #fff, 
            0 0 10px #fff, 
            0 0 42px #f2e6d0,   
            0 0 77px #f2e6d0, 
            0 0 100px #f2e6d0;
}
nav li a:hover {
  text-shadow: 0 0 7px #fff, 
            0 0 10px #9688f2, 
            0 0 42px #d904b5,   
            0 0 77px #d904b5, 
            0 0 100px #d904b5;
}
nav li a:focus {
  color: #d904b5;
}
.active {
  color: #d904b5;
}




/* page Accueil */
main {
  position: relative;
  top: 30px;
  box-shadow: 0px 0px 20px 6px #ee05f2;
  padding: 10px;
  background-color: rgba(31,	26,	120, 0.9);
}

#img_main {
  width: 378px;
  margin: 10px;
  position: relative;
  margin-bottom: 35px;
}
main a {
  color: white;
  text-decoration: none;
}
#description {
  position: absolute;
  top: 65px;
  left: 414px;
  padding: 39px;
}
#description a, #references {
  border-bottom: 2px solid;
}

#description a:hover, #references:hover {
  background: #d904b5;
  border-bottom: none;
}
#fleche_bas {
  position: absolute;
  width: 85px;
  right: 290px;
  top: 500px;
  transition: top 0.5s ease-out;
}
#fleche_bas:hover {
  position: absolute;
  right: 290px;
  top: 518px;
}

#coupdecoeur {
  display: flex;
  justify-content: center;
  margin-bottom: 134px;
}
#titre_coupdecoeur {
  position: relative;
  left: 25px;
  margin: 10px 0;
  font-size: 50px;
}
#coupdecoeur a figure figcaption {
  margin-bottom: -102px;
}

/* Affiches coups de coeur */
#coupdecoeur a figure {
  font-size: 18px;
  font-weight: 200;
  margin-left: 15px;
  margin-right: 15px;
}

.affiche {
  height: 250px;
  margin-bottom: 6px;
  opacity: 0.8;
  display: inline-block;
  will-change: transform;
  overflow: hidden;
  transition: 0.3s ease-in-out;
  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
}    

.affiche:hover {
  opacity: 1;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  transform: scale(0.95);
}





/* page contact */
#form_contact { /*grande div autour du formulaire = img + form*/
  margin: 20px auto 28px auto;
  display: flex;
  align-items: center;
  width: 700px;
  /* border: 2px solid #ee05f2;
  border-radius: 5%;
  box-shadow: 0px 0px 20px 6px #ee05f2; */
}
#img_form {
  width: 48%;
  object-fit: cover;
  height: 523px;
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
}
#contact { /*form*/
  width: 50%;
  display: flex;
  flex-direction: column;
  padding: 5px 20px;
  border: 2px solid #ee05f2;
  box-shadow: inset 0px 0px 20px 6px #ee05f2;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
}

#en-tete { /*div prenom et nom*/
  display: flex;
  margin-top: 10px;
}
.prenom, .nom {
  display: flex;
  flex-direction: column;
  width: 145px;
}
.nom {
  margin-left: 24px;
}
#prenom, #nom {
  width: 100%;
}

.reponse_mail {
  text-align: center;
  text-shadow: 2px 2px 1px #8d0576;
  font-size: 20px;
  border: 1px solid;
  padding: 10px 20px;
  width: 338px;
  position: relative;
  left: 342px;
  border-radius: 13px;
  box-shadow: 3px 4px 3px 1px #ee05f2;
  margin-bottom: 33px;
}

input {
  margin-bottom: 10px;
  margin-top: 2px;
  height: 23px;
  border-radius: 3px;
  border: none;
}
input:focus, textarea:focus {
  box-shadow: 0px 0px 3px 2px #ee05f2;
}
label {
  display: block;
  text-transform: uppercase;
  cursor: pointer;
  margin: 5px 0;
}
#motif_contact {
  display: block;
  text-transform: uppercase;
  margin: 0 0 2px 0;
}
.radio {
  display: flex;
  justify-content: flex-end;
  flex-direction: row-reverse;
  margin-bottom: -7px;
}
.titre_radio {
  text-transform: none;
}
#bouton {
  color: white;
  border: solid 1px #9688f2;
  background: #9688f2;
  border-radius: 15px;
  width: 205px;
  height: 30px;
  box-shadow: 0px 4px 0px #f2e6d0;
  position: relative;
  left: 65px;
  margin-bottom: 20px;
  transition: all 0.2s;
}
#bouton:hover {
  background-color: #ee05f2;
  box-shadow: 0px 1px 0px white;
  border: 2px solid;
  position: relative;
  top: 5px;
  border: 1px solid;
}

form span {
  color: red;
}
#message {
  margin-top: 2px;
  margin-bottom: 15px;
  width: 99%;
  height: 118px;
}





/* page Partenaires */
#contenu_references {
  margin: 0 60px 50px 60px;
}
.titres_partenaires {
  text-align: center;
  font-size: 41px;
  margin-top: 36px;
}
.texteGroupe {
  width: 750px;
  margin: 0 auto 47px auto;
}
#texteMotivation {
  margin-bottom: 25px;
}
#descriptionPartenaires {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.photo_partenaires {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.photo_partenaires figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 0;
}
.photo_partenaires figure img {
  width: 200px;
  border-radius: 5%;
  filter: grayscale(0.8);
  margin-bottom: 5px;
  transform: rotate(-20deg);
}
.photo_partenaires figure img:hover {
  filter: none;
  box-shadow: 0px 0px 20px 6px #ee05f2;
}
.nomEstelleNolan, #nomLucie {
  font-weight: bold;
  font-size: larger;
  margin-top: 0px;
  margin-bottom: 3px;
}
.nomEstelleNolan {
  margin-top: 34px;
}
#nomLucie {
  margin-top: 25px;
}
.lienSAE105, .lienSAE106 {
  color: white;
  border: solid 1px #9688f2;
  background: #9688f2;
  border-radius: 20px;
  box-shadow: 0px 4px 0px #f2e6d0;
  text-align: center;
  transition: all 0.2s;
}
.lienSAE105 {
  height: 30px;
  padding: 4px 4px 0 4px;
  width: 130px;
}
.lienSAE106 {
  height: 30px;
  padding: 5px 5px 0px 5px;
  width: 138px;
}
.lienSAE105:hover, .lienSAE106:hover {
  background-color: #ee05f2;
  box-shadow: 0px 1px 0px white;
  border: 2px solid;
  position: relative;
  top: 5px;
  border: 1px solid;
}
#jo {
  height: 53px;
  padding: 4px 10px 0px 10px;
  width: 112px;
}
#profLayton {
  padding: 4px 0px 20px 0px;
}

#rendu_SAE106 {
  display: flex;
  justify-content: space-evenly;
}






/* page Galerie et Contact*/
#image, .titre_champ, #bouton, .titre_radio {
  cursor: pointer;
}





/* page Galerie */
#form_galerie { 
  margin: 30px auto;
  width: 300px;
  display: flex;
  flex-direction: column;
  margin-bottom: 35px;
  border: 2px solid #ee05f2;
  border-radius: 15px;
  box-shadow: inset 0px 0px 20px 6px #ee05f2;
  padding: 15px 20px;
}
#telecharge_img {
  height: 30px;
  box-shadow: 0px 4px 0px #f2e6d0;
  width: 155px;
  margin: 0 auto 10px auto;
  border-radius: 15px;
  border: solid 1px #9688f2;
  background: #9688f2;
  transition: all 0.2s;
  color: white;
}
#telecharge_img:hover {
  background-color: #ee05f2;
  box-shadow: 0px 1px 0px white;
  position: relative;
  top: 5px;
  border: 1px solid;
}

#galerie {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 0 50px;
}
.img_galerie {
  width: 145px;
  filter: grayscale(0.8);
  border-radius: 20px;
  margin-bottom: 50px;
  margin: 30px;
  transition : width 1s ease-out;
}
.img_galerie:hover {
  width: 24%;
  filter: none;
  border-radius: 0;
}





/* page Références */
#mainReferences {
  text-align: center;
}
.imgReferences {
  width: 25px;
}






/* pied de page */
footer {
  background-color: #2A26A6;
  color: white;
  border-top: 3px solid #f2e6d0;
  margin-top: 55px;
}
footer p {
  padding: 0 10px;
  margin-top: 0px;
}
footer ul {
  display: flex;
  justify-content: center;
}
footer li {
  list-style: none;
}
#references {
  color: white;
  text-decoration: none;
}
#retourHaut img {
  width: 62px;
  position: fixed;
  right: 33px;
  bottom: 85px;
  transition: bottom 0.5s ease-out;
}
#retourHaut img:hover {
  bottom: 100px;
}