html, body {
    max-width: 100%;
    overflow-x: hidden;
    position: relative;
}

/* ==========================================================================
   1. FONTES & IDENTITÉ VISUELLE
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,700;1,400&family=Montserrat:wght@200;400;700;800&display=swap");

:root {
    --gold: #78350f;
    --bg-light: #f3f3f2;
    --white-glass: rgba(255, 255, 255, 0.85);
}

body {
    font-family: "Montserrat", sans-serif;
    background-color: var(--bg-light);
    color: #1c1917;
    margin: 0;
    scroll-behavior: smooth;
}

h1, h2, h3, .font-serif { font-family: "Cormorant Garamond", serif; }

/* ==========================================================================
   2. NAVIGATION & LOGO
   ========================================================================== */
nav a[href="index.html"], .text-xl.md\:text-3xl.font-bold {
    font-family: "Montserrat", sans-serif !important;
    font-weight: 800 !important;
    font-size: 26px !important;       
    letter-spacing: 0.3em !important; 
    color: #000 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
}

.nav-link-btn, .mobile-nav-link, nav a {
    font-family: "Montserrat", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    color: #1c1917;
    text-decoration: none !important;
    position: relative;
    padding: 10px 15px;
    transition: color 0.3s ease;
}

.nav-link-btn::after, nav a:not([href="index.html"]):not(button)::after {
    content: "";
    position: absolute;
    bottom: 5px; left: 10px; right: 10px; height: 2px;
    background-color: var(--gold);
    transform: scaleX(0);
    transition: transform 0.3s ease;
    transform-origin: center;
}

.nav-link-btn:hover::after, .nav-active::after { transform: scaleX(1); }
.nav-active { color: var(--gold) !important; }

/* ==========================================================================
   FIX NAVIGATION BUREAU (PC) - RÉPARATION AFFICHAGE
   ========================================================================== */
@media (min-width: 1024px) {
    #nav-bg {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: fixed !important; /* Fixé en haut */
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100px !important;
        background-color: white !important;
        z-index: 5000 !important;
        /* Force le menu à redescendre s'il est bloqué en haut */
        transform: translateY(0) !important; 
    }

    /* Force l'affichage du conteneur de liens PC */
    #nav-bg .hidden.lg\:flex {
        display: flex !important;
    }

    /* On s'assure que les liens ne sont pas blancs sur blanc */
    .nav-link-btn {
        color: #1c1917 !important;
        opacity: 1 !important;
        display: inline-block !important;
    }
}

/* Sécurité Modale : empêche la modale de bloquer les clics sur le menu quand elle est fermée */
#product-modal.hidden {
    pointer-events: none !important;
    z-index: -1 !important;
}
/* ==========================================================================
   3. BOUTONS SPÉCIAUX (Panier & Contact)
   ========================================================================== */
nav button[onclick*="panier"], #mobile-menu button {
    background-color: #000 !important;
    border: 2px solid var(--gold) !important;
    border-radius: 9999px !important;
    color: #fff !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 10px 25px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: inline-flex !important;
    align-items: center;
}

nav button[onclick*="panier"]:hover { background-color: var(--gold) !important; transform: scale(1.05); }

/* ==========================================================================
   4. GRILLE PRODUITS UNIFIÉE (CORRIGÉE MOBILE)
   ========================================================================== */

/* Sur mobile (par défaut) : 1 seule colonne pour éviter le débordement */
.product-grid-container, 
#new-arrivals, 
#product-grid {
    display: grid !important;
    grid-template-columns: 1fr !important; /* UNE seule colonne sur mobile */
    gap: 3rem 1rem !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 40px 20px !important; /* Padding réduit pour mobile */
}

/* Sur tablettes (à partir de 640px) : on passe à 2 colonnes */
@media (min-width: 640px) {
    .product-grid-container, #new-arrivals, #product-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 4rem 2rem !important;
    }
}

/* Sur ordinateur (à partir de 1024px) : on passe à 4 colonnes */
@media (min-width: 1024px) {
    .product-grid-container, #new-arrivals, #product-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        padding: 60px 20px !important;
    }
}

/* LE BLOC PRODUIT (On garde tes styles de prestige) */
.group {
    background: #ffffff !important;
    border-radius: 4px;
    transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    position: relative;
    padding-bottom: 20px;
}

.group:hover {
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-10px) !important;
}

/* ZONE IMAGE : Brider la taille pour éviter l'effet géant */
.group .aspect-\[4\/5\], 
.group .aspect-square {
    position: relative;
    overflow: hidden;
    background: #fff;
    width: 100% !important;
}

.group img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 1.2s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.group:hover img {
    transform: scale(1.08) !important;
}

/* LES ANGLES XL BLANCS AU SURVOL */
.group .aspect-\[4\/5\]::before, .group .aspect-\[4\/5\]::after,
.group .aspect-square::before, .group .aspect-square::after {
    content: "";
    position: absolute;
    z-index: 20;
    transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
    opacity: 0;
    pointer-events: none;
    width: 0; height: 0;
}

.group .aspect-\[4\/5\]::before, .group .aspect-square::before {
    top: 15px; left: 15px;
    border-top: 1px solid #ffffff; border-left: 1px solid #ffffff;
}

.group .aspect-\[4\/5\]::after, .group .aspect-square::after {
    bottom: 15px; right: 15px;
    border-bottom: 1px solid #ffffff; border-right: 1px solid #ffffff;
}

.group:hover .aspect-\[4\/5\]::before, .group:hover .aspect-\[4\/5\]::after,
.group:hover .aspect-square::before, .group:hover .aspect-square::after {
    width: 90px; height: 90px;
    opacity: 1;
}

/* TITRES PRODUITS : UNIFICATION H2 & H3 (Look "Art du Détail") */
.group h2, .group h3 {
    font-family: "Montserrat", sans-serif !important;
    font-size: 18px !important; 
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.25em !important;
    margin-top: 25px !important;
    margin-bottom: 10px !important;
    color: #1c1917 !important;
    position: relative !important;
    display: inline-block !important;
    line-height: 1.4 !important;
}

/* LE TRAIT DORÉ SIGNATURE */
.group h2::after, .group h3::after {
    content: "" !important;
    position: absolute !important;
    bottom: -8px !important;
    left: 50% !important;
    width: 0 !important;
    height: 1.5px !important;
    background-color: var(--gold) !important;
    transition: width 0.6s ease !important;
    transform: translateX(-50%) !important;
}

.group:hover h2::after, .group:hover h3::after {
    width: 120px !important;
}

/* LE PRIX */
.group p {
    font-size: 15px !important;
    font-weight: 400 !important;
    color: var(--gold) !important;
    letter-spacing: 0.1em;
    margin-top: 8px !important;
}

/* GRANDS TITRES DE SECTIONS (Ex: L'Art du Détail) */
.section-title-large {
    font-family: "Cormorant Garamond", serif !important;
    font-size: 3.5rem !important;
    font-weight: 300 !important;
    font-style: italic;
    letter-spacing: 0.05em;
    color: #1c1917;
    margin-bottom: 3rem;
    text-align: center;
}

@media (max-width: 768px) {
    .section-title-large { font-size: 2.5rem !important; }
}

/* LE BLOC PRODUIT (Cadre & Lévitation) */
.group {
    background: #ffffff !important;
    border-radius: 4px;
    /* AJOUT : Bordure fine et élégante */
    border: 1px solid rgba(0, 0, 0, 0.08) !important; 
    padding: 15px !important; /* Espace intérieur pour que le contenu ne touche pas le cadre */
    transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.group:hover {
    /* AJOUT : La bordure devient un peu plus présente au survol */
    border-color: rgba(120, 53, 15, 0.3) !important; 
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-10px) !important;
}

/* Texture pour le bandeau noir */
.bg-stone-950 {
    background-image: radial-gradient(circle at center, rgba(120, 53, 15, 0.05) 0%, transparent 70%) !important;
}
/* ==========================================================================
   5. CATÉGORIES (BOÎTE BLANCHE & TRAIT MAJESTUEUX)
   ========================================================================== */

/* Le bloc blanc de la catégorie (Bagues, Colliers, etc.) */
#expertises .group, 
#expertises.bg-stone-100 .group {
    background: #ffffff !important; 
    padding: 15px !important; 
    border-radius: 4px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    z-index: 1;
    cursor: pointer;
}

#expertises .group:hover,
#expertises.bg-stone-100 .group:hover {
    /* Ombre de survol très profonde et plus sombre */
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3) !important;
    transform: translateY(-15px) scale(1.01) !important;
}

/* IMAGE : On garde la netteté et un zoom très léger */
#expertises .group .aspect-square {
    overflow: hidden !important;
    width: 100% !important;
}

#expertises .group img {
    transition: transform 1.2s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

#expertises .group:hover img {
    transform: scale(1.05) !important;
}

/* LE TITRE (Le span "Bagues", "Gravure", etc.) */
#expertises .group span {
    font-family: "Montserrat", sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3em !important; /* Plus aéré pour le luxe */
    margin-top: 20px !important;
    position: relative !important;
    display: inline-block !important; /* Indispensable pour centrer le trait */
    color: #1c1917 !important;
    z-index: 10 !important;
}

/* Cas particulier : Services en bas de page (Gravure, 3D...) */
#expertises.bg-stone-100 .group span {
    font-family: "Cormorant Garamond", serif !important;
    font-size: 1.6rem !important;
    font-style: italic !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* LE TRAIT DORÉ MAJESTUEUX (Signature) */
#expertises .group span::after {
    content: "" !important;
    position: absolute !important;
    bottom: -6px !important; /* Très proche du texte */
    left: 50% !important;
    width: 0 !important;
    height: 1.5px !important;
    background-color: #78350f !important; /* Or Look-Do */
    transition: width 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    transform: translateX(-50%) !important;
    display: block !important;
}

/* Déploiement beaucoup plus long au survol (140px) */
#expertises .group:hover span::after {
    width: 140px !important;
}

/* On s'assure qu'aucun angle blanc ne s'affiche ici */
#expertises .group .aspect-square::before,
#expertises .group .aspect-square::after {
    display: none !important;
}
/* ==========================================================================
   6. MODALE PRODUIT : PC & MOBILE FINAL
   ========================================================================== */

/* --- CONFIGURATION GLOBALE --- */
#product-modal.flex {
    display: flex !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    background-color: rgba(0, 0, 0, 0.9) !important;
    backdrop-filter: blur(10px);
    align-items: center !important; 
    justify-content: center !important;
}

#product-modal > div {
    width: 95% !important;
    max-width: 1200px !important;
    height: 85vh !important;
    background: #ffffff !important;
    border-radius: 4px !important;
    display: flex !important;
    flex-direction: row !important;
    overflow: hidden !important;
}

/* --- VERSION PC (DÉJÀ VALIDÉE) --- */
#product-modal .md\:w-2\/3 {
    width: 60% !important;
    background-color: #f9f8f7 !important;
    flex: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
}

#product-modal .btn-retour-supports {
    position: absolute !important;
    top: 25px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 60 !important;
    background: white !important;
    padding: 8px 20px !important;
    border-radius: 99px !important;
    font-size: 12px !important;
    border: 1px solid #d1d5db !important;
}

#product-modal img#modal-main-img {
    width: auto !important;
    height: auto !important;
    max-width: 80% !important;
    max-height: 55vh !important;
    object-fit: contain !important;
}

#product-modal #modal-thumbnails {
    position: absolute !important;
    bottom: 25px !important;
    display: flex !important;
    gap: 12px !important;
    z-index: 50 !important;
}

#product-modal .modal-thumbnail {
    width: 60px !important;
    height: 75px !important;
    min-width: 60px !important;
    max-width: 60px !important;
    object-fit: cover !important;
    border: 2px solid white !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    flex: none !important;
}

#product-modal .md\:w-1\/3 {
    width: 40% !important;
    padding: 40px 35px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    background: white !important;
}

/* --- VERSION MOBILE (CORRECTIF RADICAL) --- */
@media (max-width: 768px) {
    #product-modal > div {
        flex-direction: column !important; /* On empile les éléments */
        height: 100vh !important;       /* On prend toute la hauteur */
        width: 100% !important;        /* On prend toute la largeur */
        max-height: 100vh !important;
        border-radius: 0 !important;
        overflow-y: auto !important;   /* On permet le scroll sur TOUTE la modale */
    }

    /* La zone image en haut */
    #product-modal .md\:w-2\/3 {
        width: 100% !important;
        height: auto !important;
        min-height: 400px !important;
        padding: 40px 20px !important;
        position: relative !important;
    }

    /* On repositionne le bouton retour sur mobile pour qu'il ne cache pas l'image */
    #product-modal .btn-retour-supports {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        margin-bottom: 20px !important;
        display: inline-block !important;
    }

    #product-modal img#modal-main-img {
        max-height: 300px !important;
        max-width: 100% !important;
    }

    /* Les vignettes défilent horizontalement sur mobile */
    #product-modal #modal-thumbnails {
        position: relative !important;
        bottom: 0 !important;
        margin-top: 20px !important;
        overflow-x: auto !important;
        width: 100% !important;
        justify-content: flex-start !important;
        padding-bottom: 10px !important;
    }

    /* La zone texte en bas */
    #product-modal .md\:w-1\/3 {
        width: 100% !important;
        overflow-y: visible !important; /* On désactive le scroll interne car c'est le parent qui scrolle */
        padding: 30px 20px 80px 20px !important; /* Plus de place en bas pour le bouton */
    }

    #modal-add-btn {
        width: 100% !important; /* Bouton pleine largeur sur mobile */
        position: sticky !important;
        bottom: 20px !important;
        box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    }
}

/* ==========================================================================
   GALERIE DYNAMIQUE (VIGNETTES & VIDÉO)
   ========================================================================== */

/* Conteneur des miniatures sous l'image principale */
#modal-thumbnails {
    display: flex !important;
    gap: 12px !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 15px 0 !important;
    overflow-x: auto;
}

/* Style de chaque vignette */
.modal-thumbnail {
    width: 60px !important;
    height: 75px !important; /* Ratio 4/5 luxe */
    object-fit: cover !important;
    cursor: pointer;
    border: 1px solid #d1d5db !important; /* Bordure grise standard */
    background: #fff;
    transition: all 0.3s ease;
    flex-shrink: 0;
    opacity: 0.7;
}

.modal-thumbnail:hover {
    opacity: 1;
    border-color: var(--gold) !important;
}

/* État actif (la photo affichée en grand) */
.modal-thumbnail.active {
    opacity: 1;
    border: 2px solid var(--gold) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Gestion de l'affichage Vidéo vs Image */
#modal-main-video {
    width: 100% !important;
    height: 100% !important;
    max-height: 55vh !important;
    object-fit: contain !important;
}

/* Masquage automatique par classe hidden de Tailwind */
.hidden {
    display: none !important;
}

/* ... (le reste reste identique) ... */
/* ==========================================================================
    7. INTERFACE DE PERSONNALISATION (UNIFIÉE & FINALISÉE)
   ========================================================================== */

/* --- LE SÉLECTEUR DE POLICES (FORÇAGE DU GRAS) --- */
#input-typo, 
#font-selector {
    font-weight: 800 !important; /* Gras maximum pour le titre sélectionné */
    font-family: 'Montserrat', sans-serif !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #1c1917 !important;
    border: 1px solid #d1d5db !important;
    padding: 10px !important;
}

/* Forçage du gras pour les options dans la liste (Dancing Script, etc.) */
#input-typo option, 
#font-selector option {
    font-weight: 800 !important;
    color: #000 !important;
    background-color: #fff !important;
    padding: 12px !important;
}

/* --- ZONE DE PRÉVISUALISATION --- */
#live-preview-container {
    width: 100% !important; 
    min-height: 180px !important; 
    border: 1px solid #d1d5db !important; 
    margin-bottom: 20px !important;
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important;
    position: relative !important;
    overflow: hidden !important; 
    background-color: #f9f8f7;
    z-index: 1;
}

/* --- RENDUS DES MATIÈRES --- */
.metal-argent { background: linear-gradient(135deg, #d1d5db 0%, #f3f4f6 45%, #ffffff 50%, #f3f4f6 55%, #9ca3af 100%) !important; }
.metal-or-jaune { background: linear-gradient(135deg, #b45309 0%, #fbbf24 45%, #fef3c7 50%, #fbbf24 55%, #78350f 100%) !important; }
.metal-or-rose { background: linear-gradient(135deg, #a36d5d 0%, #d9a391 45%, #f3e1dc 50%, #d9a391 55%, #8c4f41 100%) !important; }
.matiere-bois { background: repeating-linear-gradient(90deg, transparent 0, transparent 4px, rgba(0,0,0,0.02) 4px, rgba(0,0,0,0.02) 7px), linear-gradient(135deg, #e5c9a5 0%, #d4b483 45%, #f5e6d3 50%, #d4b483 55%, #b58d5a 100%) !important; }
.metal-pmma { background: rgba(255, 255, 255, 0.3) !important; backdrop-filter: blur(8px) !important; border: 1px solid rgba(255, 255, 255, 0.5) !important; }

/* --- LES PASTILLES (Matières & Couleurs 3D) --- */
.matiere-btn, .color-dot {
    width: 32px !important; height: 32px !important;
    border-radius: 50% !important; border: 2px solid #ffffff !important;
    box-shadow: 0 0 0 1px #d1d5db;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: inline-block; margin: 0 8px;
}

.matiere-btn.active, .color-dot.active {
    box-shadow: 0 0 0 2px #78350f !important;
    transform: scale(1.2) !important;
}

/* --- EFFET DE REFLET ANIMÉ --- */
#live-preview-container::after {
    content: ""; position: absolute; top: -100%; left: -150%;
    width: 80%; height: 300%;
    background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
    transform: rotate(45deg); 
    animation: sweepMetalScroll 6s ease-in-out infinite alternate !important;
    pointer-events: none; z-index: 10;
}

@keyframes sweepMetalScroll {
    0% { left: -150%; }
    100% { left: 150%; }
}
/* ==========================================================================
   8. BOUTONS & INTERACTIONS (Retour / Ajouter)
   ========================================================================== */

/* LE BOUTON AJOUTER : Ne touchera plus jamais le bas */
#modal-add-btn {
    background-color: #000;
    color: #fff;
    padding: 14px 40px;
    border-radius: 9999px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    margin-top: 40px !important; /* Espace avec ce qu'il y a au-dessus */
    margin-bottom: 20px !important; /* Sécurité supplémentaire */
    transition: all 0.3s ease;
}

#modal-add-btn:hover { background-color: var(--gold); }

/* BOUTON RETOUR : ALIGNEMENT NATUREL ET FLUIDE */
.btn-retour-supports {
    display: flex !important;
    flex-direction: row !important;      /* Force l'alignement horizontal */
    align-items: center !important;      /* Aligne VERTICALEMENT le cercle et le texte */
    justify-content: center !important;  /* Centre l'ENSEMBLE horizontalement */
    gap: 12px !important;                /* Espace fixe entre les deux */
    
    width: 100% !important;
    white-space: nowrap !important;      /* Interdiction de couper le texte */
    background: transparent !important;
    border: none !important;
    padding: 15px 0 !important;
    cursor: pointer !important;
}

/* LE CONTENEUR : Il occupe toute la largeur et centre son contenu */
.btn-retour-container {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important; /* Centre le bouton horizontalement */
    align-items: center !important;    /* Centre le bouton verticalement */
    padding: 15px 0 !important;
}

/* LE CONTENEUR (DIV) */
.btn-retour-container {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    padding: 15px 0 !important;
}

/* LE BOUTON (BUTTON) */
.btn-retour-supports {
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
}

/* LE WRAPPER (LA SOUDURE FLEX) */
.btn-content-wrapper {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;      /* CENTRE VERTICALEMENT LA FLÈCHE ET LE TEXTE */
    justify-content: center !important;
    gap: 12px !important;
    white-space: nowrap !important;      /* INTERDIT LE PASSAGE À LA LIGNE */
}

/* LE CERCLE (SPAN) */
.btn-content-wrapper span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border: 2px solid var(--gold) !important;
    border-radius: 50% !important;
    background: #fff !important;
    color: var(--gold) !important;
    font-size: 16px !important;
    font-weight: bold !important;
}

/* LE TEXTE (P) */
.btn-content-wrapper p {
    margin: 0 !important;
    padding: 0 !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--gold) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
}
/* L'ANIMATION : Le mouvement de va-et-vient */
@keyframes arrowSlide {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-6px); } /* La flèche "pousse" vers la gauche */
}

/* L'APPLICATION : On l'active sur le span du bouton retour */
.btn-retour-supports span {
    animation: arrowSlide 1.5s ease-in-out infinite !important;
    display: inline-flex !important; /* Indispensable pour que le transform fonctionne */
}
/* ==========================================================================
   9. ATELIER 3D : SYSTÈME CHROMATIQUE
   ========================================================================== */

/* Encadrement identique aux blocs Gravure */
#opt-3d {
    background: #ffffff;
    padding: 20px;
    border: 1px solid #d1d5db !important; /* Bordure grise standard Look-Do */
    border-radius: 0;
}

/* Pastilles de l'étoile chromatique */
.color-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #ffffff; 
    box-shadow: 0 0 0 1px #d1d5db; 
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* On garde le scale 1.2 au survol pour l'appel à l'action */
.color-dot:hover {
    transform: scale(1.2);
    box-shadow: 0 0 0 1px #78350f; /* Le contour gris devient légèrement doré au survol */
}

/* État Actif : L'anneau doré Look-Do s'affirme */
.color-dot.active {
    box-shadow: 0 0 0 2px #78350f !important; 
    transform: scale(1.2) !important; /* On maintient la taille du hover pour confirmer le choix */
    z-index: 10; /* Pour passer au-dessus des autres si elles se touchent */
}

/* On s'assure que les titres de section 3D match le style Montserrat UI */
#opt-3d .section-title {
    font-family: "Montserrat", sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #1c1917;
}
/* Force l'affichage quand le JS retire la classe hidden */
#opt-3d:not(.hidden) {
    display: block !important;
}

/* ==========================================================================
   10. ATELIER SUBLIMATION : UPLOAD & PREVIEW
   ========================================================================== */

/* Encadrement principal identique aux autres ateliers */
#opt-sublimation {
    background: #ffffff;
    padding: 20px;
    border: 1px solid #d1d5db !important; /* Ta bordure grise de référence */
    margin-bottom: 24px;
}

/* Zone d'input (le bouton de choix de fichier) */
.lux-input.flex {
    transition: all 0.3s ease;
    border: 1px solid #d1d5db;
    padding: 12px;
}

.lux-input.flex:hover {
    background-color: #f9f8f7;
    border-color: #78350f; /* Devient doré au survol */
}

/* Zone de prévisualisation à droite (Épurée) */
#preview-container-inner {
    position: relative;
    background-color: #f9f8f7; /* Un blanc cassé très doux, style papier luxe */
    border: 1px solid #d1d5db; /* Ta bordure de référence */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px; /* Un peu plus grand pour mieux voir */
    overflow: hidden;
    transition: all 0.3s ease;
}

/* L'image s'adapte sans déformer le cadre */
#preview-container-inner img {
    max-width: 100%;
    max-height: 160px;
    object-fit: contain; /* Respecte portrait ou paysage sans damier */
    animation: fadeInPreview 0.6s ease-out;
}

/* On enlève le damier de la version précédente s'il restait des traces */
#preview-container-inner:has(img) {
    background-image: none !important;
    background-color: #ffffff; /* Devient blanc pur quand l'image est là */
}

/* Animation douce pour l'apparition de la photo client */
@keyframes fadeInPreview {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* Style spécifique pour le textarea d'instructions */
#client-instruction {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    border: 1px solid #d1d5db;
    padding: 10px;
    width: 100%;
    transition: border-color 0.3s ease;
}

#client-instruction:focus {
    outline: none;
    border-color: #78350f;
    background-color: #fff;
}

/* ==========================================================================
   RENDU XL : OCCUPATION MAXIMALE DE L'ESPACE
   ========================================================================== */

/* Le conteneur parent avec l'effet studio */
#sublimation-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, #ffffff 0%, #f5f5f4 70%);
    display: none; 
    align-items: center;
    justify-content: center;
    z-index: 25;
    overflow: hidden; /* Coupe le reflet quand il sort du cadre */
}

/* L'image du client */
#overlay-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 15px 35px rgba(0,0,0,0.2));
}

/* L'EFFET LUSTRANT (LE REFLET MIROIR) */
#sublimation-overlay::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    /* Le fameux reflet blanc translucide en diagonale */
    background: linear-gradient(
        45deg, 
        rgba(255,255,255,0) 0%, 
        rgba(255,255,255,0) 45%, 
        rgba(255,255,255,0.4) 50%, 
        rgba(255,255,255,0) 55%, 
        rgba(255,255,255,0) 100%
    );
    transform: rotate(0deg);
    pointer-events: none;
    z-index: 30; /* Par-dessus l'image */
}

/* L'EFFET MIROIR DYNAMIQUE (ALLER-RETOUR SANS TEMPS MORT) */
/* LE REFLET SUBLIMATION (IDENTIQUE GRAVURE) */
#sublimation-overlay::after {
    content: "";
    position: absolute;
    top: -100%;
    left: -150%;
    width: 80%; 
    height: 300%;
    background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
    transform: rotate(45deg); 
    /* Utilise la même animation pour une unité parfaite */
    animation: sweepMetalScroll 6s ease-in-out infinite alternate !important;
    pointer-events: none;
    z-index: 30;
}

/* Supprime l'ancien @keyframes shineSweep s'il existe encore */

@keyframes shineSweep {
    0% {
        /* On dépasse largement les bords pour que le ralentissement se passe "hors champ" */
        transform: translateX(-70%) translateY(-10%);
    }
    100% {
        /* Idem à droite */
        transform: translateX(70%) translateY(10%);
    }
}

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


/* Format Carré : Équilibre parfait */
.render-square { 
    width: 85% !important; 
    aspect-ratio: 1 / 1; 
}

/* On remet l'image produit nette par défaut */
#modal-main-img {
    max-height: 50vh !important;
    opacity: 1 !important; /* On remet l'opacité à fond */
    filter: blur(0) !important; /* On supprime le flou */
    transition: opacity 0.3s ease;
    z-index: 10;
}

/* On supprime aussi l'effet au survol qui ne sert plus à rien */
#main-preview-zone:hover #modal-main-img {
    opacity: 1;
    filter: blur(0);
}
/* ==========================================================================
   AGRANDISSEMENT CIBLÉ : PORTRAIT XL & PAYSAGE STANDARD
   ========================================================================== */

/* Portrait : OCCUPATION TOTALE */
/* Ajustement des formats pour que le CADRE BLANC prenne toute la zone */
.render-portrait { 
    height: 100% !important; 
    width: 100% !important; /* On force le blanc partout */
}
/* On ajuste le conteneur parent pour qu'il n'ait aucune marge interne gênante */
#main-preview-zone {
    padding: 0 !important;
}

.render-landscape { 
    width: 100% !important; 
    height: 100% !important; /* On force le blanc partout */
}


/* --- PAGE CONTACT : LUXURY REFRESH --- */

/* Titre principal élégant */
h1 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.1;
    font-weight: 300;
    color: #1c1917;
   text-wrap: balance; 
}

/* Style des labels (Petits, dorés, espacés) */
.section-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: #78350f; /* Ton doré */
    display: block;
    margin-bottom: 8px;
}

/* L'input "Look-Do" : Une ligne fine qui s'anime */
.lux-input {
    width: 100%;
    padding: 12px 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    color: #1c1917;
    background: transparent;
    border: none;
    border-bottom: 1px solid #d1d5db; /* Gris clair */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
}

.lux-input:focus {
    border-bottom: 1px solid #78350f; /* Devient doré au focus */
    padding-left: 8px; /* Petit décalage élégant */
}

/* Animation du placeholder */
.lux-input::placeholder {
    color: #a8a29e;
    font-weight: 300;
    transition: opacity 0.3s;
}

.lux-input:focus::placeholder {
    opacity: 0.3;
}

/* Le bouton d'envoi style "Atelier" */
.btn-submit {
    width: 100%;
    margin-top: 20px;
    padding: 20px;
    background: #1c1917;
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    border: 1px solid #1c1917;
    transition: all 0.5s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.btn-submit:hover {
    background: #78350f; /* Or profond */
    border-color: #78350f;
    letter-spacing: 0.4em; /* Le texte s'étire légèrement */
    box-shadow: 0 10px 20px -10px rgba(120, 53, 15, 0.5);
}

/* Select custom pour éviter le look "Windows 95" */
select.lux-input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2378350f'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 14px;
}

/* FORCE L'EMAIL SUR UNE SEULE LIGNE */
a[href^="mailto:"] {
    display: inline-block !important;
    white-space: nowrap !important;      /* Interdit le retour à la ligne */
    overflow: hidden !important;         /* Cache ce qui dépasse si vraiment trop long */
    text-overflow: ellipsis !important;  /* Ajoute "..." si l'écran est minuscule */
    max-width: 100% !important;          /* Ne dépasse pas du conteneur parent */
    
    /* Ajustement fluide de la taille sur mobile */
    font-size: clamp(14px, 4vw, 24px) !important; 
    
    transition: color 0.3s ease, border-color 0.3s ease;
}

/* Optimisation spécifique pour le bloc contact */
.space-y-10 div a.break-all {
    word-break: normal !important;       /* On annule le break-all qui forçait la coupure */
    overflow-wrap: normal !important;
}


/* Cette animation ne joue qu'une fois au moment du filtrage */
.animate-fade-in {
    animation: fadeInLight 0.3s ease-out;
}

@keyframes fadeInLight {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Style pour la catégorie sélectionnée - Effet Sombre & Intense */
.filter-active img {
    filter: brightness(0.6) contrast(1.1); /* Assombrit l'image proprement */
    border: 1px solid #78350f; /* Fine bordure dorée pour le rappel luxe */
    transition: all 0.4s ease;
}

.filter-active span {
    color: #000; /* Texte noir profond */
    font-weight: 800; /* Plus gras pour marquer la sélection */
    letter-spacing: 0.2em;
}

/* On ajoute un petit indicateur doré sous le texte */
.filter-active::after {
    content: '';
    display: block;
    width: 30px;
    height: 2px;
    background: #78350f;
    margin: 8px auto 0;
}

/* Styles pour les descriptions générées par Quill */
#modal-description h1, .product-description h1 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.8rem; /* Bien grand pour le titre 1 */
    font-weight: 700;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    color: #1c1917;
}

#modal-description h2, .product-description h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.4rem; /* Taille intermédiaire pour le titre 2 */
    font-weight: 600;
    margin-top: 1.2rem;
    margin-bottom: 0.4rem;
    color: #78350f; /* Une touche dorée pour le H2 */
}

/* On s'assure que le texte normal garde une bonne lisibilité */
#modal-description p, .product-description p {
    margin-bottom: 1rem;
    line-height: 1.6;
}

/* Styles pour les listes générées par l'éditeur (Quill) */
#modal-description ul, .product-description ul {
    list-style-type: disc;
    margin-left: 1.5rem;
    margin-bottom: 1.2rem;
    color: #44403c; /* Gris pierre foncé */
}

#modal-description ol, .product-description ol {
    list-style-type: decimal;
    margin-left: 1.5rem;
    margin-bottom: 1.2rem;
    color: #44403c;
}

#modal-description li, .product-description li {
    margin-bottom: 0.4rem;
    padding-left: 0.5rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px; /* Accordé à l'UI globale */
    line-height: 1.5;
}

/* Optionnel : Personnalisation de la puce en doré pour le luxe */
#modal-description ul li::marker {
    color: #78350f; /* Doré Look-Do */
}

/* Permet au JS de masquer les produits malgré le !important de la grille */
.product-card-container[style*="display: none"] {
    display: none !important;
}

/* CORRECTIF LOCAL : Empêche le footer de remonter dans la modale produit */
#panier, #footer-placeholder {
    clear: both !important;
    display: block !important;
    width: 100% !important;
    float: none !important;
    position: relative !important;
}

/* Force la modale à bien séparer les colonnes */
#product-modal .md\:w-1\/3 {
    float: none !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Message d'information livraison */
.shipping-notice {
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: #78350f; /* Ton doré signature */
    letter-spacing: 0.1em;
    padding: 15px;
    background: #fdfaf7;
    border: 1px dashed #78350f;
    margin-top: 15px;
    text-align: center;
    line-height: 1.5;
}

.shipping-notice a {
    text-decoration: underline;
    color: #000;
}

@keyframes prestige-pulse {
    0% { box-shadow: 0 0 5px rgba(120, 53, 15, 0.2); border-color: #78350f; }
    50% { box-shadow: 0 0 20px rgba(120, 53, 15, 0.4); border-color: #92400e; }
    100% { box-shadow: 0 0 5px rgba(120, 53, 15, 0.2); border-color: #78350f; }
}

/* Rendu Ardoise pour l'aperçu Live */
.metal-ardoise {
    background-color: #2d2d2d !important;
    background-image: linear-gradient(145deg, #2d2d2d, #1a1a1a) !important;
    border: 1px solid #4a4a4a !important;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.5) !important;
}
.metal-ardoise #live-preview-text {
    filter: drop-shadow(0px 1px 1px rgba(0,0,0,0.5));
    opacity: 0.9; /* Donne un aspect un peu plus naturel, moins "flashy" */
}

/* Effet Aluminium Brossé / Anodisé */
.metal-aluminium {
  background: linear-gradient(135deg, #e5e7eb 0%, #f3f4f6 50%, #d1d5db 100%);
  position: relative;
  border: 1px solid #9ca3af !important;
}

.metal-aluminium::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(0deg, transparent, transparent 1px, rgba(255,255,255,0.1) 1px, rgba(255,255,255,0.1) 2px);
  pointer-events: none;
  opacity: 0.5;
}
/* Animation de reflet balayant pour l'Aluminium */
.metal-aluminium {
  overflow: hidden; /* Important pour ne pas voir le reflet sortir du cadre */
}

.metal-aluminium::before {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  transition: 0.6s;
  transform: skewX(-20deg);
}

.metal-aluminium:hover::before {
  left: 150%;
}

/* Rendu Acier Brossé pour les lames de couteaux */
.metal-acier {
    background: linear-gradient(135deg, #94a3b8 0%, #cbd5e1 50%, #94a3b8 100%);
    background-size: cover;
    position: relative;
    border: 1px solid #64748b;
}


@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
    animation: fadeIn 0.4s ease-out forwards;
}

/* Petit effet de brossage métallique */
.metal-acier::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 2px,
        rgba(255, 255, 255, 0.05) 3px,
        transparent 4px
    );
    pointer-events: none;
}

/* Style universel des boutons de support actifs */
#modal-matieres-container button.text-amber-900 {
    border-color: #78350f !important; /* Ton doré prestige */
    color: #78350f !important;
    background-color: rgba(120, 53, 15, 0.05); /* Un très léger voile doré */
}