/* Styles pour le Configurateur Cimaise - Version Finale Complète */
:root { 
    --orange: #e97a21; 
    --orange-soft: #f7b27a; 
    --grey-light: #f5f5f7; 
    --grey-mid: #d1d5db; 
    --grey-dark: #1f2933; 
    --grey-text: #4b5563; 
    --white: #ffffff; 
    --radius-lg: 18px; 
    --radius-md: 12px; 
    --radius-sm: 8px; 
    --shadow-soft: 0 18px 45px rgba(15,23,42,0.12); 
    --transition-fast: .18s ease-out; 
} 

/* ======================================================= */
/* ⚠️ ISOLATION CSS : TOUTES LES RÈGLES SONT SCOPÉES */
/* ======================================================= */

/* Réinitialisation à l'intérieur du conteneur */
.cimaise-configurator-container * {
    box-sizing: border-box;
}
/* Définition du font-family */
.cimaise-configurator-container, .cimaise-configurator-container *, .cimaise-intro-banner, .cimaise-intro-banner * {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Poppins", sans-serif;
}

/* Le conteneur principal */
.cimaise-configurator-container {
    width: 100%;
    max-width: 1080px;
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 22px 18px 24px;
    box-shadow: var(--shadow-soft);
    border: 1px solid rgba(148,163,184,0.25);
    margin: 20px auto; 
    color: var(--grey-text); 
} 

/* Styles d'en-tête */
.cimaise-configurator-container .header { display:flex; flex-direction:column; gap:8px; text-align:center; margin-bottom:16px; } 
.cimaise-configurator-container h1 { font-size:1.4rem; font-weight:650; letter-spacing:.02em; color:var(--grey-dark); margin-bottom:0; margin-top:0;} 
.cimaise-configurator-container .header-sub { font-size:.9rem; color:#6b7280; margin-top:0; margin-bottom:0; } 
.cimaise-configurator-container .badge { display:inline-flex; align-items:center; gap:6px; font-size:.78rem; background:#fef3c7; color:#92400e; padding:4px 9px; border-radius:999px; margin:0 auto; } 
.cimaise-configurator-container .badge span.emoji { font-size:1rem } 
.cimaise-configurator-container .info-banner { margin-top:8px; background:linear-gradient(135deg,#f9fafb,#fef3c7); border-radius:var(--radius-md); padding:8px 10px; font-size:.82rem; display:flex; gap:8px; align-items:flex-start; border:1px solid rgba(251,191,36,0.4); } 
.cimaise-configurator-container .info-banner .icon { font-size:1.1rem; margin-top:2px; } 
.cimaise-configurator-container .info-banner strong { color:#92400e }

/* Progression */ 
.cimaise-configurator-container .progress-wrap { margin:12px 0 16px; } 
.cimaise-configurator-container .progress-label { display:flex; justify-content:space-between; align-items:center; font-size:.76rem; color:#6b7280; margin-bottom:4px; } 
.cimaise-configurator-container .progress-label span.step { font-weight:600; color:var(--grey-dark); } 
.cimaise-configurator-container .progress { height:8px; background:#e5e7eb; border-radius:999px; overflow:hidden; } 
.cimaise-configurator-container .progress-bar { height:8px; width:0%; background:linear-gradient(90deg,#f97316,#fb923c); transition:width .4s ease-out; }

/* Étapes */ 
.cimaise-configurator-container .steps { display:flex; flex-direction:column; gap:14px; } 
.cimaise-configurator-container .question { display:none; text-align:center; background:var(--grey-light); border-radius:var(--radius-md); padding:14px 12px 16px; border:1px solid rgba(209,213,219,0.7); } 
.cimaise-configurator-container .question.active { display:block; animation:fadeIn .25s ease-out; } 
@keyframes fadeIn { from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } } 
.cimaise-configurator-container .step-title { font-size:.98rem; font-weight:600; color:var(--grey-dark); margin-bottom:4px; } 
.cimaise-configurator-container .step-sub { font-size:.84rem; color:#6b7280; margin-bottom:8px; } 
.cimaise-configurator-container .step-hint { font-size:.78rem; color:#6b7280; background:#e5e7eb; border-radius:999px; display:inline-flex; align-items:center; gap:6px; padding:4px 10px; margin-bottom:8px; } 
.cimaise-configurator-container .step-hint span.emoji { font-size:1rem }

/* Helper box */ 
.cimaise-configurator-container .helper-box { margin:6px auto 8px; max-width:680px; background:#ffffff; border-radius:var(--radius-md); padding:8px 10px; font-size:.8rem; color:#4b5563; text-align:left; border:1px dashed #d1d5db; } 
.cimaise-configurator-container .helper-title { font-weight:600; font-size:.8rem; margin-bottom:4px; display:flex; align-items:center; gap:6px; } 
.cimaise-configurator-container .helper-title span.emoji { font-size:1rem }

/* Choices */ 
.cimaise-configurator-container .choice-img { width:110px; height:auto; border-radius:var(--radius-md); cursor:pointer; border:2px solid transparent; transition:border var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); display:block; margin:0 auto; background:#fff; } 
.cimaise-configurator-container .choice-img:hover { transform:translateY(-3px) scale(1.01); box-shadow:0 10px 24px rgba(15,23,42,0.16); } 
.cimaise-configurator-container .choice-selected { border-color:var(--orange); box-shadow:0 10px 24px rgba(249,115,22,0.26); } 
.cimaise-configurator-container .choice-label { font-size:.78rem; margin-top:4px; color:#374151; }

/* Controls & boutons */ 
.cimaise-configurator-container .controls { display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; justify-content:center; } 
.cimaise-configurator-container .btn { background:linear-gradient(135deg,#f97316,#fb923c); color:white; border:none; padding:10px 18px; border-radius:999px; cursor:pointer; font-weight:600; font-size:.84rem; display:inline-flex; align-items:center; gap:6px; box-shadow:0 10px 20px rgba(248,113,113,0.25); transition:transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast), background .2s ease-out; } 
.cimaise-configurator-container .btn:hover { transform:translateY(-1px); box-shadow:0 16px 28px rgba(248,113,113,0.32); } 
.cimaise-configurator-container .btn[disabled] { opacity:.45; cursor:not-allowed; box-shadow:none; } 
.cimaise-configurator-container .btn-secondary { background:#e5e7eb; color:#374151; box-shadow:none; } 
.cimaise-configurator-container .btn-chip { background:#f3f4f6; color:#4b5563; border-radius:999px; padding:5px 10px; font-size:.78rem; border:1px solid #d1d5db; }

/* Inputs */ 
.cimaise-configurator-container .small-input { padding:9px 10px; border-radius:999px; border:1px solid var(--grey-mid); width:150px; text-align:center; font-size:.82rem; background:white; transition:border var(--transition-fast), box-shadow var(--transition-fast); } 
.cimaise-configurator-container .small-input:focus { outline:none; border-color:#fb923c; box-shadow:0 0 0 2px rgba(249,115,22,0.2); }

/* List items */ 
.cimaise-configurator-container .list-item { background:#ffffff; padding:7px 11px; border-radius:999px; border:1px solid var(--grey-mid); margin-top:6px; width:fit-content; margin-left:auto; margin-right:auto; font-size:.8rem; }

/* Résumé */
.cimaise-configurator-container .summary-table { width:100%; border-collapse:collapse; margin-top:10px; font-size:.86rem; }
.cimaise-configurator-container .summary-table th { background:#111827; color:#e5e7eb; padding:8px 10px; text-align:left; font-weight:550; position:sticky; top:0; z-index:1; }
.cimaise-configurator-container .summary-table td { padding:8px 10px; border-bottom:1px solid #e5e7eb; vertical-align:middle; background:white; }

/* Styles spécifiques du tableau de résultat */
.cimaise-configurator-container .col-photo { 
    width: 90px;
    text-align: center;
}
.cimaise-configurator-container .col-details { 
    width: auto;
}
.cimaise-configurator-container .col-photo img {    
    width:68px;    
    height:auto;    
    border-radius:var(--radius-sm);    
    display:block;    
    margin: 0 auto; 
}
.cimaise-configurator-container .product-name { font-weight:600; color:var(--grey-dark); font-size:.88rem; }
.cimaise-configurator-container .product-sub { font-size:.78rem; color:#6b7280; margin-top: 4px; }
.cimaise-configurator-container .price-cell { text-align:right; white-space:nowrap; }

/* Bloc totaux */ 
.cimaise-configurator-container .totals-box { margin-top:10px; text-align:right; font-size:.9rem; } 
.cimaise-configurator-container .totals-box .tot-line { margin-top:2px; } 
.cimaise-configurator-container .totals-box strong { color:var(--grey-dark); }

/* Accordéons */ 
.cimaise-configurator-container .accordion { border-radius:var(--radius-md); background:#f9fafb; padding:8px 9px; border:1px solid #e5e7eb; margin-top:4px; font-size:.8rem; } 
.cimaise-configurator-container .accordion summary { cursor:pointer; list-style:none; font-weight:550; color:#374151; } 
.cimaise-configurator-container .accordion summary::-webkit-details-marker { display:none } 
.cimaise-configurator-container .accordion summary::after { content:"▾"; float:right; font-size:.7rem; color:#9ca3af; margin-left:4px; } 
.cimaise-configurator-container .h-vertical { display:flex; flex-direction:column; gap:8px; margin-top:8px; } 
.cimaise-configurator-container .h-vertical .option { display:flex; gap:8px; align-items:center; cursor:pointer; padding:5px; border-radius:var(--radius-sm); transition:background var(--transition-fast), transform var(--transition-fast); } 
.cimaise-configurator-container .h-vertical .option:hover { background:#ffffff; transform:translateY(-1px); } 
.cimaise-configurator-container .h-vertical .option img { width:40px; height:auto; border-radius:6px; }

/* Boutons panier + quantité */ 
.cimaise-configurator-container .add-to-cart-btn { background:#f3f4f6; border:1px solid #d1d5db; padding:6px 12px; border-radius:999px; cursor:pointer; font-size:.78rem; transition:var(--transition-fast); } 
.cimaise-configurator-container .add-to-cart-btn:hover { background:#e5e7eb; } 
.cimaise-configurator-container .add-to-cart-btn.ajoute-ok { background:#16a34a; border-color:#16a34a; color:#f9fafb; } 
.cimaise-configurator-container .qty-input { width:70px; padding:6px; border-radius:999px; border:1px solid var(--grey-mid); text-align:center; font-size:.82rem; }

/* Message panier */ 
.cimaise-configurator-container .message-panier { text-align:center; margin-top:10px; color:#15803d; font-weight:600; font-size:.85rem; }

/* Section résultats */ 
.cimaise-configurator-container .results-header { font-size:.88rem; color:#4b5563; margin-bottom:6px; } 
.cimaise-configurator-container .results-hint { font-size:.8rem; color:#6b7280; }

/* ACCESSOIRES */ 
.cimaise-configurator-container .accessories-section { margin-top:18px; padding-top:12px; border-top:1px solid #e5e7eb; } 
.cimaise-configurator-container .accessories-title { font-size:.92rem; font-weight:600; color:#111827; margin-bottom:3px; } 
.cimaise-configurator-container .accessories-sub { font-size:.8rem; color:#6b7280; margin-bottom:10px; } 
.cimaise-configurator-container .accessories-grid { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; } 
.cimaise-configurator-container .accessory-card { background:#ffffff; border-radius:var(--radius-md); padding:8px 10px 10px; border:1px solid #e5e7eb; box-shadow:0 8px 20px rgba(15,23,42,0.08); width:240px; display:flex; flex-direction:column; gap:4px; } 
.cimaise-configurator-container .accessory-image-wrapper { width:100%; border-radius:var(--radius-md); overflow:hidden; background:#f9fafb; } 
.cimaise-configurator-container .accessory-image-wrapper img { display:block; width:100%; height:auto; } 
.cimaise-configurator-container .accessory-name { font-weight:600; font-size:.88rem; color:#111827; } 
.cimaise-configurator-container .accessory-desc { font-size:.78rem; color:#4b5563; } 
.cimaise-configurator-container .accessory-variants { display:flex; gap:6px; margin-top:4px; flex-wrap:wrap; } 
.cimaise-configurator-container .accessory-variant { padding:4px 8px; border-radius:999px; border:1px solid #d1d5db; background:#f9fafb; font-size:.75rem; cursor:pointer; } 
.cimaise-configurator-container .accessory-variant.active { border-color:#fb923c; background:#ffedd5; color:#9a3412; } 
.cimaise-configurator-container .accessory-footer { display:flex; align-items:center; justify-content:space-between; gap:6px; margin-top:5px; } 
.cimaise-configurator-container .accessory-qty { width:60px; padding:6px; border-radius:999px; border:1px solid var(--grey-mid); text-align:center; font-size:.78rem; } 
.cimaise-configurator-container .accessory-add-btn { background:#111827; color:#f9fafb; border:none; padding:6px 10px; border-radius:999px; font-size:.76rem; cursor:pointer; display:inline-flex; align-items:center; gap:4px; transition:var(--transition-fast); } 
.cimaise-configurator-container .accessory-add-btn:hover { background:#0f172a; } 
.cimaise-configurator-container .accessory-add-btn.ajoute-ok { background:#16a34a; color:#f9fafb; }

/* POPUP EMAIL */ 
.cimaise-configurator-container #emailPopup { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.45); display:none; align-items:center; justify-content:center; z-index:9999; } 
.cimaise-configurator-container .emailPopup-inner { background:white; padding:18px; border-radius:14px; width:90%; max-width:420px; box-shadow:0 15px 35px rgba(0,0,0,0.25); text-align:center; }

/* Responsive app-like */ 
@media (max-width:720px){  
    .cimaise-configurator-container { padding:18px 12px; }
    .cimaise-configurator-container h1 { font-size:1.2rem; }  
    .cimaise-configurator-container .controls { flex-direction:column; }  
    .cimaise-configurator-container .btn { width:100%; justify-content:center; padding:9px 14px; }  
    .cimaise-configurator-container .col-photo { width: 60px; }
    .cimaise-configurator-container .col-details { width: auto; }
    .cimaise-configurator-container .col-photo img { width:56px; }
    .cimaise-configurator-container .summary-table th:nth-child(4), .cimaise-configurator-container .summary-table td:nth-child(4) { padding-right: 0; }  
    .cimaise-configurator-container .summary-table th:nth-child(5), .cimaise-configurator-container .summary-table td:nth-child(5) { text-align: center; } 
} 
@media (max-width:540px){  
    .cimaise-configurator-container .choice-img { width:95px; }  
    .cimaise-configurator-container .col-photo img { width:56px; }  
    .cimaise-configurator-container .summary-table td, .cimaise-configurator-container .summary-table th { font-size:.78rem; padding:6px; }  
    .cimaise-configurator-container .qty-input { width:58px; }  
    .cimaise-configurator-container #emailPopup .emailPopup-inner { max-width:90%; padding:14px; }  
    .cimaise-configurator-container #emailInput { font-size:.9rem; } 
}

/* Styles pour impression/PDF */
@media print {
    body { background: none !important; padding: 0; }
    .cimaise-configurator-container .container, .cimaise-configurator-container .header, .cimaise-configurator-container .progress-wrap, .cimaise-configurator-container .steps, .cimaise-configurator-container .accessories-section, .cimaise-configurator-container #emailPopup, .cimaise-intro-banner {
        display: none !important;
    }
    .cimaise-configurator-container { display: block !important; box-shadow: none !important; border: none !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; color: black !important; }
    .cimaise-configurator-container #results { display: block !important; }
    .cimaise-configurator-container .controls, .cimaise-configurator-container .qty-input, .cimaise-configurator-container .add-to-cart-btn, .cimaise-configurator-container .details-crochet-accordion {
        display: none !important;
    }
    .cimaise-configurator-container .summary-table td, .cimaise-configurator-container .summary-table th { border-color: #ccc !important; font-size: 10pt !important; }
    .cimaise-configurator-container .summary-table th { background: #eee !important; color: black !important; }
    .cimaise-configurator-container .col-photo img { width: 40px; }
} /* <--- FIN MEDIA PRINT */


/* --- STYLE DU BANDEAU D'INTRODUCTION (NOUVEAU) --- */
.cimaise-intro-banner {
    width: 100%;
    max-width: 1080px;
    margin: 20px auto;
    background: #ffffff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    border: 1px solid rgba(148,163,184,0.25);
    padding: 20px 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    animation: fadeIn 0.5s ease-out;
}

.cimaise-intro-banner .intro-content {
    display: flex;
    align-items: center;
    gap: 15px;
    text-align: left;
}

.cimaise-intro-banner .intro-icon {
    font-size: 2.5rem;
    background: #fff7ed;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid #ffedd5;
}

.cimaise-intro-banner .intro-text h3 {
    margin: 0 0 5px 0;
    font-size: 1.1rem;
    color: var(--grey-dark);
    font-weight: 700;
}

.cimaise-intro-banner .intro-text p {
    margin: 0;
    font-size: 0.9rem;
    color: #6b7280;
}

.cimaise-intro-banner .btn-large {
    padding: 12px 24px;
    font-size: 1rem;
    white-space: nowrap;
}

/* Animation "Pulse" pour attirer le clic */
.btn-pulse {
    animation: shadow-pulse 2s infinite;
}

@keyframes shadow-pulse {
    0% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(249, 115, 22, 0); }
    100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0); }
}

/* Responsive pour mobile */
@media (max-width: 768px) {
    .cimaise-intro-banner {
        flex-direction: column;
        text-align: center;
        padding: 20px 15px;
    }
    .cimaise-intro-banner .intro-content {
        flex-direction: column;
        text-align: center;
    }
    .cimaise-intro-banner .intro-action, 
    .cimaise-intro-banner .btn-large {
        width: 100%;
        justify-content: center;
    }
}


/* ======================================================= */
/* 🚀 CORRECTION FINALE : FORCE L'AFFICHAGE DES RÉSULTATS */
/* ======================================================= */

/* 1. On force la section "results" à s'afficher quand elle a la classe .active */
#mainConfigurator #results.active {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
    background: #fff !important; /* On assure un fond blanc */
}

/* 2. On force l'affichage de tous les conteneurs internes */
#mainConfigurator #results.active #results-wrapper,
#mainConfigurator #results.active #summary {
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    opacity: 1 !important;
    min-height: 50px; /* Pour éviter un bloc plat */
}

/* 3. On force l'affichage du tableau */
#mainConfigurator #results.active table {
    display: table !important;
    width: 100% !important;
    visibility: visible !important;
}

/* 4. On cache la section si elle n'est PAS active (pour ne pas l'avoir au démarrage) */
#mainConfigurator #results:not(.active) {
    display: none !important;
}

/* 5. Sécurité : on s'assure que le texte et les images sont visibles */
#mainConfigurator #results * {
    visibility: visible;
}

/* 6. Correction spécifique pour le bouton d'ajout au panier qui pourrait être caché */
#mainConfigurator #results .add-to-cart-btn {
    display: inline-block !important;
}

/* --- FORÇAGE AFFICHAGE RÉSULTATS --- */
#mainConfigurator #results {
    display: none; /* Caché par défaut */
}

#mainConfigurator #results.active {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    background: #fff;
    padding-top: 20px;
    animation: fadeIn 0.5s ease-in-out;
}

#results-wrapper, #summary, #totalsBox {
    display: block !important;
    width: 100% !important;
}

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