.elementor-kit-27{--e-global-color-primary:#111111;--e-global-color-secondary:#141414;--e-global-color-text:#131313;--e-global-color-accent:#CAC8BB;--e-global-color-a2e875e:#FFFFFF;--e-global-color-0c9653f:#EFEEE5;--e-global-color-3b5cda1:#BDBDBD;--e-global-color-84ab9b4:#323232;--e-global-color-5dfea82:#EEEEEE;--e-global-color-19f23b7:#325E58;--e-global-color-b395ee6:#CAC8BB;--e-global-typography-primary-font-family:"Manrope";--e-global-typography-primary-font-size:2.5rem;--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Manrope";--e-global-typography-secondary-font-size:1.5rem;--e-global-typography-text-font-family:"Manrope";--e-global-typography-text-font-size:1rem;--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Manrope";--e-global-typography-accent-font-size:0.8rem;--e-global-typography-accent-font-weight:500;--e-global-typography-accent-letter-spacing:0.01em;color:#070707;font-family:"Afacad", Sans-serif;font-size:1rem;font-weight:400;line-height:1.6em;}.elementor-kit-27 button,.elementor-kit-27 input[type="button"],.elementor-kit-27 input[type="submit"],.elementor-kit-27 .elementor-button{background-color:#CAC8BB00;font-family:"Manrope", Sans-serif;font-size:0.8rem;font-weight:400;text-decoration:underline;color:#000000;padding:0px 0px 0px 0px;}.elementor-kit-27 button:hover,.elementor-kit-27 button:focus,.elementor-kit-27 input[type="button"]:hover,.elementor-kit-27 input[type="button"]:focus,.elementor-kit-27 input[type="submit"]:hover,.elementor-kit-27 input[type="submit"]:focus,.elementor-kit-27 .elementor-button:hover,.elementor-kit-27 .elementor-button:focus{background-color:#325E5800;color:var( --e-global-color-a2e875e );border-radius:30px 30px 30px 30px;}.elementor-kit-27 e-page-transition{background-color:var( --e-global-color-primary );}.elementor-kit-27 a{color:#141414;font-family:"Manrope", Sans-serif;font-size:1rem;font-weight:400;line-height:1.6em;}.elementor-kit-27 a:hover{color:#000000;font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );}.elementor-kit-27 h1{color:var( --e-global-color-primary );}.elementor-kit-27 h2{color:var( --e-global-color-primary );}.elementor-kit-27 h3{color:var( --e-global-color-primary );}.elementor-kit-27 h4{color:var( --e-global-color-primary );}.elementor-kit-27 h5{color:var( --e-global-color-primary );}.elementor-kit-27 h6{color:var( --e-global-color-primary );}.elementor-kit-27 label{color:var( --e-global-color-text );}.elementor-kit-27 input:not([type="button"]):not([type="submit"]),.elementor-kit-27 textarea,.elementor-kit-27 .elementor-field-textual{border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-3b5cda1 );border-radius:30px 30px 30px 30px;transition:0ms;padding:16px 30px 16px 30px;}.elementor-kit-27 input:focus:not([type="button"]):not([type="submit"]),.elementor-kit-27 textarea:focus,.elementor-kit-27 .elementor-field-textual:focus{border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-accent );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-27 a:hover{font-size:var( --e-global-typography-text-font-size );}.elementor-kit-27 button,.elementor-kit-27 input[type="button"],.elementor-kit-27 input[type="submit"],.elementor-kit-27 .elementor-button{padding:16px 30px 16px 30px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-27 a:hover{font-size:var( --e-global-typography-text-font-size );}.elementor-kit-27 input:not([type="button"]):not([type="submit"]),.elementor-kit-27 textarea,.elementor-kit-27 .elementor-field-textual{padding:15px 20px 15px 20px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */h1 { font-size: clamp(3rem, -3.4878rem + 27.3171vw, 17rem); }
h2 { font-size: clamp(2.4375rem, 2.1479rem + 1.2195vw, 3.0625rem); }
h3 { font-size: clamp(1.9375rem, 1.6768rem + 1.0976vw, 2.5rem); }
p  { font-size: clamp(0,9rem, 0.9421rem + 0.2439vw, 1.125rem); }


/* --- La classe principale qui active l'effet --- */
.luxury-product-loop .woocommerce-LoopProduct-link {
    position: relative;
    display: block;
    overflow: hidden;
    text-decoration: none;
    color: #333;
    transition: all 0.4s ease-in-out;
}

/* Au survol, l'ensemble du bloc se soulève très légèrement */
.luxury-product-loop .woocommerce-LoopProduct-link:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* --- Style de l'image du produit --- */
.luxury-product-loop .woocommerce-LoopProduct-link img {
    display: block;
    width: 100%;
    height: auto;
    filter: grayscale(0%);
    transition: filter 0.5s ease;
}

.luxury-product-loop .woocommerce-LoopProduct-link:hover img {
    filter: grayscale(10%);
}

/* --- Cache le titre et le prix par défaut --- */
.luxury-product-loop .woocommerce-loop-product__title,
.luxury-product-loop .price {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

/* --- Effet d'apparition au survol (superposition noire) --- */
.luxury-product-loop .woocommerce-LoopProduct-link:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    transition: background-color 0.4s ease-in-out;
    pointer-events: none;
}

.luxury-product-loop .woocommerce-LoopProduct-link:hover:before {
    background-color: rgba(0, 0, 0, 0.7);
}

/* --- Style du titre et du prix sur le fond noir --- */
.luxury-product-loop .woocommerce-LoopProduct-link:hover .woocommerce-loop-product__title,
.luxury-product-loop .woocommerce-LoopProduct-link:hover .price {
    opacity: 1;
}

.luxury-product-loop .woocommerce-loop-product__title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    font-size: 1.5em;
    font-weight: 300;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.luxury-product-loop .price {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1em;
    font-weight: 400;
    color: #fff;
    background: transparent;
    padding: 0;
    white-space: nowrap;
}

---

### Version pour mobile et tablette (avec la classe)

J'ai aussi mis à jour la media query pour inclure la nouvelle classe.

```css
@media screen and (max-width: 768px) {
    /* Désactive l'effet de zoom sur l'image */
    .luxury-product-loop .woocommerce-LoopProduct-link:hover img {
        transform: scale(1);
        filter: grayscale(0%);
    }

    /* Désactive la superposition et les informations qui apparaissent au survol */
    .luxury-product-loop .woocommerce-LoopProduct-link:before {
        background-color: transparent !important;
    }

    .luxury-product-loop .woocommerce-LoopProduct-link .woocommerce-loop-product__title,
    .luxury-product-loop .woocommerce-LoopProduct-link .price {
        opacity: 1 !important;
        position: static;
        transform: none;
        text-align: left;
        color: #333 !important;
        background-color: transparent !important;
        padding: 0 !important;
        margin-top: 5px;
    }

    /* Annule l'effet de soulèvement du bloc */
    .luxury-product-loop .woocommerce-LoopProduct-link:hover {
        transform: translateY(0);
        box-shadow: none;
    }
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 200;
	font-display: auto;
	src: url('https://www.abraka-dabra.fr/wp-content/uploads/2025/08/Manrope-ExtraLight.ttf') format('truetype');
}
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 300;
	font-display: auto;
	src: url('https://www.abraka-dabra.fr/wp-content/uploads/2025/08/Manrope-Light.ttf') format('truetype');
}
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://www.abraka-dabra.fr/wp-content/uploads/2025/08/Manrope-Regular.ttf') format('truetype');
}
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 500;
	font-display: auto;
	src: url('https://www.abraka-dabra.fr/wp-content/uploads/2025/08/Manrope-Medium.ttf') format('truetype');
}
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 600;
	font-display: auto;
	src: url('https://www.abraka-dabra.fr/wp-content/uploads/2025/08/Manrope-SemiBold.ttf') format('truetype');
}
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 700;
	font-display: auto;
	src: url('https://www.abraka-dabra.fr/wp-content/uploads/2025/08/Manrope-Bold.ttf') format('truetype');
}
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 800;
	font-display: auto;
	src: url('https://www.abraka-dabra.fr/wp-content/uploads/2025/08/Manrope-ExtraBold.ttf') format('truetype');
}
/* End Custom Fonts CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Afacad';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://www.abraka-dabra.fr/wp-content/uploads/2025/08/Manrope-Regular.ttf') format('truetype');
}
@font-face {
	font-family: 'Afacad';
	font-style: normal;
	font-weight: 300;
	font-display: auto;
	src: url('https://www.abraka-dabra.fr/wp-content/uploads/2025/08/Afacad-Medium.ttf') format('truetype');
}
@font-face {
	font-family: 'Afacad';
	font-style: normal;
	font-weight: 500;
	font-display: auto;
	src: url('https://www.abraka-dabra.fr/wp-content/uploads/2025/08/Afacad-SemiBold.ttf') format('truetype');
}
@font-face {
	font-family: 'Afacad';
	font-style: normal;
	font-weight: 700;
	font-display: auto;
	src: url('https://www.abraka-dabra.fr/wp-content/uploads/2025/08/Afacad-Bold.ttf') format('truetype');
}
/* End Custom Fonts CSS */