.dots-bg {
      position: relative;
      overflow: visible;
    }
    .dots-bg::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background-color: transparent;
      background-image: radial-gradient(rgba(255,255,255,0.10) 1px, transparent 1px) !important;
      background-size: 18px 18px;
      z-index: 0;
      mix-blend-mode: normal;
    }
    .dots-bg > * { position: relative; z-index: 1; }
    :root {
      --accent1: #7C54F2;
      --accent2: #B139D7;
      --glass: rgba(255,255,255,0.04);
      --glass-strong: rgba(255,255,255,0.06);
      --glass-border: rgba(255,255,255,0.08);
    }

    /* GLOBAL */
    :root {
      --accent1: #7C54F2;
      --accent2: #B139D7;
      --glass: rgba(255,255,255,0.04);
      --glass-strong: rgba(255,255,255,0.06);
      --glass-border: rgba(255,255,255,0.08);
    }
html,body {
  height:100%;
  background-color:#0b0b10;
  font-family:Poppins,Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
  color:#e6e6ea;
}
    .logo-gradient { background:linear-gradient(90deg,var(--accent1),var(--accent2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
    .btn-main {
      background: linear-gradient(90deg,var(--accent1),var(--accent2));
      padding: .62rem .9rem; border-radius: .6rem; font-weight:600; color:white; display:inline-flex; gap:.6rem; align-items:center;
      box-shadow: 0 6px 30px rgba(124,84,242,0.18);
      transition: transform .2s ease, box-shadow .2s ease;
    }
    .btn-main:hover { transform: translateY(-3px) scale(1.01); box-shadow: 0 12px 40px rgba(124,84,242,0.26); }
    .btn-ghost {   border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.6rem 0.9rem;
  border-radius: 0.6rem;
  color: #eee;
  background: rgba(24, 24, 27, 0.55); /* Gris foncé, léger effet glass */
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 16px 0 rgba(24,24,27,0.2);
  font-weight: 600;
  transition: background 0.18s, box-shadow 0.18s; }
    .btn-ghost:hover { transform: translateY(-3px) scale(1.01); }
    /* Glass cards */
    .glass {
      background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.018));
      border: 1px solid var(--glass-border);
      backdrop-filter: blur(8px) saturate(110%);
      -webkit-backdrop-filter: blur(8px) saturate(110%);
      box-shadow: 0 6px 30px rgba(11,8,20,0.6);
      border-radius: 16px;
    }
    /* glow hover */
    .glass-hover-glow:hover { box-shadow: 0 10px 40px rgba(124,84,242,0.18), 0 0 40px rgba(177,57,215,0.06); transform: translateY(-6px) scale(1.01); }
    /* subtle animated gradient background for highlighted areas */
    .animated-gradient {
      background: linear-gradient(90deg, rgba(124,84,242,0.12), rgba(177,57,215,0.08));
      background-size: 300% 300%;
      animation: gradientShift 6s ease infinite;
    }
    @keyframes gradientShift {
      0% { background-position: 0% 50% }
      50% { background-position: 100% 50% }
      100% { background-position: 0% 50% }
    }
    /* Hero decorative orbs */
    .orb {
      position:absolute; border-radius:9999px; filter: blur(40px); opacity: .42; z-index:0;
      mix-blend-mode: screen;
    }
    .orb.a { width:380px; height:380px; left:-6%; top:6%; background: radial-gradient(circle at 30% 30%, rgba(124,84,242,0.28), rgba(177,57,215,0.18)); }
    .orb.b { width:260px; height:260px; right:4%; top:18%; background: radial-gradient(circle at 30% 30%, rgba(24,200,255,0.14), rgba(124,84,242,0.1)); }
    /* small utilities */
    .text-muted { color:#bfc0d6; }
    .card-hover:focus, .card-hover:hover { transform: translateY(-8px) scale(1.01); box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 40px rgba(124,84,242,0.12); }
    /* link underline */
    .link-underline { position:relative; display:inline-block; }
    .link-underline:after { content:""; position:absolute; left:0; bottom:-3px; height:2px; width:0; background:linear-gradient(90deg,var(--accent1),var(--accent2)); transition: width .28s ease; border-radius:2px; }
    .link-underline:hover:after { width:100%; }
    /* stats counter style */
    .stat-num { font-weight:800; font-size:2.1rem; letter-spacing:-0.02em; }
    /* loader */
    #page-loader {
      position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:60; background:linear-gradient(180deg, rgba(3,3,6,1
      ), rgba(3,3,6,1));
    }
    #page-loader.hidden { display:none; }
    /* mobile menu glass */
    #mobileMenuInner { border-radius:12px; border: 1px solid rgba(255,255,255,0.04); backdrop-filter: blur(10px); }
    /* gallery modal */
    .modal-backdrop { background: rgba(0,0,0,0.6); position:fixed; inset:0; z-index:70; display:flex; align-items:center; justify-content:center; padding:24px; }
    .modal-content { max-width:1100px; width:100%; border-radius:12px; overflow:hidden; }
    /* FAQ toggle */
    .faq-toggle { cursor:pointer; }
    /* subtle bounce */
    .pulse-slow { animation: pulse 3.6s infinite; }
    /* ease transitions for hover glows */
    .glow-on-hover:hover { box-shadow: 0 6px 30px rgba(124,84,242,0.14), 0 0 24px rgba(177,57,215,0.08); transform: translateY(-4px); }
    /* little badge */
    .badge { font-weight:700; padding:.2rem .5rem; border-radius:.5rem; font-size:.8rem; background:linear-gradient(90deg,var(--accent1),var(--accent2)); color:white; display:inline-block; }
    /* timeline */
    .timeline::before { content:""; position:absolute; left:1.25rem; top:0; bottom:0; width:2px; background:linear-gradient(180deg,var(--accent1),var(--accent2)); opacity:.12; border-radius:4px; }

.card-hover {
  position: relative;
  overflow: hidden;
  transition: border 0.4s, box-shadow 0.4s;
}
.card-hover .card-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.4s;
  z-index: 0;
  filter: brightness(0.3) blur(1px);
}
.card-hover:hover .card-bg {
  opacity: 1;
}
.card-hover:hover {
  border-color: #b366ff;
  box-shadow: 0 0 20px 5px #b366ff;
}
.card-content {
  position: relative;
  z-index: 1;
}

.faq-toggle {
  cursor: pointer;
  user-select: none;         /* Désactive la sélection de texte sur le toggle */
  -webkit-user-select: none; /* Pour Safari */
  transition: color 0.5s;
}

.xthomas {
  background-image: linear-gradient(90deg, hsl(210, 98%, 50%) 0%, hsl(220, 90%, 55%) 20%, hsl(225, 85%, 60%) 40%, hsl(230, 80%, 65%) 60%, hsl(220, 90%, 55%) 80%, hsl(210, 98%, 50%) 100%);
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
        background-clip: text;
        background-size: 300% auto;
        animation: textgradient 20s 
linear infinite;
}