/*
Theme Name: Headshot Child Theme
Description: Theme enfant de Divi par Agence Headshot
Author: Nicolas Headshot
Author URI: https://agence-headshot.com
Template: Divi
Version: 1.1
*/



.verticalized {
	display: flex;
	flex-direction: column;
	justify-content: center;
  	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	 -moz-box-orient: vertical;
	 -moz-box-direction: normal;
	  -ms-flex-direction: column;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-moz-box-pack: center;
	-ms-flex-pack: center;
}


/*
** INVERSER LE SENS DES COLONNES SUR MOBILE
*/

@media only screen and (max-width : 980px) {
	.reverse {
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-webkit-flex-direction: column-reverse;
		-ms-flex-direction: column-reverse;
		flex-direction: column-reverse;
	}
}


#viewport-frame {
    border: 10px solid white !important;
    z-index: 99999999 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
	bottom:0!important;
    width: 100vw !important;
    height: 100vh !important;
    pointer-events: none !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
}
@media only screen and (max-width: 768px) { /* Ciblage spécifique pour mobile */
    #bottom-frame {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 10px; /* Hauteur de la bande */
        background-color: white; /* Couleur de la bande */
        z-index: 99999999 !important;
        pointer-events: none; /* Pour ne pas bloquer les clics */
    }
}


/* Coins avec images */
.corner {
    position: fixed;
    width: 50px; /* Ajuste la taille selon tes besoins */
    height: 50px;
    z-index: 10000;
    pointer-events: none;
    background-size: cover;
    background-image: url('https://reboot.agence-headshot.com/wp-content/uploads/2024/03/corner2.png');
}

/* Coin haut gauche */
.corner.top-left {
    top: 0;
    left: 0;
    transform: rotate(270deg);
}

/* Coin haut droit */
.corner.top-right {
    top: 0;
    right: 0;
}

/* Coin bas gauche */
.corner.bottom-left {
    bottom: 0;
    left: 0;
    transform: rotate(180deg);
}

/* Coin bas droit */
.corner.bottom-right {
    bottom: 0;
    right: 0;
    transform: rotate(90deg);
}



/* === Sélection de texte === */
::-moz-selection { 
    color: #181818;
    background: #ff4242;
}
::selection {
    color: #181818;
    background: #ff4242;
}

/* === Scrollbar personnalisée === */
* {
    scrollbar-width: none;
    scrollbar-color: #ff4242 #181818;
}
::-webkit-scrollbar-track {
    background: #181818;
}
::-webkit-scrollbar {
    width: 2px;
}
::-webkit-scrollbar-thumb {
    background: #ff4242; 
}
::-webkit-scrollbar-thumb:hover {
    background: #ff4242; 
}

/* === Conteneur principal === */
div#page-container {
    overflow-x: hidden;
}

/* === Effet de flèche sur les liens === */
.link-arrow {
    opacity: 0;
    padding-left: 0px;
    padding-right: 0px;
    transition: all 0.3s cubic-bezier(0.87, 0.04, 0.48, 0.91);
}
.linkz:hover .link-arrow, 
.linkz2:hover .link-arrow {
    opacity: 1;
    padding-left: 10px;
    padding-right: 30px;
}

/* === Animation de fond au survol === */
span.linkz:hover::before {
    content: '';
    display: block;
    background-color: #333333;
    padding-top: 10px;
    padding-left: 30px;
    padding-right: 30px;
    position: absolute;
    transform: translateY(15px);
    z-index: -1;
    transition: padding 0.3s cubic-bezier(0.87, 0.04, 0.48, 0.91);
}

/* === Animation des boutons liquides === */
.liquid-button-2 > path:nth-child(2), 
.liquid-button > path:nth-child(2) {
    transform: scale(1.01) translate(-1px, -1px);
}



	@media screen and (min-width:980px){
.cursor-dot,
.cursor-dot-outline {
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
	z-index:9999999999;
}

.cursor-dot {
  width: 8px;
  height: 8px;
  background-color: #ff424291 ;
	z-index:99999999999;
}

.cursor-dot-outline {
  width: 40px;
  height: 40px;
  background-color:#ff2e2e70;
z-index:9999999999;
}
	}



	.cursor-grow{
		transform:scale(3)!important;
		background-color:#ff4242!important;
	}
	.cursor-grow:before{
		position:absolute;
		content:"DÉCOUVRIR";
		color:white;
		font-size:3.8px;
		text-align:center;
		left:9.5px!important;
		top:21.3%!important;
	}

	
		.cursor-grow2{
		transform:scale(4)!important;
		background-color:#ff4242!important;
	}
	.cursor-grow2:before{
		position:absolute;
		content:"\2b";
		color:white;
		font-family:"ETmodules";
		font-size:8px;
		text-align:center;
		left:16px!important;
		top:23%!important;
	}
	button.flickity-button {
    display: none;
}
	.cursor-grow3{
		transform:scale(3)!important;
		background-color:#ff4242!important;
	}
	.cursor-grow3:before{
		position:absolute;
		content:"PLAY";
		font-family:'Silkscreen', display;
		color:white;
		font-size:6.8px;
		text-align:center;
		left:10px!important;
		top:20.6%!important;
	}
	button.flickity-button {
    display: none;
}


@media screen and (min-width: 479px) {
  /* Container de texte animé */
  .title, .title-2, .title-3 {
    display: flex;
    justify-content: center; /* Centre verticalement et horizontalement */
    align-items: center;
    width: 100%;
    min-height: 80px;
    position: relative;
  }

  /* Span générés par lettering.js */
  .title span, .title-2 span, .title-3 span {
    display: inline-block;
    position: relative;
    white-space: nowrap; /* Évite les retours à la ligne */
  }

  /* Assurer la visibilité avant animation */
  .title-2 {
    visibility: hidden;
    text-align: center;
  }
}




@media screen and (min-width: 479px) {
  /* Container de texte animé */
  .title, .title-2, .title-3 {
    display: flex;
    justify-content: center; /* Centre horizontalement */
   
  }

  /* Span générés par lettering.js */
  .title span, .title-2 span, .title-3 span {
    display: inline-block;
    position: relative;
    white-space: pre; /* Garde les espaces blancs */
  }

  /* Assurer la visibilité avant animation */
  .title-2 {
    visibility: hidden;
    text-align: center;
  }
}




	.title-container {
  visibility: hidden;

}

.title-container.show {
  visibility: visible;

}
	
	
  .title-2 {
    visibility: hidden;
  }



body:not(.et-fb) .dl-slide-sidebar {
  transform:translateX(100%);
}
  @media screen and (min-width:980px){
body:not(.et-fb) .dl-slide-sidebar.is-opened {
  transform:translateX(6.5%);
  box-shadow: -5px 0 33px #0000001c;
 }
    
  .dl-slide-sidebar.has-transition {
 transition: 1.19s cubic-bezier(0.2, 0.81, 0.17, 1.2);
 }
}
  
   @media screen and (max-width:980px){
body:not(.et-fb) .dl-slide-sidebar.is-opened {
  transform:translateX(0%);
    }
  .dl-slide-sidebar.has-transition {
 transition: 1.19s cubic-bezier(0.2, 0.21, 0.17, 1.2);
  }
}
  
  

.dl-close {
  cursor:pointer;
     font-size:100px!important;
  font-weight:900;
}
  

.burger , .x {
  height: 74px;
  position: absolute;
  width: 74px;
  cursor:pointer;
}
.plates {
  display: flex;
  flex-wrap: wrap;
  max-height: 80px;
  width: 80px;
}

@media (max-width: 480px) {
.burger, .x {
    height: 70.35px;
    position: absolute;
    width: 70.35px;
    cursor: pointer;
    top: 5px;
    right: -4px;
}
}

@media (max-width: 640px) {
  .plates {
    width: 320px;
  }
}
.plate {
  height: 78px;
  width: 78px;
}
.burger {
  filter: url(#gooeyness);
}
.x {
  transform: scale(0);
  transition: transform 400ms;
}
.line {
  fill: none;
  stroke: #153753;
  stroke-width: 6px;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-origin: 50%;
  transition: stroke-dasharray 500ms 200ms, stroke-dashoffset 500ms 200ms, transform 500ms 200ms;
}
.x .line {
  stroke-width: 5.5px;
}
/* First plate */
.plate1 .line2 {
  stroke-dasharray: 40 200;
  stroke-dashoffset: 0px;
}
.plate1 .line3 {
  stroke-dasharray: 40 179;
  stroke-dashoffset: 0px;
}
.active .line {
  transition: stroke-dasharray 500ms, stroke-dashoffset 500ms, transform 500ms;
   stroke-width: 6px;
}
.active.plate1 .line1 {
  transform: scale(0, 1);
  transition: transform 500ms 100ms;
}
.active.plate1 .line2 {
  stroke-dasharray: 5px 200;
  stroke-dashoffset: -164px;
}
.active.plate1 .line3 {
  stroke-dasharray: 5px 179;
  stroke-dashoffset: -142px;
}
.active .x {

    transform: scale(0.8);
    transition: transform 400ms 350ms;
    background: white;
    border-radius: 50%;


}
/* El segundo plato */
.plate2 .line1 {
  stroke-dasharray: 21 185.62753295898438;
  transition-delay: 0;
}
.plate2 .line2 {
  stroke-dasharray: 21 178.6514129638672;
  transition-delay: 30ms;
}
.plate2 .line3 {
  stroke-dasharray: 21 197.92425537109375;
  transition-delay: 60ms;
}
.plate2 .line4 {
  stroke-dasharray: 21 190.6597137451172;
  transition-delay: 90ms;
}
.plate2 .line5 {
  stroke-dasharray: 21 208.52874755859375;
  transition-delay: 120ms;
}
.plate2 .line6 {
  stroke-dasharray: 21 186.59703063964844;
  transition-delay: 150ms;
}
.active.plate2 .line1 {
  stroke-dasharray: 5 185.62753295898438;
  stroke-dashoffset: -151px;
}
.active.plate2 .line2 {
  stroke-dasharray: 5 178.6514129638672;
  stroke-dashoffset: -147px;
}
.active.plate2 .line3 {
  stroke-dasharray: 5 197.92425537109375;
  stroke-dashoffset: -186px;
}
.active.plate2 .line4 {
  stroke-dasharray: 5 190.6597137451172;
  stroke-dashoffset: -169px;
}
.active.plate2 .line5 {
  stroke-dasharray: 5 208.52874755859375;
  stroke-dashoffset: -149px;
}
.active.plate2 .line6 {
  stroke-dasharray: 5 186.59703063964844;
  stroke-dashoffset: -186px;
}
.active.plate2 .x {
  transition: transform 400ms 250ms;
}


.wrapper {
    width: 0;
    height: 0;
}

.hide-btn {
opacity:1!important;
  }
 
.show-btn {

opacity:0!important;
  }
#mail-btn {
-webkit-transition: all 0.5s ease !important;
-moz-transition: all 0.5s ease !important;
-o-transition: all 0.5s ease !important;
-ms-transition: all 0.5s ease !important;
transition: all 0.5s ease !important;
}

/*blog image aspect ratio square 1:1*/

.pa-blog-image-16-9 .entry-featured-image-url {
  padding-top: 56.25%;
  display: block;
}
.pa-blog-image-16-9 .entry-featured-image-url img {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  object-fit: cover;
	border-radius: 12px;
}