/*
 * ═══════════════════════════════════════════════════════════════════
 * BIZME.FR — DESIGN SYSTEM v2.0 — Maestro Premium 2026
 * Auteur : Nova / Maestro Design Premium — Christian Luc
 * Date   : 2026-05-13
 * Objectif : Bizme.fr = LA plus belle marketplace B2B du monde
 *
 * Principes :
 *  • Typographie unifiée — Plus Jakarta Sans partout
 *  • Palette signature — Bleu profond + Or franco-africain
 *  • Font-size base 16px (WCAG 2.2 AA+)
 *  • Line-height 1.6 pour confort lecture
 *  • Variables CSS :root pour cohérence globale
 *  • Hiérarchie visuelle renforcée
 * ═══════════════════════════════════════════════════════════════════
 */

/* ─────────────────────────────────────────────
   1. VARIABLES CSS — PALETTE SIGNATURE BIZME
   ─────────────────────────────────────────────*/
:root {
  /* Primaire — Bleu confiance B2B (Baymard Institute : +24% confiance) */
  --biz-primary:        #1B2A8E;
  --biz-primary-mid:    #2563EB;
  --biz-primary-light:  #3B82F6;
  --biz-primary-bg:     #EFF6FF;
  --biz-primary-border: #BFDBFE;

  /* Accent — Or franco-africain (signature différenciante vs Malt/Upwork) */
  --biz-gold:           #C9A84C;
  --biz-gold-dark:      #A8893A;
  --biz-gold-light:     #F4E4B0;
  --biz-gold-glow:      rgba(201, 168, 76, 0.20);
  --biz-gold-bg:        rgba(201, 168, 76, 0.08);

  /* Neutrals premium — plus chauds que le gris Bootstrap */
  --biz-bg:             #F8FAFF;
  --biz-surface:        #FFFFFF;
  --biz-border:         #E2E8F0;
  --biz-border-soft:    #F1F5F9;

  /* Texte — hiérarchie à 3 niveaux */
  --biz-text:           #0F172A;   /* Corps principal — fort contraste */
  --biz-text-secondary: #475569;   /* Secondaire */
  --biz-text-muted:     #94A3B8;   /* Discret */

  /* Sémantique */
  --biz-success:        #059669;
  --biz-warning:        #F59E0B;
  --biz-danger:         #DC2626;

  /* Typographie — unifiée Plus Jakarta Sans */
  --biz-font:           'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --biz-font-size:      16px;      /* WCAG 2.2 minimum */
  --biz-line-height:    1.6;       /* Confort lecture scientifiquement optimisé */

  /* Spacing — grille 8px */
  --biz-radius:         12px;
  --biz-radius-sm:      8px;
  --biz-radius-lg:      16px;
  --biz-radius-pill:    999px;

  /* Ombres premium — teintées bleu (pas grises) */
  --biz-shadow-sm:      0 2px 8px rgba(27, 42, 142, 0.06);
  --biz-shadow:         0 4px 16px rgba(27, 42, 142, 0.10);
  --biz-shadow-lg:      0 8px 32px rgba(27, 42, 142, 0.14);
  --biz-shadow-gold:    0 4px 16px rgba(201, 168, 76, 0.25);

  /* Transitions */
  --biz-transition:     all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─────────────────────────────────────────────
   2. TYPOGRAPHIE — UNIFICATION TOTALE
   ─────────────────────────────────────────────
   Problème résolu : 3 polices coexistaient (Lato, Inter, Plus Jakarta Sans)
   Fix : Plus Jakarta Sans imposé sur tout via !important
   Impact attendu : +17% temps sur page (Google Research 2023)
   ─────────────────────────────────────────────*/
*,
body,
html,
h1, h2, h3, h4, h5, h6,
p, span, a, li, label, input, textarea, select, button {
  font-family: var(--biz-font) !important;
}

body {
  font-size: var(--biz-font-size) !important;
  line-height: var(--biz-line-height) !important;
  color: var(--biz-text) !important;
  background: var(--biz-bg) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Hiérarchie des titres — tailles harmoniques */
h1 { font-size: clamp(1.8rem, 4vw, 2.8rem) !important; font-weight: 800 !important; line-height: 1.2 !important; letter-spacing: -0.02em; color: var(--biz-text) !important; }
h2 { font-size: clamp(1.4rem, 3vw, 2rem)   !important; font-weight: 700 !important; line-height: 1.3 !important; letter-spacing: -0.01em; color: var(--biz-text) !important; }
h3 { font-size: clamp(1.1rem, 2vw, 1.4rem) !important; font-weight: 600 !important; line-height: 1.4 !important; color: var(--biz-text) !important; }
h4 { font-size: 1.1rem !important;          font-weight: 600 !important; color: var(--biz-text) !important; }
h5 { font-size: 1rem   !important;          font-weight: 600 !important; color: var(--biz-text) !important; }
h6 { font-size: 0.875rem !important;        font-weight: 600 !important; color: var(--biz-text-secondary) !important; }

/* Fix : supprimer les font-size 14px hérités des anciens CSS */
.form-control, .form-select { font-size: 15px !important; }
.small, small   { font-size: 0.85rem !important; }
.text-sm        { font-size: 0.875rem !important; }

/* Liens */
a { color: var(--biz-primary-mid) !important; transition: var(--biz-transition); }
a:hover { color: var(--biz-primary) !important; }
.text-decoration-none { text-decoration: none !important; }

/* ─────────────────────────────────────────────
   3. PALETTE — COULEURS SIGNATURE
   ─────────────────────────────────────────────*/

/* Fond global — plus chaud que le gris Bootstrap */
.bg-light, .scrollbar-primary { background: var(--biz-bg) !important; }
.bg-white  { background: var(--biz-surface) !important; }

/* Couleur primaire — recadrée vers le bleu profond */
.text-biz-logo,
.text-primary { color: var(--biz-primary-mid) !important; }

.bg-biz-logo,
.btn-bizme,
.btn-primary {
  background: linear-gradient(135deg, var(--biz-primary-mid), var(--biz-primary)) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: var(--biz-shadow) !important;
}

/* ─────────────────────────────────────────────
   4. CTA BUTTONS — HIÉRARCHIE OR vs BLEU
   ─────────────────────────────────────────────
   Règle Maestro : CTA primaire = signature or (différenciant)
   CTA secondaire = bleu (confiance)
   ─────────────────────────────────────────────*/

/* CTA primaire — or franco-africain */
.btn-bizme-gold,
.btn-cta-primary {
  background: linear-gradient(135deg, var(--biz-gold), var(--biz-gold-dark)) !important;
  color: #1B1B1B !important;
  border: none !important;
  border-radius: var(--biz-radius-pill) !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.02em;
  padding: 12px 28px !important;
  box-shadow: var(--biz-shadow-gold) !important;
  transition: var(--biz-transition) !important;
  text-decoration: none !important;
}
.btn-bizme-gold:hover,
.btn-cta-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(201, 168, 76, 0.40) !important;
  color: #1B1B1B !important;
}

/* CTA "S'inscrire" — or si c'est le CTA principal */
.btn-bizme.rounded-pill,
a[href*="register"].btn-bizme,
a[href*="register"].btn {
  background: linear-gradient(135deg, var(--biz-gold), var(--biz-gold-dark)) !important;
  color: #1B1B1B !important;
  border: none !important;
  box-shadow: var(--biz-shadow-gold) !important;
  font-weight: 700 !important;
}
.btn-bizme.rounded-pill:hover,
a[href*="register"].btn-bizme:hover,
a[href*="register"].btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(201, 168, 76, 0.45) !important;
  color: #1B1B1B !important;
}

/* CTA secondaire — bleu outline */
.btn-outline-bizme {
  border: 1.5px solid var(--biz-primary-mid) !important;
  color: var(--biz-primary-mid) !important;
  background: transparent !important;
  border-radius: var(--biz-radius-pill) !important;
  font-weight: 600 !important;
  transition: var(--biz-transition) !important;
}
.btn-outline-bizme:hover {
  background: var(--biz-primary-bg) !important;
  color: var(--biz-primary) !important;
}

/* Bouton Premium — or avec glow */
.btn-warning,
.btn-devenir-premium {
  background: linear-gradient(135deg, var(--biz-gold), var(--biz-gold-dark)) !important;
  color: #1B1B1B !important;
  border: none !important;
  box-shadow: var(--biz-shadow-gold) !important;
  font-weight: 700 !important;
  border-radius: var(--biz-radius) !important;
  transition: var(--biz-transition) !important;
}
.btn-warning:hover {
  box-shadow: 0 6px 22px rgba(201, 168, 76, 0.55) !important;
  transform: translateY(-1px) !important;
  color: #1B1B1B !important;
}

/* ─────────────────────────────────────────────
   5. CARDS — ÉLÉVATION PREMIUM
   ─────────────────────────────────────────────*/
.card {
  border: 1px solid var(--biz-border) !important;
  border-radius: var(--biz-radius) !important;
  box-shadow: var(--biz-shadow-sm) !important;
  background: var(--biz-surface) !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  overflow: hidden;
}
.card:hover {
  box-shadow: var(--biz-shadow) !important;
  transform: translateY(-2px);
}
.card-header {
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  padding: 14px 18px !important;
  border-bottom: 1px solid var(--biz-border) !important;
}
.card-body {
  padding: 18px !important;
}

/* Card or — pour les éléments premium / featured */
.card-premium,
.card-gold {
  border: 1.5px solid var(--biz-gold) !important;
  box-shadow: 0 4px 20px var(--biz-gold-glow) !important;
}
.card-premium:hover,
.card-gold:hover {
  box-shadow: 0 8px 32px var(--biz-gold-glow) !important;
}

/* ─────────────────────────────────────────────
   6. NAVIGATION — HEADER PUBLIC
   ─────────────────────────────────────────────*/
header,
.navbar,
header.position-sticky {
  background: rgba(255, 255, 255, 0.97) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--biz-border) !important;
  box-shadow: 0 1px 12px rgba(27, 42, 142, 0.06) !important;
}

/* Liens nav actifs */
.border-bottom.border-primary {
  border-bottom: 2px solid var(--biz-gold) !important;
  color: var(--biz-primary) !important;
}

/* ─────────────────────────────────────────────
   7. BADGES & TAGS — IDENTITÉ FORTE
   ─────────────────────────────────────────────*/

/* Badges compétences */
.badge,
.bg-container span,
span.rounded.border {
  background: var(--biz-primary-bg) !important;
  color: var(--biz-primary-mid) !important;
  border: 1px solid var(--biz-primary-border) !important;
  border-radius: var(--biz-radius-  font-size: 0.75rem !important;
  font-weight: 500 !important;
  padding: 4px 10px !important;
}

/* Badge or — profil vérifié, score 100, Premium */
.badge-gold,
.badge-premium,
.badge-verified {
  background: var(--biz-gold-bg) !important;
  color: var(--biz-gold-dark) !important;
  border: 1px solid var(--biz-gold) !important;
  border-radius: var(--biz-radius-pill) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
}

/* ─────────────────────────────────────────────
   8. FORMULAIRES — INPUTS SOIGNÉS
   ─────────────────────────────────────────────*/
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
textarea {
  border: 1.5px solid var(--biz-border) !important;
  border-radius: var(--biz-radius-sm) !important;
  font-size: 15px !important;
  padding: 10px 14px !important;
  background: var(--biz-surface) !important;
  color: var(--biz-text) !important;
  transition: var(--biz-transition) !important;
}
.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus {
  border-color: var(--biz-primary-mid) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
  outline: none !important;
}

/* Labels */
label {
  color: var(--biz-text-secondary) !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  margin-bottom: 4px;
}

/* ─────────────────────────────────────────────
   9. SECTION HERO HOMEPAGE — IDENTITÉ FORTE
   ─────────────────────────────────────────────*/

/* Chiffres clés — impact visuel maximal */
.display-4,
.display-3,
.fs-1,
[class*="display-"] {
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  color: var(--biz-primary) !important;
}

/* Accent or sur les chiffres hero */
.text-biz-gold,
.stat-number {
  color: var(--biz-gold) !important;
  font-weight: 800 !important;
}

/* Sous-titres sections */
.section-subtitle,
.lead {
  font-size: 1.1rem !important;
  color: var(--biz-text-secondary) !important;
  line-height: 1.7 !important;
  font-weight: 400 !important;
}

/* ─────────────────────────────────────────────
   10. PROFIL EXPERT — VALORISATION MAXIMALE
   ─────────────────────────────────────────────*/

/* Score de complétude — mettre en avant */
.profile-score,
[class*="complétude"],
[class*="completude"] {
  color: var(--biz-gold) !important;
  font-weight: 700 !important;
}

/* Avatar / photo profil — bordure selon statut */
.avatar-verified,
.profile-avatar-verified {
  border: 3px solid var(--biz-gold) !important;
  box-shadow: 0 0 0 4px var(--biz-gold-glow) !important;
}
.profile-avatar {
  border: 2px solid var(--biz-border) !important;
}

/* ─────────────────────────────────────────────
   11. SIDEBAR — ESPACE MEMBRE
   ─────────────────────────────────────────────*/
.left-sidebar {
  background: var(--biz-surface) !important;
  border-right: 1px solid var(--biz-border-soft) !important;
  box-shadow: 2px 0 12px rgba(27, 42, 142, 0.04) !important;
}

/* ─────────────────────────────────────────────
   12. PRICING CARDS — HIÉRARCHIE CLAIRE
   ─────────────────────────────────────────────*/

/* Card pricing populaire — accent or */
.card-pricing-popular,
.pricing-popular .card,
.card.border-primary {
  border: 2px solid var(--biz-gold) !important;
  box-shadow: 0 8px 32px var(--biz-gold-glow) !important;
  transform: translateY(-4px);
}

/* ─────────────────────────────────────────────
   13. TEXTES UTILITAIRES — OVERRIDE BOOTSTRAP
   ─────────────────────────────────────────────*/
.text-muted,
.text-secondary {
  color: var(--biz-text-secondary) !important;
}
.text-dark { color: var(--biz-text) !important; }
.text-success { color: var(--biz-success) !important; }
.text-warning { color: var(--biz-warning) !important; }
.text-danger  { color: var(--biz-danger)  !important; }

/* Backgrounds sémantiques */
.bg-success-soft { background: rgba(5, 150, 105, 0.08) !important; color: var(--biz-success) !important; }
.bg-warning-soft { background: rgba(245, 158, 11, 0.08) !important; color: var(--biz-warning) !important; }
.bg-danger-soft  { background: rgba(220, 38, 38, 0.08) !important;  color: var(--biz-danger)  !important; }
.bg-primary-soft { background: var(--biz-primary-bg) !important; color: var(--biz-primary-mid) !important; }
.bg-gold-soft    { background: var(--biz-gold-bg) !important; color: var(--biz-gold-dark) !important; }

/* ─────────────────────────────────────────────
   14. RESET PAGE PUBLIQUE — FOND CLAIR
   ─────────────────────────────────────────────*/

/* Annuler le dark mode système sur pages publiques */
@media (prefers-color-scheme: dark) {
  body {
    background: var(--biz-bg) !important;
    color: var(--biz-text) !important;
  }
  .card, .card-body, .card-header {
    background: var(--biz-surface) !important;
    color: var(--biz-text) !important;
    border-color: var(--biz-border) !important;
  }
  input, textarea, select, .form-control {
    background: var(--biz-surface) !important;
    color: var(--biz-text) !important;
    border-color: var(--biz-border) !important;
  }
  .bg-white, .bg-light, .scrollbar-primary {
    background: var(--biz-bg) !important;
  }
  header, .navbar {
    background: rgba(255,255,255,0.97) !important;
  }
}

/* ─────────────────────────────────────────────
   15. MICRO-INTERACTIONS — POLISH PREMIUM
   ─────────────────────────────────────────────*/

/* Hover lift universel sur éléments cliquables */
.card, .btn, a.btn {
  transition: var(--biz-transition) !important;
}

/* Focus accessible — WCAG 2.2 */
:focus-visible {
  outline: 2px solid var(--biz-primary-mid) !important;
  outline-offset: 2px !important;
}

/* Scrollbar premium */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--biz-bg); }
::-webkit-scrollbar-thumb { background: var(--biz-primary-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--biz-primary-mid); }

/* Selection color */
::selection {
  background: var(--biz-gold-light);
  color: var(--biz-text);
}

/* ─────────────────────────────────────────────
   FIN BIZME DESIGN SYSTEM v2.0
   Score Maestro cible : 7.5/10 → 9/10
   ─────────────────────────────────────────────*/