/*
Theme Name: Avada Child
Description: Child theme for Avada theme
Author: ThemeFusion
Author URI: https://theme-fusion.com
Template: Avada
Version: 1.0.0
Text Domain:  Avada
*/

/* CHECKBOX CONTACT */
/* Base for label styling */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked,
[type="radio"]:not(:checked),
[type="radio"]:checked {
  position: absolute;
  left: -9999px;
}

[type="checkbox"]:not(:checked) + span,
[type="checkbox"]:checked + span,
[type="radio"]:not(:checked) + span,
[type="radio"]:checked + span {
  position: relative;
  padding-left: 2.5em;
  cursor: pointer;
}

/* checkbox aspect */
[type="checkbox"]:not(:checked) + span:before,
[type="checkbox"]:checked + span:before,
[type="radio"]:not(:checked) + span:before,
[type="radio"]:checked + span:before {
  content: '';
  position: absolute;
  left: 0; top: -2px;
  width: 1.5em; height: 1.5em;
  border: 2px solid #ccc;
  background: #fff;
  border-radius: 4px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.1);
}
/* checked mark aspect */
[type="checkbox"]:not(:checked) + span:after,
[type="checkbox"]:checked + span:after,
[type="radio"]:not(:checked) + span:after,
[type="radio"]:checked + span:after {
  content: '\f00c';
  position: absolute;
  top: .15em; left: .22em;
  font-size: 1.3em;
  line-height: 0.8;
  color: #bd9a00;
  transition: all .2s;
  font-family: "Font Awesome 5 Pro";
  -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
}
/* checked mark aspect changes */
[type="checkbox"]:not(:checked) + span:after,
[type="radio"]:not(:checked) + span:after {
  opacity: 0;
  transform: scale(0);
}
[type="checkbox"]:checked + span:after,
[type="radio"]:checked + span:after {
  opacity: 1;
  transform: scale(1);
}
/* disabled checkbox */
[type="checkbox"]:disabled:not(:checked) + span:before,
[type="checkbox"]:disabled:checked + span:before,
[type="radio"]:disabled:not(:checked) + span:before,
[type="radio"]:disabled:checked + span:before {
  box-shadow: none;
  border-color: #bbb;
  background-color: #ddd;
}
[type="checkbox"]:disabled:checked + span:after,
[type="radio"]:disabled:checked + span:after {
  color: #999;
}
[type="checkbox"]:disabled + span,
[type="radio"]:disabled + span {
  color: #aaa;
}
/* accessibility */
[type="checkbox"]:checked:focus + span:before,
[type="checkbox"]:not(:checked):focus + span:before ,
[type="radio"]:checked:focus + span:before,
[type="radio"]:not(:checked):focus + span:before {
  border: 2px dotted #bd9a00;
}

/* hover style just for information */
[type="checkbox"]:checked:focus + span:hover:before {
  border: 2px solid #bd9a00!important;
}

.wpcf7 p {margin: 0;}

.wpcf7 .wpcf7-list-item {
	margin-bottom: 20px;
	margin-top: 20px;
	margin-left: 0;
}

@media(min-width: 801px) {
   .wpcf7 .wpcf7-list-item + .wpcf7-list-item {
    margin-left: 30px!important;
  } 
}

@media(max-width: 800px) {
   .wpcf7 .wpcf7-list-item + .wpcf7-list-item {
    display:block !important;
  } 
}


.wpcf7 .conditions {font-size: 12px;line-height: 16px;}

.wpcf7 .wpcf7-submit {
	padding-left: 100px!important;
    padding-right: 100px!important;
    margin-bottom: 15px!important;
    margin-top: 20px!important;
    background: #ffffff!important;
    border:0!important;
    color: #bd9a00!important;
}

.wpcf7-submit:hover {
	box-shadow: inset 0 0 50px 50px rgba(0,0,0,.3)!important;
	background: #bd9a00!important;
    border:0!important;
    color: #fff!important;
}

.modal .wpcf7 p {margin-bottom: 10px;}

.modal .wpcf7 .wpcf7-list-item {
	margin-bottom: 0;
	margin-top: 10px;
}

.modal .wpcf7 .wpcf7-submit {
    background: #bd9a00!important;
    color: #fff!important;
}

.text-anim .t1 {
white-space: nowrap;
font-size: 200px;
animation: scrollTxt 9s linear infinite;}

.designer span {
background-color: #ff3891;
background: linear-gradient(90deg,#38B7FF,#AD00FF);
background: linear-gradient(var(--gradient-orientation,90deg),#38B7FF,#AD00FF);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}

.explore span {
background-color: #05C4FC;
     background: linear-gradient(90deg, #05C4FC, #4FF3A1);
     background: linear-gradient(var(--gradient-orientation, 90deg), #05C4FC, #4FF3A1);
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
}

.menu-text {background-color : white!important; border-radius: 20px!important; padding: 3px!important; color: black!important;}
.menu-text::hover {background-color: #ff3891!important;
}

.btn-send {
display: block!important;
margin: auto!important;
}

.wpcf7-form  { margin-left:25%; margin-right: 25%}

.sticky-car {-webkit-backdrop-filter: blur(15px);
/* assure la compatibilité avec safari */
backdrop-filter: blur(15px);
background-color: rgba(255, 255, 255, 0.2)
border-radius : 20px}

.fadeIn span {
animation: fadeEffect 17.5s linear infinite 0s;
-ms-animation: fadeEffect 17.5s linear infinite 0s;
-webkit-animation: fadeEffect 17.5s linear infinite 0s;
color: #BF2E49;
opacity: 0;
overflow: hidden;
position: absolute;
left: 0;
right: 0;
}

- , *:before, *:after {
box-sizing: border-box;
}

/*text spin */
.containerSpin {
position: absolute;
top: 0;
left: 0;
z-index: -1;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;

}

.sceneSpin {
margin: auto;
transform: rotateY(45deg) rotate(-45deg);
transform-origin: center center;
transform-style: preserve-3d;
}

.circleSpin {
text-transform: uppercase;
font-size: 50px;
font-weight: bold;
animation: rotate 10s linear infinite;
transform-style: preserve-3d;
}

.circleSpin span {
position: absolute;
}

@keyframes rotate {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(1turn);
}
}

/* Texte défilant */
.defile {
width: 100%; /* largeur du texte pour le défilement */
margin: 0 auto;
overflow: hidden;
white-space: nowrap;
box-sizing: border-box;
animation: marquee 10s linear infinite; /* Ici tu gères la durée de l'animation */
font-size: 12em!important;
}
.defile:hover {
animation-play-state: paused; /* Ici tu stop le texte au passage de la souris */
}

/* Mouvement */
@keyframes marquee {
0%   { text-indent: 20em }
100% { text-indent: -25em }
}

/* Caroussel */

.carousel {
    position: relative;
    z-index: 1;
    height: 100vh;
    overflow: hidden;
    pointer-events: none;
}

.carousel-item {
    --items: 10;
    --width: clamp(150px, 30vw,  300px);
    --height: clamp(200px, 40vw,  400px);
    --x: calc(var(--active) * 800%);
    --y: calc(var(--active) * 200%);
    --rot: calc(var(--active) * 120deg);
    --opacity: calc(var(--zIndex) / var(--items) * 3 - 2);
    overflow: hidden;
    position: absolute;
    z-index: var(--zIndex);
    width: var(--width);
    height: var(--height);
    margin: calc(var(--height) * -0.5) 0 0 calc(var(--width) * -0.5);
    border-radius: 10px;
    top: 50%;
    left: 50%;
    user-select: none;
    transform-origin: 0% 100%;
    box-shadow: 0 10px 50px 10px rgba(0, 0, 0, .5);
    background: black;
    pointer-events: all;
    transform:  translate(var(--x), var(--y)) rotate(var(--rot)) ;
    transition: transform .8s cubic-bezier(0, 0.02, 0, 1);

.carousel-box {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity .8s cubic-bezier(0, 0.02, 0, 1);
    opacity: var(--opacity);
    font-family: 'Orelo-sw-db', serif;

&:before {
     content: '';
     position: absolute;
     z-index: 1;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(to bottom, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .5));
 }
}

.title {
    position: absolute;
    z-index: 1;
    color: #fff;
    bottom: 20px;
    left: 20px;
    transition: opacity .8s cubic-bezier(0, 0.02, 0, 1);
    font-size: clamp(20px, 3vw, 30px);
    text-shadow: 0 4px 4px rgba(0, 0, 0, .1);
}

.num {
    position: absolute;
    z-index: 1;
    color: #fff;
    top: 10px;
    left: 20px;
    transition: opacity .8s cubic-bezier(0, 0.02, 0, 1);
    font-size: clamp(20px, 10vw, 80px);
}

img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}
}

.layout {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;

&:before {
     content: '';
     position: absolute;
     z-index: 1;
     top: 0;
     left: 90px;
     width: 10px;
     height: 100%;
     border: 1px solid #fff;
     border-top: none;
     border-bottom: none;
     opacity: .15;
 }

.box {
    position: absolute;
    bottom: 0;
    left: 30px;
    color: #fff;
    transform-origin: 0% 10%;
    transform: rotate(-90deg);
    font-size: 9px;
    line-height: 1.4;
    text-transform: uppercase;
    opacity: .4;
}
}

.logo {
    position: absolute;
    z-index: 2;
    top: 28px;
    right: 28px;
    width: 30px;
    height: 30px;
    background: #fff;
    border-radius: 50%;
    opacity: .5;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Orelo-sw-db', serif;
    pointer-events: all;
    color: black;
    text-decoration: none;
    font-size: 20px;
    overflow: hidden;
    padding-bottom: .1em;
}

.social {
    position: absolute;
    z-index: 10;
    bottom: 20px;
    right: 25px;
    color: #fff;
    opacity: .4;

a {
    display: inline-block;
    margin-left: 3px;
}

svg {
    --fill: #fff;
    width: 35px;
    height: 35px;
}
}

.cursor {
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    --size: 40px;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .2);
    margin: calc(var(--size) * -0.5) 0 0 calc(var(--size) * -0.5);
    transition: transform .85s cubic-bezier(0, 0.02, 0, 1);
    display: none;
    pointer-events: none;

@media (pointer: fine) {
    display: block;
}
}

.cursor2 {
    --size: 2px;
    transition-duration: .7s;
}