/* 
   ALLO NETTOYAGE - Custom Colors
   Fichier CSS pour remplacer les couleurs orange par des bleus "nettoyage"
   
   Couleurs utilisées:
   - Bleu principal (clair): #00B4D8 - évoque l'eau propre et la fraîcheur
   - Bleu foncé: #0077B6 - évoque le professionnalisme
*/

/* === Couleurs de base === */
.color-primary {
  color: #00B4D8 !important;
}

.color-secondary {
  color: #0077B6 !important;
}

/* === Textes avec gradient === */
.text-gradient-1 {
  background: linear-gradient(135deg, #00B4D8 0%, #0077B6 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* === Arrière-plans avec gradient === */
.bg-gradient-1 {
  background: linear-gradient(135deg, #00B4D8 0%, #0077B6 100%) !important;
}

/* === Boutons avec gradient === */
.button-gradient-1,
.button-gradient-1:hover {
  background: linear-gradient(135deg, #00B4D8 0%, #0077B6 100%) !important;
  border-color: #00B4D8 !important;
  color: white !important;
}

.button-gradient-1:hover {
  background: linear-gradient(135deg, #0077B6 0%, #005A8C 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 180, 216, 0.3);
}

/* === Liens et éléments cliquables === */
a.text-gradient-1:hover {
  opacity: 0.8;
}

/* === Icônes colorées === */
.icon-gradient-1 {
  color: #00B4D8 !important;
}

/* === Bordures === */
.border-gradient-1 {
  border-color: #00B4D8 !important;
}

/* === Background overlay pour hero === */
.bg-overlay::before {
  background: linear-gradient(135deg, #00B4D8 0%, #0077B6 100%) !important;
}

/* === Badges === */
.badge.bg-gradient-1 {
  background: linear-gradient(135deg, #00B4D8 0%, #0077B6 100%) !important;
  color: white !important;
}

/* === Éléments spécifiques au template === */
.animated-progress > div {
  background: linear-gradient(135deg, #00B4D8 0%, #0077B6 100%) !important;
}

/* === Boutons cercles === */
.button-circle-white-2 {
  border-color: white !important;
  color: white !important;
}

.button-circle-white-2:hover {
  background: rgba(0, 180, 216, 0.2) !important;
}

/* === Liens dans le footer === */
footer a:hover {
  color: #00B4D8 !important;
}

/* === Box shadow pour les cartes === */
.box-shadow:hover {
  box-shadow: 0 15px 40px rgba(0, 180, 216, 0.15) !important;
}

/* === Header téléphone button === */
.header-menu-extra .button {
  background: linear-gradient(135deg, #00B4D8 0%, #0077B6 100%) !important;
  border-color: #00B4D8 !important;
}

.header-menu-extra .button:hover {
  background: linear-gradient(135deg, #0077B6 0%, #005A8C 100%) !important;
  box-shadow: 0 5px 15px rgba(0, 180, 216, 0.3) !important;
}

/* === Étoiles de notation (garder en jaune/orange) === */
.text-warning,
.bi-star-fill.text-warning {
  color: #F7C02D !important;
}

/* === Effets de survol === */
.bg-white.box-shadow:hover i {
  color: #00B4D8 !important;
}

/* === Section grise avec fade === */
.bg-fade-white-top {
  background: linear-gradient(to bottom, rgba(255,255,255,0.9), rgba(0,180,216,0.05)) !important;
}