/* ================================================
   BRICOPLAN – design.css  (v2.0 Premium)
   Couche design & animations – à charger APRÈS style.css
   Ne pas modifier style.css original
   ================================================ */

/* ---- Polices supplémentaires ---- */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&display=swap');

/* ================================================
   VARIABLES SUPPLÉMENTAIRES
   ================================================ */
:root {
  --accent-glow:    rgba(244,168,32,0.45);
  --primary-glow:   rgba(27,79,155,0.35);
  --dark:           #0a1628;
  --dark-2:         #111d35;
  --shadow-blue:    0 10px 35px rgba(27,79,155,0.3);
  --shadow-lg:      0 20px 60px rgba(10,22,40,0.18);
  --radius-lg:      20px;
  --font-accent:    'Rajdhani', 'Barlow Condensed', sans-serif;
}

/* ================================================
   CURSEUR PERSONNALISÉ – DÉSACTIVÉ (curseur système normal)
   ================================================ */
/* body { cursor: none; } -- désactivé, curseur normal conservé */
body { cursor: auto !important; }

.cursor-dot,
.cursor-ring { display: none !important; }

/* ================================================
   ÉCRAN DE CHARGEMENT
   ================================================ */
#loader-screen {
  position: fixed;
  inset: 0;
  background: var(--dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 99997;
  transition: opacity .6s ease, visibility .6s ease;
}

#loader-screen.hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.loader-logo {
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: 2px;
  animation: loaderPulse 1.4s ease infinite;
}

.loader-logo span { color: var(--accent); }

.loader-bar-wrap {
  width: 200px;
  height: 3px;
  background: rgba(255,255,255,0.1);
  border-radius: 99px;
  margin-top: 24px;
  overflow: hidden;
}

.loader-bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--primary-light), var(--accent));
  border-radius: 99px;
  animation: loaderFill 1.6s ease forwards;
}

@keyframes loaderPulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .75; transform: scale(.97); }
}

@keyframes loaderFill {
  to { width: 100%; }
}

/* ================================================
   NAVBAR – AMÉLIORATIONS
   ================================================ */
#mainNav {
  background: rgba(255,255,255,0.88) !important;
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border-bottom: 1px solid rgba(27,79,155,0.08);
  transition: all .4s cubic-bezier(.4,0,.2,1);
}

#mainNav.scrolled {
  background: rgba(255,255,255,0.97) !important;
  border-bottom-color: rgba(27,79,155,0.15);
}

/* Logo animé */
.brand-logo {
  position: relative;
  overflow: hidden;
}

.brand-logo::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transition: width .4s ease;
}

.brand-logo:hover::after { width: 100%; }

/* Indicateur nav actif amélioré */
.nav-link.active {
  color: var(--primary) !important;
  font-weight: 600;
}

/* ================================================
   HERO – EFFETS AVANCÉS
   ================================================ */

/* Fond animé (formes géométriques flottantes) */
.hero-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 80% 20%, rgba(27,79,155,0.18) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 10% 80%, rgba(244,168,32,0.08) 0%, transparent 60%);
  z-index: 1;
  pointer-events: none;
}

/* Particules géométriques SVG animées */
.hero-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.hero-particle {
  position: absolute;
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: 4px;
  animation: floatParticle linear infinite;
}

.hero-particle:nth-child(1)  { width:60px;  height:60px;  top:15%; left:5%;  animation-duration:14s; animation-delay:0s;   opacity:.5; }
.hero-particle:nth-child(2)  { width:30px;  height:30px;  top:70%; left:8%;  animation-duration:10s; animation-delay:-2s;  opacity:.35; border-radius:50%; }
.hero-particle:nth-child(3)  { width:80px;  height:80px;  top:30%; left:88%; animation-duration:18s; animation-delay:-4s;  opacity:.25; transform:rotate(30deg); }
.hero-particle:nth-child(4)  { width:20px;  height:20px;  top:80%; left:75%; animation-duration:8s;  animation-delay:-1s;  opacity:.5; }
.hero-particle:nth-child(5)  { width:50px;  height:50px;  top:55%; left:50%; animation-duration:12s; animation-delay:-6s;  opacity:.2; transform:rotate(45deg); }
.hero-particle:nth-child(6)  { width:15px;  height:15px;  top:20%; left:60%; animation-duration:7s;  animation-delay:-3s;  opacity:.45; border-radius:50%; background:rgba(244,168,32,0.3); border:none; }

@keyframes floatParticle {
  0%   { transform: translateY(0) rotate(0deg);   opacity:.15; }
  50%  { opacity:.6; }
  100% { transform: translateY(-120px) rotate(180deg); opacity:.1; }
}

/* Ligne de scan horizontale sur le hero */
.hero-scan-line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(244,168,32,0.5), transparent);
  z-index: 2;
  pointer-events: none;
  animation: scanMove 6s linear infinite;
}

@keyframes scanMove {
  0%   { top: 0%; opacity: 0; }
  5%   { opacity: 1; }
  95%  { opacity: .5; }
  100% { top: 100%; opacity: 0; }
}

/* Badge hero amélioré */
.badge-hero {
  background: linear-gradient(135deg, rgba(244,168,32,0.2), rgba(244,168,32,0.05));
  border-color: rgba(244,168,32,0.5) !important;
  color: var(--accent) !important;
  box-shadow: 0 0 20px rgba(244,168,32,0.2);
  font-family: var(--font-accent);
  letter-spacing: 1px;
}

/* Titre hero avec effet de dégradé sur le texte accent */
.text-accent {
  background: linear-gradient(135deg, var(--accent) 0%, #ffd060 50%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% auto;
  animation: gradientShift 3s ease infinite;
}

@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Boutons hero améliorés */
.hero-content .btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  box-shadow: 0 4px 24px rgba(27,79,155,0.45), inset 0 1px 0 rgba(255,255,255,0.15);
  border: none;
  position: relative;
  overflow: hidden;
}

.hero-content .btn-primary::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 60%;
  height: 200%;
  background: rgba(255,255,255,0.15);
  transform: skewX(-20deg);
  transition: left .5s ease;
}

.hero-content .btn-primary:hover::before { left: 130%; }

.hero-content .btn-outline-light {
  border: 1.5px solid rgba(255,255,255,0.4);
  backdrop-filter: blur(6px);
  transition: all .35s ease;
}

.hero-content .btn-outline-light:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.7);
  box-shadow: 0 0 20px rgba(255,255,255,0.15);
}

/* ================================================
   BANDE DÉFILANTE PARTENAIRES (scroll auto)
   ================================================ */
.partners-band {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 50%, #1e5cb3 100%);
  overflow: hidden;
  position: relative;
}

.partners-band::before,
.partners-band::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}

.partners-band::before {
  left: 0;
  background: linear-gradient(90deg, var(--primary-dark), transparent);
}

.partners-band::after {
  right: 0;
  background: linear-gradient(270deg, var(--primary-dark), transparent);
}

.partners-ticker {
  display: flex;
  gap: 32px;
  animation: tickerScroll 18s linear infinite;
  width: max-content;
  padding: 0 16px;
}

.partners-ticker:hover { animation-play-state: paused; }

@keyframes tickerScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.partner-logo-text {
  white-space: nowrap;
  padding: 8px 22px !important;
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  font-family: var(--font-accent);
  font-size: 1rem !important;
  letter-spacing: 2px !important;
  transition: all .3s ease;
  cursor: default;
}

.partner-logo-text:hover {
  background: rgba(255,255,255,0.18) !important;
  color: #fff !important;
  box-shadow: 0 0 16px rgba(255,255,255,0.15);
  transform: translateY(-2px);
}

/* ================================================
   DOMAINES D'EXPERTISE – CARDS REDESIGNÉES
   ================================================ */
.domains-section { background: #fff; position: relative; }

.domain-card {
  background: linear-gradient(145deg, #fff, var(--light-bg)) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 16px !important;
  position: relative;
  overflow: hidden;
  transition: all .4s cubic-bezier(.4,0,.2,1) !important;
}

.domain-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  opacity: 0;
  transition: opacity .4s ease;
}

.domain-card:hover {
  border-color: var(--primary) !important;
  transform: translateY(-10px) scale(1.02) !important;
  box-shadow: var(--shadow-blue) !important;
}

.domain-card:hover::before { opacity: 1; }

.domain-card:hover .domain-icon,
.domain-card:hover .domain-label {
  color: #fff !important;
  position: relative;
  z-index: 1;
}

.domain-icon {
  font-size: 2.4rem !important;
  display: block;
  transition: transform .4s ease, color .3s ease;
}

.domain-card:hover .domain-icon { transform: scale(1.2) rotate(-5deg); }

.domain-label {
  font-family: var(--font-accent);
  font-size: .95rem !important;
  letter-spacing: .5px;
  transition: color .3s ease;
}

/* ================================================
   SECTION HEADERS – DECORATIONS
   ================================================ */
.section-tag {
  font-family: var(--font-accent);
  letter-spacing: 3px !important;
  background: linear-gradient(135deg, rgba(27,79,155,0.12), rgba(27,79,155,0.05)) !important;
  border-left: 3px solid var(--primary);
  border-radius: 0 50px 50px 0 !important;
  padding-left: 10px !important;
}

.section-title {
  position: relative;
  display: inline-block;
}

/* Ligne décorative sous les titres de section */
.section-header .section-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  margin: 12px auto 0;
  border-radius: 3px;
  animation: lineExpand .8s ease forwards;
}

@keyframes lineExpand {
  from { width: 0; }
  to   { width: 60px; }
}

/* ================================================
   CARDS PRODUITS – REDESIGN COMPLET
   ================================================ */
.product-card {
  border-radius: 18px !important;
  overflow: hidden;
  border: 1.5px solid var(--border) !important;
  background: #fff;
  transition: all .4s cubic-bezier(.4,0,.2,1) !important;
  position: relative;
}

.product-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transition: width .4s ease;
}

.product-card:hover {
  transform: translateY(-12px) !important;
  box-shadow: 0 20px 50px rgba(27,79,155,0.18) !important;
  border-color: rgba(27,79,155,0.25) !important;
}

.product-card:hover::after { width: 100%; }

.product-img-placeholder {
  background: linear-gradient(135deg, #e8eef7, #d5dfed) !important;
  position: relative;
  overflow: hidden;
}

/* Effet shimmer sur les placeholders */
.product-img-placeholder::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: shimmer 2.5s infinite;
}

@keyframes shimmer {
  0%   { left: -100%; }
  100% { left: 200%; }
}

/* Bouton "Voir prix" amélioré */
.product-card .btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  border: none;
  border-radius: 8px !important;
  font-family: var(--font-accent);
  letter-spacing: .5px;
  transition: all .3s ease;
  position: relative;
  overflow: hidden;
}

.product-card .btn-primary:hover {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary));
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(27,79,155,0.35);
}

/* ================================================
   SERVICES – CARDS AMÉLIORÉES
   ================================================ */
.service-card-home {
  border-radius: 18px !important;
  border: 1.5px solid var(--border) !important;
  position: relative;
  overflow: hidden;
  transition: all .4s ease !important;
}

.service-card-home::before {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(27,79,155,0.04) 0%, transparent 100%);
  transition: top .4s ease;
}

.service-card-home:hover::before { top: 0; }

.service-card-home:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 18px 45px rgba(27,79,155,0.14) !important;
  border-color: var(--primary) !important;
}

.service-card-blue {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
  border-color: transparent !important;
  box-shadow: 0 8px 32px rgba(27,79,155,0.35) !important;
}

.service-card-blue:hover {
  box-shadow: 0 20px 50px rgba(27,79,155,0.5) !important;
  transform: translateY(-10px) scale(1.01) !important;
}

.service-icon {
  font-size: 2.6rem !important;
  display: block;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: transform .35s ease;
}

.service-card-home:hover .service-icon { transform: scale(1.15) rotate(-8deg); }

.service-card-blue .service-icon {
  background: linear-gradient(135deg, #fff, rgba(255,255,255,0.75));
  -webkit-background-clip: text;
  background-clip: text;
}

/* ================================================
   SECTION STATISTIQUES – REDESIGN SPECTACULAIRE
   ================================================ */
.stats-section {
  background: linear-gradient(135deg, #0a1628 0%, var(--primary-dark) 40%, var(--primary) 80%, #1e5cb3 100%) !important;
  position: relative;
  overflow: hidden;
}

/* Grille décorative en arrière-plan */
.stats-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
}

/* Cercle lumineux décoratif */
.stats-section::after {
  content: '';
  position: absolute;
  top: -150px;
  right: -150px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(27,79,155,0.3) 0%, transparent 70%);
  pointer-events: none;
}

/* Compteur animé */
.stat-number {
  font-size: clamp(3rem, 6vw, 5rem) !important;
  font-weight: 900 !important;
  background: linear-gradient(135deg, #fff 30%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1 !important;
  letter-spacing: -1px;
  position: relative;
  z-index: 1;
}

/* Petit trait décoratif sous chaque stat */
[data-animate="countUp"] {
  position: relative;
  padding: 28px 20px !important;
}

[data-animate="countUp"]::after {
  content: '';
  display: block;
  width: 40px;
  height: 2px;
  background: var(--accent);
  margin: 12px auto 0;
  border-radius: 2px;
  opacity: .7;
}

.stat-label {
  font-family: var(--font-accent);
  font-size: 1rem !important;
  letter-spacing: 1px !important;
  opacity: .85 !important;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}

/* ================================================
   CTA SECTION – REDESIGN
   ================================================ */
.cta-section {
  background: linear-gradient(135deg, #f2f5fa, #e8eef7) !important;
  position: relative;
  overflow: hidden;
}

.cta-section::before {
  content: '';
  position: absolute;
  top: -60px;
  left: -60px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(27,79,155,0.07) 0%, transparent 70%);
  pointer-events: none;
}

.cta-section::after {
  content: '';
  position: absolute;
  bottom: -80px;
  right: -80px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244,168,32,0.06) 0%, transparent 70%);
  pointer-events: none;
}

.cta-section .btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  border: none;
  padding: 16px 48px !important;
  font-size: 1.05rem;
  font-family: var(--font-accent);
  letter-spacing: 1px;
  border-radius: 50px !important;
  box-shadow: 0 8px 30px rgba(27,79,155,0.35);
  transition: all .35s ease;
  position: relative;
  overflow: hidden;
}

.cta-section .btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--primary-light), var(--accent));
  opacity: 0;
  transition: opacity .35s ease;
}

.cta-section .btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(27,79,155,0.45);
}

.cta-section .btn-primary:hover::before { opacity: 1; }

.cta-section .btn-primary * { position: relative; z-index: 1; }

/* ================================================
   PAGE HERO (pages internes)
   ================================================ */
.page-hero {
  background: linear-gradient(135deg, #0a1628 0%, var(--primary-dark) 50%, var(--primary) 100%) !important;
  position: relative;
  overflow: hidden;
}

/* Grille décorative */
.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

/* Trait doré gauche décoratif */
.page-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background: linear-gradient(180deg, var(--accent), transparent);
}

.page-hero h1 {
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}

/* ================================================
   CARTES PARTENAIRES
   ================================================ */
.partner-card {
  border-radius: 18px !important;
  border: 1.5px solid var(--border) !important;
  position: relative;
  overflow: hidden;
  transition: all .4s ease !important;
}

.partner-card::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transition: width .4s ease;
}

.partner-card:hover {
  border-color: var(--primary) !important;
  transform: translateY(-8px) !important;
  box-shadow: 0 16px 45px rgba(27,79,155,0.16) !important;
}

.partner-card:hover::before { width: 100%; }

/* ================================================
   CLIENTS LOGOS – EFFET HOVER
   ================================================ */
.client-logo {
  border-radius: 12px !important;
  font-family: var(--font-accent) !important;
  letter-spacing: 1px;
  transition: all .35s ease !important;
  position: relative;
  overflow: hidden;
}

.client-logo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  opacity: 0;
  transition: opacity .3s ease;
}

.client-logo:hover {
  border-color: transparent !important;
  color: #fff !important;
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(27,79,155,0.28) !important;
}

.client-logo:hover::before { opacity: 1; }
.client-logo span, .client-logo { position: relative; z-index: 1; }

/* ================================================
   FORMULAIRE RDV – AMÉLIORATIONS
   ================================================ */
.rdv-card {
  border-radius: 24px !important;
  border: 1.5px solid var(--border);
  position: relative;
  overflow: hidden;
}

.rdv-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--accent), var(--primary-light));
  background-size: 200% auto;
  animation: gradientMove 3s linear infinite;
}

@keyframes gradientMove {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

.rdv-card .form-control,
.rdv-card .form-select {
  border-radius: 10px !important;
  transition: all .3s ease !important;
  border: 1.5px solid var(--border) !important;
}

.rdv-card .form-control:focus,
.rdv-card .form-select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 4px rgba(27,79,155,0.1) !important;
  transform: translateY(-1px);
}

/* Bouton soumettre amélioré */
.rdv-card [type="submit"] {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  border: none;
  border-radius: 12px !important;
  font-family: var(--font-accent);
  font-size: 1.05rem;
  letter-spacing: 1px;
  transition: all .35s ease;
  box-shadow: 0 6px 24px rgba(27,79,155,0.35);
}

.rdv-card [type="submit"]:hover {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary));
  transform: translateY(-2px);
  box-shadow: 0 12px 35px rgba(27,79,155,0.45);
}

/* Infos contact RDV */
.rdv-form-section .rounded-3.bg-white {
  border-radius: 14px !important;
  transition: all .35s ease;
  border: 1.5px solid var(--border) !important;
}

.rdv-form-section .rounded-3.bg-white:hover {
  border-color: var(--primary) !important;
  box-shadow: 0 8px 28px rgba(27,79,155,0.12);
  transform: translateY(-4px);
}

/* ================================================
   FOOTER – REDESIGN
   ================================================ */
.main-footer {
  background: linear-gradient(160deg, #0a1628 0%, #0f2045 60%, #0d1b3e 100%) !important;
  position: relative;
  overflow: hidden;
}

/* Motif de points décoratifs */
.main-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

/* Ligne orange en haut */
.main-footer::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--accent), var(--primary));
}

.footer-brand {
  font-size: 2rem !important;
}

.footer-links a:hover {
  color: var(--accent) !important;
  padding-left: 10px !important;
}

/* ================================================
   SIDEBAR CATÉGORIES PRODUITS
   ================================================ */
.categories-sidebar {
  border-radius: 16px !important;
  overflow: hidden;
  border: 1.5px solid var(--border) !important;
  box-shadow: var(--shadow);
}

.cat-item {
  transition: all .3s ease !important;
  border-left: 3px solid transparent;
}

.cat-item:hover, .cat-item.active {
  background: linear-gradient(90deg, var(--primary), var(--primary-light)) !important;
  border-left-color: var(--accent) !important;
  padding-left: 22px !important;
}

/* ================================================
   ANIMATIONS AU SCROLL – AMÉLIORÉES
   ================================================ */
[data-animate] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .75s cubic-bezier(.4,0,.2,1), transform .75s cubic-bezier(.4,0,.2,1);
}

[data-animate].visible {
  opacity: 1;
  transform: translateY(0);
}

/* Effet "fade from left" pour certains éléments */
[data-animate="fadeInLeft"] {
  transform: translateX(-40px);
}

[data-animate="fadeInLeft"].visible {
  transform: translateX(0);
}

[data-animate="fadeInRight"] {
  transform: translateX(40px);
}

[data-animate="fadeInRight"].visible {
  transform: translateX(0);
}

/* Décalages d'animation */
[data-delay="50"]  { transition-delay: .05s !important; }
[data-delay="100"] { transition-delay: .1s !important; }
[data-delay="150"] { transition-delay: .15s !important; }
[data-delay="200"] { transition-delay: .2s !important; }
[data-delay="250"] { transition-delay: .25s !important; }
[data-delay="300"] { transition-delay: .3s !important; }
[data-delay="350"] { transition-delay: .35s !important; }
[data-delay="400"] { transition-delay: .4s !important; }

/* ================================================
   BOUTONS GÉNÉRAUX – EFFET RIPPLE
   ================================================ */
.btn {
  position: relative;
  overflow: hidden;
}

.btn-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  transform: scale(0);
  animation: rippleEffect .6s linear;
  pointer-events: none;
}

@keyframes rippleEffect {
  to { transform: scale(4); opacity: 0; }
}

/* ================================================
   SCROLL TO TOP BUTTON
   ================================================ */
#scrollTopBtn {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: #fff;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  cursor: pointer;
  z-index: 9000;
  box-shadow: 0 6px 20px rgba(27,79,155,0.4);
  opacity: 0;
  transform: translateY(20px);
  transition: all .35s ease;
  pointer-events: none;
}

#scrollTopBtn.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

#scrollTopBtn:hover {
  background: linear-gradient(135deg, var(--accent), #d4891a);
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(244,168,32,0.45);
}

/* ================================================
   TOOLTIP FLOTTANT SUR LES ICÔNES DE DOMAINE
   ================================================ */
.domain-card { cursor: pointer; }

/* ================================================
   PAGE À PROPOS – VALEURS AMÉLIORÉES
   ================================================ */
.value-item {
  border-radius: 16px !important;
  transition: all .4s ease !important;
  border: 1.5px solid var(--border) !important;
}

.value-item:hover {
  background: linear-gradient(135deg, rgba(27,79,155,0.04), rgba(27,79,155,0.01)) !important;
  border-color: var(--primary) !important;
  transform: translateX(8px);
  box-shadow: -4px 0 0 var(--accent), var(--shadow) !important;
}

.value-icon {
  border-radius: 12px !important;
  background: linear-gradient(135deg, rgba(27,79,155,0.12), rgba(27,79,155,0.06)) !important;
  transition: all .35s ease;
}

.value-item:hover .value-icon {
  background: linear-gradient(135deg, var(--primary), var(--primary-light)) !important;
  color: #fff !important;
  transform: rotate(-8deg) scale(1.1);
}

.value-item:hover .value-icon i { color: #fff !important; }

/* ================================================
   CARTES SERVICE (page services)
   ================================================ */
.card.rounded-3 {
  border-radius: 18px !important;
  transition: all .4s ease !important;
  border: 1.5px solid var(--border) !important;
}

.card.rounded-3:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 50px rgba(27,79,155,0.18) !important;
}

/* ================================================
   ALERTES & NOTIFICATIONS
   ================================================ */
.alert-success-custom {
  background: linear-gradient(135deg, #d4f5e4, #e8fff2) !important;
  border-left: 4px solid #28a745 !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
  animation: slideInDown .4s ease;
}

.alert-error-custom {
  background: linear-gradient(135deg, #fde8e8, #fff0f0) !important;
  border-left: 4px solid #dc3545 !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
  animation: slideInDown .4s ease;
}

/* ================================================
   SECTION FEATURED PRODUCTS – BG AMÉLIORÉ
   ================================================ */
.featured-products.bg-light {
  background: linear-gradient(180deg, #f2f5fa 0%, #eaeef6 100%) !important;
}

.services-preview.bg-white {
  position: relative;
}

/* ================================================
   RESPONSIVE DESIGN
   ================================================ */
@media (max-width: 991.98px) {
  .hero-particle:nth-child(3),
  .hero-particle:nth-child(5) { display: none; }

  .stat-number { font-size: 2.8rem !important; }
}

@media (max-width: 767.98px) {
  body { cursor: auto; }
  .cursor-dot, .cursor-ring { display: none; }

  #scrollTopBtn { bottom: 20px; right: 20px; width: 42px; height: 42px; }

  .domain-card:hover { transform: translateY(-6px) scale(1) !important; }

  .section-header .section-title::after { margin: 10px auto 0; }
}

@media (max-width: 480px) {
  .partners-ticker { animation-duration: 12s; }
}