/* ===== VARIANTE « CHARTE MEXSENSE » =====
   Se charge après style.css et remplace la palette sombre/verte du CV
   par la charte historique de mexsense.fr : bleu #2481A3, orange #ED7D31,
   bleu nuit #1C244B, fonds clairs. */

:root {
  --bg:        #ffffff;
  --bg2:       #f9fafd;
  --bg3:       #f3f5f8;
  --accent:    #2481a3;
  --accent2:   #1c6a87;
  --orange:    #ed7d31;
  --orange2:   #f39a5c;
  --navy:      #1c244b;
  --navy2:     #141a38;
  --text:      #1c244b;
  --text-muted:#5b6480;
  --border:    rgba(28,36,75,0.10);
}

/* ----- Nav ----- */
.nav { background: rgba(255,255,255,0.88); }
.nav-logo img { filter: none; }
.nav-links a { color: var(--text-muted); }
.nav-links a:hover { color: var(--text); }
.nav-links .nav-cta {
  color: #fff;
  background: var(--orange);
  border-color: var(--orange);
}
.nav-links .nav-cta:hover { background: var(--orange2); color: #fff; }

/* ----- Hero : bandeau bleu nuit ----- */
.hero {
  background-color: var(--navy);
  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
}
.hero-overlay {
  background: linear-gradient(
    135deg,
    rgba(28,36,75,0.92) 0%,
    rgba(36,129,163,0.35) 55%,
    rgba(28,36,75,0.97) 100%
  );
}
.hero-tag {
  color: #ffbc7d;
  border-color: rgba(237,125,49,0.5);
}
.hero-title {
  background: linear-gradient(135deg, #ffffff 40%, #7cc3dc 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.hero-sub { color: rgba(255,255,255,0.75); }
.hero-cta {
  background: linear-gradient(135deg, var(--orange), var(--orange2));
  color: #fff;
  box-shadow: 0 8px 30px rgba(237,125,49,0.35);
}
.hero-cta:hover { box-shadow: 0 10px 40px rgba(237,125,49,0.5); }
.hero-link { color: rgba(255,255,255,0.75); }
.hero-link:hover { color: #fff; border-color: var(--orange); }
.hero-scroll-hint span { background: linear-gradient(to bottom, transparent, var(--orange)); }

/* ----- Éléments communs ----- */
.tag {
  color: var(--accent);
  background: rgba(36,129,163,0.08);
  border-color: rgba(36,129,163,0.25);
}

/* ----- Offres ----- */
.offers { background: var(--bg2); }
.offer-card {
  background: #fff;
  box-shadow: 0 1px 3px rgba(28,36,75,0.05);
}
.offer-card:hover {
  border-color: rgba(36,129,163,0.35);
  box-shadow: 0 10px 30px rgba(28,36,75,0.08);
}
.offer-icon,
.doc-icon.accent {
  color: var(--accent);
  background: rgba(36,129,163,0.08);
  border-color: rgba(36,129,163,0.25);
}
.offer-list li::before { background: var(--orange); }

/* ----- Méthode ----- */
.method { background: #fff; }
.step { border-top-color: rgba(36,129,163,0.25); }
.step:first-child { border-top-color: var(--accent); }
.step-num { color: var(--orange); }

/* ----- Chiffres : bandeau bleu nuit ----- */
.stats {
  background: var(--navy);
  border-color: var(--navy);
}
.stat-item { border-color: rgba(255,255,255,0.12) !important; }
.stat-num { color: var(--orange); }
.stat-label { color: rgba(255,255,255,0.72); }

/* ----- Références ----- */
.cases { background: var(--bg2); }
.case-card {
  background: #fff;
  border-left-color: var(--accent);
  box-shadow: 0 1px 3px rgba(28,36,75,0.05);
}
.case-card:hover { box-shadow: 0 10px 30px rgba(28,36,75,0.08); }

/* ----- Produits ----- */
.project { background: #fff; }
.project-card { background: var(--bg2); }
.project-card:hover {
  border-color: rgba(36,129,163,0.3);
  box-shadow: 0 10px 30px rgba(28,36,75,0.08);
}
.project-logo { background: #fff; }
.project-link-web {
  color: var(--accent);
  background: rgba(36,129,163,0.08);
  border-color: rgba(36,129,163,0.25);
}
.project-link-web:hover { background: rgba(36,129,163,0.14); border-color: rgba(36,129,163,0.45); }
.project-store {
  color: var(--text-muted);
  background: rgba(28,36,75,0.04);
}
.project-store:hover {
  color: var(--text);
  background: rgba(28,36,75,0.08);
  border-color: rgba(28,36,75,0.18);
}

/* ----- Fondateur ----- */
.founder { background: var(--bg2); }
.doc-card { background: #fff; }
.doc-card:hover {
  border-color: rgba(36,129,163,0.4);
  box-shadow: 0 10px 30px rgba(28,36,75,0.08);
}

/* ----- Contact : bandeau bleu nuit ----- */
.contact {
  background-color: var(--navy);
  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
}
.contact .section-title { color: #fff; }
.contact .section-sub { color: rgba(255,255,255,0.72); }
.contact-btn--primary {
  background: linear-gradient(135deg, var(--orange), var(--orange2));
  color: #fff;
  box-shadow: 0 8px 30px rgba(237,125,49,0.35);
}
.contact-btn--primary:hover { box-shadow: 0 10px 40px rgba(237,125,49,0.5); }
.contact-btn--ghost {
  color: #fff;
  border-color: rgba(255,255,255,0.4);
}
.contact-btn--ghost:hover { background: rgba(255,255,255,0.08); }

/* ----- Footer ----- */
.footer {
  background: var(--navy2);
  border-top-color: rgba(255,255,255,0.08);
}
.footer-title { color: #7cc3dc; }
.footer-contact,
.footer-icon { color: #fff; }
.footer-contact-sep { color: rgba(255,255,255,0.25); }
.footer-copy,
.footer-copy a { color: rgba(255,255,255,0.55); }
.footer-copy a:hover { color: #fff; }

/* ----- Sans bandeau de navigation : le logo porte l'accueil ----- */
html { scroll-padding-top: 0; }

.hero-logo {
  display: block;
  width: clamp(240px, 42vw, 440px);
  height: auto;
  margin: 0 auto 2rem;
  filter: invert(1); /* logo noir → blanc sur le bleu nuit */
}
.hero-title { font-size: clamp(2.2rem, 5.5vw, 4.2rem); }

/* ----- Pages simples (mentions légales) ----- */
.page { padding-top: 4rem; }
.page-logo { display: inline-block; margin-bottom: 2.5rem; }
.page-logo img { display: block; width: 150px; height: auto; }