/*
Theme Name: Astra Child
Theme URI: https://wpastra.com/
Template: astra
Author: Brainstorm Force
Author URI: https://wpastra.com/about/?utm_source=theme_preview&utm_medium=author_link&utm_campaign=astra_theme
Description: The Astra WordPress theme is lightning-fast and highly customizable. It has over 1 million downloads and the only theme in the world with 5,700+ five-star reviews! It’s ideal for professional web designers, solopreneurs, small businesses, eCommerce, membership sites and any type of website. It offers special features and templates so it works perfectly with all page builders like Spectra, Elementor, Beaver Builder, etc. Fast performance, clean code, mobile-first design and schema markup are all built-in, making the theme exceptionally SEO-friendly. It’s fully compatible with WooCommerce, SureCart and other eCommerce plugins and comes with lots of store-friendly features and templates. Astra also provides expert support for free users. A dedicated team of fully trained WordPress experts are on hand to help with every aspect of the theme. Try the live demo of Astra: https://zipwp.org/themes/astra/
Tags: custom-menu,custom-logo,entertainment,one-column,two-columns,left-sidebar,e-commerce,right-sidebar,custom-colors,editor-style,featured-images,full-width-template,microformats,post-formats,rtl-language-support,theme-options,threaded-comments,translation-ready,blog
Version: 4.11.2.1749291033
Updated: 2025-06-07 12:10:33

*/

/* style pour le formulaire de la LP SNAP*/
.iti {
    width: 100%;
}

.iti__flag-container {
    padding-left: 14px;
}

#wpfnl-phone.iti__tel-input {
    box-sizing: border-box;
    width: 100%;
}

.wpforms-submit-container,
.wpforms-recaptcha-container {
    text-align: center;
}

/* style pour le formulaire de checkout Club IM */
.redcoupon {
    color: #ff0000 !important;
    font-weight: bold !important;
}

/* style pour la page détail des produits */
body.single-product,
.woocommerce-product-details__short-description div,
.woocommerce-product-details__description h3 {
    background-color: #fff !important;
    color: #2f2e2e !important;
}

h1.product_title {
    color: #2f2e2e !important;
}

span.woocommerce-Price-amount {
    color: #2f2e2e !important;
}

.woocommerce-product-details__short-description h2 {
    color: #2f2e2e;
    font-size: 1.3rem;
}

.woocommerce-Tabs-panel--description h3 {
    color: #2f2e2e !important;
}

/* Cacher la galerie d'images pour un produit spécifique */
.postid-1242 .woocommerce-product-gallery,
.postid-1277 .woocommerce-product-gallery,
.postid-1242 .single-product-category,
.postid-1277 .single-product-category,
.postid-1242 .product_meta,
.postid-1277 .product_meta,
.postid-1242 .woocommerce-breadcrumb {
    display: none !important;
}

.postid-1242 .ast-article-single img {
	box-shadow: none; */
	-webkit-box-shadow: none; */
	-moz-box-shadow: none;
}

.postid-1242 .product_title,
.postid-1277 .product_title {
    margin-top: 20px !important;
    text-align: center;
}

/* Centrer le prix */
.postid-1242 .price,
.postid-1277 .price {
    text-align: center;
}

/* Élargir la section de résumé du produit pour qu'elle prenne toute la place */
.postid-1242 div.product .summary,
.postid-1277 div.product .summary {
    width: 100%;
    float: none;
    /* Annule le flottement si le thème en utilise un */
}

/* Force la structure principale du produit à utiliser toute la largeur */
.postid-1242.single-product div.product,
.postid-1277.single-product div.product {
    display: flex;
    flex-wrap: wrap;
}

/* Crée la colonne de gauche pour notre description */
.postid-1242 .product-description-column,
.postid-1277 .product-description-column {
    width: 50%;
    /* Ajustez si nécessaire */
    padding-right: 30px;
    /* Espace entre les deux colonnes */
    box-sizing: border-box;
    margin-top: 50px;
    /* Ajoute de l'espace en haut pour aligner avec le résumé */
    position: relative;
    /* Indispensable pour positionner la couche de couleur par-dessus */
    z-index: 1;
    /* S'assure que le conteneur est bien positionné */
    /* On applique l'image de fond ici */
    background-image: url('https://www.impro-musique.eu/wp-content/uploads/2025/11/SNAP_essentiel.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    /* Ajout pour mieux centrer l'image */
    /* On ajoute un peu de padding pour que le texte ne soit pas collé aux bords */
    padding: 20px;
}

.postid-1242 .product-description-column h3,
.postid-1277 .product-description-column h3 {
    text-align: center;
    /* Centre le titre */
    margin-bottom: 20px;
    /* Ajoute de l'espace sous le titre */
    color: #2f2e2e;
    font-family: Arial, Helvetica, sans-serif
}

.postid-1242 .product-description-column::before,
.postid-1277 .product-description-column::before {
    content: '';
    /* Obligatoire pour qu'un pseudo-élément s'affiche */
    position: absolute;
    /* Se positionne par rapport au conteneur (.product-description-column) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* C'est ici la magie : la couleur de fond avec opacité ! */
    background-color: rgba(255, 255, 255, 0.80);
    /* Blanc avec 85% d'opacité. Jouez avec 0.85 ! */
    z-index: -1;
    /* Place cette couche ENTRE l'image de fond et le contenu (le texte) */
}

/* S'assure que la colonne de droite (titre, prix...) se comporte bien */
.postid-1242.single-product div.product .summary,
.postid-1277.single-product div.product .summary {
    width: 50%;
    /* Ajustez si nécessaire */
    float: none;
    /* Annule d'éventuels styles de flottement du thème */
}

/* Style pour l'icône du panier vide */
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
	background-color: currentColor;
	content: "";
	display: block;
	height: 5em;
	margin: 0 auto 2em;
	mask-image: url('https://www.impro-musique.eu/wp-content/uploads/2025/08/Logo-fond-blanc-150x150.png') !important;
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: 5em;
	width: 5em;
}

/*
 * Style personnalisé pour la liste des bonus sur la page produit
 */

/* Cible la liste <ul> à l'intérieur de notre colonne de description */
.product-description-column ul {
    list-style: none;
    /* Retire les points noirs par défaut */
    padding-left: 0;
    /* Retire l'indentation par défaut de la liste */
    margin-top: 1em;
    /* Ajoute un peu d'espace après le titre "LES BONUS..." */
}

/* Cible chaque item <li> de cette liste */
.product-description-column ul li {
    position: relative;
    /* Nécessaire pour positionner l'icône */
    padding-left: 30px;
    /* Crée un espace à gauche pour y mettre l'icône */
    margin-bottom: 12px;
    /* Augmente l'espace vertical entre chaque ligne ! */
    line-height: 1.4;
    /* Améliore la lisibilité si une ligne passe sur 2 lignes */
}

/* Crée un pseudo-élément ::before pour y mettre notre icône */
.product-description-column ul li::before {
    content: '✅';
    /* Le caractère "coche". Vous pouvez aussi utiliser '✔' */
    position: absolute;
    /* Permet de le placer précisément */
    left: 0;
    /* Le colle sur le bord gauche de l'espace créé par le padding */
    top: 0px;
    /* Ajuste la position verticale de la coche */

    color: #28a745;
    /* Une belle couleur verte ! */
    font-weight: bold;
    /* Rend la coche un peu plus épaisse */
    font-size: 1.2em;
    /* Rend la coche un peu plus grande que le texte */
}

select#mode-de-paiement {
    background-color: bisque;
}

.postid-1242 .product-description-column h2.mob,
.postid-1277 .product-description-column h2.mob {
    color: #2f2e2e !important;
    display: block;
    font-size: 2rem;
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.postid-1242 .ast-article-single,
.postid-1277 .ast-article-single {
    margin-bottom: 300px !important;
    /* Pour éviter que le footer ne chevauche le contenu */
}

/* Prix barré en gris anthracite avec barre rouge */
.postid-1242 .price del .woocommerce-Price-amount,
.postid-1277 .price del .woocommerce-Price-amount {
    color: #2F2F2F !important; /* Gris anthracite */
    text-decoration-color: #FF0000 !important; /* Barre rouge */
}

/* Prix soldé en rouge */
.postid-1242 .price ins .woocommerce-Price-amount,
.postid-1277 .price ins .woocommerce-Price-amount {
    color: #FF0000 !important; /* Rouge */
    text-decoration: none !important; /* Supprimer le soulignement par défaut */
}

/* Optionnel : pour renforcer la barre rouge sur le prix barré */
.postid-1242 .price del,
.postid-1277 .price del {
    text-decoration-color: #FF0000 !important;
    text-decoration-thickness: 2px !important;
}

/* FORCE LA TAILLE DES CHECKBOX WOOCOMMERCE BLOCKS */
svg.wc-block-components-checkbox__mark {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    flex-shrink: 0; /* Empêche l'écrasement */
}

/* S'assurer que le conteneur du label est bien aligné */
.wc-block-components-checkbox {
    display: flex !important;
    align-items: center;
    gap: 10px;
}

/* Cacher l'input natif qui parfois traîne */
.wc-block-components-checkbox__input {
    width: 1px !important; 
    height: 1px !important;
    opacity: 0;
    position: absolute;
}

/* --- FIX LAYOUT CHECKOUT WOOCOMMERCE BLOCKS --- */

/* Uniquement sur ordinateur (écrans > 921px) */
@media (min-width: 922px) {
    
    /* On force le conteneur principal à devenir flexible horizontalement */
    .wc-block-checkout {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between;
        align-items: flex-start; /* Aligne le haut des colonnes */
        gap: 30px; /* Espace entre les deux colonnes */
    }

    /* COLONNE GAUCHE : Coordonnées et Paiement */
    .wc-block-checkout .wp-block-woocommerce-checkout-fields-block {
        width: 60% !important;
        flex: 0 0 60%; /* Fixe la largeur à 60% */
        max-width: 60%;
    }

    /* COLONNE DROITE : Résumé de la commande */
    .wc-block-checkout .wp-block-woocommerce-checkout-totals-block {
        width: 38% !important; /* Le reste de la place moins le gap */
        flex: 0 0 38%;
        max-width: 38%;
        position: sticky; /* Bonus : garde le résumé visible au scroll */
        top: 20px;
        border: 1px solid #e5e5e5; /* Optionnel : remet un cadre propre */
        padding: 20px; /* Optionnel : espacement interne */
        border-radius: 5px;
    }
}

/* Correctif de sécurité pour que le contenu ne soit pas coupé */
.entry-content {
    overflow: visible !important;
}

/* Style des titres h2 dans le contenu du produit */
.wp-block-woocommerce-checkout :where(h2) {
	font-size: larger;
	font-size: larger;
	font-weight: 600;
	font-family: 'Plus Jakarta Sans',sans-serif;
	line-height: 1.3em;
}

/* --- CORRECTIFS DE FINITION CHECKOUT --- */

/* 1. Correction Paiement Express (PayPal) : Enlever les puces et marges */
.wc-block-checkout__express-payment ul,
.wc-block-checkout__express-payment li {
    list-style: none !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    margin-bottom: 10px !important; /* Espacement entre les boutons */
}

/* Ajuster la largeur des boutons express pour qu'ils soient propres */
.wc-block-checkout__express-payment .wc-block-components-express-payment__content {
    width: 100%;
}

/* --- CORRECTIF ROBUSTE PAIEMENT WOOCOMMERCE BLOCKS --- */

/* 1. On cible le conteneur principal (le Label) qui contient la coche ET le texte */
body .wc-block-components-radio-control__option {
    display: flex !important;
    flex-direction: row !important; /* Force l'alignement horizontal */
    align-items: center !important; /* Centre verticalement */
    justify-content: flex-start !important;
    padding: 12px 15px !important; /* Un peu d'espace interne */
    width: 100% !important;
    margin-bottom: 0 !important;
}

/* 2. On cible la case à cocher (le rond) */
body .wc-block-components-radio-control__input {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-right: 15px !important; /* Espace entre le rond et le texte */
    position: static !important; /* Annule les positionnements bizarres */
    transform: none !important;
    flex-shrink: 0 !important; /* Empêche le rond de s'écraser */
    width: 18px !important; 
    height: 18px !important;
}

/* 3. On cible le bloc qui contient le Texte et l'Image */
body .wc-block-components-radio-control__option-layout {
    margin: 0 !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
}

/* 4. On cible le groupe Texte + Image */
body .wc-block-components-radio-control__label-group {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
}

/* 5. Le texte (Label) lui-même */
body .wc-block-components-radio-control__label {
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    line-height: 1.2 !important;
    font-size: 18px !important;
}

/* 6. L'image (Logo Visa, PayPal, etc) */
body .wc-block-components-radio-control__label img {
    margin-left: auto !important; /* Pousse le logo tout à droite (optionnel, sinon mettre 10px) */
    margin-right: 0 !important;
    max-height: 24px !important;
    display: block !important;
}

/* 7. La boîte accordéon globale (pour le cadre) */
body .wc-block-components-radio-control-accordion-option {
    border: 1px solid #e5e5e5 !important;
    border-radius: 5px !important;
    margin-bottom: 10px !important;
    background: #fff !important;
    overflow: hidden !important; /* Garde le contenu propre */
}

/* 8. Style quand c'est sélectionné */
body .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
    border-color: #000 !important;
    background-color: #fafafa !important;
}

/* 3. Espacements du bas (Note, Liens, Bouton Commander) */

/* Espace au-dessus et au-dessous de "Ajouter une note" */
.wc-block-checkout__order-notes {
    margin-top: 30px !important;
    margin-bottom: 30px !important;
    display: block !important;
}

/* Espace autour des conditions générales */
.wc-block-checkout__terms {
    margin-bottom: 30px !important;
    padding: 15px 0;
}

/* Espace au-dessus du bouton Commander */
.wc-block-checkout__actions {
    margin-top: 20px !important;
}

/* Rendre le bouton commander bien visible */
.wc-block-components-checkout-place-order-button {
    width: 100%;
    margin-top: 60px;
    padding: 15px !important;
    font-size: 18px !important;
}
/* 4. Cacher la quantité dans le résumé de commande */
.wc-block-components-order-summary-item__quantity {
    display: none !important;
}

/* --- CORRECTIFS BLOC RÉSUMÉ (DROITE) --- */

/* 1. Curseur "Main" pour les liens accordéons (Codes promo & Détails) */
.wc-block-components-panel__button {
    cursor: pointer !important;
}

/* 2. Rendre le champ "Code Promo" visible */
.wc-block-components-totals-coupon__input input[type="text"] {
    border: 1px solid #ccc !important; /* Ajoute une bordure visible */
    background-color: #ffffff !important; /* Fond blanc forcé */
    color: #333333 !important; /* Texte noir */
    padding: 10px !important; /* Espace interne pour que ce soit joli */
    height: 45px !important; /* Hauteur confortable */
    width: 100% !important;
}

/* Ajustement du label flottant pour qu'il ne gêne pas */
.wc-block-components-text-input label {
    z-index: 10 !important; /* S'assure que le label reste au-dessus */
}

/* 3. Couleur du lien "Appliquer" dans le bouton rouge */
.wc-block-components-totals-coupon__button,
.wc-block-components-totals-coupon__button .wc-block-components-button__text {
    color: #ffffff !important; /* Force le texte en blanc */
    fill: #ffffff !important; /* Au cas où il y ait une icône */
}

/* 4. Espaces manquants entre les Libellés et les Montants */
/* On force le conteneur à utiliser Flexbox pour écarter les éléments */
.wc-block-components-totals-item, 
.fsb-recurring-totals-panel__title,
.fsb-recurring-totals-panel__details-total {
    display: flex !important;
    justify-content: space-between !important; /* Pousse le texte à gauche et le prix à droite */
    align-items: center !important;
    width: 100% !important;
    gap: 10px !important; /* Sécurité : espace minimum de 10px */
}

/* Cas spécifique pour le "Total à payer aujourd'hui" qui a une structure différente */
.wc-block-components-totals-footer-item {
    display: flex !important;
    justify-content: space-between !important;
    width: 100% !important;
}

/* --- NETTOYAGE ET CLARTÉ DU RÉSUMÉ (DROITE) --- */

/* 1. Masquer le "Sous-total" global (redondant avec le Total à payer) */
.wp-block-woocommerce-checkout-order-summary-subtotal-block {
    display: none !important;
}

/* 2. Masquer les lignes redondantes (Sous-total/Total) DANS le bloc récurrent */
/* On ne garde que le titre principal du récurrent */
.fsb-recurring-totals-panel__details .wc-block-components-totals-wrapper {
    display: none !important;
}

/* 3. Masquer le bouton "Détails" (la petite flèche) du récurrent car il ne contient plus rien d'utile */
.fsb-recurring-totals-panel__details .wc-block-components-panel__button {
    display: none !important;
}

/* 4. Mettre en valeur le "Total à payer aujourd'hui" */
.wc-block-components-totals-footer-item {
    border-top: 2px solid #e5e5e5 !important;
    padding-top: 15px !important;
    margin-top: 15px !important;
    font-size: 1.2em !important; /* Texte plus gros */
    font-weight: bold !important;
    color: #000 !important;
}

/* 5. Gérer l'alignement du bloc Récurrent (Abonnement) */
.fsb-recurring-totals-panel {
    background-color: #f9f9f9 !important; /* Petit fond gris pour le distinguer */
    padding: 15px !important;
    border-radius: 5px !important;
    margin-top: 15px !important;
    border: 1px dashed #ccc !important;
}

.fsb-recurring-totals-panel__title {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important; /* Aligner en haut si le texte est long */
    flex-wrap: wrap !important; /* Permettre au texte de passer à la ligne */
}

/* Forcer le prix du récurrent à droite */
.fsb-recurring-totals-panel__title .wc-block-components-totals-item__value {
    margin-left: auto !important;
    font-weight: bold !important;
    white-space: nowrap !important; /* Empêche le "€" de passer à la ligne tout seul */
}

/* 6. Style de la description (Premier renouvellement...) */
.fsb-recurring-totals-panel__title .wc-block-components-totals-item__description {
    width: 100% !important; /* Force la description à passer sous le titre/prix */
    font-size: 0.9em !important;
    color: #666 !important;
    margin-top: 5px !important;
    font-style: italic !important;
}

/* Pour les écrans plus petits (tablettes/mobiles), on repasse sur une seule colonne */
@media (max-width: 768px) {

    .postid-1242 .product-description-column,
    .postid-1277 .product-description-column,
    .postid-1242.single-product div.product .summary,
    .postid-1277.single-product div.product .summary {
        width: 100%;
        padding-right: 0;
        margin-top: 50px;
        /* Ajoute de l'espace entre les sections */
        padding: 0;
    }

    .postid-1242 .product-description-column ol,
    ul,
    .postid-1277 .product-description-column ol,
    ul {
        margin: 0;
    }

    .postid-1242 .product-description-column h2.mob,
    .postid-1277 .product-description-column h2.mob {
        color: #2f2e2e !important;
        display: block;
        font-size: 2rem;
        text-align: center;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    }

    .postid-1242 .product-description-column hr,
    .postid-1277 .product-description-column hr {
        width: 30%;
        margin: 20px auto;
    }
}