/* 📄 /assets/css/style.css */

/* ----------------------------- */
/* 🎨 VARIABLES - MODE CLAIR PAR DÉFAUT */
/* Cette section définit toutes les variables (propriétés personnalisées CSS)
    utilisées pour la palette de couleurs, les espacements, les ombres, les tailles, etc.
    Elles sont définies dans le pseudo-sélecteur :root pour être disponibles globalement.
    C'est le point central pour modifier l'apparence de tout le site. */
/* ----------------------------- */

:root {
    /* --- Couleurs de base de la palette --- */
    --primary: #1a73e8; /* Couleur principale (ex: boutons, liens actifs, titres clés) */
    --secondary: #34a853; /* Couleur secondaire (ex: boutons au survol, éléments complémentaires) */
    --accent: #fbbc05; /* Couleur d'accentuation (ex: badges d'avertissement, étoiles) */
    --background: #f8fafc; /* Couleur de fond principale de la page (légèrement gris clair) */
    --background-soft: #ffffff; /* Couleur de fond pour les cartes, modules, zones plus claires (blanc) */
    --text-main: #202124; /* Couleur principale du texte (gris très foncé) */
    --text-muted: #5f6368; /* Couleur du texte secondaire ou estompé (gris moyen) */
    --border-color: #e0e0e0; /* Couleur générale des bordures (gris clair) */
    --badge-new-bg: var(--primary); /* Fond pour le badge "Nouveau" (ex: bleu primaire) */
    --badge-promo-bg: var(--secondary); /* Fond pour le badge "Promo" (ex: vert secondaire) */
    --badge-sold-out-bg: var(--text-muted); /* Fond pour le badge "Épuisé" (ex: gris muted) */

    --icon-liked-color: #e74c3c; /* Couleur de l'icône "aimé" (rouge) */
    --icon-liked-color-rgb: 231, 76, 60; /* RGB pour utilisation dans rgba() */
    --icon-favorited-color: var(--accent); /* Couleur de l'icône "favori" (jaune) */
    --icon-favorited-color-rgb: 251, 188, 5; /* RGB pour utilisation dans rgba() */

    --icon-button-hover-bg: var(--primary); /* Fond des boutons d'action au survol (ex: panier) */
    --icon-button-hover-color: white; /* Couleur du texte/icône des boutons d'action au survol */


    /* --- Ombres --- */
    --shadow: 0 6px 20px rgba(0, 0, 0, 0.06); /* Ombre par défaut pour les cartes et blocs */
    --shadow-hover-default: 0 8px 20px rgba(0,0,0,0.1); /* Ombre par défaut au survol des cartes */
    --shadow-avatar: 0 4px 10px rgba(0,0,0,0.1); /* Ombre spécifique pour les avatars */

    /* --- Couleurs de statut / messages --- */
    --success: #34a853; /* Couleur pour les messages de succès (vert) */
    --error: #ea4335; /* Couleur pour les messages d'erreur (rouge) */

    /* --- Couleurs des états de survol spécifiques --- */
    --error-hover: #c0392b; /* Couleur du bouton d'erreur au survol (rouge foncé) */
    --primary-hover: #1562cc; /* Couleur du bouton primaire au survol (bleu foncé) */
    --secondary-hover: #2e944a; /* Couleur du bouton secondaire au survol (vert foncé) */
    --success-hover: #218838; /* Couleur du bouton de succès au survol (vert foncé) */

    /* --- Couleurs de fonds spéciaux / messages --- */
    --error-soft-background: #fff5f5; /* Fond doux pour les alertes ou messages d'erreur */
    --message-sent-bg-light: #4c0bc5; /* Couleur de fond des messages envoyés (en mode clair) */
    --attachment-bg: rgba(0,0,0,0.05); /* Fond transparent pour les pièces jointes */

    /* --- Couleurs des badges --- */
    --badge-info-bg: var(--primary); /* Fond des badges d'information (par défaut, couleur primaire) */
    --badge-warning-bg: var(--accent); /* Fond des badges d'avertissement (couleur accent) */
    --badge-danger-bg: var(--error); /* Fond des badges de danger (couleur erreur) */
    --badge-secondary-bg: var(--secondary); /* Fond des badges secondaires (couleur secondaire) */

    /* --- Couleurs des messages spécifiques (admin/utilisateur) --- */
    --admin-msg-bg-light: #e7f1ff; /* Fond des messages de l'administrateur (mode clair) */
    --user-msg-bg-light: #f9f9f9; /* Fond des messages de l'utilisateur (mode clair) */

    /* --- Couleurs des boutons de connexion sociale --- */
    --social-google-bg: #db4437; /* Fond du bouton Google */
    --social-google-hover-bg: #c1351d; /* Fond du bouton Google au survol */
    --social-facebook-bg: #3b5998; /* Fond du bouton Facebook */

    /* --- Couleurs des champs de formulaire de validation --- */
    --form-invalid-bg: #ffecec; /* Fond d'un champ de formulaire invalide */
    --form-valid-bg: #eafff3; /* Fond d'un champ de formulaire valide */

    /* --- Couleurs de texte additionnelles / utilitaires --- */
    --text-info: #17a2b8; /* Couleur pour les textes d'information (si non couvert par primary/muted) */
    --text-lighter-muted: #94a3b8; /* Une version légèrement plus claire du texte muted, pour certains contextes */

    /* --- Couleurs d'overlay / floutage --- */
    --blur-overlay-bg: rgba(255, 230, 200, 0.9); /* Fond de l'overlay de contenu flouté */
    --blur-overlay-border: #ffc107; /* Bordure de l'overlay de contenu flouté */
    --blur-overlay-text: #6b4200; /* Couleur du texte de l'overlay de contenu flouté */

    /* --- Couleurs des alertes (détail des fonds/textes/bordures) --- */
    --info-bg-light: #e7f3fe; /* Fond de l'alerte 'info' (mode clair) */
    --info-color-light: #084298; /* Couleur du texte de l'alerte 'info' (mode clair) */
    --info-border-light: #b6d4fe; /* Bordure de l'alerte 'info' (mode clair) */
    --alert-success-bg-light: #d1f7d6; /* Fond de l'alerte 'succès' (mode clair) */
    --alert-success-color-light: #0b6e0b; /* Texte de l'alerte 'succès' (mode clair) */
    --alert-success-border-light: #9be29f; /* Bordure de l'alerte 'succès' (mode clair) */
    --alert-danger-bg-light: #f8d7da; /* Fond de l'alerte 'danger' (mode clair) */
    --alert-danger-color-light: #8a1f2b; /* Texte de l'alerte 'danger' (mode clair) */
    --alert-danger-border-light: #e4a4aa; /* Bordure de l'alerte 'danger' (mode clair) */
    --alert-warning-bg-light: #fff3cd; /* Fond de l'alerte 'warning' (mode clair) */
    --alert-warning-color-light: #856404; /* Texte de l'alerte 'warning' (mode clair) */
    --alert-warning-border-light: #ffeeba; /* Bordure de l'alerte 'warning' (mode clair) */

    /* --- Espacements utilitaires --- */
    --padding-ms-2: 0.75rem; /* Marge/padding left de 0.75rem (utilitaire ms-2) */
    --padding-me-2: 0.75rem; /* Marge/padding right de 0.75rem (utilitaire me-2) */

    /* --- Couleurs de 'highlight' pour pricing --- */
    --highlight: #fbbc05; /* Couleur spécifique pour le badge "Populaire" (peut être accent) */
    --card-popular-border: 2px solid var(--highlight); /* Bordure de la carte populaire */
    --card-popular-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Ombre de la carte populaire */

    /* --- Variables pour les effets et composants (déjà là, mais pour référence) --- */
    --card-hover-lift: -4px; /* Déplacement vertical au survol des cartes générales */
    --button-active-scale: 0.97; /* Effet de rétrécissement au clic du bouton */
    --button-hover-scale: 1.05; /* Effet d'agrandissement au survol du bouton */
    --button-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre des boutons */
    --button-hover-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Ombre des boutons au survol */

    /* --- Variables spécifiques aux composants (cohérence avec components.css et autres) --- */
    --card-hover-lift-small: -3px; /* Soulèvement pour de petites cartes/liens rapides */
    --card-hover-lift-medium: -5px; /* Soulèvement de moyenne intensité */
    --card-hover-lift-product: -8px; /* Soulèvement prononcé pour les cartes produits */
    --product-card-hover-shadow: 0 10px 40px rgba(0,0,0,0.12); /* Ombre spécifique pour cartes produits au survol */
    --button-hover-scale-large: 1.15; /* Agrandissement plus grand pour certains boutons au survol */
    --button-hover-count-scale: 1.2; /* Agrandissement pour les compteurs d'icônes */
    --product-price-color: var(--primary); /* Couleur par défaut des prix */
    --product-promo-color: var(--error); /* Couleur par défaut pour les promotions */

    /* --- Variables pour les grilles et layouts --- */
    --grid-gap-sm: 1rem; /* Petit espace (16px) */
    --grid-gap-md: 1.5rem; /* Espace moyen (24px) */
    --grid-gap-lg: 2rem; /* Grand espace (32px) */
    --container-max-width-default: 1200px; /* Largeur max par défaut des conteneurs de page */
    --container-max-width-lg: 1300px; /* Grande largeur max pour certains conteneurs */
    --container-max-width-sm: 700px; /* Largeur max pour les conteneurs de taille moyenne (ex: certains formulaires) */
    --container-padding-default: 1rem; /* Padding par défaut des conteneurs */
    --section-title-font-size-default: 1.5rem; /* Taille de police par défaut pour les titres de section */
    --section-title-font-size-lg: 1.7rem; /* Grande taille de police pour les titres de section */
    --container-max-width-xs: 480px; /* Largeur max pour les très petits conteneurs (ex: formulaires de login) */
}


/* 🌙 Mode sombre activable */
/* Cette section redéfinit les variables du dessus pour les adapter au mode sombre.
    La classe .dark-theme doit être appliquée à l'élément <body> ou <html> via JavaScript. */
.dark-theme {
    /* --- Couleurs de base adaptées au mode sombre --- */
    --primary: #00bfff; /* Bleu ciel */
    --secondary: #00e0b8; /* Vert cyan */
    --accent: #fbbc05; /* Jaune (peut rester le même ou être légèrement ajusté) */
    --background: #0f172a; /* Fond principal sombre (bleu nuit) */
    --background-soft: #1e293b; /* Fond des cartes/modules sombre (gris-bleu) */
    --text-main: #f1f5f9; /* Couleur principale du texte clair */
    --text-muted: #94a3b8; /* Couleur du texte estompé clair */
    --border-color: #2f455f; /* Bordures sombres */
    --badge-new-bg: var(--primary); /* "Nouveau" peut rester primaire ou s'adapter si besoin */
    --badge-promo-bg: var(--secondary); /* "Promo" peut rester secondaire ou s'adapter */
    --badge-sold-out-bg: var(--text-muted); /* "Épuisé" peut rester muted */

    --icon-liked-color: #c0392b; /* Rouge foncé en mode sombre pour "aimé" */
    --icon-liked-color-rgb: 192, 57, 43; /* Adapter pour le mode sombre */
    --icon-favorited-color: var(--accent); /* Jaune en mode sombre pour "favori" */
    --icon-favorited-color-rgb: 251, 188, 5; /* Peut rester le même */

    --icon-button-hover-bg: var(--primary); /* Fond des boutons d'action au survol */
    --icon-button-hover-color: white; /* Couleur du texte/icône des boutons d'action au survol */


    /* --- Ombres adaptées --- */
    --shadow: 0 8px 24px rgba(0, 0, 0, 0.2); /* Ombre plus prononcée en mode sombre */
    --shadow-hover-default: 0 10px 28px rgba(0, 0, 0, 0.4); /* Ombre au survol plus prononcée */
    --shadow-avatar: 0 4px 10px rgba(0,0,0,0.5); /* Ombre d'avatar plus prononcée */

    /* --- Couleurs de statut / messages adaptées --- */
    --success: #00e68c; /* Vert succès adapté */
    --error: #ff4c61; /* Rouge erreur adapté */

    /* --- Couleurs des états de survol spécifiques adaptées --- */
    --error-hover: #9b2424; /* Rouge erreur au survol adapté */
    --primary-hover: #0099cc; /* Bleu primaire au survol adapté */
    --secondary-hover: #00b396; /* Vert secondaire au survol adapté */
    --success-hover: #1e7e34; /* Vert succès au survol adapté */

    /* --- Couleurs de fonds spéciaux / messages adaptées --- */
    --error-soft-background: #2a0f0f; /* Fond d'erreur doux adapté */
    --message-sent-bg-dark: #602fc4; /* Fond des messages envoyés (mode sombre) */
    --attachment-bg: rgba(255,255,255,0.05); /* Fond transparent pour pièces jointes adapté */

    /* --- Couleurs des messages spécifiques (admin/utilisateur) adaptées --- */
    --admin-msg-bg-dark: #1e2d44; /* Fond messages admin adapté */
    --user-msg-bg-dark: #242e3e; /* Fond messages utilisateur adapté */

    /* --- Couleurs des boutons de connexion sociale adaptées --- */
    --social-google-bg: #e74c3c; /* Fond Google adapté */
    --social-google-hover-bg: #d62c1a; /* Fond Google au survol adapté */
    --social-facebook-bg: #4a69ad; /* Fond Facebook adapté */

    /* --- Couleurs des champs de formulaire de validation adaptées --- */
    --form-invalid-bg: #4a2d2d; /* Fond invalide adapté */
    --form-valid-bg: #2d4a2d; /* Fond valide adapté */

    /* --- Couleurs d'overlay / floutage adaptées --- */
    --blur-overlay-bg: rgba(60, 40, 10, 0.95); /* Fond overlay adapté */
    --blur-overlay-border: #cc9e1a; /* Bordure overlay adaptée */
    --blur-overlay-text: #ffc; /* Texte overlay adapté */

    /* --- Couleurs des alertes (détail des fonds/textes/bordures) adaptées --- */
    --info-bg-dark: #0d2b46; /* Fond alerte info adapté */
    --info-color-dark: #cde8ff; /* Texte alerte info adapté */
    --info-border-dark: #195b8d; /* Bordure alerte info adaptée */
    --alert-success-bg-dark: #183c20; /* Fond alerte succès adapté */
    --alert-success-color-dark: #b8f9c2; /* Texte alerte succès adapté */
    --alert-success-border-dark: #2c9250; /* Bordure alerte succès adaptée */
    --alert-danger-bg-dark: #451d24; /* Fond alerte danger adapté */
    --alert-danger-color-dark: #ffcdd2; /* Texte alerte danger adapté */
    --alert-danger-border-dark: #c35860; /* Bordure alerte danger adaptée */
    --alert-warning-bg-dark: #433812; /* Fond alerte warning adapté */
    --alert-warning-color-dark: #ffe58f; /* Texte alerte warning adapté */
    --alert-warning-border-dark: #bb9a29; /* Bordure alerte warning adaptée */

    /* --- Couleurs de 'highlight' adaptées --- */
    --highlight: #fbbc05; /* Highlight peut rester le même */
    --card-popular-border: 2px solid var(--highlight); /* Bordure populaire adaptée */
    --card-popular-shadow: 0 0 15px rgba(0, 0, 0, 0.4); /* Ombre populaire adaptée */

    /* --- Ajustements des variables pour le mode sombre (effets) --- */
    --card-hover-lift: -6px; /* Soulèvement carte générale adapté */
    --button-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); /* Ombre bouton adaptée */
    --button-hover-shadow: 0 6px 16px rgba(0, 0, 0, 0.4); /* Ombre bouton survol adaptée */

    --card-hover-lift-small: -4px; /* Soulèvement petite carte adapté */
    --card-hover-lift-medium: -7px; /* Soulèvement moyenne intensité adapté */
    --card-hover-lift-product: -10px; /* Soulèvement carte produit adapté */
    --product-card-hover-shadow: 0 12px 48px rgba(0,0,0,0.3); /* Ombre carte produit adaptée */
    --button-hover-scale-large: 1.18; /* Agrandissement bouton adapté */
    --button-hover-count-scale: 1.2; /* Compteur icônes adapté (pas de changement de scale) */

    /* --- Couleurs de tableau adaptées --- */
    --table-header-dark-bg: var(--background); /* Fond en-tête tableau adapté */
    --table-header-dark-text: var(--text-main); /* Texte en-tête tableau adapté */
    --table-cell-dark-text: var(--text-main); /* Texte cellules tableau adapté */
    --table-border-dark: var(--border-color); /* Bordure tableau adaptée */
    --product-price-color: var(--primary); /* Couleur prix produit adaptée */
    --product-promo-color: var(--error); /* Couleur promo produit adaptée */
}

/* --- Utilitaires de marge/padding (définis ici si non dans un fichier utilitaire global) --- */
.ms-2 { margin-right: var(--padding-ms-2) !important; } /* Utilité: margin-right: 0.75rem */
.me-2 { margin-left: var(--padding-me-2) !important; } /* Utilité: margin-left: 0.75rem */

/* ----------------------------- */
/* 🛠️ STYLE GÉNÉRAL */
/* Cette section définit les styles CSS de base appliqués à l'ensemble du site.
    Ces règles sont fondamentales et s'appliquent à des éléments HTML génériques. */
/* ----------------------------- */

html, body {
    height: 100%; /* S'assure que les éléments HTML et BODY prennent toute la hauteur de la fenêtre */
    width: 100%; /* S'assure qu'ils prennent toute la largeur */
    margin: 0; /* Supprime les marges par défaut du navigateur */
    padding: 0; /* Supprime les paddings par défaut du navigateur */
    box-sizing: border-box; /* S'assure que padding et border sont inclus dans la taille totale */
    overflow-x: hidden;
}

body {
    background: var(--background); /* Applique la couleur de fond principale (mode clair par défaut) */
    color: var(--text-main); /* Applique la couleur de texte principale (mode clair par default) */
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif; /* Définit la police de caractères principale */
    font-size: 17px; /* Définit la taille de police de base */
    line-height: 1.8; /* Définit la hauteur de ligne pour une meilleure lisibilité */
    transition: background 0.3s ease, color 0.3s ease; /* Transition douce pour le changement de mode clair/sombre */
}

/* Styles pour les titres (h1, h2, h3) */
h1, h2, h3 {
    font-weight: 600; /* Poids de police semi-gras */
    line-height: 1.4; /* Hauteur de ligne légèrement plus serrée pour les titres */
    color: var(--text-main); /* Couleur de texte principale pour les titres */
}

/* Styles pour les paragraphes */
p {
    color: var(--text-muted); /* Couleur de texte secondaire pour les paragraphes */
}

/* Styles pour les liens hypertexte */
a {
    color: var(--primary); /* Couleur principale pour les liens */
    text-decoration: none; /* Supprime le soulignement par défaut des liens */
}
a:hover {
    color: var(--secondary); /* Change la couleur des liens au survol */
}

/* ----------------------------- */
/* 🛒 BOUTONS */
/* Cette section définit les styles de base pour tous les boutons du site. */
/* ----------------------------- */

/* Styles pour les balises <button> et les éléments avec la classe .btn */
button, .btn {
    background: var(--primary); /* Couleur de fond primaire */
    color: #fff; /* Couleur du texte blanc */
    padding: 14px 24px; /* Padding interne */
    border: none; /* Pas de bordure par défaut */
    border-radius: 12px; /* Coins arrondis */
    font-weight: 600; /* Poids de police semi-gras */
    cursor: pointer; /* Curseur pointer pour indiquer qu'ils sont cliquables */
    transition: transform 0.1s ease, background 0.3s ease, box-shadow 0.3s ease; /* Transitions douces pour les effets */
    box-shadow: var(--button-shadow); /* Ombre par défaut */
}
/* Style au survol des boutons */
button:hover, .btn:hover {
    background: var(--secondary); /* Change la couleur de fond au survol */
    box-shadow: var(--button-hover-shadow); /* Change l'ombre au survol */
}
/* Style au clic des boutons */
button:active, .btn:active {
    transform: scale(var(--button-active-scale)); /* Réduit légèrement la taille au clic */
}

/* Styles pour les boutons avec contour */
.btn-outline {
    background: transparent; /* Fond transparent */
    border: 2px solid var(--primary); /* Bordure colorée avec la couleur primaire */
    color: var(--primary); /* Texte coloré avec la couleur primaire */
}
/* Style au survol des boutons avec contour */
.btn-outline:hover {
    background: var(--primary); /* Fond primaire au survol */
    color: white; /* Texte blanc au survol */
}

/* ----------------------------- */
/* 📦 BLOCS ET FORMULAIRES */
/* Cette section définit les styles de base pour les blocs de contenu (cartes)
    et les éléments de formulaire. */
/* ----------------------------- */

.card { /* Style général pour les blocs type 'card' (ex: petits widgets, résumés) */
    background: var(--background-soft); /* Fond doux (blanc) */
    border-radius: 16px; /* Coins arrondis */
    box-shadow: var(--shadow); /* Ombre par défaut */
    padding: 25px; /* Padding interne */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Transitions douces pour les effets */
}
.card:hover {
    transform: translateY(var(--card-hover-lift)); /* Soulève légèrement la carte au survol */
}

/* Styles pour les champs de saisie, les zones de texte et les listes déroulantes */
input, textarea, select {
    background: var(--background); /* Fond de champ (gris clair) */
    color: var(--text-main); /* Couleur du texte dans le champ */
    border: 1px solid var(--border-color); /* Bordure du champ */
    border-radius: 10px; /* Coins arrondis du champ */
    padding: 12px; /* Padding interne */
    box-sizing: border-box; /* Assure que padding et border sont inclus dans la largeur */
    font-size: 1rem; /* Taille de police par défaut */
    transition: border-color 0.2s ease, box-shadow 0.2s ease; /* Transition pour le focus */
}
/* Style au focus des champs */
input:focus, textarea:focus, select:focus {
    border-color: var(--primary); /* Bordure primaire au focus */
    box-shadow: 0 0 0 2px rgba(0, 191, 255, 0.3); /* Ombre autour du champ au focus */
    outline: none; /* Supprime l'outline par défaut du navigateur */
}

/* ----------------------------- */
/* ⚠️ MESSAGES / ALERTES */
/* Cette section définit les styles de base pour les messages d'alerte. */
/* ----------------------------- */

.alert { /* Style général pour toutes les alertes */
    padding: 1rem; /* Padding interne */
    border-radius: 0.5rem; /* Coins arrondis */
    margin: 1rem 0; /* Marge verticale */
    font-weight: 500; /* Poids de police moyen */
}

/* Style pour les alertes de succès */
.alert-success {
    background: var(--success); /* Fond vert */
    color: white; /* Texte blanc */
}

/* Style pour les alertes d'erreur */
.alert-error {
    background: var(--error); /* Fond rouge */
    color: white; /* Texte blanc */
}

/* Style pour les alertes d'avertissement */
.alert-warning {
    background-color: var(--accent); /* Fond couleur d'accent (jaune) */
    color: var(--text-main); /* Texte principal pour un bon contraste */
}


/* ----------------------------- */
/* 🧱 STRUCTURES DE LAYOUT GÉNÉRALES */
/* Cette section définit les classes de mise en page réutilisables. */
/* ----------------------------- */

.container { /* Conteneur de largeur max par défaut, centré horizontalement */
    max-width: var(--container-max-width-default); /* Largeur max par défaut (1200px) */
    margin: 0 auto; /* Centrage horizontal */
    padding: var(--container-padding-default) 1rem; /* Padding vertical par défaut, horizontal de 1rem */
}

/* Conteneur de plus grande largeur */
.container-lg {
    max-width: var(--container-max-width-lg); /* Largeur max plus grande (1300px) */
    margin: 0 auto;
    padding: var(--container-padding-default) 1.5rem; /* Padding horizontal de 1.5rem */
}

/* Conteneur pour les sections de page principales (ex: formulaires, détails) */
.page-section-wrapper {
    background: var(--background-soft); /* Fond doux (blanc) */
    border-radius: 16px; /* Coins arrondis */
    box-shadow: var(--shadow); /* Ombre par défaut */
    padding: 25px; /* Padding interne */
    margin: 40px auto; /* Centré horizontalement avec marges verticales */
    max-width: var(--container-max-width-default); /* Largeur max par défaut */
}

/* Styles pour les titres de section flexibles (avec badge de compte, etc.) */
.section-title-flex {
    display: flex; /* Utilise Flexbox pour l'alignement */
    justify-content: space-between; /* Espacement entre le titre et le badge */
    align-items: center; /* Alignement vertical centré */
    font-size: var(--section-title-font-size-default); /* Taille de police par défaut */
    font-weight: bold; /* Gras */
    color: var(--primary); /* Couleur primaire pour le titre */
    margin-bottom: 1.5rem; /* Marge en bas */
    border-bottom: 2px solid var(--border-color); /* Bordure inférieure */
    padding-bottom: 0.5rem; /* Padding sous le texte avant la bordure */
}
/* Style pour le badge de compte dans les titres de section */
.section-title-flex .total-products {
    font-size: 0.9rem;
    background: var(--background-soft);
    padding: 0.4rem 0.8rem;
    border-radius: 1rem; /* Forme de pilule */
    color: var(--text-muted);
}

/* Grille générale pour l'affichage des produits */
.products-grid {
    display: grid; /* Active CSS Grid */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Colonnes responsives avec largeur min de 250px */
    gap: var(--grid-gap-md); /* Espace entre les éléments de la grille */
    margin-bottom: 2rem; /* Marge en bas de la grille */
}

/* Grille générale pour l'affichage des boutiques */
.store-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* Colonnes responsives avec largeur min de 280px */
    gap: var(--grid-gap-lg); /* Grand espace entre les éléments de la grille */
    margin-bottom: 2rem;
}

/* 📱 RESPONSIVE (Général) */
/* Cette section contient les ajustements CSS généraux pour la réactivité sur mobile. */
/* ----------------------------- */

@media (max-width: 768px) {
    /* Réduit la taille de police du corps sur les écrans plus petits */
    body {
        font-size: 16px;
    }
    /* Réduit la taille de police des boutons sur les écrans plus petits */
    button, .btn {
        font-size: 1rem;
    }
    /* Ajustement du wrapper de section pour mobile */
    .page-section-wrapper {
        margin: 20px 10px; /* Marges réduites sur mobile */
        padding: 15px; /* Padding réduit sur mobile */
        border-radius: 12px; /* Coins arrondis légèrement réduits */
        max-width: none; /* Prend toute la largeur disponible sur mobile */
    }
    /* Réduit le gap des grilles sur mobile */
    .products-grid,
    .store-cards-grid {
        gap: var(--grid-gap-sm);
    }
}

/* ========================
   🎨 STRUCTURE GLOBALE HEADER
   ======================== */

.soguify-header {
    background: var(--background-soft);
    display: flex;
    justify-content: space-between; /* Pour espacer les éléments */
    align-items: center;
    padding: 1px 20px;
    box-shadow: var(--shadow);
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* ------------------------
   Styles des composants
   ------------------------ */

/* Style du logo */
.soguify-header .logo {
    font-family: "Caveat", cursive;
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
    text-transform: none;
}
.soguify-header .logo:hover {
    color: var(--secondary);
}

/* Style de la barre de recherche */
.soguify-header .search-form {
    display: flex;
    max-width: 100%;
    flex: 1;
    margin: 0 20px;
    background: var(--background);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow);
}
.soguify-header .search-form input[type="text"] {
    border: none;
    background: transparent;
    padding: 4px 14px;
    flex: 1;
    font-size: 1rem;
    color: var(--text-main);
}
.soguify-header .search-form button {
    background: var(--primary);
    color: white;
    border: none;
    padding: 0 16px;
    font-size: 1.1rem;
}

/* Style de la section droite du header (icônes, avatar) */
.soguify-header .header-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Style des boutons d'icônes */
.icon-btn {
    font-size: 1.2rem;
    color: var(--text-main);
    position: relative;
}
.icon-btn:hover {
    color: var(--primary);
}
.icon-btn .badge {
    position: absolute;
    top: -6px;
    right: -10px;
    background: var(--primary);
    color: #fff;
    font-size: 0.65rem;
    border-radius: 50%;
    padding: 2px 5px;
}

/* Style de l'avatar */
.avatar-header {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
}

/* Style du bouton de bascule du mode nuit */
#theme-toggle {
    font-size: 1.2rem;
    background: none;
    border: none;
    cursor: pointer;
}

/* Style du menu déroulant de l'avatar */
.dropdown-icon {
    position: relative;
}
.dropdown-content {
    display: none;
    position: absolute;
    top: 120%;
    right: 0;
    background: var(--background);
    color: var(--text-main);
    border-radius: 8px;
    box-shadow: var(--shadow);
    min-width: 180px;
    overflow: hidden;
    z-index: 999;
}
.dropdown-icon:hover .dropdown-content {
    display: block;
}
.dropdown-content a {
    display: block;
    padding: 10px 14px;
    font-size: 0.95rem;
    color: var(--text-main);
    text-decoration: none;
}
.dropdown-content a:hover {
    background: var(--background-soft);
}
.dropdown-label {
    display: block;
    font-weight: bold;
    padding: 10px 14px;
    font-size: 0.9rem;
    background: var(--background-soft);
    border-bottom: 1px solid var(--border-color);
}

/* Style du menu hamburger */
.hamburger-menu {
    display: none;
    background: none;
    border: none;
    font-size: 1.6rem;
    color: var(--text-main);
    cursor: pointer;
}
.hamburger-menu:hover {
    color: var(--primary);
}
.hamburger-menu,
.hamburger-menu:focus,
.hamburger-menu:active {
    outline: none;
    box-shadow: none;
    background: transparent;
    color: var(--text-main);
}
.hamburger-menu i,
.hamburger-menu:focus i,
.hamburger-menu:active i {
    color: var(--text-main);
}

/* Style du menu mobile */
.mobile-nav {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 58px;
    left: 10px; /* Aligné à gauche pour correspondre au menu hamburger */
    background: var(--background);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow);
    padding: 12px 15px;
    z-index: 9999;
    min-width: 200px;
}
.mobile-nav.active {
    display: flex;
}
.mobile-nav a {
    padding: 10px 0;
    font-weight: bold;
    font-size: 0.95rem;
    color: var(--text-main);
    text-decoration: none;
    border-bottom: 1px solid var(--border-color);
}
.mobile-nav a:hover {
    background: var(--background-soft);
}
.mobile-nav .dropdown-label {
    font-size: 0.9rem;
    font-weight: bold;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
    color: var(--primary);
}

/* ------------------------
   📱 RÈGLES RESPONSIVES
   ------------------------ */
@media (max-width: 767px) {
    /* Cache la barre de recherche sur mobile */
    .soguify-header .search-form {
        display: none !important;
    }

    /* Le header principal devient un conteneur simple */
    .soguify-header {
        position: relative !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 10px 20px !important;
        flex-wrap: nowrap !important;
    }

    /* Le logo prend tout l'espace disponible au centre */
    .soguify-header .header-left {
        order: initial !important;
        flex-grow: 1 !important;
        text-align: center !important;
    }

    /* Le hamburger et le panier sont positionnés sur les côtés */
    .hamburger-menu,
    .soguify-header .header-right {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 1000 !important;
    }

    /* 1. Nouveau positionnement pour le menu/avatar */
    .hamburger-menu {
        left: 20px !important; 
        display: block !important;
    }

    /* 2. Suppression de l'effet de sélection (contour/box-shadow) */
    .hamburger-menu:hover,
    .hamburger-menu:focus,
    .hamburger-menu:active {
        outline: none !important;
        box-shadow: none !important;
        border: none !important;
        background: none !important;
        color: var(--text-main) !important;
    }

    /* 3. Déplacement de l'icône du panier vers la gauche */
    .soguify-header .header-right {
        right: 40px !important; /* Valeur ajustée */
        display: flex !important;
        align-items: center !important;
    }
    .soguify-header .header-right a[href*="cart"] {
        display: inline-block !important;
    }

    /* Masque le reste de la navigation et le champ de recherche */
    .soguify-header .header-right .icon-btn,
    .soguify-header .header-right .dropdown-icon {
        display: none !important;
    }
}

@media (min-width: 768px) {
    /* Cache le menu hamburger et le menu mobile sur desktop */
    .hamburger-menu,
    .mobile-nav {
        display: none !important;
    }
    /* S'assurer que les éléments masqués sur mobile sont visibles sur desktop */
    .soguify-header .header-right .icon-btn,
    .soguify-header .header-right .dropdown-icon {
        display: inline-block !important;
    }
}



/* ========================
    🎨 STRUCTURE GLOBALE FOOTER
    Cette section définit la structure et le style du pied de page du site.
    ======================== */

.soguify-footer {
    margin-top: 40px; /* Marge supérieure pour espacer du contenu */
    padding: 20px 0; /* Padding interne vertical */
    background: var(--background-soft); /* Fond doux (blanc) */
    border-top: 1px solid var(--border-color); /* Bordure supérieure de séparation */
    text-align: center; /* Centre le contenu en ligne à l'intérieur du footer */
    font-size: 0.9rem; /* Taille de police */

    /* --- Styles pour la pleine largeur et le centrage --- */
    display: block; /* S'assure que le footer se comporte comme un bloc indépendant */
    width: 100%; /* Garantit qu'il prend 100% de la largeur disponible */
    box-sizing: border-box; /* Inclut le padding et la bordure dans la largeur totale */
    margin-left: auto; /* Centre le bloc horizontalement */
    margin-right: auto; /* Centre le bloc horizontalement */
}
/* Styles pour les paragraphes dans le footer */
.soguify-footer p {
    color: var(--text-muted); /* Couleur du texte estompé */
    margin: 5px 0; /* Marge verticale */
}
/* Styles pour les liens dans le footer */
.soguify-footer a {
    color: var(--text-muted); /* Couleur du texte estompé */
    font-size: 0.85rem; /* Taille de police plus petite */
    text-decoration: none; /* Supprime le soulignement */
    margin: 0 5px; /* Marge horizontale */
}
.soguify-footer a:hover {
    color: var(--primary); /* Change la couleur au survol */
}


/* 🛑 POPUPS */
/* Cette section définit les styles de base pour les fenêtres modales (popups). */
/* ----------------------------- */

/* Overlay qui couvre l'écran derrière la popup */
.popup-overlay {
    display: none; /* Masqué par défaut (géré par JS) */
    position: fixed; /* Position fixe par rapport à la fenêtre d'affichage */
    top: 0; left: 0; right: 0; bottom: 0; /* Prend toute la taille de l'écran */
    background-color: rgba(0,0,0,0.5); /* Fond semi-transparent */
    justify-content: center; /* Centre la popup horizontalement (Flexbox) */
    align-items: center; /* Centre la popup verticalement (Flexbox) */
    z-index: 9999; /* Au-dessus de tout le reste */
}

/* La boîte de la popup elle-même */
.popup-box {
    background: var(--background-soft); /* Fond doux (blanc) */
    color: var(--text-main); /* Couleur du texte principal */
    padding: 20px; /* Padding interne */
    border-radius: 12px; /* Coins arrondis */
    max-width: 320px; /* Largeur maximale */
    text-align: center; /* Centre le texte */
    box-shadow: var(--shadow); /* Ombre */
}

/* Conteneur pour les boutons d'action dans la popup */
.popup-actions {
    display: flex; /* Utilise Flexbox */
    flex-direction: column; /* Boutons empilés verticalement */
    gap: 10px; /* Espace entre les boutons */
    margin-top: 15px; /* Marge supérieure */
}

/* 📞 Style spécifique pour la popup de contact (si différente de popup-box) */
.contact-popup {
    display: none; /* Masqué par défaut */
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0,0,0,0.5);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* ---------------------------------------------------- */
/* 🐛 FIX: CORRECTION DES MESSAGES FLASH (TOASTIFY-JS) */
/* ---------------------------------------------------- */

/* Ceci assure que le style en ligne du Toast (appliqué par JS) a la priorité. */
/* Le sélecteur .toastify est le conteneur par défaut de la librairie. */
.toastify {
    /* Assurez-vous que la couleur de fond n'est PAS définie ici avec !important */
    /* Si une autre règle force le vert, retirez-la ou forcez ici. */
    
    /* Si vous constatez une persistance du vert, AJOUTEZ TEMPORAIREMENT cette ligne : */
    background-color: var(--primary) !important; 
    /* Si ce fix fonctionne, vous pouvez retirer cette ligne, mais elle est le dernier recours */
}

/* Retirez la couleur de fond fixe pour les messages de succès dans le CSS (si elle s'applique aux toasts) */
.alert-success,
.toastify[data-toastify-type="success"] { /* Sélecteur hypothétique */
    /* Laissez la couleur vide pour que Toastify.js la gère via l'API style: { background: ... } */
    background: initial !important; 
}