* {
  box-sizing: border-box; /* Applique à tous les éléments */
}

html {
  scroll-behavior: smooth;

}
body{
  position: relative;
  width: 100%;
  height:100%;
  color:white;
  overflow-x: hidden;
  padding: 0;
  margin: 0;
  font-size: 1.3vw;
  background-color: #14372F;
  font-family: "Lato", sans-serif;
}

#masthead{
  width: 100%;
  height:100svh;
  position: relative;
}
#scroll_container{
  width: 100%;
  height:100%;
  overflow: hidden;
}
#scroller{
  width: 300%;
  height: 100%;
  display: flex;
  transition: transform 0.5s ease;
  transform: translateX(-33.33%);
}
#scroller .item{
  width: 33.33%;
  height:100%;
}
.image_item{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  object-position: top;
}

#container_circle{
  width: 35%;
  display: flex;
  gap:3%;
  height:5svh;
  position: absolute;
  left:50%;
  transform: translateX(-50%);
  bottom:5%;
  justify-content: center;
}
.right_circle{
  left:75%!important;
}
.circle{
  height: 82%;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.568);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.in_circle{
  height: 17%;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: white;
}
.border_none{
  border: 1px solid transparent;
}
#container_titre{
  text-align: center;
  position: absolute;
  top:35%;
  left:50%;
  transform: translate(-50%, -50%);
  width: 100%;
}
#sous_titre{
  text-align: center;
  position: absolute;
  top:60%;
  left:50%;
  transform: translate(-50%, -50%);
  width: 100%;
}
.line{
  height:1px;
  background-color: rgba(255, 255, 255, 0.349);
}
.line_under{
  width: fit-content;
}


.section1{
  display: flex;
  padding-top: 5%;
  justify-content: center;
  position: relative;
  padding-bottom: 3%;
}
.section1 .section{
  width: 45%;
  padding: 2%;
  position: relative;
  overflow: hidden;
}
#content_first{
  position: relative;
  height: fit-content;
}
.text_under{
  margin-top: 5%;
  width: 88%;
}
#line1{
  width: 40%;
  height:1px;
  background-color: rgba(245, 245, 220, 0.113);
}
#visite_container{
  margin-top: 8%;
}
#gallery{
  display: flex;
  height:70svh;
}
#gallery .section{
  width: 50%;
  padding: 1%;
  position: relative;
}
#gallery .section .img_gal{
  width: 100%;
  height:100%;
  object-fit: cover;
}
.section .container_img{
  height: 50%;
  width: 100%;
}
#top_picture{
  padding-bottom: 2%;
}
#bottom_picture{
  padding-top: 2%;
}
.section1 #container_circle{
  bottom: 0;
  left:30%;
}
.summarry{
  opacity: 0;
  top:30%;
  left:50%;
  transform: translate(-60%, 0%);
  position: absolute;
  transition: transform 0.5s ease,
  opacity 0.5s ease;
}
.close_img{
  width: 10%;
  cursor: pointer;
}
.container_section{
  transition: opacity 0.5s ease;
}

.disapear{
  animation: disapear 0.5s ease-in-out forwards;
}
@keyframes disapear {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.appear{
  animation: appear 0.5s ease-in-out forwards;
}
@keyframes appear {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


.disappear_move{
  animation: disappear_move 0.5s ease-in-out forwards;
}
@keyframes disappear_move {
  from {
    opacity: 1;
    transform: translate(-50%, 0%);
  }
  to {
    opacity: 0;
    transform: translate(-60%, 0%);
  }
}


.appear_move{
  animation: appear_move 0.5s ease-in-out forwards;
}
@keyframes appear_move {
  from {
    opacity: 0;
    transform: translate(-60%, 0%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0%);
  }
}

#banniere{
  background-color: #193E35;
  width: 100%;
  height:80svh;
  margin-top: 5%;
  padding: 1%;
  overflow: hidden;
  position: relative;
  text-align: center;
}

#concours{
  display: flex;
  width: 90%;
  gap:1%;
  height:80%;
  padding-top: 2%;
  margin-left: 5%;
  box-sizing: border-box;
}
#concours .section{
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.img_section{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#next_concour{
  object-position: 0% 50%;
}
.container_arrow{
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: end;
  position: absolute;
  bottom: 5%;
  right: 5%;
  gap:1%;
}
.arrow{
  transition: transform 0.5s ease;
  padding-top: 0.7%;
}
.tempo{
  transition: opacity 1s ease-in-out;
  opacity: 0;
}
#concours .section .arrow{
  width: 5%;
  transition: transform 0.5s ease;
}
#concours .section:hover > .container_arrow .arrow{
  transform: translateX(5%);
}
#concours .section:hover > .container_arrow .tempo{
  opacity: 0.6;
}


#section4{
  background-color: #193E35;
  display: flex;
  justify-content: center;
  position: relative;
  padding-bottom: 3%;
  width: 100%;
}
#section4 .section{
  width: 45%;
  padding: 2%;
  position: relative;
  overflow: hidden;
}
.next_concourt{
  display: flex;
  width: 30%;
  position: relative;
  align-items: center;
  justify-content: center;
  gap:5%;
  position: absolute;
  right:0;
  bottom: 0;
}


#footer{
  width: 100%;
  height:65svh;
  display: flex;
}
.footer_section{
  width: 33.33%;
  height:100%;
  position: relative;
}
.bloc_first{
  width: 100%;
  height:50%;
  position: relative;
  text-align: center;
}

#centre_equeste{
  margin-top: 15%;
}
#text_footer{
  width: 80%;
  text-align: justify;
}
#news_container{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap:2%;
}
#mention{
  margin-top: 2%;
}
#reso{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap:5%;
  margin-top: 3%;
}
.icone{
  width: 5%;
  height:auto;
  cursor: pointer;
}
#container_logo{
  position: absolute;
  width: 50%;
  left:50%;
  top:30%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.logo{
  width: 60%;
  height:auto;
}

#news_letter{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 15%;
}
#container_square{
  width: 80%;
  margin-top: 3%;
}
#news_container{
  margin-top: 4%;
}
#input_news{
  width: 50%;
}
#nav_footer{
  padding-top: 15%;
}
.fit_cont{
  width: fit-content;
  padding-bottom: 1%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.288);
}
.cnotrast{
  background-color: #193E35;
}
#separator{
  width: 100%;
  height:15svh;
  background-color: #193E35;
}
.encaps_mast{
  overflow: hidden;
}
.mast_anim{
  transition: transform 0.5s ease;
}

.to_bot{
  animation: to_bot 1s ease-in-out forwards;
}
@keyframes to_bot {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-100%);
  }
  100%{
    transform: translateY(0);
  }
}

.to_top{
  animation: to_top 1s ease-in-out forwards;
}
@keyframes to_top {
  0% {
    transform: translateY(0%);
  }
  50% {
    transform: translateY(100%);
  }
  100%{
    transform: translateY(0%);
  }
}

.to_right{
  animation: to_right 1s ease-in-out forwards;
}
@keyframes to_right {
  0% {
    transform: translateX(0%);
    opacity: 1;
  }
  50% {
    transform: translateX(110%);
    opacity: 0;
  }
  100%{
    transform: translateX(0%);
    opacity: 1;
  }
}

.to_left{
  animation: to_left 1s ease-in-out forwards;
}
@keyframes to_left {
  0% {
    transform: translateX(0%);
    opacity: 1;
  }
  50% {
    transform: translateX(-110%);
    opacity: 0;
  }
  100%{
    transform: translateX(0%);
    opacity: 1;
  }
}

.to_top{
  animation: to_top 1s ease-in-out forwards;
}
@keyframes to_top {
  0% {
    transform: translateY(0%);
      opacity: 1;
  }
  50% {
    transform: translateY(110%);
      opacity: 0;
  }
  100%{
    transform: translateY(0%);
      opacity: 1;
  }
}
#footer_resp{
  display: none;
  height:100vh;
  width: 100%;
  padding-top: 10%;
}


#mast1{
  transform: translateY(100%);
}
#mast2{
  transform: translateY(-100%);
}
#mast3{
  transform: translateY(-100%);
}



















input[type="text"]::placeholder {
  font-size: 1.2rem; /* ou px, em, etc. */
  color:rgba(0, 0, 0, 0.649);
}
input[type="text"]{
  outline: none;
  padding: 1.5%;
  padding-bottom: 0.55%;
}
button{
  background-color: transparent;
  color:white;
  border: 1px solid white;
  cursor: pointer;
}
.hover_div{
  position: relative;
  z-index: 2;
  cursor: pointer;
  transition: color 0.5s ease-in-out;
}
.hover_div:hover{
  color:rgb(199, 199, 199);
}
.is_spacing{
  letter-spacing: 3px;
}
.under1{
  margin-top: 0.5%;
}
.under2{
  margin-top: 1%;
}


.big_titre{
  font-size: 6rem;
  opacity: 0.3;
  letter-spacing: 4px;
}
.is_titre{
  font-size: 2.7rem;
  letter-spacing: 4px;
}
.is_titre1{
  font-size: 2.3rem;
}
.is_titre2{
  font-size: 2rem;
}
.is_titre3{
  font-size: 1.8rem;
}
.text{
  font-size: 1.2rem;
  letter-spacing: 2px;
}
button{
  font-size: 1.2rem;
}


.green1{
  color: #14372F;
}
.is_black{
  color:black;
}


.playfair-display {
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.lato-thin {
  font-family: "Lato", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.lato-light {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.lato-light1 {
  font-family: "Lato", sans-serif;
  font-weight: 380;
  font-style: normal;
}

.lato-regular {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.lato-bold {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.lato-black {
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.lato-thin-italic {
  font-family: "Lato", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.lato-light-italic {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.lato-regular-italic {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.lato-bold-italic {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.lato-black-italic {
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-style: italic;
}




@media (max-width: 1550px){
  .image_item{
    width: 100%;
    height:100%;
  }
}



@media (max-width: 1366px){
  .is_titre3{
    font-size: 1.3rem;
  }
  .big_titre{
    font-size: 4rem;
  }
  .is_titre{
    font-size: 2rem;
  }
  .text{
    font-size: 0.9rem;
  }
}




@media (max-width: 1280px) and (max-height: 720px){
  #banniere{
    height:100svh;
  }
}





@media (max-width: 1280px){
  body{
    font-size: 1.2vw;
  }
  .is_titre3{
    font-size: 1.3rem;
  }
  .big_titre{
    font-size: 3.5rem;
  }
  .is_titre1{
    font-size: 1.5rem;
  }
  .text{
    font-size: 0.9rem;
  }
  #section4 .section{
    width: 50%;
  }
  #footer{
    height:70vh;
  }
}


@media (max-width: 1280px) and (max-height: 900px){
  body{
    font-size: 1.5vw;
  }
}

@media (max-width: 1176px){
  .text{
    font-size: 0.8rem;
    letter-spacing: 2px;
  }
  .big_titre{
    font-size: 3rem;
  }
  .is_titre{
    font-size: 2rem;
  }
  body{
    font-size: 1.3vw;
  }
  .is_titre3{
    font-size: 1.4rem;
  }
}


@media (max-width: 1024px){
  .is_titre3{
    font-size: 1.2rem;
  }
}


@media (max-width: 950px){
  #concours .section .arrow{
    width: 8%;
    padding-top: 1%;
  }

}


@media (max-width: 900px){
  .image_item{
    height: 100svh;
  }
  .section1 .section{
    width: 70%;
  }
}


@media (max-width: 800px){
  .section1{
    flex-direction: column-reverse;
    align-items: center;
    position: relative;
  }
  #second_section{
    flex-direction: column;
  }
  .section1 .section{
    width: 50%;
  }
  .section1 #container_circle{
    left:50%!important;
    transform: translateX(-50%)!important;
    bottom:-2%!important;
  }
  body{
    font-size: 1.8vw;
  }
  .image_item{
    width: 100%;
    height:100%;
    object-fit: cover;
  }
  .in_circle{
    height: 25%;
  }
  #container_circle{
    bottom: 3%;
  }
  .is_titre{
    font-size: 1.6rem;
  }
  .is_titre3{
    font-size: 1.1rem;
  }
  .big_titre{
    font-size: 2.5rem;
  }
  .is_titre1{
    font-size: 1.3rem;
  }
  .text{
    font-size: 0.6rem;
  }
  .section1 .section{
    width: 70%;
  }
  #section4 .section{
    width: 70%;
  }
}

@media (max-width: 550px){
  .section1 .section{
    width:90%;
  }
  #section4 .section{
    width:90%;
  }
  #banniere{
    padding-top: 5%;
  }
  .in_circle{
    height: 25%;
  }
  .circle{
    height: 75%;
  }
  body{
    font-size: 4.5vw;
  }
  .text{
    font-size: 0.9rem;
  }
  .under1{
    margin-top: 1%;
  }
  .is_titre{
    letter-spacing: 2px;
    font-size: 1.5rem;
  }
  .big_titre{
    font-size: 2rem;
  }
  .text_under{
    width: 100%;
  }
  .section1 #container_circle{
    bottom:-5%!important;
  }
  .section1{
    margin-top: 5%;
  }
  #banniere{
    margin-top: 10%;
  }
  #last_section{
    margin-top: 0;
  }
  #concours{
    flex-direction: column;
  }
  #concours .section{
    width: 100%;
  }
  #footer{
    display: none;
  }
  #footer_resp{
    display: block;
  }
  .footer_section{
    width: 100%;
    height: fit-content;
    padding-bottom: 5%;
  }
  #container_reso{
    width: 100%;
  }
  #footer_logo{
    height: 40svh;
  }
  #nav_footer{
    padding-top: 0%;
    padding-bottom: 0!important;
  }
  .bloc_first{
    height: fit-content;
    padding-bottom: 5%;
  }
  #centre_equeste{
    margin-top: 5%;
  }
  input[type="text"]::placeholder {
    font-size: 1rem;
  }
  #news_letter{
    margin-top: 0;
  }
  #container_logo{
    margin-top: 8%;
  }
  #container_square{
    width: 90%;
  }
  #input_news{
    width: 60%;
  }
}