/* --- Styles Généraux et Réinitialisations (Cohérence avec la page Cinéaste) --- */
body {
    /* Fond principal de l'application, un noir très profond */
    background-color: #0A0A0A;
    color: #E0E0E0; /* Couleur de texte par défaut, un blanc cassé pour la lisibilité sur fond sombre */
    font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif; /* Une police plus moderne et lisible */
    margin: 0;
    padding: 0; /* Gérer le padding via les sections spécifiques */
    line-height: 1.6; /* Améliore la lisibilité du texte */
    -webkit-font-smoothing: antialiased; /* Rend le texte plus lisse sur les navigateurs WebKit */
    -moz-osx-font-smoothing: grayscale; /* Idem pour Firefox */
}

/* Réinitialisation de base pour les éléments HTML5 */
*, *::before, *::after {
    box-sizing: border-box;
}

a {
    text-decoration: none; /* Supprime le soulignement des liens */
    color: inherit; /* Les liens héritent de la couleur du texte parent par défaut */
}

/* --- Header et Navigation Principale (Cohérence) --- */
header {
    background-color: #0A0A0A; /* Assurez-vous que le header reste sur le même fond que le body */
    padding: 1rem 20px; /* Un peu plus de padding pour l'esthétique */
    text-align: left;
    position: relative; /* Pour positionner le titre */
    border-bottom: 1px solid #1E1E1E; /* Une ligne fine pour délimiter le header */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); /* Ombre subtile pour l'élévation */
    z-index: 100; /* Assure que le header est au-dessus des autres éléments */
    display: flex; /* Utilisation de flexbox pour l'alignement */
    justify-content: space-between; /* Espacement entre le titre et les boutons */
    align-items: center; /* Alignement vertical */
}

header h1 {
    font-size: 28px; /* Un peu plus grand pour l'impact */
    font-weight: 700; /* Plus gras */
    color: #FFFFFF; /* Blanc pur pour le titre principal */
    margin: 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); /* Petite ombre textuelle */
    padding-left: 0; /* Pas de padding si header est flex */
    position: static; /* Retire le positionnement absolu car le flexbox gère l'alignement */
}

/* Vous aviez une section <nav> pour les liens au haut. Si vous avez des liens de navigation globaux,
   placez-les à l'intérieur du <header> et ajustez le style. Pour une application mobile,
   la navigation principale est souvent en bas ou dans un menu hamburger.
   J'ai retiré la nav générale du header ici pour simplifier, car vous avez une bottom-nav.
   Si vous en avez besoin, ajoutez-la dans le header avec flexbox.
*/
nav {
    /* Styles pour la navigation principale si elle existe, mais elle n'est pas dans l'exemple de structure */
    /* Assurez-vous que ces styles ne s'appliquent pas à la bottom-nav */
}

nav a {
    /* Styles génériques pour les liens nav, ils devraient être définis pour une nav spécifique */
}
nav a:hover, nav a:active, nav i {
    /* Styles associés */
}


/* --- Boutons en Haut à Droite (Profil, Partage, Notification) (Cohérence) --- */
.top-right-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 15px; /* Espacement ajusté */
    /* Retiré le positionnement absolu pour laisser flexbox du header gérer */
    margin: 0; /* Pas de margin si flexbox gère */
    padding-right: 0; /* Pas de padding si flexbox gère */
    position: static; /* Assurez-vous que ces boutons restent dans le flux normal du header */
    top: auto;
    right: auto;
}

.icon-btn {
    /* Dégradé plus doux pour un look premium */
    background: linear-gradient(135deg, #222222 0%, #111111 100%);
    border: 1px solid #333333; /* Bordure subtile */
    padding: 10px;
    border-radius: 50%;
    width: 48px; /* Taille légèrement plus grande */
    height: 48px; /* Taille légèrement plus grande */
    display: flex;
    align-items: center;
    justify-content: center;
    /* Ombre plus prononcée pour l'élévation */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1); /* Ombre extérieure et intérieure */
    cursor: pointer;
    transition: all 0.2s ease-in-out; /* Transition pour hover/active */
}

.icon-btn:hover {
    background: linear-gradient(135deg, #333333 0%, #1E1E1E 100%); /* Dégradé au survol */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transform: translateY(-2px); /* Léger effet de soulèvement */
}

.icon-btn:active {
    background: #0A0A0A; /* Plus sombre au clic */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.6) inset; /* Ombre intérieure pour le clic */
    transform: translateY(0); /* Retour à la position normale */
}

.icon-btn img {
    width: 24px; /* Icônes légèrement plus grandes */
    height: 24px;
    filter: invert(100%) opacity(0.9); /* Rend l'icône blanche et légèrement transparente */
    transition: filter 0.2s ease-in-out;
}

.icon-btn:hover img {
    filter: invert(100%) opacity(1); /* Plus opaque au survol */
}

/* --- Main Content Area --- */
main {
    max-width: 1400px;
    margin: 40px auto; /* Plus d'espace autour du contenu principal */
    padding: 30px; /* Padding ajusté */
    background-color: #0A0A0A; /* Même fond que le body pour une immersion totale */
    border-radius: 12px; /* Rayon de bordure plus prononcé */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5); /* Ombre plus profonde */
}

.message {
    text-align: center;
    padding: 30px; /* Plus de padding pour le message */
    font-size: 1.3em; /* Texte plus grand */
    color: #909090; /* Gris plus clair pour la lisibilité */
    font-style: italic;
    background-color: #1A1A1A; /* Fond légèrement différent pour le message */
    border-radius: 10px;
    margin-bottom: 30px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3); /* Ombre intérieure subtile */
}

.hidden {
    display: none;
}

/* --- Vendor Block (Bloc Vendeur/Fournisseur) --- */
.vendor-block {
    background: linear-gradient(135deg, #1C1C1E 0%, #111111 100%); /* Dégradé subtil */
    border: 1px solid #282828; /* Bordure plus douce */
    border-radius: 15px; /* Rayon de bordure plus prononcé */
    margin-bottom: 50px; /* Plus d'espace en bas */
    padding: 35px; /* Padding ajusté */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05); /* Ombre et lueur intérieure */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    scroll-margin-top: 80px;
    position: relative; /* Pour les pseudo-éléments */
    overflow: hidden; /* Pour les effets de lumière */
}

.vendor-block::before {
    content: '';
    position: absolute;
    top: -20%;
    left: -20%;
    width: 140%;
    height: 140%;
    background: radial-gradient(circle at 80% 20%, rgba(46, 139, 87, 0.1) 0%, transparent 50%); /* Lumière subtile */
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease-out;
}

.vendor-block:hover::before {
    opacity: 1;
}

.vendor-block > * {
    position: relative;
    z-index: 1; /* Assure que le contenu est au-dessus du pseudo-élément */
}

.vendor-block:hover {
    transform: translateY(-8px); /* Effet de soulèvement plus prononcé */
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.vendor-block h2 {
    color: #F8F8F8; /* Un blanc très clair */
    font-size: 2.5em; /* Plus grand */
    margin-top: 0;
    margin-bottom: 25px; /* Espacement ajusté */
    border-bottom: 2px solid rgba(46, 139, 87, 0.7); /* Ligne d'accentuation verte */
    padding-bottom: 12px;
    text-align: center;
    font-weight: 700;
    letter-spacing: 0.05em;
    position: relative;
}

.vendor-block h2::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -2px;
    width: 60px; /* Petite ligne verte au centre */
    height: 4px;
    background-color: #2E8B57;
    border-radius: 2px;
}

/* --- Shop Indications (Message d'information) --- */
.shop-indications {
    /* Utilisation de couleurs qui s'intègrent mieux au thème sombre, mais qui restent distinctives */
    background-color: #1A1A1A; /* Fond sombre mais légèrement différent */
    border-left: 5px solid #2E8B57; /* Bordure d'accentuation verte */
    padding: 20px 25px; /* Plus de padding */
    margin-bottom: 30px; /* Plus d'espace en bas */
    border-radius: 10px; /* Rayon ajusté */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); /* Ombre subtile */
}

.shop-indications p {
    margin: 8px 0; /* Espacement ajusté */
    font-size: 1.05em; /* Texte légèrement plus grand */
    color: #C0C0C0; /* Gris clair pour le texte */
}

.shop-indications strong {
    color: #FFFFFF; /* Blanc pour le texte fort */
    font-weight: 600; /* Plus gras */
}

/* --- Products Grid (Grille de Produits) --- */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); /* Min-width légèrement augmenté */
    gap: 30px; /* Espacement ajusté */
    margin-top: 35px; /* Espacement ajusté */
}

/* --- Product Card (Carte de Produit) --- */
.product-card {
    background: linear-gradient(135deg, #1C1C1E 0%, #111111 100%); /* Dégradé pour les cartes */
    border: 1px solid #282828; /* Bordure plus douce */
    border-radius: 12px; /* Rayon de bordure ajusté */
    padding: 25px; /* Padding ajusté */
    text-align: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05); /* Ombre et lueur intérieure */
    transition: all 0.3s ease-in-out; /* Transition globale */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden; /* Pour les effets internes */
    position: relative;
}

.product-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 10% 90%, rgba(46, 139, 87, 0.1) 0%, transparent 60%); /* Effet de lumière subtil */
    transition: transform 0.3s ease-out;
    opacity: 0;
}

.product-card:hover::before {
    transform: scale(1.1);
    opacity: 1;
}

.product-card:hover {
    transform: translateY(-8px); /* Effet de soulèvement plus prononcé */
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.product-card img {
    max-width: 100%;
    height: 200px; /* Hauteur fixe légèrement augmentée pour la visibilité */
    object-fit: cover; /* Recadre l'image pour remplir l'espace, plus esthétique */
    border-radius: 8px; /* Rayon de bordure ajusté */
    margin-bottom: 20px; /* Plus d'espace */
    border: 1px solid #333; /* Bordure subtile autour de l'image */
}

.product-card h3 {
    color: #FFFFFF; /* Titre blanc pur */
    font-size: 1.5em; /* Plus grand */
    margin-top: 0;
    margin-bottom: 15px; /* Espacement ajusté */
    font-weight: 600; /* Plus gras */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); /* Ombre de texte subtile */
}

.product-card p {
    font-size: 0.95em; /* Texte légèrement plus grand */
    color: #C0C0C0; /* Gris clair pour la description */
    margin-bottom: 20px; /* Plus d'espace */
    flex-grow: 1;
}

.product-card .price {
    font-size: 1.6em; /* Prix plus grand et impactant */
    font-weight: bold;
    color: #28a745; /* Vert pour le prix (même accentuation que WhatsApp) */
    margin-bottom: 20px; /* Espacement ajusté */
    text-shadow: 0 0 8px rgba(40, 167, 69, 0.5); /* Légère lueur sur le prix */
}

/* --- Share Link Container (Bouton Partager) --- */
.share-link-container {
    text-align: center; /* Centre le bouton de partage */
    margin-top: auto; /* Pousse le conteneur vers le bas de la carte */
    padding-top: 15px; /* Assure un espacement avec le contenu */
}

.share-link-container a {
    /* Style de bouton "ghost" ou "outlined" avec un fond noir transparent */
    background: linear-gradient(135deg, #222222 0%, #111111 100%);
    color: #2E8B57; /* Texte vert comme accentuation */
    padding: 10px 20px; /* Padding ajusté */
    border-radius: 8px; /* Rayon de bordure plus doux */
    font-size: 1em; /* Taille de police ajustée */
    font-weight: 600; /* Gras */
    transition: all 0.3s ease-in-out;
    border: 2px solid #2E8B57; /* Bordure verte */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Ombre pour l'élévation */
    display: inline-flex; /* Permet d'aligner l'icône et le texte */
    align-items: center;
    gap: 8px; /* Espacement entre l'icône et le texte */
}

.share-link-container a:hover {
    background: #2E8B57; /* Fond vert au survol */
    color: #FFFFFF; /* Texte blanc au survol */
    box-shadow: 0 6px 15px rgba(46, 139, 87, 0.4); /* Lueur verte au survol */
    transform: translateY(-2px); /* Léger soulèvement */
}
.share-link-container a i {
    font-size: 1.1em; /* Taille de l'icône */
    transition: color 0.3s ease;
}
.share-link-container a:hover i {
    color: #FFFFFF;
}


/* --- Footer (Cohérence) --- */
footer {
    background-color: #0A0A0A; /* Même fond que le body */
    color: #888888; /* Texte gris plus clair */
    padding: 25px 20px; /* Padding ajusté */
    text-align: center;
    font-size: 13px; /* Taille légèrement plus petite */
    border-top: 1px solid #1E1E1E; /* Bordure fine */
    margin-top: 50px; /* Espacement avec le contenu précédent */
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3); /* Ombre vers le haut */
    border-radius: 0; /* Retire le border-radius en bas, car le footer couvre toute la largeur */
}

/* --- Navigation Inférieure Flottante (Bottom Navigation) (Cohérence) --- */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    /* Dégradé doux pour la barre de navigation */
    background: linear-gradient(to top, #1A1A1A 0%, #111111 100%);
    display: flex;
    justify-content: space-around;
    padding: 12px 0; /* Padding ajusté */
    z-index: 999;
    /* Ombre subtile vers le haut */
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.3);
    border-top-left-radius: 20px; /* Rayon plus prononcé */
    border-top-right-radius: 20px; /* Rayon plus prononcé */
    overflow: hidden; /* Pour contenir les effets internes */
}

.bottom-nav::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, #2E8B57, transparent); /* Fine ligne lumineuse en haut */
    opacity: 0.3;
}

.bottom-nav .nav-item {
    color: #A0A0A0; /* Couleur par défaut des icônes/texte inactifs */
    text-align: center;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
    padding: 8px 0; /* Padding ajusté */
    border-radius: 10px; /* Rayon de bordure plus rond */
    transition: all 0.3s ease-in-out; /* Transition globale */
    flex-grow: 1;
    max-width: 90px; /* Pour éviter que les éléments soient trop larges sur grand écran */
    position: relative;
}

.bottom-nav .nav-item img {
    filter: invert(70%); /* Icônes grisées par défaut */
    width: 26px; /* Icônes légèrement plus grandes */
    height: 26px;
    margin-bottom: 4px; /* Espacement ajusté */
    transition: filter 0.3s ease-in-out;
}

.bottom-nav .nav-item span {
    font-size: 0.8em; /* Texte légèrement plus petit */
    font-weight: 600; /* Plus gras */
    text-transform: uppercase; /* Texte en majuscules pour un look moderne */
    letter-spacing: 0.5px; /* Espacement des lettres */
}

.bottom-nav .nav-item:hover {
    background-color: #222222; /* Fond plus sombre au survol */
    color: #FFFFFF; /* Texte blanc au survol */
}

.bottom-nav .nav-item:hover img {
    filter: invert(100%); /* Icônes blanches au survol */
}

.bottom-nav .nav-item.active {
    background: linear-gradient(135deg, #2E8B57 0%, #1F6A44 100%); /* Dégradé vert pour l'actif */
    color: #FFFFFF; /* Texte blanc pour l'actif */
    box-shadow: 0 0 15px rgba(46, 139, 87, 0.6); /* Lueur autour de l'élément actif */
    transform: translateY(-2px); /* Léger soulèvement */
}

.bottom-nav .nav-item.active img {
    filter: invert(100%); /* Icônes blanches pour l'actif */
}

/* --- Ajustements Responsifs (mis à jour) --- */
@media (max-width: 992px) {
    main {
        margin: 30px 20px;
        padding: 25px;
    }
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 25px;
    }
    .vendor-block h2 {
        font-size: 2.2em;
    }
    .product-card img {
        height: 180px;
    }
}

@media (max-width: 768px) {
    header h1 {
        font-size: 24px;
    }
    .top-right-buttons {
        gap: 10px;
    }
    .icon-btn {
        width: 40px;
        height: 40px;
    }
    .icon-btn img {
        width: 20px;
        height: 20px;
    }
    main {
        margin: 20px 15px;
        padding: 20px;
    }
    .vendor-block {
        padding: 25px;
        margin-bottom: 40px;
    }
    .vendor-block h2 {
        font-size: 2em;
    }
    .shop-indications {
        padding: 15px 20px;
        margin-bottom: 25px;
    }
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 20px;
    }
    .product-card {
        padding: 20px;
    }
    .product-card img {
        height: 150px;
        margin-bottom: 15px;
    }
    .product-card h3 {
        font-size: 1.3em;
    }
    .product-card .price {
        font-size: 1.4em;
    }
}

@media (max-width: 480px) {
    header {
        padding: 0.8rem 15px; /* Moins de padding */
    }
    header h1 {
        font-size: 20px;
    }
    .top-right-buttons {
        gap: 8px;
    }
    .icon-btn {
        width: 38px;
        height: 38px;
        padding: 8px;
    }
    .icon-btn img {
        width: 18px;
        height: 18px;
    }
    main {
        margin: 15px 10px;
        padding: 15px;
    }
    .message {
        padding: 20px;
        font-size: 1.1em;
    }
    .vendor-block {
        padding: 20px;
        margin-bottom: 30px;
    }
    .vendor-block h2 {
        font-size: 1.8em;
    }
    .shop-indications {
        padding: 12px 15px;
        font-size: 0.95em;
    }
    .products-grid {
        grid-template-columns: 1fr; /* Une seule colonne sur très petits écrans */
        gap: 15px;
    }
    .product-card {
        padding: 15px;
    }
    .product-card img {
        height: 200px; /* Plus grand en mode portrait */
        margin-bottom: 15px;
    }
    .product-card h3 {
        font-size: 1.2em;
    }
    .product-card p {
        font-size: 0.85em;
    }
    .product-card .price {
        font-size: 1.3em;
    }
    .share-link-container a {
        padding: 8px 15px;
        font-size: 0.9em;
    }
    .bottom-nav {
        padding: 6px 0;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }
    .bottom-nav .nav-item {
        font-size: 9px;
        padding: 4px 0;
    }
    .bottom-nav .nav-item img {
        width: 18px;
        height: 18px;
    }
}