/**
 * VERDEKO RECAP V5.5 - CSS Premium 
 * 
 * @version 5.5.0
 * @description Layout prix optimisé, surface dans config
 * 
 * CORRECTIONS V5.5:
 * - Prix barré sur même ligne que prix actuel
 * - Prix total gazon en bleu (#2f5c69)
 * - Footer: titre gauche (plus gros), montant droite (plus petit)
 * - Surface déplacée dans configuration
 * - Label "PRIX TOTAL GAZON (XX m²)"
 */

/* ==========================================================================
   VARIABLES
   ========================================================================== */

:root {
    --vdk-primary: #4F934E;
    --vdk-primary-dark: #3d7a3c;
    --vdk-primary-light: #e8f5e9;
    --vdk-gradient-green: linear-gradient(135deg, #5FAD5D 0%, #4A8B49 100%);
    
    --vdk-blue: #2F5C69;
    --vdk-blue-dark: #1e4550;
    --vdk-gradient-blue: linear-gradient(135deg, #3a7a8c 0%, #2F5C69 50%, #1e4550 100%);
    
    --vdk-text: #333;
    --vdk-text-light: #666;
    --vdk-text-muted: #999;
    
    --vdk-border: #e0e0e0;
    --vdk-bg-cream: #F8F7F2;
    --vdk-bg-light: #fafbfc;
    --vdk-white: #fff;
    --vdk-border-cream: #f0ede8;
    
    --vdk-shadow: 0 4px 20px rgba(0,0,0,0.08);
    --vdk-shadow-hover: 0 8px 30px rgba(0,0,0,0.12);
    
    --vdk-radius: 16px;
    --vdk-radius-sm: 10px;
    --vdk-radius-xs: 6px;
    --vdk-btn-radius: 50px;
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */

#verdeko-recap-wrapper {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    background: transparent !important;
    padding: 30px 0 !important;
    -webkit-font-smoothing: antialiased !important;
}

#verdeko-recap-wrapper * {
    box-sizing: border-box !important;
}

/* ==========================================================================
   LAYOUT 2 COLONNES
   ========================================================================== */

.vdk-recap-layout {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
    max-width: 1240px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
}

@media (max-width: 1024px) {
    .vdk-recap-layout {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
}

.vdk-recap-col-left,
.vdk-recap-col-right {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
}

.vdk-recap-col-right {
    align-self: start !important;
}

/* ==========================================================================
   CARTES (SECTIONS)
   ========================================================================== */

.vdk-card {
    background: var(--vdk-white) !important;
    border-radius: var(--vdk-radius) !important;
    box-shadow: var(--vdk-shadow) !important;
    overflow: hidden !important;
}

.vdk-card-header {
    background: var(--vdk-gradient-green) !important;
    color: white !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 16px 24px !important;
    margin: 0 !important;
}

.vdk-card-body {
    padding: 20px !important;
}

/* ==========================================================================
   BLOC PRODUIT - V5.3: Fond cream, image contain, layout titre/prix
   ========================================================================== */

.vdk-card-produit {
    background: var(--vdk-bg-cream) !important;
    border: 1px solid var(--vdk-border) !important;
    border-radius: var(--vdk-radius) !important;
    box-shadow: var(--vdk-shadow) !important;
    overflow: hidden !important;
}

.vdk-card-produit .vdk-card-body {
    padding: 0 !important;
    background: var(--vdk-bg-cream) !important;
}

.vdk-produit-grid {
    display: flex !important;
    flex-direction: column !important;
    background: var(--vdk-bg-cream) !important;
    padding: 0 !important;
    border-radius: 0 !important;
    border: none !important;
}

/* V5.4: Image produit - PLUS GRANDE */
.vdk-produit-image {
    position: relative !important;
    width: 100% !important;
    height: 280px !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: var(--vdk-bg-cream) !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.vdk-produit-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding: 15px !important;
}

.vdk-placeholder {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 72px !important;
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%) !important;
}

/* Badge recommandé */
.vdk-reco-badge {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    background: var(--vdk-primary) !important;
    color: white !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    z-index: 1 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
}

.vdk-reco-badge::before {
    content: '⭐' !important;
    font-size: 10px !important;
}

/* V5.3: Infos produit */
.vdk-produit-infos {
    padding: 20px !important;
    flex: 1 !important;
    background: var(--vdk-bg-cream) !important;
}

/* V5.3: Header row - titre gauche, prix droite */
.vdk-produit-header-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 16px !important;
    margin-bottom: 12px !important;
}

.vdk-produit-header-left {
    flex: 1 !important;
}

.vdk-produit-header-right {
    text-align: right !important;
    flex-shrink: 0 !important;
}

.vdk-produit-marque {
    font-size: 12px !important;
    text-transform: uppercase !important;
    color: var(--vdk-text-light) !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    margin: 0 0 6px 0 !important;
}

.vdk-highlight {
    color: var(--vdk-primary) !important;
    font-weight: 700 !important;
}

/* V5.3: Titre plus gros */
.vdk-produit-nom {
    font-size: 26px !important;
    font-weight: 700 !important;
    color: #2f5c69 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

/* Prix unitaire à droite - V5.5: barré sur même ligne */
.vdk-prix-ligne {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 4px !important;
}

.vdk-prix-row {
    display: flex !important;
    align-items: baseline !important;
    gap: 8px !important;
}

.vdk-prix-barre {
    font-size: 14px !important;
    color: var(--vdk-text-muted) !important;
    text-decoration: line-through !important;
}

.vdk-prix-actuel {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--vdk-primary) !important;
    white-space: nowrap !important;
}

.vdk-badge-remise {
    display: inline-flex !important;
    align-items: center !important;
    background: #e53935 !important;
    color: white !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    margin-top: 4px !important;
}

/* Surface commandée - V5.4 renforcé */
.vdk-produit-surface {
    font-size: 14px !important;
    color: var(--vdk-text) !important;
    margin: 0 !important;
}

.vdk-produit-surface strong {
    color: var(--vdk-primary) !important;
    font-weight: 700 !important;
}

/* V5.5: Prix total produit - Label bleu, prix vert */
.vdk-produit-prix-col {
    padding: 16px 20px !important;
    background: rgba(0,0,0,0.03) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

/* V5.5: Prix total gazon - label bleu, prix vert */
.vdk-prix-total-label {
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: #2f5c69 !important;
    letter-spacing: 0.5px !important;
}

.vdk-prix-total-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.vdk-prix-total-barre {
    font-size: 16px !important;
    color: var(--vdk-text-muted) !important;
    text-decoration: line-through !important;
}

/* V5.5: Prix total gazon en VERT */
.vdk-prix-total-final {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: var(--vdk-primary) !important;
    line-height: 1 !important;
}

/* ==========================================================================
   ACCESSOIRES - V5.3: Radius sur titre
   ========================================================================== */

.vdk-accessoires-section {
    background: var(--vdk-white) !important;
    border-radius: var(--vdk-radius) !important;
    box-shadow: var(--vdk-shadow) !important;
    overflow: hidden !important;
}

/* V5.3: Titre avec radius en haut */
.vdk-accessoires-titre {
    background: var(--vdk-gradient-green) !important;
    color: var(--vdk-white) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 16px 24px !important;
    margin: 0 !important;
    border-radius: var(--vdk-radius) var(--vdk-radius) 0 0 !important;
}

/* Header accessoires */
.vdk-acc-header {
    display: grid !important;
    grid-template-columns: 50px 56px 1fr 80px 65px 85px !important;
    gap: 8px !important;
    padding: 12px 20px !important;
    background: transparent !important;
    border-bottom: 1px solid var(--vdk-border) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    color: var(--vdk-text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

.vdk-acc-list {
    padding: 0 !important;
    overflow: visible !important;
    background: white !important;
}

.vdk-acc-item {
    display: grid !important;
    grid-template-columns: 50px 56px 1fr 80px 65px 85px !important;
    gap: 8px !important;
    padding: 14px 20px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    align-items: center !important;
    position: relative !important;
    background: transparent !important;
    border-radius: 0 !important;
    transition: background 0.2s !important;
}

.vdk-acc-item:hover {
    background: #fafafa !important;
}

.vdk-acc-item:last-child {
    border-bottom: none !important;
}

.vdk-acc-item.disabled {
    opacity: 0.5 !important;
}

@media (max-width: 700px) {
    .vdk-acc-header {
        display: none !important;
    }
    .vdk-acc-item {
        grid-template-columns: 44px 48px 1fr 65px !important;
        gap: 8px !important;
    }
    .vdk-acc-prix-col {
        display: none !important;
    }
}

/* Toggle switch */
.vdk-toggle-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.vdk-switch {
    position: relative !important;
    display: inline-block !important;
    width: 44px !important;
    height: 24px !important;
}

.vdk-switch input {
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

.vdk-switch-slider {
    position: absolute !important;
    cursor: pointer !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-color: #ccc !important;
    border-radius: 24px !important;
    transition: 0.3s !important;
}

.vdk-switch-slider::before {
    position: absolute !important;
    content: "" !important;
    height: 18px !important;
    width: 18px !important;
    left: 3px !important;
    bottom: 3px !important;
    background-color: white !important;
    border-radius: 50% !important;
    transition: 0.3s !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
}

.vdk-switch input:checked + .vdk-switch-slider {
    background: var(--vdk-gradient-green) !important;
}

.vdk-switch input:checked + .vdk-switch-slider::before {
    transform: translateX(20px) !important;
}

/* Image accessoire */
.vdk-acc-img-wrap {
    width: 50px !important;
    height: 50px !important;
    border-radius: var(--vdk-radius-xs) !important;
    overflow: hidden !important;
    background: var(--vdk-bg-light) !important;
    border: 1px solid var(--vdk-border) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.vdk-acc-img-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding: 3px !important;
}

.vdk-acc-placeholder {
    font-size: 20px !important;
    color: #bbb !important;
}

/* Nom accessoire */
.vdk-acc-name-col {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    overflow: visible !important;
    position: relative !important;
}

.vdk-acc-name {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--vdk-text) !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.vdk-acc-prix-col {
    font-size: 13px !important;
    color: var(--vdk-text) !important;
    text-align: center !important;
}

.vdk-acc-qty-col {
    display: flex !important;
    justify-content: center !important;
}

.vdk-acc-qty-input {
    width: 55px !important;
    padding: 6px 4px !important;
    border: 1px solid var(--vdk-border) !important;
    border-radius: var(--vdk-radius-xs) !important;
    text-align: center !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    background: #fff !important;
}

.vdk-acc-qty-input:focus {
    outline: none !important;
    border-color: var(--vdk-primary) !important;
    box-shadow: 0 0 0 3px rgba(79,147,78,0.15) !important;
}

.vdk-acc-total-col {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--vdk-text) !important;
    text-align: right !important;
}

/* ==========================================================================
   TOOLTIPS
   ========================================================================== */

.vdk-tooltip-trigger {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    cursor: help !important;
}

.vdk-tooltip-icon {
    width: 16px !important;
    height: 16px !important;
    background: var(--vdk-primary) !important;
    color: white !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    margin-left: 6px !important;
    flex-shrink: 0 !important;
    transition: transform 0.2s ease !important;
}

.vdk-tooltip-icon:hover {
    transform: scale(1.1) !important;
}

.vdk-tooltip {
    position: absolute !important;
    bottom: calc(100% + 12px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: var(--vdk-primary) !important;
    color: white !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    padding: 10px 14px !important;
    border-radius: var(--vdk-radius-xs) !important;
    white-space: normal !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.2s ease !important;
    z-index: 99999 !important;
    box-shadow: 0 4px 16px rgba(79,147,78,0.4) !important;
    max-width: 240px !important;
    min-width: 180px !important;
    text-align: center !important;
    line-height: 1.4 !important;
    pointer-events: none !important;
}

.vdk-tooltip::after {
    content: '' !important;
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    border: 8px solid transparent !important;
    border-top-color: var(--vdk-primary) !important;
}

.vdk-tooltip-trigger:hover .vdk-tooltip,
.vdk-tooltip-trigger:focus .vdk-tooltip {
    opacity: 1 !important;
    visibility: visible !important;
}

/* ==========================================================================
   CONFIGURATION
   ========================================================================== */

.vdk-config-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.vdk-config-item {
    display: flex !important;
    align-items: center !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

.vdk-config-item:last-child {
    border-bottom: none !important;
}

.vdk-config-icon {
    width: 28px !important;
    height: 28px !important;
    margin-right: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    color: var(--vdk-primary) !important;
    background: var(--vdk-primary-light) !important;
    border-radius: 6px !important;
}

.vdk-config-icon svg {
    width: 14px !important;
    height: 14px !important;
    stroke: var(--vdk-primary) !important;
    stroke-width: 2 !important;
    fill: none !important;
}

.vdk-config-checkbox {
    width: 28px !important;
    height: 28px !important;
    background: var(--vdk-primary-light) !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 12px !important;
}

.vdk-config-checkbox svg {
    width: 14px !important;
    height: 14px !important;
    stroke: var(--vdk-primary) !important;
    stroke-width: 2.5 !important;
    fill: none !important;
}

.vdk-config-label {
    flex: 1 !important;
    font-size: 14px !important;
    color: var(--vdk-text-light) !important;
    font-weight: 400 !important;
}

.vdk-config-value {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--vdk-primary) !important;
    text-align: right !important;
}

/* ==========================================================================
   ROULEAUX
   ========================================================================== */

.vdk-rouleaux-section {
    margin-top: 16px !important;
    padding-top: 16px !important;
    border-top: 1px solid #f0f0f0 !important;
}

.vdk-rouleaux-section::before {
    display: none !important;
    content: none !important;
}

.vdk-rouleaux-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 12px !important;
}

.vdk-rouleaux-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--vdk-text) !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
}

.vdk-btn-modifier,
#vdk-btn-modifier-les,
button.vdk-btn-modifier {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 6px 14px !important;
    background: var(--vdk-primary) !important;
    color: white !important;
    border: none !important;
    border-radius: 50px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-transform: none !important;
    box-shadow: none !important;
}

.vdk-btn-modifier:hover,
#vdk-btn-modifier-les:hover,
button.vdk-btn-modifier:hover {
    background: var(--vdk-primary-dark) !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(79,147,78,0.3) !important;
}

.vdk-rouleaux-box {
    background: var(--vdk-bg-light) !important;
    border: 1px solid var(--vdk-border) !important;
    border-radius: var(--vdk-radius-sm) !important;
    padding: 14px 16px !important;
    font-size: 13px !important;
    line-height: 1.8 !important;
    color: var(--vdk-text) !important;
    white-space: pre-line !important;
}

/* Plan de pose masqué */
.vdk-plan-section {
    display: none !important;
}

/* ==========================================================================
   FOOTER PRIX - V5.5: Titre gauche, montant droite
   ========================================================================== */

.vdk-footer-prix {
    background: var(--vdk-gradient-blue) !important;
    border-radius: var(--vdk-radius) !important;
    padding: 24px !important;
    color: white !important;
    box-shadow: var(--vdk-shadow) !important;
    overflow: visible !important;
    height: auto !important;
    min-height: auto !important;
    position: relative !important;
}

/* V5.5: Header prix - titre gauche, montant droite */
.vdk-footer-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    margin-bottom: 16px !important;
}

.vdk-footer-titre {
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    opacity: 1 !important;
    margin: 0 !important;
    font-weight: 700 !important;
}

.vdk-footer-montant {
    font-size: 36px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    margin: 0 !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

.vdk-footer-details {
    border-top: 1px solid rgba(255,255,255,0.2) !important;
    padding-top: 14px !important;
    margin-bottom: 20px !important;
}

.vdk-footer-ligne {
    display: flex !important;
    justify-content: space-between !important;
    font-size: 14px !important;
    padding: 4px 0 !important;
    opacity: 1 !important;
}

.vdk-footer-ligne span {
    opacity: 0.9 !important;
}

.vdk-footer-ligne strong {
    font-weight: 700 !important;
    opacity: 1 !important;
}

/* ==========================================================================
   BOUTONS ACTIONS FOOTER - V5.4: Reset text-align
   ========================================================================== */

.vdk-footer-actions {
    display: flex !important;
    gap: 12px !important;
    text-align: left !important;
}

.vdk-footer-actions.hidden {
    display: none !important;
}

.vdk-btn-action,
button.vdk-btn-action {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 14px 20px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    border: none !important;
}

.vdk-btn-icon-svg {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
}

.vdk-btn-devis,
button.vdk-btn-devis,
#vdk-btn-devis {
    background: rgba(255,255,255,0.15) !important;
    color: white !important;
    border: 2px solid rgba(255,255,255,0.4) !important;
    border-radius: 12px !important;
}

.vdk-btn-devis:hover,
button.vdk-btn-devis:hover,
#vdk-btn-devis:hover {
    background: rgba(255,255,255,0.25) !important;
    border-color: rgba(255,255,255,0.6) !important;
}

.vdk-btn-commander,
button.vdk-btn-commander,
#vdk-btn-panier {
    background: white !important;
    color: var(--vdk-blue) !important;
    border: none !important;
    border-radius: 12px !important;
}

.vdk-btn-commander::before,
button.vdk-btn-commander::before,
#vdk-btn-panier::before,
.vdk-footer-actions .vdk-btn-commander::before {
    display: none !important;
    content: none !important;
}

.vdk-btn-commander:hover,
button.vdk-btn-commander:hover,
#vdk-btn-panier:hover {
    background: #f0f8ff !important;
    box-shadow: 0 4px 16px rgba(255,255,255,0.3) !important;
}

/* État loading */
.vdk-btn-action.loading {
    pointer-events: none !important;
    opacity: 0.7 !important;
}

.vdk-btn-action.loading::after {
    content: '' !important;
    width: 16px !important;
    height: 16px !important;
    border: 2px solid currentColor !important;
    border-top-color: transparent !important;
    border-radius: 50% !important;
    animation: vdk-spin 0.8s linear infinite !important;
    margin-left: 8px !important;
}

@keyframes vdk-spin {
    to { transform: rotate(360deg); }
}

@media (max-width: 500px) {
    .vdk-footer-actions {
        flex-direction: column !important;
    }
    .vdk-footer-montant {
        font-size: 34px !important;
    }
}

/* ==========================================================================
   FORMULAIRE DEVIS - V5.4: Dans le cadre, textes renforcés
   ========================================================================== */

.vdk-devis-form {
    display: none !important;
    margin-top: 20px !important;
    padding-top: 20px !important;
    border-top: 1px solid rgba(255,255,255,0.2) !important;
    text-align: left !important;
}

.vdk-devis-form.active {
    display: block !important;
}

.vdk-devis-intro {
    font-size: 14px !important;
    opacity: 1 !important;
    margin: 0 0 16px 0 !important;
    color: white !important;
    font-weight: 500 !important;
}

.vdk-form-row {
    margin-bottom: 12px !important;
}

.vdk-form-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
}

@media (max-width: 400px) {
    .vdk-form-grid {
        grid-template-columns: 1fr !important;
    }
}

/* V5.4: Champs de formulaire - placeholders plus visibles */
.vdk-devis-form .vdk-input,
#vdk-devis-prenom,
#vdk-devis-nom,
#vdk-devis-email,
#vdk-devis-tel,
.vdk-footer-prix .vdk-input {
    width: 100% !important;
    padding: 14px 16px !important;
    border: 2px solid #e0e0e0 !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    color: #333 !important;
    font-size: 15px !important;
    transition: all 0.2s !important;
}

.vdk-devis-form .vdk-input::placeholder,
#vdk-devis-prenom::placeholder,
#vdk-devis-nom::placeholder,
#vdk-devis-email::placeholder,
#vdk-devis-tel::placeholder,
.vdk-footer-prix .vdk-input::placeholder {
    color: #666 !important;
    opacity: 1 !important;
}

.vdk-devis-form .vdk-input:focus,
#vdk-devis-prenom:focus,
#vdk-devis-nom:focus,
#vdk-devis-email:focus,
#vdk-devis-tel:focus,
.vdk-footer-prix .vdk-input:focus {
    outline: none !important;
    border-color: var(--vdk-primary) !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(79,147,78,0.15) !important;
}

.vdk-input.vdk-input-error {
    border-color: #e53935 !important;
    background: #fff5f5 !important;
}

/* Textarea - V5.4 */
.vdk-devis-form .vdk-textarea,
#vdk-devis-msg,
.vdk-footer-prix .vdk-textarea {
    width: 100% !important;
    padding: 14px 16px !important;
    border: 2px solid #e0e0e0 !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    color: #333 !important;
    font-size: 15px !important;
    resize: vertical !important;
    min-height: 80px !important;
    font-family: inherit !important;
}

.vdk-devis-form .vdk-textarea::placeholder,
#vdk-devis-msg::placeholder,
.vdk-footer-prix .vdk-textarea::placeholder {
    color: #666 !important;
    opacity: 1 !important;
}

.vdk-devis-form .vdk-textarea:focus,
#vdk-devis-msg:focus,
.vdk-footer-prix .vdk-textarea:focus {
    outline: none !important;
    border-color: var(--vdk-primary) !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(79,147,78,0.15) !important;
}

/* Boutons formulaire devis */
.vdk-devis-actions {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 16px !important;
    gap: 12px !important;
}

/* Bouton Annuler */
.vdk-link-annuler,
#vdk-devis-cancel,
button.vdk-link-annuler {
    background: transparent !important;
    border: 2px solid rgba(255,255,255,0.4) !important;
    color: white !important;
    font-size: 13px !important;
    cursor: pointer !important;
    padding: 12px 20px !important;
    text-decoration: none !important;
    border-radius: 12px !important;
    transition: all 0.2s !important;
    font-weight: 600 !important;
}

.vdk-link-annuler:hover,
#vdk-devis-cancel:hover,
button.vdk-link-annuler:hover {
    color: white !important;
    background: rgba(255,255,255,0.15) !important;
    border-color: rgba(255,255,255,0.6) !important;
}

/* Bouton Envoyer */
#vdk-devis-submit,
.vdk-devis-form .vdk-btn-commander,
button#vdk-devis-submit {
    flex: 1 !important;
    padding: 14px 24px !important;
    background: #ffffff !important;
    color: var(--vdk-blue) !important;
    border: none !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    position: relative !important;
}

#vdk-devis-submit:hover,
.vdk-devis-form .vdk-btn-commander:hover,
button#vdk-devis-submit:hover {
    background: #f0f8ff !important;
    box-shadow: 0 4px 16px rgba(255,255,255,0.3) !important;
}

/* V5.5: Spinner injecté en HTML - Design moderne blanc */
.vdk-spinner {
    display: inline-block !important;
    width: 18px !important;
    height: 18px !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-top-color: #ffffff !important;
    border-radius: 50% !important;
    animation: vdk-spin 0.7s linear infinite !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
    margin-right: 8px !important;
}

/* V5.5: Bouton loading avec fond bleu pour contraste spinner blanc */
#vdk-devis-submit.loading,
button#vdk-devis-submit.loading,
.vdk-btn-commander#vdk-devis-submit.loading {
    pointer-events: none !important;
    background: var(--vdk-blue) !important;
    color: #ffffff !important;
    justify-content: center !important;
    position: relative !important;
    gap: 0 !important;
}

/* Supprimer les anciens ::before et ::after */
#vdk-devis-submit.loading::before,
button#vdk-devis-submit.loading::before,
.vdk-btn-commander#vdk-devis-submit.loading::before,
button.vdk-btn-commander#vdk-devis-submit.loading::before {
    display: none !important;
    content: none !important;
}

/* Supprimer l'ancien ::after */
#vdk-devis-submit.loading::after,
button#vdk-devis-submit.loading::after {
    display: none !important;
}

/* Bouton télécharger PDF masqué */
#vdk-btn-pdf,
.vdk-btn-pdf,
button[id*="pdf"],
button[class*="pdf"],
.vdk-download-pdf {
    display: none !important;
}

/* ==========================================================================
   POPUP MODIFICATION LÉS
   ========================================================================== */

.vdk-popup-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0,0,0,0.6) !important;
    backdrop-filter: blur(4px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 999999 !important;
    padding: 20px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.3s ease !important;
}

.vdk-popup-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
}

.vdk-popup-container {
    background: white !important;
    border-radius: var(--vdk-radius) !important;
    width: 100% !important;
    max-width: 780px !important;
    max-height: 90vh !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 25px 80px rgba(0,0,0,0.4) !important;
    transform: translateY(30px) scale(0.95) !important;
    opacity: 0 !important;
    transition: all 0.3s ease !important;
    overflow: hidden !important;
}

.vdk-popup-overlay.active .vdk-popup-container {
    transform: translateY(0) scale(1) !important;
    opacity: 1 !important;
}

.vdk-popup-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 16px 22px !important;
    background: var(--vdk-gradient-green) !important;
    color: white !important;
}

.vdk-popup-header h3 {
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: white !important;
}

.vdk-popup-close {
    width: 34px !important;
    height: 34px !important;
    background: rgba(255,255,255,0.2) !important;
    border: none !important;
    border-radius: 50% !important;
    color: white !important;
    font-size: 20px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    transition: background 0.2s !important;
}

.vdk-popup-close:hover {
    background: rgba(255,255,255,0.3) !important;
}

.vdk-popup-body {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 20px !important;
}

.vdk-popup-info {
    display: flex !important;
    gap: 10px !important;
    padding: 12px 16px !important;
    background: #fff8e1 !important;
    border-radius: var(--vdk-radius-sm) !important;
    margin-bottom: 16px !important;
    font-size: 12px !important;
    color: #795548 !important;
    border-left: 4px solid #ffc107 !important;
}

.vdk-info-icon {
    font-size: 16px !important;
    flex-shrink: 0 !important;
}

.vdk-les-table {
    border: 1px solid var(--vdk-border) !important;
    border-radius: var(--vdk-radius-sm) !important;
    overflow: hidden !important;
}

.vdk-les-header {
    display: grid !important;
    grid-template-columns: 55px 95px 120px 60px 90px 80px !important;
    gap: 8px !important;
    padding: 12px 16px !important;
    background: var(--vdk-bg-light) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    color: var(--vdk-text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

.vdk-les-body {
    max-height: 280px !important;
    overflow-y: auto !important;
}

.vdk-le-row {
    display: grid !important;
    grid-template-columns: 55px 95px 120px 60px 90px 80px !important;
    gap: 8px !important;
    padding: 12px 16px !important;
    border-top: 1px solid var(--vdk-border) !important;
    align-items: center !important;
}

.vdk-le-row:hover {
    background: var(--vdk-bg-light) !important;
}

.vdk-le-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 40px !important;
    height: 26px !important;
    background: var(--vdk-gradient-green) !important;
    color: white !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    border-radius: 5px !important;
    padding: 0 6px !important;
}

.vdk-select,
.vdk-le-row .vdk-input {
    width: 100% !important;
    padding: 8px 10px !important;
    border: 1px solid var(--vdk-border) !important;
    border-radius: var(--vdk-radius-xs) !important;
    font-size: 12px !important;
    background: white !important;
    color: var(--vdk-text) !important;
}

.vdk-select:focus,
.vdk-le-row .vdk-input:focus {
    outline: none !important;
    border-color: var(--vdk-primary) !important;
    box-shadow: 0 0 0 3px rgba(79,147,78,0.15) !important;
}

.vdk-input-group {
    display: flex !important;
}

.vdk-input-group .vdk-input {
    border-radius: var(--vdk-radius-xs) 0 0 var(--vdk-radius-xs) !important;
    border-right: none !important;
}

.vdk-input-suffix {
    padding: 8px 10px !important;
    background: var(--vdk-bg-light) !important;
    border: 1px solid var(--vdk-border) !important;
    border-radius: 0 var(--vdk-radius-xs) var(--vdk-radius-xs) 0 !important;
    font-size: 11px !important;
    color: var(--vdk-text-muted) !important;
    display: flex !important;
    align-items: center !important;
}

.vdk-le-surface {
    font-weight: 600 !important;
    font-size: 12px !important;
    color: var(--vdk-text) !important;
}

.vdk-col-actions {
    display: flex !important;
    gap: 6px !important;
    justify-content: center !important;
}

.vdk-btn-icon {
    width: 30px !important;
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: white !important;
    border: 1px solid var(--vdk-border) !important;
    border-radius: var(--vdk-radius-xs) !important;
    cursor: pointer !important;
    font-size: 13px !important;
    transition: all 0.2s ease !important;
}

.vdk-btn-icon:hover {
    background: var(--vdk-bg-light) !important;
    border-color: var(--vdk-primary) !important;
}

.vdk-btn-icon.disabled {
    opacity: 0.35 !important;
    cursor: not-allowed !important;
}

.vdk-btn-add-le,
button.vdk-btn-add-le,
#vdk-add-le {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 12px !important;
    margin-top: 16px !important;
    background: var(--vdk-primary-light) !important;
    color: var(--vdk-primary) !important;
    border: 2px dashed var(--vdk-primary) !important;
    border-radius: 50px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.vdk-btn-add-le:hover,
button.vdk-btn-add-le:hover,
#vdk-add-le:hover {
    background: var(--vdk-primary) !important;
    color: white !important;
    border-style: solid !important;
}

.vdk-popup-summary {
    margin-top: 16px !important;
    padding: 14px 18px !important;
    background: var(--vdk-primary-light) !important;
    border-radius: var(--vdk-radius-sm) !important;
    border: 1px solid rgba(79,147,78,0.2) !important;
}

.vdk-summary-row {
    display: flex !important;
    justify-content: space-between !important;
    padding: 4px 0 !important;
    font-size: 13px !important;
}

.vdk-summary-row strong {
    color: var(--vdk-primary) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
}

.vdk-popup-footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 16px 22px !important;
    border-top: 1px solid var(--vdk-border) !important;
    background: var(--vdk-bg-light) !important;
}

.vdk-btn-reset,
button.vdk-btn-reset,
#vdk-reset-les {
    padding: 10px 20px !important;
    background: white !important;
    color: var(--vdk-text-muted) !important;
    border: 1px solid var(--vdk-border) !important;
    border-radius: 50px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

.vdk-btn-reset:hover,
button.vdk-btn-reset:hover,
#vdk-reset-les:hover {
    background: var(--vdk-bg-light) !important;
    color: var(--vdk-text) !important;
}

.vdk-popup-actions {
    display: flex !important;
    gap: 12px !important;
}

.vdk-btn-cancel,
button.vdk-btn-cancel,
#vdk-cancel-les {
    padding: 10px 20px !important;
    background: transparent !important;
    color: var(--vdk-text-muted) !important;
    border: 1px solid var(--vdk-border) !important;
    border-radius: 50px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
}

.vdk-btn-cancel:hover,
button.vdk-btn-cancel:hover,
#vdk-cancel-les:hover {
    color: var(--vdk-text) !important;
    background: rgba(0,0,0,0.05) !important;
}

.vdk-btn-confirm,
button.vdk-btn-confirm,
#vdk-confirm-les {
    padding: 12px 28px !important;
    background: var(--vdk-gradient-green) !important;
    color: white !important;
    border: none !important;
    border-radius: 50px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.vdk-btn-confirm:hover,
button.vdk-btn-confirm:hover,
#vdk-confirm-les:hover {
    box-shadow: 0 4px 12px rgba(79,147,78,0.3) !important;
}

@media (max-width: 650px) {
    .vdk-les-header {
        display: none !important;
    }
    .vdk-le-row {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
    .vdk-col-ref {
        grid-column: 1 / -1 !important;
    }
    .vdk-popup-footer {
        flex-direction: column !important;
        gap: 10px !important;
    }
    .vdk-popup-actions {
        width: 100% !important;
        justify-content: flex-end !important;
    }
}

/* ==========================================================================
   MESSAGES & ERREURS
   ========================================================================== */

.vdk-error {
    background: linear-gradient(135deg, #fff5f5 0%, #ffe0e0 100%) !important;
    border: 2px solid #e53935 !important;
    border-radius: var(--vdk-radius) !important;
    padding: 50px !important;
    text-align: center !important;
}

.vdk-error h3 {
    color: #c62828 !important;
    margin: 0 0 16px !important;
    font-size: 20px !important;
}

.vdk-error p {
    color: var(--vdk-text-light) !important;
    margin: 10px 0 !important;
    font-size: 14px !important;
}

/* Toast */
.vdk-toast {
    position: fixed !important;
    bottom: 30px !important;
    right: 30px !important;
    background: var(--vdk-primary) !important;
    color: white !important;
    padding: 16px 24px !important;
    border-radius: var(--vdk-radius-sm) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.2) !important;
    z-index: 9999999 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    transform: translateY(100px) !important;
    opacity: 0 !important;
    transition: all 0.3s ease !important;
}

.vdk-toast.show {
    transform: translateY(0) !important;
    opacity: 1 !important;
}

.vdk-toast.error {
    background: #e53935 !important;
}

.vdk-toast-icon {
    font-size: 20px !important;
}

.vdk-toast-text {
    font-size: 14px !important;
    font-weight: 500 !important;
}

/* Hide GF buttons */
#gform_page_2_10 .gform_page_footer {
    display: none !important;
}

/* ==========================================================================
   V5.5: Styles pour la page récap UNIQUEMENT (via classe body)
   Ces styles ne s'appliquent que quand on est sur la page 10
   ========================================================================== */

/* Quand la page récap est active, permettre aux conteneurs de s'étendre */
body.vdk-page-recap-active #gform_2,
body.vdk-page-recap-active #gform_wrapper_2,
body.vdk-page-recap-active .gform_wrapper,
body.vdk-page-recap-active .gform_body,
body.vdk-page-recap-active .gform-body {
    overflow: visible !important;
    height: auto !important;
    min-height: auto !important;
}

body.vdk-page-recap-active #gform_page_2_10 {
    overflow: visible !important;
    height: auto !important;
}

/* Cibler le swiper-slide qui contient la page 10 */
body.vdk-page-recap-active .swiper-slide-active,
body.vdk-page-recap-active .swiper-wrapper,
body.vdk-page-recap-active .swiper {
    overflow: visible !important;
    height: auto !important;
}

/* ==========================================================================
   V5.6: BARRE DE PROGRESSION SOUMISSION DEVIS
   ========================================================================== */

.vdk-progress-zone {
    margin-top: 20px !important;
    padding: 20px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    opacity: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    transition: all 0.4s ease !important;
}

.vdk-progress-zone.active {
    opacity: 1 !important;
    max-height: 120px !important;
    padding: 20px !important;
}

.vdk-progress-bar {
    width: 100% !important;
    height: 8px !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    margin-bottom: 12px !important;
}

.vdk-progress-fill {
    height: 100% !important;
    width: 0% !important;
    background: linear-gradient(90deg, #4CAF50 0%, #8BC34A 50%, #CDDC39 100%) !important;
    border-radius: 4px !important;
    transition: width 0.5s ease-out !important;
    position: relative !important;
}

.vdk-progress-fill::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.3) 50%,
        transparent 100%
    ) !important;
    animation: shimmer 1.5s infinite !important;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.vdk-progress-text {
    text-align: center !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0.3px !important;
}

/* Animation du texte */
.vdk-progress-text {
    animation: fadeInText 0.3s ease !important;
}

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

/* Formulaire désactivé pendant le chargement */
#vdk-devis-inline input:disabled,
#vdk-devis-inline textarea:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

/* Bouton submit compact pendant le loading */
#vdk-devis-submit.loading {
    font-size: 13px !important;
    padding: 12px 20px !important;
    min-width: auto !important;
}