/*
 Theme Name: Hello Child
 Theme URI: https://example.com/
 Description: Thème enfant du thème Hello Elementor
 Author: Jérémy Duflot
 Template: hello-elementor
 Version: 1.0.0
*/

/* --------------------------------------------------
   GÉNÉRAL
-------------------------------------------------- */

/* Masquer le slogan */
.site-description {
  position: absolute !important;
  left: -9999px !important;
  visibility: hidden !important;
}

html, body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
  position: relative;
}

/* ---------- Désactiver le gris autour du bloc et forcer le contenu gauche en blanc ---------- */
 .elementor-widget-htmega-postslider-addons .htmega-post-slider-st-6 {
  background: transparent !important; 
  box-shadow: 2px !important;
} 

.elementor-widget-htmega-postslider-addons .htmega-post-slider-right,
.elementor-widget-htmega-postslider-addons .htmega-post-slider-right .content,
.elementor-widget-htmega-postslider-addons .htmega-post-slider-right .post-inner {
  background: #ffffff !important;     
  color: #0b2030 !important;           
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
} 

/* Supprime toute bordure/padding extérieur gênant */
 .elementor-widget-htmega-postslider-addons .htmega-post-slider-right {
  padding: 48px 56px !important;     
  box-sizing: border-box;
} 

/* Si le widget applique une 'thumb' avec placeholder, on la laisse intacte sur desktop */
.elementor-widget-htmega-postslider-addons .htmega-post-slider-left img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
} 

/* ---------- Mobile : photo en arrière-plan + texte posé dessus (un seul bloc visible visuellement) ---------- */
@media (max-width: 767px) {
  /* Faire en sorte que l'image couvre tout le slide (derrière) */
  .elementor-widget-htmega-postslider-addons .htmega-post-slider-left {
    position: absolute !important;
    inset: 0 !important;              /* top:0; right:0; bottom:0; left:0 */
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
  }

  .elementor-widget-htmega-postslider-addons .htmega-post-slider-left img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* Contenu : passe au-dessus, largeur 100% et fond semi-transparent si tu veux lisibilité */
  .elementor-widget-htmega-postslider-addons .htmega-post-slider-right {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 18px 16px !important;
    box-sizing: border-box !important;
    background: rgba(255,255,255,0.05) !important; /* change l'opacité si tu veux plus/moins de blanc */
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(1px);
  }

  /* Si tu veux le texte totalement sur l'image sans fond blanc, remplace la ligne background par : 
     background: transparent !important; */
  /* .elementor-widget-htmega-postslider-addons .htmega-post-slider-right { background: transparent !important; } */

  /* Réduire la hauteur minimale du slide sur mobile */
  .elementor-widget-htmega-postslider-addons .htmega-post-slider-st-6 {
    min-height: 320px !important;
  }
}

/* ========================================================================== */
/*                  CENTRAGE BOUTON ET PAGINATION SUR MOBILE                  */
/* ========================================================================== */

@media (max-width: 991px) {

  /* Centrer le bouton */
  .elementor-widget-htmega-postslider-addons .post-btn {
    text-align: center !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    margin-top: 16px !important;
  }

  .elementor-widget-htmega-postslider-addons .readmore-btn {
    margin: 0 auto !important;
  }

  /* Centrer la pagination */
  .elementor-widget-htmega-postslider-addons .slick-dots {
    width: 100% !important;
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    position: absolute !important;
    z-index: 5 !important;
  }

  .elementor-widget-htmega-postslider-addons .slick-dots li {
    margin: 0 6px !important;
  }
}

ul.slick-dots {
    padding-inline-start: 0px !important;

}

/* 🔧 Désactiver toutes les animations de sous-menu ElementsKit sur desktop */
@media (min-width: 1025px) {
  .elementskit-navbar-nav-default .elementskit-megamenu-panel,
  .ekit-wid-con .elementskit-navbar-nav-default .elementskit-megamenu-has .elementskit-megamenu-panel {
    -webkit-transition: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* Force la position verticale correcte du logo du header sur TOUTES les pages */
.elementor-2039 .elementor-element.elementor-element-8d73479 {
   margin: -120px 0 calc(var(--kit-widget-spacing, 0px) + -150px) 0px !important;
}


/* * FIX PERMANENT TAILLE LOGO HEADER
 * Force la taille correcte du logo sur TOUTES les pages
 * pour empêcher le cache de l'agrandir.
*/
.elementor-2039 .elementor-element.elementor-element-8d73479 img {
    /* Taille souhaitée */
    width: 50% !important;
    max-width: 50% !important;  
    
    /* Garde les proportions */
    height: auto !important;     
}

/* FIX LOGO HEADER (version générique) */
header.ekit-template-header .elementor-widget-image img {
    width: 50% !important;
    max-width: 50% !important;  
    height: auto !important;     
}

/* * FIX DÉFINITIF TAILLE & PLACEMENT LOGO HEADER
 * Cible la classe "logo-force-taille"
*/


/* Règle 1: Force le PLACEMENT (les marges) du widget */
.elementor-2791 .elementor-element.elementor-element-8d73479 img {
    margin: -120px 0 -150px 0 !important;
    padding: 0 !important; /* On force le padding à 0 pour être sûr */
}

/* Règle 2: Force la TAILLE (largeur) de l'image à l'intérieur */
.elementor-2791 .elementor-element.elementor-element-8d73479 img {
    width: 50% !important;
    max-width: 50% !important;
    height: auto !important;
}


/* 1. On force le conteneur en mode Flexbox */
selector .gallery {
    display: flex !important;
    flex-wrap: nowrap !important;    /* Interdit le retour à la ligne */
    align-items: center !important;  /* Centre verticalement */
    justify-content: flex-start !important; /* Aligne à gauche */
}

/* 2. On casse la grille imposée par WordPress */
selector .gallery-item {
    float: none !important;          /* Annule le float gauche */
    width: auto !important;          /* Annule la largeur de 25% */
    max-width: none !important;      /* Enlève la limite de largeur */
    margin: 0 30px 0 0 !important;   /* Ajoute 30px d'espace à droite */
    clear: none !important;          /* Empêche les sauts de ligne */
}

/* 3. (Optionnel) Harmoniser la taille des images */
selector .gallery-icon img {
    width: auto !important; 
    max-height: 60px; /* Règle la hauteur max des logos ici */
    display: block;
}