@charset "UTF-8";

/* Bandeau d'accroche — habillage du module mod_sema_hero. */

/* Cassiopeia contraint tout .grid-child à 1320px ; la maquette veut un bandeau
   pleine largeur, donc la position banner traverse toute la grille. */
.site-grid > .container-banner {
  grid-column: full-start / full-end;
  display: block;
  max-width: none;
  padding: 0;
}

.sema-hero {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(4rem, 7vw, 6rem);
  padding-inline: var(--rem-marge-page);
  color: var(--rem-creme);
  background-color: var(--rem-olive);
}

/* La colonne de texte est un peu plus large : le titre doit tenir ses lignes
   sans césure, notamment le fragment accentué. */
@media (width >= 60rem) {
  .sema-hero {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  }
}

.sema-hero__titre {
  margin: 0 0 clamp(1.25rem, 2.5vw, 2rem);
  color: inherit;
  font-family: var(--rem-police-display);
  font-size: clamp(2.1rem, 4.4vw, 3.6rem);
  font-weight: 800;
  line-height: 1.04;
  text-transform: uppercase;
}

/* Le fragment accentué occupe sa propre ligne, comme dans la maquette. */
.sema-hero__accent {
  display: block;
  color: var(--rem-moutarde);
}

.sema-hero__intro {
  max-inline-size: 34rem;
  margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
  font-family: var(--rem-police-mono);
  font-size: 1rem;
  line-height: 1.9;
}

.sema-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.25rem;
  margin: 0;
}

/* ---------------------------------------------------------------- Visuel */

.sema-hero__visuel {
  position: relative;
  padding-block-end: clamp(3rem, 6vw, 5rem);
}

.sema-hero__photo {
  padding: 0.7rem;
  background-color: var(--rem-creme);
  box-shadow: 0 1rem 2rem rgb(35 35 31 / 0.3);
}

.sema-hero__photo img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.sema-hero__photo--grande {
  inline-size: 84%;
  transform: rotate(-1.5deg);
}

.sema-hero__photo--petite {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  inline-size: 46%;
  transform: rotate(2.5deg);
}

/* Les photos fournies sont en portrait : on les recadre en paysage comme la maquette. */
.sema-hero__photo--petite img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.sema-hero__etiquette {
  position: absolute;
  inset-block-end: 3.5rem;
  inset-inline-start: 0;
  margin: 0;
  padding: 0.6rem 1.1rem;
  color: var(--rem-encre);
  background-color: var(--rem-kraft);
  font-family: var(--rem-police-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transform: rotate(-1.5deg);
}

@media (width < 60rem) {
  .sema-hero__visuel {
    padding-block-end: 0;
  }

  .sema-hero__photo--grande {
    inline-size: 100%;
  }

  /* La seconde photo est un rappel décoratif : elle ne survit pas au passage en colonne. */
  .sema-hero__photo--petite {
    display: none;
  }

  .sema-hero__etiquette {
    position: static;
    display: inline-block;
    margin-block-start: 1.25rem;
  }
}