/* ==========================================================================
   MaBorne.fr — public marketing site (v2) design system.

   This is the PUBLIC site's own brand layer — intentionally distinct from the
   ERP/portal `--ins-*` admin theme. Tokens come from the code.html mockup.
   Custom CSS is limited to what Bootstrap utilities can't express (brand
   tokens, hero, marquee, reveal); everything else is done with BS utilities
   in the templates.
   ========================================================================== */

:root {
  --mablue: #0B3D6E;
  --mablue-mid: #1558A0;
  --mablue-light: #2272CC;
  --mablue-pale: #EAF2FB;
  --mablue-dark: #07253F;
  --magreen: #0E8A5F;
  --magreen-light: #14B87E;
  --magreen-pale: #E3F5EE;
  --ma-muted: #7B93A8;
  --ma-border: #D8E8F4;
  --ma-bg: #F5F9FE;
}

body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  color: var(--mablue-dark);
  overflow-x: hidden;
}

.font-sora { font-family: 'Sora', system-ui, sans-serif; }

/* --- brand helpers (kept minimal; prefer BS utilities elsewhere) --------- */
.text-mablue { color: var(--mablue) !important; }
.text-mablue-dark { color: var(--mablue-dark) !important; }
.text-magreen { color: var(--magreen) !important; }
.text-magreen-light { color: var(--magreen-light) !important; }
.bg-mablue { background-color: var(--mablue) !important; }
.btn.bg-mablue:hover { background-color: var(--mablue-mid) !important; }
.bg-magreen-pale { background-color: var(--magreen-pale) !important; }
.bg-mablue-dark { background-color: var(--mablue-dark) !important; }
.bg-ma { background-color: var(--ma-bg) !important; }
.ls-wide { letter-spacing: .08em; }
.ls-widest { letter-spacing: .12em; }
.fs-tiny { font-size: .625rem; }          /* 10px micro-labels / pill badges */
.backdrop-blur { backdrop-filter: blur(20px); }
.dot-8 { width: 8px; height: 8px; }
.avatar-40 { width: 40px; height: 40px; }
.avatar-48 { width: 48px; height: 48px; }
.icon-72 { width: 72px; height: 72px; }
.play-btn { width: 80px; height: 80px; }
.min-h-400 { min-height: 400px; }
.profile-media { height: 160px; }
.partner-card { min-width: 240px; }
.map-teaser-dots {
  background-image: radial-gradient(var(--mablue) 1px, transparent 1px);
  background-size: 20px 20px;
}
.ma-consent { z-index: 1090; }   /* above the lead modal (1055) so it's never hidden */

/* Google Places autocomplete dropdown must sit ABOVE the lead modal (1055),
   otherwise its suggestions render behind the modal and are unusable. */
.pac-container { z-index: 1056 !important; }

/* --- installer-map legend swatches (no icon font on the public site) ----- */
.map-legend-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; }
.map-legend-cluster {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(21, 88, 160, 0.55); color: #fff;   /* matches CLUSTER_FILL in google_map.js */
  font-size: 11px; font-weight: 600; flex: 0 0 auto;
}

/* --- section label decorator -------------------------------------------- */
.s-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--magreen);
  margin-bottom: .9rem;
}
.s-label::before {
  content: '';
  width: 20px;
  height: 2px;
  background: var(--magreen);
  border-radius: 2px;
}

/* --- buttons ------------------------------------------------------------- */
.btn-magreen {
  background-color: var(--magreen-light);
  color: #fff;
  border: none;
  font-weight: 700;
  border-radius: .5rem;
  transition: all .3s;
}
.btn-magreen:hover {
  background-color: var(--magreen);
  color: #fff;
  transform: translateY(-2px);
}

/* --- navbar -------------------------------------------------------------- */
#mainNav {
  transition: all .3s ease;
  height: 80px;
}
#mainNav.scrolled {
  background-color: rgba(255, 255, 255, .95);
  backdrop-filter: blur(10px);
  height: 64px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .05);
}
#mainNav .nav-link {
  color: rgba(255, 255, 255, .9);
  font-weight: 500;
  font-size: .875rem;
}
#mainNav.scrolled .nav-link { color: var(--mablue-mid); }
#mainNav .navbar-toggler-icon {
  filter: invert(1) grayscale(1);
}
#mainNav.scrolled .navbar-toggler-icon { filter: none; }

/* --- hero ---------------------------------------------------------------- */
#hero, #become-hero {
  position: relative;
  min-height: 100vh;
  background-color: var(--mablue-dark);
}
.hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .4;
  z-index: 0;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7, 37, 63, .9) 0%, rgba(11, 61, 110, .6) 50%, transparent 100%);
  z-index: 1;
}
.hero-content {
  position: relative;
  z-index: 2;
  padding-top: 100px;
}
/* Hero title is a bit large on phones — scale it down (home + become heroes). */
@media (max-width: 575.98px) {
  #hero h1, #become-hero h1 { font-size: 2rem; }
}
/* Become-page section headings — trim on desktop so the longer titles stay one line. */
@media (min-width: 992px) {
  #avantages h2 { font-size: 2rem; }      /* "Pourquoi rejoindre MaBorne ?" */
  #become-how h2 { font-size: 1.9rem; }   /* "Rejoignez le réseau en 4 étapes" */
}
/* Footer copyright — the wide letter-spacing makes it wrap on phones; tighten it to one line. */
@media (max-width: 575.98px) {
  .footer-copy { font-size: .72rem; letter-spacing: normal; }
}

/* HTMX inline spinners — hidden until the owning request (e.g. a join-modal step) is in-flight. */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline-block; }

/* --- legal pages (Conditions générales / Confidentialité) -------------------
   The seeded body is an imported self-styled document; its own CSS is dropped and
   it's styled here instead, scoped to .legal-content, INSIDE the www chrome. */
.legal-content { max-width: 820px; color: var(--mablue-dark); line-height: 1.7; }
.legal-content header, .legal-content footer, .legal-content .hero { display: none; }   /* imported chrome → replaced by the www navbar + page header + footer */
.legal-content .container { max-width: none; width: auto; padding: 0; margin: 0; }
.legal-content h1, .legal-content h2, .legal-content h3, .legal-content h4 { font-family: 'Sora', sans-serif; color: var(--mablue); line-height: 1.25; }
.legal-content h2 { font-size: 1.5rem; font-weight: 700; margin: 2.25rem 0 .9rem; }
.legal-content h3 { font-size: 1.15rem; font-weight: 700; margin: 1.75rem 0 .7rem; }
.legal-content p { margin: 0 0 1rem; }
.legal-content ul, .legal-content ol { margin: 0 0 1rem 1.25rem; padding: 0; }
.legal-content li { margin-bottom: .4rem; }
.legal-content a { color: var(--mablue-light); }
.legal-content strong { color: var(--mablue-dark); }
.legal-content hr { border: 0; border-top: 1px solid #e9ecef; margin: 2rem 0; }
.legal-content table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .95rem; }
.legal-content th, .legal-content td { border: 1px solid #dee2e6; padding: .5rem .65rem; text-align: left; }
.legal-content th { background: var(--mablue-pale); }
.legal-content .tag { display: inline-block; background: var(--magreen-pale); color: var(--magreen); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: .25rem .6rem; border-radius: 999px; }
.legal-content .meta { color: #6c757d; font-size: .9rem; }
.legal-content .info-box { background: var(--mablue-pale); border-left: 4px solid var(--mablue-light); border-radius: 10px; padding: 1rem 1.25rem; margin: 1.5rem 0; }
.legal-content .warning-box { background: #fff8e6; border-left: 4px solid #f0ad4e; border-radius: 10px; padding: 1rem 1.25rem; margin: 1.5rem 0; }
.legal-content .module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.legal-content .module-card { border: 1px solid #e9ecef; border-radius: 10px; padding: 1rem; }
.legal-content .module-name { font-weight: 700; color: var(--mablue); }

/* First section of an inner page (e.g. Contact) clears the fixed navbar. */
.pt-nav { padding-top: 120px; }

/* Anti-spam honeypot — visually hidden from humans, still present for bots
   (off-screen rather than display:none, which some bots skip). */
.antispam-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* --- process steps ------------------------------------------------------- */
.step-card .step-num {
  width: 48px;
  height: 48px;
  background: var(--mablue);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  position: absolute;
  top: -12px;
  left: -12px;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
}
.step-img-box {
  width: 180px;
  height: 180px;
  background: var(--mablue-pale);
  border-radius: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  border: 2px solid #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, .02);
  transition: all .3s;
}
.step-card:hover .step-img-box {
  box-shadow: 0 12px 24px rgba(0, 0, 0, .08);
  transform: scale(1.02);
}

/* --- profile cards ------------------------------------------------------- */
.profile-card {
  border: 2px solid #F1F5F9;
  border-radius: 1.5rem;
  overflow: hidden;
  transition: all .3s;
}
.profile-card:hover {
  border-color: var(--mablue);
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(11, 61, 110, .1);
}

/* --- testimonials -------------------------------------------------------- */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.testimonial-card {
  min-width: 320px;
  border-radius: 1.5rem;
  border: 1px solid var(--ma-border);
  padding: 2rem;
  background: #fff;
}

/* --- final CTA ----------------------------------------------------------- */
.final-cta {
  position: relative;
  background-size: cover;
  background-position: center;
  padding: 8rem 0;
}
.final-cta-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(14, 138, 95, .9) 0%, rgba(11, 61, 110, .9) 100%);
}

/* --- partner marquee ----------------------------------------------------- */
@keyframes scrollLogos {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.animate-scroll {
  animation: scrollLogos 30s linear infinite;
  display: flex;
  width: max-content;
}

/* --- scroll reveal (progressive enhancement: only active when JS adds .js) - */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s ease-out, transform .8s ease-out;
}
.js .reveal.active {
  opacity: 1;
  transform: none;
}

/* --- accessibility: respect reduced-motion ------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .animate-scroll { animation: none; }
  html.scroll-smooth { scroll-behavior: auto; }
}