/*
Theme Name: Moustache
Theme URI: www.moustachestudio.fr
Template: Divi
Author: Agence Moustache
Author URI: www.moustachestudio.fr
Version: 3.24.1781680018
Updated: 2026-06-17 07:06:58

*/

/* ============================================
   STYLES MOUSTACHE - Migré depuis Divi Theme Options
   ============================================ */
/* ============================================
   EFFET BORDURE CARTE - CLASSE OPTIONNELLE
   Ajouter la classe "card-border-hover" au module Divi
   pour activer l'effet de bordure animée
   ============================================ */

/* EFFET BORDURE CARTE - DÉSACTIVÉ PAR DÉFAUT, ACTIVER avec .card-border-hover */
/* Masque l'effet globalement sauf pour .card-border-hover */
.et_pb_text.et_pb_bg_layout_light:not(.card-border-hover)::after {
  background: transparent !important;
  width: 0% !important;
  transition: none !important;
}
/* Ne pas appliquer sur les colonnes pleine largeur */
.et_pb_column_4_4 > .et_pb_text.et_pb_bg_layout_light::after {
  display: none !important;
}
/* Activer l'effet SEULEMENT avec la classe .card-border-hover */
.et_pb_text.et_pb_bg_layout_light.card-border-hover::after {
  background: #e7213a !important;
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
  width: 0% !important;
  display: block !important;
}
.et_pb_text.et_pb_bg_layout_light.card-border-hover:hover::after {
  width: 100% !important;
}
.et_pb_text.et_pb_bg_layout_light.card-border-hover:hover {
  box-shadow: 0 8px 30px rgba(0,0,0,0.12) !important;
  transform: translateY(-3px);
}

/* ============================================
   CURSEUR PERSONNALISÉ - CERCLE FLOU
   Style inspiré de creative-stack/uncode
   ============================================ */

/*
*, *::before, *::after { cursor: none !important; }

#moustache-cursor {
  position: fixed;
  width: 12px;
  height: 12px;
  background: #e7213a;
  border-radius: 50%;
  pointer-events: none;
  z-index: 999999;
  transform: translate(-50%, -50%);
  transition: width 0.25s ease, height 0.25s ease, background 0.25s ease, backdrop-filter 0.25s ease, filter 0.25s ease;
  mix-blend-mode: normal;
}
#moustache-cursor-ring {
  position: fixed;
  width: 40px;
  height: 40px;
  border: 1.5px solid rgba(231, 33, 58, 0.5);
  border-radius: 50%;
  pointer-events: none;
  z-index: 999998;
  transform: translate(-50%, -50%);
  transition: width 0.4s cubic-bezier(0.16,1,0.3,1), height 0.4s cubic-bezier(0.16,1,0.3,1), border-color 0.3s ease, filter 0.3s ease;
  backdrop-filter: blur(0px);
}

*/
/* Hover sur lien : le cercle grossit avec flou */
body.cursor-on-link #moustache-cursor {
  width: 6px;
  height: 6px;
  background: rgba(231, 33, 58, 0.8);
}
body.cursor-on-link #moustache-cursor-ring {
  width: 60px;
  height: 60px;
  border-color: rgba(231, 33, 58, 0.7);
  backdrop-filter: blur(3px);
  filter: blur(0px);
}

/* ============================================
   /* ============================================
   SECTION FOOTER DÉGRADÉ DE FLOU PROGRESSIF
   Ajouter la classe "moustache-blur-section"
   ============================================ */
.moustache-blur-section {
  position: relative;
  overflow: hidden;
}

/* Flou progressif multi-couches (8 niveaux exponentiels) */
.moustache-blur-section .progressive-blur-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  pointer-events: none;
}

.moustache-blur-section .progressive-blur-overlay > div {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
}
/* ============================================
   SECTION PHYSICS LETTERS - FOND SOMBRE
   Déclenché à l'entrée dans le viewport
   ============================================ */
.moustache-physics-section {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #0d0d0d;
  min-height: 500px;
  cursor: default;
}

/* Canvas fills the entire section */
.moustache-physics-section canvas {
  display: block;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* Gradient noir en haut → transparent en bas */
.moustache-physics-section .physics-gradient-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 55%;
  background: linear-gradient(to bottom,
    #0d0d0d 0%,
    rgba(13,13,13,0.85) 40%,
    rgba(13,13,13,0.3) 75%,
    rgba(13,13,13,0) 100%
  );
  z-index: 10;
  pointer-events: none;
}

/* Flou progressif multi-couches (z-index 9) */
.moustache-physics-progressive-blur {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9;
  pointer-events: none;
}

/* Contenu texte au dessus */
.moustache-physics-section .physics-content {
  position: relative;
  z-index: 20;
  padding: 60px 40px 40px;
  color: #fff;
}
SLIDER INSIGHTS
   ============================================ */
.insights-slider-section {
  padding: 80px 0 60px;
  overflow: hidden;
}
.insights-slider-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 5%;
  margin-bottom: 50px;
}
.insights-slider-header h2 {
  font-size: clamp(40px, 8vw, 90px) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -0.03em;
  color: #0a0a0a;
}
.insights-view-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #0a0a0a;
  text-decoration: none;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: gap 0.3s ease;
}
.insights-view-all:hover { gap: 14px; }
.insights-view-all::after { content: '→'; }

.insights-track-wrap {
  overflow: hidden;
  cursor: grab;
  padding: 0 5%;
}
.insights-track-wrap:active { cursor: grabbing; }
.insights-track {
  display: flex;
  gap: 30px;
  transition: transform 0.5s cubic-bezier(0.16,1,0.3,1);
  will-change: transform;
}
.insight-card {
  flex: 0 0 calc(33.333% - 20px);
  min-width: 280px;
}
@media (max-width: 768px) {
  .insight-card { flex: 0 0 calc(80% - 20px); }
}
.insight-card-img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  margin-bottom: 20px;
  transition: transform 0.5s ease;
}
.insight-card:hover .insight-card-img {
  transform: scale(1.02);
}
.insight-card-overflow {
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: 20px;
}
.insight-card-title {
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 600;
  line-height: 1.3;
  color: #0a0a0a;
  margin: 0;
}
.insights-dots {
  display: flex;
  gap: 8px;
  padding: 40px 5% 0;
}
.insights-dot {
  width: 30px;
  height: 3px;
  background: #ccc;
  border: none;
  cursor: pointer;
  transition: background 0.3s ease, width 0.3s ease;
  padding: 0;
}
.insights-dot.active {
  background: #0a0a0a;
  width: 50px;
}

/* ============================================
   BOUTON TEXTE ANIMÉ - STYLE CREATIVE-STACK
   Ajouter la classe "btn-text-anim" au bouton ou lien
   ============================================ */
.btn-text-anim {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0a0a0a;
  text-decoration: none;
  position: relative;
  padding-bottom: 4px;
  overflow: hidden;
  transition: gap 0.35s cubic-bezier(0.16,1,0.3,1);
}
.btn-text-anim::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(1);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
}
.btn-text-anim::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1) 0.1s;
}
.btn-text-anim:hover::after { transform: scaleX(0); transform-origin: right; }
.btn-text-anim:hover::before { transform: scaleX(1); transform-origin: left; }
.btn-text-anim .btn-arrow {
  display: inline-block;
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
}
.btn-text-anim:hover .btn-arrow { transform: translateX(6px); }

/* Version claire sur fond sombre */
.btn-text-anim.light {
  color: #ffffff;
}
/* Variante avec fond sombre (la flèche rotate) */
.btn-text-anim.with-arrow-rotate .btn-arrow {
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
}
.btn-text-anim.with-arrow-rotate:hover .btn-arrow {
  transform: rotate(-45deg) translateX(3px);
}



/*****title*****/
#et-main-area h1, #et-main-area .h1 {font-size: clamp(35px,6.9vw,60px); line-height:1em !important; font-weight: 700; }
#et-main-area h2, #et-main-area .h2 { font-size: clamp(27px,6vw,45px); line-height:1em !important; font-weight: 700;}
#et-main-area h3, #et-main-area .h3 {font-size: clamp(22px,1.8vw,27px); line-height:1em !important; font-weight: 700;}
.anim h1 {animation-name: fadeInTop;  animation: fadeInTop 1s;}




/***menu wordpress**/
header#main-header, #main-header.et-fixed-header { top:10px !important; box-shadow:none!important; background:initial !important; position: fixed; }
@media (min-width: 980px) { header#main-header, #main-header.et-fixed-header {top:25px !important;} }
@media (max-width: 980px) { .et_header_style_left #logo {  max-width: 65%;} }
@media (min-width: 1140px) {#logo {max-width: initial;} }
header .container { width: 95%;max-width: 1800px;border-radius: 20px;background-color: #ffffff85; -webkit-backdrop-filter: blur(10px);backdrop-filter: blur(10px);border: 1px solid #e1e1e1;padding: 12px 20px;display: flex;align-items: center;justify-content: space-between; box-shadow: 0px 0px 25px 0px rgba(85, 85, 85, 0.05);}
header .container:after, #top-menu-nav #top-menu a:after { content: none !important;}
header#main-header .logo_container {position: initial;height: auto;width: auto;}
header#main-header #et-top-navigation {padding: 0 !important;}
header#main-header #top-menu-nav #top-menu a {border-radius: 20px;padding: 0.7em 0.7em!important;color: rgb(0 0 0) !important;font-weight: 400;width: auto;border-width: 1px 1px 1px 1px;border-color: transparent;border-style: solid;transition: all 0.1s linear; z-index: 99999;}
header#main-header #top-menu-nav #top-menu a:hover {opacity: 1;}
nav#top-menu-nav, #top-menu, nav.et-menu-nav, .et-menu {float: none;}

header#main-header #top-menu li {padding-right: 0;}
header#main-header #top-menu li.current-menu-ancestor > a, header#main-header #top-menu li.current-menu-item > a, 
#top-menu li.current_page_item > a, #top-menu li.menu-item > a:hover {background: #eaeaea; cursor:pointer;}

@media (min-width: 980px) { 
	header#main-header #top-menu .menu-item-has-children:hover > a { border-radius: 20px 20px 0 0 !important;background-color: #fff; border-width: 1px 1px 0 1px !important; 
		border-color: #cbe0ef !important;}
	header#main-header #top-menu .menu-item-has-children:hover > a:hover {background-color: #fff;}
	header#main-header ul.sub-menu { border-radius: 0 20px 20px 20px;box-shadow: 12px 8px 20px 5px rgba(85, 85, 85, 0.05);border-width: 1px 1px 1px 1px !important; 
		border-color: #cbe0ef !important;border-style: solid !important;padding: 15px;border: 0;background-color: #fff;width: 300px;display: flex;flex-direction: column;top: 37px;}
}
	
header#main-header #top-menu-nav #top-menu ul.sub-menu li a:hover {text-decoration: underline;}
#top-menu li li {padding: 0;}
span.logo_helper {display: none;}

header#main-header .btn a {border-radius: 20px;color: #000000 !important;background-color: #81E46B;padding: 0.7em 1.5em!important;transition: all 0.25s ease;}
header#main-header #top-menu-nav #top-menu .btn a:hover {background-color: #000000;color: #ffffff !important;opacity: 1;transform: translateY(-5px);}


/**menu mobile**/
.et_header_style_left #et-top-navigation .mobile_menu_bar { padding-bottom: 0;}
#et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before,
.et_pb_module.et_pb_menu .et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before { content: '4d';  }

ul.et_mobile_menu {border: 0; border-radius: 20px; top: 75px;  overflow: auto; max-height: 480px;}
ul.et_mobile_menu li a { width: 100%; margin: 0 auto; padding: 10px; font-weight: 400 !important; border-radius: 20px; font-size: initial; } 

/*ajoute d'un sub menu toogle js pour le mobile*/
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
ul.et_mobile_menu li.page_item_has_children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.page_item_has_children .mobile-toggle::after { /*width: 30px; height: 100%; padding: 0px !important; max-height: 44px; border: none; position: absolute; 
right: 0; top: 0; z-index: 999; background-color: transparent;*/}

ul.et_mobile_menu>li.menu-item-has-children,
ul.et_mobile_menu>li.page_item_has_children,
ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.page_item_has_children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children { position: relative;}

.et_mobile_menu li li { padding-left: 0;}
.et_mobile_menu .menu-item-has-children>a { background:transparent;}
.et_mobile_menu li a:hover, .nav ul li a:hover { opacity:1;}
 
ul.et_mobile_menu .menu-item-has-children .sub-menu,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu { display: none !important; visibility: hidden !important;}

ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible {display: block !important; visibility: visible !important; padding-left:20px;}

/*submenu icon*/
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle {cursor: pointer; opacity: 1;}
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after {top: 10px;position: absolute;font-family: "ETModules";content: '33';color: #00d263;background: #ededed;border-radius: 50%; padding: 3px 5px; right: 10px;  height: 20px; width: 15px;}
ul.et_mobile_menu li.menu-item-has-children.dt-open>.mobile-toggle::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children.dt-open>.mobile-toggle::after {content: '32';}