/* ==========================================
   SYSTEME CENTRALISE D'ICONES - IDC
   ==========================================
   
   Standardisation complète des icônes pour tout le site.
   Tailles, couleurs, styles, et cas d'usage normalisés.
   
   PALETTE DE COULEURS:
   - Primary (Orange): #E36A13
   - Primary Light: #F5884D
   - Primary Dark: #C2570F
   - Secondary (Green): #0F6B32
   - Dark: #0B0B0B
   - Light: #F4F4F4
   - Neutral: #4F4F4F
   
   TAILLES STANDARDISEES:
   - XS: 12px   (inline text)
   - S: 16px    (small buttons, inline)
   - M: 24px    (default, buttons, nav)
   - L: 32px    (large buttons, cards)
   - XL: 48px   (hero sections, large cards)
   ========================================== */

/* ==================== BASE MATERIAL SYMBOLS ==================== */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    display: inline-flex;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    vertical-align: middle;
}

/* ==================== TAILLES STANDARDISEES ==================== */

/* XS: 12px - Inline text icons */
.icon-xs {
    font-size: 12px;
}

/* S: 16px - Small buttons, inline content */
.icon-s {
    font-size: 16px;
}

/* M: 24px - Default size, navigation, standard buttons */
.icon-m {
    font-size: 24px;
}

/* L: 32px - Large buttons, card headers */
.icon-l {
    font-size: 32px;
}

/* XL: 48px - Hero sections, large cards, prominent features */
.icon-xl {
    font-size: 48px;
}

/* ==================== COULEURS UNIFORMES ==================== */

/* Primary Orange - For main actions, CTAs, highlights */
.icon-primary {
    color: #E36A13;
}

.icon-primary:hover {
    color: #F5884D;
}

/* Primary Dark - For hover states, important elements */
.icon-primary-dark {
    color: #C2570F;
}

/* Secondary Green - For secondary actions, verification */
.icon-secondary {
    color: #0F6B32;
}

.icon-secondary:hover {
    color: #0F6B32;
    opacity: 0.8;
}

/* Dark - For main content, default state */
.icon-dark {
    color: #0B0B0B;
}

.icon-dark:hover {
    color: #E36A13;
}

/* Light - For light backgrounds */
.icon-light {
    color: #F4F4F4;
}

/* Neutral Gray - For secondary content */
.icon-neutral {
    color: #4F4F4F;
}

.icon-neutral:hover {
    color: #0B0B0B;
}

/* ==================== CONTEXTES D'UTILISATION ==================== */

/* HEADER / NAVIGATION ICONS */
.icon-header {
    font-size: 24px;
    color: #0B0B0B;
    display: inline-flex;
    align-items: center;
}

.icon-header:hover {
    color: #E36A13;
    transition: color 0.3s ease;
}

/* FOOTER ICONS */
.icon-footer {
    font-size: 20px;
    color: #4F4F4F;
    display: inline-flex;
    align-items: center;
    margin-right: 8px;
    vertical-align: -5px;
}

.icon-footer:hover {
    color: #E36A13;
    transition: color 0.3s ease;
}

/* BUTTON ICONS - For buttons with icons */
.icon-button {
    font-size: 20px;
    color: #0B0B0B;
    display: inline-flex;
    align-items: center;
    vertical-align: -4px;
}

.icon-button:hover {
    color: #E36A13;
}

/* SIDEBAR ICONS - Dashboard navigation */
.icon-sidebar {
    font-size: 24px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}

/* CONTACT INFO ICONS - Address, phone, email, hours */
.icon-contact {
    font-size: 48px;
    color: #E36A13;
    margin-bottom: 12px;
    display: inline-flex;
}

/* QUICK LINKS / RACCOURCIS ICONS */
.icon-raccourci {
    font-size: 48px;
    color: #E36A13;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* SERVICE CARD ICONS - Expansion buttons */
.icon-service-btn {
    font-size: 20px;
    color: #E36A13;
    display: inline-flex;
    align-items: center;
}

/* EXPANSION/COLLAPSE - Chevrons, arrows */
.icon-expand {
    font-size: 20px;
    color: #0B0B0B;
    display: inline-flex;
    align-items: center;
    transition: transform 0.3s ease;
}

.icon-expand.open {
    transform: rotate(180deg);
}

/* SOCIAL ICONS - Footer social links */
.icon-social {
    font-size: 20px;
    color: #4F4F4F;
    display: inline-flex;
    align-items: center;
}

.icon-social:hover {
    color: #E36A13;
    transition: color 0.3s ease;
}

/* STATUS ICONS - Success, error, warning, info */
.icon-status-success {
    font-size: 24px;
    color: #0F6B32;
}

.icon-status-error {
    font-size: 24px;
    color: #E36A13;
}

.icon-status-warning {
    font-size: 24px;
    color: #F5884D;
}

.icon-status-info {
    font-size: 24px;
    color: #0B0B0B;
}

/* ==================== COMBINAISONS UTILES ==================== */

/* Primary Orange + Medium Size (Most common) */
.icon-primary-m {
    font-size: 24px;
    color: #E36A13;
}

/* Dark + Small Size (Inline content) */
.icon-dark-s {
    font-size: 16px;
    color: #0B0B0B;
}

/* Primary Orange + Large Size (Card headers) */
.icon-primary-l {
    font-size: 32px;
    color: #E36A13;
}

/* Primary Orange + XL Size (Hero/prominence) */
.icon-primary-xl {
    font-size: 48px;
    color: #E36A13;
}

/* Secondary Green + Medium Size */
.icon-secondary-m {
    font-size: 24px;
    color: #0F6B32;
}

/* ==================== ACCESSIBILITE ==================== */

/* Hidden label for screen readers */
.icon-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Ensure icons are visible and properly sized */
.icon-visible {
    display: inline-flex !important;
    width: auto;
    height: auto;
}

/* Loading spinner animation */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.icon-loading {
    animation: spin 1s linear infinite;
}

/* ==================== UTILITIES ==================== */

/* Icon alignment helpers */
.icon-align-top {
    vertical-align: top;
}

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

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

/* Icon spacing helpers */
.icon-mr-xs {
    margin-right: 4px;
}

.icon-mr-s {
    margin-right: 8px;
}

.icon-mr-m {
    margin-right: 12px;
}

.icon-ml-xs {
    margin-left: 4px;
}

.icon-ml-s {
    margin-left: 8px;
}

.icon-ml-m {
    margin-left: 12px;
}

/* Icon with text wrapper */
.icon-with-text {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Icon only (no text) */
.icon-only {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ==================== RESPONSIVE ADJUSTMENTS ==================== */

@media (max-width: 768px) {
    /* Reduce icon sizes on mobile */
    .icon-xs {
        font-size: 10px;
    }
    
    .icon-s {
        font-size: 14px;
    }
    
    .icon-m {
        font-size: 20px;
    }
    
    .icon-l {
        font-size: 28px;
    }
    
    .icon-xl {
        font-size: 40px;
    }
}

/* ==================== DOCUMENTATION GUIDE ==================== */

/*
GUIDE D'UTILISATION:

1. POUR REMPLACER UN EMOJI:
   Before:  <span>👍 J'aime</span>
   After:   <span class="material-symbols-outlined icon-primary-s">thumb_up</span> J'aime

2. POUR UN BOUTON AVEC ICONE:
   <button class="btn btn-primary">
       <span class="material-symbols-outlined icon-m icon-primary">add</span>
       Ajouter
   </button>

3. POUR UN LIEN AVEC ICONE:
   <a href="#" class="icon-with-text">
       <span class="material-symbols-outlined icon-s icon-primary">arrow_forward</span>
       En savoir plus
   </a>

4. POUR UNE ICONE STANDALONE:
   <span class="material-symbols-outlined icon-xl icon-primary-xl"></span>

5. PALETTE DE COULEURS RAPIDE:
   - Actions principales: icon-primary
   - Navigation: icon-dark ou icon-primary
   - Réussi: icon-secondary
   - Erreur: icon-status-error
   - Info: icon-status-info

TAILLES RECOMMANDEES PAR CONTEXTE:
- Logo/favicon: 16px ou 24px
- Boutons de navigation: 24px
- Boutons d'action: 20px-24px
- Badges: 16px
- Cartes de service: 48px
- Raccourcis: 48px
- Coordinées (contact): 48px
- Dashboard sidebar: 24px
- Footer: 20px
- Inline (texte): 16px à 20px

*/