/* =========================================================
   AMOTRA GUYANE — Bandeau animé des pages chantiers
   Composant réutilisable .cb (remplace .page-head sur ces pages).
   Variantes : .cb (photo/vidéo réelle), .cb--graphic (sans image
   propre au chantier), .cb--compact (espaces privés).
   ========================================================= */
.cb {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 460px; display: flex; align-items: flex-end;
  background: var(--anthracite); color: var(--on-dark);
}
.cb-still, .cb-video { position: absolute; inset: 0; z-index: -2; }
.cb-still img, .cb-video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.cb-video { opacity: 0; transition: opacity .8s ease; }
.cb-video.is-ready { opacity: 1; }
/* Zone calme pour le titre : voile anthracite à gauche et en bas */
.cb-scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(31,34,38,.86) 0%, rgba(31,34,38,.62) 38%, rgba(31,34,38,.08) 70%),
    linear-gradient(0deg, rgba(31,34,38,.55) 0%, rgba(31,34,38,0) 45%);
}
.cb-inner { padding-block: clamp(48px, 7vw, 80px); max-width: var(--maxw); }
.cb-inner > * { max-width: 34rem; }
.cb h1 { color: #fff; margin-bottom: 0; font-size: clamp(2rem, 3.6vw, 2.9rem); }
.cb .rule { margin: var(--space-5) 0 var(--space-4); }
.cb-inner p:not(.crumbs) { color: var(--on-dark); margin: 0; }
.cb .crumbs { color: var(--on-dark-muted); }
.cb .crumbs a:hover { color: var(--copper-light); text-decoration: underline; }
.cb-credit {
  position: absolute; right: var(--space-6); bottom: var(--space-5); margin: 0;
  font-size: .78rem; color: var(--on-dark-muted); text-shadow: 0 1px 6px rgba(0,0,0,.5);
}
.cb-toggle {
  position: absolute; right: var(--space-6); top: var(--space-5);
  font: inherit; font-size: .8rem; font-weight: 600; color: #fff; cursor: pointer;
  min-height: 36px; padding: 6px 14px; border-radius: var(--radius-xs);
  background: rgba(31,34,38,.6); border: 1px solid var(--hairline-light);
}
.cb-toggle:hover { background: rgba(31,34,38,.85); }

/* Variante sans image propre au chantier : lignes de structure, sans photo */
.cb--graphic {
  background-color: var(--anthracite);
  background-image:
    repeating-linear-gradient(90deg, rgba(180,103,59,.16) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 96px);
}
.cb--graphic .cb-scrim, .cb--graphic .cb-credit { display: none; }

/* Variante compacte (espaces client / sous-traitant) */
.cb--compact { min-height: 160px; }
.cb--compact .cb-inner { padding-block: var(--space-8); }

@media (max-width: 860px) {
  .cb { min-height: 340px; }
  .cb-scrim { background: linear-gradient(0deg, rgba(31,34,38,.92) 0%, rgba(31,34,38,.7) 55%, rgba(31,34,38,.3) 100%); }
  .cb h1 { font-size: 1.9rem; }
  .cb-inner { padding-block: var(--space-10) var(--space-12); }
  .cb-credit { left: var(--space-4); right: auto; bottom: var(--space-3); }
  .cb-toggle { right: var(--space-4); top: var(--space-4); }
}
@media (prefers-reduced-motion: reduce) {
  .cb-video, .cb-toggle { display: none !important; }
}