/* ==========================================================================
   evilz.fr — styles PROPRES À LA PAGE D'ACCUEIL

   Cette feuille n'est chargée que par /. Elle ne contient que les
   habillages visuels de l'accueil : les visuels de la chaîne servent de
   fond aux sections existantes, jamais de galerie autonome.
   ========================================================================== */

/* ------------------------------------------------- hero : photo de LAN --- */

.hero--lan {
  background-position: center 30%;
  background-image:
    linear-gradient(180deg, rgba(13, 15, 11, .78) 0%, rgba(13, 15, 11, .90) 64%, var(--bg) 100%),
    url("/assets/img/live/live-zlan.jpg");
  background-image:
    linear-gradient(180deg, rgba(13, 15, 11, .78) 0%, rgba(13, 15, 11, .90) 64%, var(--bg) 100%),
    image-set(url("/assets/img/live/live-zlan.webp") type("image/webp"),
              url("/assets/img/live/live-zlan.jpg")  type("image/jpeg"));
}

/* Le titre de l'accueil est plus long que celui de la page PZ : à 16ch
   (valeur générique) il partirait en quatre lignes. */
.hero--lan h1 { max-width: 21ch; }

/* Rangée d'étiquettes « types de contenu » sous l'accroche du hero. */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 2rem;
}

/* ------------------------------------------ sections illustrées en fond --- */

/* Les voiles sont volontairement très opaques (≈ 0.92) : ces sections
   portent du texte courant, pas un titre isolé comme le hero. En dessous,
   le contraste passe sous le seuil lisible. */
.section--illus {
  background-color: var(--bg-alt);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: scroll;
}

.section--live {
  background-image:
    linear-gradient(180deg, rgba(13, 15, 11, .93), rgba(13, 15, 11, .95)),
    url("/assets/img/live/live-stream.jpg");
  background-image:
    linear-gradient(180deg, rgba(13, 15, 11, .93), rgba(13, 15, 11, .95)),
    image-set(url("/assets/img/live/live-stream.webp") type("image/webp"),
              url("/assets/img/live/live-stream.jpg")  type("image/jpeg"));
}

.section--projets {
  background-image:
    linear-gradient(180deg, rgba(13, 15, 11, .92), rgba(13, 15, 11, .95)),
    url("/assets/img/live/live-setup.jpg");
  background-image:
    linear-gradient(180deg, rgba(13, 15, 11, .92), rgba(13, 15, 11, .95)),
    image-set(url("/assets/img/live/live-setup.webp") type("image/webp"),
              url("/assets/img/live/live-setup.jpg")  type("image/jpeg"));
}

/* ------------------------------------------------- bandeau d'ambiance --- */

/* Bande fine illustrée par la sortie moto, avec une seule phrase.
   Sert de respiration entre deux sections denses. */
.band {
  position: relative;
  padding-block: clamp(56px, 9vw, 96px);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background-color: var(--bg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 60%;
}

.band--moto {
  background-image:
    linear-gradient(90deg, rgba(13, 15, 11, .94) 0%, rgba(13, 15, 11, .80) 55%, rgba(13, 15, 11, .62) 100%),
    url("/assets/img/live/live-moto.jpg");
  background-image:
    linear-gradient(90deg, rgba(13, 15, 11, .94) 0%, rgba(13, 15, 11, .80) 55%, rgba(13, 15, 11, .62) 100%),
    image-set(url("/assets/img/live/live-moto.webp") type("image/webp"),
              url("/assets/img/live/live-moto.jpg")  type("image/jpeg"));
}

.band p {
  margin: 0;
  max-width: 30ch;
  font-size: clamp(1.25rem, 3.2vw, 1.85rem);
  font-weight: 800;
  line-height: 1.25;
  color: var(--text-strong);
}

.band p em {
  font-style: normal;
  color: var(--accent);
}