/* 🎨 Thème Modern Teal - Version Professionnelle & Optimisée */

/* ========================================================== */
/* --- 1. Variables de Design System du Thème Modern Teal --- */
/* ========================================================== */
:root {

    /* --- COULEURS DE BASE DU THÈME MODERN TEAL --- */
    --theme-primary: #00A79D;       /* Sarcelle / Teal Vif (base primaire) */
    --theme-secondary: #193549;     /* Bleu Nuit Profond (base secondaire/action) */
    --theme-text-dark: #193549;     /* Bleu Nuit pour le texte principal */
    --theme-text-muted: #5A748A;    /* Gris Bleu pour les paragraphes */
    --theme-bg-page: #F7F9FC;       /* Fond Gris Clair très doux */
    --theme-bg-card: #FFFFFF;       /* Fond de Carte Blanc Pur */
    
    /* Couleurs de statut */
    --theme-danger: #D9534F;        /* Rouge Moderne */
    --theme-success: #5CB85C;       /* Vert de validation classique */


    /* ========================================================== */
    /* --- 2. MAPPING CRITIQUE (Écrase les variables globales) --- */
    /* -------------------------------------------------------- */
    
    /* 1. Mappage des variables injectées par le routeur (le plus critique) */
    --primary: var(--theme-primary) !important; 
    --secondary: var(--theme-secondary) !important; 
    
    /* 2. Mappage des variables de couleur de SOGUIFY (style.css) */
    --text-main: var(--theme-text-dark) !important;
    --text-muted: var(--theme-text-muted) !important;
    --background: var(--theme-bg-page) !important;
    --background-soft: var(--theme-bg-card) !important;
    --border-color: #E0E7ED !important; /* Bordure Gris Bleu clair et net */
    
    /* 3. Mappage des couleurs de statut/badges */
    --success: var(--theme-success) !important;
    --error: var(--theme-danger) !important;
    --accent: var(--theme-primary) !important; /* Sarcelle pour les étoiles/warning */
    --badge-new-bg: var(--theme-secondary) !important; /* Nouveau en Bleu Nuit */
    --badge-promo-bg: var(--theme-primary) !important; /* Promo en Sarcelle */

    /* 4. Mappage des états de survol (importants pour les boutons) */
    --primary-hover: #008D7A !important; /* Sarcelle plus foncé */
    --secondary-hover: #122838 !important; /* Bleu Nuit plus foncé */
    --success-hover: #4CAE4C !important; 
    --error-hover: #C9302C !important; 
    
    /* 5. Mappage des alertes */
    --info-bg-light: #EFF6FB !important; /* Fond bleu très clair */
    --info-color-light: #193549 !important; /* Texte Bleu Nuit */
    --info-border-light: #D0E4F0 !important;
    --alert-success-bg-light: #F0FAF0 !important; 
    --alert-success-color-light: #5CB85C !important; 
    --alert-success-border-light: #D0EBD0 !important;

    /* -------------------------------------------------------- */
    /* --- 3. VARIABLES DE DESIGN SYSTEM (Le reste de votre code) --- */
    /* -------------------------------------------------------- */
    
    --color-primary: var(--primary);      
    --color-secondary: var(--secondary);    
    --color-text: var(--text-muted); 
    --color-text-dark: var(--text-main);  
    --color-background-light: var(--background); 
    --color-card-bg: var(--background-soft);      
    --color-border: var(--border-color);    
    
    /* Espacement (Basé sur 8px grid) */
    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 32px;
    --space-xl: 48px;

    /* Typographie */
    /* Font pour le look tech/moderne */
    --font-family-sans: 'Roboto', 'Arial', sans-serif; 
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Ombres (Ombres Sarcelle de survol) */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05); 
    --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15);
    /* L'ombre de survol utilise la couleur primaire (Sarcelle) */
    --shadow-hover: 0 4px 8px rgba(0, 167, 157, 0.15); 

    /* Transitions */
    --transition-ease: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* ========================================================== */
/* --- 2. Styles de Base --- */
/* ========================================================== */
html {
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: inherit;
}

body {
    font-family: var(--font-family-sans);
    background-color: var(--color-background-light);
    color: var(--color-text);
    margin: 0;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--color-text-dark);
    font-weight: var(--font-weight-semibold);
    margin-top: 0;
}

a {
    color: var(--color-primary); /* Liens en Sarcelle */
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    text-decoration: underline;
    color: var(--primary-hover); 
}

/* ========================================================== */
/* --- 3. Composants réutilisables (DESIGN MODERN TEAL) --- */
/* ========================================================== */

/* --- Cartes génériques (Nouveau style : Nette et définie) --- */
.card, .product-card {
    border: 1px solid var(--border-color); /* Bordure fine */
    background-color: var(--color-card-bg);
    border-radius: 8px; /* Coins modérément arrondis (moderne) */
    box-shadow: var(--shadow-sm); 
    transition: var(--transition-ease);
}

.card:hover, .product-card:hover {
    transform: none; 
    /* Survol : Bordure Sarcelle et Ombre Sarcelle */
    border: 1px solid var(--color-primary); 
    box-shadow: var(--shadow-hover); 
}

/* --- Boutons d'action --- */
.btn-primary, .add-to-cart-button {
    background-color: var(--color-primary); /* Sarcelle */
    border-color: var(--color-primary);
    color: white !important; 
    font-weight: var(--font-weight-bold);
    padding: var(--space-sm) var(--space-md);
    border-radius: 4px; 
    display: inline-block;
    cursor: pointer;
    text-transform: uppercase;
    transition: var(--transition-ease);
}

.btn-primary:hover, .add-to-cart-button:hover {
    background-color: var(--primary-hover); 
    border-color: var(--primary-hover);
    color: white !important; 
    transform: none; 
    box-shadow: var(--shadow-sm);
}

.btn-outline-primary, .btn-view {
    color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    background-color: transparent !important;
    transition: var(--transition-ease);
}

.btn-outline-primary:hover, .btn-view:hover {
    background-color: var(--color-primary) !important;
    color: white !important;
}

.btn-success, #submit-order-button {
    background-color: var(--theme-success) !important; 
    border-color: var(--theme-success) !important;
    color: white !important;
    font-weight: var(--font-weight-bold);
    transition: var(--transition-ease);
}

.btn-success:hover, #submit-order-button:hover {
    background-color: var(--success-hover) !important;
    border-color: var(--success-hover) !important;
    color: white !important;
}


/* --- Formulaires génériques --- */
.form-control, .form-select, .form-check-input {
    border-color: var(--border-color);
    border-radius: 4px; 
    transition: var(--transition-ease);
}

.form-control:focus, .form-select:focus, .form-check-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 167, 157, 0.2); 
}

/* --- Badges --- */
.badge {
    font-weight: var(--font-weight-bold);
    font-size: 0.7rem;
    padding: 4px 8px;
    border-radius: 4px; 
    text-transform: uppercase;
    color: white; 
}

.badge.bg-danger {
    background-color: var(--theme-danger) !important;
}

.product-badges .badge-out-of-stock {
    background-color: var(--theme-danger);
}
.product-badges .badge-new {
    background-color: var(--theme-secondary);
}
.product-badges .badge-promo {
    background-color: var(--theme-primary);
}

/* --- Icônes et couleurs de texte --- */
.fa-solid, .bi, .text-primary {
    color: var(--color-primary) !important; 
}
.text-success {
    color: var(--theme-success) !important;
}
.text-muted {
    color: var(--color-text) !important;
}

/* ========================================================== */
/* --- 4. Styles par sections/layouts --- */
/* ========================================================== */

/* --- En-tête de la boutique --- */
.boutique-header {
    background-color: var(--color-background-light) !important;
    border-bottom: 1px solid var(--border-color); 
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1030;
}
.shop-name-desktop, .shop-name-mobile-center {
    color: var(--color-text-dark) !important;
    font-weight: var(--font-weight-bold);
}
.main-nav-desktop .nav-link {
    color: var(--color-text) !important;
    border-bottom: 2px solid transparent;
    padding-bottom: 10px;
}
.main-nav-desktop .nav-link:hover {
    color: var(--color-primary) !important; 
    border-bottom-color: var(--color-primary);
}
.header-right-icons .btn, .header-right-icons a {
    color: var(--color-text) !important;
    transition: all 0.2s ease;
}
.header-right-icons .btn:hover, .header-right-icons a:hover {
    color: var(--color-primary) !important;
}

/* --- Pied de page --- */
footer {
    background-color: var(--color-secondary) !important; /* Fond Bleu Nuit */
    color: var(--color-card-bg) !important; /* Texte Blanc */
    padding-top: var(--space-xl);
    padding-bottom: var(--space-md);
    margin-top: var(--space-xl) !important;
    border-top: 5px solid var(--color-primary); /* Ligne d'accent Sarcelle */
    line-height: 1.8;
}
footer h5, footer h6 {
    color: var(--color-card-bg); /* Titres Blancs */
}
footer a {
    color: var(--color-card-bg) !important; /* Liens Blancs */
}
footer a:hover {
    color: var(--color-primary) !important; /* Survol Sarcelle */
}
.footer-bottom {
    border-top: 1px solid var(--theme-text-muted); /* Séparateur Gris */
}

/* --- Sections des produits (Accueil, Tous les produits) --- */
.container h2, .container h3 {
    color: var(--color-secondary) !important; 
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: var(--space-lg) !important;
}

/* --- Carte produit (Style marché - DESIGN MODERN TEAL) --- */
.product-card.market-style {
    transform: none; 
    box-shadow: var(--shadow-sm);
    transition: var(--transition-ease);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}
.product-card.market-style:hover {
    transform: none; 
    box-shadow: var(--shadow-hover);
    border: 1px solid var(--color-primary); /* Bordure Sarcelle au survol */
}

/* --- Image produit --- */
.product-image-container {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 4px; 
}
.product-image {
    object-fit: cover;
    transition: transform 0.3s ease;
}
.product-card.market-style:hover .product-image {
    transform: scale(1.03); 
}

/* --- Texte et Prix --- */
.product-card-body {
    padding: var(--space-sm);
    text-align: left;
}
.product-title a {
    color: var(--color-text-dark) !important; 
    font-weight: var(--font-weight-medium); 
    font-size: 1.05rem;
    line-height: 1.3;
    margin-bottom: 4px;
    display: block;
    transition: color 0.2s ease;
}
.product-title a:hover {
    color: var(--color-primary) !important; 
}
.product-pricing .current-price {
    color: var(--color-primary) !important; /* Prix en Sarcelle */
    font-weight: var(--font-weight-bold);
    font-size: 1.3rem; 
    margin-top: 8px;
}
.product-pricing .base-price {
    color: var(--color-text) !important;
    text-decoration: line-through;
    font-size: 0.9rem;
}

/* --- Page Produit --- */
.product-section .product-title {
    color: var(--color-text-dark) !important;
    font-weight: var(--font-weight-bold);
}

/* --- Page Panier --- */
.page-title {
    color: var(--color-secondary) !important;
    font-weight: var(--font-weight-bold);
}
.merchant-cart-card .card-title a {
    color: var(--color-primary) !important;
}
.order-summary-card .card-title {
    color: var(--color-text-dark) !important;
}
.merchant-cart-card .card-header .btn {
    background-color: var(--color-secondary) !important;
    border-color: var(--color-secondary) !important;
    color: white !important;
    transition: var(--transition-ease);
}
.merchant-cart-card .card-header .btn:hover {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: white !important;
}
.quantity-control .btn-qty {
    background-color: var(--color-card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--color-text-dark) !important;
    border-radius: 4px;
    transition: var(--transition-ease);
}
.quantity-control .btn-qty:hover {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: white !important;
}
.form-check-input:checked {
    background-color: var(--color-primary) !important;
    border-color: var(--primary-hover) !important;
}
.btn-remove.btn-outline-danger {
    color: var(--theme-danger) !important;
    border-color: var(--theme-danger) !important;
    transition: var(--transition-ease);
}
.btn-remove.btn-outline-danger:hover {
    background-color: var(--theme-danger) !important;
    color: white !important;
    box-shadow: var(--shadow-sm);
}
#submit-order-button {
    background-color: var(--theme-success) !important;
    border-color: var(--theme-success) !important;
    color: white !important;
}
#submit-order-button:hover {
    background-color: var(--success-hover) !important;
    border-color: var(--success-hover) !important;
    color: white !important;
}
.cart-item-row .btn-remove {
    color: white !important;
    background-color: var(--theme-danger) !important;
    border-color: var(--theme-danger) !important;
    border-radius: 4px;
}

.cart-item-row .btn-remove:hover {
    background-color: var(--error-hover) !important;
    border-color: var(--error-hover) !important;
    color: white !important;
}
/* --- Correction de la bannière de promotion --- */
.promo-banner {
    background-color: var(--color-secondary) !important; 
    color: white !important;
    padding: var(--space-md);
    text-align: center;
    font-weight: var(--font-weight-bold);
    font-size: 1.125rem;
    border-bottom: 2px solid var(--color-primary);
}
.promo-banner .promo-text-inner {
    color: white !important;
}
/* --- Correction du survol des boutons de la carte produit (Partager/Panier) --- */

.icon-button {
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: var(--space-sm);
    color: var(--color-text);
    transition: var(--transition-ease);
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.icon-button:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: white !important;
    transform: none;
    box-shadow: var(--shadow-sm);
}
/* --- Correction de la Pagination dans all_products.php --- */

.pagination .page-item .page-link {
    color: var(--color-text-dark) !important;
    background-color: transparent !important;
    border-color: var(--border-color) !important;
    border-radius: 4px;
    transition: var(--transition-ease);
}

.pagination .page-item.active .page-link {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: white !important;
    font-weight: var(--font-weight-bold);
}

.pagination .page-item .page-link:hover {
    background-color: var(--color-primary) !important;
    color: white !important;
    border-color: var(--color-primary) !important;
}

.pagination .page-item:not(.active) .page-link {
    color: var(--color-text) !important;
}
/* --- Correction du bouton de suppression d'article et des couleurs de stock --- */

.cart-item-row .btn-remove {
    color: white !important;
    background-color: var(--theme-danger) !important;
    border-color: var(--theme-danger) !important;
}

.cart-item-row .btn-remove:hover {
    background-color: var(--error-hover) !important;
    border-color: var(--error-hover) !important;
    color: white !important;
}

.cart-item-row .text-success {
    color: var(--theme-success) !important;
}

.cart-item-row .btn-primary {
    background-color: var(--color-secondary) !important;
    border-color: var(--color-secondary) !important;
    color: white !important;
}
.cart-item-row .btn-primary:hover {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: white !important;
}
/* --- Correction de la couleur du "Total général" --- */

.order-summary-card #total-global-value {
    color: var(--color-primary) !important;
    font-weight: var(--font-weight-bold);
}

.order-summary-card h4.text-success {
    color: var(--color-text-dark) !important;
}
/* --- Styles pour le Footer de la Boutique (Définition Finale) --- */

footer {
    background-color: var(--color-secondary) !important;
    color: var(--color-card-bg) !important;
    
    padding-top: var(--space-xl);
    padding-bottom: var(--space-md);
    margin-top: var(--space-xl) !important;
    border-top: 5px solid var(--color-primary);
    line-height: 1.8;
}

footer h5,
footer h6 {
    color: var(--color-card-bg) !important; 
    font-weight: var(--font-weight-bold) !important;
    margin-bottom: var(--space-sm);
}

footer p,
footer .list-unstyled a,
footer a {
    color: var(--color-card-bg) !important;
    transition: color 0.2s ease;
}

footer .list-unstyled a:hover,
footer a:hover {
    color: var(--color-primary) !important;
    text-decoration: underline;
}

footer .social-icons a,
footer .social-icons a i {
    color: var(--color-primary) !important; 
    font-size: 1.5rem;
    margin-right: var(--space-sm);
}

@media (min-width: 768px) {
    footer .col-md-4 {
        text-align: center;
    }
}

.footer-bottom {
    border-top: 1px solid var(--theme-text-muted);
    padding-top: var(--space-sm);
    margin-top: var(--space-lg);
    color: var(--theme-text-muted);
    font-size: 0.8rem;
}

.footer-bottom strong {
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
}
/* --- Styles pour la page de Remerciement (merci.php) --- */

.thank-you-page {
    padding-top: var(--space-xl) !important; 
    padding-bottom: var(--space-xl) !important;
}

.confirmation-section {
    background-color: var(--color-card-bg);
    border-radius: 8px; 
    box-shadow: var(--shadow-md);
    padding: var(--space-xl) !important;
    border: 1px solid var(--border-color);
}

.page-title-confirmation {
    color: var(--color-primary) !important; 
    font-weight: var(--font-weight-bold);
    font-size: 2.5rem;
    margin-bottom: var(--space-md) !important;
}

.confirmation-section .lead,
.confirmation-section p {
    color: var(--color-text-dark);
}

.confirmation-section .fa-solid {
    color: var(--color-primary); 
    margin-right: var(--space-xs);
}

.order-details-card {
    background-color: white; 
    border-radius: 8px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.card-header-title {
    color: var(--color-secondary) !important;
    font-weight: var(--font-weight-bold);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: var(--space-sm);
}

.order-details-list .list-group-item {
    border-color: var(--border-color);
    color: var(--color-text);
    padding: var(--space-xs) 0;
    background-color: transparent !important;
}

.order-details-list .list-group-item strong {
    color: var(--color-text-dark);
}

.section-subtitle {
    color: var(--color-secondary) !important;
    font-weight: var(--font-weight-semibold);
    margin-top: var(--space-lg) !important;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: var(--space-xs);
}

.cost-summary-item {
    padding: 4px 0;
}
.final-total-row {
    border-top: 2px solid var(--color-primary); 
    padding-top: var(--space-sm);
    margin-top: var(--space-sm) !important;
}

.final-total-row h4 {
    color: var(--color-primary) !important; 
    font-weight: var(--font-weight-bold);
}

.merchant-suborder-details {
    border: 1px dashed var(--color-primary);
}
.merchant-suborder-details .text-primary {
    color: var(--color-secondary) !important; 
    font-weight: var(--font-weight-bold);
}

.ordered-items-table {
    border: 1px solid var(--border-color);
    border-radius: 4px;
    overflow: hidden;
}

.ordered-items-table thead tr th {
    background-color: var(--color-secondary);
    color: white;
    border-color: var(--color-secondary);
    font-weight: var(--font-weight-bold);
}

.ordered-items-table tbody tr {
    background-color: var(--color-card-bg);
}

.ordered-items-table tbody tr:nth-child(odd) {
    background-color: var(--color-background-light);
}

.variant-details {
    font-size: 0.85rem;
    color: var(--color-text-light);
    margin-top: 4px;
}
.variant-details .fa-solid {
    color: var(--color-primary);
}


.blur-overlay-message {
    background-color: var(--color-secondary) !important;
    color: white !important;
    border: 2px solid var(--color-primary);
    font-weight: var(--font-weight-semibold);
    padding: var(--space-lg);
}

.blur-overlay-message .btn-warning {
    background-color: var(--color-primary) !important;
    color: white !important;
    border-color: var(--color-primary) !important;
}
.blur-overlay-message .btn-warning:hover {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
}
.merchant-suborder-details p.text-primary {
    color: var(--color-secondary) !important;
    font-weight: var(--font-weight-bold) !important;
}
.thank-you-page .btn-primary.btn-lg {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: white !important;
    font-weight: var(--font-weight-bold) !important;
    transition: var(--transition-ease);
}

.thank-you-page .btn-primary.btn-lg:hover {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
    color: white !important;
    transform: none;
    box-shadow: none;
}