/* ==========================================================================
   VARIABLES CORPORATE (EXTRAITES DE LOGO.PNG)
   ========================================================================== */
:root {
  --primary-color: #552382; /* Violet Cissé Construction */
  --primary-hover: #431b68;
  --secondary-color: #f37024; /* Orange BTP / Énergie */
  --secondary-hover: #d95d19;
  --dark-color: #1c0b2b; /* Texte ultra-sombre teinté */
  --light-color: #fafafd; /* Fond de page lumineux */
  --gray-muted: #6c757d;
  --transition-smooth: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.text-primary {
  color: var(--primary-color) !important;
}

.text-primary:hover {
  color: var(--primary-hover) !important;
}

.text-secondary {
  color: var(--secondary-color) !important;
}

.text-secondary:hover {
  color: var(--secondary-hover) !important;
}

.active {
  color: var(--secondary-color) !important;
}

/* ==========================================================================
   STYLES GÉNÉRAUX & TYPOGRAPHIE
   ========================================================================== */
body {
  font-family:
    "Poppins",
    "Inter",
    system-ui,
    -apple-system,
    sans-serif;
  background-color: var(--light-color);
  color: var(--dark-color);
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  color: var(--primary-color);
}

/* Effet dégradé textuel pour titres accrocheurs (Ex: Le 404) */
.text-gradient {
  background: linear-gradient(
    135deg,
    var(--primary-color),
    var(--secondary-color)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ==========================================================================
   SURCHARGE COMPOSANTS BOOTSTRAP (DESIGN ULTRA PRO)
   ========================================================================== */
.btn-primary {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  transition: var(--transition-smooth);
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
  transform: translateY(-2px);
}

.btn-outline-primary {
  color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  transition: var(--transition-smooth);
}
.btn-outline-primary:hover {
  background-color: var(--primary-color) !important;
  color: #fff !important;
  transform: translateY(-2px);
}

.btn-secondary {
  background-color: var(--secondary-color) !important;
  border-color: var(--secondary-color) !important;
  transition: var(--transition-smooth);
}
.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--secondary-hover) !important;
  border-color: var(--secondary-hover) !important;
  transform: translateY(-2px);
}

.text-primary {
  color: var(--primary-color) !important;
}
.text-secondary {
  color: var(--secondary-color) !important;
}
.bg-primary {
  background-color: var(--primary-color) !important;
}
.bg-secondary {
  background-color: var(--secondary-color) !important;
}

/* ==========================================================================
   CLASSES COMPORTEMENTALES POUR LES IMAGES (VALORISATION DES PROJETS)
   ========================================================================== */

/* Conteneur d'image avec zoom contrôlé (Idéal pour galeries de chantiers) */
.img-hover-container {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.img-hover-zoom {
  transition: var(--transition-smooth);
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.img-hover-container:hover .img-hover-zoom {
  transform: scale(1.08);
}

/* Overlay commercial au survol de l'image */
.img-overlay-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(
    to top,
    rgba(28, 11, 43, 0.9),
    rgba(28, 11, 43, 0)
  );
  padding: 20px;
  opacity: 0;
  transition: var(--transition-smooth);
}

.img-hover-container:hover .img-overlay-info {
  opacity: 1;
}

/* ==========================================================================
   ANIMATIONS DISCRÈTES (PLUS-VALUE VISUELLE)
   ========================================================================== */
@keyframes bounce {
  0%,
  100% {
    transform: translateY(0) translate(-50%, -50%);
  }
  50% {
    transform: translateY(-10px) translate(-50%, -50%);
  }
}

.animate-bounce {
  animation: bounce 3s infinite ease-in-out;
}

/* Ajustements universels de réactivité */
@media (max-width: 768px) {
  .display-1 {
    font-size: 4.5rem;
  }
}