/*
Theme Name: Alexa Studio Creation
Theme URI: https://www.cookinfamily.fr
Author: OceaneVilleneuve
Author URI: https://www.oceane-villeneuve.fr
Description: Thème pour le site alexa studio creation
Version: 1.0
Tags: alexa
Text Domain: AlexaStudioCreation
*/


button {
  all: unset; /* ou "all: initial;" */
}

/* BACKGROUND */

.parallax-container {
  min-height: 220vh;
}
.site {
  min-height: 100vh;
}

html, body {
  min-height: 100vh;
}

.parallax-container {
  background-size: cover;
  background-attachment: fixed; /* assure un effet de parallaxe */
  background-position: center;
}


/* Remplacez l'image sur les écrans plus petits (mobiles) */
@media only screen and (max-width: 767px) {
  .parallax-container {
    background-size: cover;
    background-attachment: fixed; /* assure un effet de parallaxe */
    background-position: center;
  }

}

/* MENU */

.button:focus {
  outline: none;
}

.nav-button-placement {
  margin-top: 3em;
  margin-left: 1em;
  position: absolute;
}

.nav-bar-icon {
  color: #605B5B;
  font-size: 37px;
  height: 1em;
  &:hover {
    color: black;
  }
}
@media only screen and (max-width: 767px) {
  .nav-bar-icon {
    color: black;
  }
}

.offcanvas-body {
  background-color: #E0D0F4;
  font-family: 'Nixie One';
  font-size: 22px;
}

.button-custom-nav-open {
  margin-top: 2em;
  margin-left: 1em;
}

.ul-nav {
  text-decoration: none;
	list-style: none;
    .nav-link {
      margin-top: 35px;
    }
    #nav-link-child {
      font-size: 16px;
      margin-left: 1em;
      margin-top: 15px;
    }
}

.offcanvas-header {
  background-color: #E0D0F4;
  border: none;
}

.social-media-icons {
  text-decoration: none;
  color: black;
  font-size: 30px;
  margin-right: 12px;
}

.icon-menu-plus {
  font-size: 15px;
}

/*  HEADER */


.margin-title-home {
  padding-top: 2.2em;

}

@media only screen and (max-width: 767px) {
  .margin-title-home {
    margin-left: 30px;
    padding-top: 0em;
  }
}

.link-to-home {
  text-decoration: none;
  color: black;
  font-family: 'Italianno', sans-serif;
  font-size: 60px;
}

.sub-title-header {
  font-family: 'Nixie One';
  font-size: 16px;
  margin-top: -2em;
  display: flex;
  justify-content: center;
}

/* .margin-title-header {
  margin-top: 27px;
} */

@media only screen and (max-width: 600px) {
  .link-to-home {
      font-size: 48px;
      margin-left: 9px;
  }
  .sub-title-header {
    font-size: 14px;
    margin-left: 9px;
  }
  .margin-title-header {
    margin-top: 36px;
  }
  .nav-bar-icon {
    font-size: 30px;
  }
}


/* FRONT PAGE */


.available-tag {
  position: absolute;
  z-index: 2;
  right: 13px;
  top: 16%;
  transform: translateX(-50%);
  background-color: #E0D0F4;
  padding: 41px 13px;
  border-radius: 100%;
  font-family: 'Galada', cursive;
  font-size: 24px;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  text-decoration: none;
  color: black;
}

@media only screen and (max-width: 767px) {
  .col-lg-4 {
    width: 100%;
    margin: 0 auto;
  }

  .thumbnail-container {
    text-align: center;
  }

  .custom-thumbnail {
    display: inline-block;
    width: 80%; /* Ajustez la largeur des thumbnails selon vos besoins */
    height: auto;
    margin: 0 auto; /* Ajustez cette ligne pour centrer horizontalement */
  }

  .available-tag {
    position: absolute;
    z-index: 2;
    right: -18px;
    top: 15%;
    transform: translateX(-50%);
    background-color: #E0D0F4;
    padding: 28px 12px;
    border-radius: 100%;
    font-family: 'Galada', cursive;
    font-size: 14px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    text-decoration: none;
    color: black;
  }

}

.col-lg-4 {
  margin: 0;
  padding: 0;
}

.custom-thumbnail {
  width: 95%;
  height: 60%;
  object-fit: cover;
  padding: 20px;

  &:hover{
    filter:blur(3px);
    transition: filter 0.3s ease;
  }
}

@media only screen and (max-width: 767px) {
  .thumbnail-container {
    display: flex !important;
    justify-content: center !important;
  }
}

.thumbnail-container {
  position: relative;
  &:hover .custom-thumbnail {
    filter: blur(3px);
    transition: filter 0.3s ease; /* Maintient le flou même lorsque le conteneur est survolé */
}
  &:hover .custom-button-for-home {
    opacity: 1; /* Affiche le bouton lorsque la classe custom-thumbnail est survolée */
    transition: opacity 0.8s ease;
  }

}

.custom-button-for-home {
  position: absolute;
  opacity: 0;
  overflow: hidden;
  bottom: 50%; /* Ajustez cette valeur selon votre préférence pour le positionnement vertical */
  left: 50%; /* Place le bouton au centre horizontal du conteneur */
  transform: translateX(-50%); /* Centre précisément le bouton */
  background-color: #E0D0F4 !important;
  background-size: cover;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.front-page-content {
  padding:3em 3em;
}

@media only screen and (max-width: 767px) {
  .front-page-content {
    padding:3em 1.5em;
  }
}

.custom-button-for-home {
  padding: 15px;
  border-radius: 50px;
  font-family: 'Nixie One';
  font-size: 16px;
  color: black;
  width: 115px;
  text-align: center;
  background-color: white;
}


.isotope-item {
  transition-duration: 0.3s;
}


/* CONTACT BUTTON */

.contact-button {
  position: fixed;
  background-color: #E0D0F4;
  padding: 10px 20px;
  border-radius: 50px;
  font-family: 'Nixie One';
  font-size: 20px;
  border: 1px black solid;
  text-decoration: none;
  color: black;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}


@media only screen and (max-width: 767px) {
  .contact-button {
    position: fixed;
    background-color: #E0D0F4;
    padding: 10px 20px;
    border-radius: 50px;
    font-family: 'Nixie One';
    font-size: 20px;
    border: 1px black solid;
    text-decoration: none;
    color: black;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
  }
}


/* POST PAGE */

.single-post-custom-title {
  display: flex;
  justify-content: center;
  font-family: 'Dosis', sans-serif;
  text-transform: uppercase;
  font-size: 35px;
}

.post-page-container {
  height: 100vh;
  width: 100%;
}

/* PHOTO PAGE */

.grid-item {
  padding: 3em 3em;
}

.available-tag-photo-single-page {
  position: absolute;
  z-index: 2;
  right: 13px;
  top: 26%;
  transform: translateX(-50%);
  background-color: #E0D0F4;
  padding: 41px 13px;
  border-radius: 100%;
  font-family: 'Galada', cursive;
  font-size: 24px;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  text-decoration: none;
  color: black;
}

@media only screen and (max-width: 767px) {
  .available-tag-photo-single-page {
  position: absolute;
  z-index: 2;
  right: -18px;
  top: 23%;
  transform: translateX(-50%);
  background-color: #E0D0F4;
  padding: 28px 12px;
  border-radius: 100%;
  font-family: 'Galada', cursive;
  font-size: 14px;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  text-decoration: none;
  color: black;
  }
  .single-post-custom-title {
    font-size: 25px;
  }

}
/* À PROPOS DE MOI PAGE */

.about-me-content {
  display: flex;
  justify-content: space-evenly;
  padding: 3em 0em 3em 0em;


  img {
    border-radius: 50%;
    height: 18em !important;
    width: 18em !important;
  }

  p {
    font-family: 'Nixie One';
    font-size: 18px !important;
    width: 50% !important;
    padding-right: 5em;
  }
}


@media only screen and (max-width: 767px) {
  .about-me-content {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centrer les éléments verticalement */
    justify-content: center; /* Centrer les éléments horizontalement */
    padding: 1em;
  }

  .about-me-content img {
    border-radius: 50%;
    height: 11em !important;
    width: 11em !important;
  }

  .about-me-content p {
    font-family: 'Nixie One';
    font-size: 16px !important;
    width: 107% !important;
    text-align: center; /* Aligner le texte au centre */
    padding: 2em 3em;
  }
}

/* PRESTATIONS */
.wp-block-media-text .even-card {
  background-color: none;
  img {
    margin-left: 9em !important;
    margin-right: 7em !important;
  }
  p {
    margin-left: 4em !important;
    width: 100% !important;
  }
  h2 {
    margin-left: 2.5em !important;
    width: 100% !important;
  }

}

.wp-block-media-text .odd-card {
  background-color: #E0D0F4;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  img {
    margin-left: 7em !important;
    margin-right: 0px !important;
  }
  p {
    margin-left: 5em !important;
    width: 75% !important;
  }
  h2 {
    margin-left: 3em !important;
    width: 75% !important;
  }

}

.wp-block-media-text {
  align-items: center;
  grid-template-columns: none !important;
  padding: 2em 0em;
  & img {
    width: 30em !important;
    height: 17em !important;
    object-fit: cover !important;
    margin: 2em;
    border-radius: 10px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  }
  & p {
    width: 400px;
    font-family: 'Nixie One';
    font-size: 16px !important;
    z-index: 2;
  }
  & h2 {
    font-family: 'Dosis', sans-serif;
    text-transform: uppercase;
    font-size: 26px;
    padding: 20px 0px !important;
  }
  h3{
    font-family: 'Nixie One';
    font-size: 18px !important;
  }
}


.wp-block-quote {
  text-align: center;
  margin-bottom: 4em;
  p {
    width: 100%;
    font-weight: bolder;
  }
}

@media only screen and (max-width: 767px) {
  .wp-block-media-text .even-card,
  .wp-block-media-text .odd-card {
    background-color: #E0D0F4;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    height: 17em !important;
    margin-bottom: 3em;
    padding: 0em;
    img {
      margin-left: 0em !important;
      margin-right: 0px !important;
      height: 17em !important;
    }
    p {
      margin-left: 0em !important;
      font-size: 14px;
      width: 80% !important;
    }
    h2 {
      margin-left: 0em !important;
      width: 80% !important;
      text-align: center;
      font-size: 26px;
      text-shadow: 1.5px 1.5px 2.5px white;
    }


  }

  .wp-block-media-text {
    position: relative; /* Positionnement relatif pour permettre le positionnement absolu à l'intérieur */
    align-items: center;
    grid-template-columns: none !important;
    padding: 2em 0em;

    & img {
      width: 100% !important;
      height: 17em !important;
      object-fit: cover !important;
      margin: 0em;
      border-radius: 0px;
      box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
      z-index: 1;
      /* opacity: 0; */
    }

    & p {
      width: 400px;
      height: 50px;
      font-family: 'Nixie One';
      font-size: 16px !important;
      position: absolute; /* Positionnement absolu */
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: 0;
      z-index: 0; /* Mettez le paragraphe derrière l'image */
      opacity: 0;
    }

    & h2 {
      font-family: 'Dosis', sans-serif;
      text-transform: uppercase;
      font-size: 20px;
      padding: 20px 0px !important;
      position: absolute; /* Positionnement absolu */
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); /* Centrez le titre */
      z-index: 2; /* Mettez le titre devant l'image */
    }

    & h3{
      font-family: 'Nixie One';
      font-size: 15px !important;
      font-weight: bolder;
      padding: 1em 1.5em 2em 1.5em;
    }
  }


  .prestation-custom-title {
    margin-bottom: 0em;
  }
  .wp-block-quote {
    text-align: center;
    margin-bottom: 0em;
    p {
      font-size: 15px;
      font-weight: bolder;
    }
  }

  .flipped-card {
    img {
      opacity: 0;
    }
    p {
      opacity: 1;
    }
    h2 {
      opacity: 0;
    }
  }
}
/* VIDEO PAGE */

.display-video {
  padding: 2em 0em;
  display: flex;
  flex-direction: column;
  text-align: center; /* Centre horizontalement */
  line-height: 0; /* Ajuste la hauteur pour le centre vertical */
}

.display-video .ytp-cued-thumbnail-overlay-image {
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.display-video figure {
  padding: 1em 0em 2em;
}

.available-tag-video-pages{
  position: absolute;
  z-index: 2;
  right: 11%;
  top: 23%;
  transform: translateX(-50%);
  background-color: #E0D0F4;
  padding: 41px 13px;
  border-radius: 100%;
  font-family: 'Galada', cursive;
  font-size: 24px;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  text-decoration: none;
  color: black;
}

@media only screen and (max-width: 767px) {
  .display-video {
    padding: 3em 2em;
  }
  .display-video .ytp-cued-thumbnail-overlay-image {
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  }
  .available-tag-video-pages{
    position: absolute;
    z-index: 2;
    right: -18px;
    top: 24%;
    transform: translateX(-50%);
    background-color: #E0D0F4;
    padding: 28px 12px;
    border-radius: 100%;
    font-family: 'Galada', cursive;
    font-size: 14px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    text-decoration: none;
    color: black;
  }
}


/* CONTACT PAGE */

.contact-section {
  height: 100vh !important;
}
.container-contact {
  p{
  text-align: center;
  font-family: 'Nixie One';
  font-size: 18px !important;
  padding: 3em 0em;
  margin-bottom: 0em !important;
  }
  h1 {
    margin-bottom: 0em !important;
    display: flex;
    justify-content: center;
    font-family: 'Dosis', sans-serif;
    text-transform: uppercase;
    font-size: 30px;
    padding-top: 1em;
  }
  .is-disabled {
    text-decoration: line-through !important;
    }
}

.bpa-frontend-main-container {
  padding: 0em 4em !important;
}


@media only screen and (max-width: 767px) {
  .container-contact {
    p{
    text-align: center;
    font-family: 'Nixie One';
    font-size: 16px !important;
    padding: 3em 1.5em;
    margin-bottom: 0em !important;
    }
    h1 {
      margin-bottom: 0em !important;
      font-size: 20px;

    }
  }
  .bpa-frontend-main-container {
    padding: 0em 1em !important;
  }
}


/* MERCI PAGE */

.merci-content {
  padding: 0em 5em !important;
}