/* ===== HEADER FRONT-PAGE : image mobile plein écran carré (1:1) ===== */

/* Desktop / tablette : inchangé */
.header-front-page .wp-block-cover,
.header-front-page .wp-block-cover__image-background,
.header-front-page .wp-block-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  background-size: cover;
  background-position: center;
}

/* --- Mobile --- */
@media (max-width: 767px) {
  /* Ciblage SANS balises : uniquement classes/attributs WP */
  /* 1) Ta classe prévue */
  .header-front-page,
  .header-front-page .wp-block-cover,
  /* 2) Template Part « header » (aucun nom de balise) */
  .home .wp-block-template-part[area="header"] .wp-block-cover,
  .home .wp-site-blocks > .wp-block-template-part[area="header"] .wp-block-cover,
  /* 3) Secours : premier Cover de la home (si le hero est dans le contenu) */
  .home .wp-block-cover:first-of-type {
    background-image: url("https://ateliersducarnaval.ca/wp-content/uploads/2025/10/Bebas-carnaval-Copie.png") !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;

    /* carré 1:1 — robuste, sans dépendre du balisage */
    width: 100% !important;
    height: 100vw !important;
    min-height: 100vw !important;
    max-height: 100vw !important;

    margin: 0 !important;
    position: relative !important;
    box-sizing: border-box !important;
    overflow: hidden !important;

    /* compatible navigateurs modernes (sans nuire au fallback) */
    aspect-ratio: 1 / 1;
  }

  /* Neutraliser les hauteurs inline que WP colle parfois sur le Cover */
  .header-front-page .wp-block-cover[style*="min-height"],
  .header-front-page .wp-block-cover[style*="height"],
  .home .wp-block-template-part[area="header"] .wp-block-cover[style*="min-height"],
  .home .wp-block-template-part[area="header"] .wp-block-cover[style*="height"],
  .home .wp-site-blocks > .wp-block-template-part[area="header"] .wp-block-cover[style*="min-height"],
  .home .wp-site-blocks > .wp-block-template-part[area="header"] .wp-block-cover[style*="height"],
  .home .wp-block-cover:first-of-type[style*="min-height"],
  .home .wp-block-cover:first-of-type[style*="height"] {
    height: 100vw !important;
    min-height: 100vw !important;
    max-height: 100vw !important;
  }

  /* Cacher toute ressource img/vidéo interne SANS utiliser de balises */
  .header-front-page .wp-block-cover__image-background,
  .header-front-page .wp-block-cover [src],
  .header-front-page .wp-block-image [src],
  .home .wp-block-template-part[area="header"] .wp-block-cover__image-background,
  .home .wp-block-template-part[area="header"] .wp-block-cover [src],
  .home .wp-block-template-part[area="header"] .wp-block-image [src],
  .home .wp-site-blocks > .wp-block-template-part[area="header"] .wp-block-cover__image-background,
  .home .wp-site-blocks > .wp-block-template-part[area="header"] .wp-block-cover [src],
  .home .wp-site-blocks > .wp-block-template-part[area="header"] .wp-block-image [src],
  .home .wp-block-cover:first-of-type .wp-block-cover__image-background,
  .home .wp-block-cover:first-of-type [src] {
    display: none !important;
  }

  /* Contenu du header au-dessus de l’image (sans balises) */
  .header-front-page .wp-block-cover__inner-container,
  .home .wp-block-template-part[area="header"] .wp-block-cover__inner-container,
  .home .wp-site-blocks > .wp-block-template-part[area="header"] .wp-block-cover__inner-container,
  .home .wp-block-cover:first-of-type .wp-block-cover__inner-container {
    position: relative !important;
    z-index: 2 !important;
  }

  /* Sécurité débordements */
  .header-front-page { overflow: hidden !important; }

  /* Fallback anciens Safari/iOS : carré via ::before (aucune balise nommée) */
  @supports not (aspect-ratio: 1 / 1) {
    .header-front-page .wp-block-cover,
    .home .wp-block-template-part[area="header"] .wp-block-cover,
    .home .wp-site-blocks > .wp-block-template-part[area="header"] .wp-block-cover,
    .home .wp-block-cover:first-of-type { position: relative !important; }
    .header-front-page .wp-block-cover::before,
    .home .wp-block-template-part[area="header"] .wp-block-cover::before,
    .home .wp-site-blocks > .wp-block-template-part[area="header"] .wp-block-cover::before,
    .home .wp-block-cover:first-of-type::before {
      content: "";
      display: block;
      padding-top: 100%; /* 1:1 */
    }
    .header-front-page .wp-block-cover > *,
    .home .wp-block-template-part[area="header"] .wp-block-cover > *,
    .home .wp-site-blocks > .wp-block-template-part[area="header"] .wp-block-cover > *,
    .home .wp-block-cover:first-of-type > * {
      position: absolute; inset: 0;
    }
  }
}
/* === HOME HERO — CARRÉ 1:1 SUR MOBILE/TABLETTE, SANS BALISAGE === */
@media (max-width: 1024px) {
  /* cible le PREMIER Cover de la home, même si ta classe n'est pas là */
  .home .wp-block-cover:first-of-type {
    /* carré garanti, sans dépendre d'aspect-ratio */
    width: 100% !important;
    height: 100vw !important;
    min-height: 100vw !important;
    max-height: 100vw !important;

    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
    overflow: hidden !important;

    /* si tu veux forcer une image mobile, dé-commente la ligne suivante: */
    /* background-image: url("https://ateliersducarnaval.ca/wp-content/uploads/2025/10/Bebas-carnaval-Copie.png") !important; */
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }

  /* image interne du Cover en plein cadre (on NE la masque plus) */
  .home .wp-block-cover:first-of-type .wp-block-cover__image-background,
  .home .wp-block-cover:first-of-type img {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  /* contenu par-dessus l'image */
  .home .wp-block-cover:first-of-type .wp-block-cover__inner-container {
    position: relative !important;
    z-index: 2 !important;
  }

  /* neutralise les hauteurs inline ajoutées par WP sur le Cover */
  .home .wp-block-cover:first-of-type[style*="min-height"],
  .home .wp-block-cover:first-of-type[style*="height"] {
    height: 100vw !important;
    min-height: 100vw !important;
    max-height: 100vw !important;
  }
}

/* fallback anciens Safari (si aspect-ratio indisponible — on garde 1:1 via padding) */
@supports not (aspect-ratio: 1 / 1) {
  @media (max-width: 1024px) {
    .home .wp-block-cover:first-of-type::before {
      content: "";
      display: block;
      padding-top: 100%; /* 1:1 */
    }
    .home .wp-block-cover:first-of-type > * {
      position: absolute !important;
      inset: 0 !important;
    }
  }
}
/* Supprime le blanc entre le bouton du haut et la bannière du header */
.home .wp-block-button:first-of-type {
  margin-bottom: 0 !important;
}

.home header.wp-block-template-part {
  margin-top: 0 !important;
}