/* =====================
   NovaFusion — Style global
   ===================== */
   /* === Loader === */
    #loader-wrapper {
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: white;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
      transition: opacity 0.5s ease, visibility 0.5s;
    }

    .loader {
      position: relative;
      width: 100px;
      height: 50px;
    }

    .dot {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      position: absolute;
      top: 10px;
      animation-timing-function: ease-in-out;
    }

    .blue {
      background-color: #0056b3;
      left: 0;
      animation: moveLeft 1s infinite alternate;
    }

    .red {
      background-color: #e74c3c;
      right: 0;
      animation: moveRight 1s infinite alternate;
    }

    @keyframes moveLeft {
      0%   { transform: translateX(0); }
      100% { transform: translateX(40px); }
    }

    @keyframes moveRight {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-40px); }
    }

    .text {
      position: absolute;
      top: 70px;
      width: 100%;
      text-align: center;
      font-size: 1.1em;
      color: #0056b3;
      font-weight: bold;
    }

    /* Masquer le loader une fois chargé */
    #loader-wrapper.loaded {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }
:root{
  --bg:#0b0e14;
  --muted:#8892a3;
  --text:#e6ebff;
  --card:#111524;
  --brand-1:#7c3aed; /* violet */
  --brand-2:#06b6d4; /* cyan */
  --radius:1.25rem;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --pad: clamp(16px, 2vw, 28px);
  --max: 1200px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: radial-gradient(1200px 600px at 80% -10%, rgba(124,58,237,.25), transparent 60%),
              radial-gradient(1000px 600px at -20% 10%, rgba(6,182,212,.18), transparent 60%),
              var(--bg);
  color:var(--text);
  line-height:1.55;
}

/* subtle texture */
.noise-bg::before{
  content:"";
  position:fixed; inset:0;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width=\"100\" height=\"100\" viewBox=\"0 0 100 100\"><filter id=\"n\"><feTurbulence type=\"fractalNoise\" baseFrequency=\"0.9\" numOctaves=\"2\" stitchTiles=\"stitch\"></feTurbulence><feColorMatrix type=\"saturate\" values=\"0\"></feColorMatrix><feComponentTransfer><feFuncA type=\"table\" tableValues=\"0 0 0 .05 0 0 0 .05\"></feFuncA></feComponentTransfer></filter><rect width=\"100%\" height=\"100%\" filter=\"url(%23n)\" opacity=\"0.3\"/></svg>');
  opacity:.15;
  pointer-events:none;
  mix-blend-mode:overlay;
}

.site-header{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding: .8rem var(--pad);
  background:rgba(11,14,20,.5);
  backdrop-filter: blur(12px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.brand{display:flex; align-items:center; gap:.6rem; font-weight:700; text-decoration:none; color:var(--text)}
.brand svg{filter:drop-shadow(0 6px 16px rgba(124,58,237,.35))}
nav{display:flex; gap:.6rem; align-items:center}
nav a{color:var(--muted); text-decoration:none; padding:.55rem .9rem; border-radius:999px; transition: .25s ease}
nav a:hover{color:var(--text); background:rgba(255,255,255,.06)}
nav a.active{color:var(--text); background:rgba(124,58,237,.25)}
nav .btn{margin-left:.25rem}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.8rem 1.1rem;
  border-radius:999px;
  background:linear-gradient(120deg, var(--brand-1), var(--brand-2));
  color:#1e293b; text-decoration:none; font-weight:700; letter-spacing:.2px;
  box-shadow: var(--shadow);
  border:0;
  cursor:pointer;
  transition: transform .15s ease, filter .2s ease;
}
.btn:hover{transform: translateY(-2px); filter:saturate(1.1)}
.btn.ghost{background:transparent; border:1px solid rgba(255,255,255,.15); color:var(--text); box-shadow:none}

.flash{
  max-width:var(--max); margin: 12px auto 0; padding: .9rem 1.1rem;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background:#112; 
}
.flash.success{border-color:rgba(0,200,120,.35); background:rgba(0,200,120,.08)}
.flash.error{border-color:rgba(255,80,80,.35); background:rgba(255,0,0,.06)}

.hero{display:grid; place-items:center; padding: calc(18vh) var(--pad) calc(14vh)}
.hero-inner{max-width:900px; text-align:center; position:relative}
.hero h1{font-size: clamp(2rem, 5vw, 3.6rem); line-height:1.05; margin:0 0 .7rem}
.hero p{color: var(--muted); margin:0 auto 1.4rem; max-width: 58ch}
.hero .cta{display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap}
.hero-orb{
  position:absolute; inset:auto auto -90px 50%; width:480px; height:480px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(124,58,237,.35), transparent 60%);
  filter: blur(40px);
  animation: float 10s ease-in-out infinite;
  pointer-events:none;
}
@keyframes float{ 0%,100%{transform: translateX(-50%) translateY(0)} 50%{transform: translateX(-50%) translateY(-16px)} }

.fx-gradient{
  background: linear-gradient(90deg, var(--brand-1), var(--brand-2));
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  animation: hue 8s linear infinite;
}
@keyframes hue{
  0%{ filter:hue-rotate(0deg) } 100%{ filter:hue-rotate(360deg) }
}

.features{max-width:var(--max); margin: 0 auto; padding: 6vh var(--pad)}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.card{background:var(--card); border:1px solid rgba(255,255,255,.06); padding:1.1rem; border-radius:var(--radius); box-shadow: var(--shadow)}
.card h3{margin-top:0}

.gallery{max-width:var(--max); margin: 0 auto; padding: 2vh var(--pad) 6vh}
.gallery h2{margin-bottom:1rem}
.gallery-grid{grid-template-columns: repeat(6,1fr)}
.grid{display:grid; gap:1rem}
.tile{aspect-ratio: 1.5 / 1; background:linear-gradient(120deg, rgba(124,58,237,.28), rgba(6,182,212,.28)); border-radius: var(--radius); display:grid; place-items:center; font-weight:700; letter-spacing:.5px; border:1px solid rgba(255,255,255,.08)}

.cta-wide{max-width:var(--max); margin: 0 auto; padding: 6vh var(--pad); background:rgba(255,255,255,.03); border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06); display:flex; align-items:center; justify-content:space-between; gap:1rem; border-radius: var(--radius)}

.page{max-width:var(--max); margin:0 auto; padding: 7vh var(--pad)}
.page h1{margin-top:0}

.grid.two{grid-template-columns: repeat(2,1fr)}

.pricing{display:grid; grid-template-columns: repeat(3,1fr); gap:1rem}
.price{background:var(--card); padding:1.2rem; border-radius:var(--radius); border:1px solid rgba(255,255,255,.08); position:relative}
.price .big{font-size:2rem; font-weight:800}
.price .badge{position:absolute; top:12px; right:12px; font-size:.8rem; background:linear-gradient(120deg, var(--brand-1), var(--brand-2)); padding:.3rem .6rem; border-radius:999px}

.contact{display:grid; gap:.8rem; max-width:680px}
.contact label{display:grid; gap:.35rem}
input, textarea{
  width:100%; padding:.9rem 1rem; background:#0e1320; border:1px solid rgba(255,255,255,.12); border-radius:.9rem; color:var(--text); outline:none;
}
input:focus, textarea:focus{border-color: rgba(6,182,212,.5)}

/* Footer */
.site-footer{margin-top:8vh; background:#0b0f19; padding: 6vh var(--pad); border-top:1px solid rgba(255,255,255,.06)}
.site-footer .grid{max-width:var(--max); margin:0 auto; grid-template-columns: 2fr 1fr 1fr}
.site-footer h4{margin:.2rem 0 .6rem}
.site-footer ul{list-style:none; margin:0; padding:0; display:grid; gap:.25rem}
.site-footer .sub{max-width:var(--max); margin: 2vh auto 0; padding-top:1.2rem; border-top:1px solid rgba(255,255,255,.06); color:var(--muted)}

/* Reveal animation */
.reveal{opacity:0; transform: translateY(16px); transition: .7s ease}
.reveal.is-visible{opacity:1; transform: translateY(0)}

/* Responsive */
@media (max-width: 900px){
  .cards{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns: repeat(2,1fr)}
  .pricing{grid-template-columns: 1fr}
  .grid.two{grid-template-columns:1fr}
  .cta-wide{flex-direction:column; align-items:flex-start}
  .site-footer .grid{grid-template-columns:1fr}
	
}

<section id="evenements">
    <style>
        /* Section Évènements */
        #evenements {
            background-color: #121212; /* fond sombre */
            padding: 40px 20px;
            border-radius: 12px;
            margin: 30px auto;
            max-width: 1000px;
            color: #f1f1f1;
            font-family: Arial, sans-serif;
        }

        #evenements h1 {
            font-size: 2.2rem;
            color: #ffffff;
            margin-bottom: 10px;
        }

        #evenements p {
            font-size: 1.1rem;
            color: #ccc;
            margin-bottom: 25px;
        }

        /* Conteneur en grille pour les cartes */
        .events-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 20px;
        }

        /* Chaque bloc d'évènement */
        .event {
            background: linear-gradient(135deg, #1e1e1e, #2c2c2c);
            padding: 20px;
            border-radius: 20px; /* ✅ arrondi */
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
            transition: transform 0.2s, box-shadow 0.2s;
        }

        /* Effet au survol */
        .event:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.8);
        }

        /* Titre */
        .event h2 {
            font-si