/* HEADER */
/* Nouvelle navbar high-tech */
.glass-header {
  background: linear-gradient(90deg, #0d6efd, #6610f2);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  transition: background 0.4s ease-in-out;
}

/* Quand on scroll : plus sombre */
.glass-header.scrolled {
  background: linear-gradient(90deg, #0b5ed7, #520dc2);
}


/* Logo animation */
.logo-animate {
  transform: scale(0.9);
  opacity: 0;
  transition: transform 0.6s ease, opacity 0.6s ease;
}
.logo-animate.visible {
  transform: scale(1);
  opacity: 1;
}

.brand-text {
  font-weight: 800;
  font-size: 1.4rem;
  text-transform: uppercase;
  background: linear-gradient(90deg, #0d6efd, #6610f2);
  background-clip: text;            /* Version standard */
  -webkit-background-clip: text;    /* Version Chrome/Safari */
  -webkit-text-fill-color: transparent;
  color: transparent;               /* Fallback */
  letter-spacing: 1px;
}


/* Liens avec effet underline animé */
.nav-animate {
  position: relative;
  color: #fff !important;
  margin: 0 8px;
  transition: color 0.3s ease;
}
.nav-animate::after {
  content: "";
  position: absolute;
  width: 0%;
  height: 2px;
  bottom: -4px;
  left: 0;
  background-color: #0d6efd;
  transition: width 0.3s ease;
}
.nav-animate:hover {
  color: #0d6efd !important;
}
.nav-animate:hover::after {
  width: 100%;
}

/* Bouton contact avec effet glow */
.glow-btn {
  box-shadow: 0 0 10px rgba(13, 110, 253, 0.6);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.glow-btn:hover {
  box-shadow: 0 0 20px rgba(13, 110, 253, 0.9);
  transform: translateY(-2px);
}
/* -------------------------------------------------*/

/* FOOTER */
/* Footer style */
.footer-modern {
  background: rgba(15, 15, 15, 0.9);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  animation: slideUp 1s ease-in-out;
}

/* Logo animation */
.footer-logo {
  height: 50px;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease;
}
.footer-logo.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Menu */
.footer-menu li {
  margin: 6px 0;
}
.footer-menu a {
  color: #bbb;
  text-decoration: none;
  transition: color 0.3s, padding-left 0.3s;
}
.footer-menu a:hover {
  color: #0d6efd;
  padding-left: 6px;
}

/* Icônes réseaux sociaux */
.social-icon {
  font-size: 1.4rem;
  color: #bbb;
  transition: color 0.3s, transform 0.3s, text-shadow 0.3s;
}
.social-icon:hover {
  color: #0d6efd;
  transform: scale(1.2);
  text-shadow: 0 0 10px rgba(13, 110, 253, 0.7);
}

/* Copyright fade-in */
.fade-in {
  opacity: 0;
  animation: fadeIn 2s ease-in-out forwards;
}

/* Animations keyframes */
@keyframes fadeIn {
  to { opacity: 1; }
}
@keyframes slideUp {
  from { transform: translateY(50px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
/* -------------------------------------------------*/
/* Effet néon high-tech */
.social-icon {
  font-size: 1.6rem;
  color: #bbb;
  transition: all 0.4s ease;
  position: relative;
}
.social-icon:hover {
  color: #0d6efd;
  text-shadow: 0 0 12px #0d6efd, 0 0 24px #0d6efd, 0 0 36px #0d6efd;
  transform: scale(1.25) rotate(5deg);
}

.logo-animate.visible {
  transform: scale(1);
  opacity: 1;
  filter: drop-shadow(0 0 10px rgba(13,110,253,0.6));
  animation: pulse 2.5s infinite alternate;
}
@keyframes pulse {
  from { filter: drop-shadow(0 0 10px rgba(13,110,253,0.6)); }
  to { filter: drop-shadow(0 0 25px rgba(13,110,253,0.9)); }
}

/* -------------------------------------------------*/

/* Utilitaires de teinte claire sur fond sombre */
.text-light-50 { color: rgba(255,255,255,.75); }
.text-light-60 { color: rgb(0, 0, 0); }
.text-light-70 { color: rgba(255,255,255,.8); }

/* Espacement section */
.py-6 { padding-top: 4.5rem; padding-bottom: 4.5rem; }

/* TITRES / Accent */
.section-title { font-weight: 800; letter-spacing: .5px; }
.gradient-text {
  background: linear-gradient(90deg,#0d6efd,#6610f2);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* HERO */
#hero, .hero-slide { height: clamp(60vh, 84vh, 92vh); }
.hero-slide { 
  background: var(--bg) center/cover no-repeat; 
  position: relative;
}
.hero-overlay {
  position: absolute; inset: 0;
  background: radial-gradient(1200px 500px at 20% 10%, rgba(13,110,253,.25), transparent 60%),
              linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.55));
}
.hero-content { max-width: 720px; }

/* Cartes néomorphiques légères */
.card-neo {
  background: rgba(7, 21, 77, 0.97);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 1rem;
  box-shadow: 0 8px 30px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06);
}
.card-neo .card-body { padding: 1.5rem; }

/* Badges icônes */
.icon-badge {
  width: 48px; height: 48px; border-radius: 12px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(13,110,253,.2), rgba(102,16,242,.2));
  border: 1px solid rgba(255,255,255,.15);
  font-size: 1.25rem;
}

/* Domaine tiles */
.domain-tile {
  display: flex; align-items: center; gap: .75rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: .85rem; padding: .9rem 1rem;
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.domain-tile i { font-size: 1.35rem; color: #9cc1ff; }
.domain-tile:hover { transform: translateY(-3px); border-color: rgba(13,110,253,.6);
  background: rgba(13,110,253,.06);
}

/* Cartes "About" */
.about-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: .85rem; padding: .9rem 1rem;
}

/* Témoignages */
.testimonial { padding: 1.2rem 1.4rem; }
.testimonial-avatar { width: 56px; height: 56px; object-fit: cover; }

/* Fond dégradé doux */
.bg-gradient-dark {
  background: radial-gradient(800px 400px at 80% 10%, rgba(102,16,242,.08), transparent 60%),
              radial-gradient(700px 350px at 10% 0%, rgba(13,110,253,.1), transparent 55%),
              #0e0e12;
}

/* Ajuste la navbar (tu disais ne pas aimer le gris) */
.glass-header {
  background: linear-gradient(90deg,#0d6efd,#6610f2) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.18);
}
.glass-header.scrolled { background: linear-gradient(90deg,#0b5ed7,#520dc2) !important; }

/* Brand text en cohérence logo */
.brand-text {
  font-weight: 800; font-size: 1.25rem; text-transform: uppercase;
  background: linear-gradient(90deg,#9cc1ff,#b08cff);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; letter-spacing: 1px;
}


/* --- TITRES / Section --- */
.section-title {
  font-weight: 800;
  letter-spacing: .5px;
  font-size: 2rem;
  text-transform: uppercase;
  background: linear-gradient(90deg,#0d6efd,#6610f2);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  position: relative;
}
.section-title::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  margin: 12px auto 0;
  background: linear-gradient(90deg,#0d6efd,#6610f2);
  border-radius: 2px;
}

/* --- Cartes (services, about, contact, etc.) --- */
.card-neo {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 1rem;
  box-shadow: 0 8px 30px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .3s ease, box-shadow .3s ease;
}
.card-neo:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(13,110,253,.3);
}

/* --- Icônes badges (services) --- */
.icon-badge {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 1.6rem;
  background: linear-gradient(135deg, rgba(13,110,253,.25), rgba(102,16,242,.25));
  border: 1px solid rgba(255,255,255,.15);
  color: #9cc1ff;
  margin: 0 auto 12px;
  transition: all .3s ease;
}
.card-neo:hover .icon-badge {
  color: #fff;
  background: linear-gradient(135deg, #0d6efd, #6610f2);
  transform: scale(1.1);
}

/* --- Domaines tiles --- */
.domain-tile {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1rem;
  border-radius: .9rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  transition: all .25s ease;
}
.domain-tile i { font-size: 1.5rem; color: #9cc1ff; }
.domain-tile:hover {
  transform: translateY(-3px);
  background: rgba(13,110,253,.08);
  border-color: rgba(13,110,253,.6);
}

/* --- Formulaires (contact, avis, newsletter) --- */
form .form-control {
  background: rgba(255,255,255);
  border: 1px solid rgba(255,255,255,.15);
  color: #0d6efd;
}
form .form-control:focus {
  background: rgba(255,255,255,.08);
  border-color: #0d6efd;
  box-shadow: 0 0 10px rgba(13,110,253,.5);
  color: #fff;
}

/* --- Boutons glow --- */
.btn.glow-btn {
  background: linear-gradient(90deg,#0d6efd,#6610f2);
  border: none;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 0 10px rgba(13,110,253,.6);
  transition: all .3s ease;
}
.btn.glow-btn:hover {
  box-shadow: 0 0 25px rgba(13,110,253,.9);
  transform: translateY(-2px);
}

/* --- Animations utilitaires --- */
[data-aos] {
  opacity: 0;
  transform: translateY(20px);
  transition: all .8s ease;
}
[data-aos].aos-animate {
  opacity: 1;
  transform: translateY(0);
}

.hero-small {
  min-height: 60vh; /* occupe 60% de la hauteur de l’écran */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.text-justify {
  text-align: justify;
}

.text-red {
  color: #fff !important;
}
.img-fluid {
  max-width:70%;
  height:auto
}
.text-red-title {
  color: #D4141D !important;
}
.lead {
  font-size:1.9rem;
  font-weight:300;
}

.card-img,
.card-img-bottom,
.card-img-top {
  width:30%;
}

/* Style formulaire bleu */
.form-blue {
  background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
  border: none;
}

.form-blue input,
.form-blue textarea {
  border-radius: 10px;
  border: 1px solid #e3f2fd;
  background: #ffffff;
}

.form-blue input:focus,
.form-blue textarea:focus {
  border-color: #0d6efd;
  box-shadow: 0 0 10px rgba(13, 110, 253, 0.5);
}

.form-blue button {
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
}