@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;900&display=swap');

    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      font-family: 'Montserrat', sans-serif;
      background: #050510;
      overflow-x: hidden;
    }
    body,
    html {
      margin: 0;
      padding: 0;
    }
    
    .elementor-section-wrap > .elementor-section:first-child {
      margin-top: 0 !important;
      padding-top: 0 !important;
    }

    /* ─── HERO ─── */
    .hero {
      position: relative;
      width: 100%;
      height: 100vh;
      min-height: 500px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background: radial-gradient(ellipse at 50% 60%, #0a0a2e 0%, #050510 70%);
    }

    /* ─── CANVAS FLUID ─── */
    #fluidCanvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
    }

    /* ─── PARTICULES ─── */
    #particleCanvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 2;
    }

    /* ─── SCAN LINES ─── */
    .scanlines {
      position: absolute;
      inset: 0;
      z-index: 3;
      background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 3px,
        rgba(0,0,0,0.12) 3px,
        rgba(0,0,0,0.12) 4px
      );
      pointer-events: none;
      animation: scanMove 8s linear infinite;
    }
    @keyframes scanMove {
      0%   { background-position: 0 0; }
      100% { background-position: 0 100px; }
    }

    /* ─── OVERLAY VIGNETTE ─── */
    .vignette {
      position: absolute;
      inset: 0;
      z-index: 4;
      background: radial-gradient(ellipse at center,
        transparent 40%,
        rgba(5,5,16,0.75) 100%
      );
      pointer-events: none;
    }

    /* ─── GLITCH OVERLAY ─── */
    .glitch-overlay {
      position: absolute;
      inset: 0;
      z-index: 5;
      pointer-events: none;
      animation: glitchOv 6s infinite;
    }
    @keyframes glitchOv {
      0%,94%,100% { opacity: 0; }
      95%          { opacity: 1; background: rgba(0,200,255,0.04); clip-path: inset(30% 0 55% 0); }
      96%          { opacity: 1; background: rgba(255,0,120,0.04); clip-path: inset(60% 0 10% 0); }
      97%          { opacity: 0; }
    }

    /* ─── CONTENU ─── */
    .hero-content {
      position: relative;
      z-index: 10;
      text-align: center;
      padding: 0 20px;
      user-select: none;
    }

    /* Badge pré-titre */
    .hero-badge {
      display: inline-block;
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.35em;
      color: #00d4ff;
      text-transform: uppercase;
      padding: 5px 18px;
      border: 1px solid rgba(0,212,255,0.45);
      border-radius: 30px;
      margin-bottom: 22px;
      background: rgba(0,212,255,0.07);
      backdrop-filter: blur(6px);
      animation: fadeDown 1s ease both, pulseBorder 3s ease infinite 1s;
    }
    @keyframes fadeDown {
      from { opacity:0; transform: translateY(-20px); }
      to   { opacity:1; transform: translateY(0); }
    }
    @keyframes pulseBorder {
      0%,100% { border-color: rgba(0,212,255,0.45); box-shadow: 0 0 0 0 rgba(0,212,255,0); }
      50%      { border-color: rgba(0,212,255,0.9);  box-shadow: 0 0 18px 4px rgba(0,212,255,0.2); }
    }

    /* Titre principal */
    .hero-title {
      font-size: clamp(2.2rem, 6vw, 5.5rem);
      font-weight: 900;
      line-height: 1.05;
      letter-spacing: -0.01em;
      text-transform: uppercase;
      color: #fff;
      animation: fadeUp 1s ease 0.2s both;
    }
    .hero-title .brand {
      display: inline-block;
      background: linear-gradient(90deg, #ff2d78, #ff7c00, #00d4ff, #a855f7);
      background-size: 300% 100%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: gradientShift 4s linear infinite, fadeUp 1s ease 0.2s both;
    }
    @keyframes gradientShift {
      0%   { background-position: 0% 50%; }
      100% { background-position: 300% 50%; }
    }

    /* Effet glitch sur le titre */
    .hero-title .glitch {
      position: relative;
      display: inline-block;
    }
    .hero-title .glitch::before,
    .hero-title .glitch::after {
      content: attr(data-text);
      position: absolute;
      top: 0; left: 0;
      width: 100%;
      overflow: hidden;
      -webkit-text-fill-color: #fff;
      color: #fff;
    }
    .hero-title .glitch::before {
      animation: glitch1 5s infinite;
      color: #ff2d78;
      -webkit-text-fill-color: #ff2d78;
      clip-path: inset(0 0 70% 0);
    }
    .hero-title .glitch::after {
      animation: glitch2 5s infinite;
      color: #00d4ff;
      -webkit-text-fill-color: #00d4ff;
      clip-path: inset(60% 0 0 0);
    }
    @keyframes glitch1 {
      0%,90%,100% { transform: none; opacity:0; }
      91% { transform: translate(-3px,1px); opacity:0.7; }
      93% { transform: translate(3px,-1px); opacity:0.7; }
      95% { transform: none; opacity:0; }
    }
    @keyframes glitch2 {
      0%,88%,100% { transform: none; opacity:0; }
      89% { transform: translate(3px,2px); opacity:0.6; }
      91% { transform: translate(-3px,-2px); opacity:0.6; }
      93% { transform: none; opacity:0; }
    }

    /* Tagline */
    .hero-tagline {
      margin-top: 18px;
      font-size: clamp(0.85rem, 1.8vw, 1.15rem);
      font-weight: 400;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.7);
      animation: fadeUp 1s ease 0.45s both;
    }

    /* Séparateur animé */
    .hero-divider {
      margin: 26px auto;
      width: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, #ff2d78, #00d4ff, transparent);
      border-radius: 2px;
      animation: expandLine 1.2s ease 0.7s forwards;
    }
    @keyframes expandLine {
      to { width: 320px; }
    }

    /* Description */
    .hero-desc {
      max-width: 560px;
      margin: 0 auto 36px;
      font-size: clamp(0.85rem, 1.4vw, 1rem);
      color: rgba(255,255,255,0.55);
      line-height: 1.75;
      animation: fadeUp 1s ease 0.8s both;
    }

    /* Boutons CTA */
    .hero-cta {
      display: flex;
      gap: 16px;
      justify-content: center;
      flex-wrap: wrap;
      animation: fadeUp 1s ease 1s both;
    }

    .btn {
      padding: 14px 36px;
      border-radius: 50px;
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 0.85rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      cursor: pointer;
      border: none;
      transition: transform 0.25s ease, box-shadow 0.25s ease;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .btn:hover { transform: translateY(-3px) scale(1.04); }

    .btn-primary {
      background: linear-gradient(135deg, #ff2d78, #a855f7);
      color: #fff;
      box-shadow: 0 0 30px rgba(255,45,120,0.45);
    }
    .btn-primary:hover { box-shadow: 0 0 50px rgba(255,45,120,0.7); }

    .btn-secondary {
      background: transparent;
      color: #fff;
      border: 2px solid rgba(0,212,255,0.6);
      box-shadow: 0 0 20px rgba(0,212,255,0.2);
    }
    .btn-secondary:hover { box-shadow: 0 0 40px rgba(0,212,255,0.5); border-color: #00d4ff; }

    /* Indicateur de scroll */
    .scroll-hint {
      position: absolute;
      bottom: 32px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 10;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      color: rgba(255,255,255,0.35);
      font-size: 0.65rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      animation: fadeIn 2s ease 2s both;
    }
    .scroll-hint .mouse {
      width: 22px;
      height: 34px;
      border: 2px solid rgba(255,255,255,0.3);
      border-radius: 12px;
      position: relative;
    }
    .scroll-hint .mouse::after {
      content: '';
      position: absolute;
      top: 6px;
      left: 50%;
      transform: translateX(-50%);
      width: 3px;
      height: 6px;
      background: rgba(255,255,255,0.6);
      border-radius: 3px;
      animation: scrollDot 1.8s ease infinite;
    }
    @keyframes scrollDot {
      0%   { top:6px; opacity:1; }
      80%  { top:18px; opacity:0; }
      100% { top:6px; opacity:0; }
    }

    @keyframes fadeUp {
      from { opacity:0; transform: translateY(30px); }
      to   { opacity:1; transform: translateY(0); }
    }
    @keyframes fadeIn {
      from { opacity:0; }
      to   { opacity:1; }
    }

    /* ─── RESPONSIVE ─── */
    @media (max-width: 600px) {
      .hero-divider { max-width: 200px; }
      .btn { padding: 12px 24px; font-size: 0.75rem; }
    }
    /* ─── Supprime la marge haute du hero ─── */
    .hero {
      margin-top: 0 !important;
      padding-top: 0 !important;
    }
    
    /* ─── Supprime les marges du wrapper Elementor ─── */
    .elementor-section-wrap,
    .elementor-section-wrap > .elementor-section:first-child,
    .elementor-section-wrap > .e-con:first-child {
      margin-top: 0 !important;
      padding-top: 0 !important;
    }
    
    /* ─── Compense la hauteur du header fixe ─── */
    body {
      margin-top: 0 !important;
      padding-top: 0 !important;
    }
    
    /* ─── Si le thème ajoute un padding-top au body pour le header sticky ─── */
    body.admin-bar .hero {
      margin-top: 0 !important;
    }
    
    /* ─── Hello Biz spécifique ─── */
    .site-content,
    .site-main,
    #content,
    #primary,
    .wp-site-blocks {
      padding-top: 0 !important;
      margin-top: 0 !important;
    }
    /* ─── Header flottant au-dessus du hero ─── */
    #site-header,
    .site-header {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      z-index: 999 !important;
      background: transparent !important;
      box-shadow: none !important;
    }
    
    /* ─── Empêche le body de compenser la hauteur du header ─── */
    body {
      padding-top: 0 !important;
      margin-top: 0 !important;
    }
    /* ─── Supprime le débordement horizontal global ─── */
    html,
    body {
      overflow-x: hidden !important;
      max-width: 100% !important;
    }
    
    /* ─── Corrige le hero qui dépasse ─── */
    .hero {
      width: 100% !important;
      max-width: 100% !important;
      overflow: hidden !important;
      left: 0 !important;
      right: 0 !important;
      box-sizing: border-box !important;
    }
    
    /* ─── Corrige les canvas qui peuvent déborder ─── */
    #fluidCanvas,
    #particleCanvas {
      width: 100% !important;
      max-width: 100% !important;
      left: 0 !important;
      right: 0 !important;
    }
    
    /* ─── Corrige le wrapper Elementor ─── */
    .elementor-section-wrap,
    .elementor-section,
    .e-con {
      max-width: 100% !important;
      overflow-x: hidden !important;
    }
    /* ─── Supprime le padding du container Elementor qui contient le hero ─── */
    .elementor-element-8f465b4.e-con-full,
    .elementor-element-8f465b4 {
      padding: 0 !important;
    }