/* ==========================================================================
   Bandeaux d'onglet et motif de la semaine
   ========================================================================== */

.band {
  position: relative;
  display: grid;
  align-items: end;
  padding: clamp(140px, 18vh, 190px) var(--gutter) clamp(34px, 5vw, 54px);
  overflow: hidden;
  background: var(--green-dark);
  color: var(--white);
}

/* L'accueil donne toute sa hauteur à la vidéo, un onglet s'en tient à une bande. */
.band-media {
  min-height: min(520px, 62svh);
}

.band-hero.band-media {
  min-height: min(760px, 92svh);
}

.band-compact {
  padding-bottom: clamp(40px, 6vw, 66px);
}

.band-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Voile de lecture. Trois couches, de haut en bas de la pile : la tête du
   bandeau, que la navigation traverse en blanc et qui doit tenir ses 4,5:1 quelle
   que soit la vidéo dessous, la lecture en largeur, puis le pied où se pose le
   texte de surimpression. */
.band-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(18, 81, 59, 0.88), rgba(18, 81, 59, 0) 34%),
    linear-gradient(90deg, rgba(18, 81, 59, 0.9), rgba(18, 81, 59, 0.5) 58%, rgba(18, 81, 59, 0.72)),
    linear-gradient(0deg, rgba(20, 32, 27, 0.62), rgba(20, 32, 27, 0) 58%);
}

/* Le mortier de la page formation reste un filigrane. Ce voile là est presque
   opaque, il ne vaut que pour l'illustration ; dès qu'une vidéo passe dessous,
   c'est le voile commun qui s'applique. */
.band.theme-formation:not(.band-media) .band-shade {
  background: linear-gradient(90deg, rgba(18, 81, 59, 0.94), rgba(18, 81, 59, 0.82));
}

.band-compact .band-shade {
  background: linear-gradient(90deg, rgba(18, 81, 59, 0.95), rgba(18, 81, 59, 0.78));
}

/* Commande d'arrêt du fond animé. Discrète, mais dans le flux du clavier et
   au dessus du voile, jamais cachée derrière lui. */
.band-motion {
  position: absolute;
  top: clamp(96px, 12vh, 132px);
  right: var(--gutter);
  z-index: 3;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(18, 81, 59, 0.55);
  color: var(--white);
  font-family: var(--font-label);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease;
}

.band-motion:hover {
  border-color: var(--white);
  background: rgba(18, 81, 59, 0.85);
}

.band-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
}

.band .eyebrow {
  color: var(--green-soft);
}

/* Fil d'Ariane du bandeau, à la place du surtitre : même graphie, mais il situe
   la page au lieu de la nommer. */
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  color: var(--green-soft);
  font-family: var(--font-label);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.breadcrumb li {
  display: flex;
  align-items: center;
  gap: 12px;
}

.breadcrumb li + li::before {
  content: "";
  width: 18px;
  height: 1px;
  flex: none;
  background: currentcolor;
}

.breadcrumb a {
  opacity: 0.8;
  transition: opacity 200ms ease;
}

.breadcrumb a:hover {
  opacity: 1;
}

.breadcrumb [aria-current] {
  color: var(--white);
}

.band-hero h1 {
  max-width: none;
  font-size: clamp(2rem, 9vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
}

.band-hero .band-lead {
  max-width: 46ch;
  text-wrap: balance;
}

.band-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.4vw, 1.1rem);
}

.band-list li {
  position: relative;
  padding-left: 22px;
}

.band-list li::before {
  content: "";
  position: absolute;
  top: 0.75em;
  left: 0;
  width: 12px;
  height: 1px;
  background: currentcolor;
}

.band-lead {
  max-width: 56ch;
  margin: 0;
  color: var(--ink-soft);
  font-size: clamp(1.02rem, 1.5vw, 1.16rem);
}

.band-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(28px, 4vw, 44px);
}