/*
 Theme Name:   Astra Child
 Template:     astra
 Version:      1.0.0
*/

/* ============================================================
   VARIABLES GLOBALES
============================================================ */
:root {
  --ls-accent: var(--ls-global-gold, #b88634);
  --ls-dark:   #2e2e36;
}


/* ============================================================
   RESET TEXT-TRANSFORM (Astra / WooCommerce)
   Un seul bloc couvre tout : body, titres, boutons, selects.
============================================================ */
body,
h1, h2, h3, h4, h5, h6,
button, input, select, textarea,
.entry-title, .page-title,
.ast-archive-title, .ast-page-title,
.ast-button, .ast-custom-button,
.ast-search-menu-icon .search-field,
.widget-title,
.site-title a,
.site-footer, .site-footer a,
.woocommerce-products-header__title,
.woocommerce-loop-product__title,
.woocommerce-loop-category__title,
.single-product .product_title,
.woocommerce-cart .cart_totals > h2,
.woocommerce-checkout h3,
.woocommerce-ordering select,
.woocommerce-ordering option,
.woocommerce ul.products li.product h2,
.woocommerce div.product .product_title,
.woocommerce-cart .product-name,
.woocommerce-cart .product-name *,
.woocommerce-checkout .product-name,
.woocommerce-message, .woocommerce-info, .woocommerce-error,
.woocommerce .woocommerce-Price-amount,
.woocommerce .product_meta,
.woocommerce .woocommerce-product-details__short-description {
  text-transform: none !important;
  font-variant:   normal !important;
}


/* ============================================================
   BOUTONS WOOCOMMERCE
============================================================ */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.wc-forward,
.woocommerce a.checkout-button {
  background:      var(--ls-dark) !important;
  border:          1px solid var(--ls-dark) !important;
  color:           #fff !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.wc-forward:hover,
.woocommerce a.checkout-button:hover {
  background:   var(--ls-accent) !important;
  border-color: var(--ls-accent) !important;
  color:        #fff !important;
}


/* ============================================================
   MESSAGES PAIEMENT
============================================================ */
.ls-pay-note { margin-top: 10px; }


/* ============================================================
   HEADER FIXE (Astra)
============================================================ */
#masthead.site-header {
  position: sticky;
  top: 0;
  z-index: 99999;
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
}

#masthead.site-header .ast-primary-header-bar {
  background: transparent !important;
}

.admin-bar #masthead.site-header {
  top: var(--wp-admin--admin-bar--height, 32px);
}

@media (max-width: 782px) {
  .admin-bar #masthead.site-header { top: 46px; }
}


/* ============================================================
   BOUTON "RETOUR EN HAUT"
============================================================ */
#ls-back-to-top.ls-back-to-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9998;
  width: 54px;
  height: 54px;
  padding: 0;
  background:  transparent !important;
  border:      none !important;
  box-shadow:  none !important;
  color: rgba(0,0,0,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, color .2s ease;
  -webkit-appearance: none;
  appearance: none;
}

#ls-back-to-top.ls-back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

#ls-back-to-top .ls-btt-svg { display: block; }

#ls-back-to-top.ls-back-to-top:hover {
  background: transparent !important;
  color: var(--ls-accent);
}

#ls-back-to-top.ls-back-to-top:focus-visible {
  outline: 2px solid var(--ls-accent);
  outline-offset: 4px;
  border-radius: 999px;
}


/* ============================================================
   ACCUEIL — CARTES "3 MODES" (approche native / non-Elementor)
   Classe à appliquer sur le bloc : ls-hero-modes
============================================================ */
.home .ls-hero-modes {
  position: relative;
  z-index: 10;
  margin-top: -86px;
  padding: 0 16px 18px;
}

.home .ls-hero-modes__wrap {
  max-width: 1180px;
  margin: 0 auto;
  background: rgba(255,255,255,.55);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.60);
  border-radius: 18px;
  box-shadow: 0 16px 36px rgba(0,0,0,.18);
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.home .ls-hero-mode {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  text-decoration: none !important;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  padding: 14px 16px;
  min-height: 72px;
  color: #1f1f25;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.home .ls-hero-mode:hover {
  transform: translateY(-2px);
  border-color: var(--ls-accent);
  box-shadow: 0 12px 26px rgba(0,0,0,.14);
}

.home .ls-hero-mode:focus-visible {
  outline: 2px solid var(--ls-accent);
  outline-offset: 3px;
}

.home .ls-hero-mode__title {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
}

.home .ls-hero-mode__sub {
  font-size: 13px;
  opacity: .82;
}

@media (max-width: 980px) {
  .home .ls-hero-modes { margin-top: -70px; }
  .home .ls-hero-modes__wrap { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .home .ls-hero-modes { margin-top: -58px; padding-left: 12px; padding-right: 12px; }
  .home .ls-hero-mode  { padding: 12px 14px; min-height: 66px; }
}


/* ============================================================
   ACCUEIL — CARTES "3 MODES" (approche Elementor)
   Conteneur héro : classe ls-home-hero
   Widget shortcode [ls_modes_home] : classe ls-home-modes
============================================================ */
.home .ls-home-hero,
.home .ls-home-hero .elementor-container,
.home .ls-home-hero .elementor-column,
.home .ls-home-hero .elementor-widget-wrap,
.home .ls-home-hero .e-con,
.home .ls-home-hero .e-con-inner {
  overflow: visible !important;
}

.home .ls-home-hero { position: relative !important; }

.home .ls-home-hero .ls-home-modes {
  position:  absolute !important;
  left:      50% !important;
  bottom:    22px !important;
  transform: translateX(-50%) !important;
  z-index:   99999 !important;
  width:     min(1120px, calc(100% - 32px)) !important;
  margin:    0 !important;
}

.home .ls-home-hero .ls-home-modes .ls-modes-hub {
  margin: 0 !important;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.40);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 16px 44px rgba(0,0,0,.22);
}

.home .ls-home-hero .ls-home-modes .ls-mode-card__meta {
  display: none !important;
}

@media (max-width: 720px) {
  .home .ls-home-hero .ls-home-modes {
    left:      16px !important;
    right:     16px !important;
    width:     auto !important;
    transform: none !important;
    bottom:    14px !important;
  }
}


/* ============================================================
   PAGES SHORTCODES (contact / boutiques / professionnels)
   Masquage du titre de page Astra + conteneur élargi
============================================================ */
body:has(.ls-contact-page) .entry-header,
body:has(.ls-contact-page) .entry-title,
body:has(.ls-contact-page) .ast-single-entry-banner,
.ls-has-contact-page .entry-header,
.ls-has-contact-page .entry-title,
.ls-has-contact-page .ast-single-entry-banner {
  display: none !important;
}

body:has(.ls-contact-page) .site-content .ast-container,
.ls-has-contact-page .site-content .ast-container {
  max-width:     1240px !important;
  margin-left:   auto !important;
  margin-right:  auto !important;
  padding-left:  18px !important;
  padding-right: 18px !important;
}