/* ============================================================
   SmartSeniors — Landing (hero, how-it-works, reassurance, CTA)
   ============================================================ */

/* ───────────── HERO ───────────── */
.ss-hero { position: relative; overflow: hidden; padding: clamp(40px,7vw,92px) clamp(18px,5vw,56px) clamp(56px,9vw,110px); }
.ss-hero-grid {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px,5vw,64px);
  align-items: center; position: relative; z-index: 2;
}
@media (max-width: 880px) { .ss-hero-grid { grid-template-columns: 1fr; } }

.ss-hero h1 {
  font-size: clamp(2.3rem, 6vw, 4rem); font-weight: 900; line-height: 1.06;
  letter-spacing: -.02em; color: var(--hero-ink); margin: 22px 0 20px;
  text-wrap: balance;
}
.ss-hero h1 em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ss-hero .hero-sub { font-size: 1.1rem; color: var(--hero-sub); line-height: 1.6; max-width: 46ch; font-weight: 500; margin-bottom: 32px; }
.ss-hero .hero-sub strong { font-weight: 800; color: var(--hero-ink); }
.ss-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.ss-hero-trust { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 30px; }
.ss-hero-trust .ht { display: flex; align-items: center; gap: 8px; font-size: .84rem; font-weight: 700; color: var(--hero-sub); }
.ss-hero-trust .ht svg { width: 17px; height: 17px; color: var(--c-accent); flex-shrink: 0; }
.ss-hero-kicker { background: rgba(21,183,158,.14); color: var(--c-accent); border: 1px solid rgba(21,183,158,.3); }
.ss-hero-tagline { display: inline-flex; width: fit-content; align-items: center; gap: 10px; margin: 0 0 20px; padding: 9px 16px; border-radius: 14px; background: color-mix(in srgb, var(--c-accent) 13%, transparent); border: 1px solid color-mix(in srgb, var(--c-accent) 28%, transparent); font-size: 1rem; font-weight: 800; line-height: 1.38; letter-spacing: -.005em; color: var(--c-accent); max-width: 48ch; }
.ss-root[data-direction="atelier"] .ss-hero-tagline { background: color-mix(in srgb, var(--c-accent2) 16%, transparent); border-color: color-mix(in srgb, var(--c-accent2) 34%, transparent); }
.ss-hero-tagline .ss-dot { flex-shrink: 0; }

/* ───────────── HERO — presets tweak (disposition / couleur / gras) ───────────── */
/* Éclat = état par défaut (rien à surcharger) */

/* Sobre — éditorial épuré : titre fin, accent solide propre, surtitre discret */
.ss-hero[data-hero="sobre"] .ss-hero-tagline { background: none; border: none; padding: 0; color: var(--c-ink-soft); font-weight: 900; font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; }
.ss-hero[data-hero="sobre"] h1 { font-weight: 600; letter-spacing: -.018em; line-height: 1.12; }
.ss-hero[data-hero="sobre"] h1 em { background: none; -webkit-text-fill-color: currentColor; color: var(--c-accent); font-weight: 700; }
.ss-hero[data-hero="sobre"] .hero-sub { font-weight: 400; color: var(--hero-sub); }
.ss-hero[data-hero="sobre"] .hero-sub strong { font-weight: 600; color: var(--hero-ink); }

/* Centré — composition centrée, pitch resserré au milieu */
.ss-hero[data-hero="centre"] .ss-hero-left { text-align: center; }
.ss-hero[data-hero="centre"] .ss-hero-tagline { justify-content: center; max-width: none; }
.ss-hero[data-hero="centre"] .hero-sub { margin-left: auto; margin-right: auto; }
.ss-hero[data-hero="centre"] .ss-hero-actions,
.ss-hero[data-hero="centre"] .ss-hero-trust { justify-content: center; }

/* Vif — couleur forte, surtitre en pastille, gras maximal */
.ss-hero[data-hero="vif"] .ss-hero-tagline { display: inline-flex; width: fit-content; background: var(--c-accent); border: none; color: #fff; padding: 9px 16px; border-radius: 999px; font-weight: 800; letter-spacing: -.005em; }
.ss-hero[data-hero="vif"] .ss-hero-tagline .ss-dot { background: #fff; }
.ss-hero[data-hero="vif"] h1 { font-weight: 900; }
.ss-hero[data-hero="vif"] h1 em { background: none; -webkit-text-fill-color: currentColor; color: var(--c-accent); }
.ss-hero[data-hero="vif"] .hero-sub strong { color: var(--c-accent); }
.ss-root[data-direction="atelier"] .ss-hero-tagline { color: var(--c-accent2); }
.ss-root[data-direction="solstice"] .ss-hero-tagline { text-transform: none; }
.ss-root[data-direction="atelier"] .ss-hero-kicker { background: transparent; border-color: rgba(241,247,245,.3); color: var(--c-accent2); }

/* hero backgrounds per direction */
.ss-root[data-direction="aurore"] .ss-hero { background: radial-gradient(120% 90% at 80% 0%, #F4FAF8 0%, #F1F7F5 45%, #E4F0EC 100%); }
.ss-root[data-direction="aurore"] .ss-hero .blob { position: absolute; border-radius: 50%; filter: blur(2px); z-index: 1; pointer-events: none; }
.ss-root[data-direction="aurore"] .ss-hero .blob.b1 { width: 460px; height: 460px; background: radial-gradient(circle, rgba(21,183,158,.16), transparent 70%); top: -160px; right: -120px; }
.ss-root[data-direction="aurore"] .ss-hero .blob.b2 { width: 360px; height: 360px; background: radial-gradient(circle, rgba(91,168,245,.18), transparent 70%); bottom: -140px; left: -110px; }

.ss-root[data-direction="atelier"] .ss-hero { background: linear-gradient(155deg, #0E3B33 0%, #155E54 55%, #1E7A6E 100%); }
.ss-root[data-direction="atelier"] .ss-hero::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(241,247,245,.05) 1px, transparent 1px); background-size: 100% 46px; z-index: 1; pointer-events: none; }
.ss-root[data-direction="atelier"] .ss-hero .blob { display: none; }

.ss-root[data-direction="solstice"] .ss-hero { background: var(--c-bg); }
.ss-root[data-direction="solstice"] .ss-hero .blob { position: absolute; z-index: 1; pointer-events: none; }
.ss-root[data-direction="solstice"] .ss-hero .blob.b1 { width: 230px; height: 230px; border-radius: 50%; background: var(--grad); opacity: .14; top: -70px; right: 8%; }
.ss-root[data-direction="solstice"] .ss-hero .blob.b2 { width: 120px; height: 120px; border-radius: 50%; border: 14px solid rgba(78,205,196,.30); bottom: 30px; left: -30px; }
.ss-root[data-direction="solstice"] .ss-hero .blob.b3 { width: 54px; height: 54px; border-radius: 16px; background: rgba(168,85,247,.22); top: 40%; right: -16px; transform: rotate(18deg); }
.ss-root[data-direction="aurore"] .ss-hero .blob.b3,
.ss-root[data-direction="atelier"] .ss-hero .blob.b3 { display: none; }

/* ───────────── Emma live card (hero visual) ───────────── */
.emma-live {
  position: relative; z-index: 2;
  background: var(--c-surface); border-radius: calc(var(--radius-card) + 4px);
  box-shadow: var(--shadow-card); border: 1px solid var(--c-line);
  padding: 22px; display: flex; flex-direction: column; gap: 14px;
  max-width: 440px; margin-left: auto;
}
.ss-root[data-direction="atelier"] .emma-live { border: 1.5px solid #10302A; background: #F4FBF9; }
.ss-root[data-direction="solstice"] .emma-live { border: 2.5px solid #143029; box-shadow: 10px 10px 0 rgba(21,183,158,.20); }

.emma-head { display: flex; align-items: center; gap: 13px; }
.emma-av { width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg,#4ECDC4,#A855F7); display: flex; align-items: center; justify-content: center; box-shadow: 0 5px 20px rgba(168,85,247,.32); position: relative; }
.emma-av svg { width: 34px; height: 34px; }
.emma-av .on { position: absolute; bottom: 1px; right: 1px; width: 14px; height: 14px; border-radius: 50%; background: var(--c-online); border: 2.5px solid var(--c-surface); }
.emma-name { font-weight: 900; font-size: 1.12rem; color: var(--c-ink); line-height: 1.15; }
.emma-role { font-size: .76rem; color: var(--c-accent); font-weight: 700; margin-top: 2px; }
.emma-msg { background: var(--c-bg-alt); border-radius: 6px 16px 16px 16px; padding: 14px 16px; font-size: .94rem; line-height: 1.6; color: var(--c-ink); }
.ss-root[data-direction="atelier"] .emma-msg { border-radius: 0 8px 8px 8px; background: #efe6d6; }
.emma-msg strong { color: var(--c-accent); }
.emma-chips { display: flex; flex-direction: column; gap: 8px; }
.emma-chip {
  text-align: left; font-family: var(--font); font-size: .85rem; font-weight: 700;
  border-radius: 12px; padding: 12px 14px; cursor: pointer; line-height: 1.3;
  border: 1.5px solid var(--c-line); background: var(--c-bg-alt); color: var(--c-ink);
  display: flex; align-items: center; gap: 10px; transition: transform .15s, box-shadow .18s, border-color .18s;
}
.emma-chip:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); border-color: var(--c-accent); }
.emma-chip .ce { font-size: 1.15rem; flex-shrink: 0; }
/* Solstice gives chips joy colors */
.ss-root[data-direction="solstice"] .emma-chip:nth-child(1) { border-color: var(--joy1); }
.ss-root[data-direction="solstice"] .emma-chip:nth-child(2) { border-color: var(--joy2); }
.ss-root[data-direction="solstice"] .emma-chip:nth-child(3) { border-color: var(--joy4); }

/* ───────────── HOW IT WORKS ───────────── */
.ss-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 48px; }
@media (max-width: 820px) { .ss-steps { grid-template-columns: 1fr; } }
.ss-step { padding: 30px 26px; position: relative; }
.ss-step .sn {
  width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; font-weight: 900; margin-bottom: 18px; color: #fff; background: var(--grad);
  box-shadow: 0 6px 18px rgba(21,183,158,.34);
}
.ss-root[data-direction="atelier"] .ss-step .sn { border-radius: 0; background: transparent; color: var(--c-accent); border: 2px solid var(--c-accent); box-shadow: none; width: 46px; height: 46px; }
.ss-root[data-direction="solstice"] .ss-step:nth-child(1) .sn { background: var(--joy2); }
.ss-root[data-direction="solstice"] .ss-step:nth-child(2) .sn { background: var(--grad); }
.ss-root[data-direction="solstice"] .ss-step:nth-child(3) .sn { background: var(--joy4); }
.ss-step h3 { font-size: 1.24rem; font-weight: 900; color: var(--c-ink); margin-bottom: 9px; }
.ss-step p { font-size: .96rem; color: var(--c-ink-soft); line-height: 1.58; font-weight: 600; }
.ss-step .si { position: absolute; top: 26px; right: 24px; width: 26px; height: 26px; color: var(--c-line); }

/* ───────────── REASSURANCE ───────────── */
.ss-reassure { background: var(--c-bg-alt); }
.ss-root[data-direction="atelier"] .ss-reassure { background: var(--c-header); color: #F1F7F5; }
.ss-reassure-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,5vw,60px); align-items: center; }
@media (max-width: 820px) { .ss-reassure-grid { grid-template-columns: 1fr; } }
.ss-root[data-direction="atelier"] .ss-reassure .ss-sec-title,
.ss-root[data-direction="atelier"] .ss-reassure .ss-sec-lede { color: #F1F7F5; }
.ss-values { display: flex; flex-direction: column; gap: 14px; }
.ss-value { display: flex; gap: 15px; align-items: flex-start; background: var(--c-surface); border-radius: var(--radius-card); padding: 18px 20px; border: 1px solid var(--c-line); box-shadow: var(--shadow-soft); }
.ss-root[data-direction="atelier"] .ss-value { background: rgba(241,247,245,.06); border: 1px solid rgba(241,247,245,.14); }
.ss-root[data-direction="atelier"] .ss-value .vt { color: #F1F7F5; }
.ss-root[data-direction="atelier"] .ss-value .vd { color: rgba(241,247,245,.66); }
.ss-value .vi { width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(21,183,158,.14); color: var(--c-accent); }
.ss-value .vi svg { width: 22px; height: 22px; }
.ss-value .vt { font-weight: 800; font-size: 1.02rem; color: var(--c-ink); margin-bottom: 3px; }
.ss-value .vd { font-size: .9rem; color: var(--c-ink-soft); line-height: 1.5; font-weight: 600; }

/* ───────────── CTA BAND ───────────── */
.ss-ctaband { padding: clamp(40px,7vw,80px) clamp(18px,5vw,56px); }
.ss-ctaband-inner {
  max-width: 980px; margin: 0 auto; text-align: center;
  background: var(--grad); border-radius: calc(var(--radius-card) + 8px);
  padding: clamp(36px,6vw,68px) 32px; color: #fff; position: relative; overflow: hidden;
  box-shadow: 0 24px 60px rgba(21,183,158,.34);
}
.ss-root[data-direction="atelier"] .ss-ctaband-inner { background: var(--c-header); box-shadow: none; border: 1.5px solid var(--c-accent); }
.ss-ctaband-inner h2 { font-size: clamp(1.7rem,4vw,2.5rem); font-weight: 900; margin-bottom: 14px; line-height: 1.12; }
.ss-ctaband-inner p { font-size: 1.08rem; opacity: .92; margin-bottom: 28px; font-weight: 600; }
.ss-ctaband-inner .ss-btn { background: #fff; color: var(--c-accent); }
.ss-root[data-direction="atelier"] .ss-ctaband-inner .ss-btn { background: var(--grad); color: #fff; }
.ss-ctaband-inner::before { content:''; position:absolute; width:300px; height:300px; border-radius:50%; background:rgba(255,255,255,.10); top:-120px; right:-80px; }