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

/*	typo	*/
/*	vert fond foncé	*/
.tm_green,
h5.tm_green, h4.tm_green, h3.tm_green, h2.tm_green, h1.tm_green {
	color: #32fa88!important;
}
/* vert fond clair	*/
.tm_greener,
h5.tm_greener, h4.tm_greener, h3.tm_greener, h2.tm_greener, h1.tm_greener {
	color: #2ddf79;
}
/*	gros texte p / header	*/
.tm_intro {
	font-size:	19px;
	line-height: 1.4em;
}
p .tm_greener, p .tm_green {
	font-weight: 400;
}
/*	smallcaps dont TV vs Digtail ads	*/
.tm_smallcaps {
	font-size: .7rem;
	font-weight:700;
	color: #2ddf79;
	text-transform: uppercase;
}
/*	allcaps dont Etape1.. Objectifs...	*/
.tm_caps {
	font-size: .9rem;
	font-weight:700;
	text-transform: uppercase;
}


/*	*****************************	*/
/*	liens <a>	*/
/*	https://www.peeayecreative.com/how-to-add-fancy-animated-text-link-underlines-in-divi/	/	apply the link underline and other styling*/
a.darklink, .darklink a  {
	background-image: linear-gradient(120deg, #32fa88 0%, #32fa88 100%);
}
a.litelink {
	background-image: linear-gradient(120deg, #2ddf79 0%, #2ddf79 100%);
}
a.darklink, a.litelink, .darklink a {
	background-repeat: no-repeat;
	background-size: 100% 1px;
	background-position: 0 100%;
	transition: background-size 0.25s ease-in-out;
	color: inherit !important;
}
/*animate the line into a background on hover*/
a.darklink:hover, .darklink a:hover {
	color: #000000 !important;
}
a.litelink:hover, .litelink a:hover {
	color: #ffffff !important;
}
a.darklink:hover, a.litelink:hover, .darklink a:hover, .litelink a:hover {
	background-size: 100% 100%;
	transition: ease all .3s;
}
/*	************************	*/

/*	listes	*/
ul.darklist, ul.litelist {
  list-style: none !important;
}
ul.darklist li::before, ul.litelist li::before {
	content: "• ";
	display: inline-block;
	width: 1em;
	margin-left: -1em
}
ul.darklist li::before {
	color: #32fa88;
}
ul.litelist li::before {
	color: #2ddf79;
}


/*	*********************************************	*/
/*	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	*/
/* Pattern NOIR en Base64 */
.pa-custom-background-pattern-black .et_pb_background_pattern,
.pa-custom-background-pattern-black .et_pb_background_pattern:before {
    background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0iIzAwMDAwMCIgZD0iTTEwMC4wMDAxNTc1LDI1LjQ1NjEzMzRMMjUuNDU2MjEyMiwxMDAuMDAwMDc4N0guMDAwMTU3NXYtMjUuNDU2MDU0N0w3NC41NDQxMDI4LDAuMDAwMDc4N2gyNS40NTYwNTQ3djI1LjQ1NjA1NDdaTS4wMDAxNTc1LDAuMDAwMDc4N3YyNS40NTYwNTQ3TDI1LjQ1NjIxMjIsMC4wMDAwNzg3SC4wMDAxNTc1Wk0xMDAuMDAwMTU3NSw3NC41NDQwMjQxbC0yNS40NTYwNTQ3LDI1LjQ1NjA1NDdoMjUuNDU2MDU0N3YtMjUuNDU2MDU0N1oiLz48L3N2Zz4=") !important;
    opacity: 1 !important;
}
/* Pattern BLANC en Base64 */
.pa-custom-background-pattern-white .et_pb_background_pattern,
.pa-custom-background-pattern-white .et_pb_background_pattern:before {
    background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTEwMC4wMDAxNTc1LDI1LjQ1NjEzMzRMMjUuNDU2MjEyMiwxMDAuMDAwMDc4N0guMDAwMTU3NXYtMjUuNDU2MDU0N0w3NC41NDQxMDI4LDAuMDAwMDc4N2gyNS40NTYwNTQ3djI1LjQ1NjA1NDdaTS4wMDAxNTc1LDAuMDAwMDc4N3YyNS40NTYwNTQ3TDI1LjQ1NjIxMjIsMC4wMDAwNzg3SC4wMDAxNTc1Wk0xMDAuMDAwMTU3NSw3NC41NDQwMjQxbC0yNS40NTYwNTQ3LDI1LjQ1NjA1NDdoMjUuNDU2MDU0N3YtMjUuNDU2MDU0N1oiLz48L3N2Zz4=") !important;
    opacity: 1 !important;
}
/* Pattern BEIGE en Base64 */
.pa-custom-background-pattern-beige .et_pb_background_pattern,
.pa-custom-background-pattern-beige .et_pb_background_pattern:before {
    background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0iI0YxRjBFRCIgZD0iTTEwMC4wMDAxNTc1LDI1LjQ1NjEzMzRMMjUuNDU2MjEyMiwxMDAuMDAwMDc4N0guMDAwMTU3NXYtMjUuNDU2MDU0N0w3NC41NDQxMDI4LDAuMDAwMDc4N2gyNS40NTYwNTQ3djI1LjQ1NjA1NDdaTS4wMDAxNTc1LDAuMDAwMDc4N3YyNS40NTYwNTQ3TDI1LjQ1NjIxMjIsMC4wMDAwNzg3SC4wMDAxNTc1Wk0xMDAuMDAwMTU3NSw3NC41NDQwMjQxbC0yNS40NTYwNTQ3LDI1LjQ1NjA1NDdoMjUuNDU2MDU0N3YtMjUuNDU2MDU0N1oiLz48L3N2Zz4=") !important;
    opacity: 1 !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;
  transition: transform 0.3s ease;
}
/* 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;
}


/*	*****************	*/
/*		POPUP video		*/
/*	*****************	*/
.video-popup {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.0);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999999;
  opacity: 0;
  transition: background 0.3s ease, opacity 0.3s ease;
}
.video-popup.active {
  background: rgba(0,0,0,0.9);
  opacity: 1;
}
.video-popup-inner {
  position: relative;
  width: 80vw;
  max-width: 1000px;
  transform: scale(0.95);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.video-popup.active .video-popup-inner {
  transform: scale(1);
  opacity: 1;
}
.video-popup video {
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
}
/* Bouton fermeture clean */
.close-popup {
  position: absolute;
  top: -45px;
  right: 0;
  font-size: 36px;
  color: white;
  background: none;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.close-popup:hover {
  transform: scale(1.2);
  opacity: 0.7;
}


/**********************************************************************************************************
* Formulaire Contact Form 7
https://knowledge.parcours-performance.com/wordpress-contact-form-7-avec-style-divi/
***********************************************************************************************************/
/* Style global des champs Contact Form 7 */
.wpcf7 input.text, 
.wpcf7 input.title, 
.wpcf7 input[type="email"], 
.wpcf7 input[type="password"], 
.wpcf7 input[type="tel"], 
.wpcf7 input[type="text"], 
.wpcf7 select, 
.wpcf7 textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 8px;
    background-color: transparent !important;
    color: #ffffff !important;
    font-size: 16px;
}
/* Pour que le texte indicatif soit bien lisible mais un peu plus discret que le texte tapé */
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
    color: rgba(255, 255, 255, 0.7); /* Blanc à 70% d'opacité */
    opacity: 1; /* Nécessaire pour uniformiser l'affichage sur Firefox */
}
/* Griser l'option qui sert de placeholder dans les menus déroulants */
.wpcf7 select option:first-child {
    color: #999999;
}
/* S'assurer que les autres vraies options restent lisibles (noires/foncées) */
.wpcf7 select option:not(:first-child) {
    color: #000000; 
}
/* Cibler le texte de la case d'acceptation RGPD */
.wpcf7 .wpcf7-acceptance .wpcf7-list-item-label {
    color: #ffffff;
    font-size: 14px;
    line-height: 1.5;
}
/* Ajuster l'alignement vertical entre la case à cocher et le texte */
.wpcf7 .wpcf7-acceptance input[type="checkbox"] {
    margin-right: 10px; /* Espace la case du texte */
    vertical-align: middle; /* Aligne la case avec le texte */
}
/* 1. Le message global en bas du formulaire (Succès, Erreur serveur, etc.) */
.wpcf7 form .wpcf7-response-output {
    color: #ffffff; /* Texte en blanc */
    border-color: #ffffff; /* Pour que la bordure du message soit raccord avec le texte */
    border-radius: 8px; /* Optionnel : pour adoucir les angles comme tes autres éléments */
}
/* 2. Les petits messages d'erreur sous chaque champ spécifique */
.wpcf7-not-valid-tip {
    color: #ff7e67;
    font-size: 14px;
    margin-top: 4px;
    font-weight: 300;
}
/* Passe le loader d'envoi en blanc */
.wpcf7-spinner {
    filter: invert(100%);
}
/*	*********************************************	*/


/*	gmap funky style	*/
.map-teaser {
    width: 100%; /* S'adapte au parent */
    height: auto; /* Écrase l'éventuelle hauteur par défaut */
    aspect-ratio: 3 / 2;
    filter: grayscale(100%) contrast(100%);		/* Filtre noir & blanc */
}
/*	***************	*/

/*	***************	*/
/*	Slider SLICK.js	*/
/*	***************	*/
.slick_hero, .slick_temoignage {
    /* On applique un masque de transparence linéaire */
    -webkit-mask-image: linear-gradient(to right, 
        transparent 0%, 
        #000 10% ,	/*depart*/
        #000 90%,	/*arrivee*/
        transparent 100%
    );
    mask-image: linear-gradient(to right, 
        transparent 0%, 
        #000 10%,	/*depart*/
        #000 90%, 	/*arrivee*/
        transparent 100%
    );
}
/*	***************	*/