/* Corrections pour compenser les fichiers CSS Elementor Pro manquants
   dans l'archive HTTrack (widget-call-to-action.min.css et
   widget-animated-headline.min.css). Sans ces règles, les conteneurs
   d'image de fond s'effondrent à hauteur zéro et paraissent vides
   même quand l'image se charge correctement. */

/* Corrections pour compenser les fichiers CSS Elementor Pro manquants
   dans l'archive HTTrack (widget-call-to-action.min.css et
   widget-animated-headline.min.css). Sans ces règles, les conteneurs
   d'image de fond s'effondrent à hauteur zéro et paraissent vides
   même quand l'image se charge correctement.

   Mise en page réelle (vérifiée sur le site en ligne) : petite image
   en haut de chaque carte (pas de fond plein écran), avec un bandeau
   diagonal ("ruban") dans le coin, texte et bouton en dessous. */

.elementor-cta {
  display: flex;
  flex-direction: column;
}
.elementor-cta__bg-wrapper {
  position: relative;
  width: 100%;
  height: 230px;
  overflow: hidden;
}
.elementor-cta__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}
/* Pas de voile sombre sur ce design : l'image reste nette */
.elementor-cta__bg-overlay {
  display: none;
}
.elementor-cta__content {
  padding: 24px 16px;
  text-align: center;
}

/* Bandeau diagonal ("Défense", "Sécurité"...) dans le coin de l'image */
.elementor-cta__bg-wrapper {
  /* sert de repère de positionnement pour le ruban */
}
.elementor-ribbon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  text-align: right;
  pointer-events: none;
  line-height: 1;
}
.elementor-ribbon-inner {
  display: inline-block;
  position: relative;
  background-color: #1a1a1a;
  color: #fff;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 6px 42px;
  right: -42px;
  top: 22px;
  transform: rotate(45deg);
}

/* Widget "avantages" du thème (boîtes 01/02/03 en page d'accueil) */
.man_adv_box_img.man_image_bck,
.man_adv_box_img.sachba-hero-slideshow {
  background-size: cover;
  background-position: center;
  min-height: 260px;
}

/* Le carrousel (owl-carousel) qui contient ces 3 boîtes reste caché
   par défaut (display:none) tant qu'un script JS ne l'initialise pas
   — script qui ne fonctionne pas sur ce site statique. On force son
   affichage en jouant nous-mêmes la mise en page (3 colonnes, sans
   dépendre de ce JS). */
.man_adv_carousel.owl-carousel {
  display: flex !important;
  flex-wrap: wrap;
}
.man_adv_carousel .man_adv_box {
  flex: 1 1 33.333%;
  min-width: 280px;
}


/* Sélecteur de langue (widget Google Traduction) */
#custom_translate_widget {
  position: fixed;
  top: 6px;
  right: 8%;
  z-index: 999999;
}
/* Masquer la barre Google par défaut (bandeau du haut + cadre iframe) */
.goog-te-banner-frame.skiptranslate,
body > .skiptranslate:first-child {
  display: none !important;
}
body {
  top: 0 !important;
  position: static !important;
}
#custom_translate_widget .goog-te-gadget {
  font-family: inherit;
  font-size: 0;
}
#custom_translate_widget .goog-te-gadget-simple {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 4px 8px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
#custom_translate_widget .goog-te-gadget-simple .goog-te-menu-value span {
  font-size: 13px;
  color: #333;
}
#custom_translate_widget img {
  display: none;
}

/* Lightbox galerie autonome (pop-up plein écran indépendante d'Elementor) */
#sachba_lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.9);
  z-index: 999998;
  align-items: center;
  justify-content: center;
}
#sachba_lightbox.open {
  display: flex;
}
#sachba_lightbox img {
  max-width: 88%;
  max-height: 85vh;
  box-shadow: 0 0 40px rgba(0,0,0,0.5);
}
#sachba_lightbox .sb-close,
#sachba_lightbox .sb-prev,
#sachba_lightbox .sb-next {
  position: absolute;
  color: #fff;
  background: rgba(255,255,255,0.12);
  border: none;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  padding: 12px 16px;
  border-radius: 50%;
}
#sachba_lightbox .sb-close { top: 20px; right: 20px; }
#sachba_lightbox .sb-prev { left: 20px; top: 50%; transform: translateY(-50%); }
#sachba_lightbox .sb-next { right: 20px; top: 50%; transform: translateY(-50%); }
#sachba_lightbox .sb-title {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 14px;
  opacity: 0.8;
}
.elementor-gallery-item__image {
  background-size: cover;
  background-position: center;
}
/* Grille de galerie : les vignettes n'avaient aucune dimension définie
   (le CSS du plugin Elementor Pro qui gérait ça n'a pas été archivé),
   d'où la page vide malgré des images correctement chargées. */
.elementor-gallery__container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 767px) {
  .elementor-gallery__container {
    grid-template-columns: repeat(2, 1fr);
  }
}
.e-gallery-item {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  cursor: pointer;
}
.e-gallery-item .elementor-gallery-item__image {
  position: absolute;
  inset: 0;
}

/* Bouton d'appel à l'action WhatsApp (page Contact) — unique, sans
   répéter les coordonnées déjà listées dans la colonne de gauche */
.sachba-wa-cta {
  display: flex;
  align-items: center;
  gap: 18px;
  background: #25D366;
  border-radius: 12px;
  padding: 26px 28px;
  text-decoration: none;
  color: #fff;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.3);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  max-width: 420px;
}
.sachba-wa-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.4);
}
.sachba-wa-icon {
  font-size: 34px;
  line-height: 1;
  flex-shrink: 0;
}
.sachba-wa-title {
  display: block;
  font-weight: 700;
  font-size: 17px;
}
.sachba-wa-sub {
  display: block;
  font-size: 13px;
  opacity: 0.9;
  margin-top: 3px;
}
@media (max-width: 767px) {
  .sachba-wa-cta {
    max-width: 100%;
    padding: 20px;
  }
}

/* Centrer verticalement les 2 colonnes de la section de contact
   (coordonnées à gauche / bouton WhatsApp à droite) */
.elementor-element-c1153d9 > .elementor-container {
  align-items: center;
}
.elementor-element-3cca13e {
  display: flex;
  align-items: center;
}
.elementor-element-3cca13e > .elementor-widget-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.sachba-wa-cta {
  margin: 0 auto;
}

/* Diaporama de la bannière d'accueil (boîtes 01/02/03) : 3 photos qui
   défilent en fondu enchaîné, avec un léger zoom après chaque
   changement. 100% CSS, aucune dépendance à un script JS. */
.sachba-hero-slideshow {
  position: relative;
  overflow: hidden;
}
.sachba-hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: sachba-hero-fade 18s infinite, sachba-hero-zoom 18s infinite;
}
@keyframes sachba-hero-fade {
  0%   { opacity: 0; }
  4%   { opacity: 1; }
  30%  { opacity: 1; }
  36%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes sachba-hero-zoom {
  0%   { transform: scale(1); }
  33%  { transform: scale(1.12); }
  100% { transform: scale(1.12); }
}

/* Vraie bannière héro de la page d'accueil (section "Depuis 1987" /
   "35 ans de qualité") : Elementor prévoyait un diaporama natif avec
   effet Ken Burns, jamais activé car son script JS ne fonctionne pas
   une fois le site rendu statique. Remplacé par le même mécanisme
   CSS pur que les boîtes 01/02/03. */
.elementor-element-f4e5a8b {
  position: relative;
  overflow: hidden;
  min-height: 420px;
}
.sachba-hero-banner-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.elementor-element-f4e5a8b > .elementor-background-overlay {
  z-index: 1;
}
.elementor-element-f4e5a8b > .elementor-container {
  position: relative;
  z-index: 2;
}