/* =====================================================
   FONT AWESOME CUSTOM - Savoor.fr
   Styles personnalisés pour harmoniser avec le design
   Version: 1.0.0
   Date: 2025-11-23
   ===================================================== */

/* =====================================================
   VARIABLES COULEURS SAVOOR
   ===================================================== */
:root {
    /* Couleurs principales du thème Savoor */
    --savoor-coral: #ff6b6b;
    --savoor-red: #e74c3c;
    --savoor-dark: #2c3e50;
    --savoor-light: #ecf0f1;
    --savoor-text: #333;
    --savoor-muted: #95a5a6;

    /* Couleurs d'icônes par défaut */
    --icon-default: currentColor;
    --icon-primary: var(--savoor-coral);
    --icon-accent: var(--savoor-red);
}

/* =====================================================
   TAILLES D'ICÔNES STANDARDISÉES
   ===================================================== */
.icon-xs {
    font-size: 0.75rem;  /* 12px */
}

.icon-sm {
    font-size: 1rem;     /* 16px */
}

.icon-md {
    font-size: 1.25rem;  /* 20px */
}

.icon-lg {
    font-size: 1.5rem;   /* 24px */
}

.icon-xl {
    font-size: 2rem;     /* 32px */
}

.icon-2xl {
    font-size: 2.5rem;   /* 40px */
}

/* =====================================================
   ESPACEMENTS
   ===================================================== */

/* Marges droites */
.icon-mr-1 { margin-right: 0.25rem; }
.icon-mr-2 { margin-right: 0.5rem; }
.icon-mr-3 { margin-right: 0.75rem; }
.icon-mr-4 { margin-right: 1rem; }

/* Marges gauches */
.icon-ml-1 { margin-left: 0.25rem; }
.icon-ml-2 { margin-left: 0.5rem; }
.icon-ml-3 { margin-left: 0.75rem; }
.icon-ml-4 { margin-left: 1rem; }

/* Marges verticales */
.icon-mb-1 { margin-bottom: 0.25rem; }
.icon-mb-2 { margin-bottom: 0.5rem; }
.icon-mb-3 { margin-bottom: 0.75rem; }

/* =====================================================
   COULEURS CONTEXTUELLES
   ===================================================== */
.icon-primary {
    color: var(--icon-primary);
}

.icon-accent {
    color: var(--icon-accent);
}

.icon-muted {
    color: var(--savoor-muted);
    opacity: 0.7;
}

.icon-dark {
    color: var(--savoor-dark);
}

.icon-light {
    color: var(--savoor-light);
}

.icon-success {
    color: #28a745;
}

/* =====================================================
   STYLES SPÉCIFIQUES PAR CONTEXTE
   ===================================================== */

/* Menu navigation - Harmoniser avec le design existant */
.nav-menu-item i,
.nav-link i {
    font-size: 1.125rem;
    margin-right: 0.5rem;
    vertical-align: middle;
    color: var(--savoor-coral);
    transition: color 0.2s ease;
}

.nav-menu-item:hover i,
.nav-link:hover i {
    color: var(--savoor-red);
}

/* Cartes profil - Dashboard utilisateur */
/* MODE CLAIR par défaut : icônes gris foncé pour visibilité */
.stat-card .stat-icon i,
.stat-card .stat-icon i.icon-primary,
.profile-stat-icon i,
.profile-stat-icon i.icon-primary,
body.light-mode .stat-card .stat-icon i,
body.light-mode .stat-card .stat-icon i.icon-primary,
body.light-mode .profile-stat-icon i,
body.light-mode .profile-stat-icon i.icon-primary {
    font-size: 2rem;
    color: #2c3e50 !important;  /* Gris foncé Savoor - visible sur fond clair */
    display: block;
    margin-bottom: 0.5rem;
}


/* Classes de couleur spécifiques pour cartes profil */
.stat-card .stat-icon i.icon-success,
.profile-stat-icon i.icon-success {
    color: #27ae60 !important;  /* Vert pour check/succès en mode clair */
}

.stat-card .stat-icon i.icon-accent,
.profile-stat-icon i.icon-accent {
    color: #e74c3c !important;  /* Rouge pour alertes en mode clair */
}

/* Icônes dans les titres de sections */
.section-title i,
h1 i,
h2 i,
h3 i {
    margin-right: 0.5rem;
    color: var(--savoor-coral);
}

/* Boutons avec icônes */
.btn i {
    margin-right: 0rem; /* 0.375 */
    vertical-align: middle;
}

.btn-icon-only i {
    margin: 0;
}

/* =====================================================
   PSEUDO-ÉLÉMENTS (Pour remplacer emojis CSS)
   ===================================================== */

/* Conseils et astuces */
.section-conseils::before,
.astuce-chef::before,
.conseil-item::before {
    font-family: "Font Awesome 7 Pro";
    font-weight: 900;
    margin-right: 0.5rem;
    color: var(--savoor-coral);
}

.section-conseils::before {
    content: "\f0eb"; /* lightbulb */
}

.astuce-chef::before {
    content: "\f0eb"; /* lightbulb */
}

/* Pairings et associations */
.section-pairings::before {
    font-family: "Font Awesome 7 Pro";
    font-weight: 900;
    content: "\f2e7"; /* utensils */
    margin-right: 0.5rem;
    color: var(--savoor-coral);
}

/* Temps de cuisson */
.cooking-time::before {
    font-family: "Font Awesome 7 Pro";
    font-weight: 900;
    content: "\f2f2"; /* stopwatch */
    margin-right: 0.25rem;
}

/* =====================================================
   ALIGNEMENT ET VERTICAL ALIGN
   ===================================================== */

/* Alignement vertical avec texte */
.icon-inline {
    vertical-align: -0.125em;
}

.icon-middle {
    vertical-align: middle;
}

.icon-baseline {
    vertical-align: baseline;
}

/* Display */
.icon-block {
    display: block;
}

.icon-inline-block {
    display: inline-block;
}

/* =====================================================
   ÉTATS ET ANIMATIONS
   ===================================================== */

/* Effet hover subtil */
.icon-hover:hover i {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

/* Rotation */
.icon-spin {
    animation: fa-spin 2s linear infinite;
}

@keyframes fa-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Pulse */
.icon-pulse {
    animation: fa-pulse 1s ease-in-out infinite;
}

@keyframes fa-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* =====================================================
   ACCESSIBILITÉ
   ===================================================== */

/* Icônes décoratives */
.fa-icon[aria-hidden="true"],
i[aria-hidden="true"] {
    pointer-events: none;
}

/* Focus visible pour navigation clavier */
/* DÉSACTIVÉ : Cause un cadre rouge indésirable autour des icônes
a:focus i,
button:focus i {
    outline: 2px solid var(--savoor-coral);
    outline-offset: 2px;
}
*/

/* =====================================================
   MODE SOMBRE
   ===================================================== */

@media (prefers-color-scheme: dark) {
    :root {
        --icon-default: var(--savoor-light);
        --savoor-text: #ecf0f1;
    }

    .icon-muted {
        opacity: 0.5;
    }

    .icon-dark {
        color: var(--savoor-light);
    }

    .icon-light {
        color: var(--savoor-dark);
    }

    /* Icônes profil - Mode sombre uniquement si explicitement demandé */
    body.dark-mode .stat-card .stat-icon i,
    body.dark-mode .stat-card .stat-icon i.icon-primary,
    body.dark-mode .profile-stat-icon i,
    body.dark-mode .profile-stat-icon i.icon-primary {
        color: #ffffff !important;
        opacity: 0.95;
    }

    /* Classes de couleur spécifiques pour cartes profil en mode sombre */
    body.dark-mode .stat-card .stat-icon i.icon-success,
    body.dark-mode .profile-stat-icon i.icon-success {
        color: #2ecc71 !important;  /* Vert plus clair pour mode sombre */
        opacity: 1;
    }

    body.dark-mode .stat-card .stat-icon i.icon-accent,
    body.dark-mode .profile-stat-icon i.icon-accent {
        color: #ff6b6b !important;  /* Rouge coral plus clair pour mode sombre */
        opacity: 1;
    }

    /* Icônes success globales */
    .icon-success {
        color: #4caf50;
    }
}

/* =====================================================
   OVERRIDE MODE CLAIR - Priorité maximale
   Force le mode clair même si prefers-color-scheme: dark
   ===================================================== */

/* Cette règle DOIT être APRÈS le @media pour avoir la priorité */
body.light-mode .stat-card .stat-icon i,
body.light-mode .stat-card .stat-icon i.icon-primary,
body.light-mode .profile-stat-icon i,
body.light-mode .profile-stat-icon i.icon-primary {
    color: #2c3e50 !important;  /* Force gris foncé en mode clair */
    opacity: 1 !important;      /* Réinitialise l'opacity du mode sombre */
}

/* Icônes success en mode clair forcé */
body.light-mode .stat-card .stat-icon i.icon-success,
body.light-mode .profile-stat-icon i.icon-success {
    color: #27ae60 !important;  /* Vert en mode clair */
    opacity: 1 !important;
}

/* Icônes accent en mode clair forcé */
body.light-mode .stat-card .stat-icon i.icon-accent,
body.light-mode .profile-stat-icon i.icon-accent {
    color: #e74c3c !important;  /* Rouge en mode clair */
    opacity: 1 !important;
}

/* =====================================================
   RESPONSIVE - MOBILE
   ===================================================== */

@media (max-width: 768px) {
    /* Réduire légèrement les icônes sur mobile */
    .stat-card .stat-icon i {
        font-size: 1.75rem;
    }

    .nav-menu-item i {
        font-size: 1rem;
    }

    /* Optimiser les espacements */
    .icon-mr-2 {
        margin-right: 0.375rem;
    }

    .icon-mr-3 {
        margin-right: 0.5rem;
    }
}

/* =====================================================
   UTILITAIRES SUPPLÉMENTAIRES
   ===================================================== */

/* Centrage */
.icon-center {
    text-align: center;
}

/* Opacité */
.icon-opacity-50 {
    opacity: 0.5;
}

.icon-opacity-75 {
    opacity: 0.75;
}

/* Cercle de fond (pour icônes dans des badges) */
.icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: var(--savoor-coral);
    color: white;
}

.icon-badge i {
    font-size: 1.25rem;
}

/* Icône avec texte en dessous (pour cartes) */
.icon-with-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.icon-with-label i {
    font-size: 2rem;
    color: var(--savoor-coral);
}

.icon-with-label span {
    font-size: 0.875rem;
    color: var(--savoor-text);
}

/* =====================================================
   FIN DU FICHIER
   ===================================================== */