/*

   ________________    ___  ___   ____ _    __      ____         ____    
  / ____/ ___/ ___/   |__ \|__ \ / __ \ |  / /___  / / /______  / __/____
 / /    \__ \\__ \    __/ /__/ // / / / | / / __ \/ / __/ ___/ / /_/ ___/
/ /___ ___/ /__/ /   / __// __// /_/ /| |/ / /_/ / / /_(__  ) / __/ /    
\____//____/____/   /____/____/\____/ |___/\____/_/\__/____(_)_/ /_/     
                                                                       

*/


*
{ box-sizing:border-box;
  padding:0;
  margin:0;
}

html {
  font-family: 'Montserrat', sans-serif;
  display: flex;
  flex-direction : column;
  align-items: center;
  overflow-x: hidden;
}

body
{ background-color: #ffffff;
  font-size:20px;
  color:#000000;
  width : 90vw;
  margin-bottom : 0;
}

.h1 {
  margin-bottom: 5vh;
  width : 100%;
  position : relative;
}
.h1 div {
  background-color: #f39223;
  height : 7vh;
  width : 30vw;
}
h1:first-child {
  font-family: 'Montserrat', sans-serif;
  font-size : 3em;
  text-shadow: -1em -0.25em #ffffff;
  color : black;
  width : 100%;
  position :absolute;
  top : 0.15em;
  left : -3em;
}

a:hover {
  background-color: #f39223;
}


header {
  background-color: white;
  text-align:center;
  padding-top : 20vh;
  height : 100vh;
  display : flex;
  justify-content :center;
  flex-direction : column;
  align-items : center;
  position :relative;
}

#buttons {
font-size : 0.75em;
position : absolute;
top : 5vh;
left : 5vh;

}

#on {
  color : #959595;
}


#off {
  cursor: pointer
}


header img {
  height : 12.5em;
}

header h1 {
  color: ;
  text-align: center;
  margin-top : 10vh;
  font-size : 3em;
  text-shadow: 0px 0px #ffffff;
  -webkit-text-stroke: 0;
  -webkit-text-stroke-color: #ffffff;
  -moz-text-stroke: 0;
  -moz-text-stroke-color: #ffffff;
  -ms-text-stroke: 0;
  -ms-text-stroke-color: #ffffff;
  -o-text-stroke: 0;
  -o-text-stroke-color: #ffffff;
}

header h3 {
  margin-top : 5vh;
  font-family: 'Montserrat', sans-serif;
  display : flex;
  flex-direction : column;
  justify-content: space-around;
  align-items: space-around;
} 

#activite {
  font-size : 2.5rem;
}

#titreActivite {
  display :flex;
  justify-content : space-between;
  align-items: center
}

#scroll {
  text-transform : uppercase;
  font-family: 'Montserrat', sans-serif;
  text-align : center;
  margin-top : 5vh;
  animation : flash 5s;
  animation-iteration-count: infinite;
  height:5vh;
  margin-bottom : 3vh;
}

.bandeau {
  width : 100vw;
  margin-left : -5vw;
}
.bandeau img {
  height :100%;
}

#mosaique {
  display :flex;
  justify-content :space-between;
  align-items: center;
  margin : 5vh auto 15vh auto;
  width : 85.5vw;
}

.mosaique {
  display:flex;
  align-items: flex-start;
  justify-content: flex-end;
  flex-direction : column;
  box-shadow: 5px 5px 2px #959595;
  transition : 0.5s ease-in-out;
}

.mosaique p {
  display : none;
  color :white;
  text-align : justify;
  padding : 2vh 2vh;
  max-width : 26.5vw;
  background-color : #f39223;
  margin : 0 2vh 2vh 2vh;
}

.mosaique:hover {
  align-items: flex-start;
  transition : 0.5s ease-in-out;
  box-shadow: 7.5px 7.5px 3px #959595;
  transform:scale(1.015);
  cursor : pointer;
}

.mosaique:hover h1 {
  font-size : 1em;
  text-shadow: 1px 1px #f39223;
  transition : font-size 0.5s;
}

.mosaique:hover p {
  display : block;
}

.mosaique h1 {
  text-transform : uppercase;
  z-index : 1000;
  color: #ffffff;
  font-size : 2.5em;
  position : static;
  text-shadow: 2.5px 2.5px #f39223;
  text-align : left;
  padding : 2vh 2vh;
  transition : font-size 0.5s;
}

#qui {
  height : 90vh;
  width : 26.5vw;
  background-image: url("./assets/img/GOLF_1-compressed.jpg");
  background-position : center;
  background-size: cover;
  background-repeat: no-repeat;
}

#mosaique > div:first-child {
    height : 90vh;
    display :flex;
    justify-content :space-between;
    align-items: space-between;
    flex-direction: column;
}

#mosaique_int {
  display :flex;
  justify-content :space-between;
  align-items: space-between;
  width : 56vw;
}

#contact, #presta {
  height : 42.5vh;
  width : 26.5vw;
}

#presta {
  background-image: url("./assets/img/P1080196-compressed.jpg");
  background-position : center;
  background-size: cover;
  background-repeat: no-repeat;
}

#contact {
  
  background-image: url("./assets/img/P1100780-compressed.jpg");
  background-position : top 0 right 15%;
  background-size: cover;
  background-repeat: no-repeat;
}

#projet {
  height : 42.5vh;
  width : 56vw;
  background-image: url("./assets/img/Sélection_20210317_LaChatre-10-compressed.jpg");
  background-position : right 0 top 50%;
  background-size: cover;
  background-repeat: no-repeat;
}

p {
  text-align:center;
  margin:5px 10px;
}

h1 {
  color:#f39223;
  text-align: center;
}
h2 {
  text-align:center;
}
h3 {
  text-align:center;
}
h4 {
  text-align:center;
}

img {
  height :200px;
}

a {
  text-decoration:none;
  color: #192134;
  padding: 5px 10px;
  margin-top: 15px;
}

footer {
  position : relative;
}

footer > img {
  position: absolute;
  height : 15vh;
  top : -7.5vh;
  left : -20vh;
}

#infos_footer {
  padding : 10vh 0;
  background-color : black;
  width : 100vw;
  margin-left : -5vw;
  margin-bottom : -5px;
  margin-top : 5vw;
  display : flex;
  justify-content: space-around;
  align-items: center;
  color : white;
  font-size : 0.75em;
}

#infos_footer div:first-child {
  font-size : 0.5rem;
}

#infos_footer div:first-child img {
  height : 10vh;
  width : auto;
}

footer a {
  text-decoration:none;
  border:0px;
  color: #ffffff;
  padding: 0px 0px;
  border-radius: 0px;
  margin-top: 0px;
  padding : 0.10em;
}
#infos_footer div {
  text-align : center;
}
#infos_footer div div {
  margin-top : 2vh;
}
#infos_footer div div a {
  font-size : 1.5em;
}

#infos_footer div p:last-child {
  margin-top : 5vh;
}

#retour {
  font-size : 1.5em;
  transition : 0.15s ease-in-out;
  margin : 1em 0 0.5em 0;
}

#retour a {
  color : black;
}

#retour a i {
  transition : 0.15s ease-in-out;
}

#retour a:hover{
  background-color: white;
  text-shadow : 1px 1.5px 1px #f39223;
  transition : 0.15s ease-in-out;
}

#retour a:hover i {
  text-shadow : -10px 0px black;
  transition : 0.15s ease-in-out;
}

#page {
  margin-bottom : 15vh;
}

#page h1{
  text-align : left;
  font-size : 3em;
  text-transform : uppercase;
  text-shadow: 2.5px 2.5px #000000;
}




/*
    ____                      ____                 __       
   / __ \____ _____ ____     / __ \________  _____/ /_____ _
  / /_/ / __ `/ __ `/ _ \   / /_/ / ___/ _ \/ ___/ __/ __ `/
 / ____/ /_/ / /_/ /  __/  / ____/ /  /  __(__  ) /_/ /_/ / 
/_/    \__,_/\__, /\___/  /_/   /_/   \___/____/\__/\__,_/   

*/

.presta {
  margin : 5vh 0;
  min-height : 250px;
  display :flex;
  justify-content: flex-start;
  align-items: flex-end;
}

#img_presta {
  height : 250px;
  width  : 400px;
  box-shadow: 2px 2px 1px #959595;
  align-self: flex-start;
  margin-right : 1vw;
  overflow: none;
}

.img_presta_circuit {
  background-image: url("./assets/img/Sélection_20210317_LaChatre-05-compressed.jpg");
  background-position : right 0 top 50%;
  background-size: cover;
  background-repeat: no-repeat;
}

.img_presta_presentation {
  background-image: url("./assets/img/Dualis-compressed.jpg");
  background-position : right 0 top 50%;
  background-size: cover;
  background-repeat: no-repeat;
}

.img_presta_photographie {
  background-image: url("./assets/img/P1050640-compressed.jpg");
  background-position : right 0 top 50%;
  background-size: cover;
  background-repeat: no-repeat;
}

.img_presta_tournage {
  background-image: url("./assets/img/P1000055inv-compressed.jpg");
  background-position : right 100% top 0%;
  background-size: cover;
  background-repeat: no-repeat;
}

.img_presta_studio {
  background-image: url("./assets/img/P1120379-compressed.jpg");
  background-position : right 50% top 50%;
  background-size: cover;
  background-repeat: no-repeat;
}

.img_presta_envie {
  background-image: url("./assets/img/Inauguration-compressed.jpg");
  background-position : right 50% top 0%;
  background-size: cover;
  background-repeat: no-repeat;
}

#img_presta h2 {
  text-transform : uppercase;
  z-index : 1000;
  color: #ffffff;
  font-size : 2em;
  position : static;
  text-shadow: 2.5px 2.5px #f39223;
  text-align : left;
  padding : 2vh 2vh;
}

#infos_short_presta {
  display:flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  width : 50vw;
}
#infos_short_presta p:nth-child(2) {
  text-align :left;
}

#infos_short_presta div {
  text-align : justify;
}

#infos_short_presta div a {
  color : #f39223;
  font-style: italic;
}
#infos_short_presta div a:hover {
  background-color: #f39223;
  color : #ffffff;
  font-style: italic;
}

.presta h3 {
  margin : 5px 10px;
}

#plus {
  background-color: #f39223;
  color : white;
  padding : 0.15em 0.30em;
  width : 100%;
  text-align: right;
  margin-bottom : 0;
}

#plus:hover {
  cursor : pointer;
}


/*
    ____                      __  ___      __        _         
   / __ \____ _____ ____     / / / (_)____/ /_____  (_)_______ 
  / /_/ / __ `/ __ `/ _ \   / /_/ / / ___/ __/ __ \/ / ___/ _ \
 / ____/ /_/ / /_/ /  __/  / __  / (__  ) /_/ /_/ / / /  /  __/
/_/    \__,_/\__, /\___/  /_/ /_/_/____/\__/\____/_/_/   \___/ 
            /____/                                             

*/

.histoire {
  margin : 5vh 0 10vh 0;
  display :flex;
  align-items: center;
  justify-content : space-between;
  width : 80vw ;
}

.histoire div {
  width : 65%;
}
.histoire p, .histoire li {
  text-align : justify;
  margin-bottom: 1em
}

.histoire ul {
  margin-left : 5vw;
}

.histoire img{
  height : 50vh;
  width : auto;
  box-shadow: 5px 5px 2px #959595;
}

#vehicules {
  margin : 5vh auto;
  display :flex;
  align-items: center;
  justify-content : space-between;
  width : 60vw ;
}
#vehicules img {
  height : 50vh;
  width : auto;
  box-shadow: 5px 5px 2px #959595;
}


/*
    ____                      ______            __             __ 
   / __ \____ _____ ____     / ____/___  ____  / /_____ ______/ /_
  / /_/ / __ `/ __ `/ _ \   / /   / __ \/ __ \/ __/ __ `/ ___/ __/
 / ____/ /_/ / /_/ /  __/  / /___/ /_/ / / / / /_/ /_/ / /__/ /_  
/_/    \__,_/\__, /\___/   \____/\____/_/ /_/\__/\__,_/\___/\__/  
            /____/                                                


*/

#contactForm {
  margin-bottom : 10vh;
}

#contactForm form, #contactForm form > div, #photos {
  display:flex;
  flex-direction :column;
  align-items: center;
}
#contactForm input, #contactForm textarea, #contactForm button, #contactForm select{
  width : 50%;
  padding: 10px;
  font-family: 'Montserrat', sans-serif;
  border : 2.5px solid #000000;
  box-shadow: -5px 5px #f39223;
  margin-bottom: 20px;
}

#contactForm input, #contactForm button {
  height : 45px;
}

#contactForm button {
  background-color: white ;
  color:#000000;
  width : 25%;
  transition : ease 500ms;
}

#contactForm button:hover { 
  background-color: white ;
  box-shadow: -5px 5px #000000;
  border : 2.5px solid #f39223;
  transform:scale(1.05);
}

#contactForm form > div, #photos {
  width : 100%;
}

#copiemail {
  display:flex;
  justify-content : center;
  align-items: center;
  flex-direction: column;
  margin-top : 50px;
  width : 25%;
}

#reseaux-sociaux {
  text-align :center;
  margin-bottom : 5vh;
  margin-top : 10vh;
  font-size : 1.5em;
}

#reseaux-sociaux a:hover {
  background-color :white;
}

#reseaux-sociaux #facebook:hover {
  text-shadow: 2px 2px #4064ac;
}
#reseaux-sociaux #messenger:hover {
  text-shadow: 2px 2px #0095f7;
}
#reseaux-sociaux #instagram:hover {
  text-shadow: 2px 2px #c82f8b;
}
#reseaux-sociaux #youtube:hover {
  text-shadow: 2px 2px #f70103;
}
#reseaux-sociaux #lien-site:hover {
  text-shadow: 2px 2px #f39223;
}

.js-copy {
  margin-top : 10px;
  padding: 10px;
  font-family: 'Montserrat', sans-serif;
  border : 2.5px solid #3a3a3c;
  box-shadow: -5px 5px #3a3a3c;
  margin-bottom: 20px;
  height : 45px;
  background-color: white ;
  color:#3a3a3c;
  width : 10%;
  transition : ease 500ms;
}

.js-copy : hover {
  background-color: white ;
  box-shadow: -5px 5px #fc7000;
  border : 2.5px solid #fc7000;
  transform:scale(1.05);
} 

.mail_ok {
  color : #77a464;
}


/*

    ____                      ____               _      __      
   / __ \____ _____ ____     / __ \_________    (_)__  / /______
  / /_/ / __ `/ __ `/ _ \   / /_/ / ___/ __ \  / / _ \/ __/ ___/
 / ____/ /_/ / /_/ /  __/  / ____/ /  / /_/ / / /  __/ /_(__  ) 
/_/    \__,_/\__, /\___/  /_/   /_/   \____/_/ /\___/\__/____/  
            /____/                        /___/                 

            */

#groupe-projets {
  display:flex;
  justify-content : space-around;
  flex-wrap: wrap;
  margin-bottom : 10vh;
}

.projet {
  margin-top : 10vh;
  width :560px;
  display :flex;
  flex-direction : column;
}

.projet h2 {
  background-color : #f39223;
  color : white;
  padding : 0.25em;
  margin-bottom : 0.5vh;
  text-shadow: 2.5px 2.5px #000000;
}

#infos_short_projet {
  width : 50%;
  margin : auto;
  opacity: 0;
  transition: opacity 0.5s;
}

.projet:hover #infos_short_projet {
  opacity:1;
  transition: opacity 0.5s;
}

#info_projet {
  display:flex;
  justify-content : space-between;
  align-items: center;
  background-color : black;
  color : white;
  margin-bottom : 0.25vh;
  font-size : 0.5em;
}

#info_projet a {
  padding : 0;
  color : white;
  margin : 5px 10px;
}
#info_projet a:hover {
  background-color : black;
}

#portfolio {
  height : 50vh;
  width : 35vw;
  background-image: url("./assets/img/Portfolio-compressed.jpg");
  background-position : center;
  background-size: cover;
  background-repeat: no-repeat;
}

#portfolio h1 {
  text-transform : uppercase;
  z-index : 1000;
  color: #000000;
  font-size : 2.5em;
  position : static;
  text-shadow: 2.5px 2.5px #f39223;
  text-align : left;
  padding : 2vh 2vh;
  transition : font-size 0.5s;
}
#portfolio:hover h1 {
  /*transition : 0.1s ease-in-out;*/
  font-size : 1em;
  text-shadow: 1px 1px #f39223;
  transition : font-size 0.5s;
}

/*
    ____                      __  ___           __  _                     __     __              __         
   / __ \____ _____ ____     /  |/  /__  ____  / /_(_)___  ____  _____   / /   _/_/ ____ _____ _/ /__  _____
  / /_/ / __ `/ __ `/ _ \   / /|_/ / _ \/ __ \/ __/ / __ \/ __ \/ ___/  / /   / _ \/ __ `/ __ `/ / _ \/ ___/
 / ____/ /_/ / /_/ /  __/  / /  / /  __/ / / / /_/ / /_/ / / / (__  )  / /___/  __/ /_/ / /_/ / /  __(__  ) 
/_/    \__,_/\__, /\___/  /_/  /_/\___/_/ /_/\__/_/\____/_/ /_/____/  /_____/\___/\__, /\__,_/_/\___/____/  
            /____/                                                               /____/                     
*/

#mentionsLegales, .texteLong {
  text-align : left;
  margin-top : 5vh;
}

#mentionsLegales h3 {
  margin-top: 3vh;
  margin-bottom : 1vh;
}





















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

body {   
  width : 98vw;
}

a:hover {
  background-color: #f39223;
}


header {
  background-color: white;
  text-align:center;
  padding-top : 20vh;
  height : 100vh;
  display : flex;
  justify-content :center;
  flex-direction : column;
  align-items : center;
  position :relative;
}

header img {
  height : 12.5em;
}

header h1 {
  color: ;
  text-align: center;
  margin-top : 10vh;
  font-size : 3em;
  text-shadow: 0px 0px #ffffff;
  -webkit-text-stroke: 0;
  -webkit-text-stroke-color: #ffffff;
  -moz-text-stroke: 0;
  -moz-text-stroke-color: #ffffff;
  -ms-text-stroke: 0;
  -ms-text-stroke-color: #ffffff;
  -o-text-stroke: 0;
  -o-text-stroke-color: #ffffff;
}

header h3 {
  margin-top : 5vh;
  font-family: 'Montserrat', sans-serif;
  display : flex;
  flex-direction : column;
  justify-content: space-around;
  align-items: space-around;
} 

#activite {
  font-size : 2.5rem;
}

#titreActivite {
  display :flex;
  justify-content : space-between;
  align-items: center
}

#scroll {
  text-transform : uppercase;
  font-family: 'Montserrat', sans-serif;
  text-align : center;
  margin-top : 5vh;
  animation : flash 5s;
  animation-iteration-count: infinite;
  height:5vh;
  margin-bottom : 3vh;
}

.bandeau {
  width : 100vw;
  margin-left : -5vw;
}
.bandeau img {
  height :100%;
}

#mosaique {
  display :flex;
  justify-content :space-between;
  align-items: center;
  margin : 5vh auto 15vh auto;
  width : 85.5vw;
}

.mosaique {
  display:flex;
  align-items: flex-start;
  justify-content: flex-end;
  flex-direction : column;
  box-shadow: 5px 5px 2px #959595;
  transition : 0.5s ease-in-out;
}

.mosaique p {
  display : none;
  color :white;
  text-align : justify;
  padding : 2vh 2vh;
  max-width : 26.5vw;
  background-color : #f39223;
  margin : 0 2vh 2vh 2vh;
}

.mosaique:hover {
  align-items: flex-start;
  transition : 0.5s ease-in-out;
  box-shadow: 7.5px 7.5px 3px #959595;
  transform:scale(1.015);
  cursor : pointer;
}

.mosaique:hover h1 {
  font-size : 1em;
  text-shadow: 1px 1px #f39223;
  transition : font-size 0.5s;
}

.mosaique:hover p {
  display : block;
}

.mosaique h1 {
  text-transform : uppercase;
  z-index : 1000;
  color: #ffffff;
  font-size : 2.5em;
  position : static;
  text-shadow: 2.5px 2.5px #f39223;
  text-align : left;
  padding : 2vh 2vh;
  transition : font-size 0.5s;
}

#qui {
  height : 90vh;
  width : 26.5vw;
  background-image: url("./assets/img/GOLF_1-compressed.jpg");
  background-position : center;
  background-size: cover;
  background-repeat: no-repeat;
}

#mosaique > div:first-child {
    height : 90vh;
    display :flex;
    justify-content :space-between;
    align-items: space-between;
    flex-direction: column;
}

#mosaique_int {
  display :flex;
  justify-content :space-between;
  align-items: space-between;
  flex-direction : column;
  width : 56vw;
}

#contact, #presta {
  height : 42.5vh;
  width : 26.5vw;
}

#presta {
  background-image: url("./assets/img/P1080196.JPG");
  background-position : center;
  background-size: cover;
  background-repeat: no-repeat;
}

#contact {
  
  background-image: url("./assets/img/P1100780.JPG");
  background-position : top 0 right 15%;
  background-size: cover;
  background-repeat: no-repeat;
}

#projet {
  height : 42.5vh;
  width : 56vw;
  background-image: url("./assets/img/Sélection_20210317_LaChatre-10.jpg");
  background-position : right 0 top 50%;
  background-size: cover;
  background-repeat: no-repeat;
}

p {
  text-align:center;
  margin:5px 10px;
}

h1 {
  color:#f39223;
  text-align: center;
}
h2 {
  text-align:center;
}
h3 {
  text-align:center;
}
h4 {
  text-align:center;
}

img {
  height :200px;
}

a {
  text-decoration:none;
  color: #192134;
  padding: 5px 10px;
  margin-top: 15px;
}

footer {
  position : relative;
}

footer > img {
  position: absolute;
  height : 15vh;
  top : -7.5vh;
  left : -20vh;
}

#infos_footer {
  padding : 10vh 0;
  background-color : black;
  width : 100vw;
  margin-left : -5vw;
  margin-bottom : -5px;
  margin-top : 5vw;
  display : flex;
  justify-content: space-around;
  align-items: center;
  color : white;
  font-size : 0.75em;
}

#infos_footer div:first-child {
  font-size : 0.5rem;
}

#infos_footer div:first-child img {
  height : 10vh;
  width : auto;
}

footer a {
  text-decoration:none;
  border:0px;
  color: #ffffff;
  padding: 0px 0px;
  border-radius: 0px;
  margin-top: 0px;
  padding : 0.10em;
}
#infos_footer div {
  text-align : center;
}
#infos_footer div div {
  margin-top : 2vh;
}
#infos_footer div div a {
  font-size : 1.5em;
}

#infos_footer div p:last-child {
  margin-top : 5vh;
}

#retour {
  font-size : 1.5em;
  transition : 0.15s ease-in-out;
  margin : 1em 0 0.5em 0;
}

#retour a {
  color : black;
}

#retour a i {
  transition : 0.15s ease-in-out;
}

#retour a:hover{
  background-color: white;
  text-shadow : 1px 1.5px 1px #f39223;
  transition : 0.15s ease-in-out;
}

#retour a:hover i {
  text-shadow : -10px 0px black;
  transition : 0.15s ease-in-out;
}

#page {
  margin-bottom : 15vh;
}

#page h1{
  text-align : left;
  font-size : 3em;
  text-transform : uppercase;
  text-shadow: 2.5px 2.5px #000000;
}




/*
    ____                      ____                 __       
   / __ \____ _____ ____     / __ \________  _____/ /_____ _
  / /_/ / __ `/ __ `/ _ \   / /_/ / ___/ _ \/ ___/ __/ __ `/
 / ____/ /_/ / /_/ /  __/  / ____/ /  /  __(__  ) /_/ /_/ / 
/_/    \__,_/\__, /\___/  /_/   /_/   \___/____/\__/\__,_/   

*/

.presta {
  margin : 5vh 0;
  min-height : 250px;
  display :flex;
  justify-content: flex-start;
  align-items: flex-end;
}

#img_presta {
  height : 250px;
  width  : 400px;
  box-shadow: 2px 2px 1px #959595;
  align-self: flex-start;
  margin-right : 1vw;
  overflow: none;
}

.img_presta_circuit {
  background-image: url("./assets/img/Sélection_20210317_LaChatre-05.jpg");
  background-position : right 0 top 50%;
  background-size: cover;
  background-repeat: no-repeat;
}

.img_presta_presentation {
  background-image: url("./assets/img/Dualis.png");
  background-position : right 0 top 50%;
  background-size: cover;
  background-repeat: no-repeat;
}

.img_presta_photographie {
  background-image: url("./assets/img/P1050640.JPG");
  background-position : right 0 top 50%;
  background-size: cover;
  background-repeat: no-repeat;
}

.img_presta_tournage {
  background-image: url("./assets/img/P1000055inv.jpg");
  background-position : right 100% top 0%;
  background-size: cover;
  background-repeat: no-repeat;
}

.img_presta_studio {
  background-image: url("./assets/img/P1120379.jpg");
  background-position : right 50% top 50%;
  background-size: cover;
  background-repeat: no-repeat;
}

.img_presta_envie {
  background-image: url("./assets/img/Inauguration.png");
  background-position : right 50% top 0%;
  background-size: cover;
  background-repeat: no-repeat;
}

#img_presta h2 {
  text-transform : uppercase;
  z-index : 1000;
  color: #ffffff;
  font-size : 2em;
  position : static;
  text-shadow: 2.5px 2.5px #f39223;
  text-align : left;
  padding : 2vh 2vh;
}

#infos_short_presta {
  display:flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  width : 50vw;
}
#infos_short_presta p:nth-child(2) {
  text-align :left;
}

#infos_short_presta div {
  text-align : justify;
}

#infos_short_presta div a {
  color : #f39223;
  font-style: italic;
}
#infos_short_presta div a:hover {
  background-color: #f39223;
  color : #ffffff;
  font-style: italic;
}

.presta h3 {
  margin : 5px 10px;
}

#plus {
  background-color: #f39223;
  color : white;
  padding : 0.15em 0.30em;
  width : 100%;
  text-align: right;
  margin-bottom : 0;
}

#plus:hover {
  cursor : pointer;
}


/*
    ____                      __  ___      __        _         
   / __ \____ _____ ____     / / / (_)____/ /_____  (_)_______ 
  / /_/ / __ `/ __ `/ _ \   / /_/ / / ___/ __/ __ \/ / ___/ _ \
 / ____/ /_/ / /_/ /  __/  / __  / (__  ) /_/ /_/ / / /  /  __/
/_/    \__,_/\__, /\___/  /_/ /_/_/____/\__/\____/_/_/   \___/ 
            /____/                                             

*/

.histoire {
  margin : 5vh 0 10vh 0;
  display :flex;
  align-items: center;
  justify-content : space-between;
  width : 80vw ;
}

.histoire div {
  width : 65%;
}
.histoire p, .histoire li {
  text-align : justify;
  margin-bottom: 1em
}

.histoire ul {
  margin-left : 5vw;
}

.histoire img{
  height : 50vh;
  width : auto;
  box-shadow: 5px 5px 2px #959595;
}

#vehicules {
  margin : 5vh auto;
  display :flex;
  align-items: center;
  justify-content : space-between;
  width : 60vw ;
}
#vehicules img {
  height : 50vh;
  width : auto;
  box-shadow: 5px 5px 2px #959595;
}


/*
    ____                      ______            __             __ 
   / __ \____ _____ ____     / ____/___  ____  / /_____ ______/ /_
  / /_/ / __ `/ __ `/ _ \   / /   / __ \/ __ \/ __/ __ `/ ___/ __/
 / ____/ /_/ / /_/ /  __/  / /___/ /_/ / / / / /_/ /_/ / /__/ /_  
/_/    \__,_/\__, /\___/   \____/\____/_/ /_/\__/\__,_/\___/\__/  
            /____/                                                


*/

#contactForm {
  margin-bottom : 10vh;
}

#contactForm form, #contactForm form > div, #photos {
  display:flex;
  flex-direction :column;
  align-items: center;
}
#contactForm input, #contactForm textarea, #contactForm button, #contactForm select{
  width : 50%;
  padding: 10px;
  font-family: 'Montserrat', sans-serif;
  border : 2.5px solid #000000;
  box-shadow: -5px 5px #f39223;
  margin-bottom: 20px;
}

#contactForm input, #contactForm button {
  height : 45px;
}

#contactForm button {
  background-color: white ;
  color:#000000;
  width : 25%;
  transition : ease 500ms;
}

#contactForm button:hover { 
  background-color: white ;
  box-shadow: -5px 5px #000000;
  border : 2.5px solid #f39223;
  transform:scale(1.05);
}

#contactForm form > div, #photos {
  width : 100%;
}

#copiemail {
  display:flex;
  justify-content : center;
  align-items: center;
  flex-direction: column;
  margin-top : 50px;
  width : 25%;
}

#reseaux-sociaux {
  text-align :center;
  margin-bottom : 5vh;
  margin-top : 10vh;
  font-size : 1.5em;
}

#reseaux-sociaux a:hover {
  background-color :white;
}

#reseaux-sociaux #facebook:hover {
  text-shadow: 2px 2px #4064ac;
}
#reseaux-sociaux #messenger:hover {
  text-shadow: 2px 2px #0095f7;
}
#reseaux-sociaux #instagram:hover {
  text-shadow: 2px 2px #c82f8b;
}
#reseaux-sociaux #youtube:hover {
  text-shadow: 2px 2px #f70103;
}
#reseaux-sociaux #lien-site:hover {
  text-shadow: 2px 2px #f39223;
}

.js-copy {
  margin-top : 10px;
  padding: 10px;
  font-family: 'Montserrat', sans-serif;
  border : 2.5px solid #3a3a3c;
  box-shadow: -5px 5px #3a3a3c;
  margin-bottom: 20px;
  height : 45px;
  background-color: white ;
  color:#3a3a3c;
  width : 10%;
  transition : ease 500ms;
}

.js-copy : hover {
  background-color: white ;
  box-shadow: -5px 5px #fc7000;
  border : 2.5px solid #fc7000;
  transform:scale(1.05);
} 

.mail_ok {
  color : #77a464;
}


/*

    ____                      ____               _      __      
   / __ \____ _____ ____     / __ \_________    (_)__  / /______
  / /_/ / __ `/ __ `/ _ \   / /_/ / ___/ __ \  / / _ \/ __/ ___/
 / ____/ /_/ / /_/ /  __/  / ____/ /  / /_/ / / /  __/ /_(__  ) 
/_/    \__,_/\__, /\___/  /_/   /_/   \____/_/ /\___/\__/____/  
            /____/                        /___/                 

            */

#groupe-projets {
  display:flex;
  justify-content : space-around;
  flex-wrap: wrap;
  margin-bottom : 10vh;
}

.projet {
  margin-top : 10vh;
  width :560px;
  display :flex;
  flex-direction : column;
}

.projet h2 {
  background-color : #f39223;
  color : white;
  padding : 0.25em;
  margin-bottom : 0.5vh;
  text-shadow: 2.5px 2.5px #000000;
}

#infos_short_projet {
  width : 50%;
  margin : auto;
  opacity: 0;
  transition: opacity 0.5s;
}

.projet:hover #infos_short_projet {
  opacity:1;
  transition: opacity 0.5s;
}

#info_projet {
  display:flex;
  justify-content : space-between;
  align-items: center;
  background-color : black;
  color : white;
  margin-bottom : 0.25vh;
  font-size : 0.5em;
}

#info_projet a {
  padding : 0;
  color : white;
  margin : 5px 10px;
}
#info_projet a:hover {
  background-color : black;
}

#portfolio {
  height : 50vh;
  width : 35vw;
  background-image: url("./assets/img/Portfolio.png");
  background-position : center;
  background-size: cover;
  background-repeat: no-repeat;
}

#portfolio h1 {
  text-transform : uppercase;
  z-index : 1000;
  color: #000000;
  font-size : 2.5em;
  position : static;
  text-shadow: 2.5px 2.5px #f39223;
  text-align : left;
  padding : 2vh 2vh;
  transition : font-size 0.5s;
}
#portfolio:hover h1 {
  /*transition : 0.1s ease-in-out;*/
  font-size : 1em;
  text-shadow: 1px 1px #f39223;
  transition : font-size 0.5s;
}

/*
    ____                      __  ___           __  _                     __     __              __         
   / __ \____ _____ ____     /  |/  /__  ____  / /_(_)___  ____  _____   / /   _/_/ ____ _____ _/ /__  _____
  / /_/ / __ `/ __ `/ _ \   / /|_/ / _ \/ __ \/ __/ / __ \/ __ \/ ___/  / /   / _ \/ __ `/ __ `/ / _ \/ ___/
 / ____/ /_/ / /_/ /  __/  / /  / /  __/ / / / /_/ / /_/ / / / (__  )  / /___/  __/ /_/ / /_/ / /  __(__  ) 
/_/    \__,_/\__, /\___/  /_/  /_/\___/_/ /_/\__/_/\____/_/ /_/____/  /_____/\___/\__, /\__,_/_/\___/____/  
            /____/                                                               /____/                     
*/

#mentionsLegales, .texteLong {
  text-align : left;
  margin-top : 5vh;
}

#mentionsLegales h3 {
  margin-top: 3vh;
  margin-bottom : 1vh;
}

}


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



}





/* les animations visuelles */

@-webkit-keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

@keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}