/**
 * COLOR PALETTES - Système centralisé de couleurs
 * Version: CLASSIQUE PROFESSIONNEL
 * 
 * PALETTE ACTIVE : Classique Professionnel (Bleu + Orange)
 * Palette intemporelle et professionnelle pour tous métiers
 */

:root {
    /* ============================================
       🎨 PALETTE CLASSIQUE PROFESSIONNELLE
       Bleu marine + Orange vif - Élégant & professionnel
       ============================================ */
    
    /* Couleur principale (Bleu marine professionnel) */
    --brand-primary: #1E3A8A;           /* Bleu marine profond */
    --brand-primary-light: #3B82F6;     /* Bleu vif */
    --brand-primary-dark: #1E40AF;      /* Bleu marine foncé */
    
    /* Couleur d'accent (Orange énergique) */
    --brand-accent: #F97316;            /* Orange vif */
    --brand-accent-light: #FB923C;      /* Orange clair */
    --brand-accent-dark: #EA580C;       /* Orange foncé */
    
    /* Couleur secondaire (Bleu ciel) */
    --brand-secondary: #0EA5E9;         /* Bleu ciel */
    --brand-secondary-light: #38BDF8;   /* Bleu ciel clair */
    --brand-secondary-dark: #0284C7;    /* Bleu ciel foncé */
    
    
    /* ============================================
       🎯 COULEURS SÉMANTIQUES
       (Utilisation spécifique, NE PAS modifier)
       ============================================ */
    
    /* Texte */
    --text-primary: #1F2937;            /* Gris anthracite */
    --text-secondary: #4B5563;          /* Gris foncé */
    --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;                 /* Gris très foncé */
    
    /* États */
    --success: #10B981;                 /* Vert émeraude */
    --success-light: #34D399;           /* Vert clair */
    --success-dark: #059669;            /* 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: #06B6D4;                    /* Cyan */
    --info-light: #22D3EE;              /* Cyan clair */
    --info-dark: #0891B2;               /* Cyan 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(--danger);
    
    /* 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);  /* Texte blanc sur orange */
    
    --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(30, 58, 138, 0.1); /* Bleu marine 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);  /* Texte blanc sur orange */
    
    /* Footer */
    --footer-bg: var(--brand-primary);
    --footer-text: var(--text-inverse);
    --footer-link: var(--brand-accent-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);  /* Texte blanc sur orange */
    
    /* Links */
    --link-color: var(--brand-primary);
    --link-hover: var(--brand-accent);
}


/* ============================================
   💾 PALETTE ALTERNATIVE : ÉLECTRICIEN MODERNE (Violet + Cyan)
   ============================================ */

/*
:root {
    /* Couleur principale (Violet profond - Énergie électrique) * /
    --brand-primary: #6A11CB;
    --brand-primary-light: #8A2BE2;
    --brand-primary-dark: #4B0082;
    
    /* Couleur d'accent (Cyan électrique) * /
    --brand-accent: #00D4FF;
    --brand-accent-light: #40E0D0;
    --brand-accent-dark: #00A8CC;
    
    /* Couleur secondaire (Magenta) * /
    --brand-secondary: #FF2D75;
    --brand-secondary-light: #FF4D94;
    --brand-secondary-dark: #E6005C;
}
*/


/* ============================================
   💾 PALETTE ALTERNATIVE : PLOMBIER (Bleu eau + Orange)
   ============================================ */

/*
:root {
    /* Couleur principale (Bleu eau) * /
    --brand-primary: #1E88E5;
    --brand-primary-light: #42A5F5;
    --brand-primary-dark: #1976D2;
    
    /* Couleur d'accent (Orange urgence) * /
    --brand-accent: #FF6F00;
    --brand-accent-light: #FF8F00;
    --brand-accent-dark: #E65100;
    
    /* Couleur secondaire (Bleu foncé) * /
    --brand-secondary: #0D47A1;
    --brand-secondary-light: #1565C0;
    --brand-secondary-dark: #01579B;
}
*/


/* ============================================
   💾 PALETTE 3 : CHAUFFAGISTE (Rouge + Orange)
   ============================================ */

/*
:root {
    --brand-primary: #C62828;
    --brand-primary-light: #E53935;
    --brand-primary-dark: #B71C1C;
    
    --brand-accent: #FF6F00;
    --brand-accent-light: #FF8F00;
    --brand-accent-dark: #E65100;
    
    --brand-secondary: #D84315;
    --brand-secondary-light: #F4511E;
    --brand-secondary-dark: #BF360C;
}
*/


/* ============================================
   💾 PALETTE 4 : SERRURIER (Gris + Or)
   ============================================ */

/*
:root {
    --brand-primary: #37474F;
    --brand-primary-light: #546E7A;
    --brand-primary-dark: #263238;
    
    --brand-accent: #FFB300;
    --brand-accent-light: #FFC107;
    --brand-accent-dark: #FF8F00;
    
    --brand-secondary: #8D6E63;
    --brand-secondary-light: #A1887F;
    --brand-secondary-dark: #6D4C41;
}
*/


/* ============================================
   💾 PALETTE 5 : MENUISIER (Bois + Vert)
   ============================================ */

/*
:root {
    --brand-primary: #5D4037;
    --brand-primary-light: #6D4C41;
    --brand-primary-dark: #4E342E;
    
    --brand-accent: #2E7D32;
    --brand-accent-light: #388E3C;
    --brand-accent-dark: #1B5E20;
    
    --brand-secondary: #FF8F00;
    --brand-secondary-light: #FFA726;
    --brand-secondary-dark: #F57C00;
}
*/


/* ============================================
   💾 PALETTE 6 : COUVREUR (Ardoise + Vert)
   ============================================ */

/*
:root {
    --brand-primary: #455A64;
    --brand-primary-light: #546E7A;
    --brand-primary-dark: #37474F;
    
    --brand-accent: #388E3C;
    --brand-accent-light: #43A047;
    --brand-accent-dark: #2E7D32;
    
    --brand-secondary: #689F38;
    --brand-secondary-light: #7CB342;
    --brand-secondary-dark: #558B2F;
}
*/

/* ============================================
   💾 PALETTE 7 : ÉLECTRICIEN ORIGINAL (Noir + Jaune)
   ============================================ */

/*
:root {
    /* Couleur principale (Noir professionnel) * /
    --brand-primary: #212121;
    --brand-primary-light: #424242;
    --brand-primary-dark: #000000;
    
    /* Couleur d'accent (Jaune électrique) * /
    --brand-accent: #FDD835;
    --brand-accent-light: #FFEB3B;
    --brand-accent-dark: #F9A825;
    
    /* Couleur secondaire (Jaune orangé) * /
    --brand-secondary: #FFB300;
    --brand-secondary-light: #FFC107;
    --brand-secondary-dark: #FF8F00;
}
*/


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

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

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

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

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:
  ✅ Bleu marine (#1E3A8A) sur blanc: 11.9:1 (Excellent)
  ✅ Orange (#F97316) sur blanc: 4.7:1 (Bon)
  ✅ Texte gris sur blanc: 4.6:1 (Passable)
  ✅ Orange sur bleu marine: 5.2:1 (Bon)
*/

/* ============================================
   🎨 PRÉVISUALISATION DE LA PALETTE
   ============================================ */
/*
PRIMARY: #1E3A8A (Bleu marine)
  - Utilisation: En-tête, boutons principaux, footer
  - Signification: Confiance, professionnalisme, stabilité
  - Contraste sur blanc: ✅ Excellent (11.9:1)

ACCENT: #F97316 (Orange énergique)
  - Utilisation: Boutons secondaires, urgences, CTAs
  - Signification: Énergie, action, urgence
  - Contraste sur blanc: ✅ Bon (4.7:1)

SECONDARY: #0EA5E9 (Bleu ciel)
  - Utilisation: Liens, informations complémentaires
  - Signification: Clarté, transparence, information
  - Contraste sur blanc: ✅ Bon (5.1:1)

Cette palette crée une identité professionnelle, sérieuse et fiable
tout en restant moderne et accessible. Parfaite pour tous métiers.
*/