/* solution-page.css — styles communs pages solutions */

/* ══════════════════════════════════════════════════════
   VARIABLES SOLUTIONS
══════════════════════════════════════════════════════ */
:root {
  --font-primary: 'Inter', system-ui, -apple-system, sans-serif;
  --sol-accent: var(--page-accent-1, #4facfe);
  --sol-accent2: var(--page-accent-2, #7c3aed);
  --sol-grad: linear-gradient(135deg, var(--page-accent-1, #4facfe) 0%, var(--page-accent-2, #7c3aed) 100%);
  --sol-radius: 12px;
  --sol-gap: 16px;
  --sol-pad: 36px;
  --sol-pad-m: 22px;
}

/* ══════════════════════════════════════════════════════
   ACCENT CONTEXTUEL PAR PAGE
══════════════════════════════════════════════════════ */
:root {
  --page-accent-1: #3E72F5;
  --page-accent-2: #7c3aed;
  --page-accent-soft: rgba(62,114,245,0.12);
  --page-accent-border: rgba(62,114,245,0.30);
  --page-accent-glow: rgba(62,114,245,0.18);
  --page-accent-text: #3E72F5;
}

/* Homepage / default */
body[data-page-accent="homepage"] {
  --page-accent-1: #3E72F5;
  --page-accent-2: #7c3aed;
  --page-accent-soft: rgba(62,114,245,0.12);
  --page-accent-border: rgba(62,114,245,0.30);
  --page-accent-glow: rgba(62,114,245,0.18);
  --page-accent-text: #3E72F5;
}

/* Affiliation — indigo → violet */
body[data-page-accent="affiliation"] {
  --page-accent-1: #4f46e5;
  --page-accent-2: #7c3aed;
  --page-accent-soft: rgba(79,70,229,0.12);
  --page-accent-border: rgba(79,70,229,0.30);
  --page-accent-glow: rgba(79,70,229,0.18);
  --page-accent-text: #6366f1;
}

/* Lead Generation — bleu → cyan */
body[data-page-accent="lead-generation"] {
  --page-accent-1: #4facfe;
  --page-accent-2: #00cfff;
  --page-accent-soft: rgba(79,172,254,0.12);
  --page-accent-border: rgba(79,172,254,0.30);
  --page-accent-glow: rgba(79,172,254,0.18);
  --page-accent-text: #4facfe;
}

/* Social Shopping — rose → violet */
body[data-page-accent="social-shopping"] {
  --page-accent-1: #ec4899;
  --page-accent-2: #7c3aed;
  --page-accent-soft: rgba(236,72,153,0.12);
  --page-accent-border: rgba(236,72,153,0.30);
  --page-accent-glow: rgba(236,72,153,0.18);
  --page-accent-text: #ec4899;
}

/* Content to Commerce — cyan → bleu électrique */
body[data-page-accent="content-to-commerce"] {
  --page-accent-1: #06b6d4;
  --page-accent-2: #3E72F5;
  --page-accent-soft: rgba(6,182,212,0.12);
  --page-accent-border: rgba(6,182,212,0.30);
  --page-accent-glow: rgba(6,182,212,0.18);
  --page-accent-text: #06b6d4;
}

/* SMS/RCS/WhatsApp — turquoise → bleu */
body[data-page-accent="messaging"] {
  --page-accent-1: #14b8a6;
  --page-accent-2: #3E72F5;
  --page-accent-soft: rgba(20,184,166,0.12);
  --page-accent-border: rgba(20,184,166,0.30);
  --page-accent-glow: rgba(20,184,166,0.18);
  --page-accent-text: #14b8a6;
}

/* Drive to Store — jaune fluo contrôlé → violet */
body[data-page-accent="drive-to-store"] {
  --page-accent-1: #a3e635;
  --page-accent-2: #7c3aed;
  --page-accent-soft: rgba(163,230,53,0.10);
  --page-accent-border: rgba(163,230,53,0.28);
  --page-accent-glow: rgba(163,230,53,0.14);
  --page-accent-text: #84cc16;
}

/* Creators & Influenceurs — rose → violet */
body[data-page-accent="creators"] {
  --page-accent-1: #ec4899;
  --page-accent-2: #7c3aed;
  --page-accent-soft: rgba(236,72,153,0.12);
  --page-accent-border: rgba(236,72,153,0.30);
  --page-accent-glow: rgba(236,72,153,0.18);
  --page-accent-text: #ec4899;
}

/* Affiliates and Networks — bleu → violet */
body[data-page-accent="affiliates"] {
  --page-accent-1: #3E72F5;
  --page-accent-2: #7c3aed;
  --page-accent-soft: rgba(62,114,245,0.12);
  --page-accent-border: rgba(62,114,245,0.30);
  --page-accent-glow: rgba(62,114,245,0.18);
  --page-accent-text: #3E72F5;
}

/* Pricing — bleu électrique → violet */
body[data-page-accent="pricing"] {
  --page-accent-1: #3E72F5;
  --page-accent-2: #7c3aed;
  --page-accent-soft: rgba(62,114,245,0.12);
  --page-accent-border: rgba(62,114,245,0.30);
  --page-accent-glow: rgba(62,114,245,0.18);
  --page-accent-text: #3E72F5;
}

/* Blog et Guides — bleu → cyan */
body[data-page-accent="blog"],
body[data-page-accent="guides"] {
  --page-accent-1: #3E72F5;
  --page-accent-2: #06b6d4;
  --page-accent-soft: rgba(62,114,245,0.12);
  --page-accent-border: rgba(62,114,245,0.30);
  --page-accent-glow: rgba(62,114,245,0.18);
  --page-accent-text: #3E72F5;
}

/* Contact — bleu électrique → violet */
body[data-page-accent="contact"] {
  --page-accent-1: #3E72F5;
  --page-accent-2: #7c3aed;
  --page-accent-soft: rgba(62,114,245,0.12);
  --page-accent-border: rgba(62,114,245,0.30);
  --page-accent-glow: rgba(62,114,245,0.18);
  --page-accent-text: #3E72F5;
}

/* ══════════════════════════════════════════════════════
   PAGE LAYOUT
══════════════════════════════════════════════════════ */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-primary);
  -webkit-font-smoothing: antialiased;
}

body.dark {
  --bg:       #030014;
  --bg-sub:   #07041a;
  --surface:  rgba(255,255,255,0.04);
  --surface2: rgba(255,255,255,0.07);
  --border:   rgba(255,255,255,0.08);
  --text:     #ffffff;
  --text-2:   rgba(255,255,255,0.55);
  --text-3:   rgba(255,255,255,0.35);
  --nav-bg:   rgba(3,0,20,0.70);
  --nav-border: rgba(255,255,255,0.07);
  --drop-bg:  rgba(4,1,22,0.97);
  --drop-border: rgba(255,255,255,0.09);
  --drop-shadow: 0 16px 48px rgba(0,0,0,0.78);
  --btn-text: #ffffff;
  --tg-bg:    linear-gradient(145deg,#0c0824,#160e3c);
  --tg-shadow: inset 2px 2px 6px rgba(0,0,0,.55),inset -1px -1px 3px rgba(147,130,255,.12),0 2px 10px rgba(0,0,0,.55),0 0 0 1px rgba(147,130,255,.18);
  --tg-text-c: rgba(147,130,255,.75);
  --tg-knob-glow: 0 0 10px rgba(147,130,255,.35);
  --tg-icon-c: #9382ff;
  --logo-filter: none;
  --cta1: linear-gradient(90deg,#6246ea 0%,#2d8ef0 100%);
  --g-text: linear-gradient(90deg,#4facfe 0%,#00cfff 35%,#7c3aed 100%);
}

body:not(.dark) {
  --bg:       #ffffff;
  --bg-sub:   #f5f5ff;
  --surface:  rgba(0,0,76,0.03);
  --surface2: rgba(0,0,76,0.055);
  --border:   rgba(0,0,76,0.08);
  --text:     #16215c;
  --text-2:   rgba(0,0,76,0.55);
  --text-3:   rgba(0,0,76,0.35);
  --nav-bg:   rgba(235,234,255,0.82);
  --nav-border: rgba(0,0,0,0.09);
  --drop-bg:  rgba(255,255,255,0.98);
  --drop-border: rgba(0,0,0,0.08);
  --drop-shadow: 0 8px 32px rgba(0,0,0,0.14);
  --btn-text: #16215c;
  --tg-bg:    linear-gradient(145deg,#e6e4f8,#f4f3ff);
  --tg-shadow: inset 2px 2px 5px rgba(0,0,0,.08),inset -1px -1px 3px rgba(255,255,255,.9),0 2px 8px rgba(0,0,0,.12),0 0 0 1px rgba(0,0,0,.06);
  --tg-text-c: rgba(79,70,229,.70);
  --tg-knob-glow: 0 2px 10px rgba(0,0,0,.18);
  --tg-icon-c: #f59e0b;
  --logo-filter: invert(1) brightness(0.12);
  --cta1: linear-gradient(90deg,#4530d0 0%,#1470cc 100%);
  --g-text: linear-gradient(90deg,#1478d4 0%,#0092bb 35%,#5a18c0 100%);
}

.sol-page {
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

/* ══════════════════════════════════════════════════════
   NAVIGATION — identique homepage
══════════════════════════════════════════════════════ */
.hp-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  height: var(--nav-h, 72px);
  background: var(--nav-bg);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, backdrop-filter .3s;
}
.hp-nav.scrolled {
  border-bottom-color: var(--nav-border);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
}
.hp-nav-inner {
  max-width: 1360px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 32px;
  gap: 4px;
}
.hp-logo-link {
  text-decoration: none;
  display: flex;
  align-items: center;
  line-height: 0;
  margin-right: 24px;
  flex-shrink: 0;
}
.hp-logo-img {
  height: 22px;
  width: auto;
  display: block;
  filter: var(--logo-filter);
  transition: filter .2s;
  max-width: 200px;
  transform: translateY(-1.5px);
}
.hp-logo-lm { display: none; filter: none; }
body:not(.dark) .hp-logo-dm { display: none; }
body:not(.dark) .hp-logo-lm { display: block; }

.hp-nav-links {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0;
  flex: 1;
  transform: translateY(2px);
}
.hp-navbtn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color .15s, background .15s;
  white-space: nowrap;
  text-decoration: none;
}
.hp-navbtn:hover,
.hp-has-drop.open > .hp-navbtn { color: var(--text); background: rgba(255,255,255,0.07); }
body:not(.dark) .hp-navbtn:hover,
body:not(.dark) .hp-has-drop.open > .hp-navbtn { color: #1470cc; background: rgba(20,112,204,0.06); }
.hp-navbtn-plain { gap: 0; }

.hp-chevron {
  transition: transform .22s cubic-bezier(.34,1.56,.64,1);
  flex-shrink: 0;
}
.hp-has-drop.open .hp-chevron { transform: rotate(180deg); }
.hp-has-drop { position: relative; }

.hp-drop {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 185px;
  background: var(--drop-bg);
  border: 1px solid var(--drop-border);
  border-radius: 10px;
  box-shadow: var(--drop-shadow);
  padding: 6px;
  opacity: 0;
  transform: translateY(-8px) scale(.97);
  pointer-events: none;
  transition: opacity .18s, transform .18s;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.hp-has-drop.open .hp-drop {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.hp-drop-link {
  display: block;
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
  transition: background .12s, color .12s;
}
.hp-drop-link:hover { background: rgba(255,255,255,0.07); color: var(--text); }

.hp-nav-right {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-left: auto;
  transform: translateY(2px);
}

/* Toggle */
.hp-toggle {
  background: none; border: none; cursor: pointer; padding: 0;
  border-radius: 999px; outline: none;
}
.hp-tg-track {
  display: flex;
  align-items: center;
  width: 124px; height: 44px;
  border-radius: 999px;
  background: var(--tg-bg);
  box-shadow: var(--tg-shadow);
  position: relative;
  padding: 0;
  transition: background .4s, box-shadow .4s;
  overflow: hidden;
}
.hp-tg-label {
  position: absolute;
  font-size: 7.5px; font-weight: 700;
  letter-spacing: 0.7px; text-transform: uppercase;
  color: var(--tg-text-c);
  transition: color .4s, left .4s cubic-bezier(.34,1.56,.64,1), right .4s cubic-bezier(.34,1.56,.64,1), opacity .25s;
  white-space: nowrap; user-select: none;
}
body.dark .hp-tg-label      { left: 12px; right: auto; }
body:not(.dark) .hp-tg-label { right: 12px; left: auto; }
.hp-tg-knob {
  position: absolute;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #ffffff;
  top: 3px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.28), 0 4px 16px rgba(0,0,0,.18), var(--tg-knob-glow);
  transition: left .42s cubic-bezier(.34,1.56,.64,1), box-shadow .4s;
}
body.dark .hp-tg-knob       { left: calc(100% - 41px); }
body:not(.dark) .hp-tg-knob { left: 3px; }
.hp-tg-icon { position: absolute; transition: opacity .25s, transform .35s cubic-bezier(.34,1.56,.64,1); color: var(--tg-icon-c); }
body.dark .hp-tg-moon       { opacity: 1; transform: rotate(0deg) scale(1); }
body.dark .hp-tg-sun        { opacity: 0; transform: rotate(45deg) scale(.6); }
body:not(.dark) .hp-tg-moon { opacity: 0; transform: rotate(-45deg) scale(.6); }
body:not(.dark) .hp-tg-sun  { opacity: 1; transform: rotate(0deg) scale(1); }

/* Sign in / up */
.hp-btn-signin,
.hp-btn-signup {
  display: inline-flex; align-items: center;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px; font-weight: 600; letter-spacing: .4px;
  text-decoration: none;
  padding: 8px 20px; border-radius: 999px; border: none;
  white-space: nowrap; cursor: pointer; transition: opacity .15s;
}
.hp-btn-signin { position: relative; background: transparent; color: #ffffff; }
body:not(.dark) .hp-btn-signin { color: #16215c; }
.hp-btn-signin::before {
  content: '';
  position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: var(--cta1);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.hp-btn-signin:hover { opacity: .75; }
.hp-btn-signup { color: #ffffff; background: var(--cta1); }
.hp-btn-signup:hover { opacity: .85; }

/* Burger */
.hp-burger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer;
  padding: 4px; margin-left: 12px;
}
.hp-burger span { display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--text); }

/* ══════════════════════════════════════════════════════
   HERO SOLUTION
══════════════════════════════════════════════════════ */
.sol-hero {
  padding-top: calc(var(--nav-h, 72px) + 72px);
  padding-bottom: 80px;
  position: relative;
  overflow: hidden;
}
body.dark .sol-hero { background: #030014; }
body:not(.dark) .sol-hero { background: linear-gradient(180deg, #ffffff 60%, #f0f0ff 100%); }

.sol-hero-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.sol-breadcrumb {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 20px;
}
.sol-breadcrumb a { color: var(--text-3); text-decoration: none; }
.sol-breadcrumb a:hover { color: var(--text-2); }
.sol-breadcrumb span { color: var(--sol-accent); }

.sol-hero h1 {
  font-size: clamp(32px, 3.4vw, 52px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -2px;
  margin: 0 0 24px;
  color: var(--text);
}

/* ══════════════════════════════════════════════════════
   GRADIENT HEADING — utilitaire partagé (mêmes valeurs que
   landing.css), réservé aux titres qui demandent un gradient
   pleine largeur (ex. Pricing). Le H1 hero n'utilise plus le
   gradient plein : voir .sol-hl-tail juste en dessous.
══════════════════════════════════════════════════════ */
.gradient-heading {
  background: var(--g-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.dark .gradient-heading {
  filter: drop-shadow(0 0 20px rgba(124,58,237,0.22));
}

/* H1 hero — texte plein (blanc en dark / bleu marine en light), avec
   un léger gradient bleu-violet uniquement sur la fin du titre. */
.sol-hl-tail {
  background: var(--g-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sol-hero-sub {
  font-size: 18px;
  line-height: 1.65;
  color: var(--text-2);
  margin: 0 0 36px;
  max-width: 520px;
}

.sol-hero-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}

.sol-btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 28px;
  background: var(--sol-grad);
  color: #ffffff;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px; font-weight: 600;
  border: none; border-radius: 999px;
  cursor: pointer; text-decoration: none;
  transition: opacity .18s, transform .18s;
  white-space: nowrap;
}
.sol-btn-primary:hover { opacity: .88; transform: translateY(-1px); }

.sol-btn-outline {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 28px;
  background: transparent;
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px; font-weight: 600;
  border: none; border-radius: 999px;
  cursor: pointer; text-decoration: none;
  transition: opacity .18s, transform .18s;
  white-space: nowrap;
}
.sol-btn-outline::before {
  content: '';
  position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: var(--sol-grad);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.sol-btn-outline:hover { opacity: .78; transform: translateY(-1px); }

/* Hero visual area */
.sol-hero-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 440px;
  position: relative;
}

/* Champ d'étoiles montantes — Dark Mode uniquement, derrière l'objet hero.
   Même principe que .hp-orbit-stars (homepage) : spans générés en JS
   (solution-page.js), pas la spire — juste des points qui montent. */
.solh-stars {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  display: none;
}
body.dark .solh-stars { display: block; }
.solh-stars > span {
  position: absolute;
  border-radius: 50%;
  background: #ffffff;
}
@media (prefers-reduced-motion: no-preference) {
  .solh-stars > span { animation: solh-star-rise linear infinite; }
}
@keyframes solh-star-rise {
  from { transform: translateY(0); }
  to   { transform: translateY(-500px); }
}
.sol-hero-visual > svg { position: relative; z-index: 1; }
.sol-hero-visual svg { width: 100%; height: 100%; max-width: 460px; overflow: visible; }

/* ══════════════════════════════════════════════════════
   SECTION COMMON
══════════════════════════════════════════════════════ */
.sol-section {
  padding: 96px 0;
  position: relative;
}
.sol-section-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 48px;
}

/* Section label */
.sol-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sol-accent);
  margin-bottom: 16px;
}

.sol-section h2 {
  font-size: clamp(26px, 2.8vw, 40px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.8px;
  color: var(--text);
  margin: 0 0 20px;
}

.sol-section-sub {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-2);
  max-width: 640px;
  margin: 0;
}

/* ══════════════════════════════════════════════════════
   PROBLEM SECTION
══════════════════════════════════════════════════════ */
.sol-problem {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.sol-problem-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 64px 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.sol-problem-left h2 {
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 700;
  letter-spacing: -0.6px;
  line-height: 1.2;
  margin: 0 0 16px;
  color: var(--text);
}
.sol-problem-left p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-2);
  margin: 0;
}

.sol-problem-points {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 8px;
}

.sol-problem-point {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.sol-problem-point-icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--sol-grad);
  display: flex; align-items: center; justify-content: center;
}

.sol-problem-point-icon svg {
  width: 16px; height: 16px;
  fill: none; stroke: #fff; stroke-width: 2;
  stroke-linecap: round;
}

.sol-problem-point-text h4 {
  font-size: 14px; font-weight: 600;
  color: var(--text); margin: 0 0 4px;
}
.sol-problem-point-text p {
  font-size: 13px; line-height: 1.55;
  color: var(--text-2); margin: 0;
}

/* ══════════════════════════════════════════════════════
   BENTO GRID
══════════════════════════════════════════════════════ */
.sol-bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--sol-gap);
}

.sol-bento-cell {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--sol-radius);
  padding: var(--sol-pad);
  position: relative;
  overflow: hidden;
  transition: border-color .2s, background .2s;
}
.sol-bento-cell:hover {
  border-color: rgba(79,172,254,0.22);
  background: var(--surface2);
}

/* Column spans */
.sol-cell--wide   { grid-column: span 7; }
.sol-cell--narrow { grid-column: span 5; }
.sol-cell--half   { grid-column: span 6; }
.sol-cell--third  { grid-column: span 4; }
.sol-cell--wide8  { grid-column: span 8; }
.sol-cell--full   { grid-column: span 12; }

/* Row height variants */
.sol-cell--tall   { min-height: 320px; }
.sol-cell--medium { min-height: 240px; }
.sol-cell--short  { min-height: 180px; }

/* Bento cell typography */
.sol-cell-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sol-accent);
  margin-bottom: 10px;
}
.sol-cell h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 8px;
  line-height: 1.3;
}
.sol-cell p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-2);
  margin: 0;
}

/* Bento visual area */
.sol-cell-visual {
  margin-top: 20px;
  position: relative;
}

/* ══════════════════════════════════════════════════════
   WORKFLOW
══════════════════════════════════════════════════════ */
.sol-workflow {
  padding: 80px 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
}

.sol-workflow-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 48px;
}

.sol-workflow-steps {
  display: flex;
  gap: 0;
  margin-top: 48px;
  position: relative;
  align-items: flex-start;
}

/* Connecting line */
.sol-workflow-steps::before {
  content: '';
  position: absolute;
  top: 28px;
  left: 28px;
  right: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border) 10%, var(--border) 90%, transparent);
  pointer-events: none;
}

.sol-workflow-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 12px;
  position: relative;
}

.sol-step-num {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--sol-grad);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  color: #fff;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.sol-step-num svg {
  width: 22px; height: 22px;
  fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round;
}

.sol-step-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.sol-step-desc {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-2);
}

/* ══════════════════════════════════════════════════════
   BENEFITS
══════════════════════════════════════════════════════ */
.sol-benefits {
  padding: 80px 0;
}
.sol-benefits-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 48px;
}
.sol-benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
}
.sol-benefit-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--sol-radius);
  padding: 28px 28px 32px;
  position: relative;
}
.sol-benefit-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--page-accent-1) 0%, var(--page-accent-2) 30%, #fff 50%, var(--page-accent-2) 70%, var(--page-accent-1) 100%);
  background-size: 300% 100%;
  border-radius: var(--sol-radius) var(--sol-radius) 0 0;
}
.sol-benefit-card h4 {
  font-size: 16px; font-weight: 700;
  color: var(--text); margin: 0 0 8px;
}
.sol-benefit-card p {
  font-size: 13.5px; line-height: 1.6;
  color: var(--text-2); margin: 0;
}

/* ══════════════════════════════════════════════════════
   CTA FINAL
══════════════════════════════════════════════════════ */
.sol-cta-final {
  padding: 96px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
body.dark .sol-cta-final {
  background: #07041a;
}
body:not(.dark) .sol-cta-final {
  background: linear-gradient(180deg, #f0f0ff 0%, #ffffff 100%);
}
.sol-cta-final::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 60%, rgba(79,172,254,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.sol-cta-final-inner {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
  z-index: 1;
}
.sol-cta-final h2 {
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 700; letter-spacing: -0.8px; line-height: 1.15;
  color: var(--text); margin: 0 0 20px;
}
.sol-cta-final p {
  font-size: 16px; line-height: 1.65;
  color: var(--text-2); margin: 0 0 36px;
}
.sol-cta-btns {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
}

/* ══════════════════════════════════════════════════════
   FOOTER (réutilisé depuis homepage)
══════════════════════════════════════════════════════ */
.hp-footer {
  background: linear-gradient(180deg, #010006 0%, #10132F 100%);
}
body:not(.dark) .hp-footer {
  background: linear-gradient(180deg, #ffffff 0%, #e8f2ff 60%, #cce5ff 100%);
}
.hp-footer-inner { max-width: 1280px; margin: 0 auto; padding: 0 40px; }
.hp-footer-cta { padding: 80px 0 64px; }
.hp-footer-cta-hl {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(28px, 3.5vw, 44px); font-weight: 600;
  line-height: 1.1; margin: 0 0 18px;
}
.hp-footer-cta-hl span {
  background: linear-gradient(90deg, #ffffff 0%, #ffffff 8%, #4facfe 42%, #a855f7 78%, #7c3aed 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
body:not(.dark) .hp-footer-cta-hl span {
  background: linear-gradient(90deg, #16215c 0%, #16215c 8%, #1478d4 42%, #8228d6 78%, #5a18c0 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hp-footer-cta-sub { font-size: 16px; line-height: 1.65; color: #ffffff; max-width: 520px; margin: 0 0 36px; }
body:not(.dark) .hp-footer-cta-sub { color: #16215c; }
.hp-footer-cta-btns { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

.hp-footer-btn-primary {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 40px; background: var(--cta1); color: #fff;
  border: none; border-radius: 5px; font-size: 15px; font-weight: 400;
  cursor: pointer; white-space: nowrap; transition: opacity 0.2s;
  font-family: 'Inter', system-ui, sans-serif;
}
.hp-footer-btn-primary:hover { opacity: 0.85; }

.hp-footer-btn-outline {
  position: relative; display: inline-flex; align-items: center;
  padding: 15px 30px; border: none; background: transparent;
  border-radius: 5px; font-size: 15px; font-weight: 400;
  color: #ffffff; text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: opacity 0.2s;
  font-family: 'Inter', system-ui, sans-serif;
}
.hp-footer-btn-outline::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: linear-gradient(90deg, #4facfe 0%, #a855f7 60%, #7c3aed 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
body:not(.dark) .hp-footer-btn-outline { color: #16215c; }
body:not(.dark) .hp-footer-btn-outline::before {
  background: linear-gradient(90deg, #1478d4 0%, #8228d6 60%, #5a18c0 100%);
}
.hp-footer-btn-outline span { color: inherit; }
.hp-footer-btn-outline:hover { opacity: 0.8; }

.hp-footer-nav { border-top: 1px solid rgba(255,255,255,0.07); padding: 52px 0; }
body:not(.dark) .hp-footer-nav { border-top-color: rgba(0,0,0,0.07); }
/* ── Bloc logo — au-dessus de la grille de colonnes ─────── */
.hp-footer-brand {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 40px;
}
.hp-footer-brand .hp-logo-img { height: 24px; }
.hp-footer-tagline {
  font-size: 13px;
  color: rgba(255,255,255,0.35);
  margin: 0;
}
body:not(.dark) .hp-footer-tagline { color: rgba(0,0,76,0.38); }

.hp-footer-nav .hp-footer-inner {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 32px;
}
.hp-footer-col h3 { font-size: 14px; font-weight: 700; color: #ffffff; margin: 0 0 18px; }
body:not(.dark) .hp-footer-col h3 { color: #16215c; }
.hp-footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.hp-footer-col a {
  font-size: 14px; color: rgba(255,255,255,0.55); text-decoration: none;
  position: relative; display: inline-flex; align-items: center; gap: 7px; transition: color 0.18s;
}
body:not(.dark) .hp-footer-col a { color: rgba(0,0,76,0.55); }
.hp-footer-col a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px; background: currentColor; transition: width 0.22s; }
.hp-footer-col a:hover { color: #ffffff; }
body:not(.dark) .hp-footer-col a:hover { color: #16215c; }
.hp-footer-col a:hover::after { width: 100%; }

.hp-footer-partners { border-top: 1px solid rgba(255,255,255,0.07); padding: 32px 0; }
body:not(.dark) .hp-footer-partners { border-top-color: rgba(0,0,0,0.07); }
.hp-footer-partners .hp-footer-inner { display: flex; gap: 14px; align-items: stretch; flex-wrap: wrap; }
.hp-footer-badge {
  display: flex; align-items: center; gap: 10px; padding: 12px 18px;
  border-radius: 10px; border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.05);
}
body:not(.dark) .hp-footer-badge { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.09); }
.hp-footer-badge--tiktok { color: #ffffff; }
body:not(.dark) .hp-footer-badge--tiktok { color: #16215c; }
.hp-footer-badge--meta  { color: #ffffff; }
body:not(.dark) .hp-footer-badge--meta { color: #16215c; }
.hp-footer-badge--amazon { flex-direction: column; align-items: flex-start; gap: 5px; color: #ffffff; }
body:not(.dark) .hp-footer-badge--amazon { color: #16215c; }
.hp-footer-badge-amazon-img { display: block; }
body.dark .hp-footer-badge-amazon-img { filter: brightness(0) invert(1); }
.hp-footer-badge-amazon-sub { font-size: 11px; }
.hp-badge-verified { font-style: normal; color: #42929A; }
.hp-footer-badge-text { display: flex; flex-direction: column; line-height: 1.25; }
.hp-footer-badge-text strong { font-size: 13px; font-weight: 700; }
.hp-footer-badge-text span   { font-size: 11px; opacity: 0.75; }
.hp-footer-badge--google { color: #ffffff; }
body:not(.dark) .hp-footer-badge--google { color: #16215c; }

.hp-footer-legal { border-top: 1px solid rgba(255,255,255,0.07); padding: 18px 0; }
body:not(.dark) .hp-footer-legal { border-top-color: rgba(0,0,0,0.07); }
.hp-footer-legal-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.hp-footer-legal-links { display: flex; gap: 20px; flex-wrap: wrap; }
.hp-footer-legal-links a {
  font-size: 12px; color: rgba(255,255,255,0.35); text-decoration: none;
  position: relative; transition: color 0.18s;
}
body:not(.dark) .hp-footer-legal-links a { color: rgba(0,0,76,0.38); }
.hp-footer-legal-links a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px; background: currentColor; transition: width 0.22s; }
.hp-footer-legal-links a:hover { color: rgba(255,255,255,0.65); }
body:not(.dark) .hp-footer-legal-links a:hover { color: rgba(0,0,76,0.7); }
.hp-footer-legal-links a:hover::after { width: 100%; }
.hp-footer-copy { font-size: 12px; color: rgba(255,255,255,0.35); margin: 0; }
body:not(.dark) .hp-footer-copy { color: rgba(0,0,76,0.38); }
.hp-footer-social { display: inline-flex; align-items: center; gap: 8px; }

/* ══════════════════════════════════════════════════════
   REVEAL ANIMATIONS
══════════════════════════════════════════════════════ */
.sol-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.sol-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.sol-reveal-delay-1 { transition-delay: 0.1s; }
.sol-reveal-delay-2 { transition-delay: 0.2s; }
.sol-reveal-delay-3 { transition-delay: 0.3s; }
.sol-reveal-delay-4 { transition-delay: 0.4s; }

@keyframes sol-fade-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════════════
   SVG CHART HELPERS
══════════════════════════════════════════════════════ */
.sol-svg-chart {
  width: 100%;
  overflow: visible;
}
.sol-chart-bar {
  fill: url(#sol-bar-grad);
  rx: 4;
}
.sol-chart-line {
  fill: none;
  stroke: url(#sol-line-grad);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sol-chart-area {
  fill: url(#sol-area-grad);
  opacity: 0.18;
}
.sol-chart-dot {
  fill: #4facfe;
  stroke: var(--bg);
  stroke-width: 2;
}

/* ══════════════════════════════════════════════════════
   CHART REVEAL-ON-SCROLL — [data-animate] (déclenché en JS,
   voir solution-page.js). Barres qui grandissent, lignes
   pointillées qui se dessinent, compteurs qui montent.
══════════════════════════════════════════════════════ */
.solh-grow-x, .solh-grow-y {
  transform-box: fill-box;
  transition: transform 0.9s cubic-bezier(.16,1,.3,1);
}
.solh-grow-x { transform-origin: 0% 50%; transform: scaleX(0.02); }
.solh-grow-y { transform-origin: 50% 100%; transform: scaleY(0.02); }
[data-animate].sol-chart-inview .solh-grow-x,
[data-animate].sol-chart-inview .solh-grow-y { transform: scale(1); }

.solh-draw-line {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 1.1s ease-out;
}
[data-animate].sol-chart-inview .solh-draw-line { stroke-dashoffset: 0; }

.solh-count-in {
  opacity: 0;
  transition: opacity 0.4s ease-out;
}
[data-animate].sol-chart-inview .solh-count-in { opacity: 1; }

.solh-d1 { transition-delay: 0.1s; }
.solh-d2 { transition-delay: 0.2s; }
.solh-d3 { transition-delay: 0.3s; }
.solh-d4 { transition-delay: 0.4s; }
.solh-d5 { transition-delay: 0.5s; }
.solh-d6 { transition-delay: 0.6s; }
.solh-d7 { transition-delay: 0.7s; }

@media (prefers-reduced-motion: reduce) {
  .solh-grow-x, .solh-grow-y { transform: none !important; transition: none !important; }
  .solh-draw-line { stroke-dashoffset: 0 !important; transition: none !important; }
  .solh-count-in { opacity: 1 !important; transition: none !important; }
}
.sol-chart-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  fill: var(--text-2);
}
.sol-chart-value {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  fill: var(--text);
}

/* ══════════════════════════════════════════════════════
   MOBILE RESPONSIVE
══════════════════════════════════════════════════════ */
@media (max-width: 960px) {
  .hp-nav-links { display: none; }
  /* .hp-nav-right reste affiché pour garder le toggle Light/Dark visible ;
     seuls Sign In / Sign Up se replient (pas de place dans la barre mobile). */
  .hp-nav-right .hp-btn-signin,
  .hp-nav-right .hp-btn-signup { display: none; }
  .hp-burger { display: flex; }

  .sol-hero-inner {
    grid-template-columns: 1fr;
    padding: 0 24px;
    gap: 32px;
  }
  .sol-hero { padding-top: calc(var(--nav-h, 72px) + 36px); padding-bottom: 52px; }
  .sol-hero-visual { height: 300px; }

  .sol-problem-inner {
    grid-template-columns: 1fr;
    padding: 40px 24px;
    gap: 32px;
  }

  .sol-section-inner { padding: 0 24px; }
  .sol-section { padding: 64px 0; }

  .sol-bento { grid-template-columns: 1fr; }
  .sol-cell--wide,
  .sol-cell--narrow,
  .sol-cell--half,
  .sol-cell--third,
  .sol-cell--wide8,
  .sol-cell--full { grid-column: span 1; }
  .sol-bento-cell { padding: var(--sol-pad-m); }

  .sol-workflow-inner { padding: 0 24px; }
  .sol-workflow-steps {
    flex-direction: column;
    gap: 24px;
    align-items: stretch;
  }
  .sol-workflow-steps::before { display: none; }
  .sol-workflow-step {
    flex-direction: row;
    text-align: left;
    gap: 16px;
    align-items: flex-start;
    padding: 0;
  }
  .sol-step-num { margin-bottom: 0; flex-shrink: 0; }

  .sol-benefits-inner { padding: 0 24px; }
  .sol-benefits-grid { grid-template-columns: 1fr; }

  .sol-cta-final-inner { padding: 0 24px; }

  .hp-footer-inner { padding: 0 20px; }
  .hp-footer-legal-inner { flex-direction: column; align-items: flex-start; }
}

/* Responsive footer — 6 colonnes, mêmes paliers que la homepage */
@media (max-width: 1200px) {
  .hp-footer-nav .hp-footer-inner { grid-template-columns: repeat(3, 1fr); gap: 32px; }
}
@media (max-width: 900px) {
  .hp-footer-nav .hp-footer-inner { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}
@media (max-width: 560px) {
  .hp-footer-nav .hp-footer-inner { grid-template-columns: 1fr 1fr; gap: 24px; }
  .hp-footer-brand { flex-wrap: wrap; }
}

@media (max-width: 768px) {
  html, body { overflow-x: clip; }
  .hp-nav-inner { justify-content: space-between; padding: 0 20px; gap: 0; }
  .hp-logo-link { margin-right: 0; }
  .hp-burger {
    margin-left: 0; min-width: 44px; min-height: 44px;
    align-items: center; justify-content: center; padding: 10px;
  }

  body.hp-mob-open .hp-nav-links {
    display: flex !important;
    flex-direction: column; align-items: stretch;
    position: fixed; top: var(--nav-h, 72px); left: 0; right: 0;
    background: var(--drop-bg); border-top: 1px solid var(--drop-border);
    z-index: 198; padding: 8px 0 16px;
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.24);
  }
  body.hp-mob-open .hp-nav-links li { width: 100%; }
  body.hp-mob-open .hp-navbtn {
    width: 100%; justify-content: flex-start;
    padding: 13px 24px; font-size: 15px;
    border-radius: 0; color: var(--text);
  }
  body.hp-mob-open .hp-drop {
    display: none; position: static; opacity: 1; transform: none;
    box-shadow: none; border: none; border-radius: 0;
    padding: 2px 0 6px 0; background: transparent;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    pointer-events: auto; transition: none;
  }
  body.hp-mob-open .hp-has-drop.open .hp-drop { display: block; }
  body.hp-mob-open .hp-drop-link {
    color: var(--text-2); font-size: 13.5px;
    padding: 8px 32px; border-radius: 0;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sol-reveal {
    opacity: 1; transform: none;
    transition: none;
  }
  .hp-tg-knob { transition: none; }
  .hp-tg-icon { transition: none; }
}

/* ══ PREMIUM RIBBONS ════════════════════════════════════ */
.sol-ribbons {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.rib {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
  transition: opacity .6s;
}
/* Ribbon 1 — large blue-violet nappe, top-left */
.rib-1 {
  width: 85vw; height: 72vh;
  top: -30vh; left: -28vw;
  background: radial-gradient(ellipse at 42% 42%, rgba(62,114,245,0.72) 0%, rgba(124,58,237,0.42) 46%, transparent 70%);
  filter: blur(96px);
}
/* Ribbon 2 — violet-blue nappe, bottom-right */
.rib-2 {
  width: 72vw; height: 62vh;
  bottom: -22vh; right: -22vw;
  background: radial-gradient(ellipse at 55% 55%, rgba(109,40,217,0.62) 0%, rgba(79,172,254,0.32) 52%, transparent 72%);
  filter: blur(108px);
}
/* Ribbon 3 — small accent, mid-right */
.rib-3 {
  width: 42vw; height: 38vh;
  top: 38vh; right: -4vw;
  background: radial-gradient(ellipse at 48% 38%, rgba(124,58,237,0.52) 0%, rgba(34,211,165,0.18) 62%, transparent 80%);
  filter: blur(82px);
}
/* Dark mode */
body.dark .rib-1 { opacity: 0.52; }
body.dark .rib-2 { opacity: 0.42; }
body.dark .rib-3 { opacity: 0.32; }
/* Light mode — très subtil */
body:not(.dark) .rib-1 { opacity: 0.16; }
body:not(.dark) .rib-2 { opacity: 0.12; }
body:not(.dark) .rib-3 { opacity: 0.09; }
/* Dérive ultra-lente */
@keyframes rib-drift-a {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(28px,-22px) scale(1.04); }
  100% { transform: translate(0,0) scale(1); }
}
@keyframes rib-drift-b {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(-22px,18px) scale(1.03); }
  100% { transform: translate(0,0) scale(1); }
}
@keyframes rib-drift-c {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(16px,-12px) scale(0.97); }
  100% { transform: translate(0,0) scale(1); }
}
@media (prefers-reduced-motion: no-preference) {
  .rib-1 { animation: rib-drift-a 68s ease-in-out infinite; }
  .rib-2 { animation: rib-drift-b 88s ease-in-out infinite; animation-delay: -32s; }
  .rib-3 { animation: rib-drift-c 78s ease-in-out infinite; animation-delay: -18s; }
}

/* Sections au-dessus des ribbons */
.sol-hero, .sol-problem, .sol-steps, .sol-bento-section,
.sol-workflow, .sol-benefits, .sol-cta-section, .sol-cta-final,
.hp-footer, .sol-section {
  position: relative;
  z-index: 1;
}
.hp-nav { z-index: 200; }

/* ══ DROPDOWN PREMIUM ══════════════════════════════════ */
.hp-drop--wide {
  min-width: 520px;
  left: -60px;
}

.hp-drop-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  padding: 6px;
}

.hp-drop-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 8px;
  text-decoration: none;
  transition: background .12s;
  color: var(--text-2);
}
.hp-drop-item:hover { background: rgba(255,255,255,0.06); }
body:not(.dark) .hp-drop-item:hover { background: rgba(0,0,120,0.04); }

.hp-drop-icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--sol-accent, #4facfe);
  background: var(--surface);
}

.hp-drop-text {
  display: flex; flex-direction: column; gap: 2px;
}
.hp-drop-text b {
  font-size: 13px; font-weight: 600;
  color: var(--text);
  display: block;
}
.hp-drop-text span {
  font-size: 12px; color: var(--text-2);
  line-height: 1.4;
}

/* Single-column dropdowns (Partners, Ressources) */
.hp-drop:not(.hp-drop--wide) .hp-drop-grid {
  grid-template-columns: 1fr;
}
.hp-drop:not(.hp-drop--wide) {
  min-width: 280px;
}

/* Mobile: dropdown items inline */
@media (max-width: 768px) {
  body.hp-mob-open .hp-drop-item {
    padding: 8px 32px;
    border-radius: 0;
    color: var(--text-2);
    font-size: 13.5px;
  }
  body.hp-mob-open .hp-drop-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
  }
  body.hp-mob-open .hp-drop-icon { display: none; }
  body.hp-mob-open .hp-drop-text span { display: none; }
}

/* ══════════════════════════════════════════════════════
   HERO VISUALS — animations partagées (Agent 2)
   Classes utilitaires appliquées directement dans les SVG
   inline des pages solutions/partners. Respecte
   prefers-reduced-motion: reduce (rien n'anime, état de
   base = état statique final, donc pas de "saut" visuel).
══════════════════════════════════════════════════════ */
@keyframes solh-rotate-cw   { to { transform: rotate(360deg); } }
@keyframes solh-rotate-ccw  { to { transform: rotate(-360deg); } }
@keyframes solh-pulse-glow  { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes solh-pulse-scale { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes solh-flow-dash   { to { stroke-dashoffset: -16; } }
@keyframes solh-flow-dash-lg{ to { stroke-dashoffset: -48; } }
@keyframes solh-float-y     { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes solh-blink       { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes solh-sweep       { 0% { stroke-dashoffset: 300; } 60%, 100% { stroke-dashoffset: 0; } }
@keyframes solh-ping        { 0% { transform: scale(0.6); opacity: 0.55; } 80%, 100% { transform: scale(1.8); opacity: 0; } }
@keyframes solh-border-flow { to { background-position: -200% 0; } }

/* pulse-scale / ping s'appuient sur la bbox propre de l'élément (pas de
   pivot personnalisé à calculer) ; rotate garde le repère SVG par défaut
   pour pouvoir cibler un centre de rotation précis via transform-origin
   inline. */
.solh-pulse-scale,
.solh-ping { transform-box: fill-box; }

/* Courbe + points lumineux circulants (animateMotion SMIL — voir solution-page.js
   pour la neutralisation sous prefers-reduced-motion). */
.solh-line-glow { filter: drop-shadow(0 0 5px rgba(124,58,237,0.45)); }
.solh-line-glow-dot { filter: drop-shadow(0 0 6px rgba(199,182,255,0.95)); }

@media (prefers-reduced-motion: no-preference) {
  .solh-rotate-cw     { animation: solh-rotate-cw 70s linear infinite; }
  .solh-rotate-cw-slow{ animation: solh-rotate-cw 110s linear infinite; }
  .solh-rotate-ccw    { animation: solh-rotate-ccw 90s linear infinite; }
  .solh-pulse-glow    { animation: solh-pulse-glow 4.5s ease-in-out infinite; }
  .solh-pulse-scale   { animation: solh-pulse-scale 4.5s ease-in-out infinite; }
  .solh-flow-dash     { animation: solh-flow-dash 1.8s linear infinite; }
  .solh-flow-dash-lg  { animation: solh-flow-dash-lg 3.2s linear infinite; }
  .solh-float-y       { animation: solh-float-y 6s ease-in-out infinite; }
  .solh-float-y-d1    { animation: solh-float-y 6s ease-in-out infinite; animation-delay: -2s; }
  .solh-float-y-d2    { animation: solh-float-y 7s ease-in-out infinite; animation-delay: -4s; }
  .solh-float-y-d3    { animation: solh-float-y 6.5s ease-in-out infinite; animation-delay: -3s; }
  .solh-blink         { animation: solh-blink 2.6s ease-in-out infinite; }
  .solh-ping          { animation: solh-ping 2.6s ease-out infinite; }
  .solh-ping-d1       { animation: solh-ping 2.6s ease-out infinite; animation-delay: -0.9s; }
  .solh-ping-d2       { animation: solh-ping 2.6s ease-out infinite; animation-delay: -1.7s; }
  .sol-benefit-card::before { animation: solh-border-flow 3.5s linear infinite; }
}