html, body {
  font-family: 'Roboto Mono', monospace;
  height: 100%;
}

.containerTitre {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none; /* Pour permettre l'interaction avec les éléments en dessous */
}

.text {
  position: absolute;
  top: 60%; /* Positionne le texte à 60% du haut */
  left: 0;
  right: 0;
  font-size: 50px;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 10px 0;
  text-align: center;
  width: 100%; /* 100% de largeur */
}

/* Styles spécifiques pour les téléphones */
@media (min-width: 320px) and (max-width: 1024px) { 
  .text {
    font-weight: 100;
    font-size: 20px;
    top: 55%; /* Maintient la même position relative sur mobile */
  }
}

.dud {
  color: #757575;
}

/* Style pour la section contenant le bouton et le numéro */
.call-buton {
  position: absolute; /* Position absolue, non fixe pour permettre le défilement */
  bottom: 100px; /* Position initiale en bas */
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 999;
}

/* Style pour le bouton d'appel */
.call-buton .cc-calto-action-ripple {
  position: relative;
  background: #7DDA58;
  width: 8rem;
  height: 8rem;
  padding: 1rem;
  border-radius: 100%;
  box-sizing: border-box;
  color: #ffffff;
  animation: cc-calto-action-ripple 0.6s linear infinite;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  margin-bottom: 10px;
}

/* Style pour le numéro de téléphone */
span.num2 {
  position: absolute; /* Position absolue aussi */
  bottom: 50px; /* Positionnement en bas */
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Open Sans', sans-serif;
  color: #7DDA58;
  font-size: 20px;
  padding: 5px 15px;
  border-radius: 20px;
  text-align: center;
}

/* Taille de l'icône du téléphone dans le bouton d'appel pour PC */
.call-buton .cc-calto-action-ripple i {
  font-size: 4rem !important; /* Force une taille plus grande */
  margin: 0 auto;
}

/* Média query pour les grands écrans, pour s'assurer que l'icône reste visible */
@media (min-width: 768px) {
  .call-buton .cc-calto-action-ripple i {
    font-size: 4rem !important; /* Encore plus grand sur les très grands écrans */
  }
}

/* Ajustement pour les appareils mobiles (déjà correctement dimensionné) */
@media (max-width: 767px) {
  .call-buton .cc-calto-action-ripple i {
    font-size: 3rem !important; /* Taille adaptée aux mobiles */
  }
}

@-webkit-keyframes cc-calto-action-ripple {
  0% {
    -webkit-box-shadow: 0 4px 10px rgba(125, 218, 88, 0.2), 0 0 0 0 rgba(125, 218, 88, 0.2), 0 0 0 5px rgba(125, 218, 88, 0.2), 0 0 0 10px rgba(125, 218, 88, 0.2);
    box-shadow: 0 4px 10px rgba(125, 218, 88, 0.2), 0 0 0 0 rgba(125, 218, 88, 0.2), 0 0 0 5px rgba(125, 218, 88, 0.2), 0 0 0 10px rgba(125, 218, 88, 0.2);
  }
  100% {
    -webkit-box-shadow: 0 4px 10px rgba(125, 218, 88, 0.2), 0 0 0 5px rgba(125, 218, 88, 0.2), 0 0 0 10px rgba(125, 218, 88, 0.2), 0 0 0 20px rgba(125, 218, 88, 0);
    box-shadow: 0 4px 10px rgba(125, 218, 88, 0.2), 0 0 0 5px rgba(125, 218, 88, 0.2), 0 0 0 10px rgba(125, 218, 88, 0.2), 0 0 0 20px rgba(125, 218, 88, 0);
  }
}

@keyframes cc-calto-action-ripple {
  0% {
    -webkit-box-shadow: 0 4px 10px rgba(125, 218, 88, 0.2), 0 0 0 0 rgba(125, 218, 88, 0.2), 0 0 0 5px rgba(125, 218, 88, 0.2), 0 0 0 10px rgba(125, 218, 88, 0.2);
    box-shadow: 0 4px 10px rgba(125, 218, 88, 0.2), 0 0 0 0 rgba(125, 218, 88, 0.2), 0 0 0 5px rgba(125, 218, 88, 0.2), 0 0 0 10px rgba(125, 218, 88, 0.2);
  }
  100% {
    -webkit-box-shadow: 0 4px 10px rgba(125, 218, 88, 0.2), 0 0 0 5px rgba(125, 218, 88, 0.2), 0 0 0 10px rgba(125, 218, 88, 0.2), 0 0 0 20px rgba(125, 218, 88, 0);
    box-shadow: 0 4px 10px rgba(125, 218, 88, 0.2), 0 0 0 5px rgba(125, 218, 88, 0.2), 0 0 0 10px rgba(125, 218, 88, 0.2), 0 0 0 20px rgba(125, 218, 88, 0);
  }
}

/* Style pour le bouton sur mobile */
@media (max-width: 767px) {
  .call-buton .cc-calto-action-ripple {
    width: 6rem; /* Taille réduite sur mobile */
    height: 6rem;
    bottom: 1.5rem; /* Un peu moins d'espace en bas sur mobile */
  }
  
  .call-buton .cc-calto-action-ripple i {
    font-size: 3rem;
  }
}

	span.num2{
		font-family: 'Open Sans', sans-serif;
    	color: #7DDA58;
		font-size: 20px;
	}