:root{
  --primary:#00aeef;
  --accent:#00adef;
  --dark:#0b1220;
  --muted:#93a4b5;
  --text:#e6eef6;
  --glass-border: rgba(255,255,255,.12);
  --gradient: radial-gradient(1200px 600px at 10% 10%, color-mix(in srgb, var(--primary) 30%, transparent), transparent 40%),
              radial-gradient(900px 500px at 90% 30%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 40%),
              linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.00));
}

html,body{height:100%}
body{background:#0a0f1a;color:var(--text);scroll-behavior:smooth}

/* Navbar */
.navbar{transition:background-color .3s ease, box-shadow .3s ease}
.navbar.translucent{background:rgba(10,15,26,.35);backdrop-filter:blur(8px)}
.navbar.scrolled{background:rgba(10,15,26,.92);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.nav-link{color:var(--text)!important;opacity:.9}
.nav-link:hover,.nav-link.active{color:var(--primary)!important;opacity:1}
.navbar-brand img{height:35px;width:auto}

/* Buttons & cards */
.btn-gradient{background:linear-gradient(135deg,var(--primary),var(--accent));border:0;color:#061019}
.btn-gradient:hover{filter:brightness(1.05);transform:translateY(-1px)}
.glass{background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid var(--glass-border);border-radius:20px;box-shadow:0 10px 40px rgba(0,0,0,.35);backdrop-filter:blur(10px)}
.feature-icon{width:54px;height:54px;display:grid;place-items:center;border-radius:14px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--primary) 25%, transparent), color-mix(in srgb, var(--accent) 25%, transparent))}

/* Sections */
section{padding:80px 0;position:relative}
.section-title .line{width:70px;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--primary),var(--accent));display:inline-block}
.lead-muted{color:var(--muted)}

/* Banners & Hero */
.banner{position:relative;display:grid;place-items:center;min-height:56vh;overflow:hidden}
.banner::before{content:"";position:absolute;inset:0;background:var(--gradient);opacity:.9}
.banner .stars{position:absolute;inset:-10%;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.5) 1px, transparent 1px);background-size:3px 3px;opacity:.08;animation:twinkle 8s linear infinite}
@keyframes twinkle{50%{opacity:.12}}
.banner .blob{position:absolute;filter:blur(40px);opacity:.28;border-radius:40%}
.banner .blob.b1{width:380px;height:380px;left:-60px;top:-60px;background:radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--primary) 55%, transparent), transparent 60%)}
.banner .blob.b2{width:440px;height:440px;right:-80px;bottom:-80px;background:radial-gradient(circle at 60% 60%, color-mix(in srgb, var(--accent) 55%, transparent), transparent 60%)}
.banner-sm{min-height:38vh}

.hero-title{font-weight:800}
.text-gradient{background:linear-gradient(135deg,var(--primary),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}

/* Special: index hero with slider as FILIGRANE under content */
.hero-filigrane{position:relative;min-height:88vh;display:flex;align-items:center;overflow:hidden}
.hero-filigrane .bg-slider{position:absolute;inset:0;z-index:0;opacity:.18;filter:blur(1px);pointer-events:none}
.hero-filigrane .bg-overlay{position:absolute;inset:0;background:var(--gradient);opacity:.95;z-index:1}
.hero-filigrane .content{position:relative;z-index:2}

/* Slides avec image */
.hero-slide{ position:relative; overflow:hidden; border-radius:20px; }
.hero-slide .slide-bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; transform:scale(1.03);
}
.hero-slide .slide-shade{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.25) 45%, rgba(0,0,0,0) 75%),
    radial-gradient(650px 450px at 85% 20%, color-mix(in srgb, var(--primary) 28%, transparent), transparent 60%);
}
.hero-slide .slide-content{ position:relative; z-index:2; }

/* Banner V1 (utilisé aussi sur les autres pages) */
.banner{
  position:relative; display:grid; place-items:center; min-height:56vh; overflow:hidden;
}
.banner::before{
  content:""; position:absolute; inset:0; background:var(--gradient); opacity:.9;
}
.banner .stars{
  position:absolute; inset:-10%; pointer-events:none;
  background-image: radial-gradient(rgba(255,255,255,.5) 1px, transparent 1px);
  background-size:3px 3px; opacity:.08; animation:twinkle 8s linear infinite;
}
@keyframes twinkle{ 50%{ opacity:.12; } }
.banner .blob{ position:absolute; filter:blur(40px); opacity:.28; border-radius:40%; }
.banner .blob.b1{ width:380px; height:380px; left:-60px; top:-60px;
  background:radial-gradient(circle at 30% 30%, rgba(14,165,233,.55), transparent 60%);
}
.banner .blob.b2{ width:440px; height:440px; right:-80px; bottom:-80px;
  background:radial-gradient(circle at 60% 60%, rgba(34,197,94,.55), transparent 60%);
}
.banner .hero-title{ font-weight:800; }

/* Carte verre + boutons */
.glass-card{
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12); border-radius:20px;
  box-shadow:0 10px 40px rgba(0,0,0,.35); backdrop-filter: blur(10px);
}
.btn-gradient{ background:linear-gradient(135deg, var(--primary), var(--accent)); border:0; color:#061019; }
.btn-gradient:hover{ filter:brightness(1.05); transform: translateY(-1px); }

/* ============================================================
   HERO — vidéo locale en background plein écran (index.php)
   ============================================================ */
#hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
/* Wrapper vidéo couvre tout le hero */
#hero .hero-video-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
/* La vidéo MP4 locale couvre tout l'écran */
#hero .hero-video-bg video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 177.78vh;  /* 100vh × 16/9 */
  height: 56.25vw;  /* 100vw × 9/16 */
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  pointer-events: none;
}
/* Voile sombre gauche → droite pour lisibilité */
#hero .hero-video-shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    90deg,
    rgba(6,10,18,.85) 0%,
    rgba(6,10,18,.60) 45%,
    rgba(6,10,18,.25) 80%,
    rgba(6,10,18,.10) 100%
  );
}
/* Halo coloré côté droit */
#hero .hero-video-glow {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(
    600px 400px at 85% 30%,
    color-mix(in srgb, var(--accent) 22%, transparent),
    transparent 70%
  );
}
/* Points étoiles */
#hero .stars {
  position: absolute;
  inset: -10%;
  z-index: 4;
  pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.5) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity: .06;
  animation: twinkle 8s linear infinite;
}
/* Le contenu texte passe au-dessus de tout */
#hero .hero-content {
  position: relative;
  z-index: 5;
}

/* Hero Swiper */
.hero-swiper{ position:relative; width:100%; }
.hero-swiper, .hero-swiper .swiper-slide{ min-height: 56vh; }
@media (min-width: 992px){
  .hero-swiper, .hero-swiper .swiper-slide{ min-height: 88vh; }
}
.hero-slide{ position:relative; display:flex; align-items:center; }
.hero-slide .slide-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform: scale(1.06);
}
.hero-slide .slide-shade{
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(6,10,18,.78) 0%, rgba(6,10,18,.55) 45%, rgba(6,10,18,.10) 80%, transparent 100%);
}
.hero-slide .slide-content{ position:relative; z-index:2; }

.hero-swiper .swiper-pagination{
  position:absolute; bottom:22px; left:0; right:0; z-index:5;
}

/* Portfolio */
.filter-btns .btn{border:1px solid var(--glass-border)}
.portfolio-item{transition:transform .25s ease, opacity .25s ease}
.portfolio-item:hover{transform:translateY(-4px)}

/* FAQ */
.accordion-button{background:#0e1624;color:var(--text);border:1px solid rgba(255,255,255,.06)}
.accordion-button:not(.collapsed){color:#0a0f1a;background:linear-gradient(135deg,var(--primary),var(--accent))}
.accordion-body{background:#0e1624;border:1px solid rgba(255,255,255,.06)}

/* Forms */
.form-control,.form-select{background:#0e1624;color:var(--text);border:1px solid rgba(255,255,255,.12)}
.form-control:focus{border-color:var(--primary);box-shadow:0 0 0 .25rem color-mix(in srgb, var(--primary) 25%, transparent)}

/* Footer */
footer{background:#0b1220}

/* Preloader + toTop */
#preloader{position:fixed;inset:0;display:grid;place-items:center;background:#0a0f1a;z-index:2000}
#preloader .spinner{width:52px;height:52px;border-radius:50%;border:3px solid rgba(255,255,255,.15);border-top-color:var(--primary);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#toTop{position:fixed;bottom:24px;right:24px;opacity:0;visibility:hidden;transition:.25s ease;z-index:999}
#toTop.show{opacity:1;visibility:visible}

/* Dropdown (look sombre flouté) */
.navbar .dropdown-menu{
  background: rgba(10,15,26,.96);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  backdrop-filter: blur(8px);
}
.navbar .dropdown-item{ color: var(--text); }
.navbar .dropdown-item:hover,
.navbar .dropdown-item.active{
  color:#061019;
  background: linear-gradient(135deg, var(--primary), var(--accent));
}

:root{
  --primary:#00aeef;
  --accent:#00adef;
  --dark:#0b1220;
  --muted:#93a4b5;
  --text:#e6eef6;
  --glass-border: rgba(255,255,255,.12);
  --gradient: radial-gradient(1200px 600px at 10% 10%, color-mix(in srgb, var(--primary) 30%, transparent), transparent 40%),
              radial-gradient(900px 500px at 90% 30%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 40%),
              linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.00));
}

html,body{height:100%}
body{background:#0a0f1a;color:var(--text);scroll-behavior:smooth}

/* Navbar */
.navbar{transition:background-color .3s ease, box-shadow .3s ease}
.navbar.translucent{background:rgba(10,15,26,.35);backdrop-filter:blur(8px)}
.navbar.scrolled{background:rgba(10,15,26,.92);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.nav-link{color:var(--text)!important;opacity:.9}
.nav-link:hover,.nav-link.active{color:var(--primary)!important;opacity:1}
.navbar-brand img{height:35px;width:auto}

/* Buttons & cards */
.btn-gradient{background:linear-gradient(135deg,var(--primary),var(--accent));border:0;color:#061019}
.btn-gradient:hover{filter:brightness(1.05);transform:translateY(-1px)}
.glass{background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid var(--glass-border);border-radius:20px;box-shadow:0 10px 40px rgba(0,0,0,.35);backdrop-filter:blur(10px)}
.feature-icon{width:54px;height:54px;display:grid;place-items:center;border-radius:14px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--primary) 25%, transparent), color-mix(in srgb, var(--accent) 25%, transparent))}

/* Sections */
section{padding:80px 0;position:relative}
.section-title .line{width:70px;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--primary),var(--accent));display:inline-block}
.lead-muted{color:var(--muted)}

/* Banners & Hero */
.banner{position:relative;display:grid;place-items:center;min-height:56vh;overflow:hidden}
.banner::before{content:"";position:absolute;inset:0;background:var(--gradient);opacity:.9}
.banner .stars{position:absolute;inset:-10%;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.5) 1px, transparent 1px);background-size:3px 3px;opacity:.08;animation:twinkle 8s linear infinite}
@keyframes twinkle{50%{opacity:.12}}
.banner .blob{position:absolute;filter:blur(40px);opacity:.28;border-radius:40%}
.banner .blob.b1{width:380px;height:380px;left:-60px;top:-60px;background:radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--primary) 55%, transparent), transparent 60%)}
.banner .blob.b2{width:440px;height:440px;right:-80px;bottom:-80px;background:radial-gradient(circle at 60% 60%, color-mix(in srgb, var(--accent) 55%, transparent), transparent 60%)}
.banner-sm{min-height:38vh}

.hero-title{font-weight:800}
.text-gradient{background:linear-gradient(135deg,var(--primary),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}

/* Special: index hero with slider as FILIGRANE under content */
.hero-filigrane{position:relative;min-height:88vh;display:flex;align-items:center;overflow:hidden}
.hero-filigrane .bg-slider{position:absolute;inset:0;z-index:0;opacity:.18;filter:blur(1px);pointer-events:none}
.hero-filigrane .bg-overlay{position:absolute;inset:0;background:var(--gradient);opacity:.95;z-index:1}
.hero-filigrane .content{position:relative;z-index:2}

/* Slides avec image */
.hero-slide{ position:relative; overflow:hidden; border-radius:20px; }
.hero-slide .slide-bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; transform:scale(1.03);
}
.hero-slide .slide-shade{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.25) 45%, rgba(0,0,0,0) 75%),
    radial-gradient(650px 450px at 85% 20%, color-mix(in srgb, var(--primary) 28%, transparent), transparent 60%);
}
.hero-slide .slide-content{ position:relative; z-index:2; }

/* Banner V1 (utilisé aussi sur les autres pages) */
.banner{
  position:relative; display:grid; place-items:center; min-height:56vh; overflow:hidden;
}
.banner::before{
  content:""; position:absolute; inset:0; background:var(--gradient); opacity:.9;
}
.banner .stars{
  position:absolute; inset:-10%; pointer-events:none;
  background-image: radial-gradient(rgba(255,255,255,.5) 1px, transparent 1px);
  background-size:3px 3px; opacity:.08; animation:twinkle 8s linear infinite;
}
@keyframes twinkle{ 50%{ opacity:.12; } }
.banner .blob{ position:absolute; filter:blur(40px); opacity:.28; border-radius:40%; }
.banner .blob.b1{ width:380px; height:380px; left:-60px; top:-60px;
  background:radial-gradient(circle at 30% 30%, rgba(14,165,233,.55), transparent 60%);
}
.banner .blob.b2{ width:440px; height:440px; right:-80px; bottom:-80px;
  background:radial-gradient(circle at 60% 60%, rgba(34,197,94,.55), transparent 60%);
}
.banner .hero-title{ font-weight:800; }

/* Carte verre + boutons */
.glass-card{
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12); border-radius:20px;
  box-shadow:0 10px 40px rgba(0,0,0,.35); backdrop-filter: blur(10px);
}
.btn-gradient{ background:linear-gradient(135deg, var(--primary), var(--accent)); border:0; color:#061019; }
.btn-gradient:hover{ filter:brightness(1.05); transform: translateY(-1px); }

/* ── COMPLÉMENT POUR LA SECTION COMMENTAIRES (image à gauche) ── */
.comments-img-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,12,24,.2) 0%, rgba(7,12,24,.6) 100%);
  border-radius: 0 0 24px 24px;
  pointer-events: none;
}
.pourquoi-img-block {
  border-radius: 24px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
  border: 1px solid rgba(255,255,255,.07);
  position: relative;
}

/* Responsive : empilement sur mobile */
@media (max-width: 992px) {
  .comments-content-block .row {
    flex-direction: column-reverse;
  }
  .comments-content-block .col-lg-6 {
    width: 100%;
  }
  .pourquoi-img-block {
    min-height: 280px !important;
    height: 280px !important;
  }
  .pourquoi-side-img {
    min-height: 280px !important;
  }
}

/* ============================================================
   HERO — vidéo locale en background plein écran (index.php)
   ============================================================ */
#hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
/* Wrapper vidéo couvre tout le hero */
#hero .hero-video-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
/* La vidéo YouTube couvre tout l'écran comme un background */
.hero-yt-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Oversized pour toujours couvrir, même sur grands écrans */
  width: max(177.78vh, 100%);
  height: max(56.25vw, 100%);
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.hero-yt-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  pointer-events: none;
}
/* Voile sombre uniforme pour lisibilité du texte sans bloquer la vidéo */
#hero .hero-video-shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    90deg,
    rgba(6,10,18,.70) 0%,
    rgba(6,10,18,.40) 40%,
    rgba(6,10,18,.30) 70%,
    rgba(6,10,18,.20) 100%
  );
}
/* Halo coloré côté droit */
#hero .hero-video-glow {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(
    600px 400px at 85% 30%,
    color-mix(in srgb, var(--accent) 22%, transparent),
    transparent 70%
  );
}
/* Points étoiles */
#hero .stars {
  position: absolute;
  inset: -10%;
  z-index: 4;
  pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.5) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity: .06;
  animation: twinkle 8s linear infinite;
}
/* Le contenu texte passe au-dessus de tout */
#hero .hero-content {
  position: relative;
  z-index: 5;
}

/* Hero Swiper */
.hero-swiper{ position:relative; width:100%; }
.hero-swiper, .hero-swiper .swiper-slide{ min-height: 56vh; }
@media (min-width: 992px){
  .hero-swiper, .hero-swiper .swiper-slide{ min-height: 88vh; }
}
.hero-slide{ position:relative; display:flex; align-items:center; }
.hero-slide .slide-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform: scale(1.06);
}
.hero-slide .slide-shade{
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(6,10,18,.78) 0%, rgba(6,10,18,.55) 45%, rgba(6,10,18,.10) 80%, transparent 100%);
}
.hero-slide .slide-content{ position:relative; z-index:2; }

.hero-swiper .swiper-pagination{
  position:absolute; bottom:22px; left:0; right:0; z-index:5;
}

/* Portfolio */
.filter-btns .btn{border:1px solid var(--glass-border)}
.portfolio-item{transition:transform .25s ease, opacity .25s ease}
.portfolio-item:hover{transform:translateY(-4px)}

/* FAQ */
.accordion-button{background:#0e1624;color:var(--text);border:1px solid rgba(255,255,255,.06)}
.accordion-button:not(.collapsed){color:#0a0f1a;background:linear-gradient(135deg,var(--primary),var(--accent))}
.accordion-body{background:#0e1624;border:1px solid rgba(255,255,255,.06)}

/* Forms */
.form-control,.form-select{background:#0e1624;color:var(--text);border:1px solid rgba(255,255,255,.12)}
.form-control:focus{border-color:var(--primary);box-shadow:0 0 0 .25rem color-mix(in srgb, var(--primary) 25%, transparent)}

/* Footer */
footer{background:#0b1220}

/* Preloader + toTop */
#preloader{position:fixed;inset:0;display:grid;place-items:center;background:#0a0f1a;z-index:2000}
#preloader .spinner{width:52px;height:52px;border-radius:50%;border:3px solid rgba(255,255,255,.15);border-top-color:var(--primary);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#toTop{position:fixed;bottom:24px;right:24px;opacity:0;visibility:hidden;transition:.25s ease;z-index:999}
#toTop.show{opacity:1;visibility:visible}

/* Dropdown (look sombre flouté) */
.navbar .dropdown-menu{
  background: rgba(10,15,26,.96);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  backdrop-filter: blur(8px);
}
.navbar .dropdown-item{ color: var(--text); }
.navbar .dropdown-item:hover,
.navbar .dropdown-item.active{
  color:#061019;
  background: linear-gradient(135deg, var(--primary), var(--accent));
}


:root{
  --primary:#00aeef;
  --accent:#00adef;
  --dark:#0b1220;
  --muted:#93a4b5;
  --text:#e6eef6;
  --glass-border: rgba(255,255,255,.12);
  --gradient: radial-gradient(1200px 600px at 10% 10%, color-mix(in srgb, var(--primary) 30%, transparent), transparent 40%),
              radial-gradient(900px 500px at 90% 30%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 40%),
              linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.00));
}

html,body{height:100%}
body{background:#0a0f1a;color:var(--text);scroll-behavior:smooth}

/* Navbar */
.navbar{transition:background-color .3s ease, box-shadow .3s ease}
.navbar.translucent{background:rgba(10,15,26,.35);backdrop-filter:blur(8px)}
.navbar.scrolled{background:rgba(10,15,26,.92);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.nav-link{color:var(--text)!important;opacity:.9}
.nav-link:hover,.nav-link.active{color:var(--primary)!important;opacity:1}
.navbar-brand img{height:35px;width:auto}

/* Buttons & cards */
.btn-gradient{background:linear-gradient(135deg,var(--primary),var(--accent));border:0;color:#061019}
.btn-gradient:hover{filter:brightness(1.05);transform:translateY(-1px)}
.glass{background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid var(--glass-border);border-radius:20px;box-shadow:0 10px 40px rgba(0,0,0,.35);backdrop-filter:blur(10px)}
.feature-icon{width:54px;height:54px;display:grid;place-items:center;border-radius:14px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--primary) 25%, transparent), color-mix(in srgb, var(--accent) 25%, transparent))}

/* Sections */
section{padding:80px 0;position:relative}
.section-title .line{width:70px;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--primary),var(--accent));display:inline-block}
.lead-muted{color:var(--muted)}

/* Banners & Hero */
.banner{position:relative;display:grid;place-items:center;min-height:56vh;overflow:hidden}
.banner::before{content:"";position:absolute;inset:0;background:var(--gradient);opacity:.9}
.banner .stars{position:absolute;inset:-10%;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.5) 1px, transparent 1px);background-size:3px 3px;opacity:.08;animation:twinkle 8s linear infinite}
@keyframes twinkle{50%{opacity:.12}}
.banner .blob{position:absolute;filter:blur(40px);opacity:.28;border-radius:40%}
.banner .blob.b1{width:380px;height:380px;left:-60px;top:-60px;background:radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--primary) 55%, transparent), transparent 60%)}
.banner .blob.b2{width:440px;height:440px;right:-80px;bottom:-80px;background:radial-gradient(circle at 60% 60%, color-mix(in srgb, var(--accent) 55%, transparent), transparent 60%)}
.banner-sm{min-height:38vh}

.hero-title{font-weight:800}
.text-gradient{background:linear-gradient(135deg,var(--primary),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}

/* Special: index hero with slider as FILIGRANE under content */
.hero-filigrane{position:relative;min-height:88vh;display:flex;align-items:center;overflow:hidden}
.hero-filigrane .bg-slider{position:absolute;inset:0;z-index:0;opacity:.18;filter:blur(1px);pointer-events:none}
.hero-filigrane .bg-overlay{position:absolute;inset:0;background:var(--gradient);opacity:.95;z-index:1}
.hero-filigrane .content{position:relative;z-index:2}

/* Slides avec image */
.hero-slide{ position:relative; overflow:hidden; border-radius:20px; }
.hero-slide .slide-bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; transform:scale(1.03);
}
.hero-slide .slide-shade{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.25) 45%, rgba(0,0,0,0) 75%),
    radial-gradient(650px 450px at 85% 20%, color-mix(in srgb, var(--primary) 28%, transparent), transparent 60%);
}
.hero-slide .slide-content{ position:relative; z-index:2; }

/* Banner V1 (utilisé aussi sur les autres pages) */
.banner{
  position:relative; display:grid; place-items:center; min-height:56vh; overflow:hidden;
}
.banner::before{
  content:""; position:absolute; inset:0; background:var(--gradient); opacity:.9;
}
.banner .stars{
  position:absolute; inset:-10%; pointer-events:none;
  background-image: radial-gradient(rgba(255,255,255,.5) 1px, transparent 1px);
  background-size:3px 3px; opacity:.08; animation:twinkle 8s linear infinite;
}
@keyframes twinkle{ 50%{ opacity:.12; } }
.banner .blob{ position:absolute; filter:blur(40px); opacity:.28; border-radius:40%; }
.banner .blob.b1{ width:380px; height:380px; left:-60px; top:-60px;
  background:radial-gradient(circle at 30% 30%, rgba(14,165,233,.55), transparent 60%);
}
.banner .blob.b2{ width:440px; height:440px; right:-80px; bottom:-80px;
  background:radial-gradient(circle at 60% 60%, rgba(34,197,94,.55), transparent 60%);
}
.banner .hero-title{ font-weight:800; }

/* Carte verre + boutons */
.glass-card{
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12); border-radius:20px;
  box-shadow:0 10px 40px rgba(0,0,0,.35); backdrop-filter: blur(10px);
}
.btn-gradient{ background:linear-gradient(135deg, var(--primary), var(--accent)); border:0; color:#061019; }
.btn-gradient:hover{ filter:brightness(1.05); transform: translateY(-1px); }

/* ============================================================
   HERO — vidéo YouTube full-screen (index.php + about.php)
   ============================================================ */
#hero,
#hero-about {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
/* Wrapper vidéo couvre tout le hero */
#hero .hero-video-bg,
#hero-about .hero-video-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
/* YouTube iframe cover trick */
.hero-yt-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(177.78vh, 100%);
  height: max(56.25vw, 100%);
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.hero-yt-wrapper iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: none;
  pointer-events: none;
}
/* Voile sombre uniforme pour lisibilité */
#hero .hero-video-shade,
#hero-about .hero-video-shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    90deg,
    rgba(6,10,18,.70) 0%,
    rgba(6,10,18,.40) 40%,
    rgba(6,10,18,.30) 70%,
    rgba(6,10,18,.20) 100%
  );
}
/* Halo coloré côté droit */
#hero .hero-video-glow,
#hero-about .hero-video-glow {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(
    600px 400px at 85% 30%,
    color-mix(in srgb, var(--accent) 22%, transparent),
    transparent 70%
  );
}
/* Grille décorative */
.hero-grid-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 60px 60px;
}
/* Points étoiles */
#hero .stars,
#hero-about .stars {
  position: absolute;
  inset: -10%;
  z-index: 4;
  pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.5) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity: .06;
  animation: twinkle 8s linear infinite;
}
/* Le contenu texte passe au-dessus de tout */
#hero .hero-content,
#hero-about .hero-content {
  position: relative;
  z-index: 5;
}
/* Hero badge */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,174,239,.12);
  border: 1px solid rgba(0,174,239,.3);
  border-radius: 50px;
  padding: 6px 16px;
  font-size: .85rem;
  color: var(--primary);
  letter-spacing: .03em;
}
.badge-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 8px var(--primary);
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot { 50% { opacity: .4; } }
/* Hero mini stats */
.hero-mini-stats { gap: 24px; }
.hero-mini-stat .stat-value { font-size: 1.6rem; font-weight: 900; line-height: 1; }
.hero-mini-stat .stat-label { font-size: .75rem; color: var(--muted); margin-top: 3px; }
.hero-mini-sep { width: 1px; height: 36px; background: rgba(255,255,255,.12); }
.min-vh-hero { min-height: 80vh; }
/* Scroll arrow */
.hero-scroll-arrow {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
}
.hero-scroll-arrow a {
  color: rgba(255,255,255,.4);
  font-size: 1.4rem;
  animation: bounce-down 2s ease-in-out infinite;
  text-decoration: none;
}
@keyframes bounce-down { 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }
/* Bouton glass */
.btn-glass {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.15);
  color: var(--text);
  backdrop-filter: blur(6px);
}
.btn-glass:hover {
  background: rgba(255,255,255,.12);
  color: #fff;
}
.btn-hero { border-radius: 12px; font-weight: 600; }
/* Feature icon sm */
.feature-icon-sm {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 12px;
  flex-shrink: 0;
}

/* ============================================================
   ABOUT PAGE — sections spécifiques
   ============================================================ */
.section-eyebrow {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--primary);
  opacity: .9;
}
/* Checklist mission */
.about-checklist { list-style: none; padding: 0; }
.about-checklist li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-size: .95rem;
}
.about-checklist li:last-child { border-bottom: none; }
.about-checklist i { color: #10b981; font-size: 1.1rem; flex-shrink: 0; }
/* Certifications badges */
.badge-cert {
  background: rgba(0,174,239,.12);
  border: 1px solid rgba(0,174,239,.25);
  color: var(--primary);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: .72rem;
  font-weight: 600;
}
/* Progress bar about */
.about-bar {
  height: 5px;
  background: rgba(255,255,255,.08);
  border-radius: 10px;
  overflow: hidden;
}
.about-bar-fill {
  height: 100%;
  border-radius: 10px;
  transition: width 1.2s ease;
}
/* Stats section */
.about-stats-section {
  background: linear-gradient(180deg, rgba(0,174,239,.04) 0%, transparent 100%);
  border-top: 1px solid rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.about-stat-val { font-size: 1.8rem; }
/* Value cards hover */
.about-value-card, .about-expertise-card {
  transition: transform .25s ease, box-shadow .25s ease;
}
.about-value-card:hover, .about-expertise-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 50px rgba(0,0,0,.4);
}
.about-link-arrow { font-size: .85rem; font-weight: 600; }
/* Team cards */
.about-team-avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  border: 2px solid;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.05);
}
.about-team-card { transition: transform .25s ease; }
.about-team-card:hover { transform: translateY(-4px); }
/* CTA section */
.about-cta-section .glass-card {
  background: linear-gradient(135deg, rgba(0,174,239,.08), rgba(139,92,246,.08));
  border-color: rgba(0,174,239,.2);
}

/* Hero Swiper */
.hero-swiper{ position:relative; width:100%; }
.hero-swiper, .hero-swiper .swiper-slide{ min-height: 56vh; }
@media (min-width: 992px){
  .hero-swiper, .hero-swiper .swiper-slide{ min-height: 88vh; }
}
.hero-slide{ position:relative; display:flex; align-items:center; }
.hero-slide .slide-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform: scale(1.06);
}
.hero-slide .slide-shade{
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(6,10,18,.78) 0%, rgba(6,10,18,.55) 45%, rgba(6,10,18,.10) 80%, transparent 100%);
}
.hero-slide .slide-content{ position:relative; z-index:2; }

.hero-swiper .swiper-pagination{
  position:absolute; bottom:22px; left:0; right:0; z-index:5;
}

/* Portfolio */
.filter-btns .btn{border:1px solid var(--glass-border)}
.portfolio-item{transition:transform .25s ease, opacity .25s ease}
.portfolio-item:hover{transform:translateY(-4px)}

/* FAQ */
.accordion-button{background:#0e1624;color:var(--text);border:1px solid rgba(255,255,255,.06)}
.accordion-button:not(.collapsed){color:#0a0f1a;background:linear-gradient(135deg,var(--primary),var(--accent))}
.accordion-body{background:#0e1624;border:1px solid rgba(255,255,255,.06)}

/* Forms */
.form-control,.form-select{background:#0e1624;color:var(--text);border:1px solid rgba(255,255,255,.12)}
.form-control:focus{border-color:var(--primary);box-shadow:0 0 0 .25rem color-mix(in srgb, var(--primary) 25%, transparent)}

/* Footer */
footer{background:#0b1220}

/* Preloader + toTop */
#preloader{position:fixed;inset:0;display:grid;place-items:center;background:#0a0f1a;z-index:2000}
#preloader .spinner{width:52px;height:52px;border-radius:50%;border:3px solid rgba(255,255,255,.15);border-top-color:var(--primary);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#toTop{position:fixed;bottom:24px;right:24px;opacity:0;visibility:hidden;transition:.25s ease;z-index:999}
#toTop.show{opacity:1;visibility:visible}

/* Dropdown (look sombre flouté) */
.navbar .dropdown-menu{
  background: rgba(10,15,26,.96);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  backdrop-filter: blur(8px);
}
.navbar .dropdown-item{ color: var(--text); }
.navbar .dropdown-item:hover,
.navbar .dropdown-item.active{
  color:#061019;
  background: linear-gradient(135deg, var(--primary), var(--accent));
}



:root{
  --primary:#00aeef;
  --accent:#00adef;
  --dark:#0b1220;
  --muted:#93a4b5;
  --text:#e6eef6;
  --glass-border: rgba(255,255,255,.12);
  --gradient: radial-gradient(1200px 600px at 10% 10%, color-mix(in srgb, var(--primary) 30%, transparent), transparent 40%),
              radial-gradient(900px 500px at 90% 30%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 40%),
              linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.00));
}

html,body{height:100%}
body{background:#0a0f1a;color:var(--text);scroll-behavior:smooth}

/* Navbar */
.navbar{transition:background-color .3s ease, box-shadow .3s ease}
.navbar.translucent{background:rgba(10,15,26,.35);backdrop-filter:blur(8px)}
.navbar.scrolled{background:rgba(10,15,26,.92);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.nav-link{color:var(--text)!important;opacity:.9}
.nav-link:hover,.nav-link.active{color:var(--primary)!important;opacity:1}
.navbar-brand img{height:35px;width:auto}

/* Buttons & cards */
.btn-gradient{background:linear-gradient(135deg,var(--primary),var(--accent));border:0;color:#061019}
.btn-gradient:hover{filter:brightness(1.05);transform:translateY(-1px)}
.glass{background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid var(--glass-border);border-radius:20px;box-shadow:0 10px 40px rgba(0,0,0,.35);backdrop-filter:blur(10px)}
.feature-icon{width:54px;height:54px;display:grid;place-items:center;border-radius:14px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--primary) 25%, transparent), color-mix(in srgb, var(--accent) 25%, transparent))}

/* Sections */
section{padding:80px 0;position:relative}
.section-title .line{width:70px;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--primary),var(--accent));display:inline-block}
.lead-muted{color:var(--muted)}

/* Banners & Hero */
.banner{position:relative;display:grid;place-items:center;min-height:56vh;overflow:hidden}
.banner::before{content:"";position:absolute;inset:0;background:var(--gradient);opacity:.9}
.banner .stars{position:absolute;inset:-10%;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.5) 1px, transparent 1px);background-size:3px 3px;opacity:.08;animation:twinkle 8s linear infinite}
@keyframes twinkle{50%{opacity:.12}}
.banner .blob{position:absolute;filter:blur(40px);opacity:.28;border-radius:40%}
.banner .blob.b1{width:380px;height:380px;left:-60px;top:-60px;background:radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--primary) 55%, transparent), transparent 60%)}
.banner .blob.b2{width:440px;height:440px;right:-80px;bottom:-80px;background:radial-gradient(circle at 60% 60%, color-mix(in srgb, var(--accent) 55%, transparent), transparent 60%)}
.banner-sm{min-height:38vh}

.hero-title{font-weight:800}
.text-gradient{background:linear-gradient(135deg,var(--primary),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}

/* Special: index hero with slider as FILIGRANE under content */
.hero-filigrane{position:relative;min-height:88vh;display:flex;align-items:center;overflow:hidden}
.hero-filigrane .bg-slider{position:absolute;inset:0;z-index:0;opacity:.18;filter:blur(1px);pointer-events:none}
.hero-filigrane .bg-overlay{position:absolute;inset:0;background:var(--gradient);opacity:.95;z-index:1}
.hero-filigrane .content{position:relative;z-index:2}

/* Slides avec image */
.hero-slide{ position:relative; overflow:hidden; border-radius:20px; }
.hero-slide .slide-bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; transform:scale(1.03);
}
.hero-slide .slide-shade{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.25) 45%, rgba(0,0,0,0) 75%),
    radial-gradient(650px 450px at 85% 20%, color-mix(in srgb, var(--primary) 28%, transparent), transparent 60%);
}
.hero-slide .slide-content{ position:relative; z-index:2; }

/* Banner V1 (utilisé aussi sur les autres pages) */
.banner{
  position:relative; display:grid; place-items:center; min-height:56vh; overflow:hidden;
}
.banner::before{
  content:""; position:absolute; inset:0; background:var(--gradient); opacity:.9;
}
.banner .stars{
  position:absolute; inset:-10%; pointer-events:none;
  background-image: radial-gradient(rgba(255,255,255,.5) 1px, transparent 1px);
  background-size:3px 3px; opacity:.08; animation:twinkle 8s linear infinite;
}
@keyframes twinkle{ 50%{ opacity:.12; } }
.banner .blob{ position:absolute; filter:blur(40px); opacity:.28; border-radius:40%; }
.banner .blob.b1{ width:380px; height:380px; left:-60px; top:-60px;
  background:radial-gradient(circle at 30% 30%, rgba(14,165,233,.55), transparent 60%);
}
.banner .blob.b2{ width:440px; height:440px; right:-80px; bottom:-80px;
  background:radial-gradient(circle at 60% 60%, rgba(34,197,94,.55), transparent 60%);
}
.banner .hero-title{ font-weight:800; }

/* Carte verre + boutons */
.glass-card{
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12); border-radius:20px;
  box-shadow:0 10px 40px rgba(0,0,0,.35); backdrop-filter: blur(10px);
}
.btn-gradient{ background:linear-gradient(135deg, var(--primary), var(--accent)); border:0; color:#061019; }
.btn-gradient:hover{ filter:brightness(1.05); transform: translateY(-1px); }

/* ============================================================
   HERO — vidéo YouTube full-screen (index.php + about.php)
   ============================================================ */
#hero,
#hero-about,
#hero-formation {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
/* Wrapper vidéo couvre tout le hero */
#hero .hero-video-bg,
#hero-about .hero-video-bg,
#hero-formation .hero-video-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
/* YouTube iframe cover trick */
.hero-yt-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(177.78vh, 100%);
  height: max(56.25vw, 100%);
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.hero-yt-wrapper iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: none;
  pointer-events: none;
}
/* Voile sombre uniforme pour lisibilité */
#hero .hero-video-shade,
#hero-about .hero-video-shade,
#hero-formation .hero-video-shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    90deg,
    rgba(6,10,18,.70) 0%,
    rgba(6,10,18,.40) 40%,
    rgba(6,10,18,.30) 70%,
    rgba(6,10,18,.20) 100%
  );
}
/* Halo coloré côté droit */
#hero .hero-video-glow,
#hero-about .hero-video-glow,
#hero-formation .hero-video-glow {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(
    600px 400px at 85% 30%,
    color-mix(in srgb, var(--accent) 22%, transparent),
    transparent 70%
  );
}
/* Grille décorative */
.hero-grid-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 60px 60px;
}
/* Points étoiles */
#hero .stars,
#hero-about .stars,
#hero-formation .stars {
  position: absolute;
  inset: -10%;
  z-index: 4;
  pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.5) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity: .06;
  animation: twinkle 8s linear infinite;
}
/* Le contenu texte passe au-dessus de tout */
#hero .hero-content,
#hero-about .hero-content,
#hero-formation .hero-content {
  position: relative;
  z-index: 5;
}
/* Hero badge */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,174,239,.12);
  border: 1px solid rgba(0,174,239,.3);
  border-radius: 50px;
  padding: 6px 16px;
  font-size: .85rem;
  color: var(--primary);
  letter-spacing: .03em;
}
.badge-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 8px var(--primary);
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot { 50% { opacity: .4; } }
/* Hero mini stats */
.hero-mini-stats { gap: 24px; }
.hero-mini-stat .stat-value { font-size: 1.6rem; font-weight: 900; line-height: 1; }
.hero-mini-stat .stat-label { font-size: .75rem; color: var(--muted); margin-top: 3px; }
.hero-mini-sep { width: 1px; height: 36px; background: rgba(255,255,255,.12); }
.min-vh-hero { min-height: 80vh; }
/* Scroll arrow */
.hero-scroll-arrow {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
}
.hero-scroll-arrow a {
  color: rgba(255,255,255,.4);
  font-size: 1.4rem;
  animation: bounce-down 2s ease-in-out infinite;
  text-decoration: none;
}
@keyframes bounce-down { 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }
/* Bouton glass */
.btn-glass {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.15);
  color: var(--text);
  backdrop-filter: blur(6px);
}
.btn-glass:hover {
  background: rgba(255,255,255,.12);
  color: #fff;
}
.btn-hero { border-radius: 12px; font-weight: 600; }
/* Feature icon sm */
.feature-icon-sm {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 12px;
  flex-shrink: 0;
}

/* ============================================================
   ABOUT PAGE — sections spécifiques
   ============================================================ */
.section-eyebrow {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--primary);
  opacity: .9;
}
/* Checklist mission */
.about-checklist { list-style: none; padding: 0; }
.about-checklist li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-size: .95rem;
}
.about-checklist li:last-child { border-bottom: none; }
.about-checklist i { color: #10b981; font-size: 1.1rem; flex-shrink: 0; }
/* Certifications badges */
.badge-cert {
  background: rgba(0,174,239,.12);
  border: 1px solid rgba(0,174,239,.25);
  color: var(--primary);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: .72rem;
  font-weight: 600;
}
/* Progress bar about */
.about-bar {
  height: 5px;
  background: rgba(255,255,255,.08);
  border-radius: 10px;
  overflow: hidden;
}
.about-bar-fill {
  height: 100%;
  border-radius: 10px;
  transition: width 1.2s ease;
}
/* Stats section */
.about-stats-section {
  background: linear-gradient(180deg, rgba(0,174,239,.04) 0%, transparent 100%);
  border-top: 1px solid rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.about-stat-val { font-size: 1.8rem; }
/* Value cards hover */
.about-value-card, .about-expertise-card {
  transition: transform .25s ease, box-shadow .25s ease;
}
.about-value-card:hover, .about-expertise-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 50px rgba(0,0,0,.4);
}
.about-link-arrow { font-size: .85rem; font-weight: 600; }
/* Team cards */
.about-team-avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  border: 2px solid;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.05);
}
.about-team-card { transition: transform .25s ease; }
.about-team-card:hover { transform: translateY(-4px); }
/* CTA section */
.about-cta-section .glass-card {
  background: linear-gradient(135deg, rgba(0,174,239,.08), rgba(139,92,246,.08));
  border-color: rgba(0,174,239,.2);
}

/* Hero Swiper */
.hero-swiper{ position:relative; width:100%; }
.hero-swiper, .hero-swiper .swiper-slide{ min-height: 56vh; }
@media (min-width: 992px){
  .hero-swiper, .hero-swiper .swiper-slide{ min-height: 88vh; }
}
.hero-slide{ position:relative; display:flex; align-items:center; }
.hero-slide .slide-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform: scale(1.06);
}
.hero-slide .slide-shade{
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(6,10,18,.78) 0%, rgba(6,10,18,.55) 45%, rgba(6,10,18,.10) 80%, transparent 100%);
}
.hero-slide .slide-content{ position:relative; z-index:2; }

.hero-swiper .swiper-pagination{
  position:absolute; bottom:22px; left:0; right:0; z-index:5;
}

/* Portfolio */
.filter-btns .btn{border:1px solid var(--glass-border)}
.portfolio-item{transition:transform .25s ease, opacity .25s ease}
.portfolio-item:hover{transform:translateY(-4px)}

/* FAQ */
.accordion-button{background:#0e1624;color:var(--text);border:1px solid rgba(255,255,255,.06)}
.accordion-button:not(.collapsed){color:#0a0f1a;background:linear-gradient(135deg,var(--primary),var(--accent))}
.accordion-body{background:#0e1624;border:1px solid rgba(255,255,255,.06)}

/* Forms */
.form-control,.form-select{background:#0e1624;color:var(--text);border:1px solid rgba(255,255,255,.12)}
.form-control:focus{border-color:var(--primary);box-shadow:0 0 0 .25rem color-mix(in srgb, var(--primary) 25%, transparent)}

/* Footer */
footer{background:#0b1220}

/* Preloader + toTop */
#preloader{position:fixed;inset:0;display:grid;place-items:center;background:#0a0f1a;z-index:2000}
#preloader .spinner{width:52px;height:52px;border-radius:50%;border:3px solid rgba(255,255,255,.15);border-top-color:var(--primary);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#toTop{position:fixed;bottom:24px;right:24px;opacity:0;visibility:hidden;transition:.25s ease;z-index:999}
#toTop.show{opacity:1;visibility:visible}

/* Dropdown (look sombre flouté) */
.navbar .dropdown-menu{
  background: rgba(10,15,26,.96);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  backdrop-filter: blur(8px);
}
.navbar .dropdown-item{ color: var(--text); }
.navbar .dropdown-item:hover,
.navbar .dropdown-item.active{
  color:#061019;
  background: linear-gradient(135deg, var(--primary), var(--accent));
}