/* Styles spécifiques à la page d'accueil Digita Marketing */

#hero {
    min-height: 100vh;
    background: transparent !important;
    width: 100vw;
    position: relative;
    overflow: hidden;
    margin-bottom: 3.5rem;
    box-shadow: none;
    border-bottom: none;
    border-radius: 0 0 2.5rem 2.5rem;
    z-index: 10;
}

#hero .container.position-relative {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100vw;
    width: 100vw;
}

/* Pour éviter le débordement visuel sur les côtés du hero */
body {
    background: #fff !important;
}

#logos {
    background: linear-gradient(135deg, #f7f7f7 0%, #fff 100%);
    overflow: hidden;
    margin-top: 0 !important;
    padding-top: 2.5rem !important;
}

#logos .container.position-relative {
    margin-top: 0 !important;
}

#videos {
    background-image: url('/assets/images/hero-bg.svg');
    background-position: center 80px;
    overflow: hidden;
}

#tunnel {
    background: linear-gradient(120deg, #f7f7f7 60%, #2563eb11 100%);
    overflow: hidden;
}

#vitrine {
    background-image: url('/assets/images/hero-bg.svg');
    background-position: center 180px;
    overflow: hidden;
}

#ecommerce {
    background: linear-gradient(120deg, #f7f7f7 60%, #FFD70011 100%);
    overflow: hidden;
}

#management {
    background-image: url('/assets/images/hero-bg.svg');
    background-position: center 280px;
    overflow: hidden;
}

#seo {
    background: linear-gradient(120deg, #f7f7f7 60%, #2563eb11 100%);
    overflow: hidden;
}

#publicite {
    background-image: url('/assets/images/hero-bg.svg');
    background-position: center 320px;
    overflow: hidden;
}

#projet {
    background: linear-gradient(120deg, #f7f7f7 60%, #FFD70011 100%);
    overflow: hidden;
}

#ia {
    background-image: url('/assets/images/hero-bg.svg');
    background-position: center 380px;
    overflow: hidden;
}

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

/* Espacement supplémentaire si besoin */
.hero-separator { display: none; }

/* Ajoute un vrai espace visuel entre hero et logos */
@media (min-width: 768px) {
  #hero {
    margin-bottom: 4.5rem;
  }
}

@media (max-width: 767px) {
  #hero {
    margin-bottom: 2rem;
    border-radius: 0 0 1.2rem 1.2rem;
  }
}