/*
 * Bloc : lg/marque-hero
 *
 * Hero plein écran — images responsives + titre en overlay haut-gauche.
 * Décoration graphique : deux brackets en L (SVG inline).
 *
 * Breakpoints :
 *   mobile  < 768px
 *   tablet  768px – 1023px
 *   desktop ≥ 1024px
 */

/* ================================================================
   Tokens locaux (redéfinis par breakpoint via media queries)
   ================================================================ */

.lg-marque-hero {
  --mh-height:       580px;
  --mh-pad-top:      15%;
  --mh-pad-left:     6%;
  --mh-eyebrow-size: 2rem;
  --mh-eyebrow-lh:   2.5rem;
  --mh-title-size:   2.125rem;
  --mh-title-lh:     3rem;

  position: relative;
  width: 100%;
  height: var(--mh-height);
  overflow: hidden;
}

/* ================================================================
   Picture — full cover
   ================================================================ */

.lg-marque-hero__picture {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.lg-marque-hero__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ================================================================
   Overlay — positionne le contenu texte
   ================================================================ */

.lg-marque-hero__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding-top:   var(--mh-pad-top);
  padding-left:  var(--mh-pad-left);
  padding-right: 8%;
  pointer-events: none;
}

.lg-marque-hero__content {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 85vw;
  pointer-events: auto;
}

/* ================================================================
   Eyebrow — blanc, uppercase
   ================================================================ */

.lg-marque-hero__eyebrow {
  font-family:    var(--ff-heading);
  font-size:      var(--mh-eyebrow-size);
  font-weight:    var(--fw-bold);
  line-height:    var(--mh-eyebrow-lh);
  text-transform: uppercase;
  color:          var(--color-blanc);
  margin:  0;
  padding: 0;
}

/* ================================================================
   Titre marque — rouge, glow blanc léger
   ================================================================ */

.lg-marque-hero__title {
  font-family:    var(--ff-heading);
  font-size:      var(--mh-title-size);
  font-weight:    var(--fw-bold);
  line-height:    var(--mh-title-lh);
  text-transform: uppercase;
  color:          var(--color-rouge-lg);
  text-shadow:    0 0 10px rgba(255, 255, 255, 0.5);
  margin:  0;
  padding: 0;
  padding-left: 2rem;
}

/* ================================================================
   Décoration SVG — deux brackets en L
   ================================================================ */

.lg-marque-hero__deco {
  position:       absolute;
  top:            36%;
  left:           24%;
  width:          65%;
  height:         auto;
  color:          var(--color-rouge-lg);
  pointer-events: none;
  overflow:       visible;
}

/* ================================================================
   TABLET — 768px – 1023px
   ================================================================ */

@media (min-width: 768px) {
  .lg-marque-hero {
    --mh-height:       520px;
    --mh-pad-top:      9%;
    --mh-pad-left:     4.5%;
    --mh-eyebrow-size: 2.75rem;
    --mh-eyebrow-lh:   3.5rem;
    --mh-title-size:   3.25rem;
    --mh-title-lh:     3.75rem;
  }

  .lg-marque-hero__content {
    max-width: 460px;
  }

  .lg-marque-hero__deco {
    top:   32%;
    left:  26%;
    width: 50%;
  }
}

/* ================================================================
   DESKTOP — ≥ 1024px
   ================================================================ */

@media (min-width: 1024px) {
  .lg-marque-hero {
    --mh-height:       680px;
    --mh-pad-top:      10%;
    --mh-pad-left:     5.5%;
    --mh-eyebrow-size: 4rem;
    --mh-eyebrow-lh:   5rem;
    --mh-title-size:   4.5rem;
    --mh-title-lh:     5rem;
  }

  .lg-marque-hero__content {
    max-width: 41rem;
    padding-left: 4rem;
  }

  .lg-marque-hero__deco {
    top:   30%;
    left:  26%;
    width: 43%;
  }
}