/*
Theme Name: Nom de ton Thème Enfant
Theme URI: L'URL de ton site (optionnel)
Description: Styles spécifiques pour la version desktop du site
Author: Ton nom ou le nom de ton équipe
Author URI: Ton site web ou le site web de ton équipe (optionnel)
Template: divi
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ton-theme-enfant-text-domain
*/

/* === Styles pour le header secondaire (Desktop) === */
.ls-secondary-header {
    background-color: var(--bg-header-secondary) !important; /* Couleur de fond du header secondaire */
    color: var(--text-color-header-secondary) !important; /* Utilise la variable du header secondaire */
    padding: 0.5rem 0 !important; /* Padding vertical */
    width: 100% !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important; /* Ombre subtile */
    z-index: 1000 !important; /* Z-index très élevé pour être toujours au-dessus */
    position: sticky; /* Rendre le header secondaire sticky */
    top: 0; /* Le coller en haut de la fenêtre */
    transform: translateZ(0); /* Force l'accélération matérielle pour lisser le défilement */
}

.ls-secondary-header-container {
    max-width: 1280px !important; /* Largeur maximale du contenu */
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 2vw !important; /* Padding horizontal */
    display: flex !important;
    justify-content: flex-end !important; /* Aligne les liens à droite */
    align-items: center !important;
}

.ls-secondary-nav {
    display: flex !important;
    gap: 1.5rem !important; /* Espacement entre les liens */
}

.ls-secondary-nav-link {
    color: var(--text-color-header-secondary) !important; /* Utilise la variable du header secondaire */
    font-family: 'Merriweather Sans', sans-serif !important;
    font-size: 0.9rem !important; /* Taille de police plus petite */
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

.ls-secondary-nav-link:hover {
    color: var(--accent-color) !important; /* Effet de survol */
}


/* === Styles pour le header principal (Desktop) === */

.ls-main-header {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important; /* Ombre sous le header */
  background-color: var(--bg-header-primary) !important;
  position: sticky; /* Rendre le header principal sticky */
  top: var(--secondary-header-height); /* Utilise la hauteur dynamique du header secondaire */
  z-index: 999 !important; /* Z-index élevé, juste en dessous du header secondaire */
  width: 100% !important;
  height: 150px !important; /* Hauteur fixe pour desktop */
  transition: height 0.3s ease, padding 0.3s ease; /* Transition douce pour le rétrécissement */
  transform: translateZ(0); /* Force l'accélération matérielle pour lisser le défilement */
  will-change: height, transform; /* Ajouté pour optimiser le rendu */
  margin-top: -1px !important; /* Correction pour la petite ouverture */
}

.ls-header-container {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4rem !important;
  height: 100% !important; /* S'adapte à la hauteur du parent */
  padding: 0 2vw !important; /* Padding ajusté pour desktop */
  width: 100% !important;
  box-sizing: border-box !important;
  transition: gap 0.3s ease; /* Transition pour le gap */
}

.ls-header-zone {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 2rem !important; /* Augmenté l'espace entre les liens */
  align-items: center !important;
  transition: gap 0.3s ease; /* Transition pour le gap */
}

.ls-header-center {
  display: flex !important;
  justify-content: center !important; /* Centré sur desktop */
  align-items: center !important;
}

.ls-logo-img {
  height: 110px !important; /* Taille du logo desktop */
  display: block !important;
  animation: ls-logo-fade 3s infinite ease-in-out !important; /* Animation du logo desktop */
  opacity: 1 !important;
  width: auto !important;
  max-width: 100% !important;
  transition: height 0.3s ease; /* Transition pour la taille du logo */
}

.ls-nav-link {
  color: var(--accent-color) !important; /* Utilise la variable d'accentuation */
  font-family: 'Merriweather Sans', sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-size: 1.05rem !important;
  letter-spacing: 0.05em !important;
  text-decoration: none !important;
  transition: font-size 0.3s ease, padding 0.3s ease; /* Transition pour la taille de police/padding */
}

.ls-nav-link:hover {
  opacity: 0.85 !important;
}

@keyframes ls-logo-fade {
  0%, 100% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
}

.ls-header-zone.right {
  margin-left: auto !important;
}

/* Masque le menu mobile et le bouton sur desktop */
.ls-mobile-menu,
.ls-toggle-menu {
  display: none !important;
}

/* Nouvelle règle pour le contenu principal afin d'appliquer les marges pour desktop */
body main:not(.hidden-main) { /* Cible le main du body pour plus de spécificité */
  padding-left: 8vw !important; /* Marge plus grande pour desktop */
  padding-right: 8vw !important; /* Marge plus grande pour desktop */
  box-sizing: border-box !important;
}

/* Styles pour le header principal lorsqu'il est réduit (ajouté par JavaScript) */
.ls-main-header.sticky-shrink {
  height: 80px !important; /* Hauteur réduite */
  /* Ajuste le padding si nécessaire pour la version réduite */
}

.ls-main-header.sticky-shrink .ls-logo-img {
  height: 60px !important; /* Réduire la taille du logo */
}

.ls-main-header.sticky-shrink .ls-nav-link {
  font-size: 0.9rem !important; /* Réduire la taille de police des liens */
  padding: 0.5rem 1rem !important; /* Ajuster le padding des liens */
}

.ls-main-header.sticky-shrink .ls-header-zone {
  gap: 1rem !important; /* Réduire l'espacement entre les liens */
}


/* === Styles pour le footer de L'Île Divine (Desktop) === */
.ls-footer-main {
    background-color: var(--bg-footer) !important;
    color: var(--text-color-header-primary) !important; /* Utilise la variable du header primaire pour le texte du footer */
    padding: 2rem 0 !important; /* Padding ajusté pour desktop */
    width: 100% !important;
}

.ls-footer-container {
    max-width: 1280px !important; /* Largeur max pour le contenu du footer */
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 1.5rem !important;
    display: grid !important; /* Utilise la grille pour les colonnes */
    grid-template-columns: 1fr 1fr 1fr !important; /* Trois colonnes de largeur égale */
    gap: 1rem !important; /* Espacement entre les colonnes */
    align-items: center !important; /* Centre les éléments verticalement */
}

.ls-footer-column { /* Nouveau style pour les colonnes du footer */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start; /* Aligne le contenu à gauche par default */
    padding: 0.5rem; /* Petit padding pour l'espace interne */
}

.ls-footer-copyright-text {
    text-align: left !important;
    grid-column: 1 / 2; /* Place dans la première colonne */
}

.ls-footer-design-text {
    text-align: center !important; /* Centre le texte dans la deuxième colonne */
    grid-column: 2 / 3; /* Place dans la deuxième colonne */
}

.ls-footer-links-group {
    display: flex !important;
    flex-direction: row !important; /* Les liens sont côte à côte */
    justify-content: flex-end !important; /* Aligne les liens à droite dans la troisième colonne */
    align-items: center !important;
    gap: 0.5rem !important; /* Espacement entre les liens et le séparateur */
    grid-column: 3 / 4 !important; /* Place dans la troisième colonne */
}

.ls-footer-link-separator {
    color: var(--text-color-header-primary) !important; /* Utilise la variable du header primaire pour le séparateur */
}

.ls-footer-copyright-text p,
.ls-footer-design-text p {
    margin-bottom: 0 !important; /* Supprime la marge en bas */
    font-size: 0.875rem !important;
}

.ls-footer-link {
    color: var(--accent-color) !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

.ls-footer-link:hover {
    color: var(--text-color-main) !important; /* Utilise la variable de texte principal */
}


/* === Styles WooCommerce (Desktop) === */

.single-product .product_title.entry-title {
    color: var(--text-color-title) !important; /* Utilise la variable de couleur de titre */
}

/* Masque le titre de la page boutique WooCommerce */
.woocommerce-products-header__title.page-title {
    /* display: none !important; */
}

/* Masque le tri par défaut sur la page boutique WooCommerce */
select.orderby {
    display: none !important;
}

/* Masque le nombre de résultats affichés sur la page boutique WooCommerce */
p.woocommerce-result-count {
    display: none !important;
}

/* Style pour le titre de produit dans les boucles WooCommerce (page boutique) */
h2.woocommerce-loop-product__title {
    font-size: 2.5rem !important; /* Taille de titre plus grande pour desktop */
    color: var(--text-color-title) !important; /* Utilise la variable de couleur de titre */
}

/* Style pour le prix des produits dans les boucles WooCommerce */
.woocommerce-Price-amount,
.woocommerce-Price-currencySymbol,
.woocommerce-Price-amount bdi {
    font-size: 1.3rem !important; /* Taille de prix plus grande pour desktop */
    color: var(--accent-color) !important; /* Utilise la variable d'accentuation */
}

/* Style spécifique pour les détails d'abonnement (comme "/ mois") */
.subscription-details {
    font-size: 1rem !important; /* Taille ajustée pour desktop */
    color: var(--text-color-main) !important; /* Utilise la variable de texte principal */
}

/* Styles spécifiques aux sections */
/* Les styles de base sont dans style-core.css. Ici, seulement les ajustements responsives. */

/* Wrapper des sections de détails (Charme, Volupté, Osmose) */
.detail-section-wrapper {
    padding: 4rem 0 !important; /* Padding vertical pour la section */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    background-color: var(--bg-main) !important; /* Assure le fond de la section */
}

/* Section container */
.section-container {
    padding: 4rem !important; /* Ajusté pour desktop (64px) */
    max-width: 100% !important; /* Modifié pour occuper toute la largeur disponible */
    gap: 2rem !important; /* Espacement par défaut entre les éléments internes */
    margin-bottom: 30px !important; /* Ajout d'une marge inférieure de 30px */
    /* Suppression de la transition et du transform au survol pour le desktop */
    transition: none !important;
    transform: none !important;
}

.section-container:hover {
    /* Suppression des styles de survol pour le desktop */
    transform: none !important;
}

/* Titres principaux de section */
.section-container .section-main-title {
    font-size: 2.5rem !important; /* Taille de titre principale de section pour desktop */
}

/* Textes d'introduction de section */
.section-container .section-intro-text {
    font-size: 1.125rem !important; /* Taille de texte d'intro pour desktop */
}

/* Grilles de blurbs */
.blurbs-grid {
    grid-template-columns: repeat(2, 1fr) !important; /* Deux colonnes sur desktop par défaut */
}

/* Styles pour le cadre du pochoir */
.blurb-icon-frame {
    width: 100px !important; /* Cadre légèrement plus grand que l'image */
    height: 100px !important;
    border-radius: 50% !important; /* Forme circulaire */
    overflow: hidden !important; /* Cache tout ce qui dépasse du cadre */
    margin: 0 auto 1rem auto !important; /* Centre le cadre et ajoute une marge en bas */
    border: 2px solid var(--accent-color) !important; /* Bordure pour simuler le pochoir */
    display: flex !important; /* Pour centrer l'image à l'intérieur */
    justify-content: center !important;
    align-items: center !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1), inset 0 0 10px rgba(0,0,0,0.3) !important; /* Ombre externe et ombre interne */
}

/* Styles pour les images d'icônes à l'intérieur du cadre */
.blurb-icon-img {
    display: block !important;
    width: 100% !important; /* L'image remplit le cadre */
    height: 100% !important;
    object-fit: cover !important; /* Assure que l'image couvre le cadre sans déformation */
}


/* Titres CTA */
.cta-title {
    font-size: 2rem !important; /* Taille de titre CTA pour desktop */
}

/* Textes CTA */
.cta-text {
    font-size: 1.125rem !important; /* Taille de texte CTA pour desktop */
}


/* Styles pour la section "Écoute-moi !" */
section#section-ecoute-moi-wrapper {
    background-color: var(--bg-main) !important;
    padding-top: 4rem !important; /* Padding ajusté pour desktop */
    padding-bottom: 6rem !important; /* Padding ajusté pour desktop */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}
#bloc-ecoute-moi { /* Utilise section-container pour les styles de base */
    box-shadow: none !important; /* Supprime l'ombre portée */
    padding: 2rem !important; /* Padding interne réduit pour desktop */
    gap: 1rem !important; /* Réduit l'espacement entre les éléments */
    /* Les autres styles sont gérés par .section-container */
}
#titres-ecoute-moi { /* Utilise html h2 pour les styles de base */
    margin-bottom: 0.5rem !important; /* Réduit la marge inférieure du titre */
    /* Les styles sont gérés par html h2 */
}
#messages-ecoute-moi { /* Utilise p pour les styles de base */
    margin-bottom: 1rem !important; /* Réduit la marge inférieure du paragraphe */
    /* Les styles sont gérés par p */
}

/* Réduit le margin-bottom du div.summary.entry-summary */
div.summary.entry-summary {
    margin-bottom: 0 !important;
	margin-top: 50px !important;
}


/* Réduit le margin-bottom du form.cart */
form.cart {
    margin-bottom: 0 !important;
}

/* Styles pour la section "Avantages de l'abonnement" */
#section-subscription-benefits {
    background-color: var(--bg-main) !important;
    padding-top: 4rem !important;
    padding-bottom: 6rem !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

#bloc-subscription-benefits { /* Utilise section-container pour les styles de base */
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05) !important;
    /* Les autres styles sont gérés par .section-container */
}

#bloc-subscription-benefits h2 { /* Utilise html h2 pour les styles de base */
    font-size: 2.25rem !important; /* text-4xl pour desktop */
    margin-bottom: 1.5rem !important; /* mb-6 pour desktop */
    color: var(--text-color-title) !important; /* Utilise la variable de couleur de titre */
}

#bloc-subscription-benefits ul {
    font-size: 1.25rem !important; /* text-xl pour desktop */
    text-align: left !important;
    margin-left: auto !important;
    margin-right: auto !important;
    list-style: disc !important;
    list-style-position: inside !important;
}

#bloc-subscription-benefits li {
    margin-bottom: 0.75rem !important; /* Marge ajustée */
    color: var(--text-color-main) !important; /* Utilise la variable de texte principal */
}

/* Styles pour les cartouches de produits sur la page boutique (Desktop) */
/* Utilise les variables maîtresses définies dans style-core.css */
li.product.product-slug-abonnement-prelude {
    background-color: var(--prelude-bg-header-primary) !important;
    color: var(--prelude-text-color-content) !important; /* Utilise la variable de contenu pour le texte de la cartouche */
    border-radius: 0.5rem !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
    padding: 1.5rem !important; /* Padding légèrement augmenté pour desktop */
    margin-bottom: 2rem !important;
}

li.product.product-slug-abonnement-lisiere {
    background-color: var(--lisiere-bg-header-primary) !important;
    color: var(--lisiere-text-color-content) !important; /* Utilise la variable de contenu */
    border-radius: 0.5rem !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
    padding: 1.5rem !important;
    margin-bottom: 2rem !important;
}

li.product.product-slug-abonnement-charme {
    background-color: var(--charme-bg-header-primary) !important;
    color: var(--charme-text-color-content) !important; /* Utilise la variable de contenu */
    border-radius: 0.5rem !important;
    box-shadow: 0 44px 8px rgba(0, 0, 0, 0.2) !important;
    padding: 1.5rem !important;
    margin-bottom: 2rem !important;
}

li.product.product-slug-abonnement-volupte {
    background-color: var(--volupte-bg-header-primary) !important;
    color: var(--volupte-text-color-content) !important; /* Utilise la variable de contenu */
    border-radius: 0.5rem !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
    padding: 1.5rem !important;
    margin-bottom: 2rem !important;
}

li.product.product-slug-abonnement-osmose {
    background-color: var(--osmose-bg-header-primary) !important;
    color: var(--osmose-text-color-content) !important; /* Utilise la variable de contenu */
    border-radius: 0.5rem !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
    padding: 1.5rem !important;
    margin-bottom: 2rem !important;
}

/* Styles spécifiques pour les titres H2 des produits sur la page boutique (Desktop) */
li.product.product-slug-abonnement-prelude h2.woocommerce-loop-product__title {
    color: var(--prelude-accent-color) !important;
}

li.product.product-slug-abonnement-lisiere h2.woocommerce-loop-product__title {
    color: var(--lisiere-accent-color) !important;
}

li.product.product-slug-abonnement-charme h2.woocommerce-loop-product__title {
    color: var(--charme-accent-color) !important;
}

li.product.product-slug-abonnement-volupte h2.woocommerce-loop-product__title {
    color: var(--volupte-accent-color) !important;
}

li.product.product-slug-abonnement-osmose h2.woocommerce-loop-product__title {
    color: var(--osmose-accent-color) !important;
}


/* Styles spécifiques pour les boutons "En savoir plus..." sur la page boutique (Desktop) */
/* Les styles communs sont maintenant dans style-core.css */
li.product.product-slug-abonnement-prelude a.button.product_type_subscription.add_to_cart_button.ajax_add_to_cart {
    /* Le border-radius de 5px est spécifique à Prélude s'il est voulu différent de 0.5rem */
    border-radius: 0.5rem !important; /* Harmonisation avec global-button-style */
    padding: 1rem 2rem !important; /* Harmonisation avec global-button-style */
}

/* Ces règles spécifiques pour Charme, Volupté et Osmose n'ont plus besoin
   de redéfinir border-radius, padding, box-shadow car ils sont dans style-core.css */
li.product.product-slug-abonnement-charme a.button.product_type_subscription.add_to_cart_button.ajax_add_to_cart {
    /* background-color et color sont déjà dans style-core.css */
}

li.product.product-slug-abonnement-volupte a.button.product_type_subscription.add_to_cart_button.ajax_add_to_cart {
    /* background-color et color sont déjà dans style-core.css */
}

li.product.product-slug-abonnement-osmose a.button.product_type_subscription.add_to_cart_button.ajax_add_to_cart {
    /* background-color et color sont déjà dans style-core.css */
}

/* Les styles de survol sont maintenant dans style-core.css */


/* S'assurer que les prix et détails d'abonnement à l'intérieur des cartouches héritent bien la couleur */
li.product .woocommerce-Price-amount,
li.product .woocommerce-Price-currencySymbol,
li.product .woocommerce-Price-amount bdi {
    color: inherit !important; /* Hérite la couleur du parent li.product */
}

li.product .subscription-details {
    color: inherit !important; /* Hérite la couleur du parent li.product */
}


/* =================================================================== */
/* --- STYLES POUR LA ZONE DE NAVIGATION D'ABONNEMENT --- */
/* =================================================================== */

/* Styles pour le conteneur principal de la navigation (le lien <a>) */
/* On cible le lien <a> en fonction du slug d'abonnement dans son attribut href */
nav.storefront-product-pagination a[href*="abonnement-prelude"] {
    background-color: var(--prelude-bg-header-primary) !important; /* Couleur de fond de Prélude */
}
nav.storefront-product-pagination a[href*="abonnement-charme"] {
    background-color: var(--charme-bg-header-primary) !important; /* Couleur de fond de Charme */
}
nav.storefront-product-pagination a[href*="abonnement-volupte"] {
    background-color: var(--volupte-bg-header-primary) !important; /* Couleur de fond de Volupté */
}
nav.storefront-product-pagination a[href*="abonnement-osmose"] {
    background-color: var(--osmose-bg-header-primary) !important; /* Couleur de fond d'Osmose */
}

/* Styles communs à tous les liens de pagination d'abonnement */
/* Ces styles s'appliquent à tous les liens de pagination, quelle que soit la catégorie d'abonnement */
nav.storefront-product-pagination a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
 /* width: 100% !important; */
    padding: 1rem 2vw !important;
    font-family: var(--font-family-headings) !important; /* Utilise la police des titres définie dans style-core */
    font-size: 2rem !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    border-radius: 0.5rem !important;
    margin-bottom: 2rem !important;
    text-decoration: none !important; /* Supprime le soulignement par défaut des liens */
	color: #fff
}

/* Réduit le padding-bottom du header de la page produit WooCommerce */
header.woocommerce-products-header {
    padding-bottom: 2rem !important; /* Ajuste cette valeur pour réduire l'espace */
}

/* Réduit le margin-top du div.woocommerce-tabs.wc-tabs-wrapper */
div.woocommerce-tabs.wc-tabs-wrapper {
    margin-top: 0 !important;
}

/* Styles spécifiques pour le fond de la page panier (cart)
 * pour qu'il corresponde à la couleur du main du thème actif et éviter la gouttière.
 */
body.woocommerce-cart[class*="category-"] main#main.site-main {
    background-color: var(--bg-main) !important;
}

/* Réduit le padding-bottom du header de la page panier WooCommerce */
.woocommerce-cart header.woocommerce-products-header {
    padding-bottom: 1rem !important; /* Réduit l'espace sous le titre Panier */
}

/* Styles spécifiques pour le fond de la page "Mon compte" (my-account)
 * pour qu'il corresponde à la couleur du main du thème actif et éviter la gouttière.
 */
body.woocommerce-account[class*="category-"] main#main.site-main {
    background-color: var(--bg-main) !important;
}

/* Réduit le padding-bottom du header de la page "Mon compte" WooCommerce */
.woocommerce-account header.woocommerce-products-header {
    padding-bottom: 1rem !important; /* Réduit l'espace sous le titre Mon compte */
}

/* Styles spécifiques pour le fond de la page "Commande" (order)
 * pour qu'il corresponde à la couleur du main du thème actif et éviter la gouttière.
 */
body.woocommerce-order[class*="category-"] main#main.site-main {
    background-color: var(--bg-main) !important;
}

/* Réduit le padding-bottom du header de la page "Commande" WooCommerce */
.woocommerce-order header.woocommerce-products-header {
    padding-bottom: 1rem !important; /* Réduit l'espace sous le titre Commande */
}

/* Réduit la marge inférieure du titre sur la page Commande */
body.woocommerce-order .woocommerce-products-header h1.woocommerce-products-header__title.page-title {
    margin-bottom: 0.5rem !important; /* Ajuste cette valeur pour réduire l'espace sous le titre */
    padding-bottom: 0 !important; /* Assure qu'il n'y a pas de padding en bas du titre lui-même */
}

/* Styles spécifiques pour le fond de la page d'accueil de la boutique (archive-product)
 * pour qu'il corresponde à la couleur du main du thème actif et éviter la gouttière.
 */
body.post-type-archive-product[class*="category-"] main#main.site-main {
    background-color: var(--bg-main) !important;
}

/* Réduit le padding-bottom du header de la page d'accueil de la boutique WooCommerce */
.post-type-archive-product header.woocommerce-products-header {
    padding-bottom: 1rem !important; /* Réduit l'espace sous le titre Boutique */
}

/* Réduit la marge inférieure du titre sur la page d'accueil de la boutique */
body.post-type-archive-product .woocommerce-products-header h1.woocommerce-products-header__title.page-title {
    margin-bottom: 0.5rem !important; /* Ajuste cette valeur pour réduire l'espace sous le titre */
    padding-bottom: 0 !important; /* Assure qu'il n'y a pas de padding en bas du titre lui-même */
}

/* Règle générale pour le fond du main sur les pages génériques avec une catégorie */
body.page[class*="category-"] main#main.site-main {
    background-color: var(--bg-main) !important;
}