/* ==========================================================================
                       STYLE5.CSS - Page Tunnel de Commande & Paiement (commande.php)
                       ========================================================================== */
                    
                    /* Section principale */
                    .checkout-section {
                        padding: 60px 20px;
                        background-color: var(--bg-light, #fbf9f6);
                        min-height: 70vh;
                    }
                    
                    /* Alerte d'erreur */
                    .alert-error {
                        background-color: #f8d7da;
                        color: #842029;
                        padding: 15px 20px;
                        border-radius: 8px;
                        margin-bottom: 30px;
                        border: 1px solid #f5c2c7;
                        font-size: 0.95rem;
                        max-width: 1200px;
                        margin-left: auto;
                        margin-right: auto;
                    }
                    
                    /* Grille principale (Formulaire à gauche, Récapitulatif à droite) */
                    .checkout-wrapper {
                        display: grid;
                        grid-template-columns: 1.5fr 1fr;
                        gap: 40px;
                        align-items: start;
                        max-width: 1200px;
                        margin: 0 auto;
                    }
                    
                    /* --- 1. Formulaire de livraison --- */
                    .checkout-form-container {
                        background-color: var(--white, #ffffff);
                        border-radius: 12px;
                        padding: 35px;
                        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
                    }
                    
                    .checkout-form-container h2 {
                        font-size: 1.4rem;
                        color: var(--text-color, #2c3531);
                        margin-bottom: 25px;
                        padding-bottom: 10px;
                        border-bottom: 1px solid #eee;
                    }
                    
                    .checkout-form {
                        display: flex;
                        flex-direction: column;
                        gap: 20px;
                    }
                    
                    /* Lignes de formulaire (colonnes multiples) */
                    .form-row {
                        display: grid;
                        grid-template-columns: 1fr 1fr;
                        gap: 20px;
                    }
                    
                    .form-group {
                        display: flex;
                        flex-direction: column;
                        gap: 8px;
                    }
                    
                    .form-group label {
                        font-size: 0.85rem;
                        font-weight: 600;
                        color: var(--text-color, #2c3531);
                    }
                    
                    .form-group input {
                        width: 100%;
                        padding: 12px 15px;
                        border: 1px solid #ddd;
                        border-radius: 8px;
                        font-size: 0.95rem;
                        font-family: inherit;
                        background-color: #fff;
                        transition: border-color 0.3s ease, box-shadow 0.3s ease;
                    }
                    
                    .form-group input:focus {
                        outline: none;
                        border-color: var(--accent-color, #cbb29a);
                        box-shadow: 0 0 0 3px rgba(203, 178, 154, 0.15);
                    }
                    
                    /* Bouton de validation de commande / Stripe */
                    .btn-submit-order {
                        display: block;
                        width: 100%;
                        background-color: var(--accent-color, #cbb29a);
                        color: var(--white, #ffffff);
                        border: none;
                        padding: 15px;
                        border-radius: 30px;
                        font-size: 1rem;
                        font-weight: 600;
                        cursor: pointer;
                        text-align: center;
                        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
                        transition: all 0.3s ease;
                        margin-top: 10px;
                    }
                    
                    .btn-submit-order:hover {
                        background-color: var(--primary-color, #5b7065);
                        transform: translateY(-2px);
                        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
                    }
                    
                    
                    /* --- 2. Récapitulatif de la commande (Colonne Droite) --- */
                    .checkout-summary {
                        background-color: var(--white, #ffffff);
                        border-radius: 12px;
                        padding: 35px;
                        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
                        position: sticky;
                        top: 30px;
                    }
                    
                    .checkout-summary h3 {
                        font-size: 1.3rem;
                        color: var(--text-color, #2c3531);
                        margin-bottom: 20px;
                        padding-bottom: 10px;
                        border-bottom: 1px solid #eee;
                    }
                    
                    /* Liste des articles dans le récap */
                    .checkout-items-list {
                        display: flex;
                        flex-direction: column;
                        gap: 12px;
                        max-height: 250px;
                        overflow-y: auto;
                        padding-right: 5px;
                        margin-bottom: 15px;
                    }
                    
                    .checkout-item-line {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        font-size: 0.9rem;
                        color: #555;
                    }
                    
                    .checkout-item-line span:last-child {
                        font-weight: 600;
                        color: var(--text-color, #2c3531);
                    }
                    
                    .checkout-summary hr {
                        border: none;
                        border-top: 1px solid #eee;
                        margin: 15px 0;
                    }
                    
                    /* Lignes de calcul (Sous-total, Livraison, Total) */
                    .summary-line {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        margin-bottom: 12px;
                        font-size: 0.95rem;
                        color: #555;
                    }
                    
                    .summary-line span:last-child {
                        font-weight: 600;
                        color: var(--text-color, #2c3531);
                    }
                    
                    /* Ligne Total à payer */
                    .total-line {
                        font-size: 1.15rem;
                        font-weight: 700;
                        color: var(--primary-color, #5b7065);
                        margin-top: 10px;
                        margin-bottom: 0;
                    }
                    
                    .total-line span:last-child {
                        color: var(--primary-color, #5b7065);
                        font-size: 1.3rem;
                    }
                    
                    
                    /* ==========================================================================
                       RESPONSIVE (Tablettes & Mobiles)
                       ========================================================================== */
                    @media (max-width: 900px) {
                        .checkout-wrapper {
                            grid-template-columns: 1fr;
                            gap: 30px;
                        }
                    
                        .checkout-summary {
                            position: static;
                        }
                    }
                    
                    @media (max-width: 600px) {
                        .checkout-section {
                            padding: 30px 15px;
                        }
                    
                        .checkout-form-container,
                        .checkout-summary {
                            padding: 20px;
                        }
                    
                        .form-row {
                            grid-template-columns: 1fr;
                            gap: 15px;
                        }
                    }