/*
Theme Name: e-novision Theme
Theme URI: https://e-novision.ch
Author: e-novision
Author URI: https://e-novision.ch
Description: Thème WP e-novision
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: theme-enovision
*/


html 
{
  font-size: 14px;
}
body
{
    margin: 0;
    font-family: var(--e-global-typography-primary-font-family), Sans-serif;
}

body.error404
{
  background-color: #d1d1d1;
}
.container-404
{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  height: 60vh;
}
body.error404 .container-404 h1 
{
  font-family: var(--e-global-typography-secondary-font-family), Sans-serif;
  font-size: var(--e-global-typography-secondary-font-size);
  font-weight: var(--e-global-typography-secondary-font-weight);
  line-height: var(--e-global-typography-secondary-line-height);
  color: var(--e-global-color-primary);

  margin-bottom: 15px;
}

/* SINGLE ARTICLE STYLE WYSIWIG */
.elementor-widget-text-editor h2
{
  font-size: var(--e-global-typography-50cf0d1-font-size);

  font-family: var(--e-global-typography-50cf0d1-font-family), Sans-serif;
  font-weight: var(--e-global-typography-50cf0d1-font-weight);
  line-height: var(--e-global-typography-50cf0d1-line-height);
  letter-spacing: var(--e-global-typography-50cf0d1-letter-spacing);

  margin-bottom: 15px;
}

.elementor-widget-text-editor h3
{
  font-size: var(--e-global-typography-cffcd45-font-size);

  font-family: var(--e-global-typography-cffcd45-font-family), Sans-serif;
  font-weight: var(--e-global-typography-cffcd45-font-weight);
  line-height: var(--e-global-typography-cffcd45-line-height);
  letter-spacing: var(--e-global-typography-cffcd45-letter-spacing);

  margin-bottom: 10px;
}

.elementor-widget-text-editor h4 
{
  font-size: var(--e-global-typography-1027ade-font-size);

  font-family: var(--e-global-typography-1027ade-font-family), Sans-serif;
  font-weight: var(--e-global-typography-1027ade-font-weight);
  line-height: var(--e-global-typography-1027ade-line-height);
  letter-spacing: var(--e-global-typography-1027ade-letter-spacing);

  margin-bottom: 10px;
}


/* Header menu -------------- */
ul.elementor-nav-menu
{
  position: relative;
}
ul.elementor-nav-menu li
{
  position: unset;
}
ul.elementor-nav-menu ul.sub-menu[aria-expanded="true"]
{
  width: 100% !important;
  border: 1px solid #e6e6e6 !important;
  background-color: #fff !important;
  border-radius: 5px !important;
  box-shadow: 0px 5px 15px #0000000f !important;
  display: flex !important;
  flex-wrap: wrap !important;
  min-width: 500px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  padding: 10px !important;
  gap: 10px !important;
}
ul.elementor-nav-menu ul.sub-menu li
{
  width: calc(50% - 5px);
}
ul.elementor-nav-menu ul.sub-menu li a
{
  border: 0;
  padding: 10px !important; 
  border-radius: 5px !important;
  display: flex;
  flex-direction: column;
  align-items: flex-start; 
}
ul.elementor-nav-menu ul.sub-menu li a span
{
  font-size: var(--e-global-typography-40d709d-font-size); 
  white-space: normal;
  line-height: 1.2rem;
  color: #a8a8a8;
  padding-top: 5px;
}


/* STICKY MENU */
header .elementor-sticky
{
  transition: padding .3s; 
}

header .elementor-sticky.elementor-sticky--effects 
{
  padding: 0 20px;

  position: relative;
  border-radius: 28px;
  isolation: isolate;
  box-shadow: 0px 6px 21px -8px rgba(255, 255, 255, 0.2);
  cursor: pointer;

  top: 20px !important;
}

header .elementor-sticky.elementor-sticky--effects .elementor-widget-theme-site-logo img
{
  content:url("/wp-content/uploads/2025/09/e-novision_logo2023-01.png"); 
}

header .elementor-sticky.elementor-sticky--effects a, header .elementor-sticky.elementor-sticky--effects p, header .elementor-sticky.elementor-sticky--effects svg
{
  color: #000 !important;
  border-color: #000 !important;
  fill: #000 !important;
}


/* Tint and inner shadow layer */
header .elementor-sticky.elementor-sticky--effects::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 28px;
  box-shadow: inset 0 0 12px -4px rgba(255, 255, 255, 0.3), 0 0 20px -5px #00000047; 
  background-color: rgb(255 255 255 / 40%);
  pointer-events: none;
}

/* Backdrop blur and distortion layer */
header .elementor-sticky.elementor-sticky--effects::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 28px;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  filter: url(#glass-distortion);
  -webkit-filter: url(#glass-distortion);
  isolation: isolate;
  pointer-events: none;
}


/* CUSTOM GRID HOME */
.enov-item-grid-home img, .enov-item-grid-home video
{
  transition: all .3s;
}
.enov-item-grid-home .elementor-widget-image
{
  overflow: hidden;
}

.enov-item-grid-home:hover img, .enov-item-grid-home:hover video
{
  transform: scale(1.1);
}


/* CUSTOM GRID NOS DOSSIERS */
.enov-hover-container
{
  height: 100% !important;
  justify-content: flex-start !important;
  background-color: #fff;
  opacity: 0;
  transition: all .3s !important;
}

.enov-item-grid:hover .enov-hover-container
{
  opacity: 1;
}


/* SCROLLYTELLING  */

/* La section complète du chapitre */
#product-story {
  position: relative;
  height: 400vh; /* Durée du “chapitre” -> ajuste selon le nombre de slides */
}

/* Le container qui reste collé à l’écran */
#product-story .story-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

/* Calque de contenu au-dessus de la vidéo de fond */
#product-story .story-layer {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Chaque slide de texte */
#product-story .story-slide {
  position: absolute;
  max-width: 60rem;
  padding: 2rem;
  text-align: center;

  opacity: 0;
  transform: scale(0.9) translateY(20px);
  will-change: opacity, transform;
  color: #fff;
}






#logos-carousel .swiper 
{
  margin-top: 4rem;
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    white 10%,
    white 90%,
    transparent 100%
  );
}


#logos-carousel .swiper  .swiper-wrapper {
  transition-timing-function: linear;
  align-items: center;
}

#logos-carousel .swiper  .swiper-slide {
  width: 12rem;
  display: flex;
  align-items: center;
  justify-content: center;
}