/*!
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: #404040;
   
    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;
}

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 #ccc;
    border-radius: 3px;
    padding: 3px;
}

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 #ccc;
}

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);
}

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

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

@media screen and (min-width: 37.5em) {

    .menu-toggle {
        display: none;
    }

    .main-navigation ul {
        display: flex;
    }
}

.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;
}

.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;
}

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

/* 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 */

/* todo check if ok */

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

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

.site-branding{
    position: absolute;
    left: 1em;
}

.site-title{
    display: none;
}

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

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

.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;

    li{
        list-style-type: none;
        margin: 0.5em;

        a{
            text-decoration: none;
			font-weight: bold;
        }
		a:hover{
			letter-spacing: 0.02em;
		}
    }
}

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

.site-main{
    padding: 1em 3em;
}

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

.mwo-hero-video-section {
    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%; 
    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;
}

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

.mwo-hero-content{
    display: none; /* todo temporaire */
}

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

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

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

/* 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 var(--color-border, #ccc); /* Utilise ta variable CSS pour la bordure */
}

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

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

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

.form-actions .button-submit,
.form-actions .button-add-more {
    /* 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;
}

.form-actions .button-submit {
    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);
}

/* 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 {
    border-radius: 50%;
    /* L'opacité sur l'élément principal est conservée */
    opacity: 0.5; 
    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.05); /* J'ai légèrement augmenté le scale à 1.05 pour un meilleur effet */
}

/* page produit catalog */

.mwo-product-gallery {
    display: grid;
    grid-template-columns: 50% 50%;
    gap: 20px;
}

.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;
}

/* --- 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;
}

.variation-item:hover{
    /* Conserve tes styles de survol */
    border-radius: 0.5em;
    opacity: 0.5;
    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;
}

/* -------------------------------------------------------------------------------------- */
/* --- 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: 24px;
    height: 24px;
    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 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); 

    /* 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: 25px;
    height: 25px;
    line-height: 1;
    padding: 0;
    margin: 0;
    border-radius: 4px;
    font-size: 14px;
    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 */
.add-variation-btn {
    background-color: white; /* Vert */
    color: black;
}

/* 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 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    /* max-width: 60%; */
        position: sticky;
    top: 3em;
    max-height: 400px;
}

/* 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: 2em;
    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) */
/* ----------------------------------------------------------------- */

#mwo-preloader {
    /* Cache toute la page */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white; /* Un fond blanc pour l'attente */
    z-index: 9999; /* Toujours au-dessus de tout */
    display: flex; /* Pour centrer le spinner */
    justify-content: center;
    align-items: center;
    /* Transition pour l'effet de disparition */
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s, visibility 0.5s;
}

/* Classe pour cacher le loader (appliquée par JS) */
#mwo-preloader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* Empêche de bloquer les clics une fois invisible */
}

/* Le spinner (cercle simple en CSS) */
.mwo-loader-spinner {
    border: 5px solid #f3f3f3; /* Gris clair */
    border-top: 5px solid #000; /* Noir (ou ta couleur principale) */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1.5s linear infinite; /* Animation de rotation */
}

/* L'animation de rotation du spinner */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 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: repeat(2,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;
    }
}


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

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

/* page contact avec panier */

#quote-cart-list{
    margin-left: 0;
    padding-left: 0;
    display: grid;
    gap: 2em;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.mwo-quote-cart-item{
    list-style-type: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.mwo-contact-form-area{
    display: flex;
    flex-direction: row-reverse;
    gap: 4em;
    justify-content: space-between;
    width: 100%;
    display: grid;
    grid-template-columns: 600px 1fr;
}

.mwo-contact-form-area>p{
    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;
}

.mwo-catalog-filters button{
    background-color: white;
    border: none;
    color: black;
    transition: all 0.3s ease-in-out;
    text-transform: lowercase;
    padding-bottom: 0;
}

.mwo-catalog-filters button:hover{
    cursor: pointer;
    opacity: 0.5;
    transition: all 0.3s ease-in-out;
}

.filter-group{
    display: flex;
}

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

.filter-group-label{
    text-transform: lowercase;
    padding-top: 0.6em;
}

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

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

/* 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); }
    50% { transform: scale(1.15); box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); }
    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: var(--color-secondary);
    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: 1em;
    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-product-link {
    text-decoration: underline;
    font-weight: normal;
    transition: opacity 0.3s ease;
}

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

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

.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);
}

/* ----------------------------------------------------------------
   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 {
        grid-template-columns: 1fr;
    }
    
    .main-image-container {
        padding-right: 1em;
    }
    
    .mwo-about-image-column {
        justify-content: center;
        margin-top: 2em;
    }
    
    .mwo-about-image-column img {
        position: static;
        width: 100%;
        max-width: 400px;
    }

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

/* Smartphones */
@media (max-width: 768px) {
    .site-main {
        padding: 1em;
    }
    
    .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: 1em;
        text-align: center;
    }
    
    .footer-socials ul {
        justify-content: center;
    }
    
    .mwo-catalog-filters {
        flex-direction: column;
        align-items: stretch;
    }
    
    .filter-group {
        flex-direction: column;
    }
    
    .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;
    }
}

/* 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;
    }
    
    .site-branding {
        position: static;
    }
    
    .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;
}

.variation-thumbnails.wall-variations .variation-item.is-active {
    border: 2px solid var(--color-primary);
    border-radius: 4px;
}

/* 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-thumb-item {
    cursor: pointer;
    transition: all 0.3s ease;
}

.gallery-thumb-item:hover {
    opacity: 0.7;
    transform: scale(1.05);
}

.gallery-thumb-item.is-active {
    border: 2px solid var(--color-primary);
    border-radius: 4px;
}

/* 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: 150px;
    margin-bottom: 0.5em;
    overflow: hidden;
    border-radius: 4px;
    position: relative;
}

.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: 150px;
    margin-bottom: 0.5em;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
}

/* 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);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

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

/* Message d'info pour l'utilisateur (optionnel) */
#variation-thumbnails[data-is-custom-wall="true"]::before {
    content: "Select wood color (click to choose):";
    display: block;
    font-size: 0.9em;
    color: var(--color-gray-medium);
    margin-bottom: 0.5em;
    font-style: italic;
}

/* ================================================================
   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; /* Limite pour les grands écrans */
    /* gap: 1em; */
    gap: 0;
    display: none; /* Caché par défaut */
    margin: 0 auto;
}

/* 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: 4px;
    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; 
}

/* ... (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') */
    }

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

    .main-navigation.is-open ul{
        display: flex;
        flex-direction: column;
    }
}

/* Ceci est le style de base qui doit être présent DANS TON CSS, en dehors de toute media query */
.line {
    /* 💡 Le display:block est crucial pour que width et height fonctionnent */
    display: block; 
    
    /* 💡 Définition de la taille */
    width: 25px;
    height: 3px; 
    
    /* 💡 Définition de la couleur */
    background: black; /* J'utilise ici du blanc. Si ton header est blanc, mets une autre couleur (ex: #333) */
    
    /* Espace entre les lignes */
    margin: 5px 0; 
    
    /* Préparation pour l'animation */
    transition: all 0.3s ease;
}

/* ================================================================
   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);
    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);
    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;
    display: block;
}

/* 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: 400px;
}

/* 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: 250px;
}

/* 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: 250px; /* 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: center;
    gap: 0em;
    width: 100%;
}

/* Wrapper interne avec sticky */
.sticky-product-wrapper {
    position: sticky;
    top: 20px; /* Distance par rapport au haut de la fenêtre */
    z-index: 10;
    width: 100%;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    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) {
    .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: 150px;
}

/* 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-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: 75px;
}

/* 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: 75px;
}

/* 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: 37.5px;
}

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

/* 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: 37.5px;
}

/* 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: 75px;
}

.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;
}

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

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

/* Grille 3 tiles (33% + 33% + 33%) */
.tiles-variations-display.tiles-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

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

/* Grille 5 tiles (20% chacune) */
.tiles-variations-display.tiles-grid-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

/* Item individuel tile */
.tile-mini-item {
    height: 100px;
    width: 100px;
    overflow: hidden;
    position: relative;
    background: white;
}

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

/* Bouton de suppression */
.tile-mini-remove-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.9);
    color: #000;
    border: none;
    font-size: 20px;
    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;
}

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

.tile-mini-remove-btn:hover {
    background: rgba(255, 0, 0, 0.9);
    color: white;
    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) {
    .tiles-variations-display {
        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(auto-fill, minmax(250px, 1fr));
    gap: 2em;
    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);
}

.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 {
    padding: 2em;
}

/* Wrapper principal */
.lab-carousel-wrapper {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 60px; /* Espace pour les flèches */
}

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

/* Track (contient tous les articles) */
.lab-carousel-track {
    display: flex;
    gap: 2em;
    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: 16 / 9;
    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 0.5em;
}

.lab-article-title {
    font-size: 1.5em;
    margin-bottom: 0.5em;
    font-weight: normal;
    text-transform: uppercase;
    line-height: 1.2;
}

.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);
}

/* Flèches de navigation */
.lab-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: white;
    border: 2px solid var(--color-primary);
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lab-carousel-arrow:hover:not(:disabled) {
    background: var(--color-primary);
    color: white;
    transform: translateY(-50%) scale(1.1);
}

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

.lab-carousel-arrow-prev {
    left: 0;
}

.lab-carousel-arrow-next {
    right: 0;
}

.lab-carousel-arrow svg {
    width: 24px;
    height: 24px;
}

/* 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);
}

/* ================================================================
   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;
    }
}

@media (max-width: 768px) {
    .lab-archive-page {
        padding: 1em;
    }
    
    .lab-carousel-item {
        flex: 0 0 calc(70% - 1em);
        min-width: 250px;
    }
    
    .lab-carousel-wrapper {
        padding: 0 45px;
    }
}

@media (max-width: 480px) {
    .lab-carousel-item {
        flex: 0 0 calc(85% - 0.5em);
        min-width: 200px;
    }
    
    .lab-carousel-wrapper {
        padding: 0 40px;
    }
    
    .lab-carousel-arrow {
        width: 35px;
        height: 35px;
    }
    
    .lab-carousel-arrow svg {
        width: 20px;
        height: 20px;
    }
    
    .lab-article-title {
        font-size: 1.2em;
    }
}

/* ================================================================
   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;
    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: 100svh;
    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: #BDBDBD;
    font-size: 1em;
    border-bottom: 1px solid #BDBDBD;
    border-top: 1px solid #BDBDBD;
    padding: 0.5em 0;
    margin-bottom: 1em;
}

/* 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: 1em 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: normal;
}

.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;
}

/* ================================================================
   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 400px;
    }
    
    .press-exhibitions-images {
        position: relative;
        height: 400px;
        order: 1; /* Images en premier sur mobile */
    }
    
    .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;
    }
}

@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;
}