/* Bandeau n8n de la page IAODC : dernière bande de la pile d'images pleine largeur.
   Image à gauche, à fond perdu : l'inverse du bloc « À voir ensuite » juste dessous.
   Le rapport du cadre est le même partout pour garder le même morceau de l'image :
   la rangée de nœuds du workflow. */

.bandeau {
  --bandeau-nuit: oklch(14.5% 0.004 270);
  --bandeau-craie: oklch(100% 0 0);
  --bandeau-marge: 6vw;
  --bandeau-sortie: cubic-bezier(0.23, 1, 0.32, 1);

  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  margin-bottom: clamp(3rem, 5vw, 5rem);
  background: var(--bandeau-nuit);
  color: var(--bandeau-craie);
  font-family: aktiv-grotesk, sans-serif;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.bandeau-cadre {
  display: block;
  aspect-ratio: 5.4 / 1;
  overflow: hidden;
  transition: opacity 120ms ease;
}

.bandeau .bandeau-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%; /* s'arrête au-dessus des légendes, qui seraient coupées */
  transition: transform 280ms var(--bandeau-sortie);
}

.bandeau-titre {
  padding: 0.75em var(--bandeau-marge);
  /* Échelle de la pagination du site : le titre du bloc suivant reste le plus fort. */
  font-size: clamp(1.6rem, 1.46rem + 0.686vw, 2.4rem);
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: break-word;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
  transition: opacity 120ms ease;
}

.bandeau:active .bandeau-cadre,
.bandeau:active .bandeau-titre {
  opacity: 0.8;
}

/* Le contour reste lisible sur la nuit comme sur l'image claire : blanc et noir accolés. */
.bandeau:focus-visible {
  outline: 2px solid transparent;
}

.bandeau:focus-visible::after {
  content: "";
  position: absolute;
  inset: 4px;
  outline: 2px solid var(--bandeau-craie);
  box-shadow: 0 0 0 2px var(--bandeau-nuit);
  pointer-events: none;
}

@media (min-width: 768px) {
  .bandeau {
    --bandeau-marge: 3vw;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .bandeau-titre {
    padding-block: 0;
  }
}

@media (hover: hover) and (pointer: fine) {
  .bandeau:hover .bandeau-image {
    transform: scale(1.02);
  }

  .bandeau:hover .bandeau-titre {
    text-decoration-line: underline;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bandeau .bandeau-image {
    transition: opacity 160ms ease;
  }
}

@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
  .bandeau:hover .bandeau-image {
    transform: none;
    opacity: 0.88;
  }
}