/* ==========================================================================
   CONFIGURATEUR 2D MODAL STYLING (PC & MOBILE) — L'ART GRAVÉ PRO
   Version 2.9.1 — Vectorisation pure Bézier cubique (Icônes Creux/Fin nettes),
   Rendu Haute Résolution identique au configurateur & Export SVG LightBurn
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. BOUTONS BOUTIQUE (ARCHIVE LOOP) & FICHE PRODUIT
   -------------------------------------------------------------------------- */
.lag-trigger-2d-box .lag-btn-open-configurator,
button.lag-btn-open-configurator {
    background-image: linear-gradient(135deg, #C86A4B 0%, #9E4A32 100%) !important;
    background-color: #B85B3F !important;
    color: #FFF9F5 !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    cursor: pointer !important;
    padding: 12px 18px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0.2px !important;
    border-radius: 9px !important;
    box-shadow: 0 4px 14px rgba(184, 91, 63, 0.28) !important;
    transition: all 0.2s ease !important;
    width: 100%;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    line-height: 1.3 !important;
    min-height: 0 !important;
}
.lag-trigger-2d-box .lag-btn-open-configurator:hover,
button.lag-btn-open-configurator:hover {
    background-image: linear-gradient(135deg, #D47657 0%, #AD5238 100%) !important;
    background-color: #9E4A32 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(184, 91, 63, 0.38) !important;
}

/* Boutons "Personnalisable" & "Personnalisable en 2D" dans la grille boutique */
a.button.lag-loop-customizable-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}
a.button.lag-loop-customizable-btn.lag-mode-2d::before {
    content: "🎨 ";
    font-style: normal;
}

/* --------------------------------------------------------------------------
   1. ISOLATION & RESET HAUTE SPÉCIFICITÉ DU CONFIGURATEUR (POINTS 11 & 12)
   Neutralise intégralement les règles globales !important du thème enfant
   (button:not(.elementor-widget *), button span, input, select, textarea)
   -------------------------------------------------------------------------- */
#lag-configurator-modal,
#lag-configurator-modal *,
body .lag-icon-modal-overlay.lag-icon-modal-overlay,
body .lag-icon-modal-overlay.lag-icon-modal-overlay * {
    box-sizing: border-box;
}

#lag-configurator-modal button,
body .lag-icon-modal-overlay.lag-icon-modal-overlay button {
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1.2 !important;
    min-height: 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    transform: none !important;
}

/* Point 5 : Ne jamais écraser la police d'aperçu sur le sélecteur de polices */
#lag-configurator-modal button:not(.lag-font-picker-btn):not(.lag-font-picker-item),
body .lag-icon-modal-overlay.lag-icon-modal-overlay button {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

#lag-configurator-modal button:hover,
body .lag-icon-modal-overlay.lag-icon-modal-overlay button:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* Neutralise button span { color: #ffffff !important; } du thème */
#lag-configurator-modal button span,
#lag-configurator-modal button:hover span,
body .lag-icon-modal-overlay.lag-icon-modal-overlay button span,
body .lag-icon-modal-overlay.lag-icon-modal-overlay button:hover span {
    color: inherit !important;
}

#lag-configurator-modal button svg,
body .lag-icon-modal-overlay.lag-icon-modal-overlay button svg {
    flex-shrink: 0;
    pointer-events: none;
}

#lag-configurator-modal input[type="text"],
#lag-configurator-modal input[type="number"],
#lag-configurator-modal textarea,
#lag-configurator-modal select {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    min-height: 0 !important;
    margin: 0 !important;
    line-height: 1.25 !important;
    box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   2. MODAL WRAPPER & OVERLAY
   -------------------------------------------------------------------------- */
#lag-configurator-modal.lag-global-modal-wrap {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    z-index: 999999;
    touch-action: manipulation;
}

#lag-configurator-modal .lag-modal-backdrop-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(24, 19, 17, 0.78);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* --------------------------------------------------------------------------
   3. FENÊTRE PRINCIPALE PC / DESKTOP & BARRE SUPÉRIEURE (POINTS 5, 11, 12, 13)
   -------------------------------------------------------------------------- */
#lag-configurator-modal .lag-modal-window {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 88vw;
    max-width: 1120px;
    height: 83vh;
    max-height: 760px;
    background: #FFFFFF;
    border-radius: 13px;
    border: 1px solid rgba(242, 231, 223, 0.16);
    box-shadow: 0 26px 60px rgba(15, 11, 9, 0.52);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1000000;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* BARRE SUPÉRIEURE ÉBÈNE RAFFINÉE */
#lag-configurator-modal .lag-modal-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #1B1614;
    color: #F2E7DF;
    padding: 0 12px;
    user-select: none;
    cursor: move;
    border-bottom: 1px solid rgba(242, 231, 223, 0.12);
    height: 44px;
    flex: 0 0 44px;
    gap: 10px;
}

#lag-configurator-modal .lag-bar-left {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

#lag-configurator-modal .lag-bar-center {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    pointer-events: none;
}

#lag-configurator-modal .lag-bar-right {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

/* Point 6 : Sécurité anti-bouton obsolète "Revenir au produit" (PC & Mobile) */
#lag-configurator-modal #lag-btn-back-product,
#lag-configurator-modal .lag-btn-back {
    display: none !important;
}

/* Boutons de navigation du header (jamais coupés, dimensionnés au contenu) */
#lag-configurator-modal .lag-btn-nav {
    width: auto !important;
    height: 29px !important;
    padding: 0 11px !important;
    border-radius: 7px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* Bouton "Configurer d'autres modèles" : verre sombre bordé Crème */
#lag-configurator-modal #lag-btn-other-models.lag-btn-switch-models {
    background-color: rgba(242, 231, 223, 0.1) !important;
    background-image: none !important;
    color: #F2E7DF !important;
    border: 1px solid rgba(242, 231, 223, 0.24) !important;
}
#lag-configurator-modal #lag-btn-other-models.lag-btn-switch-models:hover {
    background-color: rgba(184, 91, 63, 0.26) !important;
    border-color: #C86A4B !important;
    color: #FFFFFF !important;
}

/* Bouton "+ Zone" : pilule Terracotta artisanale (Point 13) */
#lag-configurator-modal #lag-btn-open-add-zone.lag-btn-add-zone {
    background-image: linear-gradient(135deg, #C86A4B 0%, #9E4A32 100%) !important;
    background-color: #B85B3F !important;
    color: #FFF9F5 !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 2px 7px rgba(184, 91, 63, 0.3) !important;
}
#lag-configurator-modal #lag-btn-open-add-zone.lag-btn-add-zone:hover {
    background-image: linear-gradient(135deg, #D67859 0%, #B05439 100%) !important;
    background-color: #9E4A32 !important;
    color: #FFFFFF !important;
    box-shadow: 0 3px 10px rgba(184, 91, 63, 0.42) !important;
}

#lag-configurator-modal .lag-active-model-title {
    display: inline-block;
    font-size: 13.5px;
    font-weight: 700;
    color: #F2E7DF;
    letter-spacing: 0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    vertical-align: middle;
}

/* Bouton Fermer (×) épuré et carré */
#lag-configurator-modal #lag-btn-close-modal.lag-btn-modal-close {
    background-color: rgba(242, 231, 223, 0.08) !important;
    background-image: none !important;
    border: 1px solid rgba(242, 231, 223, 0.16) !important;
    color: #E5D6CC !important;
    cursor: pointer !important;
    width: 29px !important;
    height: 29px !important;
    padding: 0 !important;
    border-radius: 7px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}
#lag-configurator-modal #lag-btn-close-modal.lag-btn-modal-close:hover {
    background-color: #DC2626 !important;
    border-color: #DC2626 !important;
    color: #FFFFFF !important;
}

/* VIEW PANELS */
#lag-configurator-modal .lag-modal-view-panel {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
}

/* --------------------------------------------------------------------------
   4. VIEW A : EXPLORATEUR DE MODÈLES (BROWSER VIEW)
   -------------------------------------------------------------------------- */
#lag-configurator-modal .lag-browser-layout {
    display: flex;
    width: 100%;
    height: 100%;
}

#lag-configurator-modal .lag-browser-categories-sidebar {
    width: 215px;
    background: #FAF6F3;
    border-right: 1px solid #E8DDD5;
    padding: 12px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

#lag-configurator-modal .lag-sidebar-heading {
    margin: 0 0 8px 0;
    font-size: 11px;
    font-weight: 700;
    color: #7D6B61;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: inherit;
}

#lag-configurator-modal .lag-categories-nav-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

#lag-configurator-modal .lag-cat-nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 7px;
    border: 1px solid transparent;
    background: #FFFFFF;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 12px;
    font-weight: 600;
    color: #2E2520;
}
#lag-configurator-modal .lag-cat-nav-item:hover {
    background: #FDF3EE;
    border-color: #E8C7BA;
    color: #9E4A32;
}
#lag-configurator-modal .lag-cat-nav-item.active {
    background: #B85B3F;
    color: #FFF9F5;
    border-color: #B85B3F;
}

#lag-configurator-modal .lag-cat-nav-icon {
    width: 18px;
    height: 18px;
    object-fit: cover;
    border-radius: 4px;
}

#lag-configurator-modal .lag-browser-models-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 14px 18px;
    overflow-y: auto;
    background: #FFFFFF;
}

#lag-configurator-modal .lag-browser-top-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    gap: 8px;
}

#lag-configurator-modal #lag-browser-cat-title {
    color: #2E2520;
    font-family: inherit;
}

#lag-configurator-modal .lag-btn-resume-model {
    background-color: #F6EDE7 !important;
    background-image: none !important;
    color: #2E2520 !important;
    border: 1px solid #DFCCC0 !important;
    padding: 0 11px !important;
    height: 28px !important;
    border-radius: 7px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}
#lag-configurator-modal .lag-btn-resume-model:hover {
    background-color: #EADACD !important;
    border-color: #C86A4B !important;
}

#lag-configurator-modal .lag-browser-models-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
    gap: 12px;
}

#lag-configurator-modal .lag-client-tpl-card {
    background: #FFFFFF;
    border: 1px solid #E8DDD5;
    border-radius: 9px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: all 0.18s ease;
}
#lag-configurator-modal .lag-client-tpl-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(46, 37, 32, 0.1);
    border-color: #C86A4B;
}

#lag-configurator-modal .lag-client-tpl-thumb {
    height: 125px;
    background: #FAF6F3;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 8px;
}
#lag-configurator-modal .lag-client-tpl-thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

#lag-configurator-modal .lag-client-tpl-info {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex: 1;
}

#lag-configurator-modal .lag-client-tpl-name {
    font-size: 12.5px;
    font-weight: 700;
    color: #2E2520;
    line-height: 1.25;
}

#lag-configurator-modal .lag-btn-choose-model {
    width: 100% !important;
    height: 28px !important;
    padding: 0 10px !important;
    border-radius: 6px !important;
    border: 1px solid #B85B3F !important;
    background-color: #B85B3F !important;
    background-image: none !important;
    color: #FFF9F5 !important;
    font-weight: 600 !important;
    font-size: 11.5px !important;
    cursor: pointer !important;
    margin-top: auto !important;
    transition: background-color 0.15s ease !important;
}
#lag-configurator-modal .lag-btn-choose-model:hover {
    background-color: #9E4A32 !important;
    border-color: #9E4A32 !important;
}

/* --------------------------------------------------------------------------
   5. VIEW B : STUDIO CANVAS 2D & ZOOM PHOTO ISOLÉ (POINT 8)
   -------------------------------------------------------------------------- */
#lag-configurator-modal .lag-customizer-layout {
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

/* STUDIO CANVAS 2D COLUMN (Point 7 : touch-action: none pour zoom tactile pinch fluide) */
#lag-configurator-modal .lag-customizer-canvas-col {
    flex: 1;
    min-width: 0;
    background: radial-gradient(circle at 50% 45%, #241E1B 0%, #161210 100%);
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 12px;
    overflow: hidden;
    touch-action: none;
}

/* FACE SWITCHER PILLS */
#lag-configurator-modal .lag-faces-pill-nav {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
    z-index: 20;
    align-self: center;
}

#lag-configurator-modal .lag-face-pill-btn {
    background-color: rgba(46, 37, 32, 0.85) !important;
    background-image: none !important;
    color: #E5D6CC !important;
    border: 1px solid rgba(242, 231, 223, 0.2) !important;
    border-radius: 14px !important;
    padding: 0 12px !important;
    height: 26px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}
#lag-configurator-modal .lag-face-pill-btn:hover {
    background-color: rgba(70, 56, 48, 0.95) !important;
    color: #FFFFFF !important;
}
#lag-configurator-modal .lag-face-pill-btn.active {
    background-color: #B85B3F !important;
    color: #FFF9F5 !important;
    border-color: #D47657 !important;
    box-shadow: 0 2px 8px rgba(184, 91, 63, 0.38) !important;
}

/* CANVAS VIEWPORT & ZOOM LAYER (POINT 8) */
#lag-configurator-modal .lag-client-canvas-viewport {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    touch-action: none;
}

#lag-configurator-modal .lag-client-canvas-zoom-layer {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    max-height: 100%;
    transform-origin: center center;
    will-change: transform;
    touch-action: none;
}

#lag-configurator-modal .lag-client-canvas-box {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55);
    border-radius: 7px;
    overflow: hidden;
    user-select: none;
    touch-action: none;
    display: inline-block;
    line-height: 0;
}

#lag-configurator-modal .lag-client-canvas-box img#lag-client-canvas-bg {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: fill;
    display: block;
    user-select: none;
    pointer-events: none;
}

/* Badge flottant de réinitialisation du zoom photo */
#lag-configurator-modal #lag-canvas-zoom-reset.lag-canvas-zoom-reset {
    position: absolute;
    bottom: 8px;
    left: 8px;
    z-index: 35;
    height: 26px !important;
    padding: 0 10px !important;
    border-radius: 13px !important;
    background-color: rgba(27, 22, 20, 0.88) !important;
    background-image: none !important;
    color: #F2E7DF !important;
    border: 1px solid rgba(242, 231, 223, 0.3) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    cursor: pointer !important;
    backdrop-filter: blur(4px);
}
#lag-configurator-modal #lag-canvas-zoom-reset.lag-canvas-zoom-reset.is-zoomed {
    border-color: #D47657 !important;
    background-color: rgba(46, 32, 26, 0.94) !important;
}
#lag-configurator-modal #lag-canvas-zoom-reset.lag-canvas-zoom-reset:hover {
    background-color: #B85B3F !important;
    border-color: #D47657 !important;
    color: #FFFFFF !important;
}

/* --------------------------------------------------------------------------
   6. ZONES 2D INTERACTIVES & POIGNÉES
   -------------------------------------------------------------------------- */
#lag-configurator-modal .lag-canvas-zone {
    position: absolute;
    box-sizing: border-box;
    cursor: pointer;
    user-select: none;
    touch-action: none;
    z-index: 10;
    border: 1.5px solid transparent;
    transition: border-color 0.12s ease, background-color 0.12s ease;
}

#lag-configurator-modal .lag-canvas-zone.zone-free {
    cursor: move;
}

#lag-configurator-modal .lag-canvas-zone.active {
    border: 1.5px dashed #C86A4B !important;
    background: rgba(184, 91, 63, 0.1);
}

#lag-configurator-modal .lag-zone-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.2;
    overflow: visible;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
    color: #3e2723;
}

#lag-configurator-modal .lag-zone-content svg.lag-icon-vector-svg {
    display: block;
    overflow: visible;
    pointer-events: none;
    max-width: 100%;
    max-height: 100%;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
}

/* Repère discret d'une zone vide : invisible par défaut et à l'ouverture (aucune sélection / hors capture html2canvas),
   affiché uniquement pendant que le client a sélectionné la zone (.active) */
#lag-configurator-modal .lag-zone-empty-hint {
    display: none !important;
    font-size: 11px;
    font-weight: 500;
    font-style: italic;
    color: rgba(62, 39, 35, 0.45);
    text-shadow: none;
    pointer-events: none;
    user-select: none;
    padding: 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
#lag-configurator-modal .lag-canvas-zone.active .lag-zone-empty-hint {
    display: inline-block !important;
}

#lag-configurator-modal .lag-zone-handle {
    display: none;
    position: absolute;
    width: 21px;
    height: 21px;
    color: #FFF9F5;
    border-radius: 50%;
    border: 1.5px solid #FFF9F5;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    font-size: 11px;
    line-height: 1;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    z-index: 40;
    touch-action: none;
    transition: transform 0.1s ease;
}
#lag-configurator-modal .lag-zone-handle:hover {
    transform: scale(1.15);
}

#lag-configurator-modal .lag-canvas-zone.active.zone-free .lag-zone-handle {
    display: flex;
}

#lag-configurator-modal .lag-handle-rotate {
    top: -10.5px;
    right: -10.5px;
    cursor: grab;
    background: #2E2520;
}

#lag-configurator-modal .lag-handle-resize {
    bottom: -10.5px;
    right: -10.5px;
    cursor: se-resize;
    background: #B85B3F;
}

/* --------------------------------------------------------------------------
   7. SIDEBAR DES CONTRÔLES & BOUTONS RAFFINÉS (POINTS 6, 12, 13)
   -------------------------------------------------------------------------- */
#lag-configurator-modal .lag-customizer-controls-col {
    width: 332px;
    flex-shrink: 0;
    background: #FFFFFF;
    border-left: 1px solid #E8DDD5;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#lag-configurator-modal .lag-controls-scroll-area {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 14px;
}

#lag-configurator-modal .lag-controls-header-row {
    margin-bottom: 10px;
}

#lag-configurator-modal .lag-controls-heading {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #2E2520;
    font-family: inherit;
}

#lag-configurator-modal .lag-controls-subhint {
    display: block;
    font-size: 11px;
    color: #7D6B61;
    margin-top: 2px;
}

#lag-configurator-modal .lag-client-field-group {
    margin-bottom: 8px;
    background: #FAF7F5;
    border: 1px solid #E8DDD5;
    border-radius: 8px;
    padding: 8px 10px;
    transition: all 0.15s ease;
}
#lag-configurator-modal .lag-client-field-group.active {
    border-color: #D4846A;
    background: #FFFDFB;
    box-shadow: 0 2px 8px rgba(184, 91, 63, 0.08);
}

#lag-configurator-modal .lag-field-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    gap: 6px;
}

#lag-configurator-modal .lag-client-field-label {
    font-weight: 600;
    font-size: 11.5px;
    color: #4A3B33;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#lag-configurator-modal .lag-field-price-tag {
    font-size: 10.5px;
    font-weight: 700;
    color: #B85B3F;
    background: #FDF1EC;
    border: 1px solid #EDC9BC;
    border-radius: 10px;
    padding: 1px 6px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Ligne d'instance cliquable */
#lag-configurator-modal .lag-instance-control-row {
    padding: 4px;
    margin-bottom: 4px;
    border-radius: 7px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.12s ease;
}
#lag-configurator-modal .lag-instance-control-row:last-child {
    margin-bottom: 0;
}
#lag-configurator-modal .lag-instance-control-row.active {
    background: #FFFFFF;
    border-color: #C86A4B;
    box-shadow: 0 1px 5px rgba(184, 91, 63, 0.12);
}

/* Barre de nom de champ / zone par instance avec bouton crayon de renommage (Point 2) */
#lag-configurator-modal .lag-instance-label-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 4px;
    min-height: 20px;
}

#lag-configurator-modal .lag-instance-label-edit-area {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

#lag-configurator-modal .lag-instance-label-text {
    font-weight: 600;
    font-size: 11.5px;
    color: #4A3B33;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

#lag-configurator-modal .lag-req-star {
    color: #DC2626;
    font-weight: 800;
    font-size: 13px;
    line-height: 1;
    flex-shrink: 0;
}

@keyframes lagRowShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

#lag-configurator-modal .lag-instance-control-row.lag-row-error {
    border-color: #DC2626 !important;
    background-color: #FFF5F5 !important;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.14) !important;
    animation: lagRowShake 0.28s ease-in-out 1;
}
#lag-configurator-modal .lag-instance-control-row.lag-row-error .lag-client-text-input,
#lag-configurator-modal .lag-instance-control-row.lag-row-error .lag-customizer-icon-trigger {
    border-color: #DC2626 !important;
}

#lag-configurator-modal .lag-ctrl-icon-placeholder {
    color: #8C7A70;
    font-weight: 400;
}

#lag-configurator-modal .lag-empty-fields-notice {
    background: #FAF6F3;
    border: 1px dashed #D8C9BE;
    border-radius: 8px;
    padding: 12px 10px;
    text-align: center;
    font-size: 12px;
    color: #6B574C;
    line-height: 1.45;
}

#lag-configurator-modal button.lag-btn-rename-instance {
    width: 20px !important;
    height: 20px !important;
    padding: 0 !important;
    border-radius: 5px !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 1px solid transparent !important;
    color: #8C6D5E !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    transition: all 0.14s ease !important;
}
#lag-configurator-modal button.lag-btn-rename-instance:hover,
#lag-configurator-modal button.lag-btn-rename-instance:focus-visible {
    background-color: #F5ECE6 !important;
    border-color: #DFCFC4 !important;
    color: #B85B3F !important;
}

#lag-configurator-modal input.lag-instance-rename-input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
    height: 23px !important;
    padding: 0 6px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    border: 1px solid #B85B3F !important;
    border-radius: 5px !important;
    background-color: #FFFFFF !important;
    color: #2E2520 !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(184, 91, 63, 0.12) !important;
}

#lag-configurator-modal button.lag-btn-confirm-rename {
    width: 23px !important;
    height: 23px !important;
    padding: 0 !important;
    border-radius: 5px !important;
    background-color: #B85B3F !important;
    background-image: none !important;
    color: #FFF9F5 !important;
    border: none !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
}
#lag-configurator-modal button.lag-btn-confirm-rename:hover {
    background-color: #9E4A32 !important;
}

#lag-configurator-modal .lag-ctrl-inline-wrap {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

#lag-configurator-modal .lag-ctrl-input-line {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
}

#lag-configurator-modal .lag-client-text-input {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    height: 32px !important;
    padding: 4px 10px !important;
    border: 1px solid #D8C9BE !important;
    border-radius: 6px !important;
    font-size: 12.5px !important;
    color: #2E2520 !important;
    background-color: #FFFFFF !important;
}
#lag-configurator-modal .lag-client-text-input:focus {
    border-color: #B85B3F !important;
    outline: none !important;
}

/* Bouton secondaire élégant "Mise en forme" sur PC (Masqué sur mobile via Point 6) */
#lag-configurator-modal .lag-btn-open-typo {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 100% !important;
    height: 27px !important;
    padding: 0 10px !important;
    background-color: #F5ECE6 !important;
    background-image: none !important;
    color: #4A342B !important;
    border: 1px solid #E2CFC3 !important;
    border-radius: 6px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}
#lag-configurator-modal .lag-btn-open-typo:hover {
    background-color: #2E2520 !important;
    border-color: #2E2520 !important;
    color: #F2E7DF !important;
}

/* Sélecteur d'icône dans la sidebar : barre épurée + chevron intégré fin à droite */
#lag-configurator-modal .lag-customizer-icon-trigger {
    flex: 1 1 auto;
    min-width: 0;
    display: flex !important;
    align-items: stretch !important;
    height: 32px !important;
    padding: 0 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #2E2520 !important;
    background: #FFFFFF !important;
    border: 1px solid #D8C9BE !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    overflow: hidden;
    transition: border-color 0.12s ease;
}
#lag-configurator-modal .lag-customizer-icon-trigger:hover,
#lag-configurator-modal .lag-instance-control-row.active .lag-customizer-icon-trigger {
    border-color: #B85B3F !important;
}

#lag-configurator-modal .lag-ctrl-icon-label {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 9px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#lag-configurator-modal .lag-ctrl-icon-thumb {
    width: 20px;
    height: 20px;
    object-fit: contain;
    border-radius: 3px;
    flex-shrink: 0;
}

/* Bouton chevron ▼ finement intégré (plus de gros bloc orange !) */
#lag-configurator-modal button.lag-icon-open-btn {
    flex: 0 0 32px !important;
    width: 32px !important;
    height: 100% !important;
    padding: 0 !important;
    background-color: #F6EDE7 !important;
    background-image: none !important;
    color: #8C4A33 !important;
    border: none !important;
    border-left: 1px solid #E4D4C9 !important;
    border-radius: 0 !important;
    font-size: 10px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background-color 0.14s ease, color 0.14s ease !important;
}
#lag-configurator-modal button.lag-icon-open-btn:hover {
    background-color: #B85B3F !important;
    color: #FFFFFF !important;
}

/* Bouton Supprimer Instance dupliquée */
#lag-configurator-modal button.lag-btn-remove-instance {
    flex: 0 0 28px !important;
    width: 28px !important;
    height: 32px !important;
    padding: 0 !important;
    background-color: #FEF2F2 !important;
    background-image: none !important;
    color: #DC2626 !important;
    border: 1px solid #FECACA !important;
    border-radius: 6px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background-color 0.14s ease, color 0.14s ease !important;
}
#lag-configurator-modal button.lag-btn-remove-instance:hover {
    background-color: #DC2626 !important;
    border-color: #DC2626 !important;
    color: #FFFFFF !important;
}

/* Bannière d'alerte si un champ obligatoire n'est pas rempli */
#lag-configurator-modal #lag-customizer-validation-error.lag-customizer-validation-error {
    margin: 0;
    padding: 7px 12px;
    background-color: #FEF2F2;
    border-top: 1px solid #FECACA;
    color: #B91C1C;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.35;
    flex-shrink: 0;
}

/* BARRE INFÉRIEURE : PRIX & BOUTON VALIDER MON DESIGN */
#lag-configurator-modal .lag-controls-bottom-bar {
    padding: 10px 14px;
    border-top: 1px solid #E8DDD5;
    background: #FAF7F5;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-shrink: 0;
}

#lag-configurator-modal .lag-price-recap {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

#lag-configurator-modal .lag-price-label {
    font-size: 10.5px;
    font-weight: 600;
    color: #7D6B61;
}

#lag-configurator-modal .lag-price-value {
    font-size: 14px;
    font-weight: 800;
    color: #2E2520;
}

#lag-configurator-modal #lag-btn-apply-design.lag-btn-apply-design {
    width: auto !important;
    height: 35px !important;
    padding: 0 16px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    background-image: linear-gradient(135deg, #C86A4B 0%, #9E4A32 100%) !important;
    background-color: #B85B3F !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #FFF9F5 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(184, 91, 63, 0.28) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
    transition: background-image 0.15s ease, box-shadow 0.15s ease !important;
}
#lag-configurator-modal #lag-btn-apply-design.lag-btn-apply-design:hover {
    background-image: linear-gradient(135deg, #D57758 0%, #AD5238 100%) !important;
    box-shadow: 0 6px 16px rgba(184, 91, 63, 0.38) !important;
}

/* --------------------------------------------------------------------------
   8. FENÊTRE MODALE "+ ZONE" (POINT 13)
   -------------------------------------------------------------------------- */
#lag-configurator-modal .lag-add-zone-overlay {
    position: fixed;
    inset: 0;
    background: rgba(22, 18, 16, 0.65);
    backdrop-filter: blur(3px);
    z-index: 1000018;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
}

#lag-configurator-modal .lag-add-zone-window {
    width: 100%;
    max-width: 380px;
    background: #FFFFFF;
    border-radius: 12px;
    border: 1px solid #E8DDD5;
    box-shadow: 0 22px 48px rgba(15, 11, 9, 0.45);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 78vh;
}

#lag-configurator-modal .lag-add-zone-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #1B1614;
    color: #F2E7DF;
}

#lag-configurator-modal .lag-add-zone-title {
    font-size: 13px;
    font-weight: 700;
    color: #F2E7DF;
}

#lag-configurator-modal button.lag-add-zone-close {
    width: 26px !important;
    height: 26px !important;
    padding: 0 !important;
    border-radius: 6px !important;
    background-color: rgba(242, 231, 223, 0.1) !important;
    background-image: none !important;
    border: 1px solid rgba(242, 231, 223, 0.18) !important;
    color: #E5D6CC !important;
    font-size: 17px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}
#lag-configurator-modal button.lag-add-zone-close:hover {
    background-color: #DC2626 !important;
    border-color: #DC2626 !important;
    color: #FFFFFF !important;
}

#lag-configurator-modal .lag-add-zone-body {
    padding: 12px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#lag-configurator-modal .lag-add-zone-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 11px;
    background: #FAF7F5;
    border: 1px solid #E8DDD5;
    border-radius: 8px;
    transition: border-color 0.15s ease;
}
#lag-configurator-modal .lag-add-zone-item:hover {
    border-color: #C86A4B;
}

#lag-configurator-modal .lag-add-zone-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

#lag-configurator-modal .lag-add-zone-name {
    font-size: 12.5px;
    font-weight: 700;
    color: #2E2520;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#lag-configurator-modal .lag-add-zone-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    font-size: 10.5px;
    color: #7D6B61;
}

#lag-configurator-modal .lag-add-zone-badge {
    background: #EFE6DF;
    color: #4A3B33;
    padding: 1px 6px;
    border-radius: 10px;
    font-weight: 600;
}

#lag-configurator-modal .lag-add-zone-badge.price {
    background: #FDF1EC;
    color: #B85B3F;
    border: 1px solid #EDC9BC;
}

#lag-configurator-modal button.lag-btn-confirm-add-zone {
    flex: 0 0 auto !important;
    height: 28px !important;
    padding: 0 11px !important;
    border-radius: 6px !important;
    background-color: #B85B3F !important;
    background-image: none !important;
    border: 1px solid #B85B3F !important;
    color: #FFF9F5 !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}
#lag-configurator-modal button.lag-btn-confirm-add-zone:hover {
    background-color: #9E4A32 !important;
    border-color: #9E4A32 !important;
}
#lag-configurator-modal button.lag-btn-confirm-add-zone:disabled {
    background-color: #E5DCD5 !important;
    border-color: #D8CCC3 !important;
    color: #8C7D75 !important;
    cursor: not-allowed !important;
}

/* --------------------------------------------------------------------------
   9. FENÊTRE FLOTTANTE DÉPLAÇABLE "MISE EN FORME" (POINTS 4, 7, 9, 10)
   -------------------------------------------------------------------------- */
#lag-configurator-modal .lag-typo-floating-window {
    position: fixed;
    top: 74px;
    left: 26px;
    width: 276px;
    background: #FFFFFF;
    border: 1px solid #DFCFC4;
    border-radius: 11px;
    box-shadow: 0 18px 42px rgba(20, 15, 12, 0.38);
    z-index: 1000010;
    overflow: visible;
}

#lag-configurator-modal .lag-typo-window-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #1B1614;
    color: #F2E7DF;
    padding: 7px 10px;
    border-radius: 10px 10px 0 0;
    cursor: move;
    user-select: none;
    touch-action: none;
}

#lag-configurator-modal .lag-typo-title-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 700;
    color: #F2E7DF;
}

#lag-configurator-modal button.lag-typo-close-btn {
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    color: #C7B6AA !important;
    font-size: 17px !important;
    width: 22px !important;
    height: 22px !important;
    padding: 0 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 5px !important;
}
#lag-configurator-modal button.lag-typo-close-btn:hover {
    background-color: rgba(220, 38, 38, 0.2) !important;
    color: #EF4444 !important;
}

#lag-configurator-modal .lag-typo-window-body {
    padding: 9px 11px 11px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    background: #FFFFFF;
    border-radius: 0 0 10px 10px;
}

/* Sur PC, les barres d'icônes mobiles sont masquées */
#lag-configurator-modal .lag-typo-mobile-icons,
#lag-configurator-modal .lag-typo-mobile-subbar {
    display: none !important;
}

#lag-configurator-modal .lag-typo-target-badge {
    font-size: 10.5px;
    font-weight: 700;
    color: #9E4A32;
    background: #FDF3EE;
    border: 1px solid #EDCABB;
    border-radius: 5px;
    padding: 3px 8px;
    align-self: flex-start;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#lag-configurator-modal .lag-typo-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#lag-configurator-modal .lag-typo-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#lag-configurator-modal .lag-typo-label {
    font-size: 11px;
    font-weight: 600;
    color: #4A3B33;
    margin: 0;
}

/* SÉLECTEUR DE POLICE AVEC APERÇU VISUEL RÉEL (POINT 4) */
#lag-configurator-modal .lag-font-picker {
    position: relative;
    width: 100%;
}

#lag-configurator-modal button.lag-font-picker-btn {
    width: 100% !important;
    height: 32px !important;
    padding: 0 10px !important;
    background-color: #FAF7F5 !important;
    background-image: none !important;
    border: 1px solid #D8C9BE !important;
    border-radius: 6px !important;
    color: #2E2520 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}
#lag-configurator-modal button.lag-font-picker-btn:hover {
    border-color: #B85B3F !important;
    background-color: #FFFFFF !important;
}

#lag-configurator-modal .lag-font-picker-current {
    flex: 1;
    min-width: 0;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}

#lag-configurator-modal .lag-font-picker-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 215px;
    overflow-y: auto;
    background: #FFFFFF;
    border: 1px solid #D8C9BE;
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(24, 19, 17, 0.24);
    z-index: 1000030;
    padding: 4px;
}

/* Point 5 : Chaque ligne de la liste affiche immédiatement le vrai style de sa police avant clic */
#lag-configurator-modal .lag-font-picker-item {
    width: 100%;
    padding: 7px 10px;
    background-color: transparent;
    border: none;
    border-radius: 5px;
    color: #2E2520;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
    line-height: 1.35;
    user-select: none;
    transition: background-color 0.12s ease, color 0.12s ease;
}
#lag-configurator-modal .lag-font-picker-item:hover {
    background-color: #FAF3EE;
    color: #9E4A32;
}
#lag-configurator-modal .lag-font-picker-item.active {
    background-color: #FDF0E9;
    color: #B85B3F;
}

/* BOUTONS TOGGLE (PLEIN/CREUX, ALIGNEMENT, MIROIR — POINT 7) */
#lag-configurator-modal .lag-typo-style-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}

#lag-configurator-modal .lag-typo-align-toggle {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
}

#lag-configurator-modal button.lag-typo-style-btn,
#lag-configurator-modal button.lag-typo-iconstyle-btn,
#lag-configurator-modal button.lag-typo-align-btn,
#lag-configurator-modal button.lag-typo-mirror-btn {
    height: 27px !important;
    padding: 0 7px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    border: 1px solid #D8C9BE !important;
    background-color: #FAF7F5 !important;
    background-image: none !important;
    color: #4A3B33 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    transition: all 0.14s ease !important;
}
#lag-configurator-modal button.lag-typo-style-btn:hover,
#lag-configurator-modal button.lag-typo-iconstyle-btn:hover,
#lag-configurator-modal button.lag-typo-align-btn:hover,
#lag-configurator-modal button.lag-typo-mirror-btn:hover {
    border-color: #B85B3F !important;
    color: #2E2520 !important;
}
#lag-configurator-modal button.lag-typo-style-btn.active,
#lag-configurator-modal button.lag-typo-iconstyle-btn.active,
#lag-configurator-modal button.lag-typo-align-btn.active,
#lag-configurator-modal button.lag-typo-mirror-btn.active {
    background-color: #B85B3F !important;
    border-color: #B85B3F !important;
    color: #FFF9F5 !important;
}

/* CURSEURS (COURBURE 360°, ESPACEMENT, ÉCHELLE) */
#lag-configurator-modal button.lag-typo-reset-link {
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    color: #7D6B61 !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
    cursor: pointer !important;
    padding: 0 !important;
    height: auto !important;
}
#lag-configurator-modal button.lag-typo-reset-link:hover {
    color: #B85B3F !important;
}

#lag-configurator-modal .lag-typo-curve-control {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #FAF7F5;
    border: 1px solid #E8DDD5;
    border-radius: 7px;
    padding: 5px 8px;
}

#lag-configurator-modal .lag-typo-curve-slider {
    flex: 1;
    min-width: 0;
    width: 100%;
    height: 5px;
    accent-color: #B85B3F;
    cursor: pointer;
    margin: 0;
}

#lag-configurator-modal input.lag-typo-curve-input {
    width: 56px !important;
    height: 25px !important;
    padding: 0 4px !important;
    text-align: center !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #2E2520 !important;
    background-color: #FFFFFF !important;
    border: 1px solid #D8C9BE !important;
    border-radius: 5px !important;
    flex-shrink: 0;
}
#lag-configurator-modal input.lag-typo-curve-input:focus {
    border-color: #B85B3F !important;
    outline: none !important;
}

/* Champ numérique avec unité accolée (° ou % — Point 1) */
#lag-configurator-modal .lag-typo-unit-wrap {
    display: inline-flex;
    align-items: center;
    background: #FFFFFF;
    border: 1px solid #D8C9BE;
    border-radius: 5px;
    height: 25px;
    padding-right: 5px;
    flex-shrink: 0;
}
#lag-configurator-modal .lag-typo-unit-wrap:focus-within {
    border-color: #B85B3F;
}
#lag-configurator-modal input.lag-typo-curve-input.has-unit {
    width: 46px !important;
    height: 23px !important;
    border: none !important;
    background: transparent !important;
    padding: 0 2px 0 4px !important;
    text-align: right !important;
}
#lag-configurator-modal .lag-typo-unit-suffix {
    font-size: 11.5px;
    font-weight: 700;
    color: #7D6B61;
    line-height: 1;
    user-select: none;
    pointer-events: none;
}

#lag-configurator-modal .lag-typo-curve-hint {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 9.5px;
    font-weight: 600;
    color: #7D6B61;
    padding: 0 2px;
}
#lag-configurator-modal .lag-typo-curve-hint #lag-typo-curve-range {
    color: #B85B3F;
}

/* --------------------------------------------------------------------------
   10. JOYSTICK CLIENT SEMI-TRANSPARENT EN SURBRILLANCE, DÉPLAÇABLE & CONTOUR
       CIRCULAIRE ARRONDI (POINTS 2, 4, 8)
   -------------------------------------------------------------------------- */
#lag-configurator-modal .lag-mobile-joystick-wrap {
    position: fixed;
    bottom: 50px;
    right: 10px;
    width: 124px;
    height: 124px;
    z-index: 1000008;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
    pointer-events: none;
}

/* Anneau SVG circulaire extérieur avec capsules arrondies épousant le contour du joystick */
#lag-configurator-modal .lag-joy-orbit-svg {
    position: absolute;
    inset: 0;
    width: 124px;
    height: 124px;
    overflow: visible;
    pointer-events: none;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.24));
}

#lag-configurator-modal .lag-joy-arc-btn {
    pointer-events: auto;
    cursor: pointer;
}

/* Capsule circulaire Haut-Gauche : Bouton Typographie semi-transparent en surbrillance (Points 2 & 8) */
#lag-configurator-modal .lag-joy-arc-typo .lag-joy-arc-bg {
    fill: rgba(184, 91, 63, 0.68);
    stroke: rgba(255, 246, 238, 0.78);
    stroke-width: 1.4;
    transition: fill 0.15s ease, stroke 0.15s ease;
}
#lag-configurator-modal .lag-joy-arc-typo:hover .lag-joy-arc-bg,
#lag-configurator-modal .lag-joy-arc-typo:active .lag-joy-arc-bg,
#lag-configurator-modal .lag-joy-arc-typo.active .lag-joy-arc-bg {
    fill: rgba(196, 98, 68, 0.88);
    stroke: rgba(255, 252, 248, 0.96);
}

/* Capsule circulaire Haut-Droite : Icône de déplacement du joystick (Points 2 & 4) */
#lag-configurator-modal .lag-joy-arc-move {
    cursor: move;
}
#lag-configurator-modal .lag-joy-arc-move .lag-joy-arc-bg {
    fill: rgba(46, 37, 32, 0.54);
    stroke: rgba(255, 246, 238, 0.64);
    stroke-width: 1.4;
    transition: fill 0.15s ease, stroke 0.15s ease;
}
#lag-configurator-modal .lag-joy-arc-move:hover .lag-joy-arc-bg,
#lag-configurator-modal .lag-joy-arc-move:active .lag-joy-arc-bg {
    fill: rgba(68, 54, 46, 0.82);
    stroke: rgba(255, 252, 248, 0.94);
}

#lag-configurator-modal .lag-joy-arc-text {
    fill: #FFF9F5;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.35px;
    pointer-events: none;
    user-select: none;
}

/* Socle circulaire semi-transparent et légèrement en surbrillance (centré dans 124x124 -> top:26, left:26, 72x72 — Point 2) */
#lag-configurator-modal .lag-joy-pad {
    pointer-events: auto;
    position: absolute;
    top: 26px;
    left: 26px;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 26%, rgba(255, 248, 242, 0.30) 0%, rgba(62, 49, 42, 0.44) 50%, rgba(22, 17, 15, 0.54) 100%);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1.5px solid rgba(255, 246, 238, 0.68);
    box-shadow:
        inset 0 1.5px 4px rgba(255, 252, 248, 0.44),
        inset 0 -2px 6px rgba(0, 0, 0, 0.22),
        0 0 14px rgba(255, 236, 222, 0.24),
        0 5px 14px rgba(0, 0, 0, 0.22);
    touch-action: none;
    cursor: grab;
}

/* Repères directionnels Crème lumineux purement décoratifs */
#lag-configurator-modal .lag-joy-deco {
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none !important;
}
#lag-configurator-modal .lag-joy-deco-up {
    top: 5px;
    left: calc(50% - 3.5px);
    border-left: 3.5px solid transparent;
    border-right: 3.5px solid transparent;
    border-bottom: 5px solid rgba(255, 248, 242, 0.62);
}
#lag-configurator-modal .lag-joy-deco-down {
    bottom: 5px;
    left: calc(50% - 3.5px);
    border-left: 3.5px solid transparent;
    border-right: 3.5px solid transparent;
    border-top: 5px solid rgba(255, 248, 242, 0.62);
}
#lag-configurator-modal .lag-joy-deco-left {
    left: 5px;
    top: calc(50% - 3.5px);
    border-top: 3.5px solid transparent;
    border-bottom: 3.5px solid transparent;
    border-right: 5px solid rgba(255, 248, 242, 0.62);
}
#lag-configurator-modal .lag-joy-deco-right {
    right: 5px;
    top: calc(50% - 3.5px);
    border-top: 3.5px solid transparent;
    border-bottom: 3.5px solid transparent;
    border-left: 5px solid rgba(255, 248, 242, 0.62);
}

/* Stick central analogique semi-transparent en surbrillance (Point 2) */
#lag-configurator-modal .lag-joy-knob {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, rgba(255, 242, 235, 0.90) 0%, rgba(206, 110, 80, 0.66) 52%, rgba(152, 68, 44, 0.72) 100%);
    border: 1.5px solid rgba(255, 248, 242, 0.88);
    box-shadow:
        0 3px 8px rgba(0, 0, 0, 0.25),
        0 0 11px rgba(214, 118, 86, 0.38),
        inset 0 1.5px 3px rgba(255, 255, 255, 0.58);
    touch-action: none;
    z-index: 2;
    transition: transform 0.05s linear, opacity 0.15s ease;
}

/* Zone fixe non libre : stick atténué, bouton Typo circulaire du contour toujours actif */
#lag-configurator-modal .lag-joy-pad.joy-locked {
    cursor: move;
}
#lag-configurator-modal .lag-joy-pad.joy-locked .lag-joy-knob {
    opacity: 0.45;
    background: radial-gradient(circle at 32% 28%, rgba(220, 210, 204, 0.72) 0%, rgba(105, 92, 85, 0.55) 60%, rgba(58, 50, 46, 0.62) 100%);
}

/* --------------------------------------------------------------------------
   11. MODALE DE SÉLECTION D'ICÔNES / VARIANTES
   -------------------------------------------------------------------------- */
body .lag-icon-modal-overlay.lag-icon-modal-overlay {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(24, 19, 17, 0.75);
    backdrop-filter: blur(4px);
    z-index: 10000025;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 14px;
}

body .lag-icon-modal-overlay.lag-icon-modal-overlay .lag-icon-modal-window {
    background: #FFFFFF;
    border-radius: 12px;
    width: 100%;
    max-width: 640px;
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
}

body .lag-icon-modal-overlay.lag-icon-modal-overlay .lag-icon-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 16px;
    background: #1B1614 !important;
    border-bottom: 1px solid rgba(242, 231, 223, 0.14) !important;
}
body .lag-icon-modal-overlay.lag-icon-modal-overlay .lag-icon-modal-header h4 {
    color: #F2E7DF !important;
    margin: 0 !important;
    font-size: 15px !important;
}

body .lag-icon-modal-overlay.lag-icon-modal-overlay button.lag-icon-modal-close {
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    border-radius: 7px !important;
    background-color: rgba(242, 231, 223, 0.1) !important;
    background-image: none !important;
    border: 1px solid rgba(242, 231, 223, 0.18) !important;
    color: #E5D6CC !important;
    font-size: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}
body .lag-icon-modal-overlay.lag-icon-modal-overlay button.lag-icon-modal-close:hover {
    background-color: #DC2626 !important;
    border-color: #DC2626 !important;
    color: #FFFFFF !important;
}

body .lag-icon-modal-overlay.lag-icon-modal-overlay button.lag-icon-tab-btn {
    height: 28px !important;
    padding: 0 12px !important;
    border-radius: 14px !important;
    border: 1px solid #D8C9BE !important;
    background-color: #FFFFFF !important;
    background-image: none !important;
    color: #4A3B33 !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}
body .lag-icon-modal-overlay.lag-icon-modal-overlay button.lag-icon-tab-btn.active {
    background-color: #B85B3F !important;
    border-color: #B85B3F !important;
    color: #FFF9F5 !important;
}

body .lag-icon-modal-overlay.lag-icon-modal-overlay .lag-icon-card-item:hover {
    border-color: #B85B3F !important;
    background: #FDF3EE !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(184, 91, 63, 0.15);
}

/* --------------------------------------------------------------------------
   12. VERSION MOBILE (<= 768px) — ZÉRO SCROLL, BOUTONS NON COUPÉS,
       PAS DE DOUBLON TYPO (POINT 6) & FENÊTRE TYPO PAR ICÔNES (POINT 9)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    #lag-configurator-modal .lag-modal-window {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-width: 100vw !important;
        max-height: 100dvh !important;
        transform: none !important;
        border-radius: 0 !important;
        border: none !important;
        cursor: default !important;
        overflow: hidden !important;
    }

    /* Barre supérieure mobile : aucun texte coupé (Point 11) */
    #lag-configurator-modal .lag-modal-top-bar {
        cursor: default !important;
        height: 40px !important;
        flex: 0 0 40px !important;
        padding: 0 8px !important;
        gap: 6px !important;
    }

    #lag-configurator-modal .lag-bar-left {
        flex: 1 1 auto;
        min-width: 0;
        gap: 5px;
    }

    #lag-configurator-modal .lag-bar-center {
        display: none !important;
    }

    #lag-configurator-modal .lag-btn-nav {
        height: 28px !important;
        padding: 0 9px !important;
        font-size: clamp(10.5px, 2.85vw, 11.5px) !important;
        border-radius: 7px !important;
        gap: 4px !important;
        white-space: nowrap !important;
        overflow: visible !important;
    }

    #lag-configurator-modal .lag-btn-nav .lag-nav-svg {
        width: 13px;
        height: 13px;
    }

    #lag-configurator-modal #lag-btn-close-modal.lag-btn-modal-close {
        width: 28px !important;
        height: 28px !important;
        border-radius: 7px !important;
    }

    /* EXPLORATEUR DE MODÈLES MOBILE */
    #lag-configurator-modal .lag-browser-layout {
        flex-direction: column;
        overflow: hidden;
    }

    #lag-configurator-modal .lag-browser-categories-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #E8DDD5;
        padding: 7px 10px;
        flex: 0 0 auto;
    }

    #lag-configurator-modal .lag-sidebar-heading {
        display: none;
    }

    #lag-configurator-modal .lag-categories-nav-list {
        flex-direction: row;
        overflow-x: auto;
        gap: 6px;
    }

    #lag-configurator-modal .lag-cat-nav-item {
        white-space: nowrap;
        padding: 5px 11px;
        font-size: 11px;
        border-radius: 14px;
    }

    #lag-configurator-modal .lag-browser-models-main {
        padding: 10px;
    }

    #lag-configurator-modal .lag-browser-models-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    #lag-configurator-modal .lag-client-tpl-thumb {
        height: 92px;
    }

    #lag-configurator-modal .lag-client-tpl-info {
        padding: 8px;
        gap: 5px;
    }

    #lag-configurator-modal .lag-client-tpl-name {
        font-size: 11.5px;
    }

    #lag-configurator-modal .lag-btn-choose-model {
        height: 26px !important;
        font-size: 11px !important;
    }

    /* CUSTOMIZER VIEW MOBILE : ZÉRO SCROLL */
    #lag-configurator-modal #lag-view-customizer {
        overflow: hidden !important;
    }

    #lag-configurator-modal .lag-customizer-layout {
        flex-direction: column !important;
        height: 100% !important;
        overflow: hidden !important;
    }

    #lag-configurator-modal .lag-customizer-canvas-col {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        padding: 6px !important;
    }

    #lag-configurator-modal .lag-faces-pill-nav {
        margin-bottom: 5px;
        flex: 0 0 auto;
    }

    #lag-configurator-modal .lag-face-pill-btn {
        height: 23px !important;
        padding: 0 10px !important;
        font-size: 10.5px !important;
    }

    #lag-configurator-modal .lag-client-canvas-box {
        display: inline-block;
        margin: 0 auto;
        box-sizing: border-box;
    }

    #lag-configurator-modal .lag-client-canvas-box img#lag-client-canvas-bg {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: fill !important;
        display: block !important;
    }

    #lag-configurator-modal .lag-customizer-controls-col {
        width: 100% !important;
        flex: 0 0 auto !important;
        max-height: 41dvh !important;
        border-left: none !important;
        border-top: 1px solid #DFCFC4 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    #lag-configurator-modal .lag-controls-header-row {
        display: none !important;
    }

    #lag-configurator-modal .lag-controls-scroll-area {
        padding: 6px 8px 5px !important;
        flex: 0 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
    }

    #lag-configurator-modal .lag-client-controls-fields {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    #lag-configurator-modal .lag-client-field-group {
        margin-bottom: 0 !important;
        padding: 4px 6px !important;
        border-radius: 7px !important;
    }

    #lag-configurator-modal .lag-client-field-group .lag-field-group-header {
        display: none;
    }

    #lag-configurator-modal .lag-instance-control-row {
        padding: 3px 4px !important;
        margin-bottom: 2px !important;
    }

    #lag-configurator-modal .lag-instance-label-bar {
        min-height: 18px;
        margin-bottom: 2px;
    }

    #lag-configurator-modal .lag-instance-label-text {
        font-size: 11px;
    }

    /* 16px minimum sur iOS pour éviter le zoom automatique lors du renommage d'un champ */
    #lag-configurator-modal input.lag-instance-rename-input {
        height: 27px !important;
        font-size: 16px !important;
    }
    #lag-configurator-modal button.lag-btn-confirm-rename {
        width: 27px !important;
        height: 27px !important;
    }

    /* POINT 6 : Supprimer le bouton Typo dans la liste sur mobile (présent sur le joystick) */
    #lag-configurator-modal .lag-btn-open-typo {
        display: none !important;
    }

    /* 16px minimum pour éviter le zoom automatique d'iOS au focus clavier */
    #lag-configurator-modal .lag-client-text-input {
        height: 32px !important;
        padding: 0 9px !important;
        font-size: 16px !important;
        border-radius: 6px !important;
    }

    #lag-configurator-modal .lag-customizer-icon-trigger {
        height: 32px !important;
        font-size: 12px !important;
    }

    #lag-configurator-modal #lag-customizer-validation-error.lag-customizer-validation-error {
        padding: 5px 10px;
        font-size: 11px;
    }

    /* Barre de validation mobile compacte et raffinée */
    #lag-configurator-modal .lag-controls-bottom-bar {
        flex: 0 0 auto !important;
        height: 46px !important;
        padding: 6px 10px !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    #lag-configurator-modal .lag-price-recap {
        flex-direction: row !important;
        align-items: baseline !important;
        gap: 5px !important;
    }

    #lag-configurator-modal .lag-price-label {
        font-size: 11px !important;
    }

    #lag-configurator-modal .lag-price-value {
        font-size: 13.5px !important;
    }

    #lag-configurator-modal #lag-btn-apply-design.lag-btn-apply-design {
        height: 33px !important;
        padding: 0 14px !important;
        font-size: 12px !important;
        border-radius: 8px !important;
    }

    /* POINT 9 : FENÊTRE TYPO ULTRA-COMPACTE PAR ICÔNES SUR MOBILE UNIQUEMENT */
    #lag-configurator-modal .lag-typo-floating-window {
        top: 46px;
        left: 8px;
        width: auto;
        min-width: 170px;
        max-width: calc(100vw - 16px);
    }

    #lag-configurator-modal .lag-typo-floating-window.mob-detail-open {
        width: min(262px, calc(100vw - 16px));
    }

    #lag-configurator-modal .lag-typo-window-header {
        padding: 5px 8px;
    }

    #lag-configurator-modal .lag-typo-title-wrap {
        font-size: 11px;
    }

    #lag-configurator-modal .lag-typo-window-body {
        padding: 7px 8px;
        gap: 6px;
    }

    #lag-configurator-modal .lag-typo-target-badge {
        display: none !important;
    }

    /* Vue principale mobile : uniquement les icônes de paramètres */
    #lag-configurator-modal .lag-typo-floating-window:not(.mob-detail-open) .lag-typo-mobile-icons {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 5px;
    }

    #lag-configurator-modal .lag-typo-floating-window:not(.mob-detail-open) .lag-typo-mobile-subbar,
    #lag-configurator-modal .lag-typo-floating-window:not(.mob-detail-open) .lag-typo-section {
        display: none !important;
    }

    #lag-configurator-modal button.lag-typo-mob-icon-btn {
        width: 34px !important;
        height: 34px !important;
        padding: 0 !important;
        border-radius: 8px !important;
        background-color: #FAF6F3 !important;
        background-image: none !important;
        border: 1px solid #DFCFC4 !important;
        color: #2E2520 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
    }
    #lag-configurator-modal button.lag-typo-mob-icon-btn:active,
    #lag-configurator-modal button.lag-typo-mob-icon-btn:hover {
        background-color: #B85B3F !important;
        border-color: #B85B3F !important;
        color: #FFF9F5 !important;
    }
    #lag-configurator-modal button.lag-typo-mob-icon-btn.lag-mob-hidden {
        display: none !important;
    }

    /* Vue détail d'un paramètre mobile : flèche retour + seul le contrôle choisi */
    #lag-configurator-modal .lag-typo-floating-window.mob-detail-open .lag-typo-mobile-icons {
        display: none !important;
    }

    #lag-configurator-modal .lag-typo-floating-window.mob-detail-open .lag-typo-mobile-subbar {
        display: flex !important;
        align-items: center;
        gap: 7px;
        padding-bottom: 5px;
        border-bottom: 1px solid #EFE6E0;
    }

    #lag-configurator-modal button.lag-typo-mobile-back {
        width: 26px !important;
        height: 26px !important;
        padding: 0 !important;
        border-radius: 6px !important;
        background-color: #F5ECE6 !important;
        background-image: none !important;
        border: 1px solid #DFCFC4 !important;
        color: #2E2520 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
    }
    #lag-configurator-modal button.lag-typo-mobile-back:active {
        background-color: #B85B3F !important;
        border-color: #B85B3F !important;
        color: #FFF9F5 !important;
    }

    #lag-configurator-modal .lag-typo-mobile-subtitle {
        font-size: 11.5px;
        font-weight: 700;
        color: #2E2520;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #lag-configurator-modal .lag-typo-floating-window.mob-detail-open .lag-typo-section {
        display: none !important;
    }

    #lag-configurator-modal .lag-typo-floating-window.mob-detail-open .lag-typo-section.mob-active-param {
        display: flex !important;
    }

    #lag-configurator-modal .lag-typo-floating-window.mob-detail-open .lag-typo-section.mob-active-param > .lag-typo-label {
        display: none !important;
    }
}

/* ==========================================
 * POINT 1 : MODALE "CONFIGURER UN AUTRE MODÈLE ?"
 * ========================================== */
.lag-another-model-modal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(46, 37, 32, 0.65);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 16px;
    box-sizing: border-box;
}

.lag-another-model-dialog {
    background: #ffffff;
    border-radius: 14px;
    padding: 28px 24px 22px;
    max-width: 380px;
    width: 100%;
    text-align: center;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(124, 137, 115, 0.25);
    animation: lagFadeScaleIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes lagFadeScaleIn {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}

.lag-another-model-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 14px;
    background: rgba(124, 137, 115, 0.14);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lag-another-model-title {
    margin: 0 0 6px !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    color: #2E2520 !important;
}

.lag-another-model-desc {
    margin: 0 0 10px !important;
    font-size: 13px !important;
    color: #64748b !important;
    line-height: 1.4 !important;
}

.lag-another-model-question {
    margin: 0 0 20px !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    color: var(--color-accent, #B85B3F) !important;
}

.lag-another-model-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.lag-another-btn {
    all: unset !important;
    box-sizing: border-box !important;
    flex: 1;
    padding: 10px 16px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    line-height: 1.2 !important;
}

.lag-another-btn-no {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1 !important;
}
.lag-another-btn-no:hover {
    background: #e2e8f0 !important;
    color: #1e293b !important;
}

.lag-another-btn-yes {
    background: var(--color-accent, #B85B3F) !important;
    color: #ffffff !important;
    border: 1px solid var(--color-accent, #B85B3F) !important;
    box-shadow: 0 3px 10px rgba(184, 91, 63, 0.35) !important;
}
.lag-another-btn-yes:hover {
    background: #9c4830 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 5px 14px rgba(184, 91, 63, 0.45) !important;
}

.lag-spinner-mini {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #ffffff;
    animation: lagSpin 0.7s linear infinite;
    vertical-align: middle;
    margin-right: 6px;
}
@keyframes lagSpin {
    to { transform: rotate(360deg); }
}