:root{
      --bg: #0b0c10;
      --surface: rgba(255,255,255,.06);
      --text: #f2f2f2;   /* presque blanc, contraste fort */
      --muted: #c4c4c4;  /* gris clair, lisible */
      --primary: #7c5cff;
      --primary-600:#6b4aff;
      --primary-700:#5b3cff;
      --accent: #20e3b2;
      --warning:#ffd166;
      --danger:#ff6b6b;
      --shadow: 0 10px 30px rgba(0,0,0,.35);
    }
    [data-theme="light"]{
      --bg: #ffffff;
      --surface: rgba(0,0,0,.04);
      --text: #111827;
      --muted: #6b7280;
      --primary: #5b3cff;
      --primary-600:#4a2fff;
      --primary-700:#3c23ff;
      --accent: #0ea5e9;
      --shadow: 0 8px 24px rgba(0,0,0,.12);
    }
    html,body{height:100%}
    body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);}
    .btn-primary{background:var(--primary);border-color:var(--primary)}
    .btn-primary:hover{background:var(--primary-600);border-color:var(--primary-600)}
    .btn-outline-primary{border-color:var(--primary);color:var(--primary)}
    .btn-outline-primary:hover{background:var(--primary);color:#fff}
    .text-muted{color:var(--muted)!important}
    .nav-blur{background:rgba(10,10,10,.5);backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,.08)}
    [data-theme="light"] .nav-blur{background:rgba(255,255,255,.7); border-bottom:1px solid rgba(0,0,0,.06)}
    
    .text-primary-custom {
      color: var(--primary) !important;
}


    /* Hero */
    .hero{position:relative;overflow:hidden;background:radial-gradient(1200px 600px at 10% -10%, rgba(124,92,255,.22), transparent 60%),radial-gradient(1000px 500px at 90% 10%, rgba(32,227,178,.18), transparent 60%)}
    .hero:before,.hero:after{content:"";position:absolute;border-radius:50%;filter: blur(60px);opacity:.35}
    .hero:before{width:320px;height:320px;background:var(--primary);top:-60px;left:-60px}
    .hero:after{width:380px;height:380px;background:var(--accent);right:-80px;bottom:-80px}
    .hero .badge{background:linear-gradient(90deg,var(--primary),var(--accent));}

    /* Cards / sections */
    .card-glass{background:var(--surface); border:1px solid rgba(255,255,255,.08); box-shadow: var(--shadow); transition: transform .25s ease, box-shadow .25s ease}
    .card-glass:hover{transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,.45)}

    .section{padding-block: 80px}
    .section-title{font-weight:800; letter-spacing:-.02em}
    .section-sub{max-width:780px}

    /* Project cards */
    .project-card{position:relative; overflow:hidden}
    .project-thumb{aspect-ratio: 16/9; background:linear-gradient(135deg, #1f2937, #0b0c10); border-radius: .75rem}
    .project-card .tag{background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.12)}
    [data-theme="light"] .project-card .tag{background:rgba(0,0,0,.04); border:1px solid rgba(0,0,0,.06)}



    /* Timeline */
    .timeline-step{position:relative;padding-left:48px}
    .timeline-step::before{content:"";position:absolute;left:18px;top:0;bottom:0;width:2px;background:linear-gradient(var(--primary),transparent)}
    .timeline-dot{position:absolute;left:8px;top:2px;width:20px;height:20px;border-radius:50%;background:var(--primary)}

    /* Testimonials */
    .testimonial{border-left:4px solid var(--primary);}

    /* Footer */
    footer{border-top:1px solid rgba(255,255,255,.08)}
    [data-theme="light"] footer{border-top:1px solid rgba(0,0,0,.06)}

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

    /* Utilities */
    .rounded-2xl{border-radius:1rem}
    .shadow-soft{box-shadow: var(--shadow)}
    .pointer{cursor:pointer}

    h5 {
  color: var(--primary); /* violet pour bien ressortir */
}

.section h5 {
  font-weight: 600; /* renforce la hiérarchie visuelle */
}

/* Optionnel : si tu veux varier dans certaines sections */
#services h5 {
  color: var(--accent); /* turquoise dans la section services */
}

#apropos h5 {
  color: var(--primary); /* violet dans la section à propos */
}

.check-label {
  color:black;
}