/* ═══════════════════════════════════════════════════════════════
   CONFIGURATEUR PRIX INFRASTRUCTURE — SXO 2026
   Composant Alpine.js — 3 types : slider, cards, table
   Préfixe : .sxo-2026-wrapper .conf-*-2026
   Mobile-first (min-width uniquement)
═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   PARTIE 1 — COMMUN (slider existant + parties communes)
═══════════════════════════════════════════════════════════════ */

/* ─── Section wrapper ─────────────────────────────────────────── */
.sxo-2026-wrapper .conf-section-2026 {
    background: #f8fafc;
    padding: 3rem 1rem;
}

.sxo-2026-wrapper .conf-container-2026 {
    max-width: 800px;
    margin: 0 auto;
}

.sxo-2026-wrapper .conf-container-wide-2026 {
    max-width: 1100px;
}

/* ─── Titre ───────────────────────────────────────────────────── */
.sxo-2026-wrapper .conf-title-2026 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0a1628;
    margin-bottom: 0.5rem;
    text-align: center;
}

.sxo-2026-wrapper .conf-subtitle-2026 {
    font-size: 1rem;
    color: #64748b;
    text-align: center;
    margin-bottom: 2rem;
}

/* ─── Card principale ─────────────────────────────────────────── */
.sxo-2026-wrapper .conf-card-2026 {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(10, 22, 40, 0.08);
    padding: 2rem 1.5rem;
}

/* ─── Groupe d'input ──────────────────────────────────────────── */
.sxo-2026-wrapper .conf-input-group-2026 {
    margin-bottom: 1.75rem;
}

.sxo-2026-wrapper .conf-label-2026 {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1e3a5f;
    margin-bottom: 0.75rem;
}

.sxo-2026-wrapper .conf-label-value-2026 {
    font-size: 1rem;
    font-weight: 700;
    color: #c4a35a;
}

/* ─── Slider ──────────────────────────────────────────────────── */
.sxo-2026-wrapper .conf-slider-2026 {
    width: 100%;
    height: 6px;
    accent-color: #c4a35a;
    cursor: pointer;
    min-height: 48px;
    background: transparent;
}

/* ─── Select ──────────────────────────────────────────────────── */
.sxo-2026-wrapper .conf-select-2026 {
    width: 100%;
    min-height: 48px;
    padding: 0.625rem 1rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.95rem;
    color: #1e293b;
    background-color: #ffffff;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%231e3a5f'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1rem;
    transition: border-color 0.2s;
}

.sxo-2026-wrapper .conf-select-2026:focus {
    outline: none;
    border-color: #c4a35a;
}

/* ─── Input number ────────────────────────────────────────────── */
.sxo-2026-wrapper .conf-input-number-2026 {
    width: 100%;
    min-height: 48px;
    padding: 0.625rem 1rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
    transition: border-color 0.2s;
}

.sxo-2026-wrapper .conf-input-number-2026:focus {
    outline: none;
    border-color: #c4a35a;
}

/* ─── Prix résultat ───────────────────────────────────────────── */
.sxo-2026-wrapper .conf-price-block-2026 {
    background: linear-gradient(135deg, #0a1628 0%, #1e3a5f 100%);
    border-radius: 10px;
    padding: 1.5rem;
    text-align: center;
    margin: 1.5rem 0;
}

.sxo-2026-wrapper .conf-price-label-2026 {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.7);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.sxo-2026-wrapper .conf-price-amount-2026 {
    font-size: 2.5rem;
    font-weight: 800;
    color: #c4a35a;
    line-height: 1;
}

.sxo-2026-wrapper .conf-price-unit-2026 {
    font-size: 1rem;
    color: rgba(255,255,255,0.8);
    margin-top: 0.25rem;
}

.sxo-2026-wrapper .conf-price-breakdown-2026 {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.6);
    margin-top: 0.75rem;
    line-height: 1.6;
}

/* ─── Formulaire commande ─────────────────────────────────────── */
.sxo-2026-wrapper .conf-form-2026 {
    border-top: 1px solid #e2e8f0;
    padding-top: 1.5rem;
    margin-top: 1.5rem;
}

.sxo-2026-wrapper .conf-form-title-2026 {
    font-size: 1rem;
    font-weight: 700;
    color: #0a1628;
    margin-bottom: 1rem;
}

.sxo-2026-wrapper .conf-form-grid-2026 {
    display: grid;
    gap: 1rem;
}

.sxo-2026-wrapper .conf-field-2026 label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #1e3a5f;
    margin-bottom: 0.375rem;
}

.sxo-2026-wrapper .conf-field-2026 input {
    width: 100%;
    min-height: 48px;
    padding: 0.625rem 1rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.95rem;
    color: #1e293b;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.sxo-2026-wrapper .conf-field-2026 input:focus {
    outline: none;
    border-color: #c4a35a;
}

.sxo-2026-wrapper .conf-field-2026 input.conf-error-2026 {
    border-color: #dc2626;
}

.sxo-2026-wrapper .conf-field-error-2026 {
    font-size: 0.8rem;
    color: #dc2626;
    margin-top: 0.25rem;
}

/* ─── Consentement RGPD ───────────────────────────────────────── */
.sxo-2026-wrapper .conf-consent-2026 {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    margin-top: 0.5rem;
}

.sxo-2026-wrapper .conf-consent-2026 input[type="checkbox"] {
    min-width: 20px;
    min-height: 20px;
    accent-color: #c4a35a;
    cursor: pointer;
    margin-top: 2px;
}

.sxo-2026-wrapper .conf-consent-2026 label {
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.5;
}

.sxo-2026-wrapper .conf-consent-2026 a {
    color: #1e3a5f;
    text-decoration: underline;
}

/* ─── Bouton submit ───────────────────────────────────────────── */
.sxo-2026-wrapper .conf-btn-submit-2026 {
    width: 100%;
    min-height: 52px;
    padding: 0.875rem 2rem;
    background: #c4a35a;
    color: #0a1628;
    font-size: 1rem;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 1.25rem;
    transition: background 0.2s, transform 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.sxo-2026-wrapper .conf-btn-submit-2026:hover:not(:disabled) {
    background: #d4b86a;
}

.sxo-2026-wrapper .conf-btn-submit-2026:active:not(:disabled) {
    transform: scale(0.99);
}

.sxo-2026-wrapper .conf-btn-submit-2026:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ─── Spinner ─────────────────────────────────────────────────── */
.sxo-2026-wrapper .conf-spinner-2026 {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(10,22,40,0.2);
    border-top-color: #0a1628;
    border-radius: 50%;
    animation: conf-spin 0.6s linear infinite;
    display: inline-block;
}

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

/* ─── Messages état ───────────────────────────────────────────── */
.sxo-2026-wrapper .conf-success-2026 {
    background: #d1fae5;
    border: 1px solid #6ee7b7;
    border-radius: 8px;
    padding: 1.25rem;
    text-align: center;
    color: #065f46;
    font-weight: 600;
}

.sxo-2026-wrapper .conf-success-2026 .conf-success-icon-2026 {
    font-size: 2rem;
    display: block;
    margin-bottom: 0.5rem;
}

.sxo-2026-wrapper .conf-error-msg-2026 {
    background: #fee2e2;
    border: 1px solid #fca5a5;
    border-radius: 8px;
    padding: 1rem;
    color: #991b1b;
    font-size: 0.9rem;
    margin-top: 0.75rem;
}

/* ─── Disclaimer ──────────────────────────────────────────────── */
.sxo-2026-wrapper .conf-disclaimer-2026 {
    font-size: 0.78rem;
    color: #94a3b8;
    text-align: center;
    margin-top: 1.25rem;
    line-height: 1.5;
}

/* ─── Breakdown DR (disaster recovery) ───────────────────────── */
.sxo-2026-wrapper .conf-dr-breakdown-2026 {
    display: grid;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 1rem;
    background: #f1f5f9;
    border-radius: 8px;
}

.sxo-2026-wrapper .conf-dr-row-2026 {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
    color: #475569;
}

.sxo-2026-wrapper .conf-dr-row-2026 span:last-child {
    font-weight: 600;
    color: #1e3a5f;
}

/* ─── Responsive commun ───────────────────────────────────────── */
@media (min-width: 576px) {
    .sxo-2026-wrapper .conf-section-2026 {
        padding: 4rem 2rem;
    }
    .sxo-2026-wrapper .conf-form-grid-2026 {
        grid-template-columns: 1fr 1fr;
    }
    .sxo-2026-wrapper .conf-price-amount-2026 {
        font-size: 3rem;
    }
}

@media (min-width: 768px) {
    .sxo-2026-wrapper .conf-card-2026 {
        padding: 2.5rem;
    }
    .sxo-2026-wrapper .conf-title-2026 {
        font-size: 1.875rem;
    }
}

/* ─── Honeypot anti-spam ──────────────────────────────────────── */
.sxo-2026-wrapper .conf-honeypot-2026 {
    position: absolute;
    left: -9999px;
}

/* ═══════════════════════════════════════════════════════════════
   PARTIE 2 — SLIDER — Boutons +/−
═══════════════════════════════════════════════════════════════ */

/* Wrapper slider + boutons */
.sxo-2026-wrapper .conf-slider-with-btns-2026 {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Bouton +/− */
.sxo-2026-wrapper .conf-slider-btn-2026 {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 50%;
    background: transparent;
    border: 2px solid #1e3a5f;
    color: #1e3a5f;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.sxo-2026-wrapper .conf-slider-btn-2026:hover:not(:disabled) {
    background: #c4a35a;
    border-color: #c4a35a;
    color: #ffffff;
}

.sxo-2026-wrapper .conf-slider-btn-2026:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Slider dans le groupe boutons — flex:1 pour occuper l'espace */
.sxo-2026-wrapper .conf-slider-with-btns-2026 .conf-slider-2026 {
    flex: 1;
    min-width: 0;
}

/* ═══════════════════════════════════════════════════════════════
   PARTIE 3 — CARDS — Step labels
═══════════════════════════════════════════════════════════════ */

.sxo-2026-wrapper .conf-step-label-2026 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.sxo-2026-wrapper .conf-step-badge-2026 {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #c4a35a;
    color: #0a1628;
    font-size: 0.875rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sxo-2026-wrapper .conf-step-title-2026 {
    font-size: 1.125rem;
    font-weight: 700;
    color: #0a1628;
    margin: 0;
}

.sxo-2026-wrapper .conf-step-desc-2026 {
    font-size: 0.825rem;
    color: #64748b;
    margin: 2px 0 0;
}

/* ═══════════════════════════════════════════════════════════════
   PARTIE 4 — CARDS — Grille de packs
═══════════════════════════════════════════════════════════════ */

/* Grille : 1 col mobile, 2 tablette, 4 desktop */
.sxo-2026-wrapper .conf-cards-grid-2026 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 32px;
}

@media (min-width: 768px) {
    .sxo-2026-wrapper .conf-cards-grid-2026 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .sxo-2026-wrapper .conf-cards-grid-2026 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Carte pack */
.sxo-2026-wrapper .conf-pack-card-2026 {
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 28px 24px 24px;
    position: relative;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
    display: flex;
    flex-direction: column;
}

.sxo-2026-wrapper .conf-pack-card-2026:hover {
    border-color: #c4a35a;
    box-shadow: 0 4px 16px rgba(196, 163, 90, 0.15);
    transform: translateY(-2px);
}

/* Sélectionné */
.sxo-2026-wrapper .conf-pack-selected-2026 {
    border-color: #c4a35a;
    box-shadow: 0 4px 16px rgba(196, 163, 90, 0.2);
}

/* Featured (recommandé) — border gold + fond subtil */
.sxo-2026-wrapper .conf-pack-featured-2026 {
    border-color: #c4a35a;
    background: rgba(196, 163, 90, 0.03);
}

/* Badge recommandé */
.sxo-2026-wrapper .conf-badge-recommended-2026 {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #c4a35a;
    color: #0a1628;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 14px;
    border-radius: 100px;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Check de sélection */
.sxo-2026-wrapper .conf-pack-check-2026 {
    position: absolute;
    top: 12px;
    right: 12px;
    color: #c4a35a;
}

/* Nom du pack */
.sxo-2026-wrapper .conf-pack-name-2026 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0a1628;
    margin-bottom: 4px;
}

/* Tagline */
.sxo-2026-wrapper .conf-pack-tagline-2026 {
    font-size: 0.825rem;
    color: #64748b;
    margin-bottom: 16px;
}

/* Specs list */
.sxo-2026-wrapper .conf-pack-specs-2026 {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.sxo-2026-wrapper .conf-pack-specs-2026 li {
    font-size: 0.825rem;
    color: #1e293b;
    padding-left: 18px;
    position: relative;
}

.sxo-2026-wrapper .conf-pack-specs-2026 li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    color: #16a34a;
    font-weight: 700;
    font-size: 0.75rem;
}

/* Prix pack */
.sxo-2026-wrapper .conf-pack-price-2026 {
    text-align: center;
    margin-bottom: 12px;
}

.sxo-2026-wrapper .conf-pack-price-amount-2026 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #c4a35a;
}

.sxo-2026-wrapper .conf-pack-price-unit-2026 {
    font-size: 0.75rem;
    color: #64748b;
    margin-left: 4px;
}

/* Bouton pack */
.sxo-2026-wrapper .conf-pack-btn-2026 {
    width: 100%;
    min-height: 48px;
    padding: 10px;
    background: transparent;
    border: 2px solid #1e3a5f;
    border-radius: 8px;
    color: #1e3a5f;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    text-align: center;
}

.sxo-2026-wrapper .conf-pack-card-2026:hover .conf-pack-btn-2026,
.sxo-2026-wrapper .conf-pack-selected-2026 .conf-pack-btn-2026 {
    background: #c4a35a;
    border-color: #c4a35a;
    color: #0a1628;
}

/* ═══════════════════════════════════════════════════════════════
   PARTIE 5 — CARDS — Carte custom
═══════════════════════════════════════════════════════════════ */

.sxo-2026-wrapper .conf-custom-card-2026 {
    border-style: dashed;
    border-color: #c4a35a;
}

.sxo-2026-wrapper .conf-custom-icon-2026 {
    color: #c4a35a;
    margin-bottom: 8px;
    text-align: center;
}

.sxo-2026-wrapper .conf-custom-desc-2026 {
    font-size: 0.8rem;
    color: #64748b;
    margin-bottom: 12px;
    flex: 1;
}

.sxo-2026-wrapper .conf-custom-no-price-2026 {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1e3a5f;
    text-align: center;
    margin-bottom: 12px;
}

/* ═══════════════════════════════════════════════════════════════
   PARTIE 6 — ACCORDÉON
═══════════════════════════════════════════════════════════════ */

.sxo-2026-wrapper .conf-accordion-2026 {
    margin-bottom: 24px;
}

.sxo-2026-wrapper .conf-accordion-trigger-2026 {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.2s;
    text-align: left;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

.sxo-2026-wrapper .conf-accordion-trigger-2026:hover {
    border-color: #c4a35a;
}

.sxo-2026-wrapper .conf-accordion-trigger-left-2026 {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sxo-2026-wrapper .conf-accordion-icon-2026 {
    flex-shrink: 0;
    color: #c4a35a;
}

.sxo-2026-wrapper .conf-accordion-summary-2026 {
    font-size: 0.825rem;
    color: #64748b;
    display: block;
    margin-top: 2px;
}

.sxo-2026-wrapper .conf-accordion-arrow-2026 {
    flex-shrink: 0;
    color: #64748b;
    transition: transform 0.3s;
}

.sxo-2026-wrapper .conf-accordion-arrow-open-2026 {
    transform: rotate(180deg);
}

/* Body accordéon */
.sxo-2026-wrapper .conf-accordion-body-2026 {
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-top: none;
    border-radius: 0 0 12px 12px;
    padding: 24px 20px;
}

/* Sections A/B/C */
.sxo-2026-wrapper .conf-accord-section-2026 {
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid #e2e8f0;
}

.sxo-2026-wrapper .conf-accord-section-2026:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.sxo-2026-wrapper .conf-accord-section-title-2026 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.sxo-2026-wrapper .conf-accord-badge-2026 {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #0a1628;
    color: #c4a35a;
    font-size: 0.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sxo-2026-wrapper .conf-accord-section-title-2026 h4 {
    font-size: 1rem;
    font-weight: 700;
    color: #0a1628;
    margin: 0;
}

.sxo-2026-wrapper .conf-accord-subtitle-2026 {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ═══════════════════════════════════════════════════════════════
   PARTIE 7 — Section summary (section A)
═══════════════════════════════════════════════════════════════ */

.sxo-2026-wrapper .conf-section-summary-2026 {
    margin-top: 20px;
    padding: 14px 16px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.sxo-2026-wrapper .conf-sum-title-2026 {
    font-size: 0.75rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 8px;
}

.sxo-2026-wrapper .conf-sum-line-2026 {
    display: flex;
    justify-content: space-between;
    font-size: 0.825rem;
    color: #64748b;
    padding: 2px 0;
}

.sxo-2026-wrapper .conf-sum-total-2026 {
    border-top: 1px solid #e2e8f0;
    margin-top: 8px;
    padding-top: 10px;
    font-weight: 700;
    color: #c4a35a;
    font-size: 0.95rem;
}

/* ═══════════════════════════════════════════════════════════════
   PARTIE 8 — Toggle list (options section B)
═══════════════════════════════════════════════════════════════ */

.sxo-2026-wrapper .conf-toggle-list-2026 {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sxo-2026-wrapper .conf-toggle-item-2026 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    min-height: 48px;
}

.sxo-2026-wrapper .conf-toggle-item-2026:hover {
    border-color: #d4b86a;
    background: #f8fafc;
}

.sxo-2026-wrapper .conf-toggle-active-2026 {
    border-color: #c4a35a;
    background: #f5edda;
}

.sxo-2026-wrapper .conf-toggle-info-2026 {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sxo-2026-wrapper .conf-toggle-name-2026 {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1e293b;
}

.sxo-2026-wrapper .conf-toggle-price-2026 {
    font-size: 0.775rem;
    color: #64748b;
}

/* Toggle switch visuel */
.sxo-2026-wrapper .conf-toggle-switch-2026 {
    width: 44px;
    height: 24px;
    border-radius: 12px;
    background: #cbd5e1;
    position: relative;
    transition: background 0.2s;
    flex-shrink: 0;
}

.sxo-2026-wrapper .conf-toggle-switch-2026::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffffff;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.sxo-2026-wrapper .conf-toggle-active-2026 .conf-toggle-switch-2026 {
    background: #c4a35a;
}

.sxo-2026-wrapper .conf-toggle-active-2026 .conf-toggle-switch-2026::after {
    transform: translateX(20px);
}

/* Ligne total options */
.sxo-2026-wrapper .conf-options-total-2026 {
    margin-top: 16px;
    padding: 10px 14px;
    background: #f5edda;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
    font-weight: 600;
    color: #0a1628;
}

/* ═══════════════════════════════════════════════════════════════
   PARTIE 9 — Checkboxes (section C — sur devis)
═══════════════════════════════════════════════════════════════ */

.sxo-2026-wrapper .conf-advanced-intro-2026 {
    font-size: 0.825rem;
    color: #64748b;
    margin-bottom: 16px;
    padding: 10px 14px;
    background: #f1f5f9;
    border-radius: 8px;
    border-left: 3px solid #0a1628;
}

.sxo-2026-wrapper .conf-checkbox-list-2026 {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sxo-2026-wrapper .conf-checkbox-item-2026 {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sxo-2026-wrapper .conf-checkbox-row-2026 {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    min-height: 48px;
}

.sxo-2026-wrapper .conf-checkbox-row-2026:hover {
    border-color: #1e3a5f;
    background: #f8fafc;
}

.sxo-2026-wrapper .conf-checkbox-checked-2026 {
    border-color: #0a1628;
    background: rgba(10, 22, 40, 0.04);
}

.sxo-2026-wrapper .conf-checkbox-native-2026 {
    width: 18px;
    height: 18px;
    accent-color: #0a1628;
    cursor: pointer;
    flex-shrink: 0;
}

.sxo-2026-wrapper .conf-checkbox-label-2026 {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1e293b;
}

.sxo-2026-wrapper .conf-checkbox-extra-2026 {
    padding: 0 14px 4px 42px;
}

.sxo-2026-wrapper .conf-extra-input-label-2026 {
    display: block;
    font-size: 0.775rem;
    color: #64748b;
    margin-bottom: 6px;
}

.sxo-2026-wrapper .conf-extra-input-2026 {
    width: 100%;
    max-width: 320px;
    min-height: 48px;
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.875rem;
    color: #1e293b;
    background: #ffffff;
    transition: border-color 0.2s;
}

.sxo-2026-wrapper .conf-extra-input-2026:focus {
    outline: none;
    border-color: #1e3a5f;
}

/* ═══════════════════════════════════════════════════════════════
   PARTIE 10 — TABLE — Toggle billing
═══════════════════════════════════════════════════════════════ */

.sxo-2026-wrapper .conf-toggle-billing-2026 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 20px 0;
}

.sxo-2026-wrapper .conf-toggle-label-2026 {
    font-size: 0.875rem;
    font-weight: 600;
    color: #64748b;
    transition: color 0.2s;
}

.sxo-2026-wrapper .conf-toggle-label-active-2026 {
    color: #1e293b;
}

.sxo-2026-wrapper .conf-toggle-badge-2026 {
    background: #16a34a;
    color: #ffffff;
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    margin-left: 4px;
    vertical-align: middle;
}

/* Switch input toggle billing */
.sxo-2026-wrapper .conf-toggle-switch-input-2026 {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
    cursor: pointer;
}

.sxo-2026-wrapper .conf-toggle-switch-input-2026 input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.sxo-2026-wrapper .conf-toggle-slider-2026 {
    position: absolute;
    inset: 0;
    background: #1e3a5f;
    border-radius: 28px;
    transition: background 0.25s;
}

.sxo-2026-wrapper .conf-toggle-slider-2026::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    left: 4px;
    top: 4px;
    background: #ffffff;
    border-radius: 50%;
    transition: transform 0.25s;
}

.sxo-2026-wrapper .conf-toggle-switch-input-2026 input:checked + .conf-toggle-slider-2026 {
    background: #c4a35a;
}

.sxo-2026-wrapper .conf-toggle-switch-input-2026 input:checked + .conf-toggle-slider-2026::before {
    transform: translateX(24px);
}

/* ═══════════════════════════════════════════════════════════════
   PARTIE 11 — TABLE — Scroll hint
═══════════════════════════════════════════════════════════════ */

.sxo-2026-wrapper .conf-scroll-hint-2026 {
    display: block;
    text-align: center;
    font-size: 0.75rem;
    color: #64748b;
    padding: 8px 0 4px;
    letter-spacing: 0.03em;
}

@media (min-width: 768px) {
    .sxo-2026-wrapper .conf-scroll-hint-2026 {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════════
   PARTIE 12 — TABLE — Comparison table
═══════════════════════════════════════════════════════════════ */

.sxo-2026-wrapper .conf-table-wrapper-2026 {
    padding-top: 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 24px;
}

.sxo-2026-wrapper .conf-table-2026 {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    border-spacing: 0;
    background: #ffffff;
    border-radius: 12px;
    overflow: visible;
    box-shadow: 0 4px 24px rgba(10, 22, 40, 0.10);
}

/* En-tête feature */
.sxo-2026-wrapper .conf-table-feat-header-2026 {
    padding: 24px 18px;
    text-align: left;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #64748b;
    vertical-align: bottom;
    background: #f8fafc;
}

.sxo-2026-wrapper .conf-table-feat-header-2026 small {
    display: block;
    font-size: 0.6875rem;
    font-weight: 400;
    color: #94a3b8;
    margin-top: 2px;
}

/* En-tête plan */
.sxo-2026-wrapper .conf-table-plan-header-2026 {
    padding: 24px 16px;
    text-align: center;
    vertical-align: top;
    position: relative;
    transition: background 0.2s;
}

.sxo-2026-wrapper .conf-table-recommended-2026 {
    background: rgba(196, 163, 90, 0.05);
}

.sxo-2026-wrapper .conf-table-selected-2026 {
    background: rgba(196, 163, 90, 0.12);
}

/* Nom du plan */
.sxo-2026-wrapper .conf-table-plan-name-2026 {
    font-size: 1rem;
    font-weight: 700;
    color: #0a1628;
    display: block;
    margin-bottom: 8px;
}

/* Prix */
.sxo-2026-wrapper .conf-table-price-wrap-2026 {
    margin-bottom: 4px;
}

.sxo-2026-wrapper .conf-table-price-euro-2026 {
    font-size: 0.875rem;
    font-weight: 600;
    color: #c4a35a;
    vertical-align: super;
}

.sxo-2026-wrapper .conf-table-price-amount-2026 {
    font-size: 1.75rem;
    font-weight: 700;
    color: #c4a35a;
}

.sxo-2026-wrapper .conf-table-price-unit-2026 {
    font-size: 0.6875rem;
    color: #64748b;
    display: block;
    margin-bottom: 12px;
}

/* Bouton select dans table */
.sxo-2026-wrapper .conf-table-btn-select-2026 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 8px 20px;
    background: transparent;
    border: 2px solid #1e3a5f;
    border-radius: 8px;
    color: #1e3a5f;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.sxo-2026-wrapper .conf-table-btn-select-2026:hover {
    border-color: #c4a35a;
    background: rgba(196, 163, 90, 0.08);
}

.sxo-2026-wrapper .conf-table-btn-selected-2026 {
    background: #c4a35a;
    border-color: #c4a35a;
    color: #0a1628;
}

/* Cellules données */
.sxo-2026-wrapper .conf-table-feat-label-2026 {
    padding: 14px 18px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #1e293b;
    border-top: 1px solid #f1f5f9;
}

.sxo-2026-wrapper .conf-table-feat-label-2026 small {
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
    color: #64748b;
    margin-top: 2px;
}

.sxo-2026-wrapper .conf-table-feat-val-2026 {
    padding: 14px 16px;
    text-align: center;
    font-size: 0.8125rem;
    color: #1e293b;
    border-top: 1px solid #f1f5f9;
    transition: background 0.2s;
}

.sxo-2026-wrapper .conf-table-feat-val-2026 small {
    font-size: 0.6875rem;
    color: #64748b;
}

/* Icones oui/non */
.sxo-2026-wrapper .conf-icon-yes-2026 {
    color: #16a34a;
    font-weight: 700;
    font-size: 1.125rem;
}

.sxo-2026-wrapper .conf-icon-no-2026 {
    color: #dc2626;
    font-weight: 500;
    font-size: 1rem;
    opacity: 0.5;
}

/* ─── Table responsive ────────────────────────────────────────── */
@media (min-width: 992px) {
    .sxo-2026-wrapper .conf-table-plan-name-2026 {
        font-size: 1.125rem;
    }
    .sxo-2026-wrapper .conf-table-price-amount-2026 {
        font-size: 2.125rem;
    }
}

/* ═══════════════════════════════════════════════════════════════
   PARTIE 13 — Note EEA
═══════════════════════════════════════════════════════════════ */

.sxo-2026-wrapper .conf-note-2026 {
    margin: 0 0 20px;
    padding: 12px 20px;
    background: rgba(196, 163, 90, 0.08);
    border-left: 3px solid #c4a35a;
    border-radius: 6px;
    font-size: 0.8125rem;
    color: #64748b;
    line-height: 1.5;
}

.sxo-2026-wrapper .conf-note-2026 strong {
    color: #1e293b;
}

/* ═══════════════════════════════════════════════════════════════
   PARTIE 14 — DEV-059 : Flow Recap → Devis
═══════════════════════════════════════════════════════════════ */

/* --- Bandeau recap (mobile-first: empilé) --- */
.sxo-2026-wrapper .conf-recap-2026 {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    padding: 1rem;
    margin: 1.5rem 0;
    background: rgba(10, 22, 40, 0.05);
    border-left: 4px solid #c4a35a;
    border-radius: 8px;
}

.sxo-2026-wrapper .conf-recap-check-2026 {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #c4a35a;
    color: #fff;
    border-radius: 50%;
}

.sxo-2026-wrapper .conf-recap-details-2026 {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.sxo-2026-wrapper .conf-recap-details-2026 strong {
    font-size: 1rem;
    color: #0a1628;
}

.sxo-2026-wrapper .conf-recap-details-2026 span {
    font-size: 0.875rem;
    color: #475569;
}

.sxo-2026-wrapper .conf-recap-modify-2026 {
    flex-shrink: 0;
    align-self: stretch;
    justify-content: center;
    padding: 0.5rem 1rem;
    background: transparent;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    color: #475569;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: all 0.2s;
    min-height: 48px;
    display: flex;
    align-items: center;
}

.sxo-2026-wrapper .conf-recap-modify-2026:hover {
    border-color: #c4a35a;
    color: #c4a35a;
}

/* Desktop: bandeau horizontal */
@media (min-width: 640px) {
    .sxo-2026-wrapper .conf-recap-2026 {
        flex-direction: row;
        align-items: flex-start;
    }

    .sxo-2026-wrapper .conf-recap-modify-2026 {
        align-self: center;
    }
}

/* --- Pack bouton état actif --- */
.sxo-2026-wrapper .conf-pack-selected-2026 .conf-pack-btn-2026 {
    background: #c4a35a;
    color: #fff;
    border-color: #c4a35a;
}

/* --- Titre formulaire --- */
.sxo-2026-wrapper .conf-form-title-2026 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0a1628;
    margin: 0 0 0.25rem;
    text-align: center;
}

.sxo-2026-wrapper .conf-form-subtitle-2026 {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0 0 1.5rem;
    text-align: center;
}

/* --- Textarea message --- */
.sxo-2026-wrapper .conf-textarea-2026 {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.9375rem;
    color: #0a1628;
    background: #fff;
    font-family: inherit;
    resize: vertical;
    min-height: 80px;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.sxo-2026-wrapper .conf-textarea-2026:focus {
    outline: none;
    border-color: #c4a35a;
    box-shadow: 0 0 0 3px rgba(196, 163, 90, 0.1);
}

/* --- CTA custom mode --- */
.sxo-2026-wrapper .conf-custom-cta-2026 {
    text-align: center;
    margin: 1rem 0;
}

/* --- RAM readonly (mapping CPU→RAM fixe, ex: Serveurs Cloud) --- */
.sxo-2026-wrapper .conf-readonly-value-2026 {
    padding: 0.625rem 1rem;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.9375rem;
    color: #475569;
}

/* --- Toggle OS (Windows/Linux) --- */
.sxo-2026-wrapper .conf-os-toggle-2026 {
    display: flex;
    gap: 0;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
}

.sxo-2026-wrapper .conf-os-btn-2026 {
    flex: 1;
    padding: 0.625rem 1rem;
    background: #fff;
    border: none;
    font-size: 0.875rem;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s;
    min-height: 48px;
    font-family: inherit;
}

.sxo-2026-wrapper .conf-os-btn-2026:first-child {
    border-right: 1px solid #e2e8f0;
}

.sxo-2026-wrapper .conf-os-btn-2026:hover {
    background: #f8fafc;
}

.sxo-2026-wrapper .conf-os-btn-active-2026 {
    background: #c4a35a;
    color: #fff;
}

.sxo-2026-wrapper .conf-os-btn-active-2026:hover {
    background: #b39349;
}