/* =========================================================================
   Sphère Digital · Custom styles
   Built on top of Bootstrap 5.3 (native classes only, no renaming).
   Customization happens via :root overrides of --bs-* variables
   and a few unique graphic components (mockups, blobs, grain).
   ========================================================================= */

/* ---------- 1. Bootstrap design tokens overrides --------------------------- */
:root {
  /* Brand palette */
  --bs-primary: #5449f2;
  --bs-primary-rgb: 84, 73, 242;
  --sphere-50: #f6f6ff;
  --sphere-100: #ececff;
  --sphere-200: #d7d7ff;
  --sphere-600: #5449f2;
  --sphere-700: #4338c9;
  --sphere-800: #342b95;
  --sphere-900: #241f63;

  /* Links */
  --bs-link-color: #4338c9;
  --bs-link-color-rgb: 67, 56, 201;
  --bs-link-hover-color: #342b95;
  --bs-link-hover-color-rgb: 52, 43, 149;

  /* Typography */
  --bs-body-font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-color: #1e283b;
  --bs-body-color-rgb: 30, 40, 59;
  --bs-secondary-color: #475569;
  --bs-body-bg: #ffffff;
  --bs-body-font-size: 1rem;
  --bs-body-line-height: 1.65;

  /* Radius */
  --bs-border-radius: 0.75rem;
  --bs-border-radius-sm: 0.5rem;
  --bs-border-radius-lg: 1.25rem;
  --bs-border-radius-xl: 1.5rem;
  --bs-border-radius-2xl: 2rem;

  /* Borders */
  --bs-border-color: #e2e8f0;
  --bs-border-color-translucent: rgba(15, 23, 42, .08);

  color-scheme: light;
}

/* ---------- 2. Base ---------------------------------------------------------*/
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { letter-spacing: -0.005em; }

h1, h2, h3, h4, h5, h6, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  letter-spacing: -0.022em;
  color: #0f172a;
}

h1, .h1 { font-weight: 800; }
h2, .h2 { font-weight: 700; }
h3, .h3, h4, .h4 { font-weight: 700; }

.lead { color: #475569; }

::selection { background: rgba(84, 73, 242, .18); color: #1e283b; }

/* ---------- 3. Buttons polish ----------------------------------------------*/
.btn { font-weight: 600; transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease; }
.btn:active { transform: translateY(1px); }

.btn-primary {
  --bs-btn-bg: #5449f2;
  --bs-btn-border-color: #5449f2;
  --bs-btn-hover-bg: #4338c9;
  --bs-btn-hover-border-color: #4338c9;
  --bs-btn-active-bg: #342b95;
  --bs-btn-active-border-color: #342b95;
  box-shadow: 0 8px 24px rgba(84, 73, 242, .25);
}
.btn-primary:hover { box-shadow: 0 12px 32px rgba(84, 73, 242, .35); }

.btn-outline-secondary {
  --bs-btn-color: #1e283b;
  --bs-btn-border-color: #cbd5e1;
  --bs-btn-hover-bg: #f8fafc;
  --bs-btn-hover-color: #1e283b;
  --bs-btn-hover-border-color: #94a3b8;
}

.btn-lg { padding: .85rem 1.6rem; font-size: 1rem; border-radius: 1rem; }
.btn-sm { padding: .4rem .85rem; font-size: .85rem; }

/* Focus ring */
.btn:focus-visible, .form-control:focus, .form-select:focus, a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(84, 73, 242, .22) !important;
}

/* ---------- 4. Navbar ------------------------------------------------------*/
.navbar { backdrop-filter: saturate(180%) blur(12px); background-color: rgba(255, 255, 255, .85) !important; border-bottom: 1px solid #eef1f7; }
.navbar-brand { font-weight: 800; letter-spacing: -0.02em; }
.navbar .nav-link { color: #1e283b; font-weight: 500; transition: color .15s ease; }
.navbar .nav-link:hover, .navbar .nav-link:focus { color: #4338c9; }
.navbar .nav-link.active { color: #4338c9; }

.topbar { background: #f8fafc; border-bottom: 1px solid #eef1f7; font-size: .875rem; color: #64748b; }
.topbar .bi-circle-fill { color: #22c55e; font-size: .55rem; vertical-align: middle; }

/* ---------- 5. Cards -------------------------------------------------------*/
.card { border-radius: var(--bs-border-radius-lg); transition: transform .25s ease, box-shadow .25s ease; }
.card.shadow-sm { box-shadow: 0 4px 16px rgba(15, 23, 42, .05) !important; }
.card.shadow-lift { box-shadow: 0 18px 60px rgba(15, 23, 42, .12); }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 18px 50px rgba(15, 23, 42, .12) !important; }

.service-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ececff 0%, #d7d7ff 100%);
  color: #4338c9;
  font-size: 1.5rem;
}

/* ---------- 6. Forms -------------------------------------------------------*/
.form-control, .form-select {
  border-radius: .75rem;
  border-color: #e2e8f0;
  padding: .7rem .95rem;
  font-size: .95rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:hover, .form-select:hover { border-color: #cbd5e1; }
.form-label { font-weight: 600; font-size: .875rem; color: #334155; margin-bottom: .35rem; }

/* ---------- 7. Accordion (FAQ) ---------------------------------------------*/
.accordion {
  --bs-accordion-border-color: #eef1f7;
  --bs-accordion-border-radius: var(--bs-border-radius-lg);
  --bs-accordion-active-bg: #f6f6ff;
  --bs-accordion-active-color: #4338c9;
  --bs-accordion-btn-focus-box-shadow: 0 0 0 4px rgba(84, 73, 242, .18);
}
.accordion-button { font-weight: 600; }
.accordion-button:not(.collapsed) { box-shadow: none; }

/* ---------- 8. Badges ------------------------------------------------------*/
.badge { font-weight: 600; padding: .45em .8em; border-radius: 999px; letter-spacing: .01em; }
.badge.text-bg-light { background: #f1f5f9 !important; color: #1e283b !important; border: 1px solid #e2e8f0; }
.badge-glow { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.badge-sphere { background: var(--sphere-100); color: var(--sphere-700); border: 1px solid var(--sphere-200); }

/* ---------- 9. Hero & ambient backgrounds ----------------------------------*/
.hero {
  position: relative;
  overflow: hidden;
  padding-top: 4rem;
  padding-bottom: 5rem;
}
@media (min-width: 992px) {
  .hero { padding-top: 6rem; padding-bottom: 7rem; }
}

.hero h1 { font-size: clamp(2.25rem, 4.5vw, 3.75rem); line-height: 1.05; }
.hero .lead { font-size: clamp(1.05rem, 1.4vw, 1.25rem); }

.text-gradient {
  background: linear-gradient(135deg, #5449f2 0%, #8f8aff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.bg-ambient { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.bg-ambient .blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(48px);
  opacity: .55;
  mix-blend-mode: multiply;
}
.bg-ambient .blob-1 { width: 380px; height: 380px; background: #d7d7ff; top: -80px; left: -100px; animation: blob 9s ease-in-out infinite; }
.bg-ambient .blob-2 { width: 460px; height: 460px; background: #ececff; top: 40px; right: -120px; animation: blob 11s ease-in-out infinite; animation-delay: 2s; }
.bg-ambient .blob-3 { width: 320px; height: 320px; background: #f6f6ff; bottom: -120px; left: 30%; animation: blob 13s ease-in-out infinite; animation-delay: 4s; }

@keyframes blob {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(30px, -50px) scale(1.08); }
  66%      { transform: translate(-20px, 20px) scale(.92); }
}

.grain { background-image: radial-gradient(rgba(15, 23, 42, .06) 1px, transparent 1px); background-size: 14px 14px; }

/* ---------- 10. Mockups (Google Maps card / SERP card) ---------------------*/
.mockup-card {
  background: #fff;
  border-radius: 1.5rem;
  box-shadow: 0 24px 80px rgba(15, 23, 42, .15), 0 6px 20px rgba(15, 23, 42, .06);
  border: 1px solid #eef1f7;
  overflow: hidden;
}
.mockup-card .mockup-head {
  display: flex; align-items: center; gap: .4rem; padding: .65rem .9rem;
  background: #f8fafc; border-bottom: 1px solid #eef1f7;
}
.mockup-card .mockup-head .dot { width: 10px; height: 10px; border-radius: 50%; background: #cbd5e1; }
.mockup-card .mockup-head .dot.red   { background: #fca5a5; }
.mockup-card .mockup-head .dot.amber { background: #fcd34d; }
.mockup-card .mockup-head .dot.green { background: #86efac; }

/* GMB-style niche preview card (photo cover + rating + name + location). */
.gmb-card {
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 28px 60px -28px rgba(20, 16, 31, .28), 0 8px 18px -10px rgba(20, 16, 31, .12);
  border: 1px solid rgba(20, 16, 31, .06);
}
.gmb-card__cover {
  aspect-ratio: 16 / 11;
  background: #f5f3ee;
  overflow: hidden;
}
.gmb-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gmb-card__body { padding: 1.5rem 1.5rem 1.6rem; }
.gmb-card__stars {
  color: var(--acc);
  letter-spacing: .15rem;
  font-size: 1.05rem;
  line-height: 1;
}
.gmb-card__rating { color: var(--ink); font-weight: 600; font-size: .95rem; }
.gmb-card__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.35rem, 2.1vw, 1.7rem);
  color: var(--ink);
  margin: .7rem 0 .55rem;
  letter-spacing: -.01em;
  line-height: 1.15;
}
.gmb-card__addr {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: #6b6275;
  font-size: .95rem;
}
.gmb-card__addr .bi { color: var(--violet); font-size: 1.05rem; }

.serp-card { padding: 1rem 1.25rem; }
.serp-card .serp-url { color: #64748b; font-size: .82rem; }
.serp-card .serp-title { color: #1d4ed8; font-size: 1.05rem; font-weight: 600; margin-top: .15rem; }
.serp-card .serp-desc { color: #475569; font-size: .88rem; margin-top: .3rem; line-height: 1.45; }

/* Stats inside hero mockup */
.stat-pill {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .65rem; border-radius: 999px;
  font-size: .78rem; font-weight: 600;
  background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0;
}

/* ---------- 11. Sections, dividers ----------------------------------------*/
section { position: relative; }
.section-soft { background: #f8fafc; }
.section-dark { background: #0f172a; color: #e2e8f0; }
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: #f8fafc; }
.section-dark .lead, .section-dark p { color: #cbd5e1; }

/* ---------- 12. Footer -----------------------------------------------------*/
footer { background: #f8fafc; border-top: 1px solid #eef1f7; color: #475569; font-size: .92rem; }
footer h6 { color: #1e283b; font-weight: 700; font-size: .875rem; letter-spacing: .02em; text-transform: uppercase; }
footer a { color: #475569; text-decoration: none; }
footer a:hover { color: #4338c9; }

/* Services list in footer: split long list (10 niches) into 2 visual columns. */
.footer-services-grid {
  display: block !important;
  column-count: 2;
  column-gap: 1.5rem;
}
.footer-services-grid > li {
  break-inside: avoid;
  margin-bottom: .5rem;
}
@media (max-width: 575.98px) { .footer-services-grid { column-count: 1; } }

/* ---------- 13. Utilitaires perso ------------------------------------------*/
.kpi-number { font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 800; color: #4338c9; letter-spacing: -.025em; line-height: 1; }
.kpi-label { font-size: .9rem; color: #64748b; font-weight: 500; }

.avatar-initials {
  display: inline-flex; align-items: center; justify-content: center;
  width: 96px; height: 96px; border-radius: 50%;
  background: linear-gradient(135deg, #5449f2 0%, #8f8aff 100%);
  color: #fff; font-weight: 800; font-size: 2rem;
  box-shadow: 0 12px 32px rgba(84, 73, 242, .35);
}

.tag {
  display: inline-block;
  padding: .25rem .65rem;
  background: #ececff;
  color: #4338c9;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .02em;
}

/* Scroll-reveal helper (used by IntersectionObserver in JS) */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Smooth scroll for anchors */
html { scroll-behavior: smooth; scroll-padding-top: 90px; }

/* ---------- 14. Responsive tweaks ------------------------------------------*/
@media (max-width: 575.98px) {
  .btn-lg { padding: .7rem 1.3rem; font-size: .95rem; }
  .hero { padding-top: 2.5rem; padding-bottom: 3rem; }
}

/* ---------- 15. Contact page tweaks ----------------------------------------*/
.section-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 720px;
  margin: 0 auto;
}
.section-divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--bs-border-color) 25%, var(--bs-border-color) 75%, transparent);
}
.section-divider-label {
  font-size: .78rem;
  font-weight: 600;
  color: #475569;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .45rem 1rem;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid var(--bs-border-color);
  box-shadow: 0 2px 8px rgba(15, 23, 42, .04);
  white-space: nowrap;
}

/* Service-icon utility size override when used inline in contact direct cards */
.service-icon { flex-shrink: 0; }

/* Contact direct text wrapping */
.text-break { word-break: break-word; overflow-wrap: anywhere; }

/* ---------- 16. Témoignages clients ----------------------------------------*/
.avatar-initials.avatar-initials-sm {
  width: 48px; height: 48px; font-size: 1.05rem; font-weight: 700;
  box-shadow: 0 6px 16px rgba(84, 73, 242, .3);
}

/* Avatar stack (hero trust row) — overlapping mini avatars with letters */
.avatar-stack { display: inline-flex; }
.avatar-stack .avatar-initials {
  width: 34px; height: 34px; font-size: .78rem; font-weight: 700;
  border: 2px solid #ffffff; box-shadow: 0 4px 10px rgba(15, 23, 42, .12);
}
.avatar-stack .avatar-initials + .avatar-initials { margin-left: -12px; }
.avatar-initials.avatar-stack-1 { background: linear-gradient(135deg, #5449f2 0%, #8f8aff 100%); }
.avatar-initials.avatar-stack-2 { background: linear-gradient(135deg, #4338c9 0%, #7b6fff 100%); }
.avatar-initials.avatar-stack-3 { background: linear-gradient(135deg, #0ea5e9 0%, #67e8f9 100%); }
.avatar-initials.avatar-stack-4 { background: linear-gradient(135deg, #475569 0%, #94a3b8 100%); }
.avatar-initials.avatar-stack-5 { background: linear-gradient(135deg, #0d9488 0%, #5eead4 100%); }

/* Portrait crop helpers for hero/team photos */
.portrait-frame { aspect-ratio: 1 / 1; overflow: hidden; }
.portrait-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.review-stars { color: #f59e0b; font-size: .95rem; letter-spacing: .08em; line-height: 1; }
.testimonial-card .testimonial-quote { color: #334155; }
.badge-google {
  background: #ffffff; color: #3c4043; border: 1px solid #e2e8f0;
  display: inline-flex; align-items: center; gap: .4rem; font-weight: 600;
}
.badge-google .g-blue { color: #4285f4; } .badge-google .g-red { color: #ea4335; }
.badge-google .g-yellow { color: #fbbc05; } .badge-google .g-green { color: #34a853; }

/* ---------- 17. Bande garantie / réassurance -------------------------------*/
.reassurance-band {
  background: linear-gradient(135deg, var(--sphere-900) 0%, var(--sphere-700) 100%);
  color: #fff;
  border-radius: var(--bs-border-radius-2xl);
  position: relative;
  overflow: hidden;
}
.reassurance-band h2, .reassurance-band h3 { color: #ffffff; }
.reassurance-band p { color: #d7d7ff; }
.reassurance-icon {
  width: 56px; height: 56px; border-radius: 16px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #ffffff; font-size: 1.5rem;
}

/* ---------- 18. Navbar : ombre douce au scroll -----------------------------*/
.navbar.is-scrolled { box-shadow: 0 6px 24px rgba(15, 23, 42, .07); border-bottom-color: transparent; }

/* ---------- 19. Landing niches : header allégé -----------------------------*/
.section-soft-alt { background: #f6f6ff; }


/* =========================================================================
   REFONTE 2026 · Direction A "Éditorial" — couche posée par-dessus.
   Bootstrap natif conservé : surcharge de variables --bs-* / tokens maison
   + composants uniques. Police de titre Bricolage Grotesque, accent ambre.
   ========================================================================= */
/* =========================================================================
   Sphère Digital · Refonte — couche "design system" par-dessus style.css
   Pilotée par des tokens CSS (--acc, --ink, --paper, --display) définis
   en tête de chaque page de direction. Bootstrap natif conservé.
   ========================================================================= */

:root {
  --violet: #5449f2;
  --violet-700: #4338c9;
  --violet-900: #241f63;
  /* Direction A — Éditorial (ambre chaud) */
  --acc: #f5972a;
  --acc-rgb: 245, 151, 42;
  --acc-ink: #b4530a;
  --ink: #1a1330;
  --paper: #faf7f2;
  --display: 'Bricolage Grotesque', 'Inter', sans-serif;
  --display-weight: 700;
  --display-tracking: -0.025em;
}

/* ---------- Base ---------------------------------------------------------- */
body { background: var(--paper); color: #2a2535; }
.bg-paper { background: var(--paper) !important; }

h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: var(--display);
  color: var(--ink);
  letter-spacing: var(--display-tracking);
  font-weight: var(--display-weight);
}
.lead { color: #57506a; }
.text-secondary { color: #6b6480 !important; }

/* ---------- Kicker / index de section ------------------------------------ */
.kicker {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: 'Inter', sans-serif;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--acc-ink);
}
.kicker::before {
  content: attr(data-index);
  font-variant-numeric: tabular-nums;
  color: var(--acc);
  font-weight: 800;
}
.kicker--plain::before { content: none; }
.kicker .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--acc); }

/* surligneur accent derrière un mot */
.mark {
  background: linear-gradient(180deg, transparent 58%, rgba(var(--acc-rgb), .28) 58%);
  padding: 0 .04em;
}
.text-acc { color: var(--acc-ink) !important; }
.text-violet { color: var(--violet) !important; }

/* ---------- Titres de section -------------------------------------------- */
.sec-title { font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1.04; }
.sec-lead { font-size: clamp(1.02rem, 1.3vw, 1.18rem); color: #57506a; }

/* ---------- Boutons ------------------------------------------------------- */
.btn-primary {
  --bs-btn-bg: var(--violet); --bs-btn-border-color: var(--violet);
  --bs-btn-hover-bg: var(--violet-700); --bs-btn-hover-border-color: var(--violet-700);
  --bs-btn-active-bg: var(--violet-900);
  box-shadow: 0 10px 26px rgba(84,73,242,.26);
}
.btn-accent {
  --bs-btn-color: #1b1206; --bs-btn-bg: var(--acc); --bs-btn-border-color: var(--acc);
  --bs-btn-hover-color: #1b1206;
  --bs-btn-hover-bg: var(--acc-ink); --bs-btn-hover-border-color: var(--acc-ink);
  color: #1b1206; font-weight: 700;
  box-shadow: 0 10px 26px rgba(var(--acc-rgb), .32);
}
.btn-accent:hover { color: #fff; }
.btn-ink {
  --bs-btn-color: #fff; --bs-btn-bg: var(--ink); --bs-btn-border-color: var(--ink);
  --bs-btn-hover-bg: #000; --bs-btn-hover-border-color: #000; --bs-btn-hover-color: #fff;
}
.btn-lg { border-radius: .9rem; padding: .9rem 1.6rem; }

/* ---------- Navbar -------------------------------------------------------- */
.navbar { background: color-mix(in srgb, var(--paper) 86%, transparent) !important; border-bottom: 1px solid rgba(20,16,31,.07); }
.navbar .nav-link { color: #312b40; font-weight: 500; }
.navbar .nav-link:hover, .navbar .nav-link.active { color: var(--violet); }
.navbar-brand { font-family: var(--display); }
.topbar { background: var(--ink); color: #cfc8dd; border: 0; }
.topbar a { color: #cfc8dd !important; }
.topbar .bi-circle-fill { color: #34d399; }

/* ---------- Cartes -------------------------------------------------------- */
.r-card {
  background: #fff;
  border: 1px solid rgba(20,16,31,.09);
  border-radius: 1.1rem;
  box-shadow: 0 1px 2px rgba(20,16,31,.04);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.r-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 50px rgba(20,16,31,.10);
  border-color: rgba(var(--acc-rgb), .5);
}
.r-card .card-body { padding: 1.6rem; }

/* icône service */
.svc-ico {
  width: 54px; height: 54px; border-radius: 15px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.5rem; color: var(--violet);
  background: color-mix(in srgb, var(--violet) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--violet) 22%, #fff);
}
.svc-ico.acc { color: var(--acc-ink); background: color-mix(in srgb, var(--acc) 16%, #fff); border-color: color-mix(in srgb, var(--acc) 34%, #fff); }

.check { color: var(--violet); flex-shrink: 0; }
.svc-num {
  font-family: var(--display); font-weight: 800; font-size: 1.05rem;
  color: var(--acc); line-height: 1;
}

/* ---------- Chiffres / KPI ----------------------------------------------- */
.stat-num {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2.4rem, 4.2vw, 3.5rem);
  line-height: .95; letter-spacing: -.03em; color: var(--violet);
}
.stat-num.acc { color: var(--acc-ink); }
.stat-label { color: #6b6480; font-size: .92rem; }

/* ---------- Badges -------------------------------------------------------- */
.badge-soft {
  background: #fff; border: 1px solid rgba(20,16,31,.1);
  color: #312b40; font-weight: 600; border-radius: 999px;
  padding: .5em .9em; display: inline-flex; align-items: center; gap: .45rem;
}
.badge-soft .bi { color: var(--acc-ink); }
.badge-accent { background: color-mix(in srgb, var(--acc) 18%, #fff); color: var(--acc-ink); border: 1px solid color-mix(in srgb, var(--acc) 38%, #fff); }
.badge-pop {
  background: var(--acc); color: #1b1206; font-weight: 800;
  border-radius: 999px; padding: .5em 1em;
  box-shadow: 0 8px 20px rgba(var(--acc-rgb), .4);
}

/* ---------- Sections sombres --------------------------------------------- */
.ink-section { background: var(--ink); color: #e7e3f0; }
.ink-section h1, .ink-section h2, .ink-section h3, .ink-section h4 { color: #fff; }
.ink-section .lead, .ink-section p { color: #c7c0db; }
.ink-section .kicker { color: var(--acc); }
.ink-panel {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 1rem;
}

/* ---------- Hero ---------------------------------------------------------- */
.hero-xl { font-size: clamp(2.4rem, 4.4vw, 3.6rem); line-height: 1.05; letter-spacing: -.03em; }
.hero-grad {
  background: linear-gradient(120deg, var(--violet) 0%, color-mix(in srgb, var(--violet) 55%, var(--acc)) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.eyebrow-rule { width: 38px; height: 2px; background: var(--acc); display: inline-block; }

/* mini-carte flottante résultats */
.float-card {
  background: #fff; border: 1px solid rgba(20,16,31,.1);
  border-radius: 1rem; box-shadow: 0 22px 60px rgba(20,16,31,.16);
  padding: 1rem 1.15rem;
}
.spark { display: flex; align-items: flex-end; gap: 3px; height: 34px; }
.spark span { width: 7px; border-radius: 3px 3px 0 0; background: color-mix(in srgb, var(--violet) 30%, #fff); }
.spark span.up { background: var(--acc); }

/* ---------- Bandeau preuve ------------------------------------------------ */
.proof-band { border-top: 1px solid rgba(20,16,31,.09); border-bottom: 1px solid rgba(20,16,31,.09); }

/* ---------- Motif carte (direction C) ------------------------------------ */
.map-motif {
  background-image:
    linear-gradient(rgba(20,16,31,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,16,31,.045) 1px, transparent 1px);
  background-size: 34px 34px;
}
.map-pin {
  width: 30px; height: 30px; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg); background: var(--violet);
  display: inline-flex; box-shadow: 0 8px 18px rgba(84,73,242,.4);
}

/* ---------- Témoignages --------------------------------------------------- */
.quote-card { background: #fff; border: 1px solid rgba(20,16,31,.09); border-radius: 1.1rem; }
.review-stars { color: var(--acc); }
.av-init {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: linear-gradient(135deg, var(--violet), color-mix(in srgb, var(--violet) 50%, var(--acc)));
  color: #fff; font-weight: 700; font-family: var(--display);
}

/* ---------- Offres -------------------------------------------------------- */
.price-num { font-family: var(--display); font-weight: 800; font-size: 2.2rem; letter-spacing: -.03em; color: var(--ink); }
.tier-pop { border: 2px solid var(--violet) !important; box-shadow: 0 26px 60px rgba(84,73,242,.18) !important; }

/* ---------- Accordion ----------------------------------------------------- */
.accordion { --bs-accordion-active-bg: color-mix(in srgb, var(--acc) 12%, #fff); --bs-accordion-active-color: var(--acc-ink); }
.accordion-item { background: #fff; }
.accordion-button { font-family: var(--display); font-weight: 600; color: var(--ink); }

/* ---------- Footer -------------------------------------------------------- */
footer.r-footer { background: var(--ink); color: #b9b1cc; border: 0; }
footer.r-footer h6 { color: #fff; }
footer.r-footer a { color: #b9b1cc; }
footer.r-footer a:hover { color: var(--acc); }

/* ---------- Reveal -------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- Divider numéroté --------------------------------------------- */
.flow-line { width: 1px; background: linear-gradient(var(--acc), transparent); flex: 1; }

/* ---------- Utilitaires --------------------------------------------------- */
.rule { height: 1px; background: rgba(20,16,31,.1); border: 0; }
.serif-em { font-style: italic; }


/* ---------- 20. Accueil · Hero éditorial (Direction A) ----------------------*/
.hero-a {
  background:
    radial-gradient(120% 90% at 88% 8%, color-mix(in srgb, var(--acc) 14%, transparent) 0%, transparent 45%),
    radial-gradient(80% 70% at 5% 0%, color-mix(in srgb, var(--violet) 12%, transparent) 0%, transparent 50%),
    var(--paper);
}
.hero-a .tilt { transform: rotate(1.5deg); }
.hero-a .hero-photo { border-radius: 1.4rem; border: 1px solid rgba(20,16,31,.08); box-shadow: 0 30px 80px rgba(20,16,31,.16); }