/*
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
*/
/* ========================================
   FONTS LOCALES — Plus Jakarta Sans + Silkscreen
   ======================================== */

/* Plus Jakarta Sans — Regular */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url('./fonts/plus-jakarta-sans-v12-latin-200.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: italic;
  font-weight: 200;
  font-display: swap;
  src: url('./fonts/plus-jakarta-sans-v12-latin-200italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('./fonts/plus-jakarta-sans-v12-latin-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('./fonts/plus-jakarta-sans-v12-latin-300italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/plus-jakarta-sans-v12-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/plus-jakarta-sans-v12-latin-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./fonts/plus-jakarta-sans-v12-latin-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('./fonts/plus-jakarta-sans-v12-latin-500italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./fonts/plus-jakarta-sans-v12-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('./fonts/plus-jakarta-sans-v12-latin-600italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/plus-jakarta-sans-v12-latin-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/plus-jakarta-sans-v12-latin-700italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('./fonts/plus-jakarta-sans-v12-latin-800.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url('./fonts/plus-jakarta-sans-v12-latin-800italic.woff2') format('woff2');
}

/* Silkscreen */
@font-face {
  font-family: 'Silkscreen';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/silkscreen-v6-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Silkscreen';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/silkscreen-v6-latin-700.woff2') format('woff2');
}

	html,
	body {
		overflow-x: hidden;
		background:#0e1520;
	}
	body {
		position: relative
	}


.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: 999999999999999999999 !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: 99999999999999999910000;
    pointer-events: none;
    background-size: cover;
    background-image: url('https://agence-headshot.com/wp-content/uploads/2026/04/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; 
}


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 MENU*/
.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: 4px;
    right: 6px;
}
}

@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: white;
  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: 11px!important;
}
/* 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: transparent;
    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;
}


/*RETARDEUR DE CHARGEMENT DU SHOWREEL POUR PAGESPEED*/

.lwp-video-autoplay {
  content-visibility: auto;
  contain-intrinsic-size: 0 110vh;
}