body{
  margin:0;
  padding:0;
  font-family: Degular, Arial, sans-serif;
  font-size:18px;
}

/*** RE-USE ***/
.fw{
  font-weight: bold;
}

.noMarge{
  margin:0;
}

.mainTitle{
  text-decoration: underline;
  text-align: center;
  margin-bottom: 50px;
}

.fs{
  font-size: 30px;
}

.mt-150{
  margin-top:150px;
}

.center{
  text-align: center;
}

/*** HEADER ***/
header{
  height:100px;
  background-color: #9ee6ef87;
  width:100%;
  border-bottom: 3px ridge #000000c4;
  backdrop-filter: blur(10px);
  position: fixed;
  top:0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

#menuBurger{
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  width:0px;
  height:40px;
  margin-right:20px;
  background-color:initial;
  border: 1px solid black;
  border-radius: 3px;
  cursor: pointer;
  transform:scaleX(0);
}

.burgerBar{
  background-color: black;
  width:30px;
  height:2px;
}

nav{
  height: 100%;
}

.headTab{
  height: 100%;
  margin:0;
  padding: 0;
  font-size: 20px;
  list-style:none;
  display: flex;
}

.headTab > li{
  margin:0 20px;
  height:100%;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.headTab a{
  height: 25%;
  display: flex;
  align-items: center;
  text-decoration: none;
  padding:8px 5px;
  color: black;
  transition:color 0.3s;
}

.headTab a:hover,
.socialIntro a:hover,
.fooContentR a:hover{
  color:#9a4f04;
}

.headContRight{
  display: flex;
  align-items: center;
  height: 100%;
}

.headLine{
  width: 0px;
  height:90%;
  border-right: 2px ridge #000000c4;
}

.headLogo{
  width:70px;
  height:70px;
  margin:0 0 0 20px;
  object-fit:cover;
  visibility: visible;
  opacity: 1;
  transition-duration: 0.3s;
  flex-shrink: 0;
}

.fadeOutLogo{
  width:0px;
  height:0px;
  visibility: hidden;
  opacity:0;
  transition-duration: 0.3s;
}

.headText{
  margin: 0 20px;
}

.headText > p {
  margin:0;
  text-align: center;
}


/*** ACCUEIL ***/
main{
  margin-top:100px;
}

.imgIntro{
  background: no-repeat center/cover url('img/header.png');
  width:100%;
  height:calc(100dvh - 100px);
  display: flex;
  flex-direction:column;
  align-items: center;
}

.contentIntro{
  text-align: center;
  margin-top:calc(50dvh - 230px);
  width:880px;
  color:white;
  background-color:rgba(0, 0, 0, 0.422);
  backdrop-filter:blur(3px);
}

.headButton{
  margin:15px 0;
  padding:8px 0;
  background-color: #f23636;
  font-weight: bold;
  box-shadow: 0 0 0 0;
  transition: box-shadow 0.3s;
}

.headButton:hover{
  box-shadow: 2px 2px 8px 0 white;
}

.headButton:active{
  box-shadow: 0 0 0 0;
  transition-duration: 0.05s;
}

.headButton > a{
  text-decoration: none;
  color:black;
  padding:8px;
}

.socialIntro{
  width:250px;
  margin: 20px auto;
  display: flex;
  justify-content: space-evenly;
}

.fb, .insta, .in{
  margin:0;
  padding: 0;
  color:black;
  width: 33px;
  height:33px;
  border-radius: 50%;
  background-color: white;
  display: flex;
  transition:transform 0.3s;
}

.fb:hover, .insta:hover, .in:hover{
  transform:scale(1.3, 1.3);
}

.contentMarg{
  margin:100px 100px;
}

.fadeInContent{
  opacity: 0;
  transform: translateY(-60px);
  transition:opacity 1s, transform 1s;
}

.visible{
  opacity: 1;
  transform: translateY(0);
}

.contDoublCard{
  width:100%;
  margin:auto;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.contDoublCard:nth-child(1){
  margin-bottom:150px;
}

.contDoublCard > img{
  object-fit: cover;
  width:480px;
  height:380px;
}

.textArticle{
  background-color: #d3d3d37d;
  width:400px;
  height:fit-content;
  padding:30px 40px;
}

.textArticle:nth-child(1){
  text-align: end;
}

.mainLine{
  width:100%;
  height: 80px;
  margin:80px auto;
  background-color: #000000d5;
}

.contactUs{
  text-align: center;
}

.iconTitle{
  display: inline-block;
  width:33px;
  height:33px;
  background: no-repeat center/contain url("img/round-pushpin.png");
}

.contMap{
  width:700px;
  height:500px;
  margin: 50px auto 100px auto;
}

iframe{
  width:700px;
  height:500px;
}

/*** FOOTER ***/
footer{
  width:100%;
  height: 250px;
  background-color: #9ee6ef87;
  display: flex;
  justify-content: space-around;
}

.fooContentL, .fooContentR{
  font-size: 18px;
  margin-top:20px;
}

.fooContentL > img{
  object-fit: contain;
  width:170px;
  height:120px;
  display: block;
}

footer address{
  font-style: normal;
}

footer address > p:nth-child(2){
  font-weight: bold;
}

.fooContentR > h3{
  font-size: 18px;
  font-weight: initial;
  text-decoration: underline;
  font-weight: bold;
  margin:0;
}

.socialFoo{
  width:130px;
  display: flex;
  justify-content: space-between;
  margin:20px 0 30px 0;
}

.fooContentR > a{
  margin:0;
  text-decoration: none;
  color: black;
  font-weight: bold;
  transition:color 0.3s;
  font-size: 17px;
}

/*** EQUIPE ***/
.contTopMarg{
  margin:150px 100px 100px 100px;
}

.contCard{
  width:100%;
  margin:auto;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.contCard img{
  width:480px;
  height:380px;
  object-fit:cover;
}

.teamContVid{
  display:flex;
  justify-content: center;
  margin-bottom:80px;
}

video{
  width:530px;
  height:350px;
}

figcaption{
  background-color: #d3d3d37d;
  padding:30px 40px;
  width:450px;
  height:fit-content;
}

/*** COMPETITION ***/ 
.compIntro{
  margin-top:150px;
}

.compContTxt{
  background-color: rgb(226, 226, 226);
  width:80%;
  margin:auto;
  padding:10px 20px;
}

.compTitle{
  margin:50px 0 30px 5%
}

table{
  width:80%;
  margin:auto;
  border-collapse: collapse;
  margin-bottom:50px;
}

caption{
  caption-side: bottom;
  margin-top:10px;
  font-style: italic;
}

thead > tr:nth-child(1){
  border-bottom:1.5px solid black;
}

thead > tr{
  background-color: rgb(255, 156, 76);
  color:white;
}

tbody > tr > td,
thead > tr > th{
  text-align: center;
  padding:8px;
}

thead > tr:nth-child(2) > th:nth-child(2){
  width: 10%;
}

tbody > tr > td:nth-child(1){
  width:30%;
}

tbody > tr:nth-child(odd){
  background-color: lightgray;
}

.compContCard{
  display: flex;
  justify-content: space-evenly;
  margin: 50px 50px 100px 50px;
}

.compContCard > article{
  width:230px;
  height:200px;
  background-color: #b1b1b1;
  padding: 20px;
}

.compContCard h3{
  font-size: 18px;
}

.compContCard p{
  margin:0;
}

/*** REJOINGNEZ ***/
.joinFlex{
  display: flex;
  justify-content: space-evenly;
  margin-top:50px;
}

.joinFlex > article{
  width:400px;
  height:fit-content;
  border:1px solid black;
  padding:15px;
  font-size: 15px;
}

.joinFlex h2{
  margin-top:0;
  font-style: italic;
}

.joinPreview{
  width: 100%;
  height:180px;
  border:1px solid black;
  font-size: 18px;
  display: flex;
  justify-content: center;
}

.docPreview{
  text-decoration: none;
  color:black;
  width: 100%;
  height:100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition-duration: 0.5s;
}

.docPreview:hover,
.joinFlex > article > a:hover,
.joinContButt > a:hover{
  background-color: #e2e2e2;
}

.joinFlex > article > a{
  display: block;
  width:fit-content;
  text-decoration: none;
  padding:12px;
  border:2px solid black;
  color:black;
  transition-duration: 0.5s;
}

.joinCont{
  margin:50px 0 100px 0;
}

.joinCont > address,
.joinCont > h2{
  font-style: normal;
  padding-left:15%;
}

.joinContButt{
  margin-top:20px;
}

.joinContButt > a{
  border:2px solid rgb(45, 29, 29);
  text-decoration: none;
  color:black;
  padding:10px 25px;
  display: block;
  margin:auto;
  width:fit-content;
  transition-duration: 0.5s;
}

/*** CONTACT ***/
.contactTxt{
  width:70%;
  margin:auto;
  text-align: center;
}

.contactTitle{
  margin:50px 0 30px 5%
}

.formRow{
  display: flex;
  width:500px;
  border:1px solid black;
  margin-left:10%;
}

.formRow > label{
  width:180px;
  padding: 10px;
  border-right:1px solid black;
}

.formRow > input{
  width: 180px;
  height:20px;
}

.formRow > select{
  height:30px;
}

.formRow > input,
.formRow > select,
.formRow > textarea{
  align-self: center;
  margin:10px;
  resize: vertical;
}

.btnForm{
  display: block;
  margin:50px auto 50px auto;
  padding:10px 20px;
}


@font-face{
  font-family: Degular;
  src: url('font/6793567b7c46d093102e93f7_Degular\ Medium.woff2') format("woff2");
}


/*** RESPONSIVE ***/
/* xl (desktop..) */
@media (max-width: 1200px){
  .contentMarg{
    margin:100px 0;
  }

  /* EQUIPE */  
  .contTopMarg{
    margin:200px 0 100px 0;
  }

  figcaption{
    width:360px;
    height:fit-content;
  }

  video{
    width:440px;
  }
}

/* lg (tablet) */
@media(max-width: 992px){
  .headTab{
    font-size: 18px;
  }

  .headTab > li{
    margin: 0 10px;
  }

  .headText{
    font-size: 15px;
  }

  .contentIntro{
    width:80%;
  }

  .contDoublCard{
    flex-direction: column;
  }

  .contDoublCard:nth-child(1){
    margin-bottom:80px;
  }

  .contDoublCard:nth-child(2){
    flex-direction: column-reverse;
  }

  .textArticle:nth-child(1){
    text-align:left;
  }

  figcaption{
    width:570px;
    height:fit-content;
  }

  /* EQUIPE */
  .contTopMarg{
    margin:180px 0 80px 0;
  }

  .contCard{
    flex-direction: column;
  }

  .teamContVid{
    flex-direction: column;
    align-items:center;
  }

  video{
    width:650px;
    height:450px;
  }

  /* COMPETITION */
  .compContCard{
    margin: 50px 0 100px 0;
  }

  .compContCard > article{
    width:200px;
    height:200px;
  }

  /* REJOIGNEZ */
  .joinFlex{
    flex-direction: column;
    align-items: center;
  }

  .joinFlex > article:nth-child(1){
    margin-bottom:30px;
  }

  .joinCont{
    display:flex;
    flex-direction: column;
    align-items: center;
  }

  .joinCont > address,
  .joinCont > h2{
    padding:0;
  }
}

/* md (landscape phones) */
@media(max-width:768px){
  header{
    justify-content: space-between;
  }

  #menuBurger{
    width:40px;
    transform: scaleX(1);
    transition: transform 0.3s 0.3s;
    margin-left:30px;
  }

  .is-open{
    transform:translateY(0px) scaleY(1);
    transition-duration: 0.3s;
  }

  .is-close{
    transform:translateY(-50px) scaleY(0);
    transition-duration: 0.3s;
  }

  nav{
    position: absolute;
    top:102%;
    left:20px;
    transform:translateY(-50px) scaleY(0);
  }

  .headTab{
    flex-direction: column;
  }

  .headTab > li{
    background-color: #f0f0f0;
    margin:0;
    height:80px;
    width:200px;
    font-size:20px;
  }

  .headTab a{
    width:100%;
    height: 63px;
    padding-left:15px;
    border-bottom:1px solid black;
  }

  .headTab a:hover{
    background-color: #a0c9ce;
  }

  .contentIntro{
    margin-top:calc(50dvh - 300px);
    width:90%;
  }

  .contactUs{
    width:90%;
    margin:auto;
  }

  .contMap{
    width:500px;
    height:400px;
  }

  iframe{
    width:500px;
    height:400px;
  }

  .fooContentL{
    font-size: 16px;
  }

  figcaption{
    width:400px;
  }

  /* EQUIPE */
  video{
    width:480px;
    height:450px;
  }

  /* COMPETITION */
  table{
    width: 95%;
  }

  .compContCard{
    flex-direction: column;
    align-items: center;
  }

  .compContCard > article{
    width:280px;
    height:280px;
    margin-bottom:30px;
  }

  /* CONTACT */
  .formRow{
    width:80%;
    margin:auto;
  }

  textarea{
    width:50%;
  }
}

/* sm (phone) */
@media(max-width:576px){
  .contMap{
    background-color: lightblue;
    width:400px;
    height:300px;
  }

  iframe{
    width:400px;
    height:300px;
  }

  /* CONTACT */
  .formRow{
    width:90%;
  }

  textarea{
    height:220px;
  }
}