/*
Theme Name: Astra Child
Theme URI: https://votre-site.com
Description: Thème enfant d'Astra
Author: Votre Nom
Author URI: https://votre-site.com
Template: astra
Version: 1.0.0
Text Domain: astra-child
*/
html {
  scroll-behavior: smooth;
}
body {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

*::selection {
  background: #bed8e3 !important;
  color: rgb(0, 0, 0) !important;
}
.site-title a {
  font-family: "Poppins", sans-serif !important;
  font-size: 18px;
}
.site-header-primary-section-right a {
  font-size: 18px;
}
html,
body {
  overflow-x: hidden;
  max-width: 100vw;
  margin: 0;
  padding: 0;
}

/* -------------------Header apres Hero---------------------------- */
.ast-custom-button-link a {
  color: #000000 !important;
}

.site-header {
  position: fixed !important;
  width: 100%;
  transition: background 0.8s ease, padding 0.3s ease;
  background: transparent !important;
}

.site-header .main-header-bar {
  transition: padding 0.8s ease;
}
.site-header {
  transition: background 0.8s ease, padding 0.3s ease;
}

.site-header {
  position: fixed; /* Fixe le header en haut */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999; /* S'assure qu'il est au-dessus des autres éléments */
}

/* reduction de l'epaisseur */
.site-header {
  transition: all 0.8s ease; /* Animation fluide */
  padding: 20px 0; /* Taille par défaut */
}

.scrolled.site-header {
  padding: 1px 0 !important; /* Réduction de l'épaisseur au scroll */
}

.site-header img {
  transition: all 0.8s ease;
  max-height: 60px; /* Taille par défaut */
}

.scrolled .site-header img {
  max-height: 60px !important; /* Réduction du logo après scroll */
}

/* -------reduction logo size-------*/

.site-header {
  transition: all 0.3s ease;
}

.site-header.shrunk {
  padding: 3px 0; /* Réduit la hauteur du header */
  background: #4b4c50f9 !important;
  transition: background 0.8s ease, padding 0.3s ease;
}

.custom-logo-link,
.site-logo-img {
  transition: all 0.3s ease;
  max-width: 150px; /* Taille normale */
}

.site-header.shrunk .custom-logo-link,
.site-header.shrunk .site-logo-img {
  max-width: 100px; /* Taille réduite au scroll */
}

.custom-logo,
.site-logo-img {
  max-width: 180px; /* Taille normale sur desktop */
  height: auto;
  transition: all 0.3s ease;
}

.site-description {
  font-family: libre bodoni, sans-serif !important;
  color: white !important;
}

@media (max-width: 768px) {
  .custom-logo,
  .site-logo-img {
    max-width: 120px; /* Réduit sur tablette */
  }
  .site-header {
    padding: 5px 0; /* Padding légèrement plus grand sur mobile */
  }
}

@media (max-width: 480px) {
  .custom-logo,
  .site-logo-img {
    max-width: 80px; /* Plus petit sur mobile */
  }
  .site-header img {
    max-height: 50px; /* Peut être réduit un peu sur petit mobile */
  }
}

/* --------Cercle BUS Container principal -------- */
.cercle-container {
  position: fixed; /* FIXÉ à l'écran - plus fiable */
  top: 0%;
  right: 0%; /* Collé à droite */
  width: 280px;
  height: 280px;
  z-index: 1000;

  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* -------- SVG qui tourne -------- */
.cercle-svg {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-origin: center center;
  animation: rotation 25s linear infinite;
  z-index: 1;
}

/* -------- Bus centré -------- */
.bus {
  position: relative;
  width: 120px;
  z-index: 2;
  animation: busMovement 1.5s ease-in-out infinite;
}

/* -------- Animation combinée du bus -------- */
@keyframes busMovement {
  0% {
    transform: rotate(-1deg) translateY(0);
  }
  25% {
    transform: rotate(1deg) translateY(-3px);
  }
  50% {
    transform: rotate(-1deg) translateY(-5px);
  }
  75% {
    transform: rotate(1deg) translateY(-3px);
  }
  100% {
    transform: rotate(-1deg) translateY(0);
  }
}
/* -------- Animation rotation du texte -------- */
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* -------- Texte SVG -------- */
.cercle-svg text,
.cercle-svg tspan {
  fill: #fff !important;
  font-family: "Poppins", sans-serif !important;
  font-weight: 700 !important;
  font-size: 7px !important;
  letter-spacing: 1.5px !important;
}

/* -------- Tablette (768px - 1024px) -------- */
@media (max-width: 1024px) and (min-width: 769px) {
  .cercle-container {
    position: fixed; /* Reste fixé */
    width: 220px;
    height: 220px;
    right: 2%;
    top: 12%;
  }

  .bus {
    width: 100px;
  }

  .cercle-svg text,
  .cercle-svg tspan {
    font-size: 6px !important;
    letter-spacing: 1.2px !important;
  }
}

/* -------- Mobile (jusqu'à 768px) -------- */
@media (max-width: 768px) {
  .cercle-container {
    position: relative; /* IMPORTANT : passage en relative */
    top: 0;
    right: auto;
    left: auto;
    transform: none;
    width: 250px;
    height: 250px;
    margin: 30px auto; /* Centre horizontalement */
    display: flex;
  }

  .bus {
    width: 100px;
  }

  .cercle-svg text,
  .cercle-svg tspan {
    font-size: 5px !important;
    letter-spacing: 1px !important;
  }
}

/* -------- Très petits écrans -------- */
@media (max-width: 480px) {
  .cercle-container {
    width: 250px;
    height: 250px;
  }

  .bus {
    width: 100px;
  }

  .cercle-svg text,
  .cercle-svg tspan {
    font-size: 4.5px !important;
  }
}
.hero-with-circle {
  position: relative !important;
  min-height: 500px; /* Ajustez selon votre besoin */
}

@media (max-width: 768px) {
  .hero-with-circle {
    min-height: 800px;
  }
}
/* À ajouter dans votre fichier CSS si nécessaire */
@media (max-width: 1024px) and (min-width: 769px) {
  .cercle-container {
    z-index: 99999 !important;
  }

  /* Forcer les boutons à avoir un z-index plus bas */
  .wp-block-buttons,
  .wp-block-button {
    z-index: 1 !important;
  }
}

/* ----------------------------POP UP----------------------------  */
.uagb-ifb-image-content img {
  margin-top: 25px;
  width: 100px !important;
}

.uagb-ifb-button-wrapper {
  margin-bottom: 25px !important;
}

/*bouton contact NAV */

.ast-custom-button {
  white-space: nowrap;
  padding: 0.5em 1.2em;
  font-size: 16px;
  display: inline-block;
  text-align: center;
}
/*POP UP IMG grande Taille */
.uagb-ifb-image-content img,
.uagb-modal__content img {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  display: block;
  margin: 0 auto;
}

.uagb-modal__content img {
  max-width: 100%;
  height: auto;
}

/* Page 404 */

body.error404 .ast-header-break-point {
  background-color: #ffffff !important;
  color: #000000 !important;
}

.custom-404-wrapper {
  padding-top: 150px; /* espace sous le header */
  padding-bottom: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #fff;
}

.custom-404-content {
  max-width: 600px;
  text-align: center;
}

/* ---------Section SVG mandala size----------------- */
.uagb-block-afd6d7e2.uagb-infobox__content-wrap .uagb-ifb-image-content img {
  width: 128px !important;
}
.uagb-block-09ebc758.uagb-infobox__content-wrap .uagb-ifb-image-content img {
  width: 128px !important;
}
.uagb-block-22f07688.uagb-infobox__content-wrap .uagb-ifb-image-content img {
  width: 70px !important;
}
.uagb-block-60250b89.uagb-infobox__content-wrap .uagb-ifb-image-content > img {
  width: 140px !important;
}
.uagb-block-709d293e.uagb-infobox__content-wrap .uagb-ifb-image-content > img {
  width: 0145px !important;
}
.uagb-block-efa1e293.uagb-infobox__content-wrap .uagb-ifb-image-content > img {
  width: 070px !important;
}
/* Forcer la largeur du shape divider Spectra */
* {
  box-sizing: border-box;
}

/*---------------Blob Page A Propos---------------*/

/* Animation douce type flaque */

/* Style principal du container */
.ambiance-blob-fullscreen {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  margin-left: calc(50% - 50vw); /* Casse les marges du container parent */
  margin-right: calc(50% - 50vw);
  left: 0;
  right: 0;
}

/* L’image de fond (sous le voile vert) */
.blob-bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* Le voile vert avec texture */
.ambiance-blob-fullscreen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background-color: rgb(219, 148, 35); /* vert Lucky Folks avec opacité */
  background-image: url("https://www.transparenttextures.com/patterns/white-wall.png");

  background-blend-mode: overlay; /* fusion texture + couleur */
  background-repeat: repeat;
  background-size: auto;
  pointer-events: none;
}

/* Le canvas (blob animé) */
.blob-canvas {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 100%;
  display: block;
}

/* Texte au-dessus */
.text-overlay-visible {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  color: white;
  text-align: center;
}

.text-overlay-visible .text-avant {
  color: #ffff;
  font-size: 3rem;
  font-weight: 700;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
/* icone reseau footer */