/* Importation des polices si nécessaires (ajuster si votre styles.css en importe déjà) */
/* Par exemple, si vous utilisez une police Google Fonts */
/* @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap'); */

body {
    font-family: 'Montserrat', sans-serif; /* Exemple, à ajuster si votre site utilise une autre police */
    margin: 0; /* Suppression des marges par défaut du body */
    background-color: #f8f9fa; /* Couleur de fond très claire pour les sections, comme Bootstrap */
    color: #212529; /* Couleur de texte sombre par défaut, comme Bootstrap */
}

/* En-tête (Header) */
header {
    background-color: #6c757d; /* Couleur secondaire de Bootstrap, comme votre navbar */
    color: white;
    padding: 2rem 0; /* Plus d'espace que précédemment */
    text-align: center;
    margin-bottom: 2rem; /* Marge inférieure plus grande */
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); /* Légère ombre pour donner du relief */
}

h1 {
    font-size: 2.5rem; /* Taille plus grande pour le titre principal */
    font-weight: 700; /* Plus gras */
    margin-bottom: 0;
}

/* Conteneurs principaux */
main {
    max-width: 960px; /* Limiter la largeur comme un container Bootstrap */
    margin: 0 auto 2rem auto; /* Centrer et ajouter des marges */
    padding: 0 15px; /* Padding latéral pour ne pas coller aux bords */
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* Espace entre les sections */
}

/* Sections */
section {
    background-color: white;
    padding: 2rem; /* Padding plus généreux */
    border-radius: 0.5rem; /* Bords légèrement arrondis */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); /* Ombre plus prononcée pour les sections importantes */
}

h2 {
    color: #2c3e50; /* Une couleur sombre, comme le text-primary de votre page d'accueil si c'est du bleu foncé */
    border-bottom: 2px solid #e9ecef; /* Bordure plus douce */
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
    font-size: 1.75rem;
    font-weight: 700;
}

ul {
    list-style: none;
    padding: 0;
}

/* Articles du panier */
.article {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid #dee2e6; /* Bordure Bootstrap par défaut */
}

.article:last-child {
    border-bottom: none;
}

.article-info {
    flex-grow: 1;
}

.nom-article {
    font-weight: 600; /* Moins gras que 700, pour un contraste */
    margin-right: 0.5rem;
    font-size: 1.1rem;
}

.prix-article {
    color: #17a2b8; /* Une couleur "info" ou "cyan" de Bootstrap pour les prix */
    font-weight: 600;
}

.supprimer-article {
    background-color: #dc3545; /* Couleur danger de Bootstrap */
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.3rem; /* Bords légèrement arrondis */
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.15s ease-in-out; /* Transition douce */
}

.supprimer-article:hover {
    background-color: #c82333; /* Assombrir au survol */
}

.total-panier {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 2px solid #e9ecef; /* Bordure plus douce */
    text-align: right;
    font-size: 1.25rem;
    font-weight: 700;
    color: #2c3e50; /* Couleur du titre pour le total */
}

/* Boutons d'action */
#actions-panier, #actions-paiement {
    display: flex;
    gap: 1rem; /* Espace entre les boutons */
    justify-content: flex-end;
    margin-top: 1rem; /* Marge au-dessus de la section de boutons */
}

.bouton-principal,
.bouton-secondaire {
    display: inline-block;
    padding: 0.75rem 1.5rem; /* Padding plus généreux */
    text-decoration: none;
    border-radius: 0.3rem; /* Bords légèrement arrondis */
    font-weight: 600;
    font-size: 1.1rem;
    text-align: center;
    transition: all 0.15s ease-in-out; /* Transition douce pour tous les états */
    border: 1px solid transparent; /* Bordure transparente pour éviter le décalage au survol */
}

.bouton-principal {
    background-color: #007bff; /* Couleur primaire de Bootstrap (bleu) */
    color: white;
    border-color: #007bff;
}

.bouton-principal:hover {
    background-color: #0056b3; /* Bleu plus foncé au survol */
    border-color: #0056b3;
}

.bouton-secondaire {
    background-color: #6c757d; /* Couleur secondaire de Bootstrap (gris) */
    color: white;
    border-color: #6c757d;
}

.bouton-secondaire:hover {
    background-color: #545b62; /* Gris plus foncé au survol */
    border-color: #545b62;
}

/* Formulaire de paiement */
#formulaire-paiement {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* Moins d'espace entre les champs */
}

.champ-formulaire {
    display: flex;
    flex-direction: column;
}

.champ-formulaire label {
    margin-bottom: 0.25rem; /* Moins d'espace sous le label */
    font-weight: 600;
    color: #495057; /* Couleur de texte plus foncée pour les labels */
}

.champ-formulaire input[type="text"],
.champ-formulaire input[type="month"] {
    padding: 0.6rem 0.75rem; /* Padding conforme à Bootstrap */
    border: 1px solid #ced4da; /* Bordure Bootstrap par défaut */
    border-radius: 0.25rem; /* Bords légèrement arrondis */
    font-size: 1rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; /* Transition pour le focus */
}

.champ-formulaire input[type="text"]:focus,
.champ-formulaire input[type="month"]:focus {
    border-color: #80bdff; /* Couleur de bordure au focus (Bootstrap) */
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Ombre au focus (Bootstrap) */
}

.deux-colonnes {
    display: flex;
    gap: 1rem; /* Espace entre les colonnes */
}

.deux-colonnes > div {
    flex-grow: 1;
}

/* Récapitulatif de commande (paiement) */
#recapitulatif-commande ul {
    margin-bottom: 0; /* Pas de marge en bas de la liste */
}

#recapitulatif-commande li {
    padding: 0.5rem 0;
    border-bottom: 1px dashed #e9ecef; /* Bordure en pointillés plus légère */
}

#recapitulatif-commande li:last-child {
    border-bottom: none;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: #2c3e50;
    border-top: 1px solid #e9ecef; /* Bordure solide pour le total */
}

/* Pied de page (Footer) */
footer {
    text-align: center;
    margin-top: 3rem; /* Plus d'espace au-dessus */
    padding: 1.5rem 0; /* Padding plus généreux */
    border-top: 1px solid #dee2e6; /* Bordure fine */
    color: #6c757d; /* Couleur de texte secondaire */
    font-size: 0.875em;
    background-color: #f8f9fa; /* Fond légèrement différent du body pour le footer */
}

/* Ajustements pour les mobiles */
@media (max-width: 767.98px) {
    main {
        padding: 0 10px;
        margin: 0 auto 1.5rem auto;
    }

    section {
        padding: 1.5rem;
    }

    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    .bouton-principal,
    .bouton-secondaire {
        font-size: 1em;
        padding: 0.6rem 1.2rem;
    }

    .deux-colonnes {
        flex-direction: column; /* Les champs de carte s'empilent sur mobile */
        gap: 1rem;
    }
}