/* =====================================================================
   FamilyPet+ · marketing.jasmory.tech — design system
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root{
  --brand:#12b886; --brand-dark:#0c8f6b; --brand-soft:#e7f8f1;
  --accent:#ff7a59; --accent-soft:#fff0eb;
  --ink:#16282f; --muted:#64777f; --faint:#94a6ad;
  --bg:#f4f8f7; --card:#ffffff; --line:#e4ecea;
  --ok:#16a34a; --warn:#d97706; --bad:#dc2626; --info:#2563eb;
  --p1:#dc2626; --p2:#d97706; --p3:#64748b;
  --radius:16px; --radius-sm:10px; --shadow:0 1px 2px rgba(16,40,34,.04),0 10px 30px rgba(16,40,34,.06);
  --shadow-sm:0 1px 2px rgba(16,40,34,.06),0 4px 12px rgba(16,40,34,.05);
  --maxw:1180px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.55; font-size:15px;
}
a{color:var(--brand-dark); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{line-height:1.2; margin:0 0 .4em; font-weight:800; letter-spacing:-.01em}
h1{font-size:2.1rem} h2{font-size:1.5rem} h3{font-size:1.15rem}
p{margin:0 0 1em}
small{color:var(--muted)}
.muted{color:var(--muted)} .faint{color:var(--faint)}
.center{text-align:center}

/* ---------- Buttons ---------- */
.btn,.ghost-btn{
  display:inline-flex; align-items:center; gap:.5em; cursor:pointer;
  font:inherit; font-weight:700; border-radius:999px; border:1px solid transparent;
  padding:.7em 1.3em; transition:.15s; text-decoration:none; white-space:nowrap;
}
.btn{background:var(--brand); color:#fff; box-shadow:var(--shadow-sm)}
.btn:hover{background:var(--brand-dark); text-decoration:none; transform:translateY(-1px)}
.btn-accent{background:var(--accent)} .btn-accent:hover{background:#ef6a49}
.btn-lg{padding:.95em 1.8em; font-size:1.05rem}
.btn-sm{padding:.4em .9em; font-size:.85rem}
.ghost-btn{background:transparent; border-color:var(--line); color:var(--ink); padding:.5em 1em; font-weight:600}
.ghost-btn:hover{background:#fff; border-color:var(--brand); color:var(--brand-dark); text-decoration:none}
.btn[disabled]{opacity:.5; cursor:not-allowed}

/* ---------- Badges ---------- */
.badge{display:inline-block; padding:.18em .65em; border-radius:999px; font-size:.74rem; font-weight:700; line-height:1.5; border:1px solid transparent}
.badge-p1{background:#fdeaea; color:var(--p1)} .badge-p2{background:#fdf3e6; color:var(--p2)} .badge-p3{background:#eef1f4; color:var(--p3)}
.badge-soft{background:var(--brand-soft); color:var(--brand-dark)}
.badge-lang{background:#eef4ff; color:#3551b5}
.badge-todo{background:#eef1f4; color:#475569}
.badge-posted{background:#e7f8f1; color:var(--brand-dark)}
.badge-recurring{background:#eafaf3; color:#0a7f5f}
.badge-banned{background:#fdeaea; color:var(--bad)}
.badge-na{background:#f3f4f6; color:#9ca3af}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:.4em;vertical-align:middle}

/* =====================================================================
   ADMIN
   ===================================================================== */
body.admin{background:var(--bg)}
.topbar{
  position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:1.5rem;
  background:#0f3b30; color:#eafaf4; padding:.7rem 1.4rem; box-shadow:0 2px 14px rgba(7,40,30,.25);
}
.brand{display:flex; align-items:center; gap:.55rem; color:#fff; font-weight:800; text-decoration:none}
.brand:hover{text-decoration:none}
.brand-mark{font-size:1.4rem}
.brand-text em{font-style:normal; font-weight:600; opacity:.7; font-size:.82rem; display:block; margin-top:-3px}
.topnav{display:flex; gap:.25rem; flex-wrap:wrap; margin-left:.5rem}
.topnav a{color:#bfe9da; padding:.45rem .85rem; border-radius:999px; font-weight:600; font-size:.92rem}
.topnav a:hover{background:rgba(255,255,255,.08); color:#fff; text-decoration:none}
.topnav a.active{background:var(--brand); color:#fff}
.topbar-right{margin-left:auto; display:flex; align-items:center; gap:.6rem}
.topbar-right .who{color:#bfe9da; font-size:.85rem; font-weight:600}
.topbar-right .ghost-btn{border-color:rgba(255,255,255,.25); color:#eafaf4}
.topbar-right .ghost-btn:hover{background:rgba(255,255,255,.1); border-color:#fff; color:#fff}

.wrap{max-width:var(--maxw); margin:0 auto; padding:1.8rem 1.4rem 3rem}
.page-head{display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1.4rem; flex-wrap:wrap}
.page-head h1{margin:0}
.page-head .sub{color:var(--muted); margin:.2rem 0 0}

.flash{padding:.8rem 1.1rem; border-radius:var(--radius-sm); margin-bottom:1rem; font-weight:600}
.flash-ok{background:var(--brand-soft); color:var(--brand-dark)}
.flash-err{background:#fdeaea; color:var(--bad)}
.flash-info{background:#eaf2ff; color:var(--info)}

/* Cards & grid */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:1.3rem}
.grid{display:grid; gap:1.1rem}
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:1rem; margin-bottom:1.4rem}
.kpi{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.1rem 1.2rem; box-shadow:var(--shadow)}
.kpi .label{font-size:.8rem; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.03em}
.kpi .value{font-size:2.1rem; font-weight:800; letter-spacing:-.02em; margin-top:.1rem}
.kpi .value small{font-size:1rem; color:var(--faint); font-weight:700}
.kpi .hint{font-size:.82rem; color:var(--muted); margin-top:.2rem}
.kpi.accent{background:linear-gradient(135deg,#0f3b30,#12805f); color:#fff; border:none}
.kpi.accent .label,.kpi.accent .hint{color:rgba(255,255,255,.8)}

.progress{height:10px; border-radius:999px; background:#e7efec; overflow:hidden; margin-top:.6rem}
.progress > span{display:block; height:100%; background:var(--brand); border-radius:999px}
.kpi.accent .progress{background:rgba(255,255,255,.2)} .kpi.accent .progress>span{background:#7ef0c8}

.cols-2{grid-template-columns:1.6fr 1fr}
.cols-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.cols-2,.cols-3{grid-template-columns:1fr}}

/* Section title */
.section-title{display:flex; align-items:center; justify-content:space-between; margin:0 0 .9rem}
.section-title h2,.section-title h3{margin:0}

/* Tables */
.table-wrap{overflow:auto; border:1px solid var(--line); border-radius:var(--radius); background:#fff; box-shadow:var(--shadow)}
table{border-collapse:collapse; width:100%; font-size:.9rem}
th,td{padding:.7rem .85rem; text-align:left; border-bottom:1px solid var(--line); vertical-align:top}
thead th{background:#f7faf9; font-size:.76rem; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); position:sticky; top:0}
tbody tr:hover{background:#fafdfc}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums}
.table-link{font-weight:700}

/* Filters bar */
.filters{display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; margin-bottom:1.1rem}
.filters .chip{padding:.4rem .9rem; border-radius:999px; border:1px solid var(--line); background:#fff; color:var(--ink); font-weight:600; font-size:.85rem; cursor:pointer}
.filters .chip:hover{border-color:var(--brand); text-decoration:none}
.filters .chip.active{background:var(--brand); color:#fff; border-color:var(--brand)}
.filters .spacer{flex:1}

/* Forms */
label.field{display:block; margin-bottom:.9rem}
label.field > span{display:block; font-weight:600; font-size:.85rem; margin-bottom:.3rem; color:var(--ink)}
input,select,textarea{
  width:100%; font:inherit; padding:.6rem .8rem; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:#fff; color:var(--ink); transition:.15s;
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft)}
textarea{resize:vertical; min-height:90px}
.inline-form{display:inline-flex; gap:.4rem; align-items:center}
.inline-form select{width:auto; padding:.35rem .5rem}

/* Agent cards */
.agents{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:.9rem}
.agent{border:1px solid var(--line); border-radius:var(--radius); padding:1rem; background:#fff; box-shadow:var(--shadow-sm)}
.agent .ahead{display:flex; align-items:center; gap:.55rem; margin-bottom:.45rem}
.agent .emoji{font-size:1.5rem}
.agent .name{font-weight:800}
.agent .role{font-size:.82rem; color:var(--muted)}
.agent .kpi-line{font-size:.84rem; margin-top:.5rem; padding-top:.5rem; border-top:1px dashed var(--line)}
.agent .kpi-line b{color:var(--brand-dark)}

/* Template cards */
.tpl{border:1px solid var(--line); border-radius:var(--radius); background:#fff; box-shadow:var(--shadow-sm); margin-bottom:1rem; overflow:hidden}
.tpl .tpl-head{display:flex; align-items:center; gap:.6rem; padding:.85rem 1.1rem; background:#f7faf9; border-bottom:1px solid var(--line); flex-wrap:wrap}
.tpl .tpl-head h3{margin:0; font-size:1rem}
.tpl .tpl-head .spacer{flex:1}
.tpl .tpl-body{padding:1.1rem}
.tpl pre{white-space:pre-wrap; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.86rem; background:#fbfdfc; border:1px solid var(--line); border-radius:var(--radius-sm); padding:.9rem; margin:0; color:#27343a}
.copy-btn.copied{background:var(--ok); color:#fff; border-color:var(--ok)}

.footer{max-width:var(--maxw); margin:0 auto; padding:1.4rem; display:flex; justify-content:space-between; gap:1rem; color:var(--faint); font-size:.82rem; flex-wrap:wrap}

/* =====================================================================
   LANDING (public)
   ===================================================================== */
body.landing{background:#fff}
.lp-nav{max-width:var(--maxw); margin:0 auto; padding:1.1rem 1.4rem; display:flex; align-items:center; gap:1rem}
.lp-nav .brand{color:var(--ink)} .lp-nav .brand .brand-mark{filter:none}
.lp-nav .spacer{flex:1}
.lp-lang{display:flex; gap:.2rem}
.lp-lang a{padding:.3rem .6rem; border-radius:8px; font-weight:700; font-size:.85rem; color:var(--muted)}
.lp-lang a.active{background:var(--brand-soft); color:var(--brand-dark)}

.hero{position:relative; overflow:hidden; background:radial-gradient(1200px 500px at 80% -10%,var(--brand-soft),transparent 60%)}
.hero-inner{max-width:var(--maxw); margin:0 auto; padding:3rem 1.4rem 2.5rem; display:grid; grid-template-columns:1.1fr .9fr; gap:2.5rem; align-items:center}
@media(max-width:860px){.hero-inner{grid-template-columns:1fr; padding-top:1.5rem}}
.hero .eyebrow{display:inline-flex; align-items:center; gap:.5em; background:var(--accent-soft); color:#c2410c; font-weight:700; font-size:.85rem; padding:.35em .9em; border-radius:999px; margin-bottom:1rem}
.hero h1{font-size:2.7rem; margin-bottom:.5rem}
@media(max-width:860px){.hero h1{font-size:2rem}}
.hero .lead{font-size:1.15rem; color:var(--muted); max-width:34ch}
.hero-cta{display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.5rem}
.hero-points{margin-top:1.6rem; display:grid; gap:.55rem}
.hero-points div{display:flex; gap:.6rem; align-items:flex-start; font-weight:600}
.hero-points .ic{color:var(--brand)}

/* signup card */
.signup{background:#fff; border:1px solid var(--line); border-radius:22px; box-shadow:0 20px 50px rgba(16,40,34,.12); padding:1.6rem}
.signup h2{font-size:1.3rem}
.signup .reward{background:linear-gradient(135deg,#fff7f3,#ffede4); border:1px solid #ffd9c9; border-radius:var(--radius); padding:.8rem 1rem; margin-bottom:1.1rem; font-size:.9rem}
.signup .reward b{color:#c2410c}
.signup .row{display:grid; grid-template-columns:1fr 1fr; gap:.7rem}
@media(max-width:480px){.signup .row{grid-template-columns:1fr}}
.consent{display:flex; gap:.55rem; align-items:flex-start; font-size:.82rem; color:var(--muted); margin:.4rem 0 1rem}
.consent input{width:auto; margin-top:.15rem}
.hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}

.section{max-width:var(--maxw); margin:0 auto; padding:3rem 1.4rem}
.section.alt{background:var(--bg); max-width:none}
.section.alt > *{max-width:var(--maxw); margin-left:auto; margin-right:auto}
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; margin-top:1.5rem}
@media(max-width:820px){.steps{grid-template-columns:1fr 1fr}}
.step{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.2rem; box-shadow:var(--shadow-sm)}
.step .n{width:34px; height:34px; border-radius:50%; background:var(--brand); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; margin-bottom:.6rem}
.feature-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; margin-top:1.5rem}
@media(max-width:820px){.feature-grid{grid-template-columns:1fr}}
.feature{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.2rem; box-shadow:var(--shadow-sm)}
.feature .ic{font-size:1.6rem; margin-bottom:.5rem}
.faq details{background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); padding:.9rem 1.1rem; margin-bottom:.7rem}
.faq summary{font-weight:700; cursor:pointer}
.faq p{margin:.6rem 0 0; color:var(--muted)}
.lp-footer{background:#0f3b30; color:#bfe9da; padding:2rem 1.4rem; text-align:center; font-size:.88rem}
.lp-footer a{color:#eafaf4}

.thanks{max-width:640px; margin:0 auto; padding:4rem 1.4rem; text-align:center}
.thanks .big{font-size:3.5rem}
.next-steps{text-align:left; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem; box-shadow:var(--shadow); margin-top:1.5rem}
.next-steps ol{margin:.5rem 0 0; padding-left:1.2rem}
.next-steps li{margin-bottom:.5rem}

/* ---- Landing refonte 2026-06 : hero media, confiance, onboarding ---- */
.hero-banner{display:block; width:100%; max-width:460px; height:auto; border-radius:18px;
  box-shadow:0 14px 36px rgba(16,40,34,.16); margin:.2rem 0 1.3rem}
.trust-bar{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.5rem}
.trust-chip{display:inline-flex; align-items:center; gap:.4rem; background:#fff; border:1px solid var(--line);
  color:var(--ink); font-weight:700; font-size:.82rem; padding:.45rem .85rem; border-radius:999px; box-shadow:var(--shadow-sm)}
.form-reassure{text-align:center; color:var(--faint); font-size:.78rem; margin:.7rem 0 0}

/* page merci / onboarding */
.onboard-now{background:var(--brand-soft); border:1px solid #c7eede; border-radius:var(--radius); padding:1.2rem; margin:1.6rem 0 .4rem}
.onboard-now h3{margin:0 0 .2rem; color:var(--brand-dark)}
.onboard-soon{background:var(--accent-soft); border:1px solid #ffd9c9; border-radius:var(--radius); padding:1rem 1.2rem; margin:1.5rem 0; color:#c2410c; font-weight:600}
.journey{display:grid; gap:.7rem; margin:1rem 0 0}
.journey .j{display:flex; gap:.9rem; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:.95rem 1.1rem; box-shadow:var(--shadow-sm); text-align:left}
.journey .jn{flex:none; width:30px; height:30px; border-radius:50%; background:var(--brand); color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center}
@media(max-width:860px){.hero-banner{max-width:100%}}

/* hero avec mockup téléphone */
.hero-text{align-self:center}
.hero-media{display:flex; justify-content:center; align-items:center}
@media(max-width:860px){.hero-media{margin-top:1.8rem; order:3}}
.phone{width:300px; max-width:78vw; background:#10181f; border-radius:40px; padding:9px;
  box-shadow:0 30px 60px rgba(16,40,34,.30)}
.phone .screen{display:block; border-radius:32px; overflow:hidden; background:#eef4f1; line-height:0}
.phone .screen img{display:block; width:100%; height:auto}
.signup-section{max-width:540px; margin:0 auto; padding:2.6rem 1.4rem; scroll-margin-top:72px}
.ios-note{font-size:.82rem; color:#3551b5; background:#eef4ff; border:1px solid #dbe6ff;
  border-radius:var(--radius-sm); padding:.55rem .8rem; margin:0 0 1rem}

/* ---- Vrais écrans Play Store : logo nav, hero, galerie, responsive ---- */
img{max-width:100%}
.brand .logo{width:30px; height:30px; border-radius:9px; display:block; box-shadow:0 1px 3px rgba(16,40,34,.2)}
.hero-shot{display:block; width:100%; max-width:300px; height:auto; border-radius:22px;
  box-shadow:0 22px 48px rgba(16,40,34,.18); margin:0 auto}

.gallery-section h2{margin-bottom:.2rem}
.gallery{display:flex; gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:1.6rem .2rem .6rem; scroll-padding:1rem; scrollbar-width:thin}
.gallery img{flex:0 0 auto; width:232px; max-width:62vw; height:auto; border-radius:20px;
  box-shadow:var(--shadow); scroll-snap-align:center; background:#fff}
.gallery::-webkit-scrollbar{height:8px}
.gallery::-webkit-scrollbar-thumb{background:var(--line); border-radius:99px}

/* responsive nav + finitions mobile */
.lp-nav{flex-wrap:wrap; row-gap:.5rem}
@media(max-width:600px){
  .lp-nav .btn-sm{display:none}   /* le gros CTA du hero suffit sur mobile */
  .hero h1{font-size:1.7rem}
  .signup-section{padding:2rem 1rem}
  .section{padding:2.2rem 1.1rem}
}

/* =====================================================================
   BOÎTE MAIL (admin) — bulles de conversation + cockpit agents
   ===================================================================== */
.msg{border:1px solid var(--line); border-radius:var(--radius-sm); padding:.8rem 1rem; margin-bottom:.8rem; background:#fff}
.msg:last-child{margin-bottom:0}
.msg-in{background:#fbfdfc; border-left:3px solid var(--faint)}
.msg-out{background:var(--brand-soft); border-left:3px solid var(--brand)}
.msg-meta{display:flex; align-items:center; gap:.5rem; font-size:.85rem; margin-bottom:.45rem; color:var(--ink)}
.msg-meta .spacer{flex:1}
.msg-body{white-space:normal; font-size:.92rem; line-height:1.6; color:#27343a; word-break:break-word}

/* navbar : pastille non-lus */
.topnav a .nav-badge{display:inline-block; min-width:17px; padding:0 5px; margin-left:.3rem; border-radius:999px;
  background:var(--accent); color:#fff; font-size:.7rem; font-weight:800; line-height:17px; text-align:center; vertical-align:middle}

/* cockpit agents : recommandation + statut */
.agent .reco{font-size:.85rem; color:var(--muted); margin:.45rem 0 .6rem; line-height:1.45}
.agent .agent-foot{display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding-top:.55rem; border-top:1px dashed var(--line)}
.agent.tone-bad{border-color:#f3c6c6} .agent.tone-bad .emoji{filter:none}
.agent.tone-warn{border-color:#f1ddb8}
.agent.tone-ok{border-color:#bfe6d5}
.iris-brief{display:flex; gap:1rem; align-items:flex-start; padding:1.15rem 1.3rem; border-radius:var(--radius);
  background:linear-gradient(135deg,#0f3b30,#12805f); color:#fff; box-shadow:var(--shadow); margin-bottom:1.4rem}
.iris-brief .ib-emoji{font-size:2rem; line-height:1}
.iris-brief h3{margin:0 0 .2rem; color:#fff}
.iris-brief p{margin:0; color:rgba(255,255,255,.9); font-size:.95rem}
.iris-brief .btn{background:#fff; color:var(--brand-dark); margin-top:.7rem}
.iris-brief .btn:hover{background:#eafaf4}

/* =====================================================================
   REFONTE VISUELLE (2026-06-02) — icônes, dataviz, micro-animations
   Libs CDN : Lucide (icônes), AOS (scroll), CountUp (compteurs). Tout
   dégrade gracieusement : sans JS/CDN, le rendu serveur reste correct.
   ===================================================================== */
/* Icônes Lucide : héritent de currentColor, tailles calibrées */
[data-lucide], svg.lucide{ vertical-align:middle }
.topnav a{ display:inline-flex; align-items:center }
.topnav a [data-lucide], .topnav a svg{ width:16px; height:16px; vertical-align:-3px; margin-right:.4rem }
.feature .ic [data-lucide], .feature .ic svg{ width:28px; height:28px; stroke-width:1.75; color:var(--brand) }
.hero-points .ic [data-lucide], .hero-points .ic svg{ width:18px; height:18px }
.trust-chip [data-lucide], .trust-chip svg{ width:15px; height:15px; vertical-align:-2px }

/* Pastille « testeurs chauds » dans la topbar admin */
.hot-pill{ display:inline-flex; align-items:center; gap:.3rem; background:var(--accent); color:#fff; font-weight:800;
  font-size:.82rem; padding:.34rem .72rem; border-radius:999px; text-decoration:none; box-shadow:0 2px 10px rgba(255,122,89,.45);
  animation:hotpulse 2.4s ease-in-out infinite }
.hot-pill:hover{ text-decoration:none; transform:translateY(-1px); filter:brightness(1.06) }
@keyframes hotpulse{ 0%,100%{ box-shadow:0 2px 10px rgba(255,122,89,.45) } 50%{ box-shadow:0 2px 20px rgba(255,122,89,.8) } }

/* KPI : sparkline de tendance (SVG inline, aucune lib) */
.kpi .spark{ display:block; margin-top:.55rem; line-height:0 }
.kpi .spark svg{ width:100%; height:34px; overflow:visible }
.spark polyline{ fill:none; stroke:var(--brand); stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.spark .area{ fill:rgba(18,184,134,.10); stroke:none }
.kpi.accent .spark polyline{ stroke:#7ef0c8 } .kpi.accent .spark .area{ fill:rgba(126,240,200,.18) }
.kpi.accent .spark polyline, .kpi.accent .spark .area{ }

/* Micro-interactions cartes (landing) */
.feature, .step{ transition:transform .18s ease, box-shadow .18s ease }
.feature:hover, .step:hover{ transform:translateY(-3px); box-shadow:var(--shadow) }
.gallery img{ transition:transform .2s ease, box-shadow .2s ease }
.gallery img:hover{ transform:translateY(-4px) scale(1.012); box-shadow:0 18px 40px rgba(16,40,34,.20) }

/* Halo coloré animé derrière le hero */
.hero{ position:relative; isolation:isolate }
.hero::before{ content:""; position:absolute; z-index:-1; top:-32%; right:-12%; width:680px; height:680px; max-width:92vw;
  background:radial-gradient(closest-side, rgba(18,184,134,.22), rgba(255,122,89,.10) 58%, transparent 74%);
  filter:blur(6px); animation:floaty 16s ease-in-out infinite; pointer-events:none }
@keyframes floaty{ 0%,100%{ transform:translate(0,0) scale(1) } 50%{ transform:translate(-3%,4%) scale(1.07) } }

/* Preuve sociale + jauge de places (hero) */
.proof{ margin-top:1.5rem; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:1rem 1.15rem; box-shadow:var(--shadow-sm); max-width:430px }
.proof .pf-top{ display:flex; align-items:center; gap:.5rem; font-weight:700; font-size:.95rem }
.proof .pf-num{ font-size:1.7rem; font-weight:800; color:var(--brand-dark); letter-spacing:-.02em }
.proof .pf-cap{ margin-left:auto; font-size:.82rem; color:var(--muted); font-weight:700 }
.proof .progress{ margin-top:.6rem; height:8px }
.proof .pf-note{ font-size:.8rem; color:var(--muted); margin:.55rem 0 0 }

/* Bloc parrainage (page merci) */
.referral{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.25rem;
  box-shadow:var(--shadow-sm); margin:1.6rem 0 0; text-align:left }
.referral h3{ margin:0 0 .25rem }
.referral .ref-actions{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.8rem }

/* Respect de l'accessibilité : pas d'animation si l'utilisateur le demande */
@media(prefers-reduced-motion:reduce){
  .hero::before{ animation:none } .hot-pill{ animation:none }
  .feature, .step, .gallery img{ transition:none }
}