{# templates/commande/wizard.html.twig #}
{# Wizard Multi-Formulaires NUM-ECARD - Style Apple #}

{% extends 'base.html.twig' %}

{% block title %}Commander {{ packLabel }} × {{ quantity }}{% endblock %}

{% block stylesheets %}
{{ parent() }}
<style>
/* ============================================================================
   WIZARD MULTI-FORMULAIRES - NUM-ECARD
   Style Apple / Design moderne
   ============================================================================ */

/* Variables */
:root {
    --wizard-primary: #667eea;
    --wizard-primary-dark: #764ba2;
    --wizard-success: #34c759;
    --wizard-danger: #ff3b30;
    --wizard-gray: #86868b;
    --wizard-gray-light: #f5f5f7;
    --wizard-gray-border: #d2d2d7;
    --wizard-text: #1d1d1f;
    --wizard-gradient: linear-gradient(135deg, var(--wizard-primary) 0%, var(--wizard-primary-dark) 100%);
    
    /* ═══════════════════════════════════════════════════════════════════
       COULEURS PAR PACK - Pour distinguer visuellement les packs
       ═══════════════════════════════════════════════════════════════════ */
    /* Pack 1 - Violet (couleur principale NUM-ECARD) */
    --pack1-main: #8B5CF6;
    --pack1-light: #EDE9FE;
    --pack1-gradient: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
    
    /* Pack 2 - Vert émeraude */
    --pack2-main: #10B981;
    --pack2-light: #D1FAE5;
    --pack2-gradient: linear-gradient(135deg, #10B981 0%, #059669 100%);
    
    /* Pack 3 - Orange */
    --pack3-main: #F59E0B;
    --pack3-light: #FEF3C7;
    --pack3-gradient: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);

    /* Pack 4 - Rose */
    --pack4-main: #EC4899;
    --pack4-light: #FCE7F3;
    --pack4-gradient: linear-gradient(135deg, #EC4899 0%, #DB2777 100%);

    /* Pack 5 - Bleu cyan */
    --pack5-main: #06B6D4;
    --pack5-light: #CFFAFE;
    --pack5-gradient: linear-gradient(135deg, #06B6D4 0%, #0891B2 100%);

    /* Pack 6 - Rouge */
    --pack6-main: #EF4444;
    --pack6-light: #FEE2E2;
    --pack6-gradient: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);

    /* Pack 7 - Indigo */
    --pack7-main: #6366F1;
    --pack7-light: #E0E7FF;
    --pack7-gradient: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);

    /* Pack 8 - Teal */
    --pack8-main: #14B8A6;
    --pack8-light: #CCFBF1;
    --pack8-gradient: linear-gradient(135deg, #14B8A6 0%, #0D9488 100%);

    /* Pack 9 - Ambre */
    --pack9-main: #F59E0B;
    --pack9-light: #FEF3C7;
    --pack9-gradient: linear-gradient(135deg, #D97706 0%, #B45309 100%);

    /* Pack 10 - Lime */
    --pack10-main: #84CC16;
    --pack10-light: #ECFCCB;
    --pack10-gradient: linear-gradient(135deg, #84CC16 0%, #65A30D 100%);
}


/* ============================================================================
   COLOR PICKER VISUEL — Barre couleur cliquable
   ============================================================================ */
.color-picker-wrap {
    position: relative;
    width: 100%;
    height: 44px;
    border-radius: 10px;
    overflow: hidden;
    border: 1.5px solid var(--wizard-gray-border);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.color-picker-wrap:hover {
    border-color: var(--wizard-primary);
    box-shadow: 0 2px 12px rgba(102,126,234,0.18);
}
.color-native-input {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    opacity: 0;
    cursor: pointer;
    border: none;
    padding: 0;
    margin: 0;
}
.color-bar {
    width: 100%;
    height: 100%;
    border-radius: 9px;
    transition: background 0.15s ease;
    pointer-events: none;
}

/* Page container */
.wizard-page {
    background: #f5f5f7;
    min-height: 100vh;
    padding: 40px 20px 100px;
}

.wizard-container {
    max-width: 800px;
    margin: 0 auto;
}

/* ============================================================================
   HEADER - INFO COMMANDE
   ============================================================================ */

.wizard-header {
    background: var(--wizard-gradient);
    color: white;
    padding: 28px 32px;
    border-radius: 20px;
    margin-bottom: 32px;
    box-shadow: 0 10px 40px rgba(102, 126, 234, 0.3);
}

.wizard-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.wizard-header h1 {
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 6px;
}

.wizard-header p {
    margin: 0;
    opacity: 0.9;
    font-size: 15px;
}

.wizard-price-box {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 16px 24px;
    text-align: center;
}

.wizard-price-box .price {
    font-size: 32px;
    font-weight: 700;
}

.wizard-price-box .price-label {
    font-size: 12px;
    opacity: 0.8;
    margin-top: 2px;
}

/* ============================================================================
   NAVIGATION BÉNÉFICIAIRES
   ============================================================================ */

.beneficiaires-nav {
    display: flex;
    gap: 10px;
    margin-bottom: 24px;
    overflow-x: auto;
    padding: 4px;
}

.benef-nav-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: white;
    border: 2px solid var(--wizard-gray-border);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 500;
    color: var(--wizard-text);
}

.benef-nav-btn:hover {
    border-color: var(--wizard-primary);
    background: #f8f8ff;
}

.benef-nav-btn.active {
    background: var(--wizard-gradient);
    border-color: transparent;
    color: white;
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
}

.benef-nav-btn.completed {
    border-color: var(--wizard-success);
}

.benef-nav-btn .benef-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--wizard-gray-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
}

.benef-nav-btn.active .benef-number {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.benef-nav-btn.completed .benef-number {
    background: var(--wizard-success);
    color: white;
}

/* ============================================================================
   COULEURS PAR PACK - Boutons de navigation bénéficiaires
   ============================================================================ */

/* Pack 1 - Violet */
.benef-nav-btn.pack-1 {
    background: var(--pack1-light);
    border-color: rgba(139, 92, 246, 0.3);
}
.benef-nav-btn.pack-1 .benef-number {
    background: var(--pack1-main);
    color: white;
}
.benef-nav-btn.pack-1:hover {
    border-color: var(--pack1-main);
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.25);
}
.benef-nav-btn.pack-1.active {
    background: var(--pack1-gradient);
    border-color: transparent;
    color: white;
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
}
.benef-nav-btn.pack-1.active .benef-number {
    background: rgba(255, 255, 255, 0.25);
}

/* Pack 2 - Vert */
.benef-nav-btn.pack-2 {
    background: var(--pack2-light);
    border-color: rgba(16, 185, 129, 0.3);
}
.benef-nav-btn.pack-2 .benef-number {
    background: var(--pack2-main);
    color: white;
}
.benef-nav-btn.pack-2:hover {
    border-color: var(--pack2-main);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.25);
}
.benef-nav-btn.pack-2.active {
    background: var(--pack2-gradient);
    border-color: transparent;
    color: white;
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}
.benef-nav-btn.pack-2.active .benef-number {
    background: rgba(255, 255, 255, 0.25);
}

/* Pack 3 - Orange */
.benef-nav-btn.pack-3 {
    background: var(--pack3-light);
    border-color: rgba(245, 158, 11, 0.3);
}
.benef-nav-btn.pack-3 .benef-number {
    background: var(--pack3-main);
    color: white;
}
.benef-nav-btn.pack-3:hover {
    border-color: var(--pack3-main);
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.25);
}
.benef-nav-btn.pack-3.active {
    background: var(--pack3-gradient);
    border-color: transparent;
    color: white;
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
}
.benef-nav-btn.pack-3.active .benef-number {
    background: rgba(255, 255, 255, 0.25);
}

/* Pack 4 - Rose */
.benef-nav-btn.pack-4 {
    background: var(--pack4-light);
    border-color: rgba(236, 72, 153, 0.3);
}
.benef-nav-btn.pack-4 .benef-number {
    background: var(--pack4-main);
    color: white;
}
.benef-nav-btn.pack-4:hover {
    border-color: var(--pack4-main);
    box-shadow: 0 4px 15px rgba(236, 72, 153, 0.25);
}
.benef-nav-btn.pack-4.active {
    background: var(--pack4-gradient);
    border-color: transparent;
    color: white;
    box-shadow: 0 6px 20px rgba(236, 72, 153, 0.4);
}
.benef-nav-btn.pack-4.active .benef-number {
    background: rgba(255, 255, 255, 0.25);
}

/* Pack 5 - Bleu cyan */
.benef-nav-btn.pack-5 {
    background: var(--pack5-light);
    border-color: rgba(6, 182, 212, 0.3);
}
.benef-nav-btn.pack-5 .benef-number {
    background: var(--pack5-main);
    color: white;
}
.benef-nav-btn.pack-5:hover {
    border-color: var(--pack5-main);
    box-shadow: 0 4px 15px rgba(6, 182, 212, 0.25);
}
.benef-nav-btn.pack-5.active {
    background: var(--pack5-gradient);
    border-color: transparent;
    color: white;
    box-shadow: 0 6px 20px rgba(6, 182, 212, 0.4);
}
.benef-nav-btn.pack-5.active .benef-number {
    background: rgba(255, 255, 255, 0.25);
}

/* Pack 6 - Rouge */
.benef-nav-btn.pack-6 {
    background: var(--pack6-light);
    border-color: rgba(239, 68, 68, 0.3);
}
.benef-nav-btn.pack-6 .benef-number {
    background: var(--pack6-main);
    color: white;
}
.benef-nav-btn.pack-6:hover {
    border-color: var(--pack6-main);
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.25);
}
.benef-nav-btn.pack-6.active {
    background: var(--pack6-gradient);
    border-color: transparent;
    color: white;
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
}
.benef-nav-btn.pack-6.active .benef-number {
    background: rgba(255, 255, 255, 0.25);
}

/* Pack 7 - Indigo */
.benef-nav-btn.pack-7 {
    background: var(--pack7-light);
    border-color: rgba(99, 102, 241, 0.3);
}
.benef-nav-btn.pack-7 .benef-number {
    background: var(--pack7-main);
    color: white;
}
.benef-nav-btn.pack-7:hover {
    border-color: var(--pack7-main);
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.25);
}
.benef-nav-btn.pack-7.active {
    background: var(--pack7-gradient);
    border-color: transparent;
    color: white;
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}
.benef-nav-btn.pack-7.active .benef-number {
    background: rgba(255, 255, 255, 0.25);
}

/* Pack 8 - Teal */
.benef-nav-btn.pack-8 {
    background: var(--pack8-light);
    border-color: rgba(20, 184, 166, 0.3);
}
.benef-nav-btn.pack-8 .benef-number {
    background: var(--pack8-main);
    color: white;
}
.benef-nav-btn.pack-8:hover {
    border-color: var(--pack8-main);
    box-shadow: 0 4px 15px rgba(20, 184, 166, 0.25);
}
.benef-nav-btn.pack-8.active {
    background: var(--pack8-gradient);
    border-color: transparent;
    color: white;
    box-shadow: 0 6px 20px rgba(20, 184, 166, 0.4);
}
.benef-nav-btn.pack-8.active .benef-number {
    background: rgba(255, 255, 255, 0.25);
}

/* Pack 9 - Ambre */
.benef-nav-btn.pack-9 {
    background: var(--pack9-light);
    border-color: rgba(245, 158, 11, 0.3);
}
.benef-nav-btn.pack-9 .benef-number {
    background: var(--pack9-main);
    color: white;
}
.benef-nav-btn.pack-9:hover {
    border-color: var(--pack9-main);
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.25);
}
.benef-nav-btn.pack-9.active {
    background: var(--pack9-gradient);
    border-color: transparent;
    color: white;
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
}
.benef-nav-btn.pack-9.active .benef-number {
    background: rgba(255, 255, 255, 0.25);
}

/* Pack 10 - Lime */
.benef-nav-btn.pack-10 {
    background: var(--pack10-light);
    border-color: rgba(132, 204, 22, 0.3);
}
.benef-nav-btn.pack-10 .benef-number {
    background: var(--pack10-main);
    color: white;
}
.benef-nav-btn.pack-10:hover {
    border-color: var(--pack10-main);
    box-shadow: 0 4px 15px rgba(132, 204, 22, 0.25);
}
.benef-nav-btn.pack-10.active {
    background: var(--pack10-gradient);
    border-color: transparent;
    color: white;
    box-shadow: 0 6px 20px rgba(132, 204, 22, 0.4);
}
.benef-nav-btn.pack-10.active .benef-number {
    background: rgba(255, 255, 255, 0.25);
}

/* Légende des packs */
.packs-legend {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.pack-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--wizard-gray);
}

.pack-legend-color {
    width: 16px;
    height: 16px;
    border-radius: 5px;
}

.pack-legend-color.pack-1 { background: var(--pack1-gradient); }
.pack-legend-color.pack-2 { background: var(--pack2-gradient); }
.pack-legend-color.pack-3 { background: var(--pack3-gradient); }
.pack-legend-color.pack-4 { background: var(--pack4-gradient); }
.pack-legend-color.pack-5 { background: var(--pack5-gradient); }
.pack-legend-color.pack-6 { background: var(--pack6-gradient); }
.pack-legend-color.pack-7 { background: var(--pack7-gradient); }
.pack-legend-color.pack-8 { background: var(--pack8-gradient); }
.pack-legend-color.pack-9 { background: var(--pack9-gradient); }
.pack-legend-color.pack-10 { background: var(--pack10-gradient); }

/* ============================================================================
   BARRE DE PROGRESSION (WIZARD STEPS)
   ============================================================================ */

.wizard-progress {
    margin-bottom: 32px;
}

.wizard-progress-bar {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-bottom: 16px;
}

.wizard-progress-bar::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 30px;
    right: 30px;
    height: 3px;
    background: var(--wizard-gray-border);
    border-radius: 2px;
    z-index: 0;
}

.wizard-progress-bar .progress-fill {
    position: absolute;
    top: 20px;
    left: 30px;
    height: 3px;
    background: var(--wizard-gradient);
    border-radius: 2px;
    z-index: 1;
    transition: width 0.4s ease;
}

.wizard-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
    cursor: pointer;
}

.wizard-step-circle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: white;
    border: 3px solid var(--wizard-gray-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 16px;
    color: var(--wizard-gray);
    transition: all 0.3s ease;
    margin-bottom: 8px;
}

.wizard-step.active .wizard-step-circle {
    background: var(--wizard-gradient);
    border-color: transparent;
    color: white;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.wizard-step.completed .wizard-step-circle {
    background: var(--wizard-success);
    border-color: transparent;
    color: white;
}

.wizard-step-label {
    font-size: 12px;
    color: var(--wizard-gray);
    font-weight: 500;
    text-align: center;
    max-width: 80px;
}

.wizard-step.active .wizard-step-label {
    color: var(--wizard-primary);
    font-weight: 600;
}

/* ============================================================================
   CARTE FORMULAIRE
   ============================================================================ */

.wizard-card {
    background: white;
    border-radius: 20px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    margin-bottom: 24px;
}

.wizard-card-header {
    background: var(--wizard-gray-light);
    padding: 20px 28px;
    border-bottom: 1px solid var(--wizard-gray-border);
    display: flex;
    align-items: center;
    gap: 16px;
}

.wizard-card-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--wizard-gradient);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.wizard-card-title h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--wizard-text);
    margin: 0 0 4px;
}

.wizard-card-title p {
    font-size: 14px;
    color: var(--wizard-gray);
    margin: 0;
}

.wizard-card-body {
    padding: 28px;
}

/* ============================================================================
   SECTIONS DU FORMULAIRE (ÉTAPES)
   ============================================================================ */

.form-step {
    display: none;
    opacity: 1; /* Forcer l'opacité */
}

.form-step.active {
    display: block;
    opacity: 1 !important;
    visibility: visible !important;
    /* Animation plus sûre sans opacity */
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from { transform: translateY(10px); }
    to { transform: translateY(0); }
}

/* ANCIEN fadeIn - causait des problèmes de transparence
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
*/

.form-step-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--wizard-text);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--wizard-gray-light);
}

.form-step-title .step-emoji {
    margin-right: 10px;
}

/* ============================================================================
   CHAMPS DE FORMULAIRE
   ============================================================================ */

.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

.form-row.full {
    grid-template-columns: 1fr;
}

@media (max-width: 600px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}

.form-group {
    margin-bottom: 4px;
}

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--wizard-text);
    margin-bottom: 6px;
}

.form-group label.required::after {
    content: ' *';
    color: var(--wizard-danger);
}

.form-input,
.form-textarea,
.form-select {
    width: 100%;
    padding: 14px 16px;
    font-size: 15px;
    border: 1px solid var(--wizard-gray-border);
    border-radius: 12px;
    background: var(--wizard-gray-light);
    color: var(--wizard-text);
    transition: all 0.2s ease;
    font-family: inherit;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    outline: none;
    border-color: var(--wizard-primary);
    background: white;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
}

.form-textarea {
    min-height: 80px;
    resize: vertical;
}

.form-help {
    font-size: 12px;
    color: var(--wizard-gray);
    margin-top: 6px;
}

.form-error {
    font-size: 12px;
    color: var(--wizard-danger);
    margin-top: 6px;
}

/* Checkbox et Radio */
.form-check-group {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* ✅ FIX : radio/checkbox inline avec leur label */
.form-check-group > div {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--wizard-gray-light);
    border-radius: 10px;
    cursor: pointer;
}

.form-check-group > div input[type="radio"],
.form-check-group > div input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
}

.form-check-group > div label {
    margin: 0;
    cursor: pointer;
    font-weight: 500;
    font-size: 14px;
}

/* Section conditionnelle */
.conditional-section {
    display: none;
    margin-top: 16px;
    padding: 20px;
    background: #f8f9ff;
    border-radius: 12px;
    border-left: 4px solid var(--wizard-primary);
}

.conditional-section.visible {
    display: block;
    opacity: 1 !important;
    animation: slideDownSafe 0.3s ease;
}

@keyframes slideDownSafe {
    from { max-height: 0; }
    to { max-height: 500px; }
}

/* ANCIEN slideDown - causait des problèmes de transparence
@keyframes slideDown {
    from { opacity: 0; max-height: 0; }
    to { opacity: 1; max-height: 500px; }
}
*/

/* ============================================================================
   FEATURES PREMIUM (Checkboxes avec liens)
   ============================================================================ */

.feature-item {
    border: 1px solid var(--wizard-gray-border);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    background: white;
    transition: all 0.2s ease;
}

.feature-item:hover {
    border-color: var(--wizard-primary);
}

.feature-item.active {
    border-color: var(--wizard-success);
    background: #f8fff9;
}

.feature-header {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.feature-header input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.feature-header label {
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    flex: 1;
}

.feature-link-section {
    display: none;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--wizard-gray-border);
}

.feature-link-section.visible {
    display: block;
}

/* ============================================================================
   RÉSEAUX SOCIAUX (grille de checkboxes)
   ============================================================================ */

.social-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.social-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--wizard-gray-light);
    border-radius: 10px;
    transition: all 0.2s ease;
}

.social-item:hover {
    background: #e8e8ed;
}

.social-item.active {
    background: #e8f4fd;
    border: 1px solid #0071e3;
}

.social-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

.social-item label {
    flex: 1;
    cursor: pointer;
    font-weight: 500;
}

.social-item .social-icon {
    width: 24px;
    height: 24px;
}

.social-url-field {
    display: none;
    margin-top: 8px;
}

.social-url-field.visible {
    display: block;
}

/* ============================================================================
   BOUTONS DE NAVIGATION
   ============================================================================ */

.wizard-nav {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--wizard-gray-border);
}

.btn-wizard {
    padding: 16px 32px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-wizard-prev {
    background: white;
    border: 2px solid var(--wizard-gray-border);
    color: var(--wizard-text);
}

.btn-wizard-prev:hover {
    background: var(--wizard-gray-light);
    border-color: var(--wizard-gray);
}

.btn-wizard-next {
    background: var(--wizard-gradient);
    color: white;
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
}

.btn-wizard-next:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(102, 126, 234, 0.4);
}

.btn-wizard-submit {
    background: linear-gradient(135deg, var(--wizard-success) 0%, #30d158 100%);
    color: white;
    box-shadow: 0 4px 20px rgba(52, 199, 89, 0.3);
}

.btn-wizard-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(52, 199, 89, 0.4);
}

/* ============================================================================
   BOUTON COPIER INFOS ENTREPRISE
   ============================================================================ */

.btn-copy-entreprise {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: #e3f2fd;
    border: 1px solid #90caf9;
    border-radius: 8px;
    color: #1565c0;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 16px;
}

.btn-copy-entreprise:hover {
    background: #bbdefb;
}

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

@media (max-width: 768px) {
    .wizard-page {
        padding: 20px 12px 80px;
    }

    .wizard-header {
        padding: 20px;
    }

    .wizard-header h1 {
        font-size: 22px;
    }

    .wizard-header-content {
        flex-direction: column;
        text-align: center;
    }

    .wizard-progress-bar {
        overflow-x: auto;
        padding-bottom: 10px;
    }

    .wizard-step-label {
        font-size: 10px;
        max-width: 60px;
    }

    .wizard-card-body {
        padding: 20px;
    }

    .wizard-nav {
        flex-direction: column;
    }

    .btn-wizard {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================================
   ÉTATS SPÉCIAUX
   ============================================================================ */

/* Formulaire bénéficiaire caché */
.beneficiaire-form {
    display: none;
}

.beneficiaire-form.active {
    display: block;
    opacity: 1 !important;
    visibility: visible !important;
}

/* CORRECTIF TRANSPARENCE - Force la visibilité de tous les éléments du formulaire */
.beneficiaire-form.active .wizard-card,
.beneficiaire-form.active .wizard-card-body,
.beneficiaire-form.active .form-step.active,
.beneficiaire-form.active .form-step-title,
.beneficiaire-form.active .form-group,
.beneficiaire-form.active .form-group label,
.beneficiaire-form.active .form-input,
.beneficiaire-form.active .form-row {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Info box */
.info-box {
    background: #e3f2fd;
    border-left: 4px solid #2196f3;
    padding: 16px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.info-box p {
    margin: 0;
    color: #1565c0;
    font-size: 14px;
}

.info-box strong {
    color: #0d47a1;
}

/* Loader pendant la soumission */
.wizard-loading {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.wizard-loading.visible {
    display: flex;
}

.wizard-loading-spinner {
    width: 60px;
    height: 60px;
    border: 4px solid var(--wizard-gray-light);
    border-top-color: var(--wizard-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* Sélecteur de charte graphique */
.charte-nav-btn:hover {
    background: rgba(255,255,255,0.25) !important;
    transform: scale(1.1);
}

.charte-selector-container select {
    background-color: rgba(255,255,255,0.1) !important;
}

.charte-selector-container select option {
    background: #1d1d1f;
    color: white;
}

/* Responsive pour le sélecteur de charte */
@media (max-width: 600px) {
    .charte-mockup-container .smartphone-mockup {
        width: 220px !important;
        height: 400px !important;
    }
    
    .charte-nav-btn {
        width: 40px !important;
        height: 40px !important;
        font-size: 20px !important;
    }
}
</style>
{% endblock %}

{% block body %}
<div class="wizard-page">
    <div class="wizard-container">

        {# ====================================================================
           HEADER - INFO COMMANDE
           ==================================================================== #}
        <div class="wizard-header">
            <div class="wizard-header-content">
                <div>
                    {% if isCartEdit|default(false) %}
                        <h1>✏️ Modifier ma carte</h1>
                        <p>Modifiez les informations de votre carte {{ packLabel }}</p>
                    {% else %}
                        <h1>🎯 {{ packLabel }}</h1>
                        <p>{{ totalCards }} carte{{ totalCards > 1 ? 's' : '' }} de visite digitale{{ totalCards > 1 ? 's' : '' }} à configurer</p>

                    {% endif %}
                </div>
                {% if not isCartEdit|default(false) %}
                <div class="wizard-price-box">
                    <div class="price">{{ totalHT|number_format(0, ',', ' ') }} € <small style="font-size: 14px; opacity: 0.8;">HT</small></div>
                    <div class="price-label">{{ totalTTC|number_format(2, ',', ' ') }} € TTC</div>
                </div>
                {% endif %}
            </div>
        </div>

        {# ====================================================================
           NAVIGATION BÉNÉFICIAIRES (si plusieurs)
           ==================================================================== #}
        {% if totalCards > 1 %}
        
        {# Calcul du nombre de cartes par pack selon le type #}
        {% set isMultiPack = packType starts with 'multi-' %}
        {% if isMultiPack %}
            {% set cardsPerPack = packType|replace({'multi-': ''})|number_format(0) %}
        {% else %}
            {% set cardsPerPack = totalCards %} {# Pour non-multi, toutes les cartes = 1 seul "pack" #}
        {% endif %}
        {% set totalPacks = (totalCards / cardsPerPack)|round(0, 'ceil') %}
        
        <div class="beneficiaires-nav" id="beneficiairesNav">
            {% for i in 1..totalCards %}
                {# Calcul du numéro de pack pour cette carte (seulement pour multi) #}
                {% if isMultiPack %}
                    {% set packNum = ((i - 1) // cardsPerPack) + 1 %}
                    {% set packClass = 'pack-' ~ packNum %}
                {% else %}
                    {% set packClass = '' %} {# Pas de couleur par pack pour Essentiel/Premium/Force de Vente #}
                {% endif %}
            <button type="button" 
                    class="benef-nav-btn {{ packClass }} {{ i == 1 ? 'active' : '' }}" 
                    data-benef="{{ i }}"
                    onclick="switchBeneficiaire({{ i }})">
                <span class="benef-number">{{ i }}</span>
                <span class="benef-name">Carte {{ i }}</span>
            </button>
            {% endfor %}
        </div>
        
        {# Légende des packs (seulement pour les packs multi avec plusieurs packs) #}
        {% if totalPacks > 1 and packType starts with 'multi-' %}
        <div class="packs-legend" id="packsLegend">
            {% for p in 1..totalPacks %}
                {% set startCard = (p - 1) * cardsPerPack + 1 %}
                {% set endCard = p * cardsPerPack %}
                {% if endCard > totalCards %}{% set endCard = totalCards %}{% endif %}
            <div class="pack-legend-item">
                <div class="pack-legend-color pack-{{ p }}"></div>
                <span>Pack {{ p }} (cartes {{ startCard }}-{{ endCard }})</span>
            </div>
            {% endfor %}
        </div>
        {% endif %}
        
        {% endif %}

        {# ====================================================================
           FORMULAIRE PRINCIPAL
           ==================================================================== #}
        {{ form_start(form, {'attr': {'class': 'wizard-form', 'id': 'wizardForm', 'novalidate': 'novalidate'}}) }}

        {# Flash messages (erreurs de validation serveur) #}
        {% for type, messages in app.flashes %}
        {% for message in messages %}
        <div style="padding: 15px 20px; border-radius: 12px; margin-bottom: 20px; font-size: 14px; {% if type == 'error' %}background: #ff3b30; color: white;{% elseif type == 'success' %}background: #34c759; color: white;{% else %}background: #ff9500; color: white;{% endif %}">
            {{ type == 'error' ? '⚠️' : '✅' }} {{ message }}
        </div>
        {% endfor %}
        {% endfor %}

        {# Boucle sur chaque bénéficiaire #}
        {% for index, beneficiaireForm in form.beneficiaires %}
        <div class="beneficiaire-form {{ loop.first ? 'active' : '' }}" 
             data-beneficiaire="{{ loop.index }}"
             id="beneficiaire-{{ loop.index }}">

            {# Barre de progression des étapes #}
            <div class="wizard-progress">
                <div class="wizard-progress-bar">
                    <div class="progress-fill" id="progressFill-{{ loop.index }}" style="width: 0%;"></div>
                    
                    <div class="wizard-step active" data-step="1" onclick="goToStep({{ loop.index }}, 1)">
                        <div class="wizard-step-circle">1</div>
                        <div class="wizard-step-label">Identité</div>
                    </div>
                    <div class="wizard-step" data-step="2" onclick="goToStep({{ loop.index }}, 2)">
                        <div class="wizard-step-circle">2</div>
                        <div class="wizard-step-label">Entreprise</div>
                    </div>
                    <div class="wizard-step" data-step="3" onclick="goToStep({{ loop.index }}, 3)">
                        <div class="wizard-step-circle">3</div>
                        <div class="wizard-step-label">Coordonnées</div>
                    </div>
                    <div class="wizard-step" data-step="4" onclick="goToStep({{ loop.index }}, 4)">
                        <div class="wizard-step-circle">4</div>
                        <div class="wizard-step-label">Services</div>
                    </div>
                    <div class="wizard-step" data-step="5" onclick="goToStep({{ loop.index }}, 5)">
                        <div class="wizard-step-circle">5</div>
                        <div class="wizard-step-label">Réseaux</div>
                    </div>
                    {% if isPremium %}
                    <div class="wizard-step" data-step="6" onclick="goToStep({{ loop.index }}, 6)">
                        <div class="wizard-step-circle">6</div>
                        <div class="wizard-step-label">Premium</div>
                    </div>
                    {% endif %}
                </div>
            </div>

            {# Carte du formulaire #}
            <div class="wizard-card">
                <div class="wizard-card-header">
                    <div class="wizard-card-icon">{{ loop.index }}</div>
                    <div class="wizard-card-title">
                        <h2>Bénéficiaire {{ loop.index }} sur {{ totalCards }}</h2>
                        <p>Renseignez les informations pour cette carte de visite</p>
                    </div>
                </div>

                <div class="wizard-card-body">

                    {# Bouton copier infos entreprise (à partir du 2ème bénéficiaire) #}
                    {% if not loop.first %}
                    <button type="button" class="btn-copy-entreprise" onclick="copyEntrepriseFromFirst({{ loop.index }})">
                        📋 Copier les infos entreprise du bénéficiaire 1
                    </button>
                    {% endif %}

                    {# ================================================================
                       ÉTAPE 1 : IDENTITÉ
                       ================================================================ #}
                    <div class="form-step active" data-step="1" id="step-{{ loop.index }}-1">
                        <div class="form-step-title">
                            <span class="step-emoji">👤</span>Informations personnelles
                        </div>

                        <div class="form-row">
                            <div class="form-group">
                                {{ form_label(beneficiaireForm.prenom, null, {'label_attr': {'class': 'required'}}) }}
                                {{ form_widget(beneficiaireForm.prenom, {'attr': {'class': 'form-input'}}) }}
                                {{ form_errors(beneficiaireForm.prenom) }}
                            </div>
                            <div class="form-group">
                                {{ form_label(beneficiaireForm.nom, null, {'label_attr': {'class': 'required'}}) }}
                                {{ form_widget(beneficiaireForm.nom, {'attr': {'class': 'form-input'}}) }}
                                {{ form_errors(beneficiaireForm.nom) }}
                            </div>
                        </div>

                        <div class="form-row full">
                            <div class="form-group">
                                {{ form_label(beneficiaireForm.fonction) }}
                                {{ form_widget(beneficiaireForm.fonction, {'attr': {'class': 'form-input'}}) }}
                                {{ form_errors(beneficiaireForm.fonction) }}
                            </div>
                        </div>

                        {# Avatar : gestion selon le pack #}
                        {% if packType == 'forcevente' %}
                        {# Force de Vente : choix initiales/photo #}
                        <div class="form-row full">
                            <div class="form-group">
                                <label class="required">Avatar</label>
                                <div class="form-check-group">
                                    {{ form_widget(beneficiaireForm.avatarType) }}
                                </div>
                            </div>
                        </div>

                        <div class="conditional-section" id="initiales-section-{{ loop.index }}">
                            <div class="form-group">
                                {{ form_label(beneficiaireForm.initiales) }}
                                {{ form_widget(beneficiaireForm.initiales, {'attr': {'class': 'form-input', 'style': 'max-width: 150px;'}}) }}
                                <div class="form-help">Entrez 2-3 lettres (ex: JD pour Jean Dupont)</div>
                            </div>
                        </div>

                        <div class="conditional-section" id="photo-section-{{ loop.index }}">
                            <div class="form-group">
                                {{ form_label(beneficiaireForm.photoFile) }}
                                {{ form_widget(beneficiaireForm.photoFile, {'attr': {'class': 'form-input'}}) }}
                                <div class="form-help">JPG, PNG, GIF, WebP - Max 5 Mo</div>
                            </div>
                        </div>
                        {% elseif packType == 'essentiel' %}
                        {# Essentiel : PAS d'avatar, juste un champ caché #}
                        <input type="hidden" name="{{ beneficiaireForm.avatarType.vars.full_name }}" value="initiales">
                        {% else %}
                        {# Premium, Multi : initiales uniquement #}
                        <div class="form-row full">
                            <div class="form-group">
                                {{ form_label(beneficiaireForm.initiales) }}
                                {{ form_widget(beneficiaireForm.initiales, {'attr': {'class': 'form-input', 'style': 'max-width: 150px;'}}) }}
                                <div class="form-help">Entrez 2-3 lettres pour votre avatar (ex: JD pour Jean Dupont)</div>
                            </div>
                        </div>
                        <input type="hidden" name="{{ beneficiaireForm.avatarType.vars.full_name }}" value="initiales">
                        {% endif %}
                    </div>

                    {# ================================================================
                       ÉTAPE 2 : ENTREPRISE & CHARTE GRAPHIQUE
                       ================================================================ #}
                    <div class="form-step" data-step="2" id="step-{{ loop.index }}-2">
                        <div class="form-step-title">
                            <span class="step-emoji">🏢</span>Entreprise & Charte
                        </div>

                        <div class="form-row">
                            <div class="form-group">
                                {{ form_label(beneficiaireForm.entreprise) }}
                                {{ form_widget(beneficiaireForm.entreprise, {'attr': {'class': 'form-input'}}) }}
                                {{ form_errors(beneficiaireForm.entreprise) }}
                            </div>
                            {% if packType != 'essentiel' %}
                            <div class="form-group">
                                {{ form_label(beneficiaireForm.slogan) }}
                                {{ form_widget(beneficiaireForm.slogan, {'attr': {'class': 'form-input'}}) }}
                            </div>
                            {% endif %}
                        </div>

                        <div class="form-row full">
                            <div class="form-group">
                                {{ form_label(beneficiaireForm.siteWeb) }}
                                {{ form_widget(beneficiaireForm.siteWeb, {'attr': {'class': 'form-input'}}) }}
                            </div>
                        </div>

                        {# ✅ FIX DEFINITIF : marquer les champs comme rendus sans les afficher #}
                        {# Ceci empêche form_rest() de les re-soumettre avec des valeurs vides #}
                        {% set _d1 = form_widget(beneficiaireForm.charteType) %}
                        {% set _d2 = form_widget(beneficiaireForm.couleurPrincipale) %}
                        {% set _d3 = form_widget(beneficiaireForm.couleurSecondaire) %}

                        <div class="form-row full">
                            <div class="form-group">
                                <label class="required">Charte graphique</label>
                                <div style="display:flex; gap:16px; flex-wrap:wrap; margin-top:8px;">
                                    <label style="display:flex;align-items:center;gap:8px;cursor:pointer;padding:10px 16px;border-radius:10px;background:var(--wizard-gray-light);">
                                        <input type="radio"
                                               name="{{ beneficiaireForm.charteType.vars.full_name }}"
                                               value="template"
                                               checked
                                               onchange="document.getElementById('template-section-{{ loop.index }}').classList.add('visible'); document.getElementById('charte-perso-section-{{ loop.index }}').classList.remove('visible');">
                                        🎨 Choisir parmi nos 52 templates
                                    </label>
                                    <label style="display:flex;align-items:center;gap:8px;cursor:pointer;padding:10px 16px;border-radius:10px;background:var(--wizard-gray-light);">
                                        <input type="radio"
                                               name="{{ beneficiaireForm.charteType.vars.full_name }}"
                                               value="personnalisee"
                                               onchange="document.getElementById('template-section-{{ loop.index }}').classList.remove('visible'); document.getElementById('charte-perso-section-{{ loop.index }}').classList.add('visible');">
                                        ✏️ Fournir ma propre charte
                                    </label>
                                </div>
                            </div>
                        </div>

                        {# ============================================================
                           SÉLECTEUR DE CHARTE GRAPHIQUE AVEC MOCKUP
                           ============================================================ #}
                        <div class="conditional-section visible" id="template-section-{{ loop.index }}">

                            {# Champ caché pour stocker la valeur — lu par _charte_js.html.twig via id charteTemplate-N #}
                            <div style="display: none;">
                                {{ form_widget(beneficiaireForm.charteTemplate, {'attr': {'id': 'charteTemplate-' ~ loop.index}}) }}
                            </div>

                            {% set _defaultCharte = (packType == 'forcevente') ? 55 : (packType == 'essentiel' ? 2 : 53) %}
                            {% include 'components/_charte_mockup.html.twig' with {
                                mockupId: loop.index,
                                packType: packType,
                                currentCharte: _defaultCharte,
                                mockupNom: 'Prénom NOM',
                                mockupInitiales: 'AB',
                                mockupFonction: 'VOTRE FONCTION',
                                mockupEntreprise: 'VOTRE ENTREPRISE',
                                mockupSlogan: 'Votre slogan'
                            } %}

                        </div>

                        <div class="conditional-section" id="charte-perso-section-{{ loop.index }}">
                            <div class="info-box">
                                <p><strong>📋 Charte personnalisée</strong><br>
                                Renseignez les informations ci-dessous pour que nous créions votre carte avec votre identité visuelle.</p>
                            </div>

                            <div class="form-row">
                                <div class="form-group">
                                    <label>Couleur principale</label>
                                    <input type="color"
                                           name="{{ beneficiaireForm.couleurPrincipale.vars.full_name }}"
                                           value="#667eea"
                                           class="form-input"
                                           style="height:50px; cursor:pointer; width:100%; padding:2px; border-radius:10px;">
                                </div>
                                <div class="form-group">
                                    <label>Couleur secondaire</label>
                                    <input type="color"
                                           name="{{ beneficiaireForm.couleurSecondaire.vars.full_name }}"
                                           value="#764ba2"
                                           class="form-input"
                                           style="height:50px; cursor:pointer; width:100%; padding:2px; border-radius:10px;">
                                </div>
                            </div>

                           

                            <div class="form-row full">
                                <div class="form-group">
                                    {{ form_label(beneficiaireForm.chartePdfFile, 'Document de charte graphique (optionnel)') }}
                                    {{ form_widget(beneficiaireForm.chartePdfFile, {'attr': {'class': 'form-input'}}) }}
                                    <div class="form-help">Si vous avez un document PDF de charte graphique</div>
                                </div>
                            </div>
                        </div>

                        {# Upload du logo (toutes les cartes) #}
                        <div class="form-row full" style="margin-top: 20px; padding: 20px; background: #f8f9ff; border-radius: 12px; border-left: 4px solid var(--wizard-primary);">
                            <div class="form-group">
                                {{ form_label(beneficiaireForm.logo, '🏢 Logo de l\'entreprise') }}
                                {{ form_widget(beneficiaireForm.logo, {'attr': {'class': 'form-input'}}) }}
                                <div class="form-help">PNG, JPG ou WebP - Max 5 Mo - Apparaîtra en haut de votre carte</div>
                            </div>
                        </div>
                    </div>

                    {# ================================================================
                       ÉTAPE 3 : COORDONNÉES
                       ================================================================ #}
                    <div class="form-step" data-step="3" id="step-{{ loop.index }}-3">
                        <div class="form-step-title">
                            <span class="step-emoji">📞</span>Coordonnées
                        </div>

                        <div class="form-row">
                            <div class="form-group">
                                {{ form_label(beneficiaireForm.fixe) }}
                                {{ form_widget(beneficiaireForm.fixe, {'attr': {'class': 'form-input'}}) }}
                            </div>
                            <div class="form-group">
                                {{ form_label(beneficiaireForm.mobile) }}
                                {{ form_widget(beneficiaireForm.mobile, {'attr': {'class': 'form-input'}}) }}
                                {{ form_errors(beneficiaireForm.mobile) }}
                            </div>
                        </div>

                        <div class="form-row full">
                            <div class="form-group">
                                {{ form_label(beneficiaireForm.email) }}
                                {{ form_widget(beneficiaireForm.email, {'attr': {'class': 'form-input'}}) }}
                                {{ form_errors(beneficiaireForm.email) }}
                            </div>
                        </div>

                        <div class="form-row full">
                            <div class="form-group">
                                {{ form_label(beneficiaireForm.adresse) }}
                                {{ form_widget(beneficiaireForm.adresse, {'attr': {'class': 'form-textarea'}}) }}
                                {{ form_errors(beneficiaireForm.adresse) }}
                                <div class="form-help">📍 Adresse qui apparaîtra sur la carte de visite</div>
                            </div>
                        </div>
                    </div>

                    {# ================================================================
                       ÉTAPE 4 : SERVICES
                       ================================================================ #}
                    <div class="form-step" data-step="4" id="step-{{ loop.index }}-4">
                        <div class="form-step-title">
                            <span class="step-emoji">✨</span>Services / Expertises
                        </div>

                        <div class="info-box">
                            <p>Ajoutez jusqu'à 4 services ou domaines d'expertise qui apparaîtront sur votre carte.</p>
                        </div>

                        <div class="form-row full">
                            <div class="form-group">
                                {{ form_label(beneficiaireForm.service1, 'Service 1') }}
                                {{ form_widget(beneficiaireForm.service1, {'attr': {'class': 'form-input'}}) }}
                            </div>
                        </div>
                        <div class="form-row full">
                            <div class="form-group">
                                {{ form_label(beneficiaireForm.service2, 'Service 2') }}
                                {{ form_widget(beneficiaireForm.service2, {'attr': {'class': 'form-input'}}) }}
                            </div>
                        </div>
                        <div class="form-row full">
                            <div class="form-group">
                                {{ form_label(beneficiaireForm.service3, 'Service 3') }}
                                {{ form_widget(beneficiaireForm.service3, {'attr': {'class': 'form-input'}}) }}
                            </div>
                        </div>
                        <div class="form-row full">
                            <div class="form-group">
                                {{ form_label(beneficiaireForm.service4, 'Service 4') }}
                                {{ form_widget(beneficiaireForm.service4, {'attr': {'class': 'form-input'}}) }}
                            </div>
                        </div>
                    </div>

                    {# ================================================================
                       ÉTAPE 5 : RÉSEAUX SOCIAUX & VISIO
                       ================================================================ #}
                    <div class="form-step" data-step="5" id="step-{{ loop.index }}-5">
                        <div class="form-step-title">
                            <span class="step-emoji">📱</span>Réseaux sociaux & Visioconférence
                        </div>

                        <div class="info-box">
                            <p>Renseignez uniquement les réseaux que vous souhaitez afficher sur votre carte.</p>
                        </div>

                        <h4 style="margin: 24px 0 12px; color: var(--wizard-text);">Réseaux sociaux</h4>
                        
                        <div class="form-row">
                            <div class="form-group">
                                {{ form_label(beneficiaireForm.linkedin) }}
                                {{ form_widget(beneficiaireForm.linkedin, {'attr': {'class': 'form-input'}}) }}
                            </div>
                            <div class="form-group">
                                {{ form_label(beneficiaireForm.facebook) }}
                                {{ form_widget(beneficiaireForm.facebook, {'attr': {'class': 'form-input'}}) }}
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                {{ form_label(beneficiaireForm.insta) }}
                                {{ form_widget(beneficiaireForm.insta, {'attr': {'class': 'form-input'}}) }}
                            </div>
                            <div class="form-group">
                                {{ form_label(beneficiaireForm.x) }}
                                {{ form_widget(beneficiaireForm.x, {'attr': {'class': 'form-input'}}) }}
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                {{ form_label(beneficiaireForm.tiktok) }}
                                {{ form_widget(beneficiaireForm.tiktok, {'attr': {'class': 'form-input'}}) }}
                            </div>
                            <div class="form-group">
                                {{ form_label(beneficiaireForm.youtube) }}
                                {{ form_widget(beneficiaireForm.youtube, {'attr': {'class': 'form-input'}}) }}
                            </div>
                        </div>
                        <div class="form-row full">
                            <div class="form-group">
                                {{ form_label(beneficiaireForm.threads) }}
                                {{ form_widget(beneficiaireForm.threads, {'attr': {'class': 'form-input'}}) }}
                            </div>
                        </div>

                        <h4 style="margin: 32px 0 12px; color: var(--wizard-text);">🎥 Visioconférence</h4>
                        
                        <div class="form-row">
                            <div class="form-group">
                                {{ form_label(beneficiaireForm.zoom) }}
                                {{ form_widget(beneficiaireForm.zoom, {'attr': {'class': 'form-input'}}) }}
                            </div>
                            <div class="form-group">
                                {{ form_label(beneficiaireForm.googleMeet) }}
                                {{ form_widget(beneficiaireForm.googleMeet, {'attr': {'class': 'form-input'}}) }}
                            </div>
                        </div>
                        <div class="form-row full">
                            <div class="form-group">
                                {{ form_label(beneficiaireForm.microsoftTeams) }}
                                {{ form_widget(beneficiaireForm.microsoftTeams, {'attr': {'class': 'form-input'}}) }}
                            </div>
                        </div>
                    </div>

                    {# ================================================================
                       ÉTAPE 6 : FONCTIONNALITÉS PREMIUM (si pack Premium+)
                       ================================================================ #}
                    {% if isPremium %}
                    <div class="form-step" data-step="6" id="step-{{ loop.index }}-6">
                        <div class="form-step-title">
                            <span class="step-emoji">🌟</span>Fonctionnalités Premium
                        </div>

                        <div class="info-box">
                            <p><strong>💡 Bonus Premium</strong><br>
                            Renseignez l'URL pour activer la fonctionnalité. Laissez vide pour la désactiver.</p>
                        </div>

                        <div class="form-row full">
                            <div class="form-group">
                                {{ form_label(beneficiaireForm.agendaLink, '📅 Prise de rendez-vous') }}
                                {{ form_widget(beneficiaireForm.agendaLink, {'attr': {'class': 'form-input'}}) }}
                                <div class="form-help">Calendly, Cal.com, Google Calendar, etc.</div>
                            </div>
                        </div>

                        <div class="form-row full">
                            <div class="form-group">
                                {{ form_label(beneficiaireForm.galerieLink, '🖼️ Galerie / Portfolio') }}
                                {{ form_widget(beneficiaireForm.galerieLink, {'attr': {'class': 'form-input'}}) }}
                                <div class="form-help">Behance, Instagram portfolio, etc.</div>
                            </div>
                        </div>

                        <div class="form-row full">
                            <div class="form-group">
                                {{ form_label(beneficiaireForm.satisfactionLink, '⭐ Avis clients') }}
                                {{ form_widget(beneficiaireForm.satisfactionLink, {'attr': {'class': 'form-input'}}) }}
                                <div class="form-help">Google Reviews, Trustpilot, etc.</div>
                            </div>
                        </div>

                        <div class="form-row full">
                            <div class="form-group">
                                {{ form_label(beneficiaireForm.catalogueLink, '📋 Catalogue / Menu') }}
                                {{ form_widget(beneficiaireForm.catalogueLink, {'attr': {'class': 'form-input'}}) }}
                                <div class="form-help">PDF en ligne, boutique, lien externe.</div>
                            </div>
                        </div>

                        <div class="form-row full">
                            <div class="form-group">
                                {{ form_label(beneficiaireForm.videoLink, '🎬 Vidéo de présentation') }}
                                {{ form_widget(beneficiaireForm.videoLink, {'attr': {'class': 'form-input'}}) }}
                                <div class="form-help">YouTube, Vimeo, etc.</div>
                            </div>
                        </div>

                        <div class="form-row full">
                            <div class="form-group">
                                {{ form_label(beneficiaireForm.lienPersonnalise, '🔗 Lien personnalisé') }}
                                {{ form_widget(beneficiaireForm.lienPersonnalise, {'attr': {'class': 'form-input'}}) }}
                                <div class="form-help">N'importe quel lien supplémentaire.</div>
                            </div>
                        </div>

                                        {# ================================================================
                           STATS FOOTER - UNIQUEMENT PACK PREMIUM
                           ================================================================ #}
                        {% if packType == 'premium' %}
                        <div style="margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--wizard-border);">
                            <h4 style="margin-bottom: 16px; color: var(--wizard-text); display: flex; align-items: center; gap: 8px;">
                                📊 Statistiques Footer
                                <span style="font-size: 12px; font-weight: normal; color: #888;">(affiché en bas de votre carte)</span>
                            </h4>
                            
                            <div class="info-box" style="margin-bottom: 20px;">
                                <p>Ces informations apparaîtront dans le footer de votre carte Premium pour valoriser votre expertise.</p>
                            </div>

                            <div class="form-row">
                                <div class="form-group">
                                    {{ form_label(beneficiaireForm.expertise, '📅 Années d\'expertise') }}
                                    {{ form_widget(beneficiaireForm.expertise, {'attr': {'class': 'form-input', 'placeholder': 'Ex: 12 ans'}}) }}
                                    <div class="form-help">Votre expérience professionnelle</div>
                                </div>
                                <div class="form-group">
                                    {{ form_label(beneficiaireForm.seances, '📈 Projets / Séances') }}
                                    {{ form_widget(beneficiaireForm.seances, {'attr': {'class': 'form-input', 'placeholder': 'Ex: 500+'}}) }}
                                    <div class="form-help">Nombre de projets réalisés</div>
                                </div>
                            </div>
                            <div class="form-row full">
                                <div class="form-group">
                                    {{ form_label(beneficiaireForm.satisfaction, '⭐ Taux de satisfaction') }}
                                    {{ form_widget(beneficiaireForm.satisfaction, {'attr': {'class': 'form-input', 'placeholder': 'Ex: 100%'}}) }}
                                    <div class="form-help">Satisfaction de vos clients</div>
                                </div>
                            </div>
                        </div>
                        {% endif %}
                    </div>
                    {% endif %}

                    {# ================================================================
                       NAVIGATION ENTRE ÉTAPES
                       ================================================================ #}
                    <div class="wizard-nav">
                        <button type="button" class="btn-wizard btn-wizard-prev" 
                                id="btnPrev-{{ loop.index }}"
                                onclick="prevStep({{ loop.index }})"
                                style="display: none;">
                            ← Précédent
                        </button>
                        
                        <button type="button" class="btn-wizard btn-wizard-next" 
                                id="btnNext-{{ loop.index }}"
                                onclick="nextStep({{ loop.index }})">
                            Continuer →
                        </button>

                        {# Bouton final (visible uniquement sur la dernière étape du dernier bénéficiaire) #}
                        {% if loop.last %}
                        <button type="submit" class="btn-wizard btn-wizard-submit" 
                                id="btnSubmit"
                                style="display: none;">
                            {% if isCartEdit|default(false) %}💾 Enregistrer les modifications{% else %}✓ Valider ma commande{% endif %}
                        </button>
                        {% endif %}
                    </div>

                </div>
            </div>
        </div>
        {% endfor %}

        {# Champs cachés de la commande - packType, quantity, paiementMode, et champs client (optionnels) #}
        <div style="display: none;">
            {{ form_widget(form.packType) }}
            {{ form_widget(form.quantity) }}
            {{ form_widget(form.paiementMode) }}
            {{ form_rest(form) }}
        </div>

        {{ form_end(form) }}

    </div>
</div>

{# Loader #}
<div class="wizard-loading" id="wizardLoading">
    <div class="wizard-loading-spinner"></div>
</div>

<script>
// ============================================================================
// WIZARD MULTI-FORMULAIRES - JAVASCRIPT
// ============================================================================

// Configuration globale
const totalCards = {{ totalCards }};
const stepsCount = {{ stepsCount }};
const isPremium = {{ isPremium ? 'true' : 'false' }};
const packType = '{{ packType }}';

// Calcul du nombre de cartes par pack
const cardsPerPack = packType.startsWith('multi-') ? parseInt(packType.replace('multi-', '')) : 1;
const totalPacks = Math.ceil(totalCards / cardsPerPack);

// Fonction utilitaire : obtenir le numéro de pack pour une carte
function getPackNumber(cardIndex) {
    return Math.floor((cardIndex - 1) / cardsPerPack) + 1;
}

// État global
let currentBeneficiaire = 1;
let currentSteps = {}; // { 1: 1, 2: 1, ... } - étape courante par bénéficiaire

// Initialisation
for (let i = 1; i <= totalCards; i++) {
    currentSteps[i] = 1;
}

// ========================================================================
// NAVIGATION ENTRE BÉNÉFICIAIRES
// ========================================================================

function switchBeneficiaire(index) {
    // Cacher tous les formulaires bénéficiaires
    document.querySelectorAll('.beneficiaire-form').forEach(form => {
        form.classList.remove('active');
    });

    // Afficher le bon
    const form = document.getElementById('beneficiaire-' + index);
    if (form) {
        form.classList.add('active');
    }

        // Mettre à jour la navigation
        document.querySelectorAll('.benef-nav-btn').forEach(btn => {
            btn.classList.remove('active');
        });
        const activeBtn = document.querySelector('.benef-nav-btn[data-benef="' + index + '"]');
        if (activeBtn) {
            activeBtn.classList.add('active');
        }

        currentBeneficiaire = index;

        // Scroll vers le haut
        window.scrollTo({ top: 0, behavior: 'smooth' });
    }

    // ========================================================================
    // NAVIGATION ENTRE ÉTAPES
    // ========================================================================

    function goToStep(benefIndex, stepIndex) {
        const container = document.getElementById('beneficiaire-' + benefIndex);
        if (!container) return;

        // Cacher toutes les étapes
        container.querySelectorAll('.form-step').forEach(step => {
            step.classList.remove('active');
        });

        // Afficher la bonne étape
        const targetStep = document.getElementById('step-' + benefIndex + '-' + stepIndex);
        if (targetStep) {
            targetStep.classList.add('active');
        }

        // Mettre à jour la barre de progression
        updateProgressBar(benefIndex, stepIndex);

        // Mettre à jour les boutons de navigation
        updateNavButtons(benefIndex, stepIndex);

        // Mettre à jour l'état
        currentSteps[benefIndex] = stepIndex;

        // ══ FIX: Quand on arrive à l'étape Entreprise/Charte, forcer la charte correcte ══
        if (stepIndex === 2) {
            var correctCharte = currentChartes[benefIndex] || defaultCharte;
            console.log('🔄 goToStep → étape 2: re-application charte', correctCharte, 'pour benef', benefIndex);
            selectCharte(benefIndex, correctCharte);
        }
    }

    function nextStep(benefIndex) {
        const currentStep = currentSteps[benefIndex];
        console.log('📍 nextStep appelé - benef:', benefIndex, 'step:', currentStep, 'stepsCount:', stepsCount, 'totalCards:', totalCards);
        
        // Valider l'étape courante
        if (!validateStep(benefIndex, currentStep)) {
            console.log('❌ Validation échouée à étape', currentStep);
            return;
        }

        if (currentStep < stepsCount) {
            console.log('➡️ Passage à l\'étape', currentStep + 1);
            goToStep(benefIndex, currentStep + 1);
        } else {
            // Dernière étape de ce bénéficiaire
            if (benefIndex < totalCards) {
                // Passer au bénéficiaire suivant
                console.log('➡️ Passage au bénéficiaire', benefIndex + 1);
                markBeneficiaireComplete(benefIndex);
                switchBeneficiaire(benefIndex + 1);
                goToStep(benefIndex + 1, 1);
            } else {
                // C'est le dernier bénéficiaire à la dernière étape
                // Le bouton submit devrait maintenant être visible
                console.log('✅ Dernière étape du dernier bénéficiaire - bouton submit visible');
                markBeneficiaireComplete(benefIndex);
            }
        }
    }

    function prevStep(benefIndex) {
        const currentStep = currentSteps[benefIndex];
        
        if (currentStep > 1) {
            goToStep(benefIndex, currentStep - 1);
        } else if (benefIndex > 1) {
            // Revenir au bénéficiaire précédent, dernière étape
            switchBeneficiaire(benefIndex - 1);
            goToStep(benefIndex - 1, stepsCount);
        }
    }

    // ========================================================================
    // MISE À JOUR UI
    // ========================================================================

    function updateProgressBar(benefIndex, stepIndex) {
        const container = document.getElementById('beneficiaire-' + benefIndex);
        if (!container) return;

        // Mettre à jour les cercles
        container.querySelectorAll('.wizard-step').forEach((step, index) => {
            const stepNum = index + 1;
            step.classList.remove('active', 'completed');
            
            if (stepNum === stepIndex) {
                step.classList.add('active');
            } else if (stepNum < stepIndex) {
                step.classList.add('completed');
            }
        });

        // Mettre à jour la barre de progression
        const progressFill = document.getElementById('progressFill-' + benefIndex);
        if (progressFill) {
            const progress = ((stepIndex - 1) / (stepsCount - 1)) * 100;
            progressFill.style.width = progress + '%';
        }
    }

    function updateNavButtons(benefIndex, stepIndex) {
        const btnPrev = document.getElementById('btnPrev-' + benefIndex);
        const btnNext = document.getElementById('btnNext-' + benefIndex);
        const btnSubmit = document.getElementById('btnSubmit');

        // Bouton précédent
        if (btnPrev) {
            btnPrev.style.display = (stepIndex > 1 || benefIndex > 1) ? 'flex' : 'none';
        }

        // Bouton suivant / submit
        const isLastStep = stepIndex === stepsCount;
        const isLastBenef = benefIndex === totalCards;
        
        console.log('🔘 updateNavButtons - step:', stepIndex, '/', stepsCount, '| benef:', benefIndex, '/', totalCards);
        console.log('   isLastStep:', isLastStep, '| isLastBenef:', isLastBenef);

        if (btnNext) {
            if (isLastStep && isLastBenef) {
                // Dernière étape du dernier bénéficiaire : cacher btnNext
                btnNext.style.display = 'none';
                console.log('   btnNext: CACHÉ (dernière étape)');
            } else if (isLastStep) {
                btnNext.textContent = 'Bénéficiaire suivant →';
                btnNext.style.display = 'flex';
                console.log('   btnNext: Bénéficiaire suivant');
            } else {
                btnNext.textContent = 'Continuer →';
                btnNext.style.display = 'flex';
                console.log('   btnNext: Continuer');
            }
        }

        // Bouton submit visible uniquement à la dernière étape du dernier bénéficiaire
        if (btnSubmit) {
            const shouldShow = isLastStep && isLastBenef;
            btnSubmit.style.display = shouldShow ? 'flex' : 'none';
            console.log('   btnSubmit:', shouldShow ? '✅ VISIBLE' : '❌ caché');
        } else {
            console.log('   ⚠️ btnSubmit non trouvé!');
        }
    }

    function markBeneficiaireComplete(benefIndex) {
        const btn = document.querySelector('.benef-nav-btn[data-benef="' + benefIndex + '"]');
        if (btn) {
            btn.classList.add('completed');
            const numberSpan = btn.querySelector('.benef-number');
            if (numberSpan) {
                numberSpan.textContent = '✓';
            }
        }
    }

    // ========================================================================
    // VALIDATION
    // ========================================================================

    function validateStep(benefIndex, stepIndex) {
        console.log('🔍 Validation étape', stepIndex, 'pour bénéficiaire', benefIndex);
        const stepElement = document.getElementById('step-' + benefIndex + '-' + stepIndex);
        if (!stepElement) {
            console.log('⚠️ stepElement non trouvé pour step-' + benefIndex + '-' + stepIndex);
            return true;
        }

        let isValid = true;
        const requiredFields = stepElement.querySelectorAll('input[required], textarea[required], select[required]');
        console.log('📋 Champs required trouvés:', requiredFields.length);

        requiredFields.forEach(field => {
            console.log('  - Champ:', field.name, '| Valeur:', field.value, '| Vide?', !field.value.trim());
            if (!field.value.trim()) {
                isValid = false;
                field.style.borderColor = '#ff3b30';
                
                // Ajouter un message d'erreur si pas déjà présent
                let errorMsg = field.parentElement.querySelector('.validation-error');
                if (!errorMsg) {
                    errorMsg = document.createElement('div');
                    errorMsg.className = 'form-error validation-error';
                    errorMsg.textContent = 'Ce champ est obligatoire';
                    field.parentElement.appendChild(errorMsg);
                }
            } else {
                field.style.borderColor = '';
                const errorMsg = field.parentElement.querySelector('.validation-error');
                if (errorMsg) errorMsg.remove();
            }
        });

        console.log('📊 Résultat validation:', isValid ? '✅ OK' : '❌ ERREUR');
        
        if (!isValid) {
            // Scroll vers le premier champ en erreur
            const firstError = stepElement.querySelector('input[style*="border-color: rgb(255, 59, 48)"]');
            if (firstError) {
                firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
                firstError.focus();
            }
        }

        return isValid;
    }

    // ========================================================================
    // CHAMPS CONDITIONNELS
    // ========================================================================

    function initConditionalFields() {
        // Avatar : initiales vs photo
        document.querySelectorAll('[name$="[avatarType]"]').forEach(radio => {
            radio.addEventListener('change', function() {
                const benefIndex = this.name.match(/\[(\d+)\]/)[1];
                const isInitiales = this.value === 'initiales';
                
                const initialesSection = document.getElementById('initiales-section-' + (parseInt(benefIndex) + 1));
                const photoSection = document.getElementById('photo-section-' + (parseInt(benefIndex) + 1));
                
                if (initialesSection) {
                    initialesSection.classList.toggle('visible', isInitiales);
                }
                if (photoSection) {
                    photoSection.classList.toggle('visible', !isInitiales);
                }
            });
        });

        // Charte : template vs personnalisée
        document.querySelectorAll('[name$="[charteType]"]').forEach(radio => {
            radio.addEventListener('change', function() {
                const benefIndex = this.name.match(/\[(\d+)\]/)[1];
                const isTemplate = this.value === 'template';
                
                const templateSection = document.getElementById('template-section-' + (parseInt(benefIndex) + 1));
                const persoSection = document.getElementById('charte-perso-section-' + (parseInt(benefIndex) + 1));
                
                if (templateSection) {
                    templateSection.classList.toggle('visible', isTemplate);
                }
                if (persoSection) {
                    persoSection.classList.toggle('visible', !isTemplate);
                }
            });
        });

        // Initialiser l'état des champs conditionnels
        document.querySelectorAll('[name$="[avatarType]"]:checked').forEach(radio => {
            radio.dispatchEvent(new Event('change'));
        });
        document.querySelectorAll('[name$="[charteType]"]:checked').forEach(radio => {
            radio.dispatchEvent(new Event('change'));
        });
    }

    // ========================================================================
    // SÉLECTEUR DE CHARTE GRAPHIQUE
    // ========================================================================

    // Les 54 chartes NUM-ECARD avec leurs couleurs (54 = Prestige Doré, exclusif FV/Premium/Multi)
    // ========================================================================
    // CHARTES : définies et gérées par components/_charte_js.html.twig
    // selectCharte(), prevCharte(), nextCharte(), getBrightness() sont
    // disponibles globalement via le include en fin de template.
    // defaultCharte et currentChartes sont aussi fournis par ce composant.
    // ========================================================================


    // _charte_js utilise currentChartes (objet global) — on s'appuie dessus directement.
    const defaultCharte = ('{{ packType }}' === 'forcevente') ? 55 : ('{{ packType }}' === 'essentiel' ? 2 : 53);


    // ========================================================================
    // COLOR PICKER — sync couleur native → champ Symfony + barre visuelle
    // ========================================================================

    function syncColor(input, type, benefIndex) {
        const hex = input.value;
        const bar = document.getElementById('bar-' + type + '-' + benefIndex);
        const hexInput = document.getElementById('hex-' + type + '-' + benefIndex);
        if (bar) bar.style.background = hex;
        if (hexInput) hexInput.value = hex;
    }

    function initColorPickers() {
        for (let i = 1; i <= totalCards; i++) {
            ['principale', 'secondaire'].forEach(type => {
                const hexInput = document.getElementById('hex-' + type + '-' + i);
                const native   = document.getElementById('color-native-' + type + '-' + i);
                const bar      = document.getElementById('bar-' + type + '-' + i);
                if (hexInput && hexInput.value && hexInput.value.match(/^#[0-9A-Fa-f]{6}$/)) {
                    if (native) native.value = hexInput.value;
                    if (bar) bar.style.background = hexInput.value;
                }
            });
        }
    }

    // ========================================================================
    // COPIER INFOS ENTREPRISE
    // ========================================================================

    function copyEntrepriseFromFirst(targetBenefIndex) {
        const fieldsToCopty = ['entreprise', 'slogan', 'siteWeb', 'charteType', 'charteTemplate', 
                              'couleurPrincipale', 'couleurSecondaire'];
        
        fieldsToCopty.forEach(fieldName => {
            // Source : bénéficiaire 1 (index 0)
            const sourceField = document.querySelector('[name="commande_multi[beneficiaires][0][' + fieldName + ']"]');
            // Cible : bénéficiaire cible (index = targetBenefIndex - 1)
            const targetField = document.querySelector('[name="commande_multi[beneficiaires][' + (targetBenefIndex - 1) + '][' + fieldName + ']"]');
            
            if (sourceField && targetField) {
                if (sourceField.type === 'radio') {
                    // Pour les radios, trouver celui qui est coché
                    const checkedSource = document.querySelector('[name="commande_multi[beneficiaires][0][' + fieldName + ']"]:checked');
                    if (checkedSource) {
                        const targetRadio = document.querySelector('[name="commande_multi[beneficiaires][' + (targetBenefIndex - 1) + '][' + fieldName + ']"][value="' + checkedSource.value + '"]');
                        if (targetRadio) {
                            targetRadio.checked = true;
                            targetRadio.dispatchEvent(new Event('change'));
                        }
                    }
                } else {
                    targetField.value = sourceField.value;
                }
            }
        });

        // Copier aussi la charte sélectionnée visuellement
        const sourceCharte = currentChartes[1] || 1;
        selectCharte(targetBenefIndex, sourceCharte);

        // Feedback visuel
        alert('✅ Informations entreprise copiées depuis le bénéficiaire 1');
    }

    // ========================================================================
    // SOUMISSION DU FORMULAIRE
    // ========================================================================

    function initFormSubmission() {
        const form = document.getElementById('wizardForm');
        if (!form) {
            console.error('❌ Formulaire wizardForm non trouvé!');
            return;
        }

        form.addEventListener('submit', function(e) {
            console.log('📤 FORMULAIRE SOUMIS!');
            // Afficher le loader
            document.getElementById('wizardLoading').classList.add('visible');
        });
        
        console.log('✅ Event listener submit ajouté au formulaire');
    }

    // ========================================================================
    // INITIALISATION
    // ========================================================================
    // SLIDER MULTI-CARTES
    // ========================================================================

    const multiSliderState = {};

    function initMultiSlider(benefIndex) {
        if (!multiSliderState[benefIndex]) {
            multiSliderState[benefIndex] = { currentSlide: 0 };
        }
    }

    function updateMultiSlider(benefIndex) {
        initMultiSlider(benefIndex);
        const wrapper = document.querySelector(`.multi-slides-wrapper-${benefIndex}`);
        const dots = document.querySelectorAll(`.multi-slider-dots-${benefIndex} .multi-dot`);
        const currentSlide = multiSliderState[benefIndex].currentSlide;
        
        if (wrapper) {
            wrapper.style.transform = `translateX(-${currentSlide * 100}%)`;
        }
        
        dots.forEach((dot, index) => {
            if (index === currentSlide) {
                dot.style.width = '18px';
                dot.style.background = 'white';
            } else {
                dot.style.width = '5px';
                dot.style.background = 'rgba(255,255,255,0.5)';
            }
        });
    }

    function goToMultiSlide(benefIndex, slideIndex) {
        initMultiSlider(benefIndex);
        const wrapper = document.querySelector(`.multi-slides-wrapper-${benefIndex}`);
        const totalSlides = wrapper ? wrapper.children.length : 4;
        
        multiSliderState[benefIndex].currentSlide = Math.max(0, Math.min(slideIndex, totalSlides - 1));
        updateMultiSlider(benefIndex);
    }

    function multiSliderNext(benefIndex) {
        initMultiSlider(benefIndex);
        const wrapper = document.querySelector(`.multi-slides-wrapper-${benefIndex}`);
        const totalSlides = wrapper ? wrapper.children.length : 4;
        
        multiSliderState[benefIndex].currentSlide = (multiSliderState[benefIndex].currentSlide + 1) % totalSlides;
        updateMultiSlider(benefIndex);
    }

    function multiSliderPrev(benefIndex) {
        initMultiSlider(benefIndex);
        const wrapper = document.querySelector(`.multi-slides-wrapper-${benefIndex}`);
        const totalSlides = wrapper ? wrapper.children.length : 4;
        
        multiSliderState[benefIndex].currentSlide = (multiSliderState[benefIndex].currentSlide - 1 + totalSlides) % totalSlides;
        updateMultiSlider(benefIndex);
    }

    // ========================================================================
    // INITIALISATION
    // ========================================================================

    document.addEventListener('DOMContentLoaded', function() {
        console.log('🚀 Wizard NUM-ECARD initialisé');
        console.log('📊 Config:', { totalCards, stepsCount, isPremium });

        initConditionalFields();
        initFormSubmission();
        initColorPickers();
        
        // ✅ Initialiser les color pickers avec des valeurs par défaut si vides
        document.querySelectorAll('input.color-picker-principale').forEach(function(el) {
            if (!el.value || el.value === '#000000') el.value = '#667eea';
        });
        document.querySelectorAll('input.color-picker-secondaire').forEach(function(el) {
            if (!el.value || el.value === '#000000') el.value = '#764ba2';
        });
        
        // Initialiser les sliders Multi si présents
        for (let i = 1; i <= totalCards; i++) {
            const wrapper = document.querySelector(`.multi-slides-wrapper-${i}`);
            if (wrapper) {
                initMultiSlider(i);
                console.log(`🎠 Slider Multi-Cartes ${i} initialisé`);
            }
        }

        // Initialiser la première vue
        goToStep(1, 1);

        // Initialiser les chartes selon le pack
        // Premium → Lavender Elegance (53) / Autres → Lavender Elegance (53) / FV → Élite Champagne (15)
        for (let i = 1; i <= totalCards; i++) {
            selectCharte(i, defaultCharte);
        }

        // ══ Chartes initialisées — pas de forçage après, l'utilisateur choisit librement ══
    });

</script>

{# ═══════════════════════════════════════════════════════════════════════
   CHARTE JS FACTORISÉ — Source unique des 55 chartes + selectCharte()
   Fournit : chartes, chartOrder, currentChartes, selectCharte(),
             prevCharte(), nextCharte(), getBrightness(), initCharteMockup()
   ═══════════════════════════════════════════════════════════════════════ #}
{% set _mockupIds = [] %}
{% for i in 1..totalCards %}
    {% set _mockupIds = _mockupIds|merge([i]) %}
{% endfor %}
{% set _defaultCharteNum = (packType == 'forcevente') ? 55 : (packType == 'essentiel' ? 2 : 53) %}
{% set _defaultChartes = {} %}
{% for i in 1..totalCards %}
    {% set _defaultChartes = _defaultChartes|merge({(i): _defaultCharteNum}) %}
{% endfor %}

{% include 'components/_charte_js.html.twig' with {
    mockupIds: _mockupIds,
    packType: packType,
    defaultChartes: _defaultChartes
} %}

{% endblock %}