.lag-config-modal { display:none; position:fixed; z-index:2147483647 !important; left:0; top:0; width:100vw; height:100vh; background:rgba(46, 37, 32, 0.85); align-items:center; justify-content:center; touch-action:none; overscroll-behavior:none; }
.lag-modal-content { background:var(--color-base, #F2E7DF); width:95%; max-width:1000px; max-height:95vh; border-radius:12px; display:flex; flex-direction:column; overflow:hidden; position:relative; box-shadow:0 15px 40px rgba(46, 37, 32, 0.3); }
.lag-modal-canvas-area { flex:none; background:var(--color-base, #F2E7DF); position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; touch-action:none; min-height:40vh; max-height:60vh; }
.lag-modal-header { padding:15px 20px; background:var(--color-base, #F2E7DF); border-bottom:1px solid var(--color-secondary, #7C8973); display:flex; justify-content:space-between; align-items:center; }
.lag-modal-header h2 { margin:0; font-size:18px; color:var(--color-text, #2E2520); }
.lag-close { cursor:pointer; font-size:24px; color:var(--color-secondary, #7C8973); font-weight:bold; }
.lag-close:hover { color:var(--color-accent, #B85B3F); }
.lag-modal-body { padding:20px; overflow-y:auto; flex:1; }
.lag-modal-footer { padding:15px; background:var(--color-base, #F2E7DF); border-top:1px solid var(--color-secondary, #7C8973); text-align:center; }
#lag-validate-config { background:var(--color-accent, #B85B3F); color:var(--color-base, #F2E7DF); padding:12px 25px; border:none; border-radius:30px; font-size:16px; font-weight:bold; cursor:pointer; display:inline-flex; align-items:center; gap:10px; transition:all 0.3s ease; }
#lag-validate-config:hover { background:var(--color-accent-hover, #9E4A32); transform:translateY(-2px); box-shadow:0 5px 15px rgba(184, 91, 63, 0.3); }
.lag-client-field { margin-bottom:20px; background:var(--color-base, #F2E7DF); padding:15px; border-radius:8px; border:1px solid var(--color-secondary, #7C8973); box-shadow:0 2px 5px rgba(46, 37, 32, 0.02); }
.lag-client-field label { display:block; margin-bottom:8px; font-weight:bold; color:var(--color-text, #2E2520); }
.lag-input-field, .lag-font-select-field { width:100%; padding:10px; border:1px solid var(--color-secondary, #7C8973); border-radius:6px; box-sizing:border-box; font-size:14px; background: #ffffff !important; }
.lag-input-field:focus { border-color:var(--color-accent, #B85B3F); outline:none; box-shadow:0 0 0 2px rgba(184, 91, 63, 0.2); }
.lag-text-toolbar { display:flex; gap:5px; margin-top:10px; }
.lag-text-style-btn, .lag-text-align-btn { padding:5px 10px; border:1px solid var(--color-secondary, #7C8973); background:var(--color-base, #F2E7DF); cursor:pointer; border-radius:4px; font-weight:bold; font-size:14px; }
.lag-text-style-btn:hover, .lag-text-align-btn:hover { background:rgba(124, 137, 115, 0.1); }

.lag-mobile-toolbar { display:none !important; }
@media (max-width: 1024px) {
    .lag-mobile-toolbar { display:flex !important; }
}

.lag-client-blue-zone { position:absolute; border:2px dashed var(--color-accent, #B85B3F); box-sizing:border-box; pointer-events:none; }
.lag-client-moveable { position:absolute; cursor:move; border:1px dashed rgba(184, 91, 63, 0.5); box-sizing:border-box; display:flex; align-items:center; justify-content:center; transform-origin:center center; touch-action:none; }
.lag-client-moveable:hover { border:1px solid var(--color-accent, #B85B3F) !important; }
.lag-handle-track { position:absolute; display:none; }
.lag-h-scale { right:-6px; bottom:-6px; cursor:se-resize; }

@media (max-width: 1024px) {
    .lag-modal-content { flex-direction: column !important; }
    .lag-modal-settings-area { min-width: 100% !important; border-left: none !important; border-top: 1px solid var(--color-secondary, #7C8973); padding: 15px !important; gap: 10px !important; }
    .lag-client-field, .lag-inspector-field { padding: 10px !important; margin-bottom: 10px !important; }
    .lag-desktop-add-btn { display:none !important; }
    .lag-options-header { display:none !important; }
    #lag-zoom-in, #lag-zoom-out { display: none !important; }
    .lag-h-trash { display: none !important; }
}
.lag-client-moveable.lag-text-zone { min-width: 30px !important; min-height: 30px !important; }
.lag-h-rotate { left:-6px; top:-6px; cursor:pointer; }

#lag-zoom-controls { position:absolute; bottom:20px; left:20px; display:flex; gap:10px; z-index:10; }
.lag-zoom-btn { width:40px; height:40px; border-radius:50%; background:var(--color-base, #F2E7DF); border:none; box-shadow:0 2px 10px rgba(46, 37, 32, 0.1); font-size:20px; font-weight:bold; cursor:pointer; color:var(--color-accent, #B85B3F); display:flex; align-items:center; justify-content:center; }
.lag-zoom-btn:hover { background:rgba(124, 137, 115, 0.1); transform:scale(1.05); }
#lag-zoom-wrapper { transform-origin:center center; transition:transform 0.1s ease-out; }

.lag-client-font-slider { width:100%; margin-top:10px; }

.lag-desktop-add-btn { display:none !important; }
.lag-h-trash { display: none !important; }

@media (max-width: 1024px) {
    .lag-config-modal {
        padding: 0 !important;
    }
    .lag-modal-content { 
        flex-direction: column; 
        width: 100% !important; 
        max-width: 100% !important; 
        height: 100% !important; 
        max-height: 100% !important; 
        border-radius: 0 !important; 
        margin: 0 !important;
        transform: translateY(100%);
        transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    }
    #lag-zoom-controls { display: none !important; }
    #lag-validate-config, #lag-trigger-delete-config, #lag-trigger-reset-config { padding: 10px !important; font-size: 14px !important; }
    .lag-config-modal.open .lag-modal-content {
        transform: translateY(0);
    }
    .lag-modal-canvas-area { 
        flex: none !important; 
        height: 45vh !important; 
        min-height: 250px;
        max-height: 50vh !important;
        padding: 10px !important; 
    }
    .lag-modal-settings-area { 
        max-width: 100% !important; 
        flex: 1 !important; 
        border-left: none; 
        border-top: 1px solid var(--color-secondary, #7C8973); 
        padding: 20px 15px 100px 15px !important;
    }
    .lag-modal-body { 
        padding: 15px; 
    }
    .lag-modal-footer {
        padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important;
    }
    #lag-zoom-controls { bottom:10px; left:10px; }
    .lag-zoom-btn { width:35px; height:35px; font-size:18px; }
    .lag-input-field, .lag-client-font-slider { min-height: 44px; }
}
.lag-ui-cards { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 5px; }
.lag-ui-cards-col { flex-direction: column; gap: 8px; }
.lag-ui-card { display: flex; align-items: center; justify-content: center; padding: 10px 16px; border: 2px solid var(--color-secondary, #7C8973); border-radius: 8px; background: var(--color-base, #F2E7DF); cursor: pointer; transition: all 0.2s ease; position: relative; overflow: hidden; }
.lag-ui-card:hover { border-color: var(--color-text, #2E2520); background: rgba(124, 137, 115, 0.05); }
.lag-ui-card.active { border-color: var(--color-accent, #B85B3F); background: rgba(184, 91, 63, 0.05); }
.lag-ui-card.active .lag-ui-label { color: var(--color-accent, #B85B3F); font-weight: 600; }
.lag-ui-radio, .lag-ui-checkbox { display: none; }
.lag-ui-label { font-size: 14px; color: var(--color-text, #2E2520); text-align: center; display: flex; flex-direction: column; gap: 4px; }
.lag-price-badge { font-size: 11px; background: var(--color-accent, #B85B3F); color: var(--color-base, #F2E7DF); padding: 2px 6px; border-radius: 10px; font-weight: bold; align-self: center; }
.lag-ui-card-img { flex-direction: column; padding: 12px; min-width: 80px; }
.lag-ui-img { max-width: 60px; max-height: 60px; object-fit: contain; margin-bottom: 8px; transition: transform 0.2s; }
.lag-ui-card.active .lag-ui-img { transform: scale(1.05); }
.lag-ui-card-check { justify-content: flex-start; padding-left: 12px; }
.lag-ui-check-icon { width: 18px; height: 18px; border: 2px solid var(--color-secondary, #7C8973); border-radius: 4px; margin-right: 12px; display: inline-flex; align-items: center; justify-content: center; transition: all 0.2s; }
.lag-ui-card.active .lag-ui-check-icon { background: var(--color-accent, #B85B3F); border-color: var(--color-accent, #B85B3F); }
.lag-ui-card.active .lag-ui-check-icon::after { content: '✓'; color: var(--color-base, #F2E7DF); font-size: 12px; font-weight: bold; }
@media (max-width: 768px) {
    .lag-ui-cards { gap: 8px; }
    .lag-ui-card { padding: 8px 12px; width: 100%; box-sizing: border-box; justify-content: flex-start; }
    .lag-ui-card-img { width: calc(50% - 4px); justify-content: center; }
}

/* ==========================================
   MATIERES DE GRAVURE LASER
========================================== */

/* 1. BOIS (Brûlure marron, Multiply) */
#lag-live-canvas[data-material="bois"] .lag-client-moveable div[id^="lag-preview-text-"] {
    color: rgba(45, 25, 10, 0.9) !important;
    mix-blend-mode: multiply;
    filter: url(#lag-noise-bois) blur(0.2px);
    text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.8), 0px 1px 1px rgba(255, 255, 255, 0.3);
}
/* Polices creuses (outline) : NE PAS forcer la couleur, garder transparent */
#lag-live-canvas[data-material="bois"] .lag-client-moveable div[id^="lag-preview-text-"][data-outline="1"] {
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    -webkit-text-stroke: 1px rgba(45, 25, 10, 0.9) !important;
}
#lag-live-canvas[data-material="bois"] .lag-client-moveable img[id^="lag-preview-icon-"] {
    mix-blend-mode: multiply;
    opacity: 0.9;
    filter: url(#lag-noise-bois) sepia(1) hue-rotate(340deg) saturate(3) brightness(0.2) drop-shadow(0px -1px 1px rgba(0,0,0,0.8)) drop-shadow(0px 1px 1px rgba(255,255,255,0.3));
}

/* 2. LIEGE (Brûlure diffusée) */
#lag-live-canvas[data-material="liege"] .lag-client-moveable div[id^="lag-preview-text-"] {
    color: rgba(20, 10, 5, 0.98) !important;
    mix-blend-mode: color-burn;
    filter: url(#lag-noise-liege) blur(0.3px);
    text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.7);
}
#lag-live-canvas[data-material="liege"] .lag-client-moveable div[id^="lag-preview-text-"][data-outline="1"] {
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    -webkit-text-stroke: 1px rgba(20, 10, 5, 0.98) !important;
}
#lag-live-canvas[data-material="liege"] .lag-client-moveable img[id^="lag-preview-icon-"] {
    mix-blend-mode: color-burn;
    opacity: 0.98;
    filter: url(#lag-noise-liege) blur(0.3px) sepia(1) hue-rotate(340deg) saturate(2) brightness(0.15) drop-shadow(0px -1px 1px rgba(0,0,0,0.7));
}

/* 3. CUIR (Noir profond, Embossage) */
#lag-live-canvas[data-material="cuir"] .lag-client-moveable div[id^="lag-preview-text-"] {
    color: rgba(35, 15, 10, 0.98) !important;
    mix-blend-mode: color-burn;
    filter: drop-shadow(0 0 4px rgba(180, 100, 60, 0.35));
    text-shadow: 0px 2px 2px rgba(0,0,0,0.8);
}
#lag-live-canvas[data-material="cuir"] .lag-client-moveable div[id^="lag-preview-text-"][data-outline="1"] {
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    -webkit-text-stroke: 1px rgba(35, 15, 10, 0.98) !important;
}
#lag-live-canvas[data-material="cuir"] .lag-client-moveable img[id^="lag-preview-icon-"] {
    mix-blend-mode: color-burn;
    opacity: 0.98;
    filter: drop-shadow(0 0 4px rgba(180, 100, 60, 0.35)) drop-shadow(0px 2px 2px rgba(0,0,0,0.8));
}

/* 4. VERRE (Blanc givré, Screen) */
#lag-live-canvas[data-material="verre"] .lag-client-moveable div[id^="lag-preview-text-"] {
    color: rgba(245, 245, 255, 0.85) !important;
    mix-blend-mode: screen;
    filter: url(#lag-noise-verre);
    text-shadow: 0px 0px 2px rgba(255, 255, 255, 0.8), 0px 1px 1px rgba(0, 0, 0, 0.15);
}
#lag-live-canvas[data-material="verre"] .lag-client-moveable div[id^="lag-preview-text-"][data-outline="1"] {
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    -webkit-text-stroke: 1px rgba(245, 245, 255, 0.85) !important;
}
#lag-live-canvas[data-material="verre"] .lag-client-moveable img[id^="lag-preview-icon-"] {
    mix-blend-mode: screen;
    opacity: 0.85;
    filter: url(#lag-noise-verre) invert(1) drop-shadow(0px 0px 2px rgba(255, 255, 255, 0.8)) drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.15));
}
/* ==========================================================================
   CORRECTION GLOBALE : TEXTE DES BOUTONS
   Assure que le texte des boutons (y compris Elementor et WooCommerce)
   ne prenne pas la couleur bleue des liens par défaut.
   ========================================================================== */
button,
button span,
input[type="submit"],
input[type="button"],
a.button,
a.button span,
.button,
.button span,
.elementor-button,
.elementor-button span,
.elementor-button-text,
.elementor-button-link,
.woocommerce a.button,
.woocommerce a.button span,
.woocommerce button.button,
.woocommerce button.button span,
.woocommerce input.button {
    color: #ffffff !important;
}

button:hover,
button:hover span,
input[type="submit"]:hover,
input[type="button"]:hover,
a.button:hover,
a.button:hover span,
.button:hover,
.button:hover span,
.elementor-button:hover,
.elementor-button:hover span,
.elementor-button-text:hover,
.elementor-button-link:hover,
.woocommerce a.button:hover,
.woocommerce a.button:hover span,
.woocommerce button.button:hover,
.woocommerce button.button:hover span,
.woocommerce input.button:hover {
    color: #ffffff !important;
}