/* ========== FORCE HERO EN HAUT (Attar - version agressive) ========== */

/* Enlever tout margin/padding global en haut */
html, body, .site, .site-header, .site-content, .wrap, .container, .content-area {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Forcer l'en-tête à ne pas ajouter d'espace (s'il est fixe) */
.site-header, header.site-header, .main-header {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  position: relative !important;
}

/* Forcer la bannière à coller au top — applique à plusieurs classes possibles */
.home .hero, .home .hero-banner, .home .hero-section,
.home .top-hero, .home .banner, .home .page-header,
.home .entry-header, .home .site-hero {
  margin: 0 !important;
  padding: 0 !important;
  top: 0 !important;
  position: relative !important;
}

/* Si le header est transparent et doit chevaucher la bannière */
.home header.site-header,
.home .site-header {
  background: transparent !important;
  z-index: 9999 !important;
}

/* Forcer largeur et hauteur du H*

.mon-bandeau-produit {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 20px;
  text-align: center;
  margin: 12px 0;
  background: #f9f9f9;
  border: 1px solid #eee;
}

.mon-bandeau-produit img {
  max-width: 100%;
  height: auto;
  display: inline-block;
}

/* Bannière image au-dessus des pages produit — remplacer l'URL par la tienne */
body.single-product::before {
  content: "";
  display: block;
  width: 100%;
  height: 360px; /* ajuste la hauteur si besoin */
  background-image: url("https://auctusdistillerie.fr/wp-content/uploads/2025/10/Capture-decran-2025-10-22-a-13.35.08.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin-bottom: 12px; /* espace sous la bannière */
  box-sizing: border-box;
}

/* Si le thème ajoute déjà un espace au-dessus du contenu produit, force la suppression */
body.single-product .site-content,
body.single-product .woocommerce {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Responsive : réduire la hauteur sur mobile */
@media (max-width: 900px) {
  body.single-product::before { height: 180px; }
}
@media (max-width: 560px) {
  body.single-product::before { height: 140px; }
}

  }
  body.single-product .custom-banner-menu__list {
    gap: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }
  body.single-product .custom-banner-cart-injected {
    width: 100%;
    justify-content: flex-end;
  }
}

/* === Attar — bannière + logo + menu produits === */

/* wrapper global */
.attar-product-top-wrapper { width:100%; box-sizing:border-box; }

/* bannière full width */
.attar-product-banner {
  width:100%;
  height:260px;                 /* ajuste la hauteur ici si besoin */
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

/* logo centré (réutilise le markup theme : custom logo) */
.attar-product-logo { position: relative; width:100%; display:flex; justify-content:center; pointer-events:none; margin-top:-90px; }
.attar-product-logo__inner { pointer-events:auto; } /* rend le lien cliquable */

/* limite la taille du logo pour qu'il colle au design */
.attar-product-logo img { max-height:110px; width:auto; display:block; }

/* menu wrapper (menu centré + zone panier à droite) */
.attar-product-menu-wrap {
  max-width:1280px;
  margin: 8px auto 0;
  padding: 6px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  box-sizing:border-box;
}

/* nav/menu */
.attar-product-menu { flex:1; display:flex; justify-content:center; }
.attar-product-menu__list { list-style:none; margin:0; padding:0; display:flex; gap:32px; align-items:center; }

/* lien menu — Albert Sans */
.attar-product-menu__list a,
.attar-product-menu a {
  font-family: "Albert Sans", system-ui, Arial, sans-serif;
  font-size:20px;
  color:#0b0b0b;
  text-decoration:none;
  font-weight:400;
}

/* hover */
.attar-product-menu__list a:hover { color:#8a6d3b; }

/* right zone (cart + checkout) */
.attar-product-menu__right { display:flex; gap:10px; align-items:center; white-space:nowrap; }
.attar-cart-link { text-decoration:none; color:#0b0b0b; display:inline-flex; gap:8px; align-items:center; }
.attar-cart-count { display:inline-block; min-width:22px; height:22px; line-height:22px; background:#000; color:#fff; border-radius:999px; text-align:center; padding:0 6px; font-weight:700; }

/* checkout button */
.attar-checkout-link { background:#111; color:#fff; padding:8px 12px; border-radius:6px; text-decoration:none; font-weight:600; }

/* petites résolutions */
@media (max-width:900px){
  .attar-product-banner { height:180px; }
  .attar-product-logo { margin-top:-70px; }
  .attar-product-menu__list { gap:18px; }
  .attar-product-menu__list a { font-size:16px; }
}
@media (max-width:560px){
  .attar-product-banner { height:140px; }
  .attar-product-logo { margin-top:-56px; }
  .attar-product-menu-wrap { flex-wrap:wrap; }
  .attar-product-menu__list { gap:12px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:6px; }
  .attar-product-menu__right { order:2; width:100%; justify-content:flex-end; padding-right:6px; }
}

.full-width-banner {
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
}
/* Force la bannière à s'étendre sur toute la largeur */
.full-width-banner {
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}


/* =========== Forcer l'alignement pleine largeur sur la bannière ========= */

/* Appliquer sur les blocs Gutenberg courants */
.wp-block-cover.alignfull,
.wp-block-group.alignfull,
.wp-block-image.alignfull,
.wp-block-cover[data-align="full"],
.wp-block-group[data-align="full"],
.full-width-banner {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  box-sizing: border-box;
  left: 0 !important;
  transform: none !important;
}

/* Certains thèmes enveloppent le contenu dans .container / .wrap -> on neutralise */
.container .wp-block-cover.alignfull,
.wrap .wp-block-cover.alignfull,
.site .wp-block-cover.alignfull,
.entry-content .wp-block-cover.alignfull,
.container .full-width-banner,
.wrap .full-width-banner,
.site .full-width-banner {
  max-width: none !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* Débloquer overflow caché sur parents qui recadrent la bannière */
.container, .wrap, .site, .entry-content {
  overflow: visible !important;
}

/* Si la barre d'admin WP ajoute un offset quand tu es connecté */
html { margin-top: 0 !important; }
#wpadminbar { position: fixed; top: 0; left: 0; right: 0; z-index: 99999; }

/* Optionnel : si thème met une bordure/padding sur body ou main */
body, .site, .site-content, .entry-content { padding-top: 0 !important; }

/* Classe utilitaire pour appliquer la règle manuellement */
.full-width-banner { position: relative; z-index: 5; }


/* Bannière checkout tout en haut */
.checkout-banner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  z-index: 10;
}

body.woocommerce-checkout .site-header {
  margin-top: 200px; /* ajuste selon la hauteur de la bannière */
}



/* === Solution A : empêche l'overflow horizontal sur checkout + bannière full-width propre === */

/* Empêche la scrollbar horizontale uniquement sur la page checkout */
body.woocommerce-checkout {
  overflow-x: hidden;
}

/* Bannière : expand visuel full-bleed sans casser le layout global */
body.woocommerce-checkout .auctus-checkout-top-banner {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;           /* affichage full-bleed */
  max-width: 100%;        /* protège contre dépassements imprévus */
  box-sizing: border-box;
  z-index: 5;
  overflow: hidden;
}

/* Image responsive à l’intérieur */
body.woocommerce-checkout .auctus-checkout-top-banner__img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}



/* === Solution B : full-width via absolute left/right - pas de vw === */

body.woocommerce-checkout .auctus-checkout-top-banner {
  position: absolute; /* sort du flux mais pas de vw */
  top: 0;
  left: 0;
  right: 0;
  width: auto;           /* laissé au navigateur pour s'étendre de left à right */
  max-width: 100%;
  box-sizing: border-box;
  z-index: 9999;
  overflow: hidden;
}

/* Empêche l'overlay du header de cacher le contenu (déplace le contenu vers le bas) */
body.woocommerce-checkout .site-content,
body.woocommerce-checkout .woocommerce {
  margin-top: 0; /* si besoin, ou ajuste via padding-top en px selon la hauteur de la bannière */
}

/* Image responsive */
body.woocommerce-checkout .auctus-checkout-top-banner__img {
  display:block;
  width:100%;
  height:auto;
}


/* Bannière checkout Auctus - safe (scope uniquement checkout) */
body.woocommerce-checkout .auctus-checkout-top-banner {
  position: absolute;   /* ne pousse pas le flux, on gère padding via JS */
  top: 0;
  left: 0;
  right: 0;
  width: auto;
  max-width: 100%;
  z-index: 9999;
  overflow: hidden;
  display: block;
  text-align: center;   /* centre l'image si image plus petite */
}

/* Image responsive (va remplir la largeur du parent absolute left/right) */
body.woocommerce-checkout .auctus-checkout-top-banner__img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}

/* Assurer que aucun parent n\'interdise l\'overflow */
body.woocommerce-checkout .site,
body.woocommerce-checkout .container,
body.woocommerce-checkout .wrap,
body.woocommerce-checkout .entry-content {
  overflow: visible !important;
}

/* Si tu es connecté et que la barre admin WP ajoute un offset, on le gère */
html.admin-bar body.woocommerce-checkout .auctus-checkout-top-banner {
  top: 0;
}


/* === Corrige bannière collée sur un côté - checkout only === */
body.woocommerce-checkout .auctus-checkout-top-banner {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;   /* centre l'image si elle n'occupe pas toute la largeur */
  overflow: hidden !important;
  box-sizing: border-box !important;
  transform: none !important;      /* annule tout translateX/left residuel */
}

/* Forcer l'image à remplir horizontalement et ne pas flotter */
body.woocommerce-checkout .auctus-checkout-top-banner__img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  margin: 0 auto !important;
  float: none !important;
  object-fit: cover; /* si tu veux un recadrage propre lorsqu'une hauteur est fixée */
}

/* Si tu veux un bandeau "hero" rogné (hauteur fixe) — décommente et ajuste */
@media (min-width: 750px) {
  /* décommente les 2 règles suivantes si tu veux cropper la hauteur */
  /*
  body.woocommerce-checkout .auctus-checkout-top-banner {
    height: 300px !important;   / * ajuste la hauteur * /
  }
  body.woocommerce-checkout .auctus-checkout-top-banner__img {
    height: 100% !important;
  }
  */
}

/* neutralise les règles float/align imposées par le thème sur img */
body.woocommerce-checkout .auctus-checkout-top-banner img[style] {
  max-width: none !important;
  width: 100% !important;
  float: none !important;
}


/* Remonter le menu sur les pages WooCommerce (dont checkout) */
body.woocommerce-checkout .site-header,
body.woocommerce-checkout header#masthead {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

body.woocommerce-checkout .main-navigation,
body.woocommerce-checkout nav,
body.woocommerce-checkout .menu,
body.woocommerce-checkout .nav-primary {
    margin-top: -40px !important; /* ← remonte le menu (modifie la valeur si besoin) */
    padding-top: 0 !important;
}

/* Supprimer les espaces forcés par d’autres éléments */
body.woocommerce-checkout .header-wrapper,
body.woocommerce-checkout .site-header > * {
    margin-top: 0 !important;
    padding-top: 0 !important;
}


/* Conteneur de la bannière */
.custom-top-banner {
    position: sticky;
    top: 0;
    z-index: 9999;
    width: 100%;
    display: block;
}

/* Image 100% responsive */
.custom-top-banner img {
    width: 100%;
    height: auto;
    display: block;
}