/**
 * COLOR PALETTES - Système centralisé de couleurs
 * Version: URBAIN MODERNE
 * 
 * PALETTE ACTIVE : Urbain Moderne (Brique Rouge + Gris Anthracite)
 * Palette urbaine, moderne et distinctive pour un métier technique
 */

:root {
    /* ============================================
       🎨 PALETTE URBAIN MODERNE
       Brique Rouge + Gris Anthracite - Distinctif & professionnel
       ============================================ */
    
    /* Couleur principale (Gris Anthracite urbain) */
    --brand-primary: #374151;           /* Gris Anthracite */
    --brand-primary-light: #4B5563;     /* Gris Graphite */
    --brand-primary-dark: #1F2937;      /* Gris Charbon */
    
    /* Couleur d'accent (Brique Rouge vif) */
    --brand-accent: #DC2626;            /* Brique Rouge */
    --brand-accent-light: #EF4444;      /* Rouge clair */
    --brand-accent-dark: #B91C1C;       /* Brique foncée */
    
    /* Couleur secondaire (Ciment Clair) */
    --brand-secondary: #6B7280;         /* Ciment Gris */
    --brand-secondary-light: #9CA3AF;   /* Ciment Clair */
    --brand-secondary-dark: #4B5563;    /* Ciment Foncé */
    
    
    /* ============================================
       🎯 COULEURS SÉMANTIQUES
       (Utilisation spécifique, NE PAS modifier)
       ============================================ */
    
    /* Texte */
    --text-primary: #111827;            /* Noir profond */
    --text-secondary: #374151;          /* Gris anthracite */
    --text-muted: #6B7280;              /* Gris moyen */
    --text-light: #9CA3AF;              /* Gris clair */
    --text-inverse: #FFFFFF;            /* Blanc */
    
    /* Backgrounds */
    --bg-primary: #FFFFFF;              /* Blanc pur */
    --bg-secondary: #F9FAFB;            /* Gris très clair */
    --bg-muted: #F3F4F6;                /* Gris clair doux */
    --bg-dark: #111827;                 /* Noir profond */
    
    /* États */
    --success: #059669;                 /* Vert Émeraude */
    --success-light: #10B981;           /* Vert clair */
    --success-dark: #047857;            /* Vert foncé */
    
    --warning: #F59E0B;                 /* Ambre */
    --warning-light: #FBBF24;           /* Ambre clair */
    --warning-dark: #D97706;            /* Ambre foncé */
    
    --danger: #EF4444;                  /* Rouge vif */
    --danger-light: #F87171;            /* Rouge clair */
    --danger-dark: #DC2626;             /* Rouge foncé */
    
    --info: #0EA5E9;                    /* Bleu ciel */
    --info-light: #38BDF8;              /* Bleu ciel clair */
    --info-dark: #0284C7;               /* Bleu ciel foncé */
    
    /* Bordures */
    --border-color: #E5E7EB;            /* Gris bleuté très clair */
    --border-color-light: #F1F5F9;      /* Gris presque blanc */
    --border-color-dark: #D1D5DB;       /* Gris moyen */
    
    
    /* ============================================
       🎨 MAPPING FONCTIONNEL
       (Lie les couleurs de marque aux usages)
       ============================================ */
    
    /* Hero Section */
    --hero-bg: var(--brand-primary);
    --hero-bg-gradient: linear-gradient(135deg, 
        var(--brand-primary) 0%, 
        var(--brand-primary-dark) 100%
    );
    --hero-text: var(--text-inverse);
    --hero-badge-bg: var(--brand-accent); /* Rouge Brique pour badge urgence */
    
    /* Boutons */
    --btn-primary-bg: var(--brand-primary);
    --btn-primary-bg-hover: var(--brand-primary-dark);
    --btn-primary-text: var(--text-inverse);
    
    --btn-secondary-bg: var(--brand-accent);
    --btn-secondary-bg-hover: var(--brand-accent-dark);
    --btn-secondary-text: var(--text-inverse);
    
    --btn-outline-border: var(--brand-primary);
    --btn-outline-text: var(--brand-primary);
    --btn-outline-bg-hover: var(--brand-primary);
    --btn-outline-text-hover: var(--text-inverse);
    
    /* Navigation */
    --nav-bg: var(--bg-primary);
    --nav-text: var(--text-primary);
    --nav-text-hover: var(--brand-accent);
    --nav-border: var(--border-color);
    
    /* Cards */
    --card-bg: var(--bg-primary);
    --card-border: var(--border-color);
    --card-title: var(--text-primary);
    --card-text: var(--text-secondary);
    --card-hover-shadow: rgba(55, 65, 81, 0.1); /* Gris Anthracite avec opacité */
    
    /* Services */
    --service-icon-bg: var(--brand-primary);
    --service-icon-text: var(--text-inverse);
    --service-title: var(--text-primary);
    --service-price-text: var(--brand-accent);
    
    /* Trust Badges */
    --trust-badge-bg: var(--brand-accent);
    --trust-badge-text: var(--text-inverse);
    
    /* Footer */
    --footer-bg: var(--brand-primary);
    --footer-text: var(--text-inverse);
    --footer-link: var(--brand-secondary-light);
    --footer-link-hover: var(--brand-accent);
    
    /* Formulaire */
    --input-border: var(--border-color);
    --input-border-focus: var(--brand-accent);
    --input-bg: var(--bg-primary);
    --input-text: var(--text-primary);
    
    /* Téléphone */
    --phone-btn-bg: var(--brand-accent);
    --phone-btn-bg-hover: var(--brand-accent-dark);
    --phone-btn-text: var(--text-inverse);
    
    /* Links */
    --link-color: var(--brand-primary);
    --link-hover: var(--brand-accent);
}


/* ============================================
   💾 PALETTE ALTERNATIVE : INDUSTRIEL JAUNE + NOIR
   ============================================ */

/*
:root {
    /* Couleur principale (Noir industriel) * /
    --brand-primary: #171717;
    --brand-primary-light: #262626;
    --brand-primary-dark: #000000;
    
    /* Couleur d'accent (Jaune industriel) * /
    --brand-accent: #EAB308;
    --brand-accent-light: #FACC15;
    --brand-accent-dark: #CA8A04;
    
    /* Couleur secondaire (Gris Béton) * /
    --brand-secondary: #6B7280;
    --brand-secondary-light: #9CA3AF;
    --brand-secondary-dark: #4B5563;
}
*/


/* ============================================
   💾 PALETTE ALTERNATIVE : TECHNO CYAN + VIOLET
   ============================================ */

/*
:root {
    /* Couleur principale (Violet Techno) * /
    --brand-primary: #7C3AED;
    --brand-primary-light: #8B5CF6;
    --brand-primary-dark: #6D28D9;
    
    /* Couleur d'accent (Cyan Néon) * /
    --brand-accent: #06B6D4;
    --brand-accent-light: #22D3EE;
    --brand-accent-dark: #0891B2;
    
    /* Couleur secondaire (Rose Électrique) * /
    --brand-secondary: #EC4899;
    --brand-secondary-light: #F472B6;
    --brand-secondary-dark: #DB2777;
}
*/


/* ============================================
   💾 PALETTE ALTERNATIVE : NATUREL TERRE + VERT
   ============================================ */

/*
:root {
    /* Couleur principale (Terre cuite) * /
    --brand-primary: #92400E;
    --brand-primary-light: #B45309;
    --brand-primary-dark: #78350F;
    
    /* Couleur d'accent (Vert mousse) * /
    --brand-accent: #059669;
    --brand-accent-light: #10B981;
    --brand-accent-dark: #047857;
    
    /* Couleur secondaire (Sable doré) * /
    --brand-secondary: #D97706;
    --brand-secondary-light: #F59E0B;
    --brand-secondary-dark: #B45309;
}
*/


/* ============================================
   💾 PALETTE ALTERNATIVE : MARIN NAVY + TURQUOISE
   ============================================ */

/*
:root {
    /* Couleur principale (Bleu Navy) * /
    --brand-primary: #1E3A8A;
    --brand-primary-light: #3B82F6;
    --brand-primary-dark: #1E40AF;
    
    /* Couleur d'accent (Turquoise) * /
    --brand-accent: #0D9488;
    --brand-accent-light: #14B8A6;
    --brand-accent-dark: #0F766E;
    
    /* Couleur secondaire (Sable clair) * /
    --brand-secondary: #F59E0B;
    --brand-secondary-light: #FBBF24;
    --brand-secondary-dark: #D97706;
}
*/


/* ============================================
   💾 PALETTE ALTERNATIVE : ÉLÉGANT CHARBON + CUIVRE
   ============================================ */

/*
:root {
    /* Couleur principale (Charbon) * /
    --brand-primary: #1F2937;
    --brand-primary-light: #374151;
    --brand-primary-dark: #111827;
    
    /* Couleur d'accent (Cuivre) * /
    --brand-accent: #B45309;
    --brand-accent-light: #D97706;
    --brand-accent-dark: #92400E;
    
    /* Couleur secondaire (Marron clair) * /
    --brand-secondary: #A16207;
    --brand-secondary-light: #CA8A04;
    --brand-secondary-dark: #854D0E;
}
*/


/* ============================================
   📝 INSTRUCTIONS D'UTILISATION
   ============================================ */

/*
POUR CHANGER DE PALETTE:
------------------------

1. COMMENTER la palette active (ajouter /* au début et *\/ à la fin)
   
   Exemple pour désactiver Urbain Moderne:
   /*
   :root {
       --brand-primary: #374151;
       ...
   }
   *\/

2. DÉCOMMENTER la palette souhaitée (enlever /* et *\/)
   
   Exemple pour activer Industriel:
   :root {
       --brand-primary: #171717;
       ...
   }

3. SAUVEGARDER

4. RAFRAÎCHIR le navigateur (Ctrl+Shift+R)

5. TOUT LE SITE change de couleur !


POUR CRÉER UNE NOUVELLE PALETTE:
---------------------------------

1. Dupliquer un bloc :root { ... }

2. Modifier les 9 couleurs:
   --brand-primary (+ light + dark)
   --brand-accent (+ light + dark)
   --brand-secondary (+ light + dark)

3. Activer votre nouvelle palette


VÉRIFICATEUR DE CONTRASTE:
---------------------------
https://webaim.org/resources/contrastchecker/

Important pour accessibilité:
- Texte sur fond : minimum 4.5:1
- Contraste vérifié pour cette palette:
  ✅ Gris Anthracite (#374151) sur blanc: 10.9:1 (Excellent)
  ✅ Brique Rouge (#DC2626) sur blanc: 5.2:1 (Excellent)
  ✅ Texte blanc sur Gris Anthracite: 12.6:1 (Excellent)
  ✅ Texte blanc sur Brique Rouge: 8.2:1 (Excellent)
*/

/* ============================================
   🎨 PRÉVISUALISATION DE LA PALETTE
   ============================================ */
/*
PRIMARY: #374151 (Gris Anthracite)
  - Utilisation: En-tête, boutons principaux, footer
  - Signification: Solidité, professionnalisme, expertise technique
  - Contraste sur blanc: ✅ Excellent (10.9:1)

ACCENT: #DC2626 (Brique Rouge)
  - Utilisation: Boutons urgences, CTAs, éléments d'alerte
  - Signification: Urgence, action immédiate, attention
  - Contraste sur blanc: ✅ Excellent (5.2:1)

SECONDARY: #6B7280 (Ciment Gris)
  - Utilisation: Liens secondaires, bordures, éléments décoratifs
  - Signification: Neutralité, stabilité, complémentarité
  - Contraste sur blanc: ✅ Bon (4.6:1)

IDENTITÉ VISUELLE:
------------------
Cette palette "Urbain Moderne" crée une identité distinctive pour un métier technique:
- Gris Anthracite: Transmet solidité et expertise professionnelle
- Brique Rouge: Signale l'urgence et l'action immédiate
- Ciment Gris: Apporte équilibre et modernité

C'est une palette qui sort des bleus classiques tout en restant professionnelle.
Elle évoque à la fois la robustesse (gris) et la réactivité (rouge), parfaite
pour un service d'urgence technique qui veut se démarquer.
*/