/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jun 02 2026 | 17:12:08 */
/* ==========================================================================
   CHARTE GRAPHIQUE CONSOLIDÉE - CL·SILLAGES
   Designer : © bvd · Bertrand Vaillant Design | Année 2026
   ========================================================================== */

/* 1. FONDATIONS & VARIABLES (DESIGN SYSTEM)
   -------------------------------------------------------------------------- */
:root {
    /* Couleurs */
    --cl-indigo: #1B365D;    /* Bleu Navy - Titres et Logo */
    --cl-terracotta: #D36D52;     /* Ocre - Accents et CTA */
    --cl-sable: #FBF9F5;     /* Sable - Fond papier aquarelle */
    --cl-gris: #8D9CB1;      /* Gris Brume - Détails techniques */
    --cl-white: #ffffff;
    
    /* Typographies */
    --font-titles: 'Playfair Display', serif;
    --font-body: 'Fira Sans Condensed', sans-serif;
    --font-accent: 'Sirivennela', cursive;

    /* Transitions */
    --transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 2. STYLES GLOBAUX & TYPOGRAPHIE DE BASE
   -------------------------------------------------------------------------- */
html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--cl-sable) !important;
    color: var(--cl-indigo);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.6;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    font-variant-ligatures: common-ligatures !important;
    font-feature-settings: "liga" on, "dlig" on !important;
    font-variant-numeric: oldstyle-nums !important;
    -moz-font-feature-settings: "onum" !important;
    -ms-font-feature-settings: "onum" !important;
    -webkit-font-feature-settings: "onum" !important;
    font-feature-settings: "onum" !important;
}

h1 { font-weight: 900; font-size: 2.8rem; }
h2 { font-weight: 700; font-size: 2.2rem; }
h3 { font-weight: 600; font-size: 1.8rem; font-style: italic;}
h4 { font-weight: 600; font-size: 1.5rem; }

p em {
    font-style: italic;
}

.cl-signature {
    font-family: var(--font-accent) !important;
    font-size: 1.5rem;
    color: var(--cl-terracotta);
}

/* 3. ADAPTATIONS POUR LE THÈME ASTRA (FULL-WIDTH)
   -------------------------------------------------------------------------- */
.ast-single-post.ast-page-builder-template .site-main > article, 
.ast-page-builder-template .post-navigation {
    padding: 0 !important;
    margin: 0 !important;
}

.ast-page-builder-template .entry-header,
.ast-page-builder-template .entry-content {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

.site-content .ast-container {
    max-width: 100% !important;
    padding: 0 !important;
}

/* 4. EN-TÊTE (HEADER) ET NAVIGATION PRINCIPALE
   -------------------------------------------------------------------------- */
.site-header, #masthead {
    position: sticky !important;
    top: 0;
    z-index: 9995 !important;
    background-color: var(--cl-sable);
    box-shadow: 0 5px 20px rgba(27, 54, 93, 0.15); /* Ombre plus marquée */
}

/* Ajustement pour la barre d'administration WordPress */
.admin-bar .site-header, .admin-bar #masthead {
    top: 32px !important;
}

.cl-custom-nav { 
    display: flex; 
    align-items: center;
}

.cl-nav-list {
    display: flex;
    gap: 35px;
    list-style: none;
    align-items: center;
    margin: 0;
    padding: 0;
}

.cl-nav-link {
    text-decoration:
    none; color:
    var(--cl-terracotta);
    transition: var(--transition);
    padding: 12px 25px;
    border-radius: 4px;
    background-color: var(--cl-sable);
    text-transform: uppercase !important;
    font-weight: 600;
    letter-spacing: 0.12em;
    font-size: 13px;
}

.cl-nav-link:hover {
    background-color: var(--cl-terracotta) !important;
    color: var(--cl-white);
    text-transform: uppercase !important;
    font-weight: 600;
    letter-spacing: 0.12em; /* Déjà présent, mais on le garde pour la clarté */
    font-size: 13px;
    box-shadow: 0 4px 15px rgba(208, 136, 79, 0.15);
}

.cl-nav-btn {
    background-color: var(--cl-terracotta);
    color: var(--cl-white) !important;
    padding: 10px 22px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
}

/* 5. MENU MOBILE (PANNEAU OFF-CANVAS)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 921px) {
    .cl-mobile-list-simple {
        list-style: none !important;
        margin: 0 !important;
        padding: 20px !important;
        display: flex;
        flex-direction: column;
        gap: 25px;
        text-align: right;
    }

    .ast-mobile-popup-header {
        position: relative !important; /* Nécessaire pour positionner le titre */
        margin-top: 23px;
    }

    .ast-mobile-popup-header::after {
        content: "CL-Sillages";
        font-family: var(--font-accent);
        font-weight: 100;
        color: var(--cl-indigo);
        font-size: 50px; /* Légère réduction pour un meilleur équilibre */
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 100%; /* Permet le text-align */
        text-align: center;
        margin-top: 1rem;
        padding-right: 3rem!important; /* Décalage pour éviter la superposition avec le bouton de fermeture */
    }

    /* Style du bouton de fermeture du menu mobile */
    button#menu-toggle-close {
        /* Reset des styles par défaut */
        opacity: 1 !important;
        border: none !important;
        padding: 0 !important;

        /* Apparence du bouton */
        background-color: var(--cl-terracotta) !important;
        color: var(--cl-white) !important; /* Couleur de la croix */
        width: 42px !important;
        height: 42px !important;
        border-radius: 2px !important;

        /* Positionnement et centrage de l'icône */
        position: absolute !important;
        top: 20px;
        right: 20px;
        transition: var(--transition) !important;        
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 99999 !important; /* Assure que le bouton est au-dessus de tout */
    }

    button#menu-toggle-close .ast-icon-close {
        font-size: 20px !important; /* Augmente la taille de la croix */
    }

    .cl-mobile-link-simple {
        font-family: var(--font-body) !important;
        font-size: 13px !important;
        color: var(--cl-terracotta) !important;
        text-decoration: none;
        padding: 12px 25px;
        border-radius: 4px !important;
        text-align: center;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        transition: var(--transition);
        display: block; /* Fait en sorte que le bouton prenne toute la largeur */
    }
    .cl-mobile-link-simple:hover {
        background-color: var(--cl-terracotta) !important;
        color: var(--cl-white) !important;
    }
    
    .cl-mobile-list-simple {
        margin-top: 4rem !important; /* Décalage pour laisser de la place au titre */
    }

    .cl-mobile-btn-simple {
        display: inline-block;
        background-color: var(--cl-terracotta) !important;
        color: var(--cl-white) !important;
        padding: 12px 20px !important;
        border-radius: 4px !important;
        text-decoration: none !important;
        font-weight: 600;
        text-align: center;
    }
}

/* 6. PIED DE PAGE (FOOTER)
   -------------------------------------------------------------------------- */
.cl-footer {
    background-color: var(--cl-indigo) !important;
    padding: 80px 0 0 0;
    color: var(--cl-sable);
}

.site-primary-footer-wrap {
    padding-top: 20px;
    padding-bottom: 1px;
}

.cl-footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    gap: 40px;
}

.cl-footer-column h3 {
    color: var(--cl-sable) !important;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 1.1rem;
    margin-bottom: 25px;
}

.cl-footer-logo-main {
    max-width: 160px !important;
    margin-bottom: 15px;
}

.cl-footer-logo-bvd {
    max-width: 60px !important;
    vertical-align: middle;
    margin-left: 10px;
}

.cl-footer-nav { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.cl-footer-nav li { margin-bottom: 12px; }
.cl-footer-nav a, .cl-mail, .cl-legal a { color: var(--cl-sable); text-decoration: none; opacity: 0.8; transition: var(--transition); }
.cl-footer-nav a:hover { color: var(--cl-terracotta); opacity: 1; }

/* Copyright Bar Centré */
.cl-footer-bottom {
    margin-top: 60px;
    padding: 25px 20px;
    border-top: 1px solid rgba(251, 249, 245, 0.1);
    width: 100% !important;
    text-align: center !important;
}

p.cl-slogan {
    font-family: var(--font-titles);
    font-style: italic;
    font-weight: 500;
    text-align: center;
}

.cl-footer-bottom p {
    margin: 0 !important;
    width: 100%;
    text-align: center;
    font-size: 0.85rem;
    opacity: 0.7;
}

/* Footer Responsive */
@media screen and (max-width: 921px) {
    .cl-footer-container { flex-direction: column; align-items: center !important; text-align: center !important; gap: 50px; }
    .cl-col-branding { order: 1; }
    .cl-col-contact  { order: 2; }
    .cl-col-links    { order: 3; }
    .cl-col-contact  { order: 1; }
    .cl-col-links    { order: 2; } 
    .cl-footer-column { width: 100%; align-items: center !important; }
    .cl-footer-bottom {
        padding-bottom: 80px; /* Espace pour l'onglet Complianz en mobile */
    }
}

/* Optimisation pour très petits écrans */
@media screen and (max-width: 480px) {
    .cl-footer { padding-top: 50px; }
    .cl-footer-container { gap: 40px; }
    .cl-footer-column h3 { margin-bottom: 15px; }
    .cl-footer-bottom { margin-top: 40px; }
    .cl-footer-bottom p { font-size: 0.8rem; }
}

  

/* 7. ÉLÉMENTS FLOTTANTS ET EFFETS VISUELS
   -------------------------------------------------------------------------- */
.cl-gallery-item:hover img { transform: scale(1.05); transition: var(--transition); }

.cl-whatsapp-float {
    position: fixed !important;
    bottom: 60px !important;
    right: 25px !important;
    width: 60px !important;
    height: 60px !important;
    background-color: #25D366 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 999999 !important;
    box-shadow: 0 6px 20px rgba(27, 54, 93, 0.2) !important; /* Ombre plus marquée */
    transition: all 0.3s ease-in-out !important;
}

.cl-wa-icon { width: 35px !important; height: auto !important; filter: brightness(100%); }
.cl-whatsapp-float:hover { transform: scale(1.1) rotate(5deg); background-color: #128C7E !important; }

/* Texture Papier subtile (S'applique sur tout le site) */
body::after {
    content: "";
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-image: url('https://www.transparenttextures.com/patterns/paper.png');
    opacity: 0.04;
    pointer-events: none;
    z-index: 10000;
}


/* 8. INDICATEUR DE SCROLL (ANIMATION SOURIS)
   -------------------------------------------------------------------------- */
.cl-scroll-indicator {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    z-index: 10 !important; /* Pour être au-dessus de l'overlay Indigo */
}

/* Le corps de la souris */
.cl-mouse {
    width: 26px;
    height: 42px;
    border: 2px solid var(--cl-indigo);
    border-radius: 15px;
    background: var (--cl-sable);
    position: relative;
}

/* La molette qui bouge */
.cl-wheel {
    width: 4px;
    height: 8px;
    background-color: var(--cl-indigo);
    border-radius: 2px;
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    animation: cl-mouse-scroll 2s infinite;
}

/* Le petit texte "Découvrir" sous la souris */
.cl-scroll-text {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--cl-indigo);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    opacity: 1;
}

/* Animation du mouvement de la molette */
@keyframes cl-mouse-scroll {
    0% {
        opacity: 0;
        top: 8px;
    }
    20% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        top: 25px;
    }
}

@media screen and (max-width: 600px) {
    .cl-scroll-indicator {
        display: none; /* Cache la souris sur petit mobile */
    }
}

/* 9. FORMULAIRE DE CONTACT (SPECTRA UAGB)
   ========================================================================== */

/* Conteneur principal du formulaire (effet "carte") */
.uagb-forms__outer-wrap {
    background-color: var(--cl-white) !important;
    padding: 50px !important; /* Espace interne généreux */
    border-radius: 8px; /* Angles légèrement arrondis pour la douceur */
    
    /* Ombre portée Indigo signature */
    box-shadow: 0 15px 45px rgba(27, 54, 93, 0.12) !important;
    
    /* Centrage et largeur max */
    max-width: 650px !important;
    margin: 40px auto !important;
    
    /* Transition pour l'interaction */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(27, 54, 93, 0.05);
}

/* Effet au survol du formulaire */
.uagb-forms__outer-wrap:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 60px rgba(27, 54, 93, 0.18) !important;
}

/* Étiquettes des champs (labels) */
.uagb-forms-input-label {
    font-family: var(--font-body) !important;
    color: var(--cl-indigo) !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
    font-size: 0.9rem !important;
}

/* 3. Style des Champs de saisie (Inputs & Textarea) */
.uagb-forms-input {
    border: 1px solid rgba(27, 54, 93, 0.15) !important;
    border-radius: 4px !important;
    background-color: #fcfcfc !important;
    padding: 12px 15px !important;
    font-family: var(--font-body) !important;
    transition: border-color 0.3s ease !important;
}

/* État Focus (quand on clique dans le champ) */
.uagb-forms-input:focus {
    border-color: var(--cl-terracotta) !important;
    outline: none !important;
    background-color: #fff !important;
}

/* Bouton d'envoi principal du formulaire */
.uagb-forms-main-submit-button {
    background-color: var(--cl-terracotta) !important;
    color: var(--cl-white) !important;
    border: none !important;
    padding: 15px 35px !important;
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    border-radius: 4px !important;
    transition: var(--transition) !important;
}

.uagb-forms-main-submit-button:hover {
    background-color: var(--cl-indigo) !important;
    transform: translateY(-2px);
}

/* Message de succès après envoi */
.uagb-forms-success-message-ecbaf35c {
    background-color: rgba(27, 54, 93, 0.05) !important;
    border: 1px solid var(--cl-indigo) !important;
    color: var(--cl-indigo) !important;
    border-radius: 4px;
    padding: 15px !important;
    font-family: var(--font-body) !important;
}

/* Ajustement responsive pour le formulaire sur mobile */
@media screen and (max-width: 600px) {
    .uagb-forms__outer-wrap {
        padding: 30px 20px !important;
    }
}

/* 10. STYLES UNIFIÉS POUR LES BOUTONS
   ========================================================================== */

/* État normal : s'applique à tous les boutons du site pour une cohérence maximale */
.wp-block-button__link, 
.ast-button, 
.uagb-forms-main-submit-button, 
.cl-nav-btn, 
.cl-mobile-btn-simple,
.cl-product-cta {
    background-color: var(--cl-terracotta) !important;
    color: var(--cl-white) !important;
    
    /* Typographie */
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em;
    font-size: 13px !important; /* Taille standardisée */
    
    /* Structure & Bordures */
    padding: 12px 25px !important;
    border-radius: 4px !important;
    border: none !important;
    display: inline-block !important;
    text-align: center !important;
    text-decoration: none !important;
    
    /* Animation */
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
    cursor: pointer !important;
    box-shadow: 0 4px 15px rgba(208, 136, 79, 0.15);
}

/* État au survol (hover) : effet visuel au passage de la souris */
.wp-block-button__link:hover, 
.ast-button:hover, 
.uagb-forms-main-submit-button:hover, 
.cl-nav-btn:hover, 
.cl-mobile-btn-simple:hover,
.cl-product-cta:hover {
    background-color: var(--cl-indigo) !important;
    color: var(--cl-white) !important;
    border-color: var(--cl-indigo) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(27, 54, 93, 0.25) !important;
}

/* État actif (clic) : léger mouvement pour un retour tactile */
.wp-block-button__link:active, 
.ast-button:active, 
.uagb-forms-main-submit-button:active,
.cl-nav-btn:active,
.cl-mobile-btn-simple:active,
.cl-product-cta:active {
    transform: translateY(-1px) !important;
}

/* 11. STYLES SPÉCIFIQUES AUX BLOCS GUTENBERG
   ========================================================================== */

/* Style pour les citations (Blockquotes) */
.wp-block-quote:not(.has-text-align-right):not(.has-text-align-center) {
    border-left: 2px solid var(--cl-terracotta);
}

/* Style pour les items de FAQ (UAGB) */
.uagb-block-538f9071 .uagb-faq-item {
    border-radius: 10px !important;
    border-color: var( --cl-gris) !important;
}

/* Ajustements responsives pour les blocs Gutenberg */
@media screen and (max-width: 921px) {
    /* Cache l'espaceur de 52px en mobile */
    .wp-block-spacer[style*="height:52px"] {
        display: none !important;
    }
}


/* 12. STYLES DES PLUGINS TIERS
   ========================================================================== */

/* Bannière de consentement Complianz */
.cmplz-manage-consent{
    left: 20px !important;
    box-shadow: 0 6px 20px rgba(27, 54, 93, 0.2) !important; /* Ombre plus marquée et harmonisée */
} 

/* Fond indigo pour la lightbox PhotoSwipe */
.pswp__item {
    background: rgba(27, 54, 93, 0.65) !important; /* Indigo avec 95% d'opacité */
}

/* Style des flèches de navigation de la lightbox */
button.pswp__button--arrow--left::before,
button.pswp__button--arrow--right::before {
    /* On supprime la flèche par défaut (faite avec des bordures) */
    border: none !important; 
    
    /* On crée un nouveau fond */
    content: '' !important;
    width: 44px !important; /* Largeur du bouton */
    height: 44px !important; /* Hauteur du bouton */
    top: 0;
    background-color: var(--cl-terracotta) !important;
    border-radius: 2px !important;
}

.pswp__button--arrow--right:before {
    background-position: -89px -37px !important;
}
.pswp__button--arrow--left:before {
    background-position: -135px -37px !important;
}

/* 13. STYLES SPÉCIFIQUES À WOOCOMMERCE
   ========================================================================== */
header.entry-header {
    display: none !important;
}
   .entry-title {
    font-size: 2rem !important;
}

.cl-product-cta-wrap {
  margin-top: 24px;
  margin-bottom: 10px;
}

.cl-product-cta-intro {
  margin-bottom: 12px;
  color: var(--cl-indigo);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Conteneur principal des pages de catégories */
div.ast-woocommerce-container {
    padding: 1rem 2rem 2rem 1rem !important;
    background-color: var(--cl-sable) !important;
}


/* Titre des pages de catégories */
.woocommerce-products-header__title.page-title {
    font-weight: 700 !important;
}

/* Images des produits dans les listes */
.woocommerce-js ul.products li.product a img {
    border-radius: 10px;
}

/* Conteneur de la page produit unique */
.woocommerce-js div.product {
    padding: 1rem;
}

/* Titre de la page produit unique */
h1.product_title.entry-title {
    font-weight: 700 !important;
}

/* Menu déroulant de tri des produits WooCommerce */
.woocommerce .woocommerce-ordering select,
.woocommerce-page .woocommerce-ordering select {
    background-color: var(--cl-white);
    border: 1px solid var(--cl-indigo) !important;
    border-radius: 4px;
    font-family: var(--font-body);
    padding: 8px 12px;
    color: var(--cl-indigo);
    transition: var(--transition);
}
.woocommerce .woocommerce-ordering select:hover,
.woocommerce-page .woocommerce-ordering select:hover {
    border-color: var(--cl-terracotta) !important;
}

/* 14. MODALE DE CONTACT (POP-UP)
   ========================================================================== */

/* Le fond de la modale (overlay) */
.cl-modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(27, 54, 93, 0.8);
    backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;

    /* Gestion de la visibilité et de la transition */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0s 0.4s;
}

/* Le conteneur du contenu de la modale */
.cl-modal-content {
    position: relative;
    max-width: 700px;
    width: 100%;

    /* Animation d'apparition */
    transform: translateY(50px) scale(0.95);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Styles quand la modale est ouverte (via la classe sur le body) */
.cl-modal-is-open .cl-modal-overlay {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

.cl-modal-is-open .cl-modal-content {
    transform: translateY(0) scale(1);
}

/* On s'assure que le formulaire est bien visible dans la modale */
.cl-modal-content .uagb-forms__outer-wrap {
    margin: 0 !important;
    max-width: 100% !important;
}

/* Le bouton de fermeture */
.cl-modal-close {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 40px;
    height: 40px;
    background-color: var(--cl-white);
    color: var(--cl-indigo);
    border: none;
    border-radius: 50%;
    font-size: 28px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
    z-index: 10;
}

.cl-modal-close:hover {
    transform: scale(1.1);
    background-color: var(--cl-terracotta);
    color: var(--cl-white);
}


/* 15. GRILLES RESPONSIVES des colonnes de la section mon atelier
   ========================================================================== */

/* Par défaut (Desktop et Tablette) : 3 colonnes */
.wp-block-group.cl-colonnes {
    display: grid !important; /* Force le mode grid si WordPress applique d'autres styles */
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 24px; /* Espace entre les colonnes */
}

/* Mode Mobile : 1 seule colonne */
@media (max-width: 781px) { /* Seuil standard de WordPress pour le mobile */
    .wp-block-group.cl-colonnes {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   16. ASTRA : METAMORPHOSE DU BOUTON PANIER EN LOUPE "EXPLORER L'ŒUVRE"
   ========================================================================== */

/* 1. On cache définitivement le sac d'origine à l'intérieur du cercle */
.ast-on-card-button .ahfb-svg-iconset {
    display: none !important;
}

/* 2. On configure le bouton (cercle blanc) pour centrer notre future loupe */
.ast-on-card-button.add_to_cart_button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
}

/* 3. On injecte la loupe PARFAITEMENT au centre du cercle blanc */
.ast-on-card-button.add_to_cart_button::after {
    content: "" !important;
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    background-color: currentColor !important; /* Récupère la couleur sombre d'Astra (et s'adaptera au hover) */
    
    /* Masque vectoriel de la loupe */
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/></svg>") no-repeat center !important;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/></svg>") no-repeat center !important;
    mask-size: contain !important;
    -webkit-mask-size: contain !important;
}

/* 4. LE TOUR DE MAGIE : On remplace le texte du Tooltip sans JS */
.ast-card-action-tooltip {
    font-size: 0 !important; /* Fait disparaître le texte "Ajouter au panier" */
}

.ast-card-action-tooltip::before {
    content: "Explorer l'œuvre" !important; /* Injecte ton nouveau texte */
    font-size: 12px !important; /* Redonne la bonne taille de lecture au tooltip */
    color: #ffffff !important; /* Assure que le texte reste blanc sur le fond bleu */
    white-space: nowrap !important;
}