/* body */


h1 {
  font-family: Raleway, sans-serif;
  font-weight: 200 !important;
  letter-spacing: 0.6px;
}

h2 {
  font-family: Raleway, sans-serif;
  font-weight: 300 !important;
  letter-spacing: 0.6px;
}

.bouton {background-color: #056b90	 !important;
}

.bouton:hover {
  background-color: #056b90 !important;
}


/* fond de page ciblage spécifique mobile / tablettes */
@media (max-width: 921px) {
  body {
    /* Annule le background CSS standard sur le body pour iOS */
    background-image: none !important;
  }

  body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    
    /* Remplacez l'URL par l'image mobile souhaitée */
    background-image: url(https://dev.chantiersgraphiques.com/wp-content/uploads/2026/09/pont-millau-2026-mob.jpg);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    
    /* Place le pseudo-élément sous tout le contenu du site */
    z-index: -1;
    
    /* Sécurité pour le comportement du défilement iOS */
    will-change: transform;
  }
}

.texte-ombre {
font-family: Raleway, sans-serif !important;
text-shadow: 2px 1px 2px rgba(0, 0, 0, 0.8);
font-size: 18px !important;
font-style: normal;
font-weight: 400 !important;
letter-spacing: 0.2px;
text-align: left !important;
color: #DBF9FF !important;
}


.text-left {
letter-spacing: 0.2px;
text-align: left !important;
}



/* header */

/* LOGO header */

/* 1. État initial : Masqué et basculé en arrière (angle de -90deg) */
body.home .site-logo-img,
body.home .custom-logo-link {
  opacity: 0 !important;
  visibility: hidden !important;
  
  /* Bascule plus forte (-120deg), perspective plus profonde et échelle réduite */
  transform: perspective(300px) rotateX(-120deg) scale(0.3) translateY(00px);
  transform-origin: top center;
  
  /* Transition dynamique avec un bel effet de ressort */
  transition: opacity 0.5s ease, 
              transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), 
              visibility 0.5s ease !important;
}

/* 2. État scrolled : Basculement fluide vers l'avant (0deg) avec un léger rebond */
body.home.is-scrolled .site-logo-img,
body.home.is-scrolled .custom-logo-link {
  opacity: 1 !important;
  visibility: visible !important;
  transform: perspective(400px) rotateX(0deg) scale(1) !important;
}


.site-header {
  z-index: 99;
  position: fixed !important;
  height: 100px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 1) 20%, transparent 100%) !important;
  width: 100%;
}

header .custom-logo-link img {
  max-width: 76px;
  width: 76px;
  margin-top: -5px;
  margin-left: 5px;
}

.menu-link {
color: #44576C !important;
  font-weight: 700;
  letter-spacing: 0.6px;
  font-size: 15px;
}

.menu-link:hover {
  color: #00b9df !important;
}

.menu-link:acive {
  color: #ffd936	 !important;
}

.ast-theme-transparent-header [data-section="section-header-mobile-trigger"] .ast-button-wrap .mobile-menu-toggle-icon .ast-mobile-svg {
  fill: #436C83;
  margin-top: -50px;
  margin-right: -10px;
  width: 50px;
}


/* header MOBILE */

/* 1. Suppression TOTALE du grand fond blanc englobant d'Astra */
.ast-header-break-point .ast-mobile-header-wrap,
.ast-header-break-point .ast-mobile-header-content,
.ast-header-break-point .ast-mobile-popup-content,
.ast-header-break-point .ast-mobile-popup-inner,
.ast-header-break-point .ast-builder-menu-mobile,
.ast-header-break-point .ast-builder-menu-mobile .main-navigation {
  background-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* 2. Le rectangle arrondi : Style du conteneur */
.ast-header-break-point .main-header-menu {
  margin: 5px auto 5px auto !important;
  width: calc(100% - 40px) !important;
  
  /* Noir transparent (50%) + Effet flou */
  background-color: rgba(0,0,0,0.5) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  /* Arrondis et bordure fine */
  border-radius: 10px !important;
  border: 1px solid #1d2a3b !important;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.25) !important;
  overflow: hidden !important;
	padding-top: 12px !important;
	padding-bottom: 12px !important;
	max-width: 80% !important;


  /* Animation : glissement doux */
  opacity: 0;
  transform: translateY(-100px) !important;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* État déplié / ouvert du menu */
.ast-header-break-point .main-header-menu.toggle-on,
.ast-header-break-point .ast-mobile-header-content .main-header-menu,
.ast-header-break-point .ast-mobile-popup-content .main-header-menu {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* 3. Force la transparence des éléments internes */
.ast-header-break-point .main-header-menu * {
  background: transparent !important;
}

/* 4. Textes des liens et resserrement maximal des éléments */
.ast-header-break-point .main-header-menu .menu-item {
  margin: 0 !important;
  padding: 0 !important;
}

.ast-header-break-point .main-header-menu .menu-item a {
color: #B8D6E3 !important;
  font-size: 16px !important;
  font-weight: 500;
  letter-spacing: 1px;
  line-height: 1.2 !important; /* Force une hauteur de ligne très compacte */
  
  /* Espacement vertical réduit */
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* 5. Suppression renforcée des bordures et séparateurs INTERNES */
.ast-header-break-point .main-header-menu li,
.ast-header-break-point .main-header-menu a,
.ast-header-break-point .main-header-menu .menu-item,
.ast-header-break-point .main-navigation ul .menu-item .menu-link {
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  border-width: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Suppression des pseudo-éléments (traits CSS Astra) */
.ast-header-break-point .main-header-menu li::after,
.ast-header-break-point .main-header-menu li::before,
.ast-header-break-point .main-header-menu a::after,
.ast-header-break-point .main-header-menu a::before,
.ast-header-break-point .main-header-menu .menu-item::after,
.ast-header-break-point .main-header-menu .menu-item::before {
  content: none !important;
  display: none !important;
}

@media (max-width: 921px) {
  .ast-theme-transparent-header #masthead .site-logo-img .transparent-custom-logo img {
    max-width: 70px;
    width: 70px;
  }
}

.ast-theme-transparent-header [data-section="section-header-mobile-trigger"] .ast-button-wrap .mobile-menu-toggle-icon .ast-mobile-svg {
fill: #B8D6E3;
  margin-top: -50px;
  margin-right: -20px;
  opacity: 0.5;
}


@media (max-width: 921px) {
  .ast-theme-transparent-header.ast-header-break-point .ast-builder-menu .main-header-menu {
		text-align: center;
    font-size: 40px !important;
    background: transparent;
  }
}


@media (min-width: 922px) {
  .site-navigation {
    height: 100%;
    margin-top: -70px;
  }
}

		
/* hero */



.casque, .casque-mob {
animation: flipForward 0.8s ease-out forwards;
  backface-visibility: hidden; /* Masque le dos de l'élément pendant la rotation */
}

.casque img {
    max-width: 60% !important;
    height: auto !important; /* Force le redimensionnement proportionnel sans rogner */
    object-fit: contain !important; /* Garantit qu'aucun masque de rognage ne s'applique */
    margin-left: auto;
    margin-right: auto;
  }


/* Définition de la rotation 3D */
@keyframes flipForward {
  from {
    opacity: 0;
    transform: rotateX(-90deg);
  }
  to {
    opacity: 1;
    transform: rotateX(0deg);
  }
}

.conseil-crea {
animation: fadeInUp 0.5s ease-out forwards;
}

/* Définition des étapes de l'animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(50px); /* Ajustez la distance de départ selon vos besoins */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.print-web {
animation: fadeInDown 0.5s ease-out forwards;
}

/* Définition des étapes de l'animation */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-50px); /* L'élément part de 30px plus haut */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.maitre, {
text-align: center;
text-shadow: 2px 1px 2px rgba(0, 0, 0, 0.9);
		

		
  
  /* Masque initial : masque 100% du bloc depuis la droite */
  clip-path: inset(0 100% 0 0);
  
  /* Déclenchement avec décélération et délai de 0.5s */
  animation: revealLeftToRight 2s cubic-bezier(0.25, 1, 0.9, 1) 0.5s forwards;
}

@keyframes revealLeftToRight {
  to {
    /* Le masque s'ouvre totalement jusqu'au bord droit */
    clip-path: inset(0 0 0 0);
  }
}

@keyframes blink {
  from, to { border-color: transparent; }
  50% { border-color: currentColor; }
}

.depuis {
text-align: center;
  
  /* Masque initial : masque 100% du bloc depuis la droite */
  clip-path: inset(0 100% 0 0);
  
  /* Déclenchement avec décélération et délai de 0.5s */
  animation: revealLeftToRight 0.7s cubic-bezier(0.25, 1, 0.9, 1) 2.1s forwards;
}

@keyframes revealLeftToRight {
  to {
    /* Le masque s'ouvre totalement jusqu'au bord droit */
    clip-path: inset(0 0 0 0);
  }
}

@keyframes blink {
  from, to { border-color: transparent; }
  50% { border-color: currentColor; }
}

.bouton-accueil {
animation: fadeInUp 0.5s ease-out 2s both;
}


.parag-ombre {
text-align: center;
text-shadow: 2px 1px 2px rgba(0, 0, 0, 0.9);
		
/* OFFRES */

/* État initial : masqué et légèrement décalé vers le bas */
.bloc-audit,
.bloc-identite,
.bloc-web,
.bloc-print {
  backdrop-filter: blur(4px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(4px) saturate(200%);
  border-radius: 10px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 1.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Délais en cascade */
.bloc-audit    { transition-delay: 0.0s; }
.bloc-identite { transition-delay: 0.4s; }
.bloc-web      { transition-delay: 0.8s; }
.bloc-print    { transition-delay: 1.2s; }

/* État affiché dès que le JS s'active */
.bloc-audit.is-visible,
.bloc-identite.is-visible,
.bloc-web.is-visible,
.bloc-print.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* REF */



/* État initial : masqué et légèrement décalé vers le bas */
.bloc-ref {
  backdrop-filter: blur(4px) saturate(100%) !important;
  -webkit-backdrop-filter: blur(4px) saturate(100%);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 1.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}


/* Délais en cascade */
.bloc-ref    { transition-delay: 0.0s; }

/* État affiché dès que le JS s'active */
.bloc-ref.is-visible
{
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Empêche le retour à la ligne et applique le bon calcul de taille */
.colonnes-ref {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  box-sizing: border-box;
}

/* Colonne 1 : 33% moins l'espace inter-colonnes */
.colonnes-ref > *:nth-child(1) {
  width: calc(33.333% - 10px) !important;
  flex: 0 0 calc(33.333% - 10px) !important;
  max-width: calc(33.333% - 10px) !important;
  box-sizing: border-box;
}

/* Colonne 2 : 66% moins l'espace inter-colonnes */
.colonnes-ref > *:nth-child(2) {
  width: calc(66.667% - 10px) !important;
  flex: 0 0 calc(66.667% - 10px) !important;
  max-width: calc(66.667% - 10px) !important;
  box-sizing: border-box;
}

/* Adaptabilité mobile */
@media (max-width: 768px) {
  .colonnes-ref {
    flex-wrap: wrap !important;
  }
  .colonnes-ref > *:nth-child(1),
  .colonnes-ref > *:nth-child(2) {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* Débloque la largeur du bloc carrousel/slider interne */
.colonnes-ref > *:nth-child(2) > * {
  width: 100% !important;
  max-width: 100% !important;
}

/* Forcer les slides du slider à s'aligner correctement */
.colonnes-ref > *:nth-child(2) .slick-slider,
.colonnes-ref > *:nth-child(2) .swiper,
.colonnes-ref > *:nth-child(2) .wp-block-group {
  width: 100% !important;
  max-width: 100% !important;
}
		
/* Puces inactives */
.wp-block-spectra-slider[class*="wp-block"] .swiper-pagination .swiper-pagination-bullet {
  background-color: blue !important;
  opacity: 0.5 !important;
}

/* Puce active */
.wp-block-spectra-slider[class*="wp-block"] .swiper-pagination .swiper-pagination-bullet-active {
  background-color: #ff0000 !important;
  opacity: 1 !important;
}