/*
Theme Name: Hello Elementor Enfant
Description: Theme enfant de Hello Elementor.
Author: Margaux S.
Author URI: https://margauxsouvairan.fr
Template: hello-elementor
Version: 1.0
*/


/* ------------------------------------ */
/* Sticky header */
/* header#stickySet.stickyMenu{
    position: fixed;
    top: 10px;
    transition: background-color 500ms;
}

header#stickySet.scrollMenu{
    background-color: #FFFFFF;
    padding-bottom:10px;
} */

/* Sur le menu dans "header footer elementor"
Ajout d'un id : stickySet
Ajout d'une classe : stickyMenu */

/* ============================
   Curseur personnalisé — desktop + visiteur uniquement
   ============================ */
@media (min-width: 768px) {
  body:not(.logged-in),
  body:not(.logged-in) *,
  body:not(.logged-in) *::before,
  body:not(.logged-in) *::after {
    cursor: none !important;
  }
}

.custom-cursor {
  width: 20px;
  height: 20px;
  background-color: #b65c22;
  border-radius: 50%;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 99999;
  will-change: transform;
  transform: translate(-100px, -100px);
}

@media (max-width: 767px) {
  .custom-cursor {
    display: none !important;
  }
}

/* Animation de la barre */
.defillement_infini {
    white-space: nowrap;
    overflow: hidden;
    width: max-content !important;
    animation: defilement 22s linear infinite;
}

.e-con.e-con>.e-con-inner>.elementor-widget, .elementor.elementor .e-con>.elementor-widget{
    max-width: 200%!important;
}

@keyframes defilement {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
        /* Déplace de moitié pour boucler */
    }
}

/* ============================
   CTA Label — Survol Bouton
   ============================ */

#btn_contact {
  position: fixed !important;
  top: 480px;
  right: 45px;
  z-index: 9999;
  margin: 0 !important;
  overflow: visible !important;
  cursor: pointer;
}

#btn_contact .elementor-icon svg {
  width: 85px !important;
  height: 85px !important;
}

@media (max-width: 767px) {
  #btn_contact {
    top: auto;
    bottom: 20px;
    right: 20px;
  }

  #btn_contact .elementor-icon svg {
    width: 65px !important;
    height: 65px !important;
  }
}

/* Le label animé */
.cta-hover-label {
  position: absolute;
  bottom: calc(100% + 10px);
  right: 40%;
  writing-mode: vertical-rl;
  transform: rotate(180deg) translateY(-30px);
  opacity: 0;
  color: #b65c22;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.cta-hover-label.is-visible {
  opacity: 1;
  transform: rotate(180deg) translateY(0);
}

.demie-lune{
  display: inline-block;
  transform: rotate(90deg);
  line-height: 1;
}

/* ============================
   Elementor Buttons — Slide Text Up on Hover
   ============================ */

.elementor-button .elementor-button-text {
  display: block;
  overflow: hidden;
}

.btn-slide-wrap {
  display: flex;
  flex-direction: column;
  transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1);
}

.btn-slide-txt {
  display: block;
  text-align: center;
  white-space: nowrap;
}

a.elementor-button:hover .btn-slide-wrap,
button.elementor-button:hover .btn-slide-wrap {
  transform: translateY(-50%);
}

/* ============================
   Nav Menu — Slide Text Up on Hover
   ============================ */

a.elementor-item {
  display: inline-flex !important;
  align-items: center;
}

.nav-slide-wrap {
  display: block;
  overflow: hidden;
}

.nav-slide-inner {
  display: flex;
  flex-direction: column;
  transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1);
}

.nav-slide-txt {
  display: block;
  white-space: nowrap;
  line-height: inherit;
}

a.elementor-item:hover .nav-slide-inner {
  transform: translateY(-50%);
}

/* ============================
   Nav Menu — Icône active
   ============================ */

a.elementor-item {
  position: relative;
}

a.elementor-item::after {
  content: '';
  position: absolute;
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  width: 18px;
  height: 18px;
  background-color: #433F36;
  -webkit-mask: url('https://jolilotatelier.com//wp-content/uploads/2026/04/4.svg') no-repeat center / contain;
  mask: url('https://jolilotatelier.com//wp-content/uploads/2026/04/4.svg') no-repeat center / contain;
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

#dark-header a.elementor-item::after {
  background-color: #CAC0AA;
}

a.elementor-item.elementor-item-active::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============================
   Accordéon Elementor — Animation fluide
   ============================ */

.e-n-accordion-item [role="region"] {
  overflow: hidden;
  transition: height 1s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.e-n-accordion-item[open] [role="region"] > * {
  animation: accordionFadeIn 1s ease forwards;
}

@keyframes accordionFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.e-n-accordion-item-title-icon {
  transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ============================
   Sticky Footer Reveal — Z-index + fond hérité
   ============================ */

.site-main {
  position: relative;
  z-index: 10;
  background-color: inherit;
}

body {
  background-color: var(--light_beige);
}

/* ============================
   Header — z-index au dessus du site-main
   ============================ */
.elementor-location-header {
  position: relative;
  z-index: 20;
}

/* ============================
   Carrousel — Hauteur fixe, largeur naturelle
   ============================ */

.elementor-widget-n-carousel .e-n-carousel {
  height: 650px;
}

.elementor-widget-n-carousel .swiper-slide {
  height: 650px !important;
  width: fit-content !important;
}

.elementor-widget-n-carousel .swiper-slide .e-con {
  height: 100% !important;
  width: auto !important;
  min-width: unset !important;
  flex: none !important;
}

.elementor-widget-n-carousel .swiper-slide img {
  height: 650px !important;
  width: auto !important;
  max-width: none !important;
  display: block;
  object-fit: unset !important;
}

/* ============================
   Carrousel images — Défilement infini
   ============================ */

.elementor-widget-image-carousel .elementor-image-carousel-wrapper {
  overflow: hidden !important;
}

.elementor-widget-image-carousel .swiper-slide {
  width: auto !important;
  height: 600px !important;
  flex-shrink: 0;
  margin-right: 15px;
}

.elementor-widget-image-carousel .swiper-slide img {
  height: 600px !important;
  width: auto !important;
  max-width: none !important;
  object-fit: unset !important;
  display: block;
}

.image-marquee-active {
  display: flex !important;
  width: max-content !important;
  will-change: transform;
}

@media (max-width: 1024px) {
  .elementor-widget-image-carousel .swiper-slide,
  .elementor-widget-image-carousel .swiper-slide img {
    height: 400px !important;
  }
}

/* ESPACE DROPDOWN */
.dropdown_jolilot {
  margin-left: 80px;
}

/* ============================
   Mobile — toutes les corrections
   ============================ */
@media (max-width: 767px) {

  .dropdown_jolilot {
    margin-left: 15px;
  }

  /* Curseur — désactivé */
  .custom-cursor {
    display: none !important;
  }

  /* Carrousel images */
  .elementor-widget-image-carousel .swiper-slide,
  .elementor-widget-image-carousel .swiper-slide img {
    height: 250px !important;
  }
  .elementor-widget-image-carousel .swiper-slide {
    margin-right: 8px;
  }

  /* Boutons — slide text désactivé */
  .elementor-button .elementor-button-text {
    overflow: visible !important;
    height: auto !important;
  }

  .btn-slide-wrap {
    transition: none !important;
    transform: none !important;
  }

  a.elementor-button:hover .btn-slide-wrap,
  button.elementor-button:hover .btn-slide-wrap {
    transform: none !important;
  }

  .btn-slide-txt + .btn-slide-txt {
    display: none !important;
  }

  /* Nav — icône ::after désactivée */
  a.elementor-item::after {
    display: none !important;
  }

  /* Nav — slide text désactivé */
  a.elementor-item:hover .nav-slide-inner {
    transform: none !important;
  }

  .nav-slide-wrap {
    overflow: visible !important;
    height: auto !important;
  }

  .nav-slide-inner {
    transition: none !important;
  }

  .nav-slide-txt + .nav-slide-txt {
    display: none !important;
  }

  /* Menu mobile — Hauteur plein écran */
  .elementor-nav-menu--dropdown.elementor-nav-menu__container {
    min-height: calc(100dvh - var(--header-height, 80px)) !important;
    height: calc(100dvh - var(--header-height, 80px)) !important;
  }
}

/* ============================
   Boutons radio + checkbox — Style custom
   ============================ */

.elementor-field-type-radio input[type="radio"],
.elementor-field-type-acceptance input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.elementor-field-type-radio .elementor-field-option label,
.elementor-field-type-acceptance .elementor-field-option label {
  display: inline-flex;
  align-items: center;
  cursor: none;
  position: relative;
}

/* Forme organique — non cochée */
.elementor-field-type-radio .elementor-field-option label::before,
.elementor-field-type-acceptance .elementor-field-option label::before {
  content: '';
  display: inline-block;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-right: 14px;
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg width='438' height='432' viewBox='0 0 438 432' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M334 103 C309 93, 286 89, 257 88 C222 92, 185 102, 157 114 C134 130, 120 144, 105 166 C94 195, 90 217, 90 250 C101 294, 113 316, 134 339 C163 357, 187 365, 211 368 C244 366, 283 356, 309 344 C343 322, 365 301, 380 279 C391 250, 395 225, 394 194 C389 171, 378 145, 361 123 C352 114, 343 108, 334 103Z' stroke='%23433F36' stroke-width='12' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  transition: background-image 0.25s ease;
}

/* Forme organique — cochée, remplie en #B65C22 */
.elementor-field-type-radio input[type="radio"]:checked + label::before,
.elementor-field-type-acceptance input[type="checkbox"]:checked + label::before {
  background-image: url("data:image/svg+xml,%3Csvg width='438' height='432' viewBox='0 0 438 432' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M334 103 C309 93, 286 89, 257 88 C222 92, 185 102, 157 114 C134 130, 120 144, 105 166 C94 195, 90 217, 90 250 C101 294, 113 316, 134 339 C163 357, 187 365, 211 368 C244 366, 283 356, 309 344 C343 322, 365 301, 380 279 C391 250, 395 225, 394 194 C389 171, 378 145, 361 123 C352 114, 343 108, 334 103Z' stroke='%23433F36' stroke-width='12' fill='%23B65C22' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.elementor-field-type-radio .elementor-field-option label::before,
.elementor-field-type-acceptance .elementor-field-option label::before {
  content: '';
  display: inline-block;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-right: 10px;
  align-self: center;      /* alignement vertical centré */
  margin-bottom: -5px;         /* micro-ajustement si besoin */
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg width='438' height='432' viewBox='0 0 438 432' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M334 103 C309 93, 286 89, 257 88 C222 92, 185 102, 157 114 C134 130, 120 144, 105 166 C94 195, 90 217, 90 250 C101 294, 113 316, 134 339 C163 357, 187 365, 211 368 C244 366, 283 356, 309 344 C343 322, 365 301, 380 279 C391 250, 395 225, 394 194 C389 171, 378 145, 361 123 C352 114, 343 108, 334 103Z' stroke='%23433F36' stroke-width='12' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  transition: background-image 0.25s ease;
}

/* ============================
   Splash Screen
   ============================ */
#jlt-splash {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background-color: #433F36;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: all;
  transition: transform 0.9s cubic-bezier(0.76, 0, 0.24, 1);
}

#jlt-splash.is-leaving {
  transform: translateY(-100%);
}

/* Wrapper qui clip le contenu */
#jlt-splash-inner {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Les deux éléments empilés verticalement */
#jlt-splash-stack {
  display: flex;
  flex-direction: column;
  transition: transform 0.8s cubic-bezier(0.76, 0, 0.24, 1);
}

#jlt-splash-stack.slide-up {
  transform: translateY(-50%);
}

#jlt-splash-logo svg {
  width: 220px;
  height: auto;
  display: block;
}

#jlt-splash-subtitle {
  color: #b65c22;
  font-family: "AzoSans", sans-serif;
  font-size: 15px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  font-weight: 400;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Fade in global au départ */
#jlt-splash-inner {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

#jlt-splash-inner.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 767px) {
  #jlt-splash-logo svg {
    width: 140px;
  }
  #jlt-splash-subtitle {
    font-size: 11px;
    letter-spacing: 0.25em;
  }
}