/** @format */

@font-face {
  font-family: "Lucida Calligraphy";
  src: url("fonts/Lucida_Calligraphy_Font.ttf") format("truetype");
}

@font-face {
  font-family: "Fraunces Soft";
  src: url("fonts/Fraunces/Fraunces_72pt_Soft-Bold.ttf") format("truetype");
}

header {
  position: absolute;
}

body main {
  /* border: red solid 1px; */
  width: 100%;
  height: 100vh;
  font-family: "Fraunces Soft";
  overflow-x: hidden;
  perspective: 1px;
  transform-style: preserve-3d;
  margin: 0;
}

/* section annonce */

#title {
  position: relative;
  background: rgb(171, 110, 84)  
              radial-gradient(circle, rgba(255, 236, 211, 1) 0%, rgba(171, 110, 84, 1) 100%);
  height: 100vh;
  padding: 0;
}

.titre-fond {
  margin: 0 auto;
  margin-left: 0px;
  width: 90vw;
  height: 100%;
  background-image: url("../images/img_titre_bureau-6f4a8be54a30ec85ac5f691eba351c47.webp");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
/* Section Container for Paralax */
.slide {
  position: relative;
  z-index: 1;
  padding: 8vh 10%;
  min-height: 100vh;
  width: 100vw;
  box-sizing: border-box;
  transform-style: inherit;
}

/* h2 */
.phrase {
  font-family: var(--font-h1);
}

h3 {
  font-size: 2rem;
  letter-spacing: 2px;
}

.fleche {
  border: solid #fdf0d5;
  padding: 12px;
  border-width: 0 5px 5px 0;
}

.precedent,
.suivant {
  position: absolute;
  top: 50%;
}

.precedent {
  transform: rotate(135deg);
  left: 45px;
}

.suivant {
  transform: rotate(-45deg);
  right: 45px;
}

.cadre {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transition: all 0.4s ease-in-out;
}

.img1 {
  z-index: 2;
  opacity: 1;
  border-radius: 24px;
  background: url("../images/plage_nijar-188f46df09a3828516ce669ee69fae29.webp");
  background-size: cover;
}

.img1::after {
  content: "Actualité";
}

.img2 {
  border-radius: 24px;
  background: url("../images/mairie_nijar-f7a7254ed99b36d7e55740060df06cea.webp");
  background-size: cover;
}

.img3 {
  background: url("../images/REFAJONAS-nijar-ec1fea3af23496cb453b69d36f8bdc5a.webp");
  background-size: cover;
}

.img4 {
  background: url("../images/noche-bede29fd2a6a21feae38c991bfa047cd.jpeg");
  background-size: cover;
}

*:target ~ .img1 {
  opacity: 0;
}

#img1:target ~ .img1 {
  opacity: 1;
}

#img2:target ~ .img2,
#img3:target ~ .img3,
#img4:target ~ .img4 {
  z-index: 2;
  opacity: 1;
}

/* carrousel */

.carousel-container {
  /* margin-top: 20px; */
  position: relative;
  height: 500px;
  border: solid 3px var(--primary-color);
  /* Adjust the height of the carousel */

  overflow: hidden;
  /* Hide the overflowing images */

  border-radius: 20px;
}

.carousel-images {
  display: flex;
  flex-direction: column;
  transition: transform 0.5s ease;
  background: rgba(0, 0, 0, 15%);
}

.carousel-item {
  /* border: solid green 1px; */
  position: relative;
  height: 500px;
  display: flex;
  align-items: center;
  flex-direction: column;
  /* justify-content: center; */

  .carousel-image {
    /* border: solid red 1px; */
    max-height: calc(100% - (2*20px));
    max-width: 30%;
    box-sizing: border-box;
    margin: 10px;
    border-radius: 5px;
    /* flex: 1; */
  }

  .contenu-textuel {
    transform: translateY(-10px);
    /* border: solid pink 1px; */
    padding: min(2vw, 30%);
    text-align: center;

    & > p {
      margin-bottom: 0.5em;
    }

    .read-more {
       display: inline-block;
      color: var(--text-color);
      border: solid 1px var(--text-color);
      padding: 10px 25px;
      border-radius: 50px;
      transition: transform 0.3s ease;

      &:hover {
        text-decoration: none;
        transform: scale(1.05);
      }
    } 
  }
}

@media (min-width: 768px) {
  .carousel-item {
    flex-direction: row;

    .contenu-textuel {
      transform: translateY(0);
      width: 62%;

      & > p {
        margin-bottom: 2em;
      }
    }

    .carousel-image {
      margin: 2vw;
    }

  }
}
/* Navigation */
.info-btn {
  display: none;
  position: absolute;
  font-family: "Lucida_Calligraphy_Font.ttf";
  /* Position the button absolutely within the image */

  /* top: 10px; */
  top: 0;

  left: 0;
  /* left: 50%; */
  /* Center horizontally */

  /* transform: translateX(-50%); */
  /* Center horizontally */

  padding: 10px 20px;
  background-color: rgba(253, 240, 213, 1);
  color: rgba(189, 109, 75, 1);
  border: none;
  border-radius: 0 0 15px 0;
  cursor: pointer;
  z-index: 1;
  /* Make sure it's above the image */

  transition: background-color 0.3s;
  /* Transition effect for hover */

  &:hover {
    background-color: rgba(253, 240, 213, 1);
    /* Darker on hover */
  }
}

.next {
  font-family: "Lucida_Calligraphy_Font.ttf";
  position: absolute;
  /* bottom: 10px;
  right: 10px; */
  bottom: 0;
  right: 0;
  z-index: 1;
  background-color: rgba(253, 240, 213, 1);
  color: var(--secondary-color);
  /* border-radius: 20px; */
  border-radius: 20px 0 0 0;
  padding: 10px 20px;
  cursor: pointer;
  display: flex;

  & span {
    display: none;
  }

  & svg {
    & > path {
      stroke: var(--secondary-color);
    }
  }
}

/* modal */
.modal {
  display: none;
  /* Hidden by default */

  position: fixed;
  top: calc(50% + 2rem);
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 95%;
  max-width: 90vw;
  background-color:#8a8b8e;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  padding: 0 3% 15px 3%;
  border: solid 3px var(--text-color);
}

.modal-content {
  width: 100%;
  /* max-width: 600px; */
  height: auto;
  overflow: hidden;

  .contenu-textuel {
    display: flex;
    flex-direction: column;

    & > p,
    & > h3 {
      color: rgba(189, 109, 75, 1);
    }
  }

  & > .carousel-image-modal {
    /* width: 35%;
    height: auto;
    padding: 2%; */
    width: 100%;
    height: auto;
    display: block; /* removes bottom whitespace */
    object-fit: contain; /* or cover depending on use */
  }

  .close {
    color: rgba(189, 109, 75, 1);
    float: right;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    margin-right: 10px;
    

    &:hover {
      color: black;
      cursor: pointer;
    }
  }
}
/**********STRUCTURE DU RESTE***********/

.slide {
  position: relative;
  z-index: 1;
  padding: 8vh 10%;
  /* min-height: 95vh; */

  width: 100vw;
  box-sizing: border-box;
  transform-style: inherit;
}

main > #slide2 img {
  position: absolute;
  top: 120%;
  left: 45%;
  width: 499px;
  /* height: 280px; */

  transform: translateZ(0.5px) scale(0.4) translateX(-24%) translateY(70%)
    rotate(2deg);
  padding: 1px;
  border-radius: 24px;
  background: rgba(240, 230, 220, 0.7);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
}

.title-space:before {
  content: "";
  display: block;
  text-align: right;
  width: 100px;
}

main > #slide2 img:last-of-type {
  transform: translateZ(0.4px) scale(0.5) translateX(-84%) translateY(-40%)
    rotate(-5deg);
  top: 96%;
  left: 38%;
}

.slide:before {
  content: "";
  position: absolute;
  /* top: 0; */

  /* bottom: 28%; */

  /* left: 0; */
}

.title {
  width: 70%;
  padding: 5%;
  border-radius: 24px;
  border: 1px solid rgb(255, 236, 211);
  background: #857067;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
}

.slide:nth-child(2n + 1) .title {
  background-color: #857067;
  border-radius: 24px;
  box-shadow: none;
  margin-top: 40%;
}

.slide:nth-child(2n) .title {
  margin-top: 20vw;
}

.header {
  margin-top: 96px;
  text-align: center;
  font-size: 175%;
  color: #fff;
  text-shadow: 0 2px 2px #000;
}

#title h1 {
  transform: translateZ(0.25px) scale(1);
  transform-origin: 150% 120%;
  margin: 30vh 0 0 100px;
}

#slide1 {
  margin-top: 12vw;
  height: 3000px;
}

#slide1:before {
  top: 10%;
  left: 69%;
  width: 36%;
  height: 21%;
  margin-top: 18%;
  background-image: url("../images/mosaique-39c0ff083d97772d99cdca29111feb7b.webp");
  background-repeat: no-repeat;
  background-size: 100%;
  /* border-radius: 24px; */

  transform: translateZ(-0.8px) scale(2.7);
  /* border: 1px solid rgb(255, 236, 211);
  border-radius: 24px; */
}

#slide1 > .title {
  margin-top: 70%;
}

#slide2:before {
  /* position: absolute; */

  top: 25%;
  left: 98%;
  width: 35%;
  height: 646px;
  background-image: url("../images/img-accueil-danse2-56ff982f471f9da564c536703d3dabe7.webp");
  background-repeat: no-repeat;
  background-size: cover;
  /* background-position: right; */

  border-radius: 24px;
  z-index: 2;
  transform: translateZ(-1.3px) scale(2.2);
}

#slide2 {
  z-index: 2;
}

#slide3 {
  margin-top: 20vw;
}

#slide3:before {
  margin-top: 500px;
  background-color: #857067;
  transform: translateZ(-1px) scale(2);
}

#slide3 > .title {
  margin-top: 9vw;
  margin-bottom: 6vw;
}

#slide4 {
  background: #222;
}

body > footer {
  display: none;
}

.mozaique-mobile {
  display: none;
}

.danseuse-mobile {
  display: none;
}

@media screen and (max-width: 1024px) {
   .mozaique-mobile {
    display: block;
    width: 100%;
  }

  /**********STRUCTURE DU RESTE***********/

  .slide {
    z-index: 2;
    padding: 12vh 10%;
    min-height: auto;
  }

  main > #slide2 img {
    width: 396px;
    height: 282px;
  }

  main > #slide2 img:last-of-type {
    left: 31%;
  }

  .title {
    width: 71%;
    margin-top: 3%;
    margin-bottom: 10%;
  }

  #title h1 {
    margin: 18vh 0 0 100px;
  }

  #slide1:before {
    top: 25%;
    margin-top: 0;
    left: 55%;
    height: 33%;
  }

  #slide2:before {
    top: 25%;
    z-index: 2;
    /* margin-right: 40vw; */

    height: 28%;
    /* left: -90%; */
  }

  .info-btn {
    display: block;
    font-family: var(--font-h1);
  }
}

@media screen and (max-width: 1024px) {
  #title {
    height: 53vw;
    /* margin-top: 71px; */
  }

  body main {
    height: unset;
    /* margin: 160px 0 0 0; */
  }

  header {
    position: unset;
  }

  main > #slide2 img {
    left: 45%;
  }
}

@media screen and (max-width: 1024px) {
  body main {
    perspective: unset;
    transform-style: preserve-3d;
    overflow-x: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .danseuse-mobile {
    display: block;
    width: 40%;
    border-radius: 24px;
    margin-bottom: 50px;
  }

  .slide {
    padding: 6vh 0%;
    width: 80vw;
  }

  #slide1 {
    margin-top: unset;
    height: unset;
    padding-bottom: 0px;
  }

  #slide1 .title {
    margin-top: unset;
  }

  #slide2 .title {
    margin-top: unset;
  }

  #slide3 {
    margin-top: unset;
  }

  #slide3 .title {
    margin-top: unset;
  }

  h2 {
    font-size: 2.5em;
  }

  #title {
    width: 100%;
  }

  #title h1 {
    margin: 45vh 0 0 100px;
  }

  .modal {
    /* width: 80vw; */
    .close {
      font-size: 45px;
      width: 45px;
      height: 45px;
      display: block;
      text-align: center;
      line-height: 1;
      cursor: pointer;
    }
  }

  .modal-content {
    flex-wrap: wrap;

    .contenu-textuel > p {
      height: 135px;
      width: 126px;
      overflow-y: scroll;
    }

    & > .carousel-image-modal {
      /* width: 120px; */
      max-height: 400px;
      margin: 0 auto;
    }

  }

  .title {
    width: 100%;
  }

  .slide:nth-child(2n) .title {
    margin-left: 0%;
    margin-bottom: 15%;
  }

  #slide1::before {
    display: none;
  }

  .mot {
    text-align: left;
    width: 80%;
    margin-left: unset;
  }

  #slide2 {
    padding: 0;
  }

  #slide2:before {
    display: none;
  }

  main > #slide2 img {
    position: unset;
    transform: unset;
    width: 35vw;
    height: unset;
  }

  main > #slide2 img:last-of-type {
    transform: unset;
    width: 35vw;
   float: right;
  }
}