/* =====================================================
   WIZARD MOBILE-FIRST OPTIMIZATIONS
   Fichier dédié, chargé uniquement sur /envoi
   À retirer = simplement supprimer l'include dans envoi.php
   ===================================================== */

/* Marker pour debug : si présent dans HTML, le CSS est chargé */

/* ----------------------------------------------------
   0. RÈGLES GÉNÉRALES (tous écrans)
   ---------------------------------------------------- */

/* Quand seul le bouton Continuer est visible (étape 1), pousser à droite */
.wizard-nav.wizard-nav-solo {
    justify-content: flex-end;
}

/* Petite astérisque sous la dropzone */
.dropzone-hint {
    margin: 0.6rem 0 0 !important;
    text-align: center;
    line-height: 1.5;
}
.dropzone-hint small {
    color: var(--muted, #6B7280);
    font-size: 0.78rem;
}

/* ----------------------------------------------------
   1. STEPPER COMPACT MOBILE (≤ 600px)
   Affiche "Étape X/4 · Label" avec barre de progression
   ---------------------------------------------------- */
@media (max-width: 600px) {
    /* Cache la version desktop */
    .wizard-stepper-bar .stepper {
        display: none !important;
    }
    /* Affiche la version compacte */
    .wizard-stepper-bar::before {
        content: "Étape 1 sur 4 · Type de courrier";
        display: block;
        text-align: center;
        font-size: 0.85rem;
        font-weight: 600;
        color: #0F1E3C;
        padding: 1rem 1rem 0rem;
    }
    .wizard-stepper-bar::after {
        content: "";
        display: block;
        height: 4px;
        background: #E5E9F2;
        margin: 0 1rem 0.85rem;
        border-radius: 2px;
        position: relative;
    }
    /* Barre de progression dynamique via data-attribute */
    .wizard-stepper-bar[data-current-step="1"]::after {
        background: linear-gradient(to right, #FFE413 25%, #E5E9F2 25%);
    }
    .wizard-stepper-bar[data-current-step="2"]::after {
        background: linear-gradient(to right, #FFE413 50%, #E5E9F2 50%);
    }
    .wizard-stepper-bar[data-current-step="3"]::after {
        background: linear-gradient(to right, #FFE413 75%, #E5E9F2 75%);
    }
    .wizard-stepper-bar[data-current-step="4"]::after {
        background: #FFE413;
    }
    .wizard-stepper-bar[data-current-step="2"]::before {
        content: "Étape 2 sur 4 · Document";
    }
    .wizard-stepper-bar[data-current-step="3"]::before {
        content: "Étape 3 sur 4 · Adresses";
    }
    .wizard-stepper-bar[data-current-step="4"]::before {
        content: "Étape 4 sur 4 · Options";
    }
}

/* ----------------------------------------------------
   2. CARDS TYPE COURRIER EN 1 COLONNE MOBILE
   ---------------------------------------------------- */
@media (max-width: 600px) {
    .type-grid-2 {
        grid-template-columns: 1fr !important;
        gap: 0.85rem !important;
    }
    .type-card {
        padding: 1.25rem 1rem !important;
        min-height: 100px;
    }
    .type-card h3 {
        font-size: 1.05rem !important;
    }
    .type-card .price {
        font-size: 0.95rem !important;
    }
    .type-card .desc {
        font-size: 0.85rem !important;
    }
}

/* ----------------------------------------------------
   3. WIZARD GRID : COLONNE UNIQUE SUR MOBILE
   ---------------------------------------------------- */
@media (max-width: 900px) {
    .wizard-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
}

/* ----------------------------------------------------
   4. NAVIGATION (Précédent / Suivant) STICKY BOTTOM
   ---------------------------------------------------- */
@media (max-width: 600px) {
    .wizard-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        z-index: 100;
        margin: 0 !important;
        padding: 0.85rem 1rem 1rem !important;
        border-top: 1px solid #E5E9F2;
        box-shadow: 0 -2px 8px rgba(15, 30, 60, 0.08);
        display: flex !important;
        flex-direction: row !important;
        gap: 0.5rem !important;
    }
    .wizard-nav .btn {
        font-size: 0.95rem !important;
        padding: 0.7rem 0.85rem !important;
        min-height: 46px;
        margin: 0 !important;
    }
    .wizard-nav .btn-ghost {
        flex: 0 0 auto;
        padding-left: 0.85rem !important;
        padding-right: 0.85rem !important;
    }
    .wizard-nav .btn-primary {
        flex: 1;
        font-weight: 700;
    }
    
    .wizard-shell {
        padding: 1rem 1rem 50px !important;
    }
    
    .wizard-nav {
        transition: opacity 0.2s ease-out, box-shadow 0.25s ease-out;
    }
}

/* ----------------------------------------------------
   6. CARDS OPTIONS TAP-FRIENDLY
   ---------------------------------------------------- */
@media (max-width: 600px) {
    .option-radio,
    .option-card {
        min-height: 56px;
        padding: 0.85rem 1rem !important;
    }
    .option-radio-content .title,
    .option-card-content .title {
        font-size: 0.95rem !important;
    }
    .option-radio-content .desc,
    .option-card-content .desc {
        font-size: 0.83rem !important;
        line-height: 1.4;
    }
}

/* ----------------------------------------------------
   7. ADRESSES : SECTIONS PLUS COMPACTES MOBILE
   ---------------------------------------------------- */
@media (max-width: 600px) {
    .addr-block {
        padding: 1.1rem  0!important;
        margin-bottom: 0rem !important;
    }
    .addr-header h3 {
        font-size: 1.05rem !important;
    }
    .addr-num {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.85rem !important;
    }
    .toggle-group {
        margin-bottom: 0.85rem !important;
    }
    .toggle-btn {
        padding: 0.55rem 0.85rem !important;
        font-size: 0.88rem !important;
    }
    
    .field-grid {
        grid-template-columns: 1fr !important;
        gap: 0.85rem !important;
    }
    .field input {
        font-size: 16px !important;
        padding: 0.7rem 0.85rem !important;
        min-height: 48px;
    }
    .field label {
        font-size: 0.85rem !important;
        margin-bottom: 0.3rem !important;
    }
}

/* ----------------------------------------------------
   8. DROPZONE MOBILE
   ---------------------------------------------------- */
@media (max-width: 600px) {
    .dropzone {
        padding: 1.5rem 1rem !important;
        min-height: 140px;
    }
    .dropzone h3 {
        font-size: 1rem !important;
    }
    .dropzone .small {
        font-size: 0.82rem !important;
        margin-top: 0.4rem;
    }
    .dropzone h3::before {
        content: "Touchez pour choisir";
        display: block;
    }
    .dropzone h3 {
        font-size: 0 !important;
    }
    .dropzone h3::before {
        font-size: 1rem;
    }
}

/* ----------------------------------------------------
   9. ESPACEMENTS GÉNÉRAUX MOBILE
   ---------------------------------------------------- */
@media (max-width: 600px) {
    .wizard-main h2 {
        font-size: 1.25rem !important;
        margin-bottom: 0.5rem !important;
    }
    .wizard-main .lead {
        font-size: 0.92rem !important;
        margin-bottom: 1.25rem !important;
    }
    .option-section {
        margin-bottom: 1.5rem !important;
    }
    .option-section-title {
        font-size: 1rem !important;
        margin-bottom: 0.75rem !important;
    }
    .doc-mode-tabs {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    .doc-mode-tab {
        padding: 0.85rem 1rem !important;
        text-align: left;
    }
}

/* ----------------------------------------------------
   10. INFO BANNERS COMPACTS MOBILE
   ---------------------------------------------------- */
@media (max-width: 600px) {
    .info-banner {
        padding: 0.7rem 0.85rem !important;
        font-size: 0.82rem !important;
        line-height: 1.4;
    }
}

/* ----------------------------------------------------
   11. EDIT MODE BANNER MOBILE
   ---------------------------------------------------- */
@media (max-width: 600px) {
    .edit-mode-banner {
        padding: 0.85rem 1rem !important;
        gap: 0.7rem !important;
    }
    .edit-mode-banner-body strong {
        font-size: 0.92rem !important;
    }
    .edit-mode-banner-body span {
        font-size: 0.82rem !important;
        display: block;
        margin-top: 0.2rem;
    }
}

/* =====================================================
   CARD POPULAIRE : pas de bordure jaune par défaut
   Le badge "POPULAIRE" reste visible et jaune
   ===================================================== */
.type-card-popular {
    border-color: var(--border, #E5E9F2) !important;
}
.type-card-popular:hover {
    border-color: var(--bleu, #0060AE) !important;
}
.type-card-popular.selected {
    border-color: var(--bleu, #0060AE) !important;
}

/* =====================================================
   RÉCAP STICKY EN HAUT — MINI BARRE (mobile ≤ 700px)
   Compact : produit + total sur 1 ligne, chevron pour détail
   On déplace visuellement le .recap-total existant dans le header
   ===================================================== */
@media (max-width: 700px) {
    /* Réordonne : récap en premier dans le grid, sticky en haut, collé au stepper */
    .wizard-aside {
        order: -1;
        position: sticky;
        top: 0;
        z-index: 50;
        margin: 0 !important;
    }
    
    /* Container compact, collé au stepper (radius bas seulement) */
    .wizard-aside .recap-card {
        border-radius: 0 0 8px 8px !important;
        box-shadow: 0 2px 6px rgba(15, 30, 60, 0.08);
        border: 1px solid var(--border, #E5E9F2);
        border-top: none !important;
        background: #fff;
        margin: 0 !important;
        position: relative;
    }
    
    /* HEADER : produit (gauche) + chevron (droite) + total (absolute, voir plus bas) */
    .wizard-aside .recap-header {
        background: #fff !important;
        color: #0F1E3C !important;
        padding: 0.55rem 4.5rem 0.55rem 0.85rem !important; /* padding-right large pour place du total + chevron */
        display: flex !important;
        align-items: center;
        gap: 0.5rem;
        min-height: 36px;
    }
    /* Cacher le label "RÉCAPITULATIF" et le subtitle */
    .wizard-aside .recap-header .label {
        display: none !important;
    }
    .wizard-aside .recap-header .subtitle {
        display: none !important;
    }
    /* Titre = nom du produit, à gauche */
    .wizard-aside .recap-header .title {
        font-size: 0.88rem !important;
        font-weight: 600 !important;
        flex: 1;
        color: #0F1E3C !important;
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* Déplacer visuellement le .recap-total dans le header via position absolute */
    .wizard-aside .recap-total {
        position: absolute !important;
        top: 50% !important;
        right: 2.2rem !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        display: flex !important;
        align-items: baseline !important;
        gap: 0.4rem !important;
        pointer-events: none;
        border: none !important;
    }
    .wizard-aside .recap-total .label {
        display: none !important;
    }
    .wizard-aside .recap-total .value {
        font-size: 0.95rem !important;
        font-weight: 800 !important;
        color: var(--bleu, #0060AE) !important;
        letter-spacing: -0.01em !important;
    }
    
    /* Récap FERMÉ (.wizard-aside.collapsed) : cacher tout sauf le total qu'on a remonté visuellement */
    .wizard-aside.collapsed .recap-body > *:not(.recap-total) {
        display: none !important;
    }
    
    /* Récap OUVERT (.wizard-aside sans .collapsed) : replacer le total à sa position normale dans le body */
    .wizard-aside:not(.collapsed) .recap-total {
        position: static !important;
        transform: none !important;
        display: flex !important;
        justify-content: space-between !important;
        padding: 0.85rem 1.4rem !important;  /* aligné avec le padding horizontal du recap-body */
        background: #F8FAFC !important;
        margin: 0.75rem -1.4rem 0 !important;  /* déborde sur les côtés, espace au-dessus, et 0 en bas pour la TVA */
        pointer-events: auto;
    }
    
    /* La mention TVA en dessous : également sur fond gris, pas collée */
    .wizard-aside:not(.collapsed) .recap-tva {
        background: #F8FAFC !important;
        margin: 0 -1.4rem -1.25rem !important;  /* prolonge le fond gris jusqu'aux bords */
        padding: 0 1.4rem 0.85rem !important;
        font-size: 0.72rem !important;
        color: var(--muted, #6B7280) !important;
        font-family: inherit !important;
        text-align: right;
        line-height: 1.5;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
    }
    .wizard-aside:not(.collapsed) .recap-total .label {
        display: block !important;
    }
    
    /* Chevron à droite */
    .wizard-aside .recap-header::after {
        color: var(--muted, #6B7280) !important;
        font-size: 0.7rem !important;
        right: 0.85rem !important;
    }
    /* Chevron retourné quand récap ouvert */
    .wizard-aside:not(.collapsed) .recap-header::after {
        transform: translateY(-50%) rotate(180deg) !important;
    }
    
    /* Cacher l'info-banner "Avant 14h" dans l'aside */
    .wizard-aside .info-banner {
        display: none !important;
    }
    
    /* Coller le wizard-main au récap (pas d'espace blanc) */
    .wizard-main {
        margin-top: 0 !important;
    }
}