/* Fixes CSS — robust fallbacks for production on Linux servers (case-sensitive paths, cache-busting applied) */
#collaborateurs,
section.collaborateurs{
  background:#0b0b0b;
  padding:80px 0 100px 0;
}
#collaborateurs h2,
section.collaborateurs h2{
  text-align:center;
  margin:0 0 8px;
  color:#00ff00;
  font-weight:700;
}
#collaborateurs .subtitle,
section.collaborateurs .subtitle{
  margin:0;
  text-align:center;
  color:#9ca3af;
}
#collaborateurs .logos,
section.collaborateurs .logos{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:clamp(24px,6vw,80px);
  max-width:1200px;
  margin:48px auto 0;
  padding:0 16px;
}
#collaborateurs .logos img,
section.collaborateurs .logos img{
  display:block;
  max-height:72px;
  max-width:clamp(120px,18vw,260px);
  height:auto; width:auto; object-fit:contain;
}
/* Prevent accidental huge images if base CSS fails */
img[alt~="Spoutnik"], img[alt~="Dormakaba"], img[alt~="Autosphere"]{ height:auto !important; width:auto !important; }
/* v2 – enlarge logos and kill inner box effect */
#collaborateurs .container,
section.collaborateurs .container{
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding-left: 0;
  padding-right: 0;
}

#collaborateurs .logos img,
section.collaborateurs .logos img{
  /* Much larger logos, responsive clamp */
  max-height: clamp(110px, 16vw, 220px);
  max-width: clamp(220px, 32vw, 420px);
}

/* Keep plenty of vertical space */
#collaborateurs .logos,
section.collaborateurs .logos{
  gap: clamp(32px, 8vw, 120px);
  margin-top: 32px;
  margin-bottom: 12px;
}


/* v3 — Heading beauty + double logo size */
#collaborateurs h2,
section.collaborateurs h2{
  position: relative;
  display: inline-block;
  margin: 0 auto 8px auto;
  padding: 6px 16px;
  font-weight: 800;
  font-size: clamp(34px, 4.2vw, 48px);
  line-height: 1.15;
  color: #9eff9e !important; /* override inline green */
  text-align: center;
  text-shadow: 0 0 10px rgba(50,255,120,.35), 0 2px 0 rgba(0,0,0,.55);
  border-radius: 14px;
}
#collaborateurs h2::after,
section.collaborateurs h2::after{
  content:"";
  display:block;
  width: clamp(160px, 42%, 420px);
  height: 4px;
  margin: 10px auto 0;
  background: radial-gradient(ellipse at center, rgba(80,255,160,.8), rgba(80,255,160,0) 60%);
  filter: blur(0.6px);
  border-radius: 999px;
  pointer-events: none;
}

/* Double the logos compared to v2 */
#collaborateurs .logos img,
section.collaborateurs .logos img{
  max-height: clamp(220px, 32vw, 440px);
  max-width:  clamp(400px, 64vw, 840px);
}

/* Keep layout from breaking too hard on small screens */
@media (max-width: 768px){
  #collaborateurs .logos img,
  section.collaborateurs .logos img{
    max-height: 120px;
    max-width:  260px;
  }
  #collaborateurs h2,
  section.collaborateurs h2{
    font-size: clamp(28px, 7vw, 34px);
  }
}


/* v3 – titre stylé (glow léger) + logos x2 */
#collaborateurs h2,
section.collaborateurs h2{
  position: relative;
  z-index: 1;
  letter-spacing: .5px;
  text-shadow:
    0 2px 0 rgba(0,0,0,.45),
    0 0 12px rgba(0,255,64,.55),
    0 0 36px rgba(0,255,64,.25);
}
#collaborateurs h2::after,
section.collaborateurs h2::after{
  content:"";
  display:block;
  height:3px;
  width: clamp(140px, 22vw, 260px);
  margin:12px auto 0;
  background: linear-gradient(90deg, rgba(0,255,64,0) 0%, rgba(0,255,64,.95) 50%, rgba(0,255,64,0) 100%);
  border-radius:999px;
  box-shadow: 0 0 10px rgba(0,255,64,.6), 0 0 20px rgba(0,255,64,.25);
}

#collaborateurs h2::before,
section.collaborateurs h2::before{
  content:"";
  position:absolute;
  inset:-18px -36px;
  background: radial-gradient(60% 45% at 50% 60%, rgba(0,255,64,.12), rgba(0,255,64,0) 60%);
  filter: blur(12px);
  z-index: -1;
}

/* x2 logo sizes vs v2 */
#collaborateurs .logos img,
section.collaborateurs .logos img{
  max-height: clamp(220px, 32vw, 440px);
  max-width:  clamp(440px, 64vw, 840px);
}

#collaborateurs .logos,
section.collaborateurs .logos{
  gap: clamp(36px, 10vw, 140px);
}

/* v4 – Logos en LIGNE (grid 3/2/1) et tailles grandes mais contenues */
#collaborateurs .logos,
section.collaborateurs .logos{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  gap: clamp(28px, 6vw, 80px);
  max-width: 1400px;
  margin: 36px auto 0;
  padding: 0 16px;
}
@media (max-width: 1024px){
  #collaborateurs .logos,
  section.collaborateurs .logos{
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px){
  #collaborateurs .logos,
  section.collaborateurs .logos{
    grid-template-columns: 1fr;
  }
}
/* Logos x2 par rapport à la v2, mais adaptés à la grille */
#collaborateurs .logos img,
section.collaborateurs .logos img{
  width: clamp(240px, 30vw, 460px);
  max-width: 100%;
  height: auto;
  max-height: clamp(130px, 15vw, 220px);
}


/* v5 – neutralise tout fond/ombre dans la section (ciblage strict au scope) */
#collaborateurs, section.collaborateurs{
  background: #0b0b0b !important;
}
#collaborateurs *, section.collaborateurs *{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
/* Conserve uniquement les images/logos */
#collaborateurs .logos img, section.collaborateurs .logos img{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* ===== Desktop-only background video for collaborators section ===== */
@media (min-width: 1025px){
  #collaborateurs.collab--video-desktop{ position:relative; overflow:hidden; }
  #collaborateurs.collab--video-desktop .collab-video-bg-desktop{
    position:absolute; inset:0; z-index:0; pointer-events:none;
  }
  #collaborateurs.collab--video-desktop .collab-video-desktop{
    width:100%; height:100%; object-fit:cover; object-position:center;
    filter:brightness(0.58); background:#395a28; opacity:0; transition:opacity .6s ease;
  }
  #collaborateurs.collab--video-desktop .collab-video-desktop:where([src]){ opacity:1; }
  #collaborateurs.collab--video-desktop .collab-video-overlay-desktop{
    position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.18));
  }
  #collaborateurs.collab--video-desktop .section-title,
  #collaborateurs.collab--video-desktop .section-subtitle,
  #collaborateurs.collab--video-desktop .logos{ position:relative; z-index:2; }
}

/* v7 – Desktop video layering like hero */
@media (min-width: 1025px){
  #collaborateurs.collab--video-desktop{
    position: relative;
    overflow: hidden;
    background: transparent !important; /* section bg must not mask the video */
  }
  /* Kill stray backgrounds in the section (without affecting images) */
  #collaborateurs.collab--video-desktop *{
    background: transparent !important;
  }
  #collaborateurs.collab--video-desktop .collab-video-bg-desktop{
    position: absolute; inset: 0;
    z-index: -1; /* like the hero video */
    pointer-events: none;
  }
  #collaborateurs.collab--video-desktop .collab-video-desktop{
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    opacity: 0; transition: opacity .6s ease;
    background: #395a28;
  }
  #collaborateurs.collab--video-desktop .collab-video-overlay-desktop{
    position: absolute; inset: 0; z-index: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.20));
    pointer-events: none;
  }
  #collaborateurs.collab--video-desktop .section-title,
  #collaborateurs.collab--video-desktop .section-subtitle,
  #collaborateurs.collab--video-desktop .logos{
    position: relative; z-index: 1;
  }
}