/* Style général pour le corps */
body {
    font-family: 'Arial', sans-serif;
    background-color: #f9ecec; /* Couleur pastel inspirée du logo */
    margin: 0;
    padding: 0;
}

/* Header */
header {
    background-color: #ffe4b5; /* Couleur douce dorée */
    color: #000; /* Texte noir */
    text-align: center;
    padding: 1rem 0;
}

header .logo {
    width: 100%; /* Le logo occupe toute la largeur */
    height: 600px; /* Hauteur ajustée pour une bannière */
    object-fit: cover; /* Coupe l'image pour qu'elle s'adapte à la bannière */
}
/* Style personnalisé pour le bouton "Retour à l'accueil" */
.btn-accueil {
    background-color: #FF69B4; /* Rose vif */
    color: white; /* Texte blanc */
    font-weight: bold; /* Texte en gras */
    font-size: 1.2em; /* Taille du texte */
    padding: 12px 25px; /* Espacement intérieur */
    border-radius: 8px; /* Bordures arrondies */
    border: none; /* Supprimer la bordure */
    transition: background-color 0.3s ease-in-out, transform 0.2s ease-in-out;
}

/* Effet au survol */
.btn-accueil:hover {
    background-color: #8B0000; /* Rouge foncé */
    color: #fff; /* Texte blanc */
    transform: scale(1.05); /* Léger agrandissement */
}
/* Style personnalisé pour le bouton "Ajouter au panier" */
.btn-ajouter-panier {
    background-color: #f297ca; /* Jaune doré */
    color: #000; /* Texte noir */
    font-weight: bold; /* Texte en gras */
    font-size: 1.1em; /* Taille du texte */
    padding: 10px 20px; /* Espacement intérieur */
    border-radius: 6px; /* Bordures arrondies */
    border: none; /* Supprime la bordure */
    transition: background-color 0.3s ease-in-out, transform 0.2s ease-in-out;
}

/* Effet au survol */
.btn-ajouter-panier:hover {
    background-color: #fa3a77; /* Orange doré */
    color: #fff; /* Texte blanc */
    transform: scale(1.05); /* Léger agrandissement */
}



.brand-name {
    font-size: 2rem;
    font-weight: bold;
    margin-top: 10px;
}

.tagline {
    font-size: 1.2rem;
    color: #555;
}

/* Grille des articles */
.card {
    border: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ombre légère pour un effet d'élégance */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.card:hover {
    transform: translateY(-5px); /* Léger soulèvement au survol */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
}

.card img {
    width: 100%;
    height: auto;
    object-fit: cover; /* Assure une belle présentation des images */
    border-bottom: 2px solid #ffe4b5;
    filter: brightness(1.4); /* Toujours lumineux */
}

.card-title {
    font-size: 1rem;
    color: #e2d629; /* Couleur vive pour les titres */
    margin-top: 10px;
}

/* Carrousel */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: #d589c1; /* Couleur de fond des flèches */
    border-radius: 50%; /* Forme circulaire */
    width: 50px;
    height: 50px;
    background-size: 70%; /* Réduction de l'icône interne */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Ombre pour effet de relief */
    transition: background-color 0.2s ease-in-out;
}

.carousel-control-prev-icon:hover,
.carousel-control-next-icon:hover {
    background-color: #ff99c2; /* Couleur de survol pour les flèches */
}

.carousel-control-prev,
.carousel-control-next {
    width: 5%; /* Taille de la zone cliquable */
}

.carousel-indicators [data-bs-target] {
    background-color: #e993cc; /* Couleur des points d'indication */
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.carousel-indicators .active {
    background-color: #d10c68; /* Couleur du point actif */
}

/* Modale */
.modal-content {
    border-radius: 10px;
    border: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.modal-header {
    background-color: #fbb6e0; /* Couleur dorée pour l'en-tête de la modale */
    color: #000;
    font-weight: bold;
    border-bottom: 2px solid #0b0503;
}

.modal-body img {
    max-width: 100%;
    height: auto;
    margin-bottom: 1rem;
    filter: brightness(1.4); /* Augmentation de la luminosité au survol */
}

.modal-footer {
    justify-content: space-between;
}

p {
    color: #070707; /* Couleur de texte légèrement atténuée */
    line-height: 1.6; /* Espacement entre les lignes */
    font-size: 1rem; /* Taille standard */
    margin-bottom: 0;
}

/* Footer */
footer {
    background-color: #ffe4b5;
    color: #000;
    text-align: center;
    padding: 1rem 0;
    font-size: 0.9rem;
}

/* Responsiveness */
@media (max-width: 768px) {
    header .logo {
        max-height: 100px; /* Réduit la taille du logo sur les petits écrans */
    }

    .brand-name {
        font-size: 1.5rem;
    }

    .tagline {
        font-size: 1rem;
    }
}