/*
Theme Name: Espace Energie Design
Theme URI: https://espace-energie.genio.ma/
Author: mlahdouri@gmail.com
Author URI: https://vpstudio.ma/
Description: for Espace Energie Design Morocco
Version: 1.8
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

@font-face {
  font-family: "Aller";
  src: url("fonts/Aller.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "AllerBold";
  src: url("fonts/Aller-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "AllerItalic";
  src: url("fonts/Aller-Italic.woff") format("woff");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "MarkPro";
  src: url("fonts/MarkPro.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "MarkMedium";
  src: url("fonts/MarkPro-Medium.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "MarkBold";
  src: url("fonts/MarkPro-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "MarkLight";
  src: url("fonts/MarkPro-Light.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "MarkThin";
  src: url("fonts/MarkPro-Thin.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}



/*
  On cible plus spécifiquement le titre à l'intérieur du widget Elementor
  en utilisant la classe que vous avez ajoutée.
  On ajoute aussi !important pour forcer la priorité.
*/
.elementor-widget-heading .titre-contour .elementor-heading-title,
.titre-contour { /* On garde aussi .titre-contour seul pour plus de flexibilité */
  font-family: 'Poppins', sans-serif;
  font-size: 6rem; 
  font-weight: 800;
  text-transform: lowercase;
  
  /* C'est la ligne la plus importante à corriger */
  color: transparent !important; /* On force la transparence */
  
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: #000000;
  text-stroke-width: 2px;
  text-stroke-color: #000000;
}

/* Alternative CSS avec text-shadow (nécessite une couleur de remplissage) */
/*.titre-contour-alternatif {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 5rem;
  text-transform: uppercase;

  /* 1. Tasser un peu les lettres pour aider les ombres à fusionner */
  /*letter-spacing: -2px; /* Ajustez cette valeur si nécessaire */

  /* 2. La couleur de remplissage du texte */
  /*color: white;

  /* 3. L'ombre multiple qui simule le contour */
  /*text-shadow: 
    -1px -1px 0 #ccc,  
     1px -1px 0 #ccc,
    -1px  1px 0 #ccc,
     1px  1px 0 #ccc;
}*/
/*
======================================================
  CSS RESPONSIVE pour le titre à contour
======================================================
*/
/*
======================================================
  CSS CORRIGÉ ET RENFORCÉ pour le titre
======================================================
*/

/* --- STYLE DE BASE (pour les grands écrans) --- */

/* 
  On utilise un sélecteur plus spécifique et on ajoute !important 
  pour forcer nos styles à prendre le dessus sur ceux d'Elementor.
*/
.elementor-widget-heading.titre-contour-alternatif .elementor-heading-title {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 800 !important;
  font-size: 8rem !important;
  text-transform: lowercase !important;
  letter-spacing: -2px !important;

  /* La couleur de remplissage du texte */
  color: white !important;

  /* L'ombre multiple qui simule le contour */
  text-shadow: 
    -1px -1px 0 #ccc,  
     1px -1px 0 #ccc,
    -1px  1px 0 #ccc,
     1px  1px 0 #ccc !important;
}


/*
======================================================
  POINTS DE RUPTURE (Media Queries)
======================================================
*/

/* --- Pour les Tablettes (ex: en dessous de 1024px) --- */
@media (max-width: 1024px) {
  /* On applique la taille de police à l'élément de titre lui-même, pas au conteneur */
  .elementor-widget-heading.titre-contour-alternatif .elementor-heading-title {
    font-size: 5.5rem !important;
  }
}

/* --- Pour les Tablettes (ex: en dessous de 782px) --- */
@media (max-width: 782px) {
  /* On applique la taille de police à l'élément de titre lui-même, pas au conteneur */
  .elementor-widget-heading.titre-contour-alternatif .elementor-heading-title {
    font-size: 4.5rem !important;
  }
}

/* --- Pour les Mobiles (ex: en dessous de 767px) --- */
@media (max-width: 767px) {
  .elementor-widget-heading.titre-contour-alternatif .elementor-heading-title {
    font-size: 5.8rem !important;
  	letter-spacing: 2px !important;
  }
}

/* --- Pour les Mobiles (ex: en dessous de 600px) --- */
@media (max-width: 600px) {
  .elementor-widget-heading.titre-contour-alternatif .elementor-heading-title {
    font-size: 4.2rem !important;
    letter-spacing: 2px !important;
  }
}
/* --- Pour les très petits Mobiles (ex: en dessous de 480px) --- */
@media (max-width: 480px) {
  .elementor-widget-heading.titre-contour-alternatif .elementor-heading-title {
    font-size: 3.2rem !important;
  	letter-spacing: 1px !important;
  }
}

/* --- Pour les très petits Mobiles (ex: en dessous de 400px) --- */
@media (max-width: 400px) {
  .elementor-widget-heading.titre-contour-alternatif .elementor-heading-title {
    font-size: 2.5rem !important;
  	letter-spacing: 1px !important;
  }
}
#univers_slider_image_parent  { position:relative;}

/*
==============================================
  Style personnalisé pour la galerie de logos
  Ciblage par ID : #gallery_logo
==============================================
*/

/* Étape 1 : On transforme la galerie en conteneur flexible */
#gallery_logo .gallery {
  /* On active le mode Flexbox */
  display: flex;

  /* On aligne les logos verticalement au centre */
  align-items: center;

  /* On répartit les logos horizontalement */
  justify-content: space-around; /* ou 'center' si vous préférez */

  /* On permet aux logos de passer à la ligne sur les petits écrans */
  flex-wrap: wrap;

  /* On ajoute un espace entre les logos */
  gap: 30px; /* Ajustez la valeur selon vos besoins */
}

/* Étape 2 : On s'assure que chaque logo se comporte bien */
#gallery_logo .gallery .gallery-item {
  /* On supprime la largeur et les marges par défaut de la galerie */
  width: auto; 
  margin: 0 !important;
  flex-shrink: 0;
}

/* Étape 3 : On retire la bordure via l'interface d'Elementor */
/* Si jamais la bordure persiste, cette ligne peut la forcer à disparaître */
#gallery_logo .gallery .gallery-item img {
  border: none !important;
}

/* Étape 4 : On cache l'élément <br> qui peut parfois ajouter un espace non désiré */
#gallery_logo .gallery br {
  display: none;
}
/* --- OPTIONNEL : Pour limiter la hauteur des logos --- */
#gallery_logo .gallery .gallery-item img {
  max-height: 50px; /* Ajustez cette valeur à la hauteur désirée */
  width: auto;
}


/*
======================================================
  Style personnalisé pour les flèches du slider
  Ciblage par ID : #univers_slider
======================================================
*/

/* --- On cache l'icône SVG par défaut --- */
#univers_slider .elementor-swiper-button svg {
  display: none;
}

/* --- Style commun pour les deux flèches --- */
#univers_slider .elementor-swiper-button {
  /* On définit une taille fixe pour nos flèches */
  width: 40px;  /* Ajustez la largeur si nécessaire */
  height: 40px; /* Ajustez la hauteur si nécessaire */
  
  /* On s'assure que l'image de fond ne se répète pas et est bien dimensionnée */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  
  /* On retire tout arrière-plan ou couleur par défaut */
  background-color: transparent;
}

/* --- On assigne l'image pour la flèche "Précédent" --- */
#univers_slider .elementor-swiper-button-prev {
  background-image: url('assets/img/left-arrow.png');
}

/* --- On assigne l'image pour la flèche "Suivant" --- */
#univers_slider .elementor-swiper-button-next {
  background-image: url('assets/img/right-arrow.png');
}


/* --- Positionnement des flèches --- */
/*
../elementor_theme/assets/img/left-arrow.png

/*
======================================================
  CSS COMPLET ET CORRIGÉ pour les flèches du slider
  ID du slider : #univers_slider
======================================================
*/

/* --- ÉTAPE 1 : DÉFINIR LE CADRE DE RÉFÉRENCE (LA PLUS IMPORTANTE !) --- */
#univers_slider {
  position: relative !important; /* On force le conteneur à être le cadre pour les flèches */
}

/* --- ÉTAPE 2 : STYLE DE BASE POUR LES FLÈCHES (Desktop) --- */

/* On cache l'icône SVG par défaut */
#univers_slider .elementor-swiper-button svg {
  display: none;
}

/* Style commun pour les deux flèches */
#univers_slider .elementor-swiper-button {
  width: 60px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-color: transparent;
  transform: none; /* On annule les transformations par défaut */
  transition: opacity 0.3s ease;
  top: 25px; /* Position par défaut depuis le haut */
}

/* Images des flèches */
#univers_slider .elementor-swiper-button-prev {
  background-image: url('../elementor_theme/assets/img/left-arrow.png');
  right: 10vw; /* Position depuis la droite */
  left: auto;
}
#univers_slider .elementor-swiper-button-next {
  background-image: url('../elementor_theme/assets/img/right-arrow.png');
  right: 5vw; /* Position depuis la droite */
}


/*
======================================================
  ÉTAPE 3 : POINTS DE RUPTURE (Media Queries)
======================================================
*/

/* --- Pour Tablettes (max 1024px) --- */
@media screen and (max-width: 1024px) {
  #univers_slider .elementor-swiper-button {
    width: 50px;
    height: 18px;
  }
  #univers_slider .elementor-swiper-button-prev {
    right: 12vw;
  }
}

/* --- Pour Mobiles (max 767px) --- */
@media screen and (max-width: 767px) {
	#gallery_logo .gallery {
	  max-height: 200px;
	}
  #univers_slider .elementor-swiper-button {
    /* On les centre verticalement par rapport au slider */
    top: 35%;
    transform: translateY(-50%);

    width: 45px;
    height: 15px;
  }

  /* Flèche droite sur le côté droit */
  #univers_slider .elementor-swiper-button-next {
    right: 10px;
  }

  /* Flèche gauche sur le côté gauche */
  #univers_slider .elementor-swiper-button-prev {
    left: 10px;
    right: auto; /* Crucial pour annuler la position depuis la droite */
  }
}