/*!
Theme Name: MWO Theme
Theme URI: http://yannsimon.com/
Author: Yann Simon
Author URI: http://yannsimon.com/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: mwo-theme
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

MWO Theme is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
    - Normalize
    - Box sizing
# Base
    - Typography
    - Elements
    - Links
    - Forms
## Layouts
# Components
    - Navigation
    - Posts and pages
    - Comments
    - Widgets
    - Media
    - Captions
    - Galleries
# plugins
    - Jetpack infinite scroll
# Utilities
    - Accessibility
    - Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
    ========================================================================== */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* ================================================= */
/* 1. PALETTE DE COULEURS GLOBALE        */
/* ================================================= */
:root {
    /* 1.1. Couleurs fonctionnelles principales */
    --color-primary: #050505;         /* Ex: Ton bleu/violet de marque, pour les boutons, liens, etc. */
    --color-secondary: #D9D9D9;       /* Ex: Une couleur qui contraste (Jaune/Orange) pour l'accentuation. */
    --color-tertiary: #00A389;        /* Ex: Une troisième couleur si nécessaire (Vert). */
    --color-cta: #FF6B6B;             /* Ex: Couleur spécifique pour les Call-To-Action urgents (Rouge). */

    /* 1.2. Couleurs Neutres (Texte, Fond, Bordures) */
    --color-black: #1A1A1A;           /* Noir profond pour le texte principal. */
    --color-white: #FFFFFF;           /* Blanc standard. */

    /* 1.3. Niveaux de gris */
    --color-gray-dark: #4A4A4A;       /* Gris foncé (titres secondaires). */
    --color-gray-medium: #888888;     /* Gris moyen (paragraphes, icônes). */
    --color-gray-light: #CCCCCC;      /* Gris clair (bordures, séparateurs). */
    --color-background: #F8F8F8;      /* Gris très clair (fond de sections). */

    /* 1.4. Couleurs de statut (si pertinent) */
    --color-success: #4CAF50;         /* Vert pour succès. */
    --color-error: #F44336;           /* Rouge pour erreur. */
    --color-warning: #FF9800;         /* Orange pour attention. */
}

/* ----------------------------------------------------------------- */
/* >>> POLICES DE CARACTÈRES CUSTOM (ABCRepro) */
/* ----------------------------------------------------------------- */

/* Police de base (Regular - Poids 400) */
@font-face {
    font-family: 'ABCRepro'; /* C'est le nom que tu utiliseras dans le reste du CSS */
    src: url('fonts/ABCRepro-Regular.woff2') format('woff2'),
         url('fonts/ABCRepro-Regular.woff') format('woff');
    font-weight: 400; 
    font-style: normal;
    font-display: swap; 
}

/* Police Grasse (Bold - Poids 700) */
@font-face {
    font-family: 'ABCRepro'; /* Garde le même nom de famille pour que le navigateur comprenne */
    src: url('fonts/ABCRepro-Bold.woff2') format('woff2'),
         url('fonts/ABCRepro-Bold.woff') format('woff');
    font-weight: 700; 
    font-style: normal;
    font-display: swap;
}

/* ----------------------------------------------------------------- */
/* FIN POLICES DE CARACTÈRES */
/* ----------------------------------------------------------------- */



/* Document
    ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
}

/* Sections
    ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
    margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
    display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

/* Grouping content
    ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
    font-family: monospace, monospace;
    font-size: 1em;
}

/* Text-level semantics
    ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
    background-color: transparent;
	text-decoration: none;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
    font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
    font-family: monospace, monospace;
    font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
    font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

/* Embedded content
    ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
    border-style: none;
}

/* Forms
    ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
    overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
    text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
    padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 * `fieldset` elements in all browsers.
 */
legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
    vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
    overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
}

/* Interactive
    ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
    display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
    display: list-item;
}

/* Misc
    ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
    display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
    display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
    box-sizing: inherit;
}

html {
    box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
    color: black;
   
    font-family: 'ABCRepro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    
    font-size: 1rem;
    line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    clear: both;
}

h1.entry-title{
    text-transform: uppercase;
    font-weight: normal;
	    font-weight: bold;
    font-size: 24px;
	margin-bottom: 0;
	padding-top: 1em;
}

.product-series, .product-subtitle{
	text-transform: uppercase;
	margin-bottom: 0.5em;
	margin-top: 0;
}

.product-series{
	display: none;
}

h2{
    font-weight: normal;
}

p {
    margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
    font-style: italic;
}

blockquote {
    margin: 0 1.5em;
}

address {
    margin: 0 0 1.5em;
}

pre {
    background: #eee;
    font-family: "Courier 10 Pitch", courier, monospace;
    line-height: 1.6;
    margin-bottom: 1.6em;
    max-width: 100%;
    overflow: auto;
    padding: 1.6em;
}

code,
kbd,
tt,
var {
    font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
    border-bottom: 1px dotted #666;
    cursor: help;
}

mark,
ins {
    background: #fff9c0;
    text-decoration: none;
}

big {
    font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
    background: #fff;
}

hr {
    background-color: #ccc;
    border: 0;
    height: 1px;
    margin-bottom: 1.5em;
}

ul,
ol {
    margin: 0 0 1.5em 3em;
}

ul {
    list-style: disc;
}

ol {
    list-style: decimal;
}

li > ul,
li > ol {
    margin-bottom: 0;
    margin-left: 1.5em;
}

dt {
    font-weight: 700;
}

dd {
    margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
    max-width: 100%;
}

img {
    height: auto;
    max-width: 100%;
}

figure {
    margin: 1em 0;
}

table {
    margin: 0 0 1.5em;
    width: 100%;
}

/* Links
--------------------------------------------- */
a {
    color: var(--color-primary);
	transition: all 0.3s ease-in-out;
}

a:visited {
    /* color: #800080; */
}

a:hover,
a:focus,
a:active {
    /* color: var(--color-secondary); */
	transition: all 0.3s ease-in-out;
}

a:focus {
    outline: thin dotted;
}

a:hover,
a:active {
    outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
    border: 1px solid;
    border-color: #ccc #ccc #bbb;
    border-radius: 3px;
    background: #e6e6e6;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1;
    padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
    border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
    border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
    color: #666;
    border: 1px solid black;
    border-radius: 0px;
    padding: 14px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
    color: #111;
}

select {
    border: 1px solid black;
}

textarea {
    width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.main-navigation {
    display: block;
    /* width: 100%; */
}

.main-navigation ul {
    display: none;
    list-style: none;
    margin: 0;
    padding-left: 0;
}

.main-navigation ul ul {
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    float: left;
    position: absolute;
    top: 100%;
    left: -999em;
    z-index: 99999;
}

.main-navigation ul ul ul {
    left: -999em;
    top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
    display: block;
    left: auto;
}

.main-navigation ul ul a {
    width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
    left: auto;
}

.main-navigation li {
    position: relative;
    margin: 1em;
}

.main-navigation .current-menu-item a{
	color: var(--color-primary);
}

.main-navigation a {
    display: block;
    text-decoration: none;
	text-transform: lowercase;
	color: var(--color-secondary);
    transition: transform 0.08s ease, opacity 0.2s ease, color 0.2s ease;
}

.main-navigation a:active {
    transform: scale(0.98);
}

.main-navigation a:hover{
	color: var(--color-primary);
    opacity: 0.7;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
    display: block;
}

@media screen and (min-width: 768px) {
    .menu-toggle {
        display: none;
    }

    .main-navigation ul {
        display: flex;
		gap: 0.8em;
    }
}

@media screen and (min-width: 900px) {
    .main-navigation ul {
        display: flex;
		gap: 1.5em;
    }
}

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
    margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
    display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
    flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
    text-align: end;
    flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
    display: block;
}

.post,
.page {
    /* margin: 0 0 1.5em; */
}

.updated:not(.published) {
    display: none;
}

.page-content,
.entry-content,
.entry-summary {
    margin: 1.5em 0 0;
	font-size: 15px;
}

.page-links {
    clear: both;
    margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
    word-wrap: break-word;
}

.bypostauthor {
    display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
    margin: 0 0 1.5em;
}

.widget select {
    max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
    border: none;
    margin-bottom: 0;
    margin-top: 0;
    padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
    display: inline-block;
    transition: transform 0.08s ease;
}

.custom-logo-link:hover{
	opacity: 0.3;
	opacity: 1;
}

.custom-logo-link:active {
    transform: scale(0.97);
}

/* Captions
--------------------------------------------- */
.wp-caption {
    margin-bottom: 1.5em;
    max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.wp-caption .wp-caption-text {
    margin: 0.8075em 0;
}

.wp-caption-text {
    text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
    margin-bottom: 1.5em;
    display: grid;
    grid-gap: 1.5em;
}

.gallery-item {
    display: inline-block;
    text-align: center;
    width: 100%;
}

.gallery-columns-2 {
    grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
    grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
    grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
    grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
    grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
    grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
    grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
    grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
    display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
    display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
    display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    clip-path: none;
    color: #21759b;
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
    outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

    /*rtl:ignore*/
    float: left;

    /*rtl:ignore*/
    margin-right: 1.5em;
    margin-bottom: 1.5em;
}

.alignright {

    /*rtl:ignore*/
    float: right;

    /*rtl:ignore*/
    margin-left: 1.5em;
    margin-bottom: 1.5em;
}

.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.5em;
}

/* yann custom */

/* homepage */

body{
    min-height: 100svh;
	/* overflow: hidden; */
	/* min-height: 100%; */
}

.site-header{
    display:flex;
    justify-content: center;
    position: relative;
    align-items: center;
}

.site-branding{
    position: absolute;
    left: 0em;
    top: 0.5em;
}

.site-title{
    display: none;
}

.footer-container{
    display: flex;
    justify-content: space-between;
	align-items: center;
    padding: 1em;
    width: 100%;
    padding-bottom: 0;
    margin-bottom: 0em;

    ul{
        padding-left: inherit;
        margin-left: inherit;
		margin-bottom: 0;
    }
}

.footer-navigation .menu-item a, .footer-copyright{
	text-transform: lowercase;
	color: var(--color-secondary);
}

.footer-navigation .menu-item a:hover{
	color: var(--color-primary);
}

.footer-nav-links li{
    list-style: none;
}

.footer-socials ul {
    display: flex;
    margin-bottom: inherit;
    list-style: none; /* On le met ici aussi par sécurité */
}

.footer-socials ul li {
    list-style-type: none;
    margin: 0.5em;
}

@media (max-width: 768px){
	.footer-socials ul li {
		margin: 3px;
	}
}

.footer-socials ul li a {
    text-decoration: none;
    font-weight: bold;
}



.site{
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* padding: 1em; */
}

.site-main{
    padding: 1em 2em;
	overflow: hidden;
	flex: 1;
	padding-top: 4em;
}

.site-main.single-catalog-page{
	display: flex;
    flex-direction: column;
    justify-content: end;
}

.site-main.single-catalog-page .catalog{
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	flex: 1;
}

.mwo-product-content-wrapper{
	flex: 1;
	display: flex;
}

.mwo-product-gallery{
	flex: 1;
}

.archive-catalog-page{
	overflow: inherit;
}

.mwo-terms-page{
	max-width: 1000px;
    margin: 0 auto;
}

/* --- DÉBUT DU NOUVEAU STYLE VIDÉO VIMEO/LOCAL --- */

.mwo-hero-video-section {
	width: 100%;
    display: flex;
    justify-content: center;
    position: relative; /* Reste relative pour le contenu texte (mwo-hero-content) */
}

/* 1. Conteneur principal pour définir la taille maximale */
/* Ceci remplace l'ancien .mwo-video-element */
.mwo-hero-video-container {
    width: 850px;
    max-width: 43%;
	width: 1200px;
    max-width: 70%;
    margin: 0 auto; 
}

/* 2. Conteneur pour gérer le ratio 16:9 pour l'iFrame Vimeo */
.vimeo-embed-container {
    position: relative;
    padding-bottom: 56.25%; /* Ratio 16:9 (9/16 * 100) */
    height: 0;
    overflow: hidden;
}

/* 3. L'iFrame Vimeo doit remplir le conteneur ratio */
.vimeo-embed-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Style de l'ancienne balise <video> si tu continues de l'utiliser en fallback */
.mwo-video-element{
    width: 850px;
    max-width: 43%;
    transition: all 0.7s ease-in-out;
}
video{
    transition: all 0.7s ease-in-out;
}

/* 4. Poster (façade) affiché avant que l'iframe Vimeo soit chargée */
.vimeo-poster {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 5; /* au-dessus de l'iframe (z auto), en-dessous de l'overlay (z 10) */
    transition: opacity 0.8s ease;
}

.vimeo-poster--hidden {
    opacity: 0;
    pointer-events: none;
}

/* --- FIN DU NOUVEAU STYLE VIDÉO VIMEO/LOCAL --- */

.mwo-hero-content{
    display: none;
}

/* catalog */
.catalog-filters-bar{
    width: 100%;
    display: flex;
    justify-content: space-around;
}

.mwo-catalog-grid, .lab-list-grid{
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: 1em;
}

.catalog-custom-images-content{
	margin-top: 6em;
}

.custom-design-explore{
	margin-bottom: 2em;
}

.catalog-variations-preview{
    display: flex;
}

.custom-section-button{
	color: white;
	background-color: black;
	padding: 0.5em 1em;
	border-radius: 24px;
	margin: 2em 0;
	display: inline-block;
    transition: transform 0.08s ease;
}

.custom-section-button:active {
    transform: scale(0.98);
}

/* formulaire de contact */

.form-row>p{
    margin-bottom: 0;
}

.form-row-2-cols {
    display: flex;
    gap: 20px; /* Espace entre les colonnes */
}

.form-row-2-cols .col-1,
.form-row-2-cols .col-2 {
    flex: 1; /* Chaque colonne prend la moitié de l'espace */
}

/* Style des champs input/textarea */
.form-row-2-cols input[type="text"],
.form-row-2-cols input[type="email"],
.form-row-2-cols textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid black; /* Utilise ta variable CSS pour la bordure */
	border-radius: 0;
}

/* Style des boutons submit et add more */
.form-actions {
    display: flex;
    gap: 20px;
    margin-top: 30px;
    justify-content: end;
	width: 100%;
}

.form-actions>p{
    display: flex;
}

.form-actions .wpcf7-spinner{
    display: none;
}

.form-actions .button-submit,
.form-actions .button-add-more, #add-to-quote-button {
    /* Style noir et blanc comme sur la maquette */
    padding: 10px 20px;
    text-transform: lowercase;
    /* font-weight: bold; */
    /* cursor: pointer; */
    transition: background-color 0.3s, color 0.3s;
    border-radius: 32px;
    margin: 0.5em;
	margin-left: 0;
}

.form-actions .button-submit, #add-to-quote-button {
    background-color: var(--color-primary, #000);
    color: #fff;
    /* border: 1px solid var(--color-primary, #000); */
}

.form-actions .button-add-more {
    background-color: #fff;
    color: var(--color-primary, #000);
    border: 1px solid var(--color-primary, #000);
}

.form-actions .button-submit:active,
.form-actions .button-add-more:active,
#add-to-quote-button:active {
    transform: scale(0.98);
    transition: transform 0.08s ease;
}

/* page archive catalog */

/* 1. Définir le conteneur pour qu'il soit un CARRÉ (aspect-ratio: 1/1) */
.catalog-item-image, .variation-item-archive-link {
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Retire la hauteur fixe (700px) et utilise le ratio 1:1 */
    aspect-ratio: 1 / 1; 
    
    /* Assure que l'élément prend la largeur disponible de la grille */
    width: 100%; 
    
    /* Assure la suppression des parties d'image qui dépassent */
    overflow: hidden; 
    
    position: relative;
    transition: all 0.3s ease-in-out;
    /* La propriété height: 100%; est supprimée car aspect-ratio la gère */
}

/* 2. Effets de survol sur le conteneur */
/* J'ai ciblé le sélecteur général pour éviter le bug visuel si tu changes l'opacité sur le lien */
.catalog-item-card:hover .catalog-item-image, 
.variation-item-archive-link:hover {
    /* L'opacité sur l'élément principal est conservée */
    opacity: 0.5;
	opacity: 1;
    /* cursor: pointer; */
    transition: all 0.3s ease-in-out;
}

/* 3. Styles pour l'image à l'intérieur */
.catalog-item-image img, .variation-item-archive-link img {
    width: 100%;
    height: 100%;
    
    /* Garantit que l'image couvre entièrement le carré */
    object-fit: cover; 
    object-position: center center;
    
    /* Ceci est généralement superflu avec object-fit: cover, mais conservé par sécurité */
    max-width: none; 
    max-height: none;

    transition: all 0.3s ease-in-out;
}

/* 4. Effet de zoom sur l'image au survol */
.catalog-item-image:hover img , .variation-item-archive-link:hover img{
    transform: scale(1.02); /* J'ai légèrement augmenté le scale à 1.05 pour un meilleur effet */
}

/* 5. Animations de filtrage - Transitions fluides */
.shuffle-item,
.catalog-item-card,
.variation-item-archive-link {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.18s ease-in-out, transform 0.18s ease-in-out;
}

.shuffle-item.is-hiding,
.catalog-item-card.is-hiding,
.variation-item-archive-link.is-hiding {
    opacity: 0;
    transform: scale(0.97);
    pointer-events: none;
}

.shuffle-item.is-showing,
.catalog-item-card.is-showing,
.variation-item-archive-link.is-showing {
    opacity: 1;
    transform: scale(1);
}

/* page produit catalog */

.mwo-product-gallery {
    display: grid;
    grid-template-columns: 45% 55%;
    gap: 4em;
}

@media screen and (min-width: 1400px){
	.mwo-product-gallery{
		grid-template-columns: 40% 60%;
	}
}

.mwo-product-gallery-col-left{
	padding-right: 4em;
	    display: flex;
    flex-direction: column;
    /* justify-content: flex-end; */
	justify-content: space-between;
}

@media (max-width: 768px){
	.mwo-product-gallery-col-left{
		padding-right: 0;
	}
}

.product-image-thumbnails {
    flex: 0 0 100px;
}

.main-image-container {
    /* Permet à l'image principale de prendre le reste de l'espace */
    flex: 1;
}

.variation-items-wrapper{
    display:flex;
    gap:1em;
}

/* On force le texte à se comporter de la même manière peu importe la balise */
.product-description, 
.product-description div, 
.product-description p {
    font-size: 15px;
    line-height: 22.5px;
    color: black; /* Ta couleur */
    margin-bottom: 30px;
}

/* On nettoie les marges des divs imbriquées pour éviter les décalages doubles */
.product-description div {
    margin-bottom: 0;
}

.product-description p:last-child {
    margin-bottom: 0;
}

/* --- Styles génériques pour toutes les galeries de variations --- */

.variation-items-wrapper {
    /* Active Flexbox sur le conteneur principal */
    display: flex;
    /* Permet le passage à la ligne */
    flex-wrap: wrap; 
    /* Ajoute un espacement régulier entre les vignettes */
    gap: 10px; /* Espace de 10px entre les vignettes (à ajuster si besoin) */
    /* Assure-toi que la largeur est bien 100% de la colonne produit, sauf si tu la limites ailleurs */
    width: 100%; 
}

.variation-item {
    /* Assure la référence de positionnement pour les contrôles */
    position: relative;
    /* Fait en sorte que tous les .variation-item soient des carrés */
    aspect-ratio: 1 / 1; 
    /* Masquer tout ce qui pourrait dépasser du carré */
    overflow: hidden; 
    /* Conserve tes styles de vignette ici */
    display: block; 
    transition: all 0.3s ease-in-out;
	width: 115px;
}

@media (max-width: 768px){
	.variation-item{
		width: 80px;
	}
}

.variation-item:hover{
    /* Conserve tes styles de survol */
    border-radius: 0;
	opacity: 1;
    /*cursor: pointer;*/
    transition: all 0.3s ease-in-out;
}

.variation-item img{
    /* L'image remplit complètement le carré */
    width: 100%;
    height: 100%;
    /* Recadre l'image pour qu'elle couvre le conteneur sans déformation */
    object-fit: cover; 
    transition: all 0.3s ease-in-out;
}

.variation-item:hover img{
    /* transform: scale(1.05); */
    transition: all 0.3s ease-in-out;
}

/* Click press feedback */
.variation-item:active {
    transform: scale(0.98);
    transition: transform 0.08s ease;
}

/* Active (selected) state */
.variation-item.is-active {
    opacity: 0.8;
}

/* -------------------------------------------------------------------------------------- */
/* --- MODIFICATION POUR LE BADGE DE QUANTITÉ (Toujours visible et HAUT DROITE) --- */
/* -------------------------------------------------------------------------------------- */
.variation-quantity-badge {
    /* 1. Positionnement par rapport à .variation-item (qui est relative) */
    position: absolute; 
    top: 5px; /* Position en haut */
    right: 5px; /* Position à droite */
    z-index: 20; /* Plus haut que les contrôles (z-index: 10) */
    
    /* 2. Affichage et dimensions (Badge rond) */
    min-width: 15px;
    height: 15px;
    padding: 0;
    line-height: 1;

    /* Pour centrer le chiffre */
    display: flex;
    justify-content: center;
    align-items: center;

    /* 3. Design */
    background-color: white; /* Ton Orange/Rouge */
    color: black;
    font-size: 12px;
    font-weight: bold;
    border-radius: 50%; /* Cercle */
    /*border: 2px solid white;  Bordure blanche pour ressortir */

    /* 4. Transition (pour l'apparition/disparition si tu utilises le JS plus tard) */
    opacity: 1; 
    transform: scale(1);
    transition: all 0.3s ease;
}
/* FIN DU STYLE DE BADGE */



/* --- CORRECTION POUR L'ALIGNEMENT DU BOUTON MOINS ET DU BADGE --- */

/* 1. Conteneur des contrôles (+ / -) */
.variation-controls-wrapper {
    /* Positionne l'ensemble du groupe en bas à droite */
    position: absolute;
    bottom: 5px; 
    right: 5px; 
    
    /* Active Flexbox pour aligner le contenu interne */
    display: flex; 
    align-items: center; 
    gap: 4px; /* Petit espace entre les éléments */
    
    z-index: 10;
    
    /* Rendre le conteneur invisible par défaut */
    opacity: 0; 
    transform: scale(0.8);
    transition: all 0.3s ease;
}

/* 2. Le conteneur apparaît au survol de la vignette entière */
.variation-item:hover .variation-controls-wrapper {
    opacity: 1;
    transform: scale(1);
}

/* 3. Styles pour les boutons - et + (Le style du badge a été déplacé/mis à jour plus haut) */
.variation-controls-wrapper button {
    /* Styles de base pour les boutons +/- */
    width: 20px;
    height: 20px;
    line-height: 1;
    padding: 0;
    margin: 0;
    border-radius: 0;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    border: none; /* Simplifier le style */
    display: flex; /* Pour centrer le symbole */
    justify-content: center;
    align-items: center;
}

/* Style du bouton Plus */
.variation-controls-wrapper button.add-variation-btn {
    background-color: white; /* Vert */
    color: black;
	padding-bottom: 1px;
}

/* Style du bouton Moins (actif) */
.remove-variation-btn:not(:disabled) {
    background-color: white; /* Rouge */
    color: black;
}

/* Style du bouton Moins (désactivé) */
.remove-variation-btn:disabled {
    background-color: #f0f0f0;
    color: #999;
    cursor: not-allowed;
}
/* FIN DE LA CORRECTION */


/* 1. Conteneur (la zone visible) */
.main-image-container {
    width: 100%;
    height: 100%;
    /* overflow: hidden; */
    position: relative;
    display: flex;
    justify-content: end;
    padding-right: 4em;
}

/* 2. L'image (ce qui doit s'ajuster) */
.main-image-container .product-main-image,
.main-image-container img {
	flex: 1;
    /* width: 100%; */
    height: 100%;
    /* object-fit: cover; */
    /* object-position: center center; */
	object-position: right center;
    /* max-width: 60%; */
        /* position: sticky; */
    /* top: 3em; */
    /* max-height: 600px; */
	max-height: 80svh;
    width: auto;
}

.main-image-container .product-main-image.is-landscape{
	object-fit: cover;
	object-position: center center;
}

.main-image-container .product-main-image.is-portrait{
	object-fit: contain;
	object-position: right center;
}

/* header */
/* Positionnement général du conteneur dans le header */
.site-header {
    display: flex;
    justify-content: center;
    align-items: center;
    /* margin-bottom: 3em; */
    /* position: sticky; */
    top: 1em;
    background: white;
    z-index: 1000;
}

/* Conteneur de l'icône du panier */
.header-cart-wrapper {
    margin-left: 20px; /* Espace entre le menu et l'icône */
    position: relative; /* Base pour positionner le badge */
}

/* Le lien lui-même */
.cart-link {
    display: block; /* Pour s'assurer qu'il prend l'espace correctement */
    text-decoration: none;
    color: inherit; /* Pour hériter de la couleur du texte */
}

/* Le petit rond rouge du compteur */
.quote-count-badge {
    background-color: transparent;
    color: black;
    font-size: 10px;
    font-weight: bold;
    border-radius: 50%;
    padding: 2px 6px;
    line-height: 1; /* Assure que le texte est centré */
    position: absolute;
    top: -10px; /* Décalage vers le haut */
    right: -10px; /* Décalage vers la droite */
    width: 18px; /* Taille minimale pour les chiffres à deux chiffres */
    height: 18px;
    justify-content: center;
    text-align: center;
    pointer-events: none; /* Pour que le clic passe à travers le badge si tu as besoin */
}

/* ----------------------------------------------------------------- */
/* >>> LOADER (Préchargeur de page) - VERSION LOTTIE */
/* ----------------------------------------------------------------- */

#mwo-preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s, visibility 0.5s;
}

#mwo-preloader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Container de l'animation Lottie */
#lottie-animation {
    width: 600px; /* Ajustez selon vos besoins */
    height: 600px;
    max-width: 80vw;
    max-height: 80vh;
}

/* Responsive */
@media (max-width: 768px) {
	#mwo-preloader {
		overflow: hidden;
	}
	#lottie-animation{
		width: 180vw;
		height: 180vw;
		max-width: none;
		max-height: none;
	}
}

/* press exhibition */
/* 1. Cacher l'élément conteneur de l'image par défaut */
/* On cible le span qui contient la balise <img> */
.image-hover-trigger {
    /* Cache l'élément complètement (important pour qu'il n'occupe pas d'espace) */
    display: none; 
    
    /* Propriétés de positionnement pour qu'il puisse s'afficher 
       à côté ou au-dessus de la liste lors du survol. */
    position: absolute; 
    z-index: 50; /* S'assurer qu'il est au-dessus des autres éléments */
    
    /* Styles visuels optionnels (pour l'aspect de la miniature) */
    max-width: 450px; /* Limite la taille de l'image au survol */
    height: auto;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* 2. Afficher la miniature au survol du lien <a> */
/* Le lien <a> est l'élément parent des deux autres. */
.article-list .list-item a:hover .image-hover-trigger {
    display: block; /* Affiche le conteneur de l'image */
}

/* 3. Ajustement de la position de la miniature affichée */
/* On rend l'élément de liste parent (.list-item) le point d'ancrage. */
.article-list .list-item {
    position: relative; /* Définit le point de référence pour l'élément positionné absolument */
    /* ... Assure-toi que la hauteur de .list-item est suffisante pour ne pas masquer le titre. */
}

/* Positionnement spécifique : décale l'image pour qu'elle ne soit pas DANS le lien */
.article-list .list-item a:hover .image-hover-trigger {
    /* Tu peux ajuster ces valeurs pour placer l'image où tu veux (à droite, à gauche, etc.) */
    top: 50%; /* Commence au milieu du lien */
   /* left: 100%; /* Déplace l'image juste à droite du lien */
    transform: translate(15px, -50%); /* Décalage pour l'espace et centrage vertical */
    right: 10%;
}

/* page about me */

.mwo-about-content-wrapper{
    display: grid;
    grid-template-columns: 53% 1fr;
}

.mwo-about-text-column{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}

.mwo-about-image-column{
    display: flex;
    justify-content: end;
    align-items: flex-start;
    height: 100%;;

    img{
        margin-top: 2em;
        width: 400px;
        height: auto;
        position: sticky;
        top: 40px;
    }
}

@media screen and (min-width: 1300px) and (max-width: 1500px) {
    .mwo-about-image-column{
        padding-right: 4em;
    }
}


.mwo-about-section{
    display: grid;
    grid-template-columns: 300px 1fr;
}

.mwo-about-section h2{
    max-width: 250px;
    line-height: 95%;
}

/* Par défaut, on cache l'image mobile et on montre l'image desktop */

/* .mwo-about-image-column { display: block; } */
.mwo-mobile-only { display: none; }

@media screen and (max-width: 768px) {
    /* Sur mobile, on inverse */
    .mwo-mobile-only { display: block; }
    
    /* On cache la colonne d'image originale qui est tout en bas */
    .mwo-about-content-wrapper > .mwo-about-image-column { 
        display: none; 
    }
}

/* page contact avec panier */

#quote-cart-list{
    margin-left: 0;
    margin-bottom: 10px;
    padding-left: 0;
    display: grid;
    gap: 0;
    /* grid-template-columns: 1fr 1fr 1fr 1fr; */
    grid-template-columns: 1fr;
}

.mwo-quote-cart-item{
    list-style-type: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    display: grid;
    gap: 1em;
    grid-template-columns: 120px 1fr;
}

.mwo-contact-form-area{
    display: flex;
    flex-direction: column;
    gap: 1em;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    max-width: 800px;
    /* display: grid;
    grid-template-columns: 600px 1fr; */
    margin: 0 auto;
}

.quote-cart-summary{
    width: 100%;
    max-width: 800px;
}

.mwo-contact-form-area > p:not(.mwo-contact-form-intro) {
    display: none;
}

/* page catalogue */
.mwo-catalog-filters{
    position: relative;
    display: flex;
    gap: 1em;
    /* justify-content: space-between; */
    align-items: flex-start;
    padding-top: 1em;
    margin-bottom: 2em;
}

.mwo-catalog-filters>.filter-group:first-of-type .filter-group-label{
    display: none;
}

.mwo-catalog-filters>.filter-group:first-of-type .filter-button-wrapper{
    margin-left: -1em;
	margin-top: -23px;
	max-height: inherit;
    opacity: 1;
}

.mwo-catalog-filters .filter-group:first-of-type .filter-button, .mwo-catalog-filters .filter-button-all{
	/* color: #bababa; */
}

.mwo-catalog-filters .filter-group:first-of-type .filter-button.active, .mwo-catalog-filters .filter-button-all.active{
	color: black;
}

.mwo-catalog-filters button{
    background-color: white;
    border: none;
    color: #bababa;
    transition: color 0.3s ease-in-out;
    text-transform: lowercase;
    padding-bottom: 0;
    line-height: 1.1;
	padding-top: 7px;
}

.mwo-catalog-filters button.active{
	color: black;
}

.mwo-catalog-filters button:hover{
    /* cursor: pointer; */
    /* opacity: 0.5; */
	color: black;
}

.filter-group{
    display: flex;
}

.filter-button-wrapper{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.filter-group-label{
    text-transform: lowercase;
    padding-top: 2px;
}

.filter-button-all{
    position: absolute;
    /* top: -1em; */
    top: -2em;
    left: -1em;
}

.filter-button-wrapper-plus{
	display: flex;
    flex-direction: row;
}

.filter-button-wrapper.filter-button-wrapper-plus{
    max-height: inherit;
    opacity: 1;
}

.filter-button-wrapper-plus button{
    padding-left: 0.5em;
    padding-right: 0.5em;
}

@media screen and (max-width: 768px){
	.filter-button-wrapper-plus{
		/* justify-content: flex-end; */
		display: none;
	}
}

/* ============================================
   FILTRES CATALOGUE - SYSTÈME ACCORDÉON
   ============================================ */

/* Label du groupe de filtres - Cliquable */
.filter-group-label {
    user-select: none;
    position: relative;
    /* padding-right: 30px; */
    transition: opacity 0.3s ease;
}

.filter-group-label:hover {
    opacity: 0.7;
}

/* Indicateur d'ouverture/fermeture (flèche) */
/* .filter-group-label::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    font-weight: bold;
    transition: transform 0.3s ease;
}

.filter-group.is-open .filter-group-label::after {
    content: '−';
} */

/* Wrapper des boutons - Caché par défaut */
.filter-button-wrapper {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, opacity 0.3s ease-out, margin-top 0.3s ease-out;
    opacity: 0;
    margin-top: 0;
}

/* Wrapper ouvert */
.filter-group.is-open .filter-button-wrapper {
    max-height: 500px; /* Ajustez selon vos besoins */
    opacity: 1;
    margin-top: -2px; /* Espacement quand ouvert */
}

/* Animation du catalogue qui descend */
#catalog-grid {
    transition: transform 0.4s ease-out, margin-top 0.4s ease-out;
}

/* Optionnel : Animation subtile lors de l'ouverture des filtres */
.filter-group.is-open ~ #catalog-grid {
    /* Le catalogue peut légèrement descendre si besoin */
}

/* ajustmement filtres catalogue mobile */
.collapsible-filters, .filter-scroll-container{
	display: flex;
    justify-content: space-between;
    width: 100%;
}

@media (max-width: 768px){
	.collapsible-filters, .filter-scroll-container{
		flex-direction: column;
	}
	.filter-scroll-container{
		justify-content: flex-start;
	}
}

@media (min-width: 1400px){
    .collapsible-filters{
        padding-left: 7rem;
    }
}

/* --- COMPORTEMENT DESKTOP --- */
.mobile-filter-header, #mobile-filter-toggle, .filter-overlay {
    display: none !important;
}

/* --- COMPORTEMENT MOBILE (Ex: < 768px) --- */
@media (max-width: 768px) {
    #mobile-filter-toggle {
        display: flex !important;
        justify-content: flex-end;
        color: black;
        padding-right: 0;
		margin-top: -27px;
        width: fit-content;
        position: absolute;
        right: 0;
        top: 45px;
    }

    .collapsible-filters {
        position: fixed;
        top: 0;
        right: -100%; /* Totalement caché à droite */
        width: 80%;
        height: 100%;
        background: #fff;
        z-index: 9999;
        box-shadow: -5px 0 15px rgba(0,0,0,0.1);
        transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        padding: 20px;
        display: flex;
        flex-direction: column;
    }

    .collapsible-filters.is-open {
        right: 0; /* Slide vers l'intérieur */
    }

    .mobile-filter-header {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 5em;
        padding-bottom: 10px;		
    }
	
	.mobile-filter-title{
		text-decoration: underline;
    top: 3em;
    position: relative;
		
	}
	
	.mobile-filter-header .close-btn{
		padding: 0;
		color: black;
	}

    .close-btn {
        background: none;
        border: none;
        font-size: 28px;
        cursor: pointer;
        line-height: 1;
    }

    .filter-scroll-container {
        overflow-y: auto;
        flex-grow: 1;
        justify-content: space-between;
    }

    .filter-overlay {
        display: block !important;
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: rgba(0,0,0,0.4);
        z-index: 9998;
        opacity: 0;
        visibility: hidden;
        transition: 0.3s;
    }

    .filter-overlay.is-visible {
        opacity: 1;
        visibility: visible;
		backdrop-filter: blur(10px);
    }

    /* On force les groupes de filtres en colonne dans la sidebar mobile */
    .collapsible-filters .filter-group {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        margin-bottom: 20px;
        position: relative;
        justify-content: space-between;
        padding-top: 2px;
    }

    .filter-group.is-open .filter-button-wrapper {
        justify-content: flex-start;
        align-items: flex-end;
    }

    .collapsible-filters .filter-button-wrapper {
        max-height: none;
        opacity: 1;
        overflow: visible;
    }

    .mwo-catalog-filters .collapsible-filters button {
        padding: 5px 7px;
        color: black;
    }

    .mwo-catalog-filters .collapsible-filters button.active {
        border: 1px solid black;
        border-radius: 20px;
    }
}

/* page press/exhibitions */

.press-exhibitions-archive h2{
    text-transform: uppercase;
    color: #BDBDBD;
    font-size: 1em;
    border-bottom: 1px solid #BDBDBD ;
    border-top: 1px solid #BDBDBD ;
    width: 100%;

}

.press-exhibitions-archive .entry-date{
    text-align: right;
}

.press-exhibitions-archive .article-list .entry-title-wrapper{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.article-list , .exhibition-items{
    margin-left: 0;
    padding-left: 0;
    width: 100%;
}

.article-list .list-item, .exhibition-items .list-item{
    list-style-type: none;
    text-transform: uppercase;
    border-bottom: 1px solid #BDBDBD ;

    a{
        color: #BDBDBD;
    }

    a:hover{
        color: black;
    }
}

/* ================================================================
   CORRECTIONS ET AJOUTS - VERSION 1.0.1
   À ajouter à la fin du fichier style.css existant
   ================================================================ */

/* ----------------------------------------------------------------
   ANIMATIONS DU PANIER DE DEVIS
   ---------------------------------------------------------------- */

@keyframes pulse {
    0% { transform: scale(1); }
    40% { transform: scale(0.97); }
    100% { transform: scale(1); }
}

.add-variation-btn.pulse,
#add-to-quote-button.pulse {
    animation: pulse 0.3s ease-in-out;
}

@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.5); }
    to { opacity: 1; transform: scale(1); }
}

.variation-quantity-badge {
    animation: fadeInScale 0.3s ease-out;
}

#quote-count-badge {
    transition: all 0.3s ease;
}

#quote-count-badge:not([style*="display: none"]) {
    animation: fadeInScale 0.3s ease-out;
}

.variation-item {
    transition: all 0.3s ease-in-out;
}

.variation-item:hover {
    /*transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);*/
}

@keyframes successFeedback {
    0% { background-color: transparent; }
    50% { background-color: rgba(76, 175, 80, 0.2); }
    100% { background-color: transparent; }
}

.catalog-item-card.added-to-cart {
    animation: successFeedback 0.6s ease;
}

/* ----------------------------------------------------------------
   AMÉLIORATIONS PAGE CONTACT (PANIER)
   ---------------------------------------------------------------- */

#clear-quote-cart {
    padding: 10px 20px;
    background-color: white;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: 32px;
    /* cursor: pointer; */
    text-transform: lowercase;
    transition: all 0.3s ease;
    display: inline-block;
    margin-top: 15px;
}

#clear-quote-cart:hover {
    background-color: var(--color-primary);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.mwo-quote-cart-item {
    /* border-bottom: 1px solid var(--color-gray-light); */
    padding-bottom: 1em;
    margin-bottom: 0em;
    transition: background-color 0.3s ease;
}

.mwo-quote-cart-item:hover {
    /* background-color: var(--color-background); */
    /* padding: 0.5em; */
    padding: 0;
    padding-bottom: 1em;
    border-radius: 4px;
}

.mwo-thumbnail-link {
    display: block;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.mwo-thumbnail-link:hover {
    opacity: 0.8;
}

.mwo-product-link {
    font-weight: normal;
	padding-right: 5em;
    /* text-wrap: balance; */
    display: inline-block;
    transition: opacity 0.3s ease;
}

.mwo-product-header{
	position: relative;
	top: 2em;
}

.mwo-quote-cart-item .item-details{
	position: relative;
	height: 100%
}

.mwo-quote-cart-item .item-quantity{
	position: absolute;
	top: 0;
	right: 0;
	border: 1px solid black;
	padding: 0.3em 1em;
}

/* ✅ Styles pour la quantité éditable */
.editable-quantity {
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.editable-quantity:hover {
	background-color: #f5f5f5;
	border-color: #666;
}

.quantity-input-edit {
	font-family: inherit;
	text-align: center;
}

.mwo-quote-cart-item .item-category{
	    padding-bottom: 10px;
    display: inline-block;
}

.mwo-product-link:hover {
    opacity: 0.7;
}

.mwo-cart-status-message {
    color: var(--color-gray-medium);
    padding: 2em;
    text-align: center;
    grid-column: 1 / -1;
	list-style-type: none;
}

.item-thumbnail {
    width: 100%;
    margin-bottom: 0.5em;
    overflow: hidden;
    /* border-radius: 4px; */
}

.item-thumbnail img {
    transition: transform 0.3s ease;
}

.mwo-quote-cart-item:hover .item-thumbnail img {
    /* transform: scale(1.05); */
	transform: scale(1);
}

/* ----------------------------------------------------------------
   RESPONSIVE DESIGN
   ---------------------------------------------------------------- */

@media (max-width: 1500px){
    .mwo-about-content-wrapper{
        grid-template-columns: 70% 30%;
        gap: 4em;
    }
}

@media (max-width: 1300px){
        .mwo-about-content-wrapper {
        grid-template-columns: 1fr;
    }
}   

/* Tablettes */
@media (max-width: 1024px) {
    .mwo-catalog-grid, .lab-list-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    #quote-cart-list {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .mwo-product-gallery {
        display: flex;
        flex-direction: column-reverse;
		max-width: 100%;
		gap: 2em;
    }
	
	.main-image-container .product-main-image, .main-image-container img{
		max-height: 60vh;
		max-width: 100%;
	}
    
    .main-image-container {
        padding-right: 1em;
    }
    
    .mwo-about-image-column {
        /* justify-content: center; */
        margin-top: 2em;
		margin-bottom: 4em;
    }
    
    .mwo-about-image-column img {
        position: static;
        width: 100%;
        max-width: 400px;
    }

        .mwo-contact-form-area {
        flex-direction: column;
    }
}

/* Smartphones */
@media (max-width: 768px) {
	
	.mwo-about-content-wrapper{
		gap: 1em;
	}
	
	.mwo-product-gallery {
		gap: 0;
		margin-top: 1em;
	}
	
	.mwo-product-gallery .product-actions{
		flex-direction: row-reverse;
		font-size: 0.8em;
	}
	
	#add-to-quote-button{
		font-size: 1em;
        padding: 8px 15px;
	}
	
	.gallery-label{
		font-size: 0.9em;
	}
    
    
    .mwo-catalog-grid, .lab-list-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1em;
    }
    
    #quote-cart-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 1em;
    }
    

    
    .footer-container {
        /* flex-direction: column; */
        gap: 3px;
        text-align: center;
		justify-content: flex-end;
		padding-top: 3em;
		padding-right: 1em;
    }
    
    .footer-socials ul {
        justify-content: center;
    }
	
	.footer-container ul li a{
		font-size: 0.8em;
	}
	
	.footer-container ul{
		margin-bottom: 0;
	}
    
    .mwo-catalog-filters {
        flex-direction: column;
        align-items: stretch;
		gap: 0.2em;
		margin-top: 2em;
    }
    
    .filter-group {
        flex-direction: column;
        /* position: relative;
        z-index: 100; */
    }
    
    .filter-button-all {
        /* position: static; */
        margin-bottom: 1em;
    }
    
    .article-list, .exhibition-items {
        width: 100%;
    }
    
    .press-exhibitions-archive h2 {
        width: 100%;
    }
    
    .mwo-about-section {
        grid-template-columns: 1fr;
    }
	.site-branding {
        left: 1em;
        top: 0;
    }
}

/* Petits smartphones */
@media (max-width: 480px) {
    .mwo-catalog-grid, .lab-list-grid {
        grid-template-columns: 1fr;
    }
    
    #quote-cart-list {
        grid-template-columns: 1fr;
    }
    
    .site-header {
        flex-direction: column;
        gap: 1em;
    }
    
    .main-navigation li {
        margin: 0.5em;
    }
    
    .form-row-2-cols {
        flex-direction: column;
    }
    
    .mwo-hero-video-container {
        max-width: 100%;
    }
}

/* ----------------------------------------------------------------
   CORRECTIONS MINEURES
   ---------------------------------------------------------------- */

/* Amélioration de la vidéo hero */
.mwo-hero-video-container {
    /* width: 100%;
    max-width: 850px;
    margin: 0 auto; */
}

/* Amélioration du badge header */
.quote-count-badge {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Amélioration des variations murales */
.variation-thumbnails.wall-variations .variation-item {
    /* cursor: pointer; */
    position: relative;
}

.variation-thumbnails.wall-variations .variation-item.is-active::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 3px solid var(--color-primary);
    pointer-events: none;
    z-index: 1;
}

/* Amélioration du loader */
.mwo-loader-spinner {
    border: 5px solid var(--color-background);
    border-top: 5px solid var(--color-primary);
}

/* Amélioration des thumbnails galerie */

.gallery-thumbs{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.gallery-thumb-item {
	width: 115px;
	aspect-ratio: 1 / 1;
    /* cursor: pointer; */
    transition: all 0.3s ease;
	overflow: hidden;
}

.gallery-thumb-item img{
	width: 100%;
  height: 100%;
  /* Le secret est ici : */
  object-fit: cover;
  
  /* Optionnel : centre l'image si elle est recadrée */
  object-position: center;
  transition: all 0.3s ease-in-out;
}

.gallery-thumb-item:hover img{
    opacity: 1;
    transform: scale(1.1);
	transition: all 0.3s ease-in-out;
}


/* Print styles */
@media print {
    .site-header,
    .site-footer,
    .mwo-catalog-filters,
    #clear-quote-cart,
    .variation-controls-wrapper {
        display: none !important;
    }
}

/* FIN DES AJOUTS VERSION 1.0.1 */

/* ================================================================
   MINIATURES COMBINÉES (BOIS + MUR) - PAGE CONTACT
   ================================================================ */

/* Conteneur pour image simple (produit seul) */
.item-thumbnail {
    width: 100%;
    height: 120px;
    margin-bottom: 0.5em;
    overflow: hidden;
    /* border-radius: 4px; */
    position: relative;
	border: 1px solid black;
}

.item-thumbnail .thumbnail-single {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

/* Conteneur pour images superposées (produit + mur) */
.item-thumbnail-combined {
    width: 100%;
    height: 120px;
    margin-bottom: 0.5em;
    position: relative;
    overflow: hidden;
}

/* Image du mur (arrière-plan) */
.thumbnail-wall-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* Image du produit (devant) */
.thumbnail-product-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 2;
    padding: 10px;
}

/* Effet hover sur les miniatures */
.mwo-quote-cart-item:hover .thumbnail-single,
.mwo-quote-cart-item:hover .thumbnail-product-layer {
    transform: scale(1.05);
}

/* Responsive : Ajustement hauteur sur mobile */
@media (max-width: 768px) {
    .item-thumbnail,
    .item-thumbnail-combined {
        height: 120px;
    }
}

@media (max-width: 480px) {
    .item-thumbnail,
    .item-thumbnail-combined {
        /* height: 100px; */
    }
}

/* ================================================================
   MASQUAGE DES CONTRÔLES +/- POUR CUSTOM WALL (Variations bois)
   ================================================================ */

/* Masquer les boutons +/- sur les variations bois des Custom Wall */
#variation-thumbnails[data-is-custom-wall="true"] .variation-controls-wrapper {
    display: none !important;
}

/* Masquer le badge de quantité sur les variations bois des Custom Wall */
#variation-thumbnails[data-is-custom-wall="true"] .variation-quantity-badge {
    display: none !important;
}

/* Améliorer le feedback visuel : les variations bois Custom Wall sont juste sélectionnables */
#variation-thumbnails[data-is-custom-wall="true"] .variation-item {
    /* cursor: pointer; */
}

#variation-thumbnails[data-is-custom-wall="true"] .variation-item.is-active {
    border: 3px solid var(--color-primary);
}


/* ================================================================
   GRILLE DES VARIATIONS MURALES (4 images)
   ================================================================ */

.main-image-container {
    position: relative;
    width: 100%;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2em;
}

/* Grille 2x2 des variations murales */
.wall-variations-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1em;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

.wall-grid-item {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 8px;
    border: 3px solid transparent;
    transition: all 0.3s ease;
    /* cursor: pointer; */
    position: relative;
}

.wall-grid-item:hover {
    border-color: var(--color-secondary);
    transform: scale(1.05);
}

.wall-grid-item.active {
    border-color: var(--color-primary);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

.wall-grid-item.empty {
    background: var(--color-background);
    border: 2px dashed var(--color-gray-light);
    cursor: default;
}

.wall-grid-item.empty:hover {
    transform: none;
    border-color: var(--color-gray-light);
}

.wall-grid-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.wall-grid-item:hover .wall-grid-image {
    transform: scale(1.1);
}

/* Image du produit (centrée en dessous) */
.product-main-image {
    /* max-width: 60%; */
    height: auto;
    object-fit: contain;
    margin: 0 auto;
}

/* Responsive */
@media (max-width: 1024px) {
    .wall-variations-grid {
        max-width: 500px;
    }
    
    .product-main-image {
        max-width: 70%;
    }
}

@media (max-width: 768px) {
    .wall-variations-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5em;
        max-width: 400px;
    }
    
    .product-main-image {
        max-width: 80%;
    }
}

@media (max-width: 480px) {
    .wall-variations-grid {
        grid-template-columns: 1fr;
        max-width: 300px;
    }
}

/* Badge "Active" optionnel sur la variation active */
.wall-grid-item.active::after {
    content: "Selected";
    position: absolute;
    top: 5px;
    right: 5px;
    background: var(--color-primary);
    color: white;
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 12px;
    font-weight: bold;
    text-transform: uppercase;
}

/* ================================================================
   AFFICHAGE DYNAMIQUE DES VARIATIONS MURALES (1 à 4)
   ================================================================ */

.main-image-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    width: 100%;
}

/* Conteneur des miniatures murales */
.wall-variations-display {
    width: 100%;
    /* max-width: 800px; */
    /* gap: 1em; */
    gap: 0;
    display: none; /* Caché par défaut */
    margin: 0 auto;
	height: 100%;
}

/* Grille 1 miniature (100% width) */
.wall-variations-display.grid-1 {
    display: grid;
    grid-template-columns: 1fr;
    /* max-width: 400px; */
}

/* Grille 2 miniatures (50% 50%) */
.wall-variations-display.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    max-width: 800px;
}

/* Grille 3 miniatures (50% 50% sur ligne 1, 100% sur ligne 2) */
.wall-variations-display.grid-3 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    max-width: 800px;
}

/* Le 3ème item occupe toute la largeur mais garde la même hauteur */
.wall-variations-display.grid-3 .wall-mini-item:nth-child(3) {
    grid-column: 1 / -1;
    max-width: 100%;
    margin: 0;
    height: 250px; /* ✅ Même hauteur que les autres */
}

/* Grille 4 miniatures (2x2 à 50% chacune) */
.wall-variations-display.grid-4 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    max-width: 800px;
}

/* Item individuel */
/* Item individuel - SANS bordure */
.c{
    height: 250px;
    overflow: hidden;
    border-radius: 0;
    border: none; /* ✅ SUPPRESSION de la bordure */
    position: relative;
    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
    animation: slideIn 0.3s ease-out;
    background: #000; /* Fond noir si image ne charge pas */
}
@keyframes slideIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Image plein cadre - SANS marges */
.wall-mini-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Remplit tout l'espace */
    object-position: center;
    display: block; /* Supprime l'espace inline par défaut */
}

/* Label - MASQUÉ */
.wall-mini-label {
    display: none; /* ✅ SUPPRESSION du label */
}

/* Effet hover subtil (optionnel) */
.wall-mini-item:hover {
    /* box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px); */
    transition: all 0.3s ease;
}

/* Image produit (en dessous) */
.product-main-image {
    /* max-width: 60%; */
    height: auto;
    object-fit: contain;
    margin: 0 auto;
}

/* Responsive */
@media (max-width: 1024px) {
    .wall-variations-display {
        /* max-width: 600px; */
    }
    
    .wall-variations-display.grid-1 {
        /* max-width: 300px; */
    }
}

@media (max-width: 768px) {
    .wall-variations-display {
        max-width: 500px;
        /* gap: 0.5em; */
    }
    
    .wall-variations-display.grid-1 {
        /* max-width: 250px; */
    }
    
    .product-main-image {
        max-width: 80%;
    }
    .wall-mini-item {
        height: 180px;
    }
    
    .wall-variations-display.grid-3 .wall-mini-item:nth-child(3) {
        height: 180px;
    }
}

@media (max-width: 480px) {
    /* Sur mobile, toutes les miniatures en colonne unique */
    .wall-variations-display.grid-2,
    .wall-variations-display.grid-3,
    .wall-variations-display.grid-4 {
        /* grid-template-columns: 1fr; */
        /* max-width: 300px; */
    }
    
    .wall-variations-display.grid-3 .wall-mini-item:nth-child(3) {
        max-width: 100%;
    }
    .wall-mini-item {
        height: 150px;
    }
    
    .wall-variations-display.grid-3 .wall-mini-item:nth-child(3) {
        height: 150px;
    }
}

/* ================================================================
   EXCEPTION : Boutons +/- des variations murales TOUJOURS visibles
   ================================================================ */

/* Les variations murales doivent avoir leurs contrôles visibles */
#variation-thumbnails-wall .variation-controls-wrapper {
    /* opacity: 1 !important; */
    /* transform: scale(1) !important; */
}

/* Amélioration visuelle : Positionner les contrôles différemment */
#variation-thumbnails-wall .variation-item {
    position: relative;
}

#variation-thumbnails-wall .variation-controls-wrapper {
    position: absolute;
    bottom: 5px;
    right: 5px;
    display: flex;
    gap: 4px;
    z-index: 10;
    background: rgba(255, 255, 255, 0.9);
    padding: 4px;
    border-radius: 0;
	border: 1px solid black;
    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); */
}

/* Garder l'effet hover pour un feedback visuel */
#variation-thumbnails-wall .variation-item:hover .variation-controls-wrapper {
    background: rgba(255, 255, 255, 1);
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); */
}

/* ... Tes styles existants ... */

/* -------------------------------------------------------------------- */
/* --- Menu Hamburger Responsif --- */
/* -------------------------------------------------------------------- */

.menu-toggle {
    display: none; 
    border: none;
    background: transparent;
    /* cursor: pointer; */
    padding: 10px;
    z-index: 1000;
                position: absolute;
    top: -6px;
    right: 0;
}

/* ... (Le reste du code CSS, y compris les styles .line et la media query) ... */
/*
.line { ... }
@media (max-width: 768px) { ... }
*/

/* Styles appliqués UNIQUEMENT sur mobile (écrans <= 768px) */
@media (max-width: 768px) {
    
    .menu-toggle {
        display: flex; /* 💡 CORRECTION : Remplacer 'none' par 'flex' (ou 'block') */
        flex-direction: column;
		right: 20px;
        top: 5px;
    }

    /* Optionnel : Rendre la navigation non responsive visible seulement sur clic */
    .main-navigation {
        /* Par exemple: Transform: translateX(-100%); */
            display: flex;
    width: 100%;
    justify-content: flex-end;
    }

    .main-navigation li{
        text-align: right;
    }
	
	.main-navigation li a{
        color: black;
    }

    .form-actions>p{
        flex-direction: column;
    }

    .main-navigation.is-open ul{
        display: flex;
        flex-direction: column;
		position: relative;
		        top: 6em;
        right: 20px;
    }

    .header-cart-wrapper{
        position: absolute;
    left: 0;
    top: 4px;
    }
}

.line {
    position: absolute;
    width: 100%;
    height: 3px;
    background-color: black; /* Ta couleur */
    transition: transform 0.3s ease;
}

/* La barre verticale (formée en pivotant la ligne 2) */
.line-2 {
    transform: rotate(90deg);
}

/* --- État Actif (Transformation en X) --- */

/* Le "+" a déjà une barre à 0° et une à 90°.
   On tourne le tout de 45° vers la gauche (-45°).
   0° -> -45°
   90° -> 45° 
*/
.menu-toggle.is-active .line-1 {
    transform: rotate(-45deg);
}

.menu-toggle.is-active .line-2 {
    transform: rotate(45deg);
}

/* ================================================================
   AFFICHAGE MULTI-MURS (4 variations) - PAGE CONTACT
   ================================================================ */

/* Conteneur pour les 4 murs + produit */
.item-thumbnail-multi-walls {
    width: 100%;
    height: 200px;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.5em;
}

/* Grille 2x2 des murs en arrière-plan */
.item-thumbnail-multi-walls {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 2px;
    background: #c5c5c5;
}

.mini-wall-thumb {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.mini-wall-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Produit par-dessus (centré) */
.product-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 60%;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(2px);
    border-radius: 8px;
}

.product-overlay-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

/* Responsive */
@media (max-width: 768px) {
    .item-thumbnail-multi-walls {
        height: 150px;
    }
}

/* ================================================================
   BOUTON DE SUPPRESSION DES MINIATURES MURALES
   ================================================================ */

/* Bouton × en haut à droite */
.wall-mini-remove-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 24px;
    height: 24px;
    /* background: rgba(255, 0, 0, 0.8); */
    background: transparent;
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 18px;
    font-weight: bold;
    line-height: 1;
    /* cursor: pointer; */
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    /* opacity: 0; */
    transition: all 0.3s ease;
    /* box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); */
}

/* Afficher le bouton au hover de la miniature */
.wall-mini-item:hover .wall-mini-remove-btn {
    opacity: 1;
    transform: scale(1.1);
}

/* Effet hover sur le bouton lui-même */
.wall-mini-remove-btn:hover {
    /* background: rgba(255, 0, 0, 1) */
    background: transparent;
    transform: scale(1.2) !important;
}

/* Effet actif (clic) */
.wall-mini-remove-btn:active {
    transform: scale(0.9) !important;
}

/* Animation de disparition de la miniature */
@keyframes fadeOut {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.5);
    }
}

.wall-mini-item.removing {
    animation: fadeOut 0.3s ease-out forwards;
}

/* Responsive : Bouton plus visible sur mobile */
@media (max-width: 768px) {
    .wall-mini-remove-btn {
        opacity: 0.7; /* Toujours visible sur mobile */
        width: 28px;
        height: 28px;
        font-size: 20px;
    }
    
    .wall-mini-item:hover .wall-mini-remove-btn {
        opacity: 1;
    }
}

/* ================================================================
   IMAGE PRODUIT - LARGEUR SELON TYPE
   ================================================================ */

/* Par défaut : 60% pour produits standard */
.product-main-image {
    /*max-width: 60%;*/
    height: auto;
    object-fit: contain;
    margin: 0 auto;
	margin: inherit;
    display: block;
    transition: opacity 0.18s ease;
}

/* Custom Wall : 100% de largeur */
.product-main-image.custom-wall-image {
    max-width: 100%;
}

/* Responsive */
@media (max-width: 1024px) {
    .product-main-image {
        max-width: 70%;
    }
    
    .product-main-image.custom-wall-image {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .product-main-image {
        max-width: 80%;
    }
    
    .product-main-image.custom-wall-image {
        max-width: 100%;
    }
}

/* ================================================================
   HAUTEUR ADAPTATIVE DES MINIATURES MURALES
   ================================================================ */

/* Hauteur par défaut : 250px (pour grid-3 et grid-4) */
.wall-mini-item {
    /* height: 250px; */
    overflow: hidden;
    /* border-radius: 8px; */
    border: none;
    position: relative;
    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
    animation: slideIn 0.3s ease-out;
    background: white;
}

/* ✅ NOUVEAU : Hauteur 400px pour grid-1 et grid-2 */
.wall-variations-display.grid-1 .wall-mini-item,
.wall-variations-display.grid-2 .wall-mini-item {
    /* height: 200px; */
}

/* Grille 3 et 4 : Conserver 250px (règle par défaut) */
.wall-variations-display.grid-3 .wall-mini-item,
.wall-variations-display.grid-4 .wall-mini-item {
    /* height: 125px; */
}

/* Exception : Le 3ème item de grid-3 garde aussi 250px */
.wall-variations-display.grid-3 .wall-mini-item:nth-child(3) {
    grid-column: 1 / -1;
    max-width: 100%;
    margin: 0;
    /* height: 125px; /* Confirmé */
}

/* Responsive : Adapter les hauteurs */
@media (max-width: 1024px) {
    .wall-variations-display.grid-1 .wall-mini-item,
    .wall-variations-display.grid-2 .wall-mini-item {
        height: 350px; /* Un peu plus petit sur tablette */
    }
    
    .wall-variations-display.grid-3 .wall-mini-item,
    .wall-variations-display.grid-4 .wall-mini-item {
        height: 220px;
    }
}

@media (max-width: 768px) {
    .wall-variations-display.grid-1 .wall-mini-item,
    .wall-variations-display.grid-2 .wall-mini-item {
        height: 300px;
    }
    
    .wall-mini-item {
        height: 180px;
    }
    
    .wall-variations-display.grid-3 .wall-mini-item:nth-child(3) {
        height: 180px;
    }
}

@media (max-width: 480px) {
    .wall-mini-item {
        height: 150px;
    }
    
    .wall-variations-display.grid-1 .wall-mini-item {
        height: 250px; /* Plus petit sur mobile */
    }
}

/* ================================================================
   WRAPPER STICKY POUR MINIATURES + IMAGE PRODUIT
   ================================================================ */

.main-image-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0em;
    width: 100%;
}

.main-image-container.is-tiles-layout{
	max-height: inherit;
}

/* Wrapper interne avec sticky */
.sticky-product-wrapper {
    /* position: sticky; */
    /* top: 20px; */
	flex: 1;
    z-index: 10;
    width: 100%;
    /* max-width: 1200px; */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
	justify-content: flex-end;
    gap: 0em;
    background: white;
    /* padding: 1em 0; */
    /* border-radius: 8px; */
}

/* Alternative : Sticky sans fond (transparent) */
.sticky-product-wrapper.transparent {
    background: transparent;
    padding: 0;
}

/* Responsive : Désactiver sticky sur mobile */
@media (max-width: 768px) {
    .sticky-product-wrapper {
        position: static; /* Pas de sticky sur mobile */
        top: auto;
    }
}

/* Responsive : Ajuster top sur tablette */
@media (max-width: 1024px) {
    .main-image-container {
        align-items: center;
    }
    .sticky-product-wrapper {
        top: 10px;
    }
}

/* ================================================================
   AFFICHAGE CUSTOM WALL - PAGE CONTACT (identique page produit)
   ================================================================ */

/* Conteneur principal Custom Wall dans le panier */
.cart-custom-wall-display {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 1em;
    height: 120px;
	border: 1px solid black;
	overflow: hidden;
}

/* Conteneur des variations murales */
.cart-wall-variations {
    width: 100%;
    display: grid;
    gap: 0;
}

/* Item individuel mural */
.cart-wall-item {
    width: 100%;
    overflow: hidden;
    position: relative;
    background: white;
}

.cart-wall-item img, .cart-product-image-wrapper img{
	transform: scale(2);
}

.cart-wall-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Grille 1 mur (100%) */
.cart-custom-wall-display.grid-1 .cart-wall-variations {
    grid-template-columns: 1fr;
}

.cart-custom-wall-display.grid-1 .cart-wall-item {
    height: 60px;
}

/* Grille 2 murs (50% + 50%) */
.cart-custom-wall-display.grid-2 .cart-wall-variations {
    grid-template-columns: repeat(2, 1fr);
}

.cart-custom-wall-display.grid-2 .cart-wall-item {
    height: 60px;
}

/* Grille 3 murs (50% + 50% | 100%) */
.cart-custom-wall-display.grid-3 .cart-wall-variations {
    grid-template-columns: repeat(2, 1fr);
}

.cart-custom-wall-display.grid-3 .cart-wall-item {
    height: 30px;
}

.cart-custom-wall-display.grid-3 .cart-wall-item:nth-child(3) {
    grid-column: 1 / -1;
    height: 30px;
}

/* Grille 4 murs (2x2) */
.cart-custom-wall-display.grid-4 .cart-wall-variations {
    grid-template-columns: repeat(2, 1fr);
}

.cart-custom-wall-display.grid-4 .cart-wall-item {
    height: 30px;
}

/* Image produit (bois) en dessous des murs */
.cart-product-image-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1em 0;
    background: var(--color-secondary);
    height: 60px;
	overflow: hidden;
}

.cart-product-image {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* Responsive */
@media (max-width: 1024px) {
    .cart-custom-wall-display.grid-1 .cart-wall-item,
    .cart-custom-wall-display.grid-2 .cart-wall-item {
        height: 350px;
    }
    
    .cart-custom-wall-display.grid-3 .cart-wall-item,
    .cart-custom-wall-display.grid-4 .cart-wall-item {
        height: 220px;
    }
}

@media (max-width: 768px) {
    .cart-custom-wall-display.grid-1 .cart-wall-item {
        height: 300px;
    }
    
    .cart-custom-wall-display.grid-2 .cart-wall-item {
        height: 300px;
    }
    
    .cart-custom-wall-display.grid-3 .cart-wall-item,
    .cart-custom-wall-display.grid-4 .cart-wall-item {
        height: 180px;
    }
}

@media (max-width: 480px) {
    /* Sur mobile : toutes en colonne */
    .cart-custom-wall-display.grid-2 .cart-wall-variations,
    .cart-custom-wall-display.grid-3 .cart-wall-variations,
    .cart-custom-wall-display.grid-4 .cart-wall-variations {
        grid-template-columns: 1fr;
    }
    
    .cart-custom-wall-display.grid-3 .cart-wall-item:nth-child(3) {
        grid-column: auto;
    }
    
    .cart-wall-item {
        height: 200px !important;
    }
}

/* Rétrocompatibilité : Ancien système (single wall + product overlay) */
.item-thumbnail-combined {
    /* Conserver le code existant */
}

/* Produit standard (sans mur) */
.item-thumbnail {
    /* Conserver le code existant */
}

/* ================================================================
   PRODUITS TILES - MULTI-SÉLECTION
   ================================================================ */

/* Conteneur des tiles sélectionnées */
.tiles-variations-display {
    width: 100%;
    max-width: 800px;
    gap: 0;
    display: none;
    margin: 0 auto;
}

/* Base commune pour toutes les grilles Flex */
.tiles-variations-display {
    /* display: flex !important; */
    flex-wrap: wrap;
    gap: 1em;
}


/* Item individuel tile */
.tiles-variations-display .tile-mini-item {
    /* max-height: 100px; */
    /* max-width: 100px; */
    overflow: hidden;
    position: relative;
    background: white;
	aspect-ratio: 1 / 1;
  object-fit: cover; /* Coupe les bords pour remplir le carré sans déformer */
}

.tile-mini-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Bouton de suppression */
.tile-mini-remove-btn {
    position: absolute;
    top: 0px;
    right: -5px;
    width: 28px;
    height: 28px;
    /* background: rgba(255, 255, 255, 0.9); */
    background: transparent;
    color: white;
    border: none;
    font-size: 20px;
    font-weight: bold;
    line-height: 1;
    /* cursor: pointer; */
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.tile-mini-item:hover .tile-mini-remove-btn {
    opacity: 1;
}

.tile-mini-remove-btn:hover {
    /* background: rgba(255, 0, 0, 0.9); */
    background: transparent;
    color: white;
    opacity: 0.5;
    transform: scale(1.1);
}

/* Responsive */
@media (max-width: 1024px) {
    .tiles-variations-display.tiles-grid-3,
    .tiles-variations-display.tiles-grid-4,
    .tiles-variations-display.tiles-grid-5 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .tile-mini-item {
        height: 300px;
    }
}

@media (max-width: 768px) {
    .tiles-variations-display.tiles-grid-2,
    .tiles-variations-display.tiles-grid-3,
    .tiles-variations-display.tiles-grid-4,
    .tiles-variations-display.tiles-grid-5 {
        grid-template-columns: repeat(2, 1fr);
    }

    .tile-mini-item {
        height: 250px;
    }

    .tile-mini-remove-btn {
        opacity: 0.8;
    }
}

@media (max-width: 480px) {
    /* grid-template-columns: 1fr !important; */
    .tile-mini-item {
        height: 200px;
    }
}

/* Indicateur visuel : Tile déjà sélectionnée (vignette) */
#variation-thumbnails[data-is-tiles="true"] .variation-item.is-active {
    /* border: 3px solid var(--color-primary);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); */
}

/* Badge "Selected" sur vignette active */
#variation-thumbnails[data-is-tiles="true"] .variation-item.is-active::after {
    /* content: "✓";
    position: absolute;
    top: 5px;
    left: 5px;
    background: var(--color-primary);
    color: white;
    font-size: 16px;
    padding: 4px 8px;
    font-weight: bold; */
}

/* ================================================================
   GALERIE CUSTOM - FORMAT IDENTIQUE AU CATALOGUE
   ================================================================ */

/* Grille des images custom (même style que .mwo-catalog-grid) */
.custom-images-catalog-grid {
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: 1em;
    width: 100%;
    /*max-width: 1200px;*/
    /*margin: 2em auto;*/
    padding: 0;
}

/* Item image custom (hérite des styles de .catalog-product-item) */
.custom-gallery-product {
    position: relative;
    background: var(--color-background);
    transition: transform 0.3s ease;
}

.custom-gallery-product:hover {
    /*transform: translateY(-5px);*/
}

/* Lien cliquable */
.custom-gallery-product .catalog-product-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* Wrapper image */
.custom-gallery-product .catalog-product-image-wrapper {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f5f5f5;
}

/* Image elle-même */
.custom-gallery-product .catalog-product-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.custom-gallery-product:hover .catalog-product-image {
    transform: scale(1.05);
}

/* Responsive (identique au catalogue) */
@media (max-width: 1024px) {
    .custom-images-catalog-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 1.5em;
    }
}

@media (max-width: 768px) {
    .custom-images-catalog-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1em;
        padding: 0 0.5em;
    }
}

@media (max-width: 480px) {
    .custom-images-catalog-grid {
        grid-template-columns: 1fr;
        gap: 1em;
    }
}

/* ================================================================
   CONTRÔLE DE LA GRILLE - BOUTONS +/-
   ================================================================ */

/* Classes de grille dynamiques */
.mwo-catalog-grid.grid-cols-2 {
    grid-template-columns: repeat(2, 1fr) !important;
}

.mwo-catalog-grid.grid-cols-3 {
    grid-template-columns: repeat(3, 1fr) !important;
}

.mwo-catalog-grid.grid-cols-4 {
    grid-template-columns: repeat(4, 1fr) !important;
}

.mwo-catalog-grid.grid-cols-6 {
    grid-template-columns: repeat(6, 1fr) !important;
}

.mwo-catalog-grid.grid-cols-8 {
    grid-template-columns: repeat(8, 1fr) !important;
}

/* Animation des boutons +/- */
.filter-grid-control {
    transition: all 0.3s ease;
}

.filter-grid-control:hover {
    transform: scale(1.1);
    /* background: var(--color-primary);
    color: var(--color-secondary); */
    opacity: 0.5;
}

.filter-grid-control.active-pulse {
    animation: pulseBounce 0.3s ease;
}

@keyframes pulseBounce {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Responsive : Adapter les colonnes sur mobile */
@media (max-width: 1200px) {
    .mwo-catalog-grid.grid-cols-8 {
        grid-template-columns: repeat(6, 1fr) !important;
    }
}

@media (max-width: 1024px) {
    .mwo-catalog-grid.grid-cols-6,
    .mwo-catalog-grid.grid-cols-8 {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .mwo-catalog-grid.grid-cols-4,
    .mwo-catalog-grid.grid-cols-6,
    .mwo-catalog-grid.grid-cols-8 {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    .mwo-catalog-grid.grid-cols-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {
    .mwo-catalog-grid.grid-cols-2,
    .mwo-catalog-grid.grid-cols-3,
    .mwo-catalog-grid.grid-cols-4,
    .mwo-catalog-grid.grid-cols-6,
    .mwo-catalog-grid.grid-cols-8 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Transition fluide pour les grilles */
.mwo-catalog-grid,
.custom-images-catalog-grid {
    transition: grid-template-columns 0.3s ease;
}

/* ================================================================
   CAROUSEL LAB - ARCHIVE
   ================================================================ */

.lab-archive-page {
    overflow: hidden; /* Empêche débordement */
    max-width: 100vw; /* Limite à viewport */
    box-sizing: border-box;
	display: flex;
	align-items: center;
}

.lab-carousel-wrapper,
.lab-carousel-container,
.lab-carousel-track,
.lab-carousel-item {
    box-sizing: border-box; /* Inclut padding dans largeur */
}

/* Wrapper principal */
.lab-carousel-wrapper {
    position: relative;
    max-width: 100svw;
    margin: 0 auto;
    margin-left: -2rem;
}

/* Container avec overflow */
.lab-carousel-container {
    overflow: hidden;
    width: 100%;
}

/* Track (contient tous les articles) */
.lab-carousel-track {
    display: flex;
    gap: 2em;
    padding-left: 1em;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

/* Article individuel */
.lab-carousel-item {
    flex: 0 0 calc(40% - 1.33em); /* 2.5 items : 40% chacun */
    min-width: 350px;
}

.lab-article-link {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
    transition: all 0.3s ease;
}
.lab-article-link:hover {
    /*transform: translateY(-5px);*/
}

/* Image de l'article */
.lab-article-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--color-background);
    margin-bottom: 1em;
}

.lab-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.lab-article-link:hover .lab-thumbnail {
    /*transform: scale(1.05);*/
}

.lab-no-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-gray-light);
    color: var(--color-gray-medium);
}

/* Contenu de l'article */
.lab-article-content {
    padding: 0;
}

.lab-article-title {
    font-size: 16px;
    margin-bottom: 0;
    font-weight: normal;
    line-height: 1.2;
	font-weight: bold;
}

.lab-article-subtitle {
    font-size: 1em;
    color: var(--color-gray-dark);
    margin-bottom: 0.5em;
}

.lab-article-meta {
    font-size: 0.9em;
    color: var(--color-gray-medium);
}

.lab-content-grid{
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 3em;
    align-items: start;
    padding-top: 3rem;
}

.lab-content-grid.has-multiple-images{
    grid-template-columns: minmax(0, 60%) 1fr;
}

.lab-col-all-images{
    display: flex;
    flex-direction: column;
    gap: 2em;
}

.lab-images-row{
    display: grid;
    grid-template-columns: 1fr;
    gap: 2em;
}

.has-multiple-images .lab-images-row{
    grid-template-columns: 1fr 1fr;
}

.lab-col-image{
    margin: 0;
    position: relative;
}

.lab-col-image img{
    width: 100%;
    max-height: 70vh;
    object-fit: contain;
}

.lab-extra-image-wrapper{
    margin: 0;
    position: relative;
}

.lab-extra-image-wrapper img{
    width: 100%;
    object-fit: contain;
}

figure.lab-col-image:hover img,
.lab-extra-image-wrapper:hover img{
    cursor: none;
}

.custom-cursor.is-hidden{
    opacity: 0 !important;
    transition: none !important;
}

.lab-magnifier{
    display: none;
    position: absolute;
    width: 150px;
    height: 150px;
    border: 2px solid #000;
    border-radius: 50%;
    pointer-events: none;
    background-repeat: no-repeat;
    z-index: 10;
}

/* ================================================================
   LAB SINGLE CAROUSEL (> 2 images)
   ================================================================ */

.lab-single-carousel{
    position: relative;
    overflow: hidden;
}

.lab-single-carousel-track{
    display: flex;
    transition: transform 0.45s cubic-bezier(0.25, 0.1, 0.25, 1);
    will-change: transform;
}

.lab-single-carousel-slide{
    flex: 0 0 100%;
    margin: 0;
    position: relative;
}

.lab-single-carousel-slide img{
    width: 100%;
    max-height: 70vh;
    object-fit: contain;
    display: block;
}

.lab-single-carousel-controls{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5em;
    margin-top: 1em;
}

.lab-single-carousel-arrow{
    background: none;
    border: none;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.3s ease;
    position: relative;
}

.lab-single-carousel-arrow:hover{
    opacity: 0.5;
}

.lab-single-carousel-arrow::before{
    content: '';
    display: block;
    width: 15px;
    height: 15px;
    background-image: url('assets/images/arrow.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.lab-single-carousel-next::before{
    transform: rotate(180deg);
}

.lab-single-carousel-counter{
    font-size: 0.9em;
    letter-spacing: 0.1em;
    min-width: 3em;
    text-align: center;
}

/* ================================================================
   LAB CAROUSEL — SLIDES VIDÉO
   ================================================================ */

.lab-slide-video{
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
}

.lab-video-embed{
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: #fff;
}

@supports not (aspect-ratio: 16 / 9){
    .lab-video-embed{
        padding-bottom: 56.25%;
        height: 0;
        overflow: hidden;
    }
    .lab-video-embed iframe,
    .lab-video-embed video{
        position: absolute;
        top: 0;
        left: 0;
    }
}

.lab-video-embed iframe{
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.lab-video-embed video{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    max-height: 70vh;
    background-color: #fff;
}

.lab-slide-video .lab-magnifier{
    display: none !important;
}

/* Catalog Zoom Lightbox */
.catalog-zoom-lightbox{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.92);
    background-repeat: no-repeat;
    background-size: 150%;
    background-position: 50% 50%;
    z-index: 99999;
    cursor: crosshair;
    overflow: hidden;
}

.catalog-zoom-lightbox.is-open{
    display: block;
}

.catalog-zoom-close{
    position: fixed;
    top: 20px;
    right: 25px;
    background: none;
    border: none;
    color: #fff;
    font-size: 2.5rem;
    cursor: pointer;
    z-index: 100000;
    line-height: 1;
    padding: 5px 10px;
}

.catalog-zoom-close:hover{
    opacity: 0.7;
}

/* Lightbox */
.lab-lightbox{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    cursor: zoom-out;
}

.lab-lightbox.is-open{
    display: flex;
}

.lab-lightbox img{
    max-width: 90%;
    max-height: 90vh;
    object-fit: contain;
}

.lab-lightbox-close{
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: none;
    border: none;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
}

.image-caption{
    font-size: 0.7em;
    margin-top: 1em;
    width: 70%;
}

.image-caption h1,
.image-caption h2,
.image-caption h3{
    font-size: 1em;
    margin-bottom: 0em;
}

.image-caption p{
    margin-bottom: 1.5em;
    margin-top: 0.5em;
}

.lab-col-text{
    display: flex;
    flex-direction: column;
    /* gap: 1.5em; */
    gap: 0;
    overflow-y: auto;
    /* max-height: 70vh; */
    padding-right: 1em;
    width: 30svw;
}

.lab-header {
    margin-bottom: 1em;
}

.lab-date {
    font-size: 14px;
    margin-bottom: 0.5em;
}

h1.lab-title {
    font-size: 16px;
    /* font-weight: normal; */
    margin: 0;
    text-transform: uppercase;
    padding-top: 0;
}

.lab-subtitle {
    font-size: 16px;
    font-weight: normal;
    text-transform: uppercase;
}

/* ============================================
   BOUTON RETOUR - PAGE SINGLE LAB
   ============================================ */

.lab-back-link {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 100;
    
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    width: 15px;
    height: 15px;
    
    text-decoration: none;
    transition: opacity 0.3s ease;
    opacity: 1;
}

.lab-back-link:hover {
    opacity: 0.5;
}

.lab-back-arrow {
    width: 15px;
    height: 15px;
}

/* Responsive mobile */
@media (max-width: 768px) {
    .lab-back-link {
        top: 15px;
        left: 15px;
        width: 15px;
        height: 15px;
    }
    
    .lab-back-arrow {
        width: 15px;
        height: 15px;
    }
}

/* S'assurer que le contenu principal ne chevauche pas la flèche */
.single-lab-page {
    position: relative;
    height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2em;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .single-lab-page {
        height: auto;
        min-height: 100svh;
        padding: 1em;
    }
}

/* Flèches de navigation */
.lab-carousel-arrow {
    position: absolute;
    top: -40px; /* Au-dessus du carousel */
    z-index: 10;
    
    background: none;
    border: none;
    width: 15px;
    height: 15px;
    
    display: flex;
    align-items: center;
    justify-content: center;
    /* cursor: pointer; */
    transition: opacity 0.3s ease;
    opacity: 1;
    padding: 0;
}

.lab-carousel-arrow:hover {
    opacity: 0.5;
}

.lab-carousel-arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.lab-carousel-arrow-prev {
    left: 1em; /* Aligné à gauche */
}

.lab-carousel-arrow-next {
    right: 2em; /* Aligné à droite */
}

/* Masquer les SVG par défaut */
.lab-carousel-arrow svg {
    display: none;
}

.back-arrow-button{
	background: none;
	border: 0;
	padding: 0;
    position: absolute;
    top: 2em;
    left: 2em;
    cursor: pointer;
    z-index: 100;
    transition: opacity 0.3s ease;
}

.mwo-product-header .back-arrow-button {
    left: 0;
    position: relative;
    padding-bottom: 2rem;
}

.back-arrow-button:hover {
    opacity: 0.5;
}

.back-arrow-button:active {
    transform: scale(0.98);
    transition: transform 0.08s ease;
}

/* Flèche gauche : SVG inversé */
.lab-carousel-arrow-prev::before, .back-arrow-button:before {
    content: '';
    display: block;
    width: 15px;
    height: 15px;
    background-image: url('assets/images/arrow.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

@media screen and (max-width:768px){
	.back-arrow-button {
        top: 1em;
        left: 1em;
    }
    .single-lab .back-arrow-button {
        display: none;
    }
}


/* Flèche droite : SVG normal */
.lab-carousel-arrow-next::before {
    content: '';
    display: block;
    width: 15px;
    height: 15px;
    background-image: url('assets/images/arrow.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: rotate(180deg); /* Retourne la flèche pour pointer à gauche */

}

/* Indicateurs de pagination */
.lab-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 2em;
}

.lab-carousel-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-gray-light);
    border: none;
    /* cursor: pointer; */
    transition: all 0.3s ease;
}

.lab-carousel-dot:hover {
    background: var(--color-gray-medium);
}

.lab-carousel-dot.active {
    background: var(--color-primary);
    transform: scale(1.3);
}

/* Message si pas d'articles */
.no-articles {
    text-align: center;
    padding: 4em;
    color: var(--color-gray-medium);
}

.lab-read-more{
	font-size: 16px;
	text-decoration: underline;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */

@media (max-width: 1200px) {
    .lab-carousel-item {
        flex: 0 0 calc(45% - 1em);
        min-width: 300px;
    }
}

@media (max-width: 1024px) {
    .lab-carousel-item {
        flex: 0 0 calc(50% - 1em);
        min-width: 280px;
    }
    
    .lab-carousel-wrapper {
        padding: 0 50px;
    }
    
    .lab-carousel-arrow {
        width: 40px;
        height: 40px;
    }
}

/* ================================================================
   MOBILE - LISTE VERTICALE (pas de carousel)
   ================================================================ */

@media (max-width: 768px) {
    .lab-archive-page {
        padding: 2em 1em;
        align-items: flex-start;
    }
    
    .lab-carousel-wrapper {
        padding: 0;
        width: 100%;
        margin-left: 0;
    }
    
    /* Masquer les flèches sur mobile */
    .lab-carousel-arrow {
        display: none;
    }
    
    /* Container sans overflow */
    .lab-carousel-container {
        overflow: visible;
		margin-top: 2em;
    }
    
    /* Track devient une colonne verticale */
    .lab-carousel-track {
        display: flex;
        flex-direction: column; /* VERTICAL */
        gap: 3em; /* Espace entre articles */
        padding-left: 0; /* Supprime le padding desktop */
        transform: none !important; /* Désactive le transform du carousel */
        transition: none !important;
    }
    
    /* Items en pleine largeur */
    .lab-carousel-item {
        flex: 0 0 auto;
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }
    
    .lab-article-image {
        margin-bottom: 1em;
    }
    
    .lab-article-title {
        font-size: 1.3em;
    }
	
	.lab-content-grid{
		display: flex;
		flex-direction: column;
        max-height: none;
        gap: 2em;
	}

    .lab-col-image {
        max-height: none;
    }

    .lab-col-image img {
        max-height: 50vh;
    }

	.lab-col-text{
		display: flex;
		flex-direction: column;
        max-height: none;
        overflow-y: visible;
        padding-right: 0;
        width: 100%;
	}
	.image-caption{
		width: 100%;
		margin-top: 1em;
	}

    .lab-single-carousel-slide img{
        max-height: 50vh;
    }
}

@media (max-width: 480px) {
    .lab-archive-page {
        padding: 2.5em 0.75em;
    }
    
    .lab-carousel-track {
        gap: 2.5em;
    }
    
    .lab-article-title, .lab-read-more{
        font-size: 0.8em;
    }
}


/* ================================================================
   PAGE PRESS & EXHIBITIONS - LAYOUT 2 COLONNES
   ================================================================ */

.press-exhibitions-archive{
    padding: 0;
}

/* Container principal 2 colonnes */
.press-exhibitions-layout {
    display: grid;
    grid-template-columns: 50% 50%;
    gap: 0;
    min-height: 80vh;
    position: relative;
}

/* COLONNE GAUCHE : Listes */
.press-exhibitions-lists {
    padding: 2em;
    padding-top: 5em;
    overflow-y: auto;
    /* max-height: 100vh; */
    font-size: 0.8em;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* COLONNE DROITE : Zone d'affichage des images */
.press-exhibitions-images {
    position: sticky;
    top: 0;
    height: 100%;
    overflow: hidden;
    /* background: var(--color-background); */
}

.image-display-area {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Images au hover */
.hover-image {
    /*box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    border-radius: 4px;*/
}

/* Sections Exhibitions et Press */
.content-section {
    margin-bottom: 4em;
}

.content-section h2 {
    text-transform: uppercase;
    color: #9b9b9b;
    font-size: 1em;
    border-bottom: 1px solid #BDBDBD;
    border-top: 1px solid #BDBDBD;
    padding: 0.5em 0;
    margin-bottom: 0;
    font-weight: bold;
}

/* Listes */
.article-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.list-item {
    border-bottom: 1px solid #BDBDBD;
    transition: background-color 0.3s ease;
}

.list-item:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

.list-item a {
    display: block;
    padding: 0.2em 0;
    text-decoration: none;
    color: #BDBDBD;
    transition: color 0.3s ease;
}

.list-item a:hover {
    color: black;
}

/* Structure du contenu */
.entry-title-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1em;
    align-items: center;
    text-transform: uppercase;
}

.entry-title {
    font-weight: bold;
}

.entry-location,
.entry-lieu {
    text-align: center;
}

.entry-date {
    text-align: right;
}

/* Masquer les données d'image (utilisées uniquement par JS) */
.hidden-image-data {
    display: none;
}

/* Colonne statut exhibitions (Now & Soon / Archive) */
.press-exhibitions-archive .exhibition-items .entry-title-wrapper {
    grid-template-columns: auto 1fr 1fr 1fr;
}

.entry-status {
    white-space: nowrap;
    font-weight: normal;
}

.entry-status.status-archive {
    color: #BDBDBD;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */

@media (max-width: 1024px) {
    .press-exhibitions-layout {
        grid-template-columns: 60% 40%;
    }
}

@media (max-width: 768px) {
    .press-exhibitions-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .press-exhibitions-images {
        position: relative;
        height: 400px;
        order: 1; /* Images en premier sur mobile */
		display: none;
    }

    .press-exhibitions-lists {
        order: 2; /* Listes en second */
        max-height: none;
    }

    .entry-title-wrapper {
        grid-template-columns: 1fr;
        gap: 0.5em;
    }

    .entry-location,
    .entry-lieu,
    .entry-date {
        text-align: left;
    }

    /* Exhibitions mobile : cercle + titre sur la même ligne */
    .press-exhibitions-archive .exhibition-items .entry-title-wrapper {
        grid-template-columns: 1em 1fr;
        align-items: center;
    }

    .exhibition-items .entry-location,
    .exhibition-items .entry-date {
        grid-column: 1 / -1;
    }

    /* Cacher le texte, afficher uniquement le cercle */
    .entry-status {
        font-size: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .entry-status::before {
        content: '';
        display: inline-block;
        width: 0.45rem;
        height: 0.45rem;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .entry-status.status-active::before {
        background-color: currentColor;
    }

    .entry-status.status-archive::before {
        background-color: transparent;
        border: 1px solid currentColor;
    }
}

@media (max-width: 480px) {
    .press-exhibitions-lists {
        padding: 1em;
    }
    
    .content-section {
        margin-bottom: 2em;
    }
}

/* cacher les + et - sur tiles */
[data-is-tiles="true"] .variation-controls-wrapper{
  display: none;
}

[data-is-tiles="true"] .variation-items-wrapper{
    display: grid;
    grid-template-columns: repeat(8,1fr);
}

[data-is-tiles="true"] .variation-items-wrapper .variation-item{
	width: inherit;
}

@media (max-width: 768px) {
    [data-is-tiles="true"] .variation-items-wrapper {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ============================================
   PAGE CONTACT - LAYOUT 2 COLONNES
   ============================================ */

.contact-page-wrapper {
    display: grid;
    /* grid-template-columns: 350px 1fr; */
    gap: 60px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0px 20px;
}

/* Colonne gauche - Info sidebar sticky */
.contact-info-sidebar {
    position: sticky;
    top: 120px; /* Ajustez selon la hauteur de votre header */
    align-self: start;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
}

.contact-info-content {
    background: #f9f9f9;
    padding: 30px;
    border-radius: 8px;
}

.contact-info-section {
    margin-bottom: 40px;
}

.contact-info-section:last-child {
    margin-bottom: 0;
}

.contact-info-title {
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 15px;
    color: #000;
}

.contact-info-item:last-child {
    margin-bottom: 0;
}

.contact-info-value a {
    color: #000;
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-info-value a:hover {
    color: #666;
}

/* Colonne droite - Formulaire */
.mwo-contact-form-area {
    /* Styles existants du formulaire */
}

/* Responsive */
@media (max-width: 1024px) {
    .contact-page-wrapper {
        grid-template-columns: 300px 1fr;
        gap: 40px;
    }
    
    .contact-info-sidebar {
        top: 100px;
    }
}



/* ============================================
   PAGE CONTACT - LAYOUT CENTRÉ
   ============================================ */

.contact-page-wrapper {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* Colonne gauche - Info sidebar sticky (positionnée à gauche) */
.contact-info-sidebar {
    position: fixed;
    left: 20px;
    top: 220px; /* Ajustez selon la hauteur de votre header */
    width: 300px;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    z-index: 10;
}

.contact-info-content {
    background: transparent;
    padding: 30px;
    border-radius: 8px;
}

.contact-info-section {
    margin-bottom: 40px;
}

.contact-info-section:last-child {
    margin-bottom: 0;
}

.contact-info-title {
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 15px;
    color: #000;
}

.contact-info-address {
    font-size: 14px;
    line-height: 1.2;
    color: #333;
    margin: 0;
}

.contact-info-item {
    margin-bottom: 20px;
}

.contact-info-item:last-child {
    margin-bottom: 0;
}

.contact-info-label {
    font-size: 13px;
    line-height: 1.2;
    color: #666;
    margin: 0 0 2px 0;
}

.contact-info-value {
    font-size: 14px;
    font-weight: 500;
    margin: 0;
}

.contact-info-value a {
    color: #000;
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-info-value a:hover {
    color: #666;
}

/* Colonne droite - Formulaire CENTRÉ */
.mwo-contact-form-area {
    max-width: 700px;
    margin: 0 auto;
    padding: 0;
}

@media (max-width: 768px) {
    .contact-page-wrapper {
        grid-template-columns: 1fr;
        gap: 30px;
		padding: 0;
		max-width: 100%;
        width: 100%;
		display: flex;
        flex-direction: column-reverse;
    }
    
    .contact-info-sidebar {
        position: static;
        max-height: none;
    }
    
    .contact-info-content {
        padding: 20px;
    }
}

/* Responsive */
@media (max-width: 1400px) {
    .contact-info-sidebar {
        left: 10px;
        width: 280px;
    }
}

@media (max-width: 1200px) {
    /* Masquer la sidebar sur écrans moyens */
    .contact-info-sidebar {
        position: relative;
		top: 0;
		left: 0;
        width: 100%;
        max-width: 100%;
        margin: 0;
        max-height: none;
    }
    
    .mwo-contact-form-area {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .contact-info-content {
        padding: 0px;
    }
    
    .mwo-contact-form-area {
        max-width: 100%;
    }
}

/* page contact */
.your-request-label{
    width: 100%;
	margin-top: 1em;
}

/* souris custom */
/* Cache la souris par défaut sur tout le site */
body, a, button {
  cursor: none !important;
}

/* Style du curseur custom */
.custom-cursor {
  width: 20px;
  height: 20px;
  background-color: white; /* Sera inversé par le mix-blend-mode */
  border-radius: 50%;
  position: fixed;
  pointer-events: none; /* Important : pour pouvoir cliquer à travers */
  z-index: 9999;
  transition: transform 0.2s ease-out, width 0.3s, height 0.3s;
  mix-blend-mode: difference;
  transform: translate(-50%, -50%);
}

/* Effet au survol des éléments cliquables */
.cursor-grow {
  transform: translate(-50%, -50%) scale(1.5);
  opacity: 0.7;
}

.catalog-custom-text-content{
	width: 50%;
}

@media (max-width: 768px){
	.catalog-custom-text-content{
		width: 100%;
	}
}

/* Marges appliquées au contenu plutôt qu'au conteneur */
.catalog-custom-text,
.custom-section-header {
	margin-top: 4em;
	margin-bottom: 10em;
}

@media (max-width: 768px){
	.catalog-custom-text,
	.custom-section-header {
		margin-bottom: 4em;
	}
}

/* Cache le badge reCAPTCHA */
.grecaptcha-badge { 
    visibility: hidden;
}

/* Conteneur de texte qui se déroule */
#catalog-custom-text-content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
}

/* État ouvert */
#catalog-custom-text-content.is-visible {
    max-height: 1000px; /* Une valeur assez grande pour ton texte */
    opacity: 1;
    /*margin-bottom: 30px; /* Espace avec la grille qui descend */
}

/* page produit */
.mwo-product-gallery .product-actions{
	margin: 2em 0;
	display: flex;
    justify-content: space-between;
    /* padding-right: 30%; */
    align-items: center;
	margin-bottom: 0;
}

.download-pdf{
	text-decoration: underline;
}

#primary-menu {
    position: relative;
}

.quote-count-badge {
    position: absolute;
    top: -8px;
    right: 10px; /* Ajustez selon votre menu */
    background: red;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

/* Si vous voulez le positionner exactement sur Contact */
.menu-item-contact { /* L'ID de votre item Contact */
    position: relative;
}

.menu-item-contact .quote-count-badge {
    position: absolute;
    top: -8px;
    right: -8px;
}

/* Badge sur le lien Contact */
.menu-item-contact {
    position: relative;
}

.menu-item-contact::before {
    content: attr(data-quote-count);
    position: absolute;
    top: -8px;
    right: -8px;
    background: #e74c3c;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 12px;
    display: none; /* Caché par défaut */
    align-items: center;
    justify-content: center;
    font-weight: bold;
    z-index: 10;
}

.menu-item-contact.has-quotes::before {
    display: flex; /* Affiché quand il y a des items */
}

/* Badge sur le lien Contact uniquement */
.menu-item-contact {
    position: relative;
}

.menu-item-contact::before {
    content: attr(data-quote-count);
    position: absolute;
    top: -8px;
    right: -22px;
    background: white;
    color: black;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 12px;
    display: none;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    z-index: 10;
}

.menu-item-contact.has-quotes::before {
    display: flex;
}

/* Responsive pour mobile */
@media (max-width: 768px) {
    .menu-item-contact::before {
        top: -8px;
        right: -16px;
    }
}

/* Badge sur le lien Contact uniquement */
.menu-item-contact {
    position: relative;
}

.menu-item-contact::before {
    content: "(" attr(data-quote-count) ")";
    margin-left: 5px;
    color: var(--color-secondary);
    font-weight: normal;
    font-size: 0.7em;
    display: none;
	    transition: all 0.3s ease-in-out;
}

.menu-item-contact.has-quotes::before {
    display: inline;
}

.menu-item-contact.current-menu-item::before, .menu-item-contact:hover::before {
	color: black;
	transition: all 0.3s ease-in-out;
}

.remove-cart-item {
    margin-top: 10px;
    padding: 0;
    background: white;
    color: black;
    border: none;
    /* cursor: pointer; */
    font-size: 0.85em;
    transition: background 0.3s ease;
	text-decoration: underline;
	position: absolute;
	bottom: 1em;
	left: 0;
}

.remove-cart-item:hover {
    background: white;
}

.remove-cart-item:active {
    transform: scale(0.95);
}

/* Bouton Scroll to Top */
.scroll-to-top {
    position: fixed;
    bottom: 50px;
    right: 0;
    width: 50px;
    height: 50px;
    background: transparent;
    color: white;
    border: none;
    border-radius: 50%;
    /* cursor: pointer; */
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
}

.scroll-to-top.visible {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}

.scroll-to-top:hover {
}

.scroll-to-top:active {
    transform: translateY(-2px);
}

.scroll-to-top svg {
    width: 24px;
    height: 24px;
}

/* Responsive */
@media (max-width: 768px) {
    .scroll-to-top {
        bottom: 20px;
        right: -3px;
        width: 45px;
        height: 45px;
    }
}

/* Animation d'ouverture du texte personnalisé */
#catalog-custom-text-content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.6s ease, opacity 0.5s ease, padding 0.6s ease;
    transform-origin: top;
}

#catalog-custom-text-content.is-visible {
    max-height: 1000px; /* Ajustez selon la hauteur maximale de vos textes */
    opacity: 1;
    padding-top: 20px;
    padding-bottom: 20px;
}

/* Animation plus fluide avec transform */
.catalog-custom-text {
    transform: translateY(-20px);
    transition: transform 0.5s ease;
}

#catalog-custom-text-content.is-visible .catalog-custom-text {
    transform: translateY(0);
}

/* Animation du contenu interne */
.custom-text-content {
    animation: fadeInContent 0.6s ease forwards;
}

@keyframes fadeInContent {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Pour la section custom (avec titre) */
.custom-section-header {
    animation: fadeInContent 0.6s ease forwards;
}

/* Container : Animation d'ouverture vers le bas */
#catalog-custom-text-content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.3s ease;
    padding: 0 20px;
}

#catalog-custom-text-content.is-visible {
    max-height: 1000px;
    opacity: 1;
    padding: 0;
}

/* Contenu : Fade in après l'ouverture */
.catalog-custom-text,
.custom-section-header {
    opacity: 0;
    transform: translateY(-15px);
    transition: opacity 0.5s ease 0.2s, 
                transform 0.5s ease 0.2s;
}

#catalog-custom-text-content.content-visible .catalog-custom-text,
#catalog-custom-text-content.content-visible .custom-section-header {
    opacity: 1;
    transform: translateY(0);
}

/* Texte interne */
.custom-text-content,
.custom-section-description {
    transition: opacity 0.4s ease 0.3s;
}

/* Container : Animation simple */
#catalog-custom-text-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
    padding: 0;
}

#catalog-custom-text-content.is-visible {
    max-height: 1000px;
    padding: 0;
}

/* Contenu : Fade simple */
.catalog-custom-text,
.custom-section-header {
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

#catalog-custom-text-content.is-visible .catalog-custom-text,
#catalog-custom-text-content.is-visible .custom-section-header {
    opacity: 1;
}

/* Terms & Conditions Page */
.terms-conditions-page {
    padding: 60px 1em;
}

@media (max-width: 768px){
	.terms-conditions-page {
		padding-top: 7em;
	}
}

.terms-conditions-page .page-header {
    margin-bottom: 40px;
    text-align: left;
}

.terms-conditions-page .page-title {
    font-size: 16px;
	text-transform: uppercase;
	text-decoration: underline;
	width: 40%;
	max-width: 676px;
	margin: 0 auto;
	font-weight: normal;
}

@media (max-width: 1200px){
	.terms-conditions-page .page-title {
		width: 100%;
		max-width: inherit;
		margin-top: 1em;
	}
}

.terms-sections {
    margin-top: 40px;
}

.terms-section {
    margin-bottom: 40px;
    padding-bottom: 30px;
}

.terms-section:last-child {
    border-bottom: none;
}

.terms-section .section-title {
    font-size: 16px;
    margin-bottom: 15px;
    color: #333;
}

.terms-section .section-content {
    line-height: 1.8;
    color: #666;
}

.terms-section .section-content p {
    margin-bottom: 15px;
}

/* POPUP DE CONFIRMATION */
.mwo-confirmation-popup {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.mwo-confirmation-popup.show {
    opacity: 1;
    transform: translateY(0);
}

.mwo-popup-content {
    background: white;
    /* border-radius: 12px; */
    padding: 20px 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 280px;
    max-width: 400px;
}

.mwo-popup-icon {
    width: 18px;
    height: 18px;
    background: black;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: bold;
    flex-shrink: 0;
}

.mwo-popup-text {
    flex: 1;
}

.mwo-popup-message {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    color: #1a1a1a;
}

.mwo-popup-message strong {
    font-weight: 600;
    color: #000;
}

.mwo-popup-quantity {
    margin: 4px 0 0 0;
    font-size: 12px;
    color: #666;
}

@media (max-width: 768px) {
    .mwo-confirmation-popup {
        top: 10px;
        right: 10px;
        left: 10px;
    }
    .mwo-popup-content {
        /* min-width: auto; */
        /* width: 100%; */
        /* padding: 16px 20px; */
    }
}

.wpcf7-form-control::placeholder {
    color: var(--color-secondary);
    opacity: 1; /* important pour Firefox */
}

.wpcf7-textarea {
    padding: 14px;
}

/* Utilisation de la cascade pour chaque règle */

.terms-section {
    display: flex;
    align-items: flex-start; /* Aligne le haut du titre et du texte */
	justify-content: center;
    gap: 40px;
	position: relative
}

.terms-section .section-title {
    flex: 1;
    margin: 0;
    text-align: left;
    font-size: 14px;
	position: absolute;
	text-decoration: underline;
	text-transform: uppercase;
	max-width: 200px;
	top: 0;
	left: 0;
}

.terms-section .section-content {
    /* Définit la largeur à 30% du parent */
    width: 40%;
    /* Max-width basé sur 30% de 1920px soit 576px */
    max-width: 676px;
    /* Centre le bloc dans l'espace restant à droite du titre */
    margin-left: auto;
    margin-right: auto;
}

.terms-section .section-content p {
    margin-top: 0;
    text-align: left;
    line-height: 1.6;
}

/* Version responsive pour éviter que les 30% ne soient trop étroits sur mobile */
@media (max-width: 768px) {
    .terms-section {
        flex-direction: column;
		margin-bottom: 0;
        padding-bottom: 1em;
        gap: 0.5em;
    }
    
    .terms-section .section-content {
        width: 100%;
        max-width: none;
    }
	
	.terms-section .section-title{
		position: relative;
		margin-bottom: 1.3em;
	}
}

/* ============================================
   TILES VARIATIONS DISPLAY
   ============================================ */

/* Conteneur principal */
#tiles-variations-display {
    display: none;
    gap: 10px;
    padding: 15px;
    margin-bottom: 20px;
}

/* Grille 4 colonnes */
#tiles-variations-display.tiles-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

@media screen and (max-width: 768px) {
    #tiles-variations-display.tiles-grid-4 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Item individuel tile */
.tile-mini-item {
    /* height: 100px; */
    /* width: 100px; */
    overflow: hidden;
    position: relative;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Image tile */
.tile-mini-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Bouton de suppression */
.tile-mini-remove-btn {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    background: transparent;
    color: white;
    border: none;
    border-radius: 50%;
    /* cursor: pointer; */
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    padding: 0;
}

/* ============================================
   PRESS LIGHTBOX DIAPORAMA - FOND FLOU
   ============================================ */

.press-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.press-lightbox-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    background: rgba(255, 255, 255, 0.3);
}

.press-lightbox-content {
    position: relative;
    z-index: 9001;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.press-lightbox-image {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    transition: opacity 0.3s ease;
    /* box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); */
    border-radius: 4px;
}

.press-lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: none;
    color: black;
    font-size: 40px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    /* cursor: pointer; */
    transition: all 0.3s;
    line-height: 1;
    padding: 0;
}


.press-lightbox-prev,
.press-lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    color: black;
    font-size: 40px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    /* cursor: pointer; */
    transition: all 0.3s;
	border: 0;
}
.press-lightbox-prev {
    left: -4em;
}

.press-lightbox-next {
    right: -4em;
}

.press-lightbox-counter {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: #1a1a1a;
    background: rgba(255, 255, 255, 0.9);
    padding: 8px 16px;
	border-color: black;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
}

/* Responsive */
@media (max-width: 768px) {
    .press-lightbox-prev,
    .press-lightbox-next {
        width: 50px;
        height: 50px;
        font-size: 30px;
    }
	
	.press-lightbox-prev{
		left: -1.5em;
	}
	
	.press-lightbox-next{
		right: -0.5em;
	}
    
    .press-lightbox-close {
        width: 40px;
        height: 40px;
        font-size: 30px;
		right: 0;
    }
    
    .press-lightbox-overlay {
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
    }
}

.press-lightbox-image {
    width: auto;
    height: 80vh; /* Hauteur fixe */
    max-width: 90vw;
    object-fit: contain;
    transition: opacity 0.3s ease;
}

/* Lien "View the quote" dans la popup */
.mwo-popup-link {
    display: inline-block;
    margin-top: 10px;
    color: #1a1a1a;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.mwo-popup-link:hover {
    /* background: black; */
    /* color: white; */
    /* border-color: #10b981; */
    /* transform: translateY(-1px); */
}

/* Curseur pointer sur toute la popup */
.mwo-confirmation-popup {
    /* cursor: pointer; */
}

/* Curseur par défaut sur le contenu (pour éviter conflit avec le lien) */
.mwo-popup-content {
    cursor: default;
}

/* Curseur pointer sur le lien */
.mwo-popup-link {
    /* cursor: pointer; */
}

/* Curseur custom au-dessus de la popup */
#custom-cursor,
.custom-cursor,
.cursor,
.cursor-dot,
.cursor-outline {
    z-index: 99999 !important; /* Plus haut que la popup (10000) */
    pointer-events: none !important;
}

/* Popup en dessous du curseur */
.mwo-confirmation-popup {
    z-index: 10000;
}

/* Curseur custom au-dessus de la popup */
#custom-cursor,
.custom-cursor,
.cursor,
.cursor-dot,
.cursor-outline {
    z-index: 99999 !important;
    pointer-events: none !important; /* ✅ Garde ça - c'est correct */
}

/* ✅ NOUVEAU : Autoriser les clics sur le lien de la popup */
.mwo-popup-link {
    position: relative;
    z-index: 10001; /* Au-dessus du contenu de la popup */
    pointer-events: auto !important; /* Force les clics */
}

/* Popup */
.mwo-confirmation-popup {
    z-index: 10000;
}

/* Contenu popup */
.mwo-popup-content {
    position: relative;
    z-index: 10000;
    pointer-events: auto; /* Autorise les interactions */
}

/* Masquer les miniatures tiles et custom wall dans le catalogue */
.mwo-catalog-grid .type-tiles,
.mwo-catalog-grid .type-customwall {
    display: none;
}

/* Optionnel : Ajuster l'espacement si pas d'image */
.catalog-product-item.type-tiles,
.catalog-product-item.type-custom-wall {
    min-height: auto;
}

/* Style spécifique pour les variations Custom Wall */
.variation-items-wrapper.style-custom-walls {
    /* Vos styles ici */
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 15px;
}

/* Variations individuelles dans Custom Wall */
.variation-items-wrapper.style-custom-walls .variation-item {
    /* Styles spécifiques */
}

/* Variations murales : 7 par ligne */
#variation-thumbnails-wall .style-custom-walls {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
}

/* Variations produit (bois) : 4 par ligne (ou selon votre choix) */
#variation-thumbnails .style-custom-walls {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

/* Responsive : moins de colonnes sur mobile */
@media (max-width: 1200px) {
    #variation-thumbnails-wall .style-custom-walls {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 768px) {
    #variation-thumbnails-wall .style-custom-walls {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 480px) {
    #variation-thumbnails-wall .style-custom-walls {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Variations BOIS Custom Wall : 10 par ligne */
#variation-thumbnails .style-custom-walls {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 10px;
}

/* Variations MURALES Custom Wall : 7 par ligne */
#variation-thumbnails-wall .style-custom-walls {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
}

/* Ajuster la taille des miniatures */
.style-custom-walls .variation-item {
    width: 100%;
    aspect-ratio: 1; /* Carré parfait */
}

.style-custom-walls .variation-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

/* Responsive */
@media (max-width: 1400px) {
    #variation-thumbnails .style-custom-walls {
        grid-template-columns: repeat(7, 1fr);
    }
    #variation-thumbnails-wall .style-custom-walls {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 1024px) {
    #variation-thumbnails .style-custom-walls {
        grid-template-columns: repeat(5, 1fr);
    }
    #variation-thumbnails-wall .style-custom-walls {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    #variation-thumbnails .style-custom-walls,
    #variation-thumbnails-wall .style-custom-walls {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 480px) {
    #variation-thumbnails .style-custom-walls,
    #variation-thumbnails-wall .style-custom-walls {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Variations BOIS Custom Wall : 10 par ligne */
#variation-thumbnails .style-custom-walls {
    display: grid;
    grid-template-columns: repeat(10, 63px);
    gap: 0.5em;
}

/* Variations MURALES Custom Wall : 7 par ligne */
#variation-thumbnails-wall .style-custom-walls {
    display: grid;
    grid-template-columns: repeat(7, 63px);
    gap: 0.5em;
}

/* Taille fixe 63x63px pour toutes les miniatures Custom Wall */
.style-custom-walls .variation-item {
    width: 63px;
    height: 63px;
    flex-shrink: 0;
}

.style-custom-walls .variation-item img {
    width: 63px;
    height: 63px;
    object-fit: cover;
    border-radius: 4px;
	transform: scale(1.6);
	transform-origin: center center;
}

/* Responsive : garder 63px mais réduire le nombre de colonnes */
@media (max-width: 1600px) {
    #variation-thumbnails .style-custom-walls {
        grid-template-columns: repeat(7, 63px);
    }
    #variation-thumbnails-wall .style-custom-walls {
        grid-template-columns: repeat(5, 63px);
    }
}

@media (max-width: 1024px) {
    #variation-thumbnails .style-custom-walls {
        grid-template-columns: repeat(5, 63px);
    }
    #variation-thumbnails-wall .style-custom-walls {
        grid-template-columns: repeat(4, 63px);
    }
}

@media (max-width: 768px) {
    #variation-thumbnails .style-custom-walls,
    #variation-thumbnails-wall .style-custom-walls {
        grid-template-columns: repeat(3, 63px);
    }
}

@media (max-width: 480px) {
    #variation-thumbnails .style-custom-walls,
    #variation-thumbnails-wall .style-custom-walls {
        grid-template-columns: repeat(2, 63px);
    }
}

@media (max-width: 768px) {
    .style-custom-walls .variation-item,
    .style-custom-walls .variation-item img {
        /* width: 50px; */
        /* height: 50px; */
    }
    
    #variation-thumbnails .style-custom-walls,
    #variation-thumbnails-wall .style-custom-walls {
        grid-template-columns: repeat(5, 63px);
    }
}

/* ============================================
   PAGE 404
   ============================================ */

.error-404 {
    text-align: center;
    padding: 80px 20px;
    max-width: 600px;
    margin: 0 auto;
}

.error-404 .page-title {
    font-size: 2.5em;
    margin-bottom: 20px;
}

.error-404 .page-content {
    font-size: 1.1em;
    color: #666;
}

.error-404-links {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 40px;
    flex-wrap: wrap;
}

.button-404 {
    display: inline-block;
    padding: 12px 30px;
    background: #1a1a1a;
    color: white;
    text-decoration: none;
    border-radius: 32px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.button-404:hover {
    background: #333;
    transform: translateY(-2px);
}

.button-404.button-home {
    background: white;
    color: black;
	border: 1px solid black;
}

.button-404.button-home:hover {
    background: #e0e0e0;
}

/* Responsive */
@media (max-width: 480px) {
    .error-404-links {
        flex-direction: column;
        gap: 10px;
    }
    
    .button-404 {
        width: 100%;
    }
}

/* ============================================
   LOGO LOTTIE DANS LE HEADER
   ============================================ */

.header-lottie-container {
    width: 180px; /* Ajustez selon votre logo */
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* cursor: pointer; */
    margin-left: 1em;
}

.header-lottie-container svg {
    width: 100% !important;
    height: 100% !important;
}

/* Responsive */
@media (max-width: 768px) {
    .header-lottie-container {
        width: 162px;
        height: 42px;
        margin-left: 0;
    }
}

@media (min-width: 769px) and (max-width: 1000px) {
    .site-header {
        justify-content: flex-end;
        padding-right: 2em;
    }
}


/* ============================================
   POPUP CONFIRMATION FORMULAIRE CF7
   ============================================ */

/* Masquer le message CF7 par défaut */
.wpcf7-response-output {
    display: none !important;
}

/* Popup formulaire - succès */
.mwo-form-success-popup .mwo-popup-icon {
    background: #10b981;
}

/* Popup formulaire - erreur */
.mwo-form-error-popup .mwo-popup-icon-error {
    background: #ef4444;
}

/* Popup formulaire - warning */
.mwo-form-warning-popup .mwo-popup-icon-warning {
    background: #f59e0b;
}

/* Sous-titre de la popup */
.mwo-popup-subtitle {
    margin: 5px 0 0 0;
    font-size: 13px;
    color: #666;
    font-weight: 400;
}

/* Animation plus longue pour les messages importants */
.mwo-form-success-popup {
    animation-duration: 0.4s;
}

.mwo-contact-form-area .form-row>p, .mwo-contact-form-area .form-row+p{
	display: flex;
	gap: 0.5em;
}

@media screen and (max-width: 768px){
	.mwo-contact-form-area .form-row>p, .mwo-contact-form-area .form-row+p{
	flex-direction: column;
}

input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea{
	width: 100%;
}
}

/* ===================================================================
   CUSTOM WALL DIMENSIONS
   ================================================================ */

.custom-wall-dimensions {
    margin: 30px 0;
}

.dimensions-title {
    font-size: 15px;
    font-weight: normal;
    margin: 0 0 15px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dimensions-title svg {
    opacity: 0.6;
}

.dimensions-inputs {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.dimension-input-group {
    /* flex: 1; */
}

.dimension-input-group label {
	width: auto;
	border: 1px solid black;
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 5px 5px;
    background: #fff;
}

.dimension-input-group input{
	width: 35px;
}

.dimension-input-group label:focus-within {
    border-color: #000;
}

.dimension-label {
    font-weight: 600;
    color: #bababa;
    min-width: 15px;
}

.dimension-input-group input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 16px;
    font-weight: 500;
    padding: 0;
    text-align: center;
}

.dimension-input-group input::placeholder {
    color: #ccc;
}

.dimension-unit {
    color: black;
    font-size: 14px;
}

.dimension-separator {
    font-size: 20px;
    color: #999;
    font-weight: 300;
}

.dimensions-note {
    font-size: 13px;
    color: #666;
    line-height: 1.5;
    margin: 0;
}


/* ===================================================================
   CURSEUR CUSTOM (DESKTOP UNIQUEMENT)
   ================================================================ */

.custom-cursor {
    width: 20px;
    height: 20px;
    background-color: white;
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    transition: transform 0.2s ease-out, width 0.3s, height 0.3s;
    mix-blend-mode: difference;
    transform: translate(-50%, -50%);
}

/* Effet au survol des éléments cliquables */
.cursor-grow {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0.7;
}

/* ===================================================================
   DÉSACTIVATION MOBILE/TABLETTE
   ================================================================ */

/* Classe ajoutée par JavaScript */
.no-custom-cursor .custom-cursor {
    display: none !important;
}

.no-custom-cursor * {
    cursor: auto !important;
}

/* Media queries de sécurité */
@media (max-width: 1023px) {
    .custom-cursor {
        display: none !important;
    }
    
    body * {
        cursor: auto !important;
    }
}

/* Détecter les appareils tactiles */
@media (hover: none) and (pointer: coarse) {
    .custom-cursor {
        display: none !important;
    }
    
    body * {
        cursor: auto !important;
    }
}

/* Si touch est supporté (backup) */
@media (pointer: coarse) {
    .custom-cursor {
        display: none !important;
    }
}

/* 1. Reset Typo et Footer */
.fluentform .ff-footer-credit {
    display: none !important;
}

.fluentform, 
.fluentform *,
.fluentform .ff-el-form-control,
.fluentform .ff-btn-submit {
    font-family: 'ABCRepro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
}

/* --- DESIGN ULTRA-MINIMALISTE (NO LABELS) --- */

/* 2. Cacher les labels par défaut */
.fluentform .ff-el-input--label {
    display: none !important;
}

/* 3. Style des champs (Inputs, Select, Textarea) */
.fluentform .ff-el-form-control {
    border: 1px solid #000 !important;
    background-color: #fff !important;
    color: #000 !important;
    padding: 15px 12px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    margin-bottom: 10px !important;
}

/* 4. Style des Placeholders */
.fluentform .ff-el-form-control::placeholder {
    color: #999 !important;
    font-size: 14px;
    letter-spacing: 1px;
}

/* 5. BOUTON SUBMIT (Style Pilule comme tes autres boutons) */
.fluentform .ff-btn-submit {
    background-color: var(--color-primary, #000) !important;
    color: #fff !important;
    border: none !important;
    padding: 10px 20px !important;
    margin: 0.5em !important;
    width: auto !important;
    min-width: 150px;
    text-transform: lowercase !important;
    font-size: 14px !important;
    font-weight: normal !important;
    border-radius: 32px !important; /* Arrondi spécifique */
    transition: background-color 0.3s, color 0.3s !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

.fluentform .ff-btn-submit:hover {
    /* background-color: #333 !important; */
    /* color: #fff !important; */
}

/* 6. Alignement Adresse (67%) et Country (33%) */
.fluentform .ff-name-address-wrapper .ff-t-container {
    display: flex !important;
    flex-wrap: wrap;
    gap: 0;
}

.fluentform .ff-name-address-wrapper .ff-t-cell:nth-child(1) {
    flex: 0 0 67% !important;
    max-width: 67% !important;
    padding-right: 15px;
}

.fluentform .ff-name-address-wrapper .ff-t-cell:nth-child(2) {
    flex: 0 0 33% !important;
    max-width: 33% !important;
}

/* 7. Gestion du Select (si toujours utilisé) */
.fluentform select.ff-el-form-control {
    color: #999 !important;
    letter-spacing: 1px;
}

.fluentform select.ff-el-form-control:not([value=""]):focus,
.fluentform select.ff-el-form-control:valid {
    color: #000 !important;
}

/* 8. Responsive Mobile */
@media (max-width: 600px) {
    .fluentform .ff-name-address-wrapper .ff-t-cell:nth-child(1),
    .fluentform .ff-name-address-wrapper .ff-t-cell:nth-child(2) {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding-right: 0;
    }
}

/* Mise en page conteneur */
.mwo-fluent-form-container {
    width: 100%;
}

.fluentform .ff-el-is--inline.ff-el-group {
    text-align: center !important;
}



/* --- STYLE DU BOUTON ADD MORE (IDENTIQUE AU SUBMIT) --- */

#mwo-add-more-btn {
    /* Couleurs demandées */
    background-color: #fff !important;
    color: var(--color-primary, #000) !important;
    border: 1px solid var(--color-primary, #000) !important;

    /* Dimensions et Espacement (Copie conforme du submit) */
    padding: 10px 20px !important;
    margin: 0.5em !important;
    width: auto !important;

    /* Typo et Style (Identique au submit) */
    text-transform: lowercase !important;
    font-family: 'ABCRepro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
    font-size: 14px !important;
    font-weight: normal !important;
    
    /* Forme et Animation (Identique au submit) */
    border-radius: 32px !important; /* Forme pilule */
    transition: background-color 0.3s, color 0.3s !important;
    cursor: pointer !important;
    box-shadow: none !important;
    display: inline-block;
}

/* État Hover pour le bouton add more */
#mwo-add-more-btn:hover {
    /* background-color: var(--color-primary, #000) !important; */
    /* color: #fff !important; */
	cursor: inherit;
}

/* Alignement des deux boutons côte à côte */
.ff_submit_btn_wrapper {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: flex-start; /* Aligné à gauche, ou 'center' selon ton envie */
    flex-wrap: wrap;
    gap: 5px; /* Réduit l'espace car ils ont déjà des margins */
}

/* Désactiver le curseur "main" (pointer) pour garder le curseur custom */
.fluentform .ff-btn-submit,
#mwo-add-more-btn {
    cursor: none !important;
}

/* On l'enlève aussi sur l'état hover au cas où */
.fluentform .ff-btn-submit:hover,
#mwo-add-more-btn:hover {
    cursor: none !important;
}

.ff-message-success {
    margin-top: 10px !important;
    padding: 30px 0 !important;
    position: relative !important;
    border: none !important;
    box-shadow: none !important;
}

.mwo-back-to-catalog-link {
    display: inline-block;
    margin-top: 20px;
    background-color: var(--color-primary, #000);
    color: #fff;
    text-decoration: none;
    text-transform: lowercase;
    font-family: 'ABCRepro', sans-serif;
    font-size: 1rem;
    padding: 10px 20px;
    border-radius: 32px;
    line-height: 1.5;
    transition: background-color 0.3s, color 0.3s;
    cursor: none !important;
}

.gallery-label{
	margin-bottom: 0.8em;
}

/* ===================================================================
   POPUPS (Confirmation, Warning, Error)
   ================================================================ */

.mwo-confirmation-popup {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 10000;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.mwo-confirmation-popup.show {
    opacity: 1;
    transform: translateY(0);
}

.mwo-popup-content {
    background: white;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 300px;
    max-width: 400px;
    border-left: 4px solid black;
	border: 1px solid black;
	padding-right: 35px;
	min-width: inherit;
	box-shadow: inherit;
}

.mwo-popup-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: black;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.mwo-popup-text {
    flex: 1;
}

.mwo-popup-message {
    margin: 0;
    font-size: 15px;
    color: #333;
    line-height: 1.4;
}

.mwo-popup-message strong {
    display: block;
    margin-bottom: 5px;
}

.mwo-popup-quantity {
    margin: 5px 0;
    font-size: 13px;
    color: #666;
}

.mwo-popup-link {
    display: inline-block;
    margin-top: 8px;
    color: #000;
    font-size: 14px;
    font-weight: 500;
}

.mwo-popup-link:hover {
}

.mwo-popup-submessage {
    font-size: 14px;
    color: #666;
    margin: 5px 0 0 0;
    line-height: 1.5;
}

/* Warning popup (orange) */
.mwo-warning-popup .mwo-popup-icon.warning {
    background: black;
}

.mwo-warning-popup .mwo-popup-content {
    border-left-color: black;
}

/* Error popup (rouge) */
.mwo-error-popup .mwo-popup-icon.error {
    background: black;
}

.mwo-error-popup .mwo-popup-content {
    border-left-color: black;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .mwo-confirmation-popup {
        right: 15px;
        /* left: 15px; */
        bottom: 20px;
    }
    
    .mwo-popup-content {
        /* min-width: auto; */
		width: fit-content;
		        right: 0;
        position: absolute;
    }
}



.main-image-container.is-custom-wall-layout .sticky-product-wrapper{
	max-width: 600px;
	display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: 1fr auto;
grid-template-columns: 1fr;
    grid-template-rows: 50%; 
    gap: 0;
    height: 100%;       /* Important pour avoir de l'espace à combler */
    align-content: end;  /* Pousse tout le bloc (ligne 1 + ligne 2) vers le bas */		
}

.main-image-container.is-custom-wall-layout .custom-wall-image{
	/* Le zoom x2 */
    transform: scale(2.5); 
    
    /* Optionnel : définit le point d'origine du zoom (ici le centre) */
    transform-origin: center center;
}

.main-image-container.is-custom-wall-layout .wall-mini-image{
	object-fit: cover;
	object-position: center center;
	/* Le zoom x2 */
    transform: scale(1.5); 
    
    /* Optionnel : définit le point d'origine du zoom (ici le centre) */
    transform-origin: center center;
    width: stretch;
}

@media (max-width: 768px){
	.main-image-container.is-custom-wall-layout .wall-mini-image{
		transform: scale(2);
	}
}

.main-image-container.is-tiles-layout .sticky-product-wrapper{
	justify-content: flex-start;
	align-items: center;
}

/* Center reference image for tiles products */
.main-image-container.is-tiles-layout #mwo-catalog-fallback-image {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	flex: 1;
}

.main-image-container.is-tiles-layout #mwo-catalog-fallback-image img {
	width: auto;
	max-width: 100%;
	max-height: 80svh;
	object-fit: contain;
}

@media (min-width: 1024px) and (max-width: 1600px) {
	.main-image-container.is-tiles-layout .sticky-product-wrapper,
	.main-image-container.is-custom-wall-layout .sticky-product-wrapper {
		align-content: center;
	}
}

@media (min-width: 1400px) {
	.main-image-container.is-tiles-layout #mwo-catalog-fallback-image {
		bottom: 0;
	}
}

.custom-wall-wrapper-img{
	position: relative;
	overflow: hidden;
	width: 100%;
}

.variation-name-overlay{
	position: absolute;
    bottom: 12px;
    right: 12px;
    color: #313131;
    font-size: 14px;
    font-weight: 100;
    letter-spacing: 0.03em;
    padding: 6px 12px;
    background: rgb(255 255 255 / 29%);
    border-radius: 45px;
    pointer-events: none;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.22s ease, transform 0.22s ease;
    z-index: 2;
}

.variation-name-overlay.is-visible{
	opacity: 1;
    transform: translateY(0);
}

.home .site-main{
	    justify-content: center;
    align-items: center;
    display: flex;
}


/* --- CONFIGURATION DESKTOP (Par défaut) --- */
#primary-menu {
    display: flex; /* Ou ce que ton thème utilise par défaut */
    position: static; /* On remet en position normale */
    opacity: 1;
    visibility: visible;
    right: auto;
    height: auto;
    width: auto;
    background: transparent;
    pointer-events: auto;
}

/* --- CONFIGURATION MOBILE (Seulement sous 768px) --- */
@media screen and (max-width: 768px) {
    #primary-menu {
        position: fixed;
        top: 0;
        right: -100%; /* Sort de l'écran */
        width: 100%;
        height: 100vh;
        background: rgba(255, 255, 255, 0.75); /* #ffffffbf */
        z-index: 999;
        /* opacity: 0; */
        /* visibility: hidden; */
        pointer-events: none;
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
		transform: translateX(100%);
        display: block !important;
    }
	
	.menu-item-contact.has-quotes::before{
		display: none;
	}

    /* État OUVERT en mobile */
    #primary-menu.is-open {
        transform: translateX(-100%); /* Glisse vers la gauche */
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
		transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    }
}


@media screen and (max-width: 768px) {
	.main-image-container{
		min-height: inherit;
		padding-right: inherit;
	}
	.mwo-product-header{
		    position: absolute;
			top: 3.5em;
			display: none;
	}
	.custom-wall-wrapper-img {
		max-height: 60vh;
	}
	.custom-wall-wrapper-img .product-main-image {
		width: 100%;
		height: auto;
	}
}

@media screen and (max-width: 1024px) {
	.tiles-variations-display .tile-mini-item{
		height: 100px;
	}
}

.mwo-page-about{
	    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* Supprime les flèches pour Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Supprime les flèches pour Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

/* Cible spécifiquement les champs de ton formulaire si besoin */
.ff-el-form-control[type="number"],
.ff-el-form-control[type="tel"] {
  -webkit-appearance: none;
  -moz-appearance: textfield;
  appearance: none;
}

/* Animation pour la transition de l'image catalogue vers le dynamique */
#mwo-catalog-fallback-image {
    transition: opacity 0.4s ease-out;
}

@media (min-width: 1400px){
    #mwo-catalog-fallback-image {
        position: relative;
        bottom: 7rem;
    }
}

#mwo-dynamic-custom-display {
    animation: fadeIn 0.6s ease-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px); /* Petit effet de mouvement vers le haut */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Optionnel : Assurer que les images de catalogue respectent le ratio */
#mwo-catalog-fallback-image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* mobile */

.mobile-back-button{
	display: none;
}


@media (max-width: 768px){
	.mobile-back-button{
        display: block;
        position: relative;
        left: 0em;
        top: 7em;
        z-index: 1;
        padding-bottom: 3em;
	}
	
	.post-type-archive-catalog .mobile-back-button, .home .mobile-back-button{
		display: none;
	}
	
	.mobile-back-button .back-arrow-button:before{
		top: 0;
	}
	
	.mobile-back-button .back-link{
		background: transparent;
	}
	.site-main {
        padding: 7em 1em 2em 1em;
    }
}