/* ========================================
   CONFIGURATEUR PRODUIT - FRAMEWORK CSS
   ======================================== 
   
   Framework générique pour créer des configurateurs de produits
   Compatible avec tous les projets e-commerce WordPress/WooCommerce
*/

/* Titre du configurateur */
.configurateur-title {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e0e0e0;
}

.configurateur-title-text {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    line-height: 1.4;
}

/* Conteneur principal - Version compacte */
.configurateur-framework {
    margin: 10px 0;
    clear: both;
    width: 100%;
}

.configurateur-framework .variations {
    width: 100% !important;
    border-collapse: collapse;
    display: table !important;
    table-layout: auto !important;
}

.configurateur-framework .variations tbody {
    display: table-row-group !important;
}


.configurateur-framework .variations tr {
    display: table-row !important;
}
	
	
/*
.configurateur-framework .variations tr {
    display: inline-block !important;
}

@media (max-width: 768px) {
	.configurateur-framework .variations tr {
	    display: table-row !important;
	}	
}
*/

.configurateur-framework .variations th.label {
    width: 120px;
    padding: 5px 10px 5px 0;
    vertical-align: top;
    text-align: left;
    font-weight: 600;
    font-size: 14px;
    display: table-cell !important;
}

.configurateur-framework .variations td.value {
    padding: 0;
    display: table-cell !important;
    width: 100%;
}

/*
.configurateur-framework .variations td.value .configurateur-field {
    margin-right: 20px;
}
*/

/* ========================================
   TYPE SELECT (Harmonisé avec radio)
   ======================================== */

.configurateur-framework .type-select .configurateur-field-label {
    margin-bottom: 2px;
    font-size: 13px;
    color: #333;
}

.configurateur-framework .type-select .configurateur-option-select {
    width: 100%;
    padding: 6px 40px 6px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.6em;
    color: #333;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: all 0.2s ease;
}

.configurateur-framework .type-select .configurateur-option-select:hover {
    border-color: #007cba;
    background-color: #f0f8ff;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007cba' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
}

/* Style d'erreur pour les champs select non remplis */
.configurateur-framework .configurateur-field-error {
    border-left: 3px solid #dc3232;
    padding-left: 8px;
}

.configurateur-framework .configurateur-select-error {
    border-color: #dc3232 !important;
    background-color: #fff5f5 !important;
}

.configurateur-framework .configurateur-select-error:focus {
    border-color: #dc3232 !important;
    box-shadow: 0 0 0 3px rgba(220, 50, 50, 0.1) !important;
}

.configurateur-framework .type-select .configurateur-option-select:hover {
    border-color: #007cba;
    background-color: #f0f8ff;
}

/* Description et bouton d'aide pour tous les types de champs */
.configurateur-field-description {
    margin-top: 6px;
    margin-bottom: 8px;
    font-size: 12px;
    color: #666;
    line-height: 1.5;
}

/* Permettre le HTML dans la description */
.configurateur-field-description b,
.configurateur-field-description strong {
    font-weight: 600;
    color: #333;
}

.configurateur-field-description br {
    display: block;
    content: "";
    margin-top: 4px;
}

.configurateur-field-help-button {
    margin-top: 6px;
    margin-bottom: 10px;
}

.configurateur-help-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    font-size: 12px;
    color: #007cba;
    text-decoration: none;
    border: 1px solid #007cba;
    border-radius: 4px;
    background: #fff;
    transition: all 0.2s ease;
}

.configurateur-help-link:hover {
    background: #007cba;
    color: #fff;
    text-decoration: none;
}

.configurateur-help-link .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    line-height: 1;
}

.configurateur-framework .type-select .configurateur-option-select:focus {
    outline: none;
    border-color: #007cba;
    box-shadow: 0 0 0 3px rgba(0, 124, 186, 0.1);
}

.configurateur-framework .type-select .configurateur-option-select option {
    padding: 8px 12px;
    font-size: 14px;
    color: #333;
}

/* ========================================
   TYPE COLOR (Pastilles de couleur)
   ======================================== */

.configurateur-framework .type-color .configurateur-field-label {
    margin-bottom: 2px;
    font-size: 13px;
    color: #333;
}

.configurateur-framework .type-color .configurateur-color-wrapper {
    display: flex;
    flex-wrap: wrap;
}

.configurateur-framework .type-color .configurateur-color-option {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2px;
    border-radius: 6px;
    transition: all 0.2s ease;
    position: relative;
}

.configurateur-framework .type-color .configurateur-color-tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    background: #1a1a1a;
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
    letter-spacing: 0.01em;
}

.configurateur-framework .type-color .configurateur-color-tooltip::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #1a1a1a;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1));
}

.configurateur-framework .type-color .configurateur-color-option:hover .configurateur-color-tooltip,
.configurateur-framework .type-color .configurateur-color-option:focus-within .configurateur-color-tooltip,
.configurateur-framework .type-color .configurateur-color-option.tooltip-active .configurateur-color-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Gestion mobile : tooltip plus grand et mieux positionné */
@media (hover: none) and (pointer: coarse) {
    .configurateur-framework .type-color .configurateur-color-tooltip {
        font-size: 13px;
        padding: 10px 14px;
        bottom: calc(100% + 12px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.15);
    }
    
    .configurateur-framework .type-color .configurateur-color-tooltip::before {
        border-width: 7px;
    }
}

.configurateur-framework .type-color .configurateur-color-option:hover {
    background: #f8f9fa;
}

.configurateur-framework .type-color .configurateur-color-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.configurateur-framework .type-color .configurateur-color-preview {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #ddd;
    overflow: hidden;
    transition: all 0.2s ease;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.configurateur-framework .type-color .configurateur-color-preview img {
    width: 110%;
    height: 110%;
    object-fit: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.configurateur-framework .type-color .configurateur-color-preview span {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
}

.configurateur-framework .type-color .configurateur-color-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(-5px);
    background: #333;
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.configurateur-framework .type-color .configurateur-color-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
}

.configurateur-framework .type-color .configurateur-color-option:hover .configurateur-color-tooltip,
.configurateur-framework .type-color .configurateur-color-option:focus-within .configurateur-color-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.configurateur-framework .type-color .configurateur-color-option input[type="radio"]:checked + .configurateur-color-preview {
    border-color: #007cba;
    box-shadow: 0 0 0 2px rgba(0, 124, 186, 0.2);
}

.configurateur-framework .type-color .configurateur-color-option input[type="radio"]:checked + .configurateur-color-preview::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #007cba;
    color: white;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: bold;
}

.configurateur-framework .type-color .configurateur-color-text {
    font-size: 12px;
    color: #666;
    text-align: center;
    max-width: 60px;
    line-height: 1.2;
}

.configurateur-framework .type-color .configurateur-color-option input[type="radio"]:checked ~ .configurateur-color-text {
    color: #007cba;
    font-weight: 600;
}

/* ========================================
   TYPE CHECKBOX (Case à cocher)
   ======================================== */

.configurateur-framework .type-checkbox .configurateur-checkbox-wrapper {
    margin-top: 4px;
}

.configurateur-framework .type-checkbox .configurateur-checkbox-label {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    transition: all 0.2s ease;
    background: #fff;
}

.configurateur-framework .type-checkbox .configurateur-checkbox-label:hover {
    border-color: #007cba;
    background: #f0f8ff;
}

.configurateur-framework .type-checkbox .configurateur-checkbox-input {
    width: 18px;
    height: 18px;
    accent-color: #007cba;
}

.configurateur-framework .type-checkbox .configurateur-checkbox-text {
    font-size: 13px;
    color: #333;
    font-weight: 500;
}

.configurateur-framework .type-checkbox .configurateur-checkbox-label:has(.configurateur-checkbox-input:checked) {
    border-color: #007cba;
    background: #f0f8ff;
}

.configurateur-framework .type-checkbox .configurateur-checkbox-label:has(.configurateur-checkbox-input:checked) .configurateur-checkbox-text {
    color: #007cba;
}

/* ========================================
   TYPE RADIO (Boutons radio)
   ======================================== */

.configurateur-framework .type-radio .configurateur-field-label {
    margin-bottom: 2px;
    font-size: 13px;
    color: #333;
}

.configurateur-framework .type-radio .configurateur-radio-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
}

.configurateur-framework .type-radio .configurateur-radio-label {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 4px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    transition: all 0.2s ease;
    background: #fff;
}

.configurateur-framework .type-radio .configurateur-radio-label:hover {
    border-color: #007cba;
    background: #f0f8ff;
}

.configurateur-framework .type-radio .configurateur-radio-input {
    width: 14px;
    height: 14px;
    accent-color: #007cba;
}

.configurateur-framework .type-radio .configurateur-radio-text {
    font-size: 12px;
    color: #333;
    font-weight: 500;
}

.configurateur-framework .type-radio .configurateur-radio-label.selected {
    border-color: #007cba !important;
    background: #f0f8ff !important;
}

.configurateur-framework .type-radio .configurateur-radio-label:has(.configurateur-radio-input:checked):not(.selected) {
    border-color: #007cba;
    background: #f0f8ff;
}

.configurateur-framework .type-radio .configurateur-radio-label.selected .configurateur-radio-text {
    color: #007cba !important;
}

.configurateur-framework .type-radio .configurateur-radio-label:has(.configurateur-radio-input:checked):not(.selected) .configurateur-radio-text {
    color: #007cba;
}

/* Image preview au survol */
.configurateur-framework .type-radio .configurateur-radio-label {
    position: relative;
}

.configurateur-framework .type-radio .configurateur-image-preview {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    z-index: 99999 !important;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 150px;
    max-width: 300px;
    pointer-events: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
}

.configurateur-framework .type-radio .configurateur-radio-label:hover .configurateur-image-preview,
.configurateur-framework .type-radio .configurateur-radio-label:focus-within .configurateur-image-preview {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.configurateur-framework .type-radio .configurateur-image-preview img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
    max-height: 300px;
    object-fit: contain;
}

/* Ajuster le z-index pour éviter les conflits avec d'autres éléments */
.configurateur-framework .type-radio .configurateur-radio-wrapper {
    position: relative;
}

/* Quand un label est survolé, augmenter le z-index du wrapper parent ET du label */
.configurateur-framework .type-radio .configurateur-radio-label:hover {
    z-index: 100 !important;
    position: relative;
}

/* S'assurer que le wrapper parent a aussi un z-index élevé quand un enfant est survolé */
.configurateur-framework .type-radio .configurateur-radio-wrapper:hover {
    z-index: 100;
    position: relative;
}

/* ========================================
   RESPONSIVE - IMAGE PREVIEW
   ======================================== */

/* Tablettes et écrans moyens */
@media (max-width: 1024px) {
    .configurateur-framework .type-radio .configurateur-image-preview {
        max-width: 250px;
        padding: 6px;
    }
    
    .configurateur-framework .type-radio .configurateur-image-preview img {
        max-height: 250px;
    }
}

/* Tablettes en mode portrait et petits écrans */
@media (max-width: 768px) {
    .configurateur-framework .type-radio .configurateur-image-preview {
        max-width: 300px; /* 200px + 50% = 300px */
        min-width: 180px; /* 120px + 50% = 180px */
        padding: 6px;
        top: calc(100% + 6px);
    }
    
    .configurateur-framework .type-radio .configurateur-image-preview img {
        max-height: 300px; /* 200px + 50% = 300px */
    }
}

/* Mobiles */
@media (max-width: 480px) {
    .configurateur-framework .type-radio .configurateur-image-preview {
        max-width: 270px; /* 180px + 50% = 270px */
        min-width: 150px; /* 100px + 50% = 150px */
        padding: 4px;
        top: calc(100% + 4px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    }
    
    /* Si l'image doit s'afficher au-dessus (géré par JS) */
    .configurateur-framework .type-radio .configurateur-image-preview[style*="bottom"] {
        top: auto;
    }
    
    .configurateur-framework .type-radio .configurateur-image-preview img {
        max-height: 225px; /* 150px + 50% = 225px */
    }
}

/* Très petits écrans */
@media (max-width: 360px) {
    .configurateur-framework .type-radio .configurateur-image-preview {
        max-width: 225px; /* 150px + 50% = 225px */
        min-width: 120px; /* 80px + 50% = 120px */
        padding: 3px;
    }
    
    .configurateur-framework .type-radio .configurateur-image-preview img {
        max-height: 180px; /* 120px + 50% = 180px */
    }
}

/* Gestion des appareils tactiles - afficher l'image au tap au lieu du hover */
@media (hover: none) and (pointer: coarse) {
    .configurateur-framework .type-radio .configurateur-radio-label:hover .configurateur-image-preview,
    .configurateur-framework .type-radio .configurateur-radio-label:focus-within .configurateur-image-preview {
        /* Sur mobile, on peut utiliser un système de tap pour afficher l'image */
        /* Pour l'instant, on garde le hover mais avec un comportement différent */
    }
    
    /* Sur mobile, rendre l'image plus accessible */
    .configurateur-framework .type-radio .configurateur-image-preview {
        max-width: 90vw;
        left: 50%;
        transform: translateX(-50%);
    }
}

/* ========================================
   MESSAGES
   ======================================== */

.configurateur-message {
    padding: 12px;
    border-radius: 4px;
    margin: 10px 0;
    font-size: 14px;
}

.configurateur-message.warning {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    color: #856404;
}

.configurateur-message.error {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

.configurateur-message.success {
    background: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}

/* ========================================
   AFFICHAGE DU PRIX - BOÎTE FLOTTANTE
   ======================================== */

.configurateur-price-display {
    position: fixed !important;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(0) !important;
    z-index: 9999 !important;
    
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
/*     border: 2px solid #28a745; */
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(10px);
    padding: 12px 16px;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: slideInFromBottom 0.6s ease-out;
}

.configurateur-price-display:hover {
    transform: translateX(-50%) translateY(-2px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.configurateur-price-display h3 {
    margin: 0;
    color: #28a745;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
}

.configurateur-price-display .price-extra {
    color: #6c757d;
    font-size: 10px;
    margin-top: 3px;
    line-height: 1.3;
}

.configurateur-price-display .price-extra .extra-badge {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    margin-right: 4px;
    font-size: 9px;
    font-weight: 600;
    display: inline-block;
    box-shadow: 0 1px 3px rgba(40, 167, 69, 0.3);
}

.configurateur-price-display .price-base {
    color: #6c757d;
    font-size: 9px;
    margin-top: 3px;
    font-style: italic;
}

/* Animation d'entrée */
@keyframes slideInFromBottom {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Animation de mise à jour du prix */
@keyframes priceUpdate {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
    100% {
        transform: scale(1);
    }
}

.configurateur-price-display.price-updating h3 {
    animation: priceUpdate 0.4s ease-in-out;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    .configurateur-framework {
        margin: 5px 0;
    }
    
    .configurateur-framework .variations th.label {
        padding: 3px 8px 3px 0;
        font-size: 13px;
    }
    
    .configurateur-framework .variations td.value {
        padding: 3px 0;
    }
    
    .configurateur-framework .type-color .configurateur-color-wrapper {
        gap: 6px;
    }
    
/*
    .configurateur-framework .type-color .configurateur-color-preview {
        width: 20px;
        height: 20px;
    }
*/
    
    .configurateur-framework .type-radio .configurateur-radio-wrapper {
        gap: 6px;
    }
    
    .configurateur-framework .type-radio .configurateur-radio-label {
        padding: 6px;
        flex: 1;
        min-width: 120px;
    }
    
    .configurateur-framework .type-checkbox .configurateur-checkbox-label {
        padding: 6px;
    }
    
    
/*
    .configurateur-price-display h3 {
        font-size: 14px;
    }
*/
    
    .configurateur-price-display .price-extra {
        font-size: 9px;
    }
    
    .configurateur-price-display .price-extra .extra-badge {
        font-size: 8px;
        padding: 1px 4px;
    }
}

/* ========================================
   RESPONSIVE - TRÈS PETITS ÉCRANS
   ======================================== */

@media (max-width: 480px) {
    
/*
    
    .configurateur-price-display h3 {
        font-size: 13px;
        margin-bottom: 4px;
    }
*/
    
    .configurateur-price-display .price-extra {
        font-size: 8px;
    }
    
    .configurateur-price-display .price-extra .extra-badge {
        font-size: 7px;
        padding: 1px 3px;
        margin-right: 3px;
    }
}

/* ========================================
   RESPONSIVE - ÉCRANS LARGES
   ======================================== */

@media (min-width: 1200px) {
    
    
/*
    .configurateur-price-display h3 {
        font-size: 18px;
    }
*/
    
    .configurateur-price-display .price-extra {
        font-size: 11px;
    }
}

/* ========================================
   ANIMATIONS
   ======================================== */

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


/* ========================================
   CHAMPS CACHÉS
   ======================================== */

#configurateur-hidden-fields {
    display: none;
}

/* ========================================
   OPTIONS PANIER
   ======================================== */

.configurateur-cart-options {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.3;
}

.configurateur-cart-options .configurateur-options-container {
    background: #f8f9fa;
    padding: 8px;
    border-radius: 4px;
    border-left: 3px solid #007cba;
}

.configurateur-cart-options .configurateur-options-title {
    color: #007cba;
    margin: 0 0 6px 0;
    font-size: 13px;
    font-weight: 600;
}

.configurateur-cart-options .configurateur-option-item {
    margin: 3px 0;
    padding: 2px 0;
    display: block;
}

.configurateur-cart-options .configurateur-option-label {
    font-weight: 600;
    color: #495057;
    font-size: 12px;
}

.configurateur-cart-options .configurateur-option-value {
    font-weight: 500;
    color: #212529;
    font-size: 12px;
}

.configurateur-cart-options .configurateur-price-positive {
    color: #dc3545;
    font-weight: 600;
    font-size: 11px;
    background: #f8d7da;
    padding: 1px 4px;
    border-radius: 2px;
    margin-left: 4px;
}

.configurateur-cart-options .configurateur-price-negative {
    color: #28a745;
    font-weight: 600;
    font-size: 11px;
    background: #d4edda;
    padding: 1px 4px;
    border-radius: 2px;
    margin-left: 4px;
}

.configurateur-cart-options .configurateur-edit-container {
    margin-top: 6px;
    text-align: right;
    padding-top: 4px;
    border-top: 1px solid #dee2e6;
}

.configurateur-edit-link {
    color: #6c757d;
    font-size: 11px;
    text-decoration: none;
    border-bottom: 1px dotted #adb5bd;
    padding: 2px 4px;
    border-radius: 2px;
    background: #f8f9fa;
    display: inline-block;
}

.configurateur-edit-link:hover {
    color: #007cba;
    text-decoration: none;
    background: #e7f3ff;
    border-bottom-color: #007cba;
}

/* ========================================
   OPTIONS COMMANDE
   ======================================== */

.configurateur-order-options {
    margin-top: 8px;
    padding: 8px;
    background: #f8f9fa;
    border-radius: 4px;
    border-left: 3px solid #007cba;
    font-size: 12px;
}

.configurateur-order-options .configurateur-order-title {
    margin: 0 0 6px 0;
    color: #007cba;
    font-size: 13px;
    font-weight: 600;
}

.configurateur-order-options .configurateur-order-item {
    margin: 3px 0;
    padding: 2px 0;
    display: block;
}

.configurateur-order-options .configurateur-order-label {
    font-weight: 600;
    color: #495057;
    font-size: 12px;
}

.configurateur-order-options .configurateur-order-value {
    font-weight: 500;
    color: #212529;
    font-size: 12px;
}

/* ========================================
   CODES produit
   ======================================== */

.configurateur-produit-container {
    margin-top: 10px;
    padding: 10px;
    background: #e7f3ff;
    border: 1px solid #007cba;
    border-radius: 4px;
}

.configurateur-produit-title {
    margin: 0 0 8px 0;
    color: #007cba;
}

.configurateur-produit-code {
    font-family: monospace;
    background: white;
    padding: 8px;
    border-radius: 3px;
    border: 1px solid #ddd;
    margin: 2px 0;
}

.configurateur-produit-no-codes {
    color: #666;
    font-style: italic;
}

.configurateur-produit-info {
    margin-top: 8px;
    font-size: 0.9em;
    color: #666;
}

/* ========================================
   SOUS-TOTAL PANIER
   ======================================== */

.configurateur-subtotal-options {
    color: #28a745;
    font-weight: 600;
    font-size: 11px;
}

/* ========================================
   STYLES SPÉCIFIQUES TABLES WOOCOMMERCE
   ======================================== */

.woocommerce-cart-form .configurateur-cart-options,
.woocommerce-checkout-review-order-table .configurateur-cart-options {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.3;
}

.woocommerce-cart-form .configurateur-cart-options .configurateur-options-container,
.woocommerce-checkout-review-order-table .configurateur-cart-options .configurateur-options-container {
    background: #f8f9fa;
    padding: 8px;
    border-radius: 4px;
    border-left: 3px solid #007cba;
}

.woocommerce-cart-form .configurateur-cart-options .configurateur-options-title,
.woocommerce-checkout-review-order-table .configurateur-cart-options .configurateur-options-title {
    color: #007cba;
    margin: 0 0 6px 0;
    font-size: 13px;
    font-weight: 600;
}

.woocommerce-cart-form .configurateur-cart-options .configurateur-option-item,
.woocommerce-checkout-review-order-table .configurateur-cart-options .configurateur-option-item {
    margin: 3px 0;
    padding: 2px 0;
    display: block;
}

.woocommerce-cart-form .configurateur-cart-options .configurateur-option-label,
.woocommerce-checkout-review-order-table .configurateur-cart-options .configurateur-option-label {
    font-weight: 600;
    color: #495057;
    font-size: 12px;
}

.woocommerce-cart-form .configurateur-cart-options .configurateur-option-value,
.woocommerce-checkout-review-order-table .configurateur-cart-options .configurateur-option-value {
    font-weight: 500;
    color: #212529;
    font-size: 12px;
}

.woocommerce-cart-form .configurateur-cart-options .configurateur-price-positive,
.woocommerce-checkout-review-order-table .configurateur-cart-options .configurateur-price-positive {
    color: #28a745;
    font-weight: 600;
    font-size: 11px;
    background: #d4edda;
    padding: 1px 4px;
    border-radius: 2px;
    margin-left: 4px;
}

.woocommerce-cart-form .configurateur-cart-options .configurateur-price-negative,
.woocommerce-checkout-review-order-table .configurateur-cart-options .configurateur-price-negative {
    color: #28a745;
    font-weight: 600;
    font-size: 11px;
    background: #d4edda;
    padding: 1px 4px;
    border-radius: 2px;
    margin-left: 4px;
}

.woocommerce-cart-form .configurateur-cart-options .configurateur-edit-container,
.woocommerce-checkout-review-order-table .configurateur-cart-options .configurateur-edit-container {
    margin-top: 6px;
    text-align: right;
    padding-top: 4px;
    border-top: 1px solid #dee2e6;
}

.woocommerce-cart-form .configurateur-edit-link,
.woocommerce-checkout-review-order-table .configurateur-edit-link {
    color: #007cba;
    font-size: 11px;
    text-decoration: none;
    border-bottom: none;
    padding: 2px 4px;
    border-radius: 4px;
    background: #e7f3ff;
    display: inline-block;
}

.woocommerce-cart-form .configurateur-edit-link:hover,
.woocommerce-checkout-review-order-table .configurateur-edit-link:hover {
    text-decoration: none;
    background: #ffffff;
}

/* ========================================
   ACCESSIBILITÉ
   ======================================== */

.configurateur-framework .configurateur-option:focus,
.configurateur-framework .configurateur-color-option:focus,
.configurateur-framework .configurateur-checkbox-label:focus,
.configurateur-framework .configurateur-radio-label:focus {
    outline: 2px solid #007cba;
    outline-offset: 2px;
}

.configurateur-framework .configurateur-option-select:focus,
.configurateur-framework .configurateur-checkbox-input:focus,
.configurateur-framework .configurateur-radio-input:focus {
/*     outline: 2px solid #007cba; */
    outline-offset: 2px;
}

/* ========================================
   RESPONSIVE - OPTIONS PANIER
   ======================================== */

@media (max-width: 768px) {
    .configurateur-cart-options {
        font-size: 12px;
        margin-top: 8px;
    }
    
    .configurateur-cart-options .configurateur-options-container {
        padding: 10px;
        border-radius: 4px;
    }
    
    .configurateur-cart-options .configurateur-option-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        margin: 6px 0;
        padding: 4px 0;
    }
    
    .configurateur-cart-options .configurateur-option-label {
        min-width: auto;
        font-size: 12px;
    }
    
    .configurateur-cart-options .configurateur-option-value {
        text-align: left;
        font-size: 12px;
    }
    
    .configurateur-cart-options .configurateur-price-positive,
    .configurateur-cart-options .configurateur-price-negative {
        margin-left: 0;
        margin-top: 2px;
        font-size: 11px;
    }
    
    .configurateur-edit-link {
        font-size: 11px;
        padding: 3px 6px;
    }
}

@media (max-width: 480px) {
    .configurateur-cart-options .configurateur-options-container {
        padding: 8px;
        margin: 0 -4px;
    }
    
    .configurateur-cart-options .configurateur-option-item {
        margin: 4px 0;
        padding: 3px 0;
    }
    
    .configurateur-cart-options .configurateur-options-title {
        font-size: 13px;
        margin-bottom: 8px;
    }
}

/* ========================================
   GROUPES DE CHAMPS
   ======================================== */

.configurateur-group-title-row {
    border-bottom: none !important;
}

.configurateur-group-title {
    margin: 0 0 15px 0;
    padding: 0;
    font-size: 1.2em;
    font-weight: 600;
    color: #333;
    border-bottom: 2px solid #2271b1;
    padding-bottom: 8px;
    margin-bottom: 20px;
}

.configurateur-field-wrapper.configurateur-group-separator {
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.configurateur-field-wrapper:not(.configurateur-group-separator) {
    margin-bottom: 15px;
}

/* ========================================
   MODE STEPS (ÉTAPES)
   ======================================== */

.configurateur-steps-mode {
    position: relative;
}

/* Masquer le formulaire d'ajout au panier par défaut en mode STEPS */
body.configurateur-steps-active form.cart:not(.configurateur-show-cart-form),
body.configurateur-steps-active .woocommerce form.cart:not(.configurateur-show-cart-form) {
    display: none;
}

/* Classe pour afficher le formulaire à la dernière étape */
.configurateur-show-cart-form {
    display: block;
}

.configurateur-steps-container {
    width: 100%;
}

/* Barre de progression des étapes */
.configurateur-steps-progress {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e0e0e0;
    position: relative;
    gap: 10px;
    z-index: 0;
}

.configurateur-step-indicator {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    opacity: 0.4;
    transition: opacity 0.3s ease;
    cursor: pointer;
    min-width: 0;
    padding: 0 5px;
    z-index: 0;
}

.configurateur-step-indicator.active {
    opacity: 1;
}

.configurateur-step-indicator.completed {
    opacity: 0.7;
}

.configurateur-step-indicator .step-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #e0e0e0;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 8px;
    transition: all 0.3s ease;
    flex-shrink: 0;
    /* Alignement horizontal fixe pour tous les numéros */
    align-self: center;
    position: relative;
    z-index: 1;
}

.configurateur-step-indicator.active .step-number {
    background: #2271b1;
    color: #fff;
}

.configurateur-step-indicator.completed .step-number {
    background: #00a32a;
    color: #fff;
}

.configurateur-step-indicator .step-title {
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    color: #666;
    max-width: 100%;
    line-height: 1.3;
    word-wrap: break-word;
    hyphens: auto;
    /* Permet au titre de prendre plusieurs lignes sans affecter l'alignement du numéro */
    min-height: 2.6em;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.configurateur-step-indicator.active .step-title {
    color: #2271b1;
    font-weight: 600;
}

/* Ligne de connexion entre les étapes */
.configurateur-step-indicator:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 16px;
    left: calc(50% + 16px);
    width: calc(100% - 32px);
    height: 2px;
    background: #e0e0e0;
    z-index: 0;
    /* S'assurer que la ligne reste alignée avec le centre du numéro */
    transform: translateY(0);
    /* Par défaut, afficher toutes les lignes sur desktop */
    display: block;
}

.configurateur-step-indicator.completed:not(:last-child)::after {
    background: #00a32a;
}

/* Contenu des étapes */
.configurateur-steps-content {
    position: relative;
    min-height: 200px;
}

.configurateur-step {
    display: none;
    animation: fadeIn 0.3s ease;
}

.configurateur-step.active {
    display: block;
}

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


.configurateur-step-fields {
    margin-bottom: 30px;
}

/* Navigation entre les étapes */
.configurateur-step-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 15px;
    border-top: 1px solid #e0e0e0;
    margin-top: 15px;
    gap: 10px;
}

.configurateur-step-spacer {
    flex: 1;
}

.configurateur-step-prev,
.configurateur-step-next {
    padding: 6px 12px;
    background: transparent;
    color: #666;
    border: 1px solid #ddd;
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.configurateur-step-prev {
    color: #666;
    border-color: #ddd;
}

.configurateur-step-prev:hover {
    background: #f5f5f5;
    border-color: #bbb;
    color: #333;
}

.configurateur-step-next {
    color: #2271b1;
    border-color: #2271b1;
}

.configurateur-step-next:hover {
    background: #2271b1;
    color: #fff;
}

.configurateur-step-prev:disabled,
.configurateur-step-next:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    background: transparent;
}

/* Responsive pour les steps */
@media (max-width: 768px) {
    .configurateur-steps-progress {
        flex-wrap: wrap;
        gap: 8px;
        padding-bottom: 15px;
        justify-content: flex-start;
    }
    
    .configurateur-step-indicator {
        flex: 0 0 calc(33.333% - 6px);
        min-width: 0;
        padding: 0 2px;
    }
    
    .configurateur-step-indicator .step-number {
        width: 28px;
        height: 28px;
        font-size: 12px;
        margin-bottom: 6px;
    }
    
    .configurateur-step-indicator .step-title {
        font-size: 11px;
        max-width: 100%;
        line-height: 1.2;
        min-height: 2.4em;
    }
    
    /* Masquer toutes les lignes de connexion par défaut */
    .configurateur-step-indicator:not(:last-child)::after {
        display: none;
    }
    
    /* Afficher la ligne seulement pour les 2 premières colonnes de chaque ligne (3 par ligne) */
    /* 3n+1 = 1er, 4ème, 7ème... (première colonne de chaque ligne) */
    /* 3n+2 = 2ème, 5ème, 8ème... (deuxième colonne de chaque ligne) */
    .configurateur-step-indicator:nth-child(3n+1):not(:last-child)::after,
    .configurateur-step-indicator:nth-child(3n+2):not(:last-child)::after {
        display: block !important;
        top: 14px;
        left: calc(50% + 14px);
        width: calc(100% - 28px);
    }
    
    .configurateur-step-navigation {
        flex-direction: column;
        gap: 10px;
    }
    
    .configurateur-step-prev,
    .configurateur-step-next {
        width: 100%;
        justify-content: center;
    }
}

/* Pour les très petits écrans (moins de 480px) */
@media (max-width: 480px) {
    .configurateur-steps-progress {
        gap: 6px;
    }
    
    .configurateur-step-indicator {
        flex: 0 0 calc(33.333% - 4px);
        padding: 0 1px;
    }
    
    .configurateur-step-indicator .step-number {
        width: 24px;
        height: 24px;
        font-size: 12px;
        margin-bottom: 4px;
    }
    
    .configurateur-step-indicator .step-title {
        font-size:11px;
        min-height: 2.2em;
        line-height: 1.15;
    }
    
    /* Masquer toutes les lignes de connexion sur très petits écrans */
    .configurateur-step-indicator:not(:last-child)::after {
        display: none;
    }
}

/* Pour les écrans moyens (tablettes en mode portrait) */
@media (min-width: 481px) and (max-width: 1024px) {
    .configurateur-steps-progress {
        gap: 10px;
    }
    
    .configurateur-step-indicator {
        flex: 0 0 calc(33.333% - 7px);
    }
    
    .configurateur-step-indicator .step-title {
        font-size: 11px;
        min-height: 2.5em;
        max-width: 100%;
    }
    
    /* Masquer toutes les lignes de connexion par défaut */
    .configurateur-step-indicator:not(:last-child)::after {
        display: none;
    }
    
    /* Afficher la ligne seulement pour les 2 premières colonnes de chaque ligne */
    .configurateur-step-indicator:nth-child(3n+1):not(:last-child)::after,
    .configurateur-step-indicator:nth-child(3n+2):not(:last-child)::after {
        display: block;
        top: 16px;
        left: calc(50% + 16px);
        width: calc(100% - 32px);
    }
}