/* Prestige Concept — Hero tablette et desktop. */

/* Tablette : bloc centré et largeur cohérente pour tous les textes. */
@media (min-width: 701px) {
  #pc-hero .pc-hero-content {
    width: min(86vw, 540px);
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  #pc-hero .pc-hero-content > h1,
  #pc-hero .pc-hero-content > h2,
  #pc-hero .pc-hero-content > h3,
  #pc-hero .pc-hero-content > p,
  #pc-hero .pc-hero-content > .pc-buttons {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  #pc-hero .pc-hero-content > h1 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: clamp(2rem, 4vw, 2.65rem);
    line-height: 1.05;
    letter-spacing: .18em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  #pc-hero .pc-hero-content > h2 {
    margin-top: 0;
    font-size: clamp(2.65rem, 6vw, 4rem);
    line-height: 1.06;
    white-space: nowrap;
  }

  #pc-hero .pc-hero-content > .pc-intro {
    max-width: 540px;
  }

  #pc-hero .pc-hero-content > .pc-line {
    display: none;
  }

  #pc-hero .pc-hero-content > .pc-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* Desktop : le bloc reste centré en lui-même, mais est cadré à gauche du hero. */
@media (min-width: 1101px) {
  #pc-hero .pc-container {
    position: absolute !important;
    top: 50% !important;
    left: clamp(44px, 8.25vw, 160px) !important;
    right: auto !important;
    width: min(31vw, 600px) !important;
    max-width: none !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
  }

  #pc-hero .pc-hero-content {
    width: 100% !important;
    max-width: 540px !important;
  }

  #pc-hero .pc-hero-content > h1 {
    font-size: clamp(2rem, 2.2vw, 2.7rem);
  }

  #pc-hero .pc-hero-content > h2 {
    font-size: clamp(2.7rem, 3.25vw, 4.05rem);
  }
}

/* Évite que les titres sortent du cadre sur les petites tablettes. */
@media (max-width: 820px) and (min-width: 701px) {
  #pc-hero .pc-hero-content > h1,
  #pc-hero .pc-hero-content > h2 {
    white-space: normal;
  }
}

/* Betheme : menu transparent superposé au hero, uniquement sur cette page. */
body:has(#pc-hero) #Header_wrapper {
  position: absolute !important;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  background: transparent !important;
  box-shadow: none !important;
}

body:has(#pc-hero) #Header,
body:has(#pc-hero) #Header .header_placeholder,
body:has(#pc-hero) #Top_bar .container,
body:has(#pc-hero) #Top_bar .column.one {
  background: transparent !important;
  box-shadow: none !important;
}

body.admin-bar:has(#pc-hero) #Header_wrapper {
  top: 32px;
}

body:has(#pc-hero) #Top_bar,
body:has(#pc-hero) #Top_bar .top_bar_left,
body:has(#pc-hero) #Top_bar .top_bar_right,
body:has(#pc-hero) #Top_bar .top_bar_right::before {
  background: transparent !important;
  box-shadow: none !important;
}

body:has(#pc-hero) #Content {
  padding-top: 0 !important;
}

body:has(#pc-hero) #pc-hero {
  margin-top: 0 !important;
}

body:has(#pc-hero) #Top_bar #menu > ul > li > a,
body:has(#pc-hero) #Top_bar #menu > ul > li > a span,
body:has(#pc-hero) #Top_bar .menu > li > a,
body:has(#pc-hero) #Top_bar .menu > li > a span,
body:has(#pc-hero) #Top_bar a.action_button,
body:has(#pc-hero) #Top_bar .icon-search,
body:has(#pc-hero) #Top_bar .icon-bag-fine,
body:has(#pc-hero) #Top_bar .icon-menu-fine {
  color: #fff !important;
}

body:has(#pc-hero) #Top_bar .menu > li > a::after {
  background: rgba(255, 255, 255, .3) !important;
}

@media (max-width: 767px) {
  body.admin-bar:has(#pc-hero) #Header_wrapper {
    top: 46px;
  }
}

/* Correctif Betheme : la page d'accueil est une page statique (ID 305389). */
body.page-id-305389 #Header_wrapper {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 999 !important;
  width: 100% !important;
  background: rgba(8, 12, 16, .68) !important;
  box-shadow: none !important;
  backdrop-filter: blur(5px);
}

body.admin-bar.page-id-305389 #Header_wrapper {
  top: 32px !important;
}

body.page-id-305389 #Header,
body.page-id-305389 #Top_bar,
body.page-id-305389 #Top_bar .container,
body.page-id-305389 #Top_bar .column.one,
body.page-id-305389 #Top_bar .top_bar_left,
body.page-id-305389 #Top_bar .top_bar_right,
body.page-id-305389 #Top_bar .top_bar_right::before {
  background: transparent !important;
  box-shadow: none !important;
}

body.page-id-305389 #Content {
  padding-top: 0 !important;
}

body.page-id-305389 #Top_bar #menu > ul > li > a,
body.page-id-305389 #Top_bar #menu > ul > li > a span,
body.page-id-305389 #Top_bar .menu > li > a,
body.page-id-305389 #Top_bar .menu > li > a span,
body.page-id-305389 #Top_bar a.action_button,
body.page-id-305389 #Top_bar .icon-search,
body.page-id-305389 #Top_bar .icon-bag-fine,
body.page-id-305389 #Top_bar .icon-menu-fine {
  color: #fff !important;
}

@media (max-width: 767px) {
  body.admin-bar.page-id-305389 #Header_wrapper {
    top: 46px !important;
  }
}

/*
 * Betheme applique le fond blanc via des sélecteurs comprenant
 * #Header_wrapper. Ces règles reprennent exactement cette chaîne afin que
 * le menu reste réellement transparent au-dessus du hero sur l'accueil.
 */
body.page-id-305389 #Header_wrapper,
body.page-id-305389 #Header_wrapper #Header,
body.page-id-305389 #Header_wrapper #Top_bar,
body.page-id-305389 #Header_wrapper #Top_bar .container,
body.page-id-305389 #Header_wrapper #Top_bar .column.one,
body.page-id-305389 #Header_wrapper #Top_bar .top_bar_left,
body.page-id-305389 #Header_wrapper #Top_bar .top_bar_right,
body.page-id-305389 #Header_wrapper #Top_bar .top_bar_right::before {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

body.page-id-305389 #Header_wrapper {
  position: absolute !important;
  inset: 0 0 auto 0 !important;
  width: 100% !important;
  z-index: 1000 !important;
}

body.admin-bar.page-id-305389 #Header_wrapper {
  top: 32px !important;
}

body.page-id-305389 #Content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Dernier niveau de la structure Betheme : aucun panneau blanc au menu. */
body.page-id-305389 #Header_wrapper::before,
body.page-id-305389 #Header_wrapper::after,
body.page-id-305389 #Header_wrapper #Header::before,
body.page-id-305389 #Header_wrapper #Header::after,
body.page-id-305389 #Header_wrapper .header_placeholder,
body.page-id-305389 #Header_wrapper #Top_bar::before,
body.page-id-305389 #Header_wrapper #Top_bar::after,
body.page-id-305389 #Header_wrapper #Top_bar .container::before,
body.page-id-305389 #Header_wrapper #Top_bar .container::after,
body.page-id-305389 #Header_wrapper #Top_bar .column.one::before,
body.page-id-305389 #Header_wrapper #Top_bar .column.one::after,
body.page-id-305389 #Header_wrapper #Top_bar .top_bar_left::before,
body.page-id-305389 #Header_wrapper #Top_bar .top_bar_left::after,
body.page-id-305389 #Header_wrapper #Top_bar .menu_wrapper,
body.page-id-305389 #Header_wrapper #Top_bar .logo,
body.page-id-305389 #Header_wrapper #Top_bar .responsive-menu-toggle {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Force la superposition : Betheme conserve autrement le header dans le flux. */
body.page-id-305389 #Header_wrapper {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
  width: 100% !important;
  background: rgba(8, 12, 16, .56) !important;
}

body.admin-bar.page-id-305389 #Header_wrapper {
  top: 32px !important;
}

body.page-id-305389 #Header {
  background: transparent !important;
}

body.page-id-305389 #Content,
body.page-id-305389 #pc-hero {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

@media (max-width: 767px) {
  body.admin-bar.page-id-305389 #Header_wrapper {
    top: 46px !important;
  }
}

/* Correctif final : doit rester après les règles de positionnement du thème. */
body.page-id-305389 #Header_wrapper,
body.page-id-305389 #Header_wrapper #Header,
body.page-id-305389 #Header_wrapper #Top_bar,
body.page-id-305389 #Header_wrapper #Top_bar .container,
body.page-id-305389 #Header_wrapper #Top_bar .column.one,
body.page-id-305389 #Header_wrapper #Top_bar .top_bar_left,
body.page-id-305389 #Header_wrapper #Top_bar .top_bar_right,
body.page-id-305389 #Header_wrapper #Top_bar .menu_wrapper {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

body.page-id-305389 #Header_wrapper {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  z-index: 1000 !important;
}

body.admin-bar.page-id-305389 #Header_wrapper {
  top: 32px !important;
}
