:root { --taupe: #a3907e; --black: #1a1a1a; --light: #fdfdfd; --gray: #f4f1ee; }

#pressing-app { max-width: 1000px; margin: 40px auto; font-family: 'Poppins', sans-serif; font-size:17px; }

/* Workflow Cliquable */
.stepper-item { cursor: pointer; position: relative; z-index: 2; width: 25%; text-align: center; }
.stepper-item:hover .step-counter { border-color: var(--taupe); color: var(--taupe); }
.stepper-item.active .step-counter { background: var(--taupe) !important; color: #fff !important; border-color: var(--taupe); }

.stepper-wrapper { display: flex; justify-content: space-between; margin-bottom: 40px; position: relative; font-size:16px}
.search-container { font-size:16px !important }
.step-counter { width: 35px; height: 35px; background: #fff; border: 2px solid #ddd; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 5px; font-weight: bold; transition: 0.3s; }
.progress-line { position: absolute; top: 17px; left: 12%; width: 76%; height: 2px; background: #eee; z-index: 1; }
.progress-fill { height: 100%; background: var(--taupe); width: 0%; transition: 0.4s; }


/* Articles Grid */
#products-grid { display: flex; flex-direction: column; gap: 10px; margin-top: 30px; }
.product { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 20px; 
    background: #fff; 
    border-bottom: 1px solid #eee; 
}
.product-info .name { font-weight: 500; font-size: 14px; }
.product-info .price { color: var(--taupe); font-weight: 600; font-size: 13px;}

.qty-controls { display: flex; align-items: center; gap: 15px; background: var(--gray); padding: 8px 12px; border-radius: 5px; font-size:16px !important }
.qty-controls button { background: var(--taupe); color: #fff; border: none; width: 28px; height: 28px; cursor: pointer; border-radius: 4px; font-weight: bold; }
.qty-val { font-weight: bold; min-width: 20px; text-align: center; }

/* Categories */
#categories {
    display: flex;
    flex-wrap: wrap; /* Permet aux catégories de passer à la ligne */
    gap: 8px;        /* Espace réduit entre les boutons */
    margin-bottom: 25px;
    overflow-x: visible; /* Supprime le scroll horizontal */
}
.cat {
    padding: 8px 16px;
    background: var(--gray);
    cursor: pointer;
    border-radius: 20px; /* Forme plus arrondie (pilule) pour plus de finesse */
    font-weight: 500;
    font-size: 13px;    /* Police plus petite et élégante */
    color: #666;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

.cat.active {
    background: var(--black);
    color: #fff;
    border-color: var(--black);
}

.cat:hover:not(.active) {
    background: #e8e4e1;
    color: var(--black);
}

/* Booking Layout */
.booking-layout { display: grid; grid-template-columns: 1fr 300px; gap: 20px; }
.calendar-card { background: #fff; border: 1px solid #eee; padding: 20px; border-radius: 8px; }
#calendar-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.day { padding: 15px 0; text-align: center; cursor: pointer; border-radius: 4px; }
.day.selected { background: var(--taupe) !important; color: #fff !important; }
.day.disabled { background: #f9f9f9; color: #ddd; cursor: not-allowed; }

.calendar-weekdays { font-weight: 400; }

/* Slots Cliquables */
#slots-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.slot-btn { 
    padding: 12px; 
    border: 1px solid #eee; 
    background: #fff; 
    cursor: pointer; 
    font-size: 13px; 
    font-weight: 600; 
    border-radius: 4px; 
    transition: 0.2s;
}
.slot-btn:hover:not(.selected) { background: var(--gray); border-color: var(--taupe); }
.slot-btn.selected { 
    background: var(--black) !important; 
    color: #fff !important; 
    border-color: var(--black) !important; 
}




/* Footer & Boutons */
#footer-bar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 15px 30px !important; /* Réduit (était à 25px partout) */
    background: #fff !important;
    border-top: 1px solid var(--taupe) !important;
    margin-top: 20px !important; /* Réduit (était à 40px) */
    width: 100% !important;
    box-sizing: border-box !important;
}

.footer-left {
    font-size: 18px !important; /* Taille plus élégante */
    font-weight: 600 !important;
    color: #333 !important;
}

#cart-count, #total-price {
    display: inline-block !important;
}

#total-price {
    margin-left: 10px !important;
    color: #8bc34a !important; /* Vert pour le prix si tu veux le faire ressortir */
}

#cart-summary-text {
    font-size: 18px !important; /* Taille lisible mais pas énorme */
    font-weight: 600;
    color: #333;
}
#next-btn {
    height: 45px !important; /* Hauteur fixe standard */
    padding: 0 30px !important; /* Largeur équilibrée */
    font-size: 15px !important;
    font-weight: bold !important;
    background-color: #000 !important; /* Noir comme sur ton image */
    color: #fff !important;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    text-transform: uppercase !important;
}

#next-btn:hover {
    background-color: #333 !important;
}
#prev-btn { background: transparent; border: 1px solid #ddd; padding: 12px 25px; cursor: pointer; margin-right: 10px; }

.step-content { display: none; }
.step-content.active { display: block; animation: fadeIn 0.3s; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }



/* --- RECTIFICATION MOBILE ETAPE 2 --- */
@media screen and (max-width: 768px) {

    /* 1. Force le Calendrier et les Créneaux l'un sous l'autre */
    #step-2 {
        flex-direction: column !important;
        display: flex !important;
        padding: 10px !important;
        gap: 20px !important;
    }

    /* 2. On donne 100% de largeur aux deux sections */
    .calendar-section, 
    .slots-section {
        width: 100% !important;
        flex: none !important;
        border-right: none !important; /* Enlève la ligne de séparation verticale */
        border-bottom: 1px solid #eee; /* Optionnel: ajoute une ligne horizontale */
        padding-bottom: 20px;
    }

    /* 3. Réorganisation du Footer pour éviter la coupe */
    #footer-bar {
        flex-direction: column !important; /* Empile texte et boutons */
        padding: 15px !important;
        height: auto !important;
        gap: 15px !important;
    }

    .footer-left {
        width: 100% !important;
        text-align: center !important;
    }

    /* On aligne RETOUR et SUIVANT proprement */
    .footer-right {
        display: flex !important;
        width: 100% !important;
        justify-content: center !important;
        gap: 10px !important;
    }

    /* Boutons proportionnels */
    #prev-btn, #next-btn {
        flex: 1 !important; /* Partage 50/50 */
        height: 44px !important; /* Taille "Apple" standard pour le tactile */
        font-size: 14px !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        padding: 0 !important;
    }

    /* 4. Calendrier : On s'assure que les jours ne sont pas trop serrés */
    #dates-container {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)) !important;
        gap: 10px !important;
    }
}