/*
Theme Name: Teaser Medias
Description: Theme enfant de Divi
Author: Laurent Holdrinet
Author URI: https://laurentholdrinet.com
Template: Divi 
Version: 1.0
*/

/*	typo	*/
.tm_green,
h5.tm_green {
	color: #32fa88!important;
}
.tm_greener {
	color: #2ddf79;
}
.tm_intro {
	font-size:	19px;
	line-height: 1.4em;
}
p .tm_greener, p .tm_green {
	font-weight: 400;
}


/*	*********************************************	*/
/*	Mega Menu	*/
/*	*********************************************	*/

/*	Vertical align blurb image & text	*/
/* Media query for devices with a minimum width of 767 pixels */
@media (min-width: 767px) {
    /* Flexbox display for blurb content */
    .pa-vertical-align-blurb .et_pb_blurb_content {
        display: flex!important;
    }
    /* Flexbox display for blurb container */
    .pa-vertical-align-blurb .et_pb_blurb_container {
        display: flex!important;
        justify-content: center; /* Center align blurb container horizontally */
        flex-direction: column; /* Arrange blurb container content in a column */
    }
    /* Flexbox display for main blurb image */
    .et-db #et-boc .et-l .pa-vertical-align-blurb .et_pb_main_blurb_image {
        display: flex;
        width: auto!important; /* Ensure blurb image width adjusts automatically */
        margin-bottom: 0px!important; /* Remove bottom margin for better alignment */
    }
}


/*	*****************************************	*/
/*	*****************************************	*/
/* Création du voile sombre */
.dsm-submenu-inner-container::before {
    content: '';
    position: fixed; /* Fixe par rapport à la fenêtre du navigateur */
    top: 0;
    left: 0;
    width: 100vw; /* 100% de la largeur de la vue */
    height: 100vh; /* 100% de la hauteur de la vue */
    background: linear-gradient(
    	to bottom, 
       	rgba(0, 0, 0, 0) 0%,			/* Transparent au départ (en haut) */
        rgba(0, 0, 0, 0) 66px,		/* Devient sombre après 50 pixels de descente */
		rgba(0, 0, 0, 0.55) 222px,
        rgba(0, 0, 0, 0.88) 100%			/* Reste sombre jusqu'en bas */
    );
    z-index: -1; /* Se place DERRIÈRE le sous-menu */
    
	/* Animation fluide (optionnel) */
    opacity: 0;
    animation: fadeIn 0.3s forwards;
    pointer-events: none; /* Permet de ne pas bloquer les clics si bug */
}
/* Petite animation pour que l'ombre n'arrive pas trop brutalement */
@keyframes fadeIn {
    to { opacity: 1; }
}
/*	*****************************************	*/
/*	*****************************************	*/


/*	Motifs d'overlay	*/
.pa-custom-background-pattern-black .et_pb_background_pattern {
	background-image: url("https://tm.laurentholdrinet.com/wp-content/uploads/2025/12/TM_black_halfline_pattern_45deg.svg")!important;
}
.pa-custom-background-pattern-white .et_pb_background_pattern {
	background-image: url("https://tm.laurentholdrinet.com/wp-content/uploads/2025/12/TM_white_halfline_pattern_45deg.svg")!important;
}
.pa-custom-background-pattern-beige .et_pb_background_pattern {
	background-image: url("https://tm.laurentholdrinet.com/wp-content/uploads/2025/12/TM_beige_F1F0ED_halfline_pattern_45deg.svg")!important;
}

/* Hero Section Pleine Hauteur et Centrée */
.tm-hero-full {
    min-height: calc(100vh); /* Force la hauteur à 100% de la fenêtre, - 80px si barre menu */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centre verticalement les rangées */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/*	*************************************	*/
/*	Vignettes video portfolio	*/
.video-item {
  position: relative;
  cursor: pointer;
  aspect-ratio: 16 / 9;
  z-index: 0;
}

/* Bordure décalée visible */
.video-item::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  bottom: 12px;
  border: 2px solid #32fa88; /* white */
  border-radius: 11px;
  z-index: 999; /* devant tout */
  pointer-events: none; /* ne bloque pas les clics */
  transition: all 0.3s ease;
}

/* Effet optionnel au survol */
.video-item:hover::before {
  border-color: #ffffff;
}

.video-item img,
.video-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.5s ease;
}

/* La vidéo doit être parfaitement calée sur la vignette */
.video-item video {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}

/* Transition fluide entre image et vidéo */
.video-item:hover video {
  opacity: 1;
}
.video-item:hover img {
  opacity: 0;
}
/*	*******************************************	*/