/* ===== RESET ===== */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  background:#050816;
  color:#E5E7EB;
  line-height:1.6;
}

.container{
  max-width:1200px;
  margin:auto;
  padding:0 24px;
}

/* ===== HEADER GLASS PREMIUM ===== */
header{
  position:fixed;
  top:0;
  width:100%;
  backdrop-filter:blur(20px);
  background:rgba(10,15,30,0.7);
  border-bottom:1px solid rgba(255,255,255,0.05);
  z-index:1000;
}

header .container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 24px;
}

nav ul{
  display:flex;
  gap:28px;
  list-style:none;
  align-items:center;
}

nav ul li a{
  color:#D1D5DB;
  text-decoration:none;
  font-weight:500;
  transition:0.3s;
}

nav ul li a:hover{
  color:#7C3AED;
}

/* Téléphone dans la navigation
   Le lien click‑to‑call doit être clairement visible mais ne pas détourner
   l’attention des offres. On le stylise comme un lien standard et on lui
   ajoute un poids de police légèrement supérieur pour améliorer la lisibilité. */
.nav-phone .phone-link{
  color:#D1D5DB;
  font-weight:500;
  text-decoration:none;
}

.nav-phone .phone-link:hover{
  color:#7C3AED;
}

/* Lien téléphone dans le menu mobile */
.mobile-phone{
  display:block;
  padding:10px 0;
  color:#D1D5DB;
  font-weight:500;
  text-decoration:none;
}
.mobile-phone:hover{
  color:#7C3AED;
}

.btn-header{
  background:linear-gradient(135deg,#7C3AED,#4F46E5);
  padding:10px 20px;
  border-radius:999px;
  color:#fff !important;
  font-weight:600;
}

/* ===== HERO ===== */
.hero{
  padding:160px 0 120px;
  position:relative;
  overflow:hidden;
}

.hero::before{
  content:"";
  position:absolute;
  width:600px;
  height:600px;
  background:radial-gradient(circle,#7C3AED33,transparent 70%);
  top:-200px;
  left:-200px;
  z-index:0;
}

.hero-container{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:60px;
  position:relative;
  z-index:2;
}

.hero h1{
  font-size:3.5rem;
  font-weight:800;
  line-height:1.1;
}

.gradient-text{
  background:linear-gradient(135deg,#7C3AED,#4F46E5);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.hero-subtitle{
  margin:24px 0;
  color:#9CA3AF;
}

.hero-buttons{
  display:flex;
  gap:20px;
  margin-bottom:20px;
}

.btn-primary{
  background:linear-gradient(135deg,#7C3AED,#4F46E5);
  padding:14px 28px;
  border-radius:999px;
  text-decoration:none;
  color:#fff;
  font-weight:600;
  transition:0.3s;
}

.btn-primary:hover{
  transform:translateY(-3px);
  box-shadow:0 15px 35px rgba(124,58,237,0.4);
}

.btn-secondary{
  border:1px solid rgba(255,255,255,0.2);
  padding:14px 28px;
  border-radius:999px;
  text-decoration:none;
  color:#fff;
}

/* ===== AUTHORITY ===== */
.authority{
  padding:60px 0;
  border-top:1px solid rgba(255,255,255,0.05);
  border-bottom:1px solid rgba(255,255,255,0.05);
}

.authority-grid{
  display:flex;
  justify-content:space-between;
  text-align:center;
  font-weight:600;
}

/* ===== SECTIONS ===== */
.section{
  padding:120px 0;
}

.section.alt{
  background:#0B1222;
}

h2{
  font-size:2.5rem;
  margin-bottom:60px;
}

/* ===== GRID ===== */
.grid-3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
}

.grid-2{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:40px;
}

/* ===== CARDS ===== */
.card{
  background:#111827;
  padding:40px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,0.05);
  transition:0.4s;
}

.card:hover{
  transform:translateY(-8px);
  border-color:#7C3AED;
}

.price{
  font-size:5rem;
  font-weight:800;
  background:linear-gradient(135deg,#7C3AED,#4F46E5);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  margin:40px 0;
}

/* ===== FINAL CTA ===== */

.center{
  text-align:center;
}

/* ===== RESPONSIVE ===== */
@media(max-width:900px){
  .hero-container{
    grid-template-columns:1fr;
  }
  .grid-3,
  .grid-2{
    grid-template-columns:1fr;
  }
}

.header-container{
  display:flex;
  justify-content:space-between;
  align-items:center;
}





.menu-toggle{
  display:none;
  background:none;
  border:none;
  font-size:1.8rem;
  color:#fff;
}

@media(max-width:900px){
  .nav ul{
    position:absolute;
    top:80px;
    right:0;
    background:#0B1222;
    flex-direction:column;
    padding:30px;
    width:100%;
    display:none;
  }

  .nav ul.active{
    display:flex;
  }

  .menu-toggle{
    display:block;
  }
}

/* ===== CASE STUDY ===== */

.case-study{
  padding:120px 0;
  background:#0a0f1f;
}

.case-container{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}

.case-tag{
  display:inline-block;
  padding:6px 14px;
  border-radius:20px;
  background:rgba(124,58,237,0.15);
  color:#7c3aed;
  font-size:14px;
  margin-bottom:20px;
}

.case-text h2{
  font-size:48px;
  margin-bottom:20px;
}

.case-text p{
  color:#9ca3af;
  margin-bottom:25px;
  line-height:1.6;
}

.case-points{
  list-style:none;
  padding:0;
  margin-bottom:30px;
}

.case-points li{
  margin-bottom:8px;
  color:#e5e7eb;
}

.case-visual{
  position:relative;
}

.case-visual img{
  width:100%;
  border-radius:20px;
  box-shadow:0 30px 80px rgba(124,58,237,0.2);
  transition:transform .6s ease;
}

.case-visual img:hover{
  transform:scale(1.03);
}

@media(max-width:900px){
  .case-container{
    grid-template-columns:1fr;
  }
}


.btn-header:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 25px rgba(124,58,237,0.4);
}

.success-story{
  padding:140px 0;
  background:#0f172a;
}

.success-container{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
}

.success-badge{
  display:inline-block;
  padding:6px 16px;
  border-radius:30px;
  background:rgba(124,58,237,0.2);
  color:#7c3aed;
  margin-bottom:20px;
}

.success-metrics{
  display:flex;
  gap:40px;
  margin:30px 0;
}

.success-metrics strong{
  font-size:28px;
  color:#7c3aed;
}

.success-right img{
  width:100%;
  border-radius:20px;
  box-shadow:0 40px 100px rgba(124,58,237,0.25);
  transition:.5s;
}

.success-right img:hover{
  transform:scale(1.03);
}

body{
  margin:0;
  font-family: 'Inter', sans-serif;
  background:#0a0f1f;
  color:#e5e7eb;
}




.hero {
  position: relative;
  background: radial-gradient(circle at 20% 40%, rgba(124,92,255,0.15), transparent 60%),
              #050816;
  padding: 120px 0;
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(124,92,255,0.2), transparent 70%);
  top: -200px;
  right: -200px;
  filter: blur(120px);
}
/* ============================= */
/* SUCCESS STORY */
/* ============================= */

.success-story {
  padding: 120px 0;
  background: #070b1a;
}

.success-container {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  align-items: center;
}

.success-badge {
  display: inline-block;
  background: rgba(124,92,255,0.15);
  color: #7C5CFF;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.85rem;
  margin-bottom: 20px;
}

.success-metrics {
  display: flex;
  gap: 40px;
  margin: 30px 0;
}

.success-metrics div {
  text-align: left;
}

.success-metrics strong {
  font-size: 1.5rem;
  color: #7C5CFF;
}

.success-right img {
  width: 100%;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  transition: 0.4s;
}

.success-right img:hover {
  transform: translateY(-10px);
}


.authority {
  padding: 80px 0;
  background: #060914;
  text-align: center;
}

.authority-grid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}

.authority .counter {
  font-size: 2rem;
  font-weight: 700;
  color: #7C5CFF;
}


/* ============================= */
/* SUCCESS STORY (ENERGYWELL)     */
/* ============================= */

.success-story{
  padding: 110px 0;
  background: radial-gradient(circle at 20% 30%, rgba(124,92,255,0.10), transparent 55%),
              #070b1a;
  border-top: 1px solid rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.success-container{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 70px;
  align-items: center;
}

.success-left h2{
  margin: 14px 0 18px;
  font-size: 54px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #fff;
}

.success-left p{
  color: rgba(255,255,255,0.78);
  font-size: 18px;
  line-height: 1.7;
  margin: 0 0 14px;
  max-width: 560px;
}

.success-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #cbbcff;
  background: rgba(124,92,255,0.14);
  border: 1px solid rgba(124,92,255,0.22);
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

.success-features{
  list-style: none;
  padding: 0;
  margin: 22px 0 26px;
  display: grid;
  gap: 10px;
}

.success-features li{
  color: rgba(255,255,255,0.82);
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.success-features li::before{
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #7C5CFF;
  box-shadow: 0 0 18px rgba(124,92,255,0.7);
  flex: 0 0 9px;
}

.success-right{
  position: relative;
}

.success-right a{
  display: block;
  border-radius: 22px;
}

.success-right img{
  width: 100%;
  display: block;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 25px 70px rgba(0,0,0,0.55);
  transform: translateZ(0);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.success-right::after{
  content:"";
  position: absolute;
  inset: -25px;
  background: radial-gradient(circle at 50% 40%, rgba(124,92,255,0.18), transparent 60%);
  filter: blur(40px);
  z-index: -1;
  opacity: 0.9;
}

.success-right img:hover{
  transform: translateY(-10px);
  box-shadow: 0 35px 90px rgba(0,0,0,0.65);
}

/* Responsive */
@media (max-width: 980px){
  .success-container{
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .success-left h2{
    font-size: 42px;
  }
}

.success-left a:not(.btn-primary){
  color: #7C5CFF;
  text-decoration: none;
  font-weight: 600;
  opacity: 0.9;
}

.success-left a:not(.btn-primary):hover{
  opacity: 1;
  text-decoration: underline;
}

/* ===============================
   STICKY CTA PREMIUM
================================ */

.sticky-cta{
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 999;
}

.sticky-btn{
  display: inline-block;
  background: linear-gradient(135deg,#7c3aed,#5b21b6);
  color: #fff;
  padding: 14px 26px;
  border-radius: 50px;
  
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(124,58,237,0.4);
  transition: all 0.3s ease;
}

.sticky-btn:hover{
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(124,58,237,0.6);
}
  
  
  @keyframes pulseGlow {
  0% { box-shadow: 0 0 0 0 rgba(124,58,237,0.6); }
  70% { box-shadow: 0 0 0 15px rgba(124,58,237,0); }
  100% { box-shadow: 0 0 0 0 rgba(124,58,237,0); }
}

.sticky-btn{
  animation: pulseGlow 2.5s infinite;
}

.sticky-cta.hidden{
  opacity: 0;
  transform: translateY(30px);
  pointer-events: none;
}

.project img {
  width: 100%;
  max-height: 350px;      /* limite la hauteur */
  object-fit: cover;      /* coupe proprement sans déformer */
  border-radius: 12px;
}
.project img {
  width: 100%;
  height: 280px;
  object-fit: cover;
}


.hero-visual img {
  width: 100%;
  height: 100%;
  max-height: 600px;   /* limite la hauteur */
  object-fit: cover;
}


.hero-visual {
  height: 80vh;
  overflow: hidden;
}

.hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}



.project-content {
  padding-top: 15px;
}

.project-badge {
  display: inline-block;
  font-size: 0.75rem;
  padding: 4px 10px;
  border-radius: 20px;
  margin-top: 6px;
}

.project-badge.premium {
  background: linear-gradient(135deg, #7b5cff, #5e3df5);
  color: white;
}

.project-badge.standard {
  background: rgba(255,255,255,0.1);
  color: #aaa;
}

.featured-project {
  transform: scale(1.02);
}


.hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}



.hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(10, 10, 25, 0.4),
    rgba(10, 10, 25, 0.2)
  );
}

.hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}



.hero-visual img {
  transform: scale(1.05);
}

.hero {
  position: relative;
  background: radial-gradient(circle at 20% 30%, rgba(124,92,255,0.15), transparent 55%),
              #050816;
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(124,92,255,0.2), transparent 70%);
  top: -200px;
  right: -200px;
  filter: blur(120px);
}
.hero h1 {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.gradient-text {
  background: linear-gradient(135deg,#7C5CFF,#5A3DFF);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hero-visual {
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(0,0,0,0.6);
  transform: translateY(10px);
  transition: 0.4s ease;
}

.hero-visual:hover {
  transform: translateY(0px);
}
.authority-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 40px;
  text-align: center;
}

.authority-grid div {
  background: #0f172a;
  padding: 30px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.05);
  transition: 0.3s;
}

.authority-grid div:hover {
  transform: translateY(-6px);
  border-color: #7C5CFF;
}


.price {
  font-size: 5rem;
  font-weight: 800;
  background: linear-gradient(135deg,#7C5CFF,#5A3DFF);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  margin: 30px 0;
}

.offer-highlights {
  list-style: none;
  padding: 0;
  margin: 20px 0 30px;
}

.offer-highlights li {
  margin: 10px 0;
  font-size: 1.1rem;
}
.offer-badge {
  display:inline-block;
  background: rgba(124,92,255,0.15);
  color:#7C5CFF;
  padding:8px 16px;
  border-radius:999px;
  margin-bottom:20px;
  font-size:0.9rem;
}
.success-story {
  background: radial-gradient(circle at 20% 30%, rgba(124,92,255,0.1), transparent 55%),
              #070b1a;
}

.success-left h2 {
  font-size: 3rem;
  margin-bottom: 20px;
}

.success-right img {
  border-radius: 22px;
  box-shadow: 0 25px 80px rgba(0,0,0,0.6);
}
.final {
  padding: 160px 0;
  background: linear-gradient(135deg,#0B1222,#050816);
}

.final h2 {
  font-size: 2.5rem;
  margin-bottom: 30px;
}

.final .btn-primary {
  font-size: 1.2rem;
  padding: 20px 40px;
}
@media(max-width:768px){

.hero-visual{
  display:none;
}

.section{
  padding:70px 0;
}

h2{
  font-size:1.8rem;
}

}

.offer-badge {
  display:inline-block;
  margin:20px 0 10px;
  padding:8px 18px;
  font-size:14px;
  font-weight:600;
  border-radius:30px;
  background:linear-gradient(135deg,#7C5CFF,#5A3DFF);
  color:#fff;
  box-shadow:0 10px 25px rgba(124,92,255,0.4);
}

.hero-proof {
  margin-top:25px;
  display:flex;
  align-items:center;
  gap:12px;
}

.proof-label {
  font-size:13px;
  padding:6px 14px;
  border-radius:20px;
  background:rgba(124,92,255,0.15);
  color:#7C5CFF;
  font-weight:600;
}

.proof-link {
  font-weight:600;
  color:#fff;
  text-decoration:none;
  transition:0.3s;
}

.proof-link:hover {
  color:#7C5CFF;
}

/* ============================
   PRICING BLOCK PREMIUM
============================ */

.pricing-section {
  padding:120px 0;
  background:radial-gradient(circle at 50% 20%, rgba(124,92,255,0.15), transparent 60%);
  text-align:center;
}



.pricing-card:hover {
  transform:translateY(-8px);
  box-shadow:0 50px 120px rgba(124,92,255,0.25);
}

.pricing-badge {
  position:absolute;
  top:-16px;
  left:50%;
  transform:translateX(-50%);
  background:linear-gradient(135deg,#7C5CFF,#5A3DFF);
  padding:8px 22px;
  font-size:13px;
  border-radius:30px;
  font-weight:600;
  color:#fff;
  box-shadow:0 10px 30px rgba(124,92,255,0.5);
}

.pricing-title {
  font-size:24px;
  margin-bottom:20px;
  font-weight:600;
}

.pricing-price {
  font-size:64px;
  font-weight:800;
  margin-bottom:15px;
  background:linear-gradient(135deg,#7C5CFF,#9F7AEA);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.pricing-subtitle {
  color:#9CA3AF;
  margin-bottom:30px;
}

.pricing-features {
  list-style:none;
  padding:0;
  margin:0 0 40px 0;
  text-align:left;
}

.pricing-features li {
  margin-bottom:12px;
  font-size:15px;
  color:#E5E7EB;
}

.pricing-cta {
  display:block;
  background:linear-gradient(135deg,#7C5CFF,#5A3DFF);
  padding:16px;
  border-radius:50px;
  text-decoration:none;
  font-weight:700;
  color:white;
  font-size:16px;
  transition:0.3s;
  box-shadow:0 20px 40px rgba(124,92,255,0.4);
}

.pricing-cta:hover {
  transform:translateY(-3px);
  box-shadow:0 25px 50px rgba(124,92,255,0.6);
}

.pricing-reassurance {
  margin-top:20px;
  font-size:14px;
  color:#9CA3AF;
}

/* ============================
   PRICING ULTRA CONVERSION
============================ */

.pricing-toggle {
  display:flex;
  gap:10px;
  justify-content:center;
  margin:30px 0;
}

.toggle-btn {
  padding:10px 20px;
  border-radius:30px;
  border:1px solid rgba(124,92,255,0.25);
  background:rgba(255,255,255,0.02);
  color:#fff;
  cursor:pointer;
  font-size:14px;
  font-weight:500;
  transition:0.3s ease;
}

.toggle-btn:hover {
  border-color:#7C5CFF;
}

.toggle-btn.active {
  background:linear-gradient(135deg,#7C5CFF,#5A3DFF);
  border-color:transparent;
  box-shadow:0 10px 30px rgba(124,92,255,0.4);
}

.plan-content {
  display:none;
}

.plan-content.active {
  display:block;
}

.pricing-proof {
  margin-top:25px;
  font-size:14px;
  color:#9CA3AF;
}

.pricing-faq {
  margin-top:35px;
  text-align:left;
  font-size:14px;
  border-top:1px solid rgba(255,255,255,0.05);
  padding-top:25px;
}

.pricing-faq .faq-item {
  margin-bottom:18px;
}

.pricing-faq strong {
  display:block;
  margin-bottom:5px;
  font-weight:600;
}

.pricing-faq p {
  margin:0;
  color:#9CA3AF;
}

/* ============================
   PRICING ULTRA PREMIUM
============================ */

.pricing-card {
  position:relative;
  background:linear-gradient(145deg,#0e1328,#0b0f1f);
  border:1px solid rgba(124,92,255,0.25);
  border-radius:28px;
  padding:60px 50px;
  max-width:560px;
  width:100%;
  box-shadow:0 40px 100px rgba(0,0,0,0.6);
  transition:0.4s;
}

.pricing-card:hover {
  transform:translateY(-6px);
}

.pricing-toggle {
  display:flex;
  gap:10px;
  justify-content:center;
  margin:30px 0;
  flex-wrap:wrap;
}

.toggle-btn {
  position:relative;
  padding:10px 22px;
  border-radius:30px;
  border:1px solid rgba(124,92,255,0.25);
  background:rgba(255,255,255,0.02);
  color:#fff;
  cursor:pointer;
  font-size:14px;
  transition:all .3s ease;
}

.toggle-btn:hover {
  border-color:#7C5CFF;
}

.toggle-btn.active {
  background:linear-gradient(135deg,#7C5CFF,#5A3DFF);
  border-color:transparent;
  box-shadow:0 10px 30px rgba(124,92,255,0.4);
}

.toggle-btn.recommended {
  border-color:#7C5CFF;
}

.rec-badge {
  position:absolute;
  top:-12px;
  right:-10px;
  background:#7C5CFF;
  color:white;
  font-size:11px;
  padding:4px 8px;
  border-radius:12px;
  font-weight:600;
}

/* ANIMATION FLUIDE PLAN */

.plan-content {
  opacity:0;
  transform:translateY(10px);
  transition:all .35s ease;
  height:0;
  overflow:hidden;
}

.plan-content.active {
  opacity:1;
  transform:translateY(0);
  height:auto;
  margin-bottom:10px;
}

/* MOBILE OPTIMISATION */

@media(max-width:768px){

  .pricing-card {
    padding:40px 25px;
  }

  .pricing-price {
    font-size:48px;
  }

  .pricing-toggle {
    flex-direction:column;
    gap:12px;
  }

  .toggle-btn {
    width:100%;
  }
}
.pricing-cta {
  display:block;
  background:linear-gradient(135deg,#7C5CFF,#5A3DFF);
  padding:16px;
  border-radius:50px;
  text-decoration:none;
  font-weight:700;
  color:white;
  font-size:16px;
  transition:all .3s ease;
  position:relative;
  overflow:hidden;
  box-shadow:0 20px 40px rgba(124,92,255,0.4);
}

.pricing-cta::before {
  content:"";
  position:absolute;
  width:200%;
  height:200%;
  top:-50%;
  left:-50%;
  background:radial-gradient(circle,rgba(255,255,255,0.25),transparent 60%);
  transform:rotate(25deg);
  animation:glowMove 4s linear infinite;
}

@keyframes glowMove {
  0% { transform:translateX(-100%) rotate(25deg); }
  100% { transform:translateX(100%) rotate(25deg); }
}

.pricing-social {
  margin-top:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:15px;
  font-size:14px;
  color:#9CA3AF;
}

.avatars {
  display:flex;
}

.avatars img {
  width:32px;
  height:32px;
  border-radius:50%;
  object-fit:cover;
  margin-left:-10px;
  border:2px solid #0e1328;
}

/* Mobile sticky bar */
.mobile-pricing-bar {
  display:none;
}

@media(max-width:768px){
  .mobile-pricing-bar {
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    background:#0e1328;
    border-top:1px solid rgba(124,92,255,0.3);
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 20px;
    z-index:999;
  }

  .mobile-pricing-bar span {
    font-weight:700;
    font-size:18px;
  }

  .mobile-pricing-bar a {
    background:linear-gradient(135deg,#7C5CFF,#5A3DFF);
    padding:10px 18px;
    border-radius:30px;
    color:white;
    text-decoration:none;
    font-weight:600;
  }
}

/* ============================
   FOOTER PREMIUM
============================ */

.main-footer {
  background:linear-gradient(180deg,#0b0f1f,#070b1a);
  border-top:1px solid rgba(124,92,255,0.15);
  padding:60px 0 30px;
  margin-top:120px;
}

.footer-container {
  max-width:1100px;
  margin:auto;
}

.footer-top {
  display:flex;
  justify-content:space-between;
  gap:60px;
  margin-bottom:40px;
  flex-wrap:wrap;
}

.footer-brand h3 {
  font-size:20px;
  margin-bottom:12px;
}

.footer-brand p {
  max-width:400px;
  color:#9CA3AF;
  font-size:14px;
  line-height:1.6;
}

.footer-links {
  display:flex;
  flex-direction:column;
  gap:12px;
}

.footer-links a {
  color:#9CA3AF;
  text-decoration:none;
  transition:0.3s;
}

.footer-links a:hover {
  color:#7C5CFF;
}

.footer-cta {
  margin-top:10px;
  background:linear-gradient(135deg,#7C5CFF,#5A3DFF);
  padding:10px 18px;
  border-radius:30px;
  font-weight:600;
  color:white !important;
  box-shadow:0 15px 30px rgba(124,92,255,0.4);
}

.footer-bottom {
  border-top:1px solid rgba(255,255,255,0.05);
  padding-top:20px;
  text-align:center;
  font-size:13px;
  color:#6B7280;
}

/* MOBILE */
@media(max-width:768px){
  .footer-top {
    flex-direction:column;
    gap:30px;
  }
}

/* FOOTER STRATÉGIQUE */

.main-footer {
  background:linear-gradient(180deg,#070b1a,#050816);
  border-top:1px solid rgba(124,92,255,0.15);
  padding:80px 0 30px;
  margin-top:120px;
}

.footer-grid {
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:60px;
}

.footer-logo img {
  margin-bottom:20px;
}

.footer-col h4 {
  margin-bottom:15px;
  font-size:16px;
}

.footer-col ul {
  list-style:none;
  padding:0;
}

.footer-col li {
  margin-bottom:10px;
  font-size:14px;
  color:#9CA3AF;
}

.footer-col a {
  color:#9CA3AF;
  text-decoration:none;
  transition:.3s;
}

.footer-col a:hover {
  color:#7C5CFF;
}

.footer-brand p {
  font-size:14px;
  color:#9CA3AF;
  line-height:1.6;
  max-width:420px;
}

.footer-trust {
  margin-top:20px;
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:13px;
  color:#A78BFA;
}

.footer-cta {
  display:inline-block;
  margin-top:10px;
  background:linear-gradient(135deg,#7C5CFF,#5A3DFF);
  padding:10px 16px;
  border-radius:30px;
  font-weight:600;
  color:white !important;
}

.footer-bottom {
  border-top:1px solid rgba(255,255,255,0.05);
  margin-top:50px;
  padding-top:20px;
  text-align:center;
  font-size:13px;
  color:#6B7280;
}

@media(max-width:900px){
  .footer-grid {
    grid-template-columns:1fr;
    gap:40px;
  }
}



.landing-header {
  backdrop-filter: blur(16px);
  background: rgba(10,14,30,0.75);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.header-right-landing {
  display:flex;
  align-items:center;
  gap:20px;
}

.header-phone {
  color:#7C5CFF;
  font-weight:600;
  text-decoration:none;
}

.header-phone:hover {
  opacity:0.8;
}

@media(max-width:900px){
  .header-phone {
    display:none;
  }
}

/* =========================
   HEADER LANDING PREMIUM
========================= */

.landing-header {
  position: fixed;
  top: 0;
  width: 100%;
  backdrop-filter: blur(18px);
  background: rgba(8, 12, 28, 0.75);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  z-index: 1000;
  transition: 0.3s ease;
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0; /* réduit espace vertical */
}

/* LOGO */
.logo img {
  height: 44px; /* réduit taille */
  width: auto;
  filter: drop-shadow(0 0 10px rgba(124,92,255,0.3));
}

/* TELEPHONE */
.header-phone {
  color: #7C5CFF;
  font-weight: 600;
  text-decoration: none;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-phone:hover {
  opacity: 0.8;
}

/* CTA PRINCIPAL */
.btn-header {
  background: linear-gradient(135deg,#7C5CFF,#5A3DFF);
  padding: 12px 24px;
  border-radius: 40px;
  font-weight: 600;
  color: #fff !important;
  text-decoration: none;
  transition: 0.3s ease;
  box-shadow: 0 15px 40px rgba(124,92,255,0.4);
}

.btn-header:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 50px rgba(124,92,255,0.6);
}


/* LANDING NAV */
.nav-landing ul {
  display:flex;
  gap:30px;
  list-style:none;
  align-items:center;
}

.nav-landing a {
  text-decoration:none;
  color:#fff;
  font-weight:500;
  opacity:0.85;
  transition:0.3s;
}

.nav-landing a:hover {
  opacity:1;
  color:#7C5CFF;
}

.header-right-landing {
  display:flex;
  align-items:center;
  gap:20px;
}

.header-phone {
  color:#7C5CFF;
  font-weight:600;
  text-decoration:none;
}

@media(max-width:900px){
  .nav-landing {
    display:none;
  }
}


.glow-btn {
  background: linear-gradient(135deg,#7C5CFF,#5A3DFF);
  padding: 10px 22px;
  border-radius: 40px;
  color: #fff;
  font-weight: 600;
  position: relative;
  transition: 0.3s ease;
}

.glow-btn:hover {
  box-shadow: 0 0 20px rgba(124,92,255,0.6);
  transform: translateY(-2px);
}
@media (max-width: 992px){

  .nav-landing,
  .nav {
    display: none;
  }

  .menu-toggle {
    display: block;
    font-size: 26px;
    background: none;
    border: none;
    color: #fff;
  }

  .header-right-landing {
    display: none;
  }
}



/* HERO RESET */
.hero {
  margin-top: 0;
}



/* Ligne lumineuse seulement en shrink */
.header-glow-line {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.main-header.shrink .header-glow-line {
  opacity: 1;
}

.header-glow-line::before {
  content: "";
  position: absolute;
  width: 30%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent,
      #7C5CFF,
      #A78BFA,
      transparent);
  animation: glowMove 3s linear infinite;
}

@keyframes glowMove {
  0% { left: -30%; }
  100% { left: 100%; }
}

.btn-header {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.btn-header::before {
  content: "";
  position: absolute;
  inset: -4px;
  background: radial-gradient(circle, rgba(124,92,255,0.5) 0%, transparent 70%);
  filter: blur(15px);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: -1;
}

.main-header.shrink .btn-header::before {
  opacity: 1;
}

.logo img {
  transition: transform 0.4s ease, filter 0.4s ease;
}

.logo:hover img {
  transform: scale(1.05);
  filter: drop-shadow(0 0 10px rgba(124,92,255,0.4));
}

.btn-header {
  position: relative;
  overflow: hidden;
}

.btn-header::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.4),
    transparent
  );
  transform: skewX(-20deg);
}

.btn-header:hover::after {
  animation: sweep 0.8s ease forwards;
}

@keyframes sweep {
  0% { left: -100%; }
  100% { left: 150%; }
}

:root{
  --bg-dark: #0B0F1A;
  --bg-card: rgba(255,255,255,0.04);
  --border-soft: rgba(255,255,255,0.08);
  --text-main: #FFFFFF;
  --text-muted: #9CA3AF;
  --primary: #7C5CFF;
  --primary-2: #5A3DFF;
}
.main-header{
  position:fixed;
  top:0;
  width:100%;
  z-index:1000;
  background:rgba(11,15,26,0.6);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border-soft);
  transition:all 0.4s ease;
}

.main-header.shrink{
  background:rgba(11,15,26,0.85);
  border-bottom:1px solid rgba(124,92,255,0.3);
  box-shadow:0 0 40px rgba(124,92,255,0.15);
}
.header-glow-line{
  position:absolute;
  bottom:0;
  left:-50%;
  width:200%;
  height:2px;
  background:linear-gradient(
    90deg,
    transparent,
    var(--primary),
    var(--primary-2),
    transparent
  );
  animation:glowMove 6s linear infinite;
  opacity:0;
  transition:opacity 0.4s ease;
}

.main-header.shrink .header-glow-line{
  opacity:1;
}

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

.glow-btn{
  position:relative;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  padding:10px 22px;
  border-radius:30px;
  font-weight:600;
  color:#fff;
  overflow:hidden;
  transition:all 0.3s ease;
}

.glow-btn:hover{
  box-shadow:0 0 30px rgba(124,92,255,0.5);
  transform:translateY(-2px);
}

.glow-btn::after{
  content:"";
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.4),
    transparent
  );
  transition:all 0.6s ease;
}

.glow-btn:hover::after{
  left:100%;
}

.main-footer{
  background:var(--bg-dark);
  padding:80px 0 40px;
  position:relative;
  border-top:1px solid var(--border-soft);
}

.main-footer::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:1px;
  background:linear-gradient(
    90deg,
    transparent,
    var(--primary),
    transparent
  );
}

.footer-grid{
  display:grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap:60px;
}

.footer-col h4{
  color:var(--text-main);
  margin-bottom:20px;
  font-size:16px;
  text-transform:uppercase;
  letter-spacing:1px;
}

.footer-description{
  color:var(--text-muted);
  line-height:1.7;
  margin:20px 0;
  max-width:340px;
}
.footer-trust{
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:14px;
  color:var(--text-muted);
}
.footer-list{
  list-style:none;
  padding:0;
}

.footer-list li{
  margin-bottom:10px;
}

.footer-list a{
  color:var(--text-muted);
  text-decoration:none;
  position:relative;
  transition:0.3s;
}

.footer-list a:hover{
  color:var(--primary);
  padding-left:5px;
}
.footer-cta{
  display:inline-block;
  margin-top:10px;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  padding:10px 20px;
  border-radius:30px;
  color:#fff;
  font-weight:600;
  transition:0.3s;
}

.footer-cta:hover{
  box-shadow:0 0 25px rgba(124,92,255,0.4);
}
@media(max-width:992px){

  .footer-grid{
    grid-template-columns:1fr;
    gap:40px;
  }

  .main-footer{
    padding:60px 20px;
  }

}


/* ===========================
   FOOTER SIGNATURE (2026)
=========================== */

.signature-footer{
  position: relative;
  overflow: hidden;
  padding: 90px 0 40px;
  background: #0B0F1A;
  border-top: 1px solid rgba(255,255,255,0.08);
}

/* Ligne signature premium en haut */
.signature-footer::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(124,92,255,0.8), transparent);
  opacity: .9;
}

/* Radial subtil (profondeur) */
.footer-radial{
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(circle at 15% 20%, rgba(124,92,255,0.18), transparent 55%),
    radial-gradient(circle at 85% 30%, rgba(167,139,250,0.12), transparent 60%),
    radial-gradient(circle at 50% 90%, rgba(90,61,255,0.10), transparent 55%);
  filter: blur(20px);
  opacity: 0.9;
  pointer-events:none;
  z-index:0;
}

/* Mesh gradient animé (ultra léger) */
.footer-mesh{
  position:absolute;
  inset:-30%;
  background:
    radial-gradient(circle at 20% 30%, rgba(124,92,255,0.22), transparent 55%),
    radial-gradient(circle at 70% 20%, rgba(90,61,255,0.18), transparent 55%),
    radial-gradient(circle at 60% 80%, rgba(167,139,250,0.16), transparent 60%),
    radial-gradient(circle at 30% 75%, rgba(124,92,255,0.14), transparent 60%);
  filter: blur(40px);
  opacity: 0.55;
  animation: meshFloat 12s ease-in-out infinite;
  pointer-events:none;
  z-index:0;
}

@keyframes meshFloat{
  0%   { transform: translate3d(-1.5%, -1%, 0) scale(1.02); }
  50%  { transform: translate3d( 1.5%,  1.2%,0) scale(1.06); }
  100% { transform: translate3d(-1.5%, -1%, 0) scale(1.02); }
}

/* Container au-dessus des effets */
.signature-footer .container,
.signature-footer .footer-bottom{
  position: relative;
  z-index: 2;
}

.footer-grid{
  display:grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 60px;
  align-items: start;
}

/* Colonnes en "glass card" */
.signature-footer .footer-col{
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 22px;
  padding: 26px 26px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.35);
  backdrop-filter: blur(10px);
  transition: transform .35s ease, border-color .35s ease;
}

.signature-footer .footer-col:hover{
  transform: translateY(-6px);
  border-color: rgba(124,92,255,0.35);
}

.footer-col h4{
  color:#fff;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 18px;
  opacity: 0.92;
}

.footer-description{
  color: rgba(255,255,255,0.72);
  line-height: 1.7;
  margin: 18px 0 18px;
  max-width: 360px;
}

/* Trust badges en "pills" */
.footer-trust{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.footer-trust span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size: 13px;
  color: rgba(255,255,255,0.72);
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(124,92,255,0.10);
  border: 1px solid rgba(124,92,255,0.18);
}
.footer-list{
  list-style:none;
  padding:0;
  margin:0;
}

.footer-list li{ margin-bottom: 10px; }

.footer-list a{
  color: rgba(255,255,255,0.72);
  text-decoration:none;
  transition: all .25s ease;
  position: relative;
}

.footer-list a:hover{
  color:#fff;
  transform: translateX(4px);
}

.footer-cta{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  width: 100%;
  margin-top: 8px;
  padding: 12px 16px;
  border-radius: 14px;
  color:#fff;
  text-decoration:none;
  font-weight:700;
  background: linear-gradient(135deg,#7C5CFF,#5A3DFF);
  box-shadow: 0 14px 35px rgba(124,92,255,0.32);
  position: relative;
  overflow:hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}

/* Light sweep sur CTA */
.footer-cta::after{
  content:"";
  position:absolute;
  top:0;
  left:-120%;
  width: 60%;
  height:100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-18deg);
}

.footer-cta:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 50px rgba(124,92,255,0.45);
}

.footer-cta:hover::after{
  animation: footerSweep .85s ease forwards;
}

@keyframes footerSweep{
  0%{ left:-120%; }
  100%{ left:160%; }
}
.footer-logo img{
  height: 52px;
  width:auto;
  transition: transform .35s ease, filter .35s ease;
}

.footer-logo:hover img{
  transform: translateY(-2px) scale(1.03);
  filter: drop-shadow(0 0 18px rgba(124,92,255,0.40));
}
.footer-bottom{
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.60);
  font-size: 13px;
  text-align: center;
}
@media(max-width: 992px){
  .footer-grid{ grid-template-columns: 1fr; gap: 18px; }
  .signature-footer{ padding: 70px 0 36px; }
  .signature-footer .footer-col{ padding: 22px; }
}

/* Reveal animation */
.reveal{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
}

.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}




/* ============================
   HEADER PREMIUM 2026
============================ */
.main-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:1000;
  background: rgba(10, 14, 30, 0.62);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: all .35s ease;
}

.main-header .header-container{
  padding: 18px 0;
  transition: padding .35s ease;
}

.main-header.shrink{
  background: rgba(8, 10, 22, 0.86);
  box-shadow: 0 18px 45px rgba(0,0,0,.45);
}

.main-header.shrink .header-container{
  padding: 12px 0;
}

/* Glow line = OFF par défaut, ON au scroll */
.header-glow-line{
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:2px;
  opacity:0;
  background: linear-gradient(90deg,
    transparent,
    rgba(124,92,255,0.85),
    rgba(91,33,182,0.65),
    transparent
  );
  filter: blur(.2px);
  transition: opacity .35s ease;
}

.main-header.shrink .header-glow-line{
  opacity:1;
  animation: glowSweep 2.8s linear infinite;
}

@keyframes glowSweep{
  0% { transform: translateX(-25%); }
  100% { transform: translateX(25%); }
}

/* Logo hover micro motion */
.logo img{
  height:48px;
  transition: transform .35s ease, filter .35s ease;
  transform-origin: left center;
}

.logo:hover img{
  transform: translateY(-1px) scale(1.02);
  filter: drop-shadow(0 10px 25px rgba(124,92,255,0.22));
}

/* Nav hover + underline animé */
.nav-list-landing a,
.nav-list a{
  position:relative;
  display:inline-block;
  padding:10px 10px;
  opacity:.86;
  transition: opacity .25s ease, transform .25s ease;
}

.nav-list-landing a:hover,
.nav-list a:hover{
  opacity:1;
  transform: translateY(-2px);
}

.nav-list-landing a::after,
.nav-list a::after{
  content:"";
  position:absolute;
  left:10px; right:10px; bottom:6px;
  height:2px;
  border-radius:2px;
  background: linear-gradient(90deg,#7C5CFF,#5A3DFF);
  transform: scaleX(0);
  transform-origin:left;
  transition: transform .28s ease;
  opacity:.95;
}

.nav-list-landing a:hover::after,
.nav-list a:hover::after{
  transform: scaleX(1);
}

/* Indicateur actif */
.nav a.is-active::after,
.nav-landing a.is-active::after{
  transform: scaleX(1);
}

/* CTA halo + light sweep */
.glow-btn{
  position:relative;
  overflow:hidden;
}

.glow-btn::before{
  content:"";
  position:absolute;
  inset:-18px;
  background: radial-gradient(circle at 70% 40%, rgba(124,92,255,0.35), transparent 55%);
  opacity:.55;
  filter: blur(10px);
  z-index:0;
  transition: opacity .35s ease;
}

.main-header:not(.shrink) .glow-btn::before{
  opacity:.35; /* discret au repos */
}

.main-header.shrink .glow-btn::before{
  opacity:.85; /* glow fort uniquement au scroll */
}

/* Light sweep */
.glow-btn::after{
  content:"";
  position:absolute;
  top:-30%;
  left:-60%;
  width:40%;
  height:160%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  transform: skewX(-18deg);
  opacity:.0;
  z-index:1;
}

.glow-btn:hover::after{
  opacity:1;
  animation: sweep 1.1s ease;
}

@keyframes sweep{
  0% { left:-60%; opacity:0; }
  20%{ opacity:1; }
  100%{ left:140%; opacity:0; }
}

.btn-header, .btn-primary{
  position:relative;
  z-index:2;
}

/* ============================
   HERO PREMIUM 2026
============================ */

.hero-premium::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(circle at 30% 30%, rgba(124,92,255,0.14), transparent 50%),
    radial-gradient(circle at 70% 60%, rgba(91,33,182,0.10), transparent 55%);
  filter: blur(40px);
  opacity:.9;
  pointer-events:none;
}

.hero-title{
  letter-spacing: -0.02em;
}

.hero-meta{
  margin-top: 18px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.hero-trustline{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  color: rgba(255,255,255,0.72);
  font-size:14px;
}

.hero-trustline .dot{
  opacity:.55;
}

/* Visual mockup lift */
.hero-visual{
  position:relative;
  border-radius:22px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.08);
}

.hero-visual-glow{
  content:"";
  position:absolute;
  inset:-30px;
  background: radial-gradient(circle at 50% 40%, rgba(124,92,255,0.22), transparent 60%);
  filter: blur(28px);
  z-index:0;
}

.hero-visual img{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  object-fit:cover;
  transform: scale(1.03);
  transition: transform .6s ease;
}

.hero-visual:hover img{
  transform: scale(1.06);
}

/* Mobile: header + hero */
@media(max-width:900px){
  :root{ --header-h: 84px; --header-h-shrink: 68px; }

  .hero-premium{
    padding: 92px 0 70px;
  }

  .hero-buttons{
    flex-direction:column;
    align-items:stretch;
  }

  .hero-cta, .hero-cta-secondary{
    width:100%;
    text-align:center;
  }

  .nav-landing{ display:none; } /* landing plus clean */
}

.hero-visual {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 9 / 16; /* ratio vertical premium */
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}

.hero-preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;  /* 🔥 remplit sans déformation */
  object-position: top center;
  display: block;
}

.hero-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 28px;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.05),
    rgba(0,0,0,0.4)
  );
  pointer-events: none;
}

.success-right {
  width: 100%;
  max-width: 720px; /* ajuste selon ton layout */
}

.success-right img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 24px;
  box-shadow: 0 40px 80px rgba(0,0,0,0.35);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.success-right img:hover {
  transform: scale(1.02);
  box-shadow: 0 50px 100px rgba(0,0,0,0.45);
}

.success-right {
  width: 100%;
  max-width: 720px;
  aspect-ratio: 16 / 10; /* adapte au screenshot */
  overflow: hidden;
  border-radius: 24px;
}

.success-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.success-right::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.4));
  pointer-events: none;
  border-radius: 24px;
}

/* ===== HERO IMAGE FIX ===== */

.hero-visual{
  width: 100%;
  max-width: 520px;
  margin-left: auto;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 40px 90px rgba(0,0,0,0.5);
  background: radial-gradient(circle at 50% 30%, rgba(124,92,255,0.15), transparent 60%);
  padding: 20px;
}

.hero-preview-img{
  width: 100%;
  height: auto;        /* IMPORTANT */
  display: block;
  object-fit: contain; /* affiche toute l'image */
}


/* =========================
   HERO IMAGE FINAL FIX
========================= */

.hero-visual{
  position: relative;
  width: 100%;
  max-width: 560px;
  margin-left: auto;

  /* IMPORTANT : on supprime toute hauteur forcée */
  height: auto !important;
  aspect-ratio: auto !important;

  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 40px 90px rgba(0,0,0,0.5);
}

.hero-visual img,
.hero-preview-img{
  width: 100% !important;
  height: auto !important;      /* clé absolue */
  max-height: none !important;
  object-fit: contain !important;
  transform: none !important;   /* supprime les scale */
  display: block;
}


.hero {
  padding: 120px 0 80px;
}

.hero-container {
  align-items: center;
}

.hero-visual {
  height: auto;
}


/* =================================
   SAFE SPACING FIX – HOMEPAGE
================================= */

/* 1️⃣ Une seule compensation pour le header fixe */
:root{
  --header-height: 90px;
}



/* 2️⃣ Hero plus compact sans casser le design */
.hero,
.hero-premium{
  padding-top: 60px !important;
  padding-bottom: 70px !important;
  min-height: auto !important;
}

/* 3️⃣ Supprime les hauteurs forcées sur hero-container */
.hero-container{
  min-height: auto !important;
}



/* ===== HERO GAP FIX FINAL ===== */


.hero,

.hero-container {
  min-height: auto !important;
}





:root{
  --header-height: 96px;
  --header-height-shrink: 76px;
}

.main-header{
  position: fixed;
  top:0;
  left:0;
  width:100%;
  height: var(--header-height);
  z-index:1000;

  display:flex;
  align-items:center;

  background: rgba(10,14,30,0.75);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  border-bottom:1px solid rgba(255,255,255,0.06);
  transition: height .35s ease, background .35s ease, box-shadow .35s ease;
}

.main-header.shrink{
  height: var(--header-height-shrink);
  background: rgba(8,10,20,0.9);
  box-shadow: 0 15px 40px rgba(0,0,0,0.5);
}




.hero-premium{
  position: relative;

  padding: 80px 0 90px;

  background:
    radial-gradient(circle at 20% 30%, rgba(124,92,255,0.15), transparent 55%),
    radial-gradient(circle at 80% 10%, rgba(91,33,182,0.10), transparent 60%),
    #050816;

  overflow:hidden;
}

.hero-container{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items:center;
  gap:70px;
}


/* ==============================
   CLEAN HEADER + HERO SYSTEM
================================ */

:root{
  --header-height: 96px;
  --header-height-shrink: 76px;
}

/* HEADER */
.main-header{
  position: fixed;
  top:0;
  left:0;
  width:100%;
  height: var(--header-height);
  z-index:1000;

  display:flex;
  align-items:center;

  background: rgba(10,14,30,0.85);
  backdrop-filter: blur(18px);
  border-bottom:1px solid rgba(255,255,255,0.06);

  transition: height .35s ease, background .35s ease, box-shadow .35s ease;
}



/* SINGLE COMPENSATION */
main{
  padding-top: var(--header-height);
}

/* HERO */
.hero-premium{
  padding: 70px 0 90px;
}
/* =========================
   BACK TO TOP BUTTON
========================= */

#backToTop{
  position: fixed;
  bottom: 35px;
  left: 35px; /* opposé à ton sticky CTA */
  width: 52px;
  height: 52px;
  border-radius: 50%;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size: 20px;
  font-weight: 700;

  color:#fff;
  background: linear-gradient(135deg,#7C5CFF,#5A3DFF);

  border:none;
  cursor:pointer;

  box-shadow: 0 15px 35px rgba(124,92,255,0.4);
  transition: all .35s ease;

  opacity:0;
  visibility:hidden;
  transform: translateY(20px);

  z-index:1000;
}

/* Apparition */
#backToTop.show{
  opacity:1;
  visibility:visible;
  transform: translateY(0);
}

/* Hover premium */
#backToTop:hover{
  transform: translateY(-4px);
  box-shadow: 0 20px 45px rgba(124,92,255,0.6);
}

/* Mobile ajustement */
@media(max-width:768px){
  #backToTop{
    bottom: 90px; /* évite conflit avec mobile pricing bar */
    left: 20px;
  }
}
/* =========================
   BACK TO TOP – SIGNATURE
========================= */

#backToTop{
  position: fixed;
  bottom: 32px;
  left: 32px;

  width: 58px;
  height: 58px;
  border-radius: 50%;

  display:flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;
  border:1px solid rgba(124,92,255,0.35);

  background: rgba(15,18,35,0.75);
  backdrop-filter: blur(14px);

  box-shadow:
    0 15px 35px rgba(0,0,0,0.5),
    inset 0 0 20px rgba(124,92,255,0.15);

  transition: all .35s ease;

  opacity:0;
  visibility:hidden;
  transform: translateY(20px) scale(.92);

  z-index:999;
}

/* Apparition */
#backToTop.show{
  opacity:1;
  visibility:visible;
  transform: translateY(0) scale(1);
}

/* Hover premium */
#backToTop:hover{
  transform: translateY(-6px) scale(1.05);
  border-color: rgba(124,92,255,0.6);
  box-shadow:
    0 25px 55px rgba(0,0,0,0.6),
    0 0 40px rgba(124,92,255,0.45);
}
html{
  scroll-behavior: smooth;
}
@media(max-width:1200px){
  #backToTop{
    left: 24px;
  }
}

/* ===== GLOBAL VERTICAL SYSTEM ===== */

section{
  padding: 110px 0;
}

.hero-premium{
  padding: 80px 0 100px;
}

.final{
  padding: 120px 0;
}

/* Footer spacing naturel */
.signature-footer{
  margin-top: 0;
  padding: 90px 0 40px;
}

/* =========================
   LEGAL PAGE PREMIUM
========================= */

.legal-section{
  padding: 120px 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(124,92,255,0.08), transparent 60%),
    #050816;
}

.legal-container{
  max-width: 900px;
}

.legal-title{
  font-size: 2.6rem;
  margin-bottom: 40px;
  letter-spacing: -0.02em;
}

.legal-date{
  color: var(--text-muted);
  margin-bottom: 30px;
}

.legal-section h2{
  margin-top: 60px;
  margin-bottom: 20px;
  font-size: 1.4rem;
  position: relative;
  padding-left: 18px;
}

.legal-section h2::before{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  width:6px;
  height:22px;
  border-radius:4px;
  background: linear-gradient(135deg,#7C5CFF,#5A3DFF);
}

.legal-section p{
  margin-bottom: 18px;
  color: rgba(255,255,255,0.78);
  line-height: 1.8;
}

.legal-section a{
  color: #7C5CFF;
  text-decoration: none;
  font-weight: 500;
  transition: .3s;
}

.legal-section a:hover{
  color: #A78BFA;
}

.legal-credit{
  margin-top: 60px;
  font-size: 14px;
  color: var(--text-muted);
}

/* ===============================
   LEGAL HERO PREMIUM
================================ */

.legal-hero{
  padding: 120px 0 80px;
  text-align:center;
  background:
    radial-gradient(circle at 30% 30%, rgba(124,92,255,0.15), transparent 60%),
    #050816;
}

.legal-hero h1{
  font-size: 2.8rem;
  margin-top: 15px;
}

.legal-hero p{
  color: var(--text-muted);
  margin-top: 10px;
}

.legal-chip{
  display:inline-block;
  padding:8px 18px;
  border-radius:999px;
  font-size:13px;
  font-weight:600;
  background: rgba(124,92,255,0.15);
  border:1px solid rgba(124,92,255,0.25);
  color:#C4B5FD;
}

/* ===============================
   LEGAL GLASS CARD
================================ */

.legal-wrapper{
  padding: 60px 0 120px;
  background:#050816;
}

.legal-card{
  position:relative;
  max-width:900px;
  margin:auto;

  padding:70px 60px;
  border-radius:28px;

  background: linear-gradient(145deg,#0e1328,#0b0f1f);
  border:1px solid rgba(124,92,255,0.25);

  box-shadow:
    0 40px 100px rgba(0,0,0,0.6),
    0 0 80px rgba(124,92,255,0.08);

  backdrop-filter: blur(14px);
}

/* glow subtil arrière */
.legal-card::before{
  content:"";
  position:absolute;
  inset:-40px;
  background: radial-gradient(circle at 50% 20%, rgba(124,92,255,0.15), transparent 60%);
  filter: blur(40px);
  z-index:-1;
}

/* TITRES */
.legal-card h2{
  margin-top: 50px;
  margin-bottom: 15px;
  font-size: 1.3rem;
  padding-left:16px;
  position:relative;
}

.legal-card h2::before{
  content:"";
  position:absolute;
  left:0;
  top:6px;
  width:5px;
  height:20px;
  border-radius:3px;
  background: linear-gradient(135deg,#7C5CFF,#5A3DFF);
}

/* TEXTE */
.legal-card p{
  color: rgba(255,255,255,0.78);
  line-height: 1.8;
  margin-bottom: 18px;
}

.legal-date{
  color: var(--text-muted);
  margin-bottom: 30px;
}

.legal-card a{
  color:#7C5CFF;
  text-decoration:none;
  transition:.3s;
}

.legal-card a:hover{
  color:#A78BFA;
}

.legal-credit{
  margin-top:50px;
  font-size:14px;
  color: var(--text-muted);
}

/* RESPONSIVE */
@media(max-width:768px){

  .legal-card{
    padding:40px 25px;
  }

  .legal-hero{
    padding:90px 0 60px;
  }

}

/* ===== STICKY CTA SAFE POSITION FIX ===== */

.sticky-cta{
  right: clamp(20px, 4vw, 60px);
  bottom: clamp(20px, 4vw, 50px);
}



.sticky-cta{
  z-index: 20;
}

/* Sur desktop large → décale un peu plus */
@media (min-width: 1400px){
  .sticky-cta{
    right: 80px;
  }
}
.sticky-btn{
  padding: 12px 22px;
  font-size: 15px;
}

/* ===== FIX STICKY CTA WIDTH ===== */

.sticky-cta{
  right: 30px;
  bottom: 40px;
}

.sticky-btn{
  max-width: 280px;        /* limite largeur */
  white-space: nowrap;     /* évite retour ligne */
  font-size: 15px;
  padding: 14px 22px;
}

/* Sur écrans plus petits */
@media (max-width: 1200px){
  .sticky-btn{
    max-width: 240px;
    font-size: 14px;
  }
}
.sticky-btn{
  width: fit-content;
  max-width: 260px;
}
.sticky-cta.hidden{
  opacity:0;
  transform:translateY(30px);
  pointer-events:none;
  transition:all .35s ease;
}

.pricing-card{
  position:relative;
  display:flex;
  flex-direction:column;

  background:linear-gradient(145deg,#0e1328,#0b0f1f);
  border:1px solid rgba(124,92,255,0.25);
  border-radius:28px;

  padding:60px 50px;
  width:100%;

  box-shadow:0 40px 100px rgba(0,0,0,0.6);
  transition:transform .35s ease, box-shadow .35s ease;
}



/* ===============================
   SAFE FIX – PRICING STABILITY
================================ */

#offre .grid-3{
  align-items: stretch;
}

.pricing-card{
  display:flex !important;
  flex-direction:column !important;
  
  
  height:100%;
}

.pricing-features{
  flex-grow:1;
}



/* Supprime effet “orange” parasite */
.pricing-section{
  background:
    radial-gradient(circle at 50% 20%, rgba(124,92,255,0.12), transparent 60%) !important;
}
  
/* ===== FIX HAUTEUR IDENTIQUE CARDS ===== */

.pricing-section .grid-3{
  align-items: stretch;
}

.pricing-card{
  display:flex;
  flex-direction:column;
  height:100%;
}

.pricing-features{
  flex-grow:1;
}

.pricing-card:hover{
  transform:translateY(-6px);
  box-shadow:0 30px 80px rgba(124,92,255,0.18);
}

.pricing-card.recommended{
  border:1px solid #7C5CFF;
}



/* ===== PRICING HEIGHT FIX FINAL ===== */

.pricing-section .grid-3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
  align-items:stretch;
}

.pricing-card{
  height:100%;
  display:flex;
  flex-direction:column;
}

.pricing-features{
  flex:1;
}


/* ===== PRICING GRID FIX ===== */

.pricing-grid{
  align-items:stretch;
}

.pricing-card{
  display:flex;
  flex-direction:column;
  height:100%;
}

.pricing-features{
  flex:1;
}

/* Hover propre */
.pricing-card:hover{
  transform:translateY(-6px);
  box-shadow:0 30px 80px rgba(124,92,255,0.18);
}

/* Recommended */
.pricing-card.recommended{
  border:1px solid #7C5CFF;
  box-shadow:
    0 40px 100px rgba(0,0,0,0.6),
    0 0 60px rgba(124,92,255,0.15);
  transform:scale(1.03);
}

.pricing-card.recommended:hover{
  transform:scale(1.05);
}

/* Badge */
.pricing-badge{
  position:absolute;
  top:-14px;
  right:20px;
  background:linear-gradient(135deg,#7C5CFF,#5A3DFF);
  color:#fff;
  padding:6px 14px;
  font-size:12px;
  border-radius:999px;
  font-weight:600;
  box-shadow:0 8px 20px rgba(124,92,255,0.4);
}

/* ===== HOSTING PREMIUM ===== */

.hosting-grid{
  align-items:stretch;
  gap:50px;
}

.hosting-card{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:50px 45px;
  border-radius:28px;
  background:linear-gradient(145deg,#0e1328,#0b0f1f);
  border:1px solid rgba(124,92,255,0.2);
  box-shadow:0 40px 100px rgba(0,0,0,0.6);
  transition:all .35s ease;
}

.hosting-card:hover{
  transform:translateY(-6px);
  box-shadow:0 30px 80px rgba(124,92,255,0.18);
}

.hosting-card.recommended{
  border:1px solid #7C5CFF;
  box-shadow:
    0 40px 100px rgba(0,0,0,0.6),
    0 0 60px rgba(124,92,255,0.15);
  transform:scale(1.03);
}

.hosting-price{
  font-size:48px;
  font-weight:800;
  margin:20px 0;
  background:linear-gradient(135deg,#7C5CFF,#5A3DFF);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.hosting-subtitle{
  color:#9CA3AF;
  margin-bottom:25px;
}

.hosting-features{
  list-style:none;
  padding:0;
  margin:0 0 35px 0;
  flex:1;
}

.hosting-features li{
  margin-bottom:12px;
}

.hosting-cta{
  display:block;
  padding:14px;
  border-radius:50px;
  text-align:center;
  font-weight:600;
  text-decoration:none;
  transition:.3s;
}

.hosting-cta.primary{
  background:linear-gradient(135deg,#7C5CFF,#5A3DFF);
  color:white;
  box-shadow:0 15px 40px rgba(124,92,255,0.4);
}

.hosting-cta.primary:hover{
  transform:translateY(-3px);
}

.hosting-cta.secondary{
  border:1px solid rgba(255,255,255,0.2);
  color:white;
}

.hosting-badge{
  position:absolute;
  top:-14px;
  right:20px;
  background:linear-gradient(135deg,#7C5CFF,#5A3DFF);
  color:white;
  padding:6px 14px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  box-shadow:0 8px 20px rgba(124,92,255,0.4);
}

/* ===== ENTERPRISE 10/10 ===== */

.enterprise-section{
  padding:160px 0;
  text-align:center;
  background:
    radial-gradient(circle at 30% 30%, rgba(124,92,255,0.12), transparent 60%),
    #050816;
}

.enterprise-container{
  max-width:1000px;
  margin:auto;
}

.enterprise-title{
  font-size:clamp(2.4rem,4vw,3rem);
  margin-bottom:20px;
}

.enterprise-subtitle{
  color:#9CA3AF;
  max-width:750px;
  margin:20px auto 60px;
  line-height:1.7;
}

.enterprise-comparison{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
  margin-bottom:60px;
}

.enterprise-col{
  padding:40px;
  border-radius:24px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  text-align:left;
}

.enterprise-col.highlight{
  border:1px solid #7C5CFF;
  box-shadow:0 0 50px rgba(124,92,255,0.15);
}

.enterprise-col h4{
  margin-bottom:20px;
}

.enterprise-col ul{
  list-style:none;
  padding:0;
}

.enterprise-col li{
  margin-bottom:12px;
  color:#E5E7EB;
}

.enterprise-cta{
  padding:18px 45px;
  font-size:18px;
  box-shadow:0 25px 60px rgba(124,92,255,0.4);
}

.enterprise-note{
  margin-top:15px;
  font-size:14px;
  color:#9CA3AF;
}

@media(max-width:900px){
  .enterprise-comparison{
    grid-template-columns:1fr;
  }
}

/* ===== FINAL PREMIUM CTA ===== */

.final-section{
  padding:160px 0;
  text-align:center;
  background:
    radial-gradient(circle at 50% 30%, rgba(124,92,255,0.15), transparent 60%),
    #050816;
}

.final-container{
  max-width:800px;
  margin:auto;
}

.final-subtitle{
  color:#9CA3AF;
  margin:20px 0 40px;
}

.final-cta{
  padding:20px 50px;
  font-size:20px;
  box-shadow:0 25px 60px rgba(124,92,255,0.45);
}

.final-cta:hover{
  transform:translateY(-4px);
}

.final-trust{
  margin-top:25px;
  font-size:14px;
  color:#9CA3AF;
  line-height:1.8;
}

/* UX additions for homepage */
.micro-trust{
  margin-top:14px;
  font-size:0.95rem;
  opacity:.9;
}

.section-lead{
  max-width:820px;
  margin:0 auto;
  opacity:.92;
  line-height:1.6;
}
.section-lead.center{ text-align:center; }

.highlight-scale{
  transform: scale(1.05);
  z-index: 2;
  position: relative;
}

.pricing-note{
  margin: 12px 0 16px;
  font-size: .95rem;
  opacity: .9;
}

.pricing-cta.secondary{
  background: transparent;
  border: 1px solid rgba(255,255,255,.18);
  margin-top: 10px;
  display: inline-block;
  text-align: center;
}

/* Mobile safety: prevent scale overflow */
@media (max-width: 980px){
  .highlight-scale{ transform:none; }
}





/* ================= PREMIUM MOBILE HERO FIX ================= */

@media (max-width: 768px) {

.hero {
    padding: 60px 20px 80px;
    text-align: center;
}

.hero h1 {
    font-size: 34px;
    line-height: 1.2;
}

.hero p {
    font-size: 16px;
    line-height: 1.6;
    margin-top: 20px;
}

.hero .cta {
    display: block;
    width: 100%;
    margin: 30px auto 0;
    text-align: center;
}

}

/* ================= PREMIUM CTA ================= */

.cta {
    background: linear-gradient(135deg, #7c3aed, #9333ea);
    padding: 14px 28px;
    border-radius: 40px;
    font-weight: 600;
    box-shadow: 0 10px 30px rgba(124,58,237,0.4);
    transition: 0.3s ease;
}

.cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(124,58,237,0.6);
}

/* ================= BURGER PREMIUM ================= */

.burger span {
    background: linear-gradient(90deg, #9f7aea, #7c3aed);
    height: 3px;
    width: 28px;
}

.burger {
    padding: 8px;
}

/* ================= HERO ANIMATION ================= */

.hero h1,
.hero p,
.hero .cta {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 0.8s ease forwards;
}

.hero p { animation-delay: 0.2s; }
.hero .cta { animation-delay: 0.4s; }

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}



/* ================= FINAL BURGER FIX ================= */

.burger {
    display: none;
    position: relative;
    z-index: 9999;
    background: none;
    border: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
}

.burger span {
    width: 28px;
    height: 3px;
    background: white;
    border-radius: 3px;
}

@media (max-width: 992px) {

    nav ul {
        display: none !important;
    }

    .burger {
        display: flex !important;
    }

}

/* ================= OFFERS RESPONSIVE FIX ================= */

.offers-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

@media (max-width: 992px) {
    .offers-grid {
        grid-template-columns: 1fr !important;
    }

    .offers-grid > * {
        width: 100% !important;
    }
}

/* ===============================
   SECTION DEMOS PREMIUM
=================================*/

.section-head-center{
  text-align:center;
  margin-bottom:50px;
}

.section-head-center p{
  color:var(--muted);
  margin-top:10px;
}

.demo-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
}

.demo-card{
  display:flex;
  flex-direction:column;
  background:rgba(17,24,39,.75);
  border:1px solid rgba(148,163,184,.15);
  border-radius:22px;
  overflow:hidden;
  text-decoration:none;
  transition:all .35s ease;
  position:relative;
}

.demo-card:hover{
  transform:translateY(-8px);
  box-shadow:0 35px 90px rgba(0,0,0,.5);
  border-color:rgba(96,165,250,.4);
}

.demo-image{
  position:relative;
  overflow:hidden;
}

.demo-image img{
  width:100%;
  height:220px;
  object-fit:cover;
  transition:transform .6s ease;
}

.demo-card:hover .demo-image img{
  transform:scale(1.08);
}

.demo-badge{
  position:absolute;
  top:16px;
  left:16px;
  background:linear-gradient(90deg,var(--accent2),var(--accent));
  color:#111;
  font-size:12px;
  font-weight:700;
  padding:6px 12px;
  border-radius:999px;
}

.demo-content{
  padding:28px;
}

.demo-content h3{
  margin:0 0 12px;
  font-size:20px;
}

.demo-content p{
  color:var(--muted);
  margin-bottom:20px;
}

.demo-link{
  font-weight:700;
  color:var(--accent2);
  transition:all .3s ease;
}

.demo-card:hover .demo-link{
  letter-spacing:1px;
}

@media (max-width:980px){
  .demo-grid{
    grid-template-columns:1fr;
  }
}

.demo-card h3,
.demo-card p,
.demo-link{
  color: var(--white);
}

.demo-link{
  font-weight:700;
  opacity:.85;
}

.demo-card:hover .demo-link{
  opacity:1;
}

/* ===============================
   DEMO SECTION — TEXTE BLANC
=================================*/

.demo-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
}

.demo-card{
  background:rgba(17,24,39,.85);
  border:1px solid rgba(148,163,184,.15);
  border-radius:22px;
  padding:40px;
  text-decoration:none;
  transition:all .3s ease;
}

.demo-card:hover{
  transform:translateY(-6px);
  border-color:rgba(255,255,255,.3);
  box-shadow:0 25px 70px rgba(0,0,0,.5);
}

/* FORCE TOUT EN BLANC */
.demo-card,
.demo-card h3,
.demo-card p,
.demo-card span{
  color:#ffffff !important;
}

.demo-card h3{
  margin-bottom:15px;
  font-size:22px;
}

.demo-card p{
  opacity:.85;
  line-height:1.6;
  margin-bottom:20px;
}

.demo-link{
  font-weight:700;
  opacity:.9;
}

@media (max-width:980px){
  .demo-grid{
    grid-template-columns:1fr;
  }
}

/* ===============================
   DEMO SECTION PREMIUM
=================================*/

.demo-section{
  position:relative;
  overflow:hidden;
}

/* Glow arrière-plan subtil */
.demo-glow{
  position:absolute;
  top:-200px;
  left:50%;
  transform:translateX(-50%);
  width:800px;
  height:600px;
  background:radial-gradient(circle, rgba(96,165,250,.15), transparent 70%);
  filter:blur(60px);
  z-index:0;
}

.demo-section .container{
  position:relative;
  z-index:1;
}

.section-head-center{
  text-align:center;
  margin-bottom:60px;
}

.section-head-center h2{
  color:#fff;
  margin-bottom:12px;
}

.section-head-center p{
  color:#fff;
  opacity:.7;
}

.demo-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:35px;
}

/* Cartes premium */
.demo-card{
  position:relative;
  background:linear-gradient(
    145deg,
    rgba(20,28,45,.95),
    rgba(15,22,38,.85)
  );
  border:1px solid rgba(255,255,255,.08);
  border-radius:26px;
  padding:50px 40px;
  text-decoration:none;
  transition:all .4s ease;
  backdrop-filter:blur(10px);
}

/* Effet premium hover */
.demo-card:hover{
  transform:translateY(-10px);
  border-color:rgba(96,165,250,.5);
  box-shadow:
    0 40px 100px rgba(0,0,0,.6),
    0 0 40px rgba(96,165,250,.2);
}

/* Texte blanc forcé */
.demo-card,
.demo-card h3,
.demo-card p,
.demo-card span{
  color:#ffffff !important;
}

.demo-card h3{
  font-size:24px;
  margin-bottom:18px;
  font-weight:700;
}

.demo-card p{
  opacity:.8;
  line-height:1.7;
  margin-bottom:25px;
}

.demo-link{
  font-weight:600;
  letter-spacing:.5px;
  opacity:.85;
  transition:all .3s ease;
}

.demo-card:hover .demo-link{
  letter-spacing:1.5px;
  opacity:1;
}

/* CTA global */
.demo-cta{
  margin-top:70px;
  text-align:center;
}

.demo-main-btn{
  padding:18px 40px;
  font-size:18px;
  border-radius:50px;
  box-shadow:0 20px 60px rgba(96,165,250,.3);
  transition:all .3s ease;
}

.demo-main-btn:hover{
  transform:translateY(-4px);
  box-shadow:0 30px 80px rgba(96,165,250,.4);
}

@media (max-width:980px){
  .demo-grid{
    grid-template-columns:1fr;
  }

  .demo-card{
    padding:35px;
  }
}

.partners-strip{
  padding: 70px 0;
  background: linear-gradient(180deg, #050816, #071022);
  border-top: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.partners-kicker{
  text-align:center;
  color:#8b5cf6;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin:0 0 10px;
  font-size:.85rem;
}

.partners-strip h2{
  text-align:center;
  color:#fff;
  margin-bottom:28px;
}

.partners-logos{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:22px;
}

.partner-logo-card{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:180px;
  min-height:100px;
  padding:18px 22px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:18px;
  text-decoration:none;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.partner-logo-card:hover{
  transform:translateY(-4px);
  border-color:rgba(124,58,237,0.45);
  box-shadow:0 14px 30px rgba(0,0,0,0.28);
}

.partner-logo-card img{
  max-width:150px;
  max-height:56px;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
  filter:none;
}

/* SECTION PARTENAIRES */

.partners-strip{
  padding: 90px 0;
  background: radial-gradient(circle at top, #07102a 0%, #030617 100%);
  border-top: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.partners-strip h2{
  text-align:center;
  font-size:42px;
  margin-bottom:50px;
}

.partners-kicker{
  text-align:center;
  font-size:13px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:#8b5cf6;
  margin-bottom:10px;
}

.partners-logos{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:40px;
  flex-wrap:wrap;
}

/* CARTE PARTENAIRE */

.partner-logo-card{
  display:flex;
  align-items:center;
  justify-content:center;
  width:240px;
  height:140px;

  background:linear-gradient(145deg,#0b132f,#060b1f);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:22px;

  transition:all .35s ease;
  position:relative;
  overflow:hidden;
}

/* glow hover */

.partner-logo-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at top,#7c3aed55,transparent 60%);
  opacity:0;
  transition:opacity .35s ease;
}

.partner-logo-card:hover::before{
  opacity:1;
}

.partner-logo-card:hover{
  transform:translateY(-6px);
  border-color:#7c3aed55;
  box-shadow:0 20px 40px rgba(0,0,0,0.35);
}

/* LOGO */

.partner-logo-card img{
  max-width:150px;
  max-height:60px;
  width:auto;
  height:auto;
  object-fit:contain;
  filter:brightness(0.95);
}

/* MOBILE */

@media (max-width:768px){

  .partners-logos{
    gap:20px;
  }

  .partner-logo-card{
    width:180px;
    height:110px;
  }

}

.partners-sub{
text-align:center;
max-width:700px;
margin:auto;
margin-bottom:40px;
opacity:0.8;
}

.partners-strip{
  padding:80px 0;
}

.partners-strip h2{
  margin-bottom:30px;
}

/* SECTION */

.partners-strip{
padding:90px 0;
background: radial-gradient(circle at top,#06102a,#020617);
text-align:center;
overflow:hidden;
}

.partners-kicker{
color:#8b5cf6;
letter-spacing:3px;
font-size:13px;
margin-bottom:8px;
}

.partners-sub{
opacity:0.8;
max-width:600px;
margin:auto;
margin-bottom:20px;
}

.partners-strip h2{
margin-bottom:50px;
}

/* SLIDER */

.partners-slider{
overflow:hidden;
position:relative;
}

.partners-track{
display:flex;
gap:60px;
animation:partnersScroll 25s linear infinite;
width:max-content;
}

/* CARD */

.partner-slide{
display:flex;
align-items:center;
justify-content:center;
width:200px;
height:110px;
background:linear-gradient(145deg,#0b132f,#060b1f);
border-radius:20px;
border:1px solid rgba(255,255,255,0.06);
transition:all .3s ease;
}

.partner-slide img{
max-width:140px;
max-height:60px;
object-fit:contain;
}

.partner-slide:hover{
transform:translateY(-6px);
border-color:#7c3aed55;
box-shadow:0 20px 40px rgba(0,0,0,0.35);
}

/* ANIMATION */

@keyframes partnersScroll{

0%{
transform:translateX(0);
}

100%{
transform:translateX(-50%);
}

}

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