/* Outfit, police de la marque : hébergée avec le site (aucun appel à Google Fonts). */
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/outfit-regular.woff") format("woff"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/outfit-bold.woff") format("woff"); }
:root {
  --linen: #F4F1EA;
  --green: #2BFF86;
  --black: #000000;
  --white: #FFFFFF;
  --ink-soft: rgba(0, 0, 0, .72);
  --card-muted: #A6A6A6;
  --card-line: #262626;
  --star: #FFB627;
  --font-display: "Outfit", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-text: "Outfit", "Segoe UI", system-ui, -apple-system, sans-serif;
  --max: 1240px;
  --gutter: clamp(20px, 4vw, 48px);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(76px + env(safe-area-inset-top, 0px)); }
body {
  margin: 0;
  font-family: var(--font-text);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--black);
  background: var(--green);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--black); outline-offset: 3px; border-radius: 6px; }
.card :focus-visible, .card:focus-visible { outline-color: var(--green); }
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--black); color: var(--white); padding: 10px 16px; border-radius: 8px; text-decoration: none;
}
.skip:focus { top: calc(12px + env(safe-area-inset-top, 0px)); }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- En-tête ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--green);
  padding-top: env(safe-area-inset-top, 0px);
  transition: box-shadow .2s;
}
.site-header.is-scrolled { box-shadow: 0 1px 0 rgba(0,0,0,.18); }
.bar { display: flex; align-items: center; gap: 32px; height: 76px; }
.brand { display: block; flex-shrink: 0; }
.brand .logo { display: block; height: 36px; width: auto; }
.nav { display: flex; gap: 28px; margin-left: auto; }
.nav a {
  font-weight: 700; font-size: .95rem; text-decoration: none;
  padding: 6px 0; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
  transition: background-size .2s;
}
.nav a:hover { background-size: 100% 2px; }
.phone-pill {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--black); color: var(--green);
  font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: .01em;
  padding: 11px 18px; border-radius: 999px; text-decoration: none; white-space: nowrap;
}
.phone-pill svg { width: 17px; height: 17px; flex-shrink: 0; }
.phone-pill:hover { background: #1c1c1c; }
.menu-btn { display: none; }

/* ---------- Hero ---------- */
.hero { padding: clamp(32px, 6vw, 72px) 0 clamp(56px, 8vw, 104px); }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
.kicker { font-weight: 700; font-size: 1.05rem; margin: 0 0 22px; color: var(--ink-soft); }
h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.8rem, 5.8vw, 4.9rem);
  line-height: .98; letter-spacing: -.035em;
  margin: 0 0 28px; max-width: 13ch;
}
.lead { font-size: clamp(1.15rem, 1.5vw, 1.3rem); line-height: 1.55; max-width: 34em; margin: 0 0 36px; color: var(--ink-soft); }
.lead strong { color: var(--black); font-weight: 700; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-bottom: 48px; }
.btn-call {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--black); color: var(--white);
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  padding: 18px 28px; border-radius: 16px; text-decoration: none;
  transition: transform .15s;
}
.btn-call svg { width: 20px; height: 20px; color: var(--green); }
.btn-call:hover { transform: translateY(-2px); }
.btn-call span { color: var(--green); }
.link-mail { font-weight: 700; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--black); }
.facts li { padding: 16px 16px 0 0; font-size: 1rem; line-height: 1.4; color: var(--ink-soft); }
.facts li + li { padding-left: 20px; border-left: 1px solid rgba(0,0,0,.25); }
.facts b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.45rem; color: var(--black); letter-spacing: -.02em; line-height: 1.1; margin-bottom: 4px; }

/* ---------- Carte résultat (langage du rapport) ---------- */
.proof { position: relative; }
.card {
  background: var(--black); color: var(--white);
  border-radius: 28px; padding: clamp(22px, 3vw, 34px);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.55);
}
.card-head { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
.tile { width: 58px; height: 58px; border-radius: 14px; overflow: hidden; flex-shrink: 0; background: #fff; }
.tile img { width: 100%; height: 100%; object-fit: cover; }
.store { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.2; margin: 0; }
.since { color: var(--card-muted); font-size: .9rem; margin: 2px 0 0; }
.metrics { display: grid; grid-template-columns: 1.25fr 1fr; gap: 20px; }
.metric + .metric { border-left: 1px solid var(--card-line); padding-left: 20px; }
.metric-label { color: var(--card-muted); font-size: .9rem; margin: 0 0 4px; }
.big {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -.04em; line-height: .9;
  font-size: clamp(4rem, 8vw, 6.6rem); color: var(--green); font-variant-numeric: tabular-nums;
}
.rating { font-family: var(--font-display); font-weight: 700; letter-spacing: -.03em; line-height: .9; font-size: clamp(3rem, 5.6vw, 4.6rem); font-variant-numeric: tabular-nums; }
.stars { position: relative; display: inline-block; font-size: 1.15rem; letter-spacing: 3px; margin: 10px 0 12px; color: #3a3a3a; line-height: 1; }
.stars-fill { position: absolute; inset: 0 auto 0 0; overflow: hidden; white-space: nowrap; color: var(--star); width: 0; }
.was { color: var(--card-muted); font-size: .92rem; margin: 10px 0 12px; }
.was b { color: var(--white); font-weight: 700; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--green); color: var(--black);
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  padding: 5px 13px; border-radius: 999px;
}
.track { margin-top: 28px; }
.track-bar { position: relative; height: 12px; border-radius: 999px; background: var(--card-line); overflow: hidden; }
.track-before { position: absolute; inset: 0 auto 0 0; background: #5c5c5c; border-radius: 999px; z-index: 2; }
.track-after { position: absolute; inset: 0 auto 0 0; background: var(--green); border-radius: 999px; width: 0; }
.track-legend { display: flex; justify-content: space-between; color: var(--card-muted); font-size: .85rem; margin-top: 10px; }
.track-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.source { color: var(--card-muted); font-size: .8rem; margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--card-line); }

.unused-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.tab {
  font: 700 .9rem/1.2 var(--font-text); color: var(--black);
  background: transparent; border: 2px solid var(--black); border-radius: 999px;
  padding: 9px 15px; cursor: pointer; transition: background .15s, color .15s;
}
.tab:hover { background: rgba(0,0,0,.08); }
.tab[aria-selected="true"] { background: var(--black); color: var(--green); }

/* ---------- Mobile ---------- */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  h1 { max-width: 14ch; }
  .nav { display: none; }
  .bar { gap: 12px; }
  .phone-pill { margin-left: auto; }
  .menu-btn {
    display: inline-grid; place-items: center; width: 46px; height: 46px;
    border: 2px solid var(--black); border-radius: 999px; background: transparent; cursor: pointer; color: var(--black);
  }
  .menu-btn svg { width: 20px; height: 20px; }
  .nav.is-open {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--green); padding: 8px var(--gutter) 20px; border-bottom: 2px solid var(--black);
  }
  .nav.is-open a { padding: 14px 0; font-size: 1.15rem; border-bottom: 1px solid rgba(0,0,0,.15); background: none; }
}
@media (max-width: 560px) {
  .phone-pill .num { display: none; }
  .phone-pill { padding: 12px; }
  .brand .logo { height: 30px; }
  .btn-call { width: 100%; justify-content: center; font-size: 1.05rem; padding: 17px 18px; white-space: nowrap; }
  .facts li { flex-basis: 100%; padding: 14px 0 14px 0 !important; border-left: 0 !important; border-bottom: 1px solid rgba(0,0,0,.2); }
  .metric + .metric { padding-left: 16px; }
  .big { font-size: 3.6rem; }
  .rating { font-size: 2.9rem; }
  .chip { font-size: .9rem; padding: 4px 10px; }
}

.see-all { display: inline-block; margin-top: 18px; font-weight: 700; text-underline-offset: 5px; text-decoration-thickness: 2px; }

/* ---------- Sections communes ---------- */
.section { padding: clamp(64px, 9vw, 120px) 0; }
.h2 {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -.03em; line-height: 1.02;
  font-size: clamp(2.1rem, 4.4vw, 3.6rem); margin: 0 0 20px; max-width: 18ch;
}
.intro { font-size: 1.15rem; color: #3b3b3b; max-width: 36em; margin: 0; }

/* ---------- Logos clients ---------- */
.logos { background: var(--linen); padding: clamp(40px, 6vw, 64px) 0; }
.logos-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 28px; }
.logos-head p { margin: 0; }
.logos-title { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; }
.logos-note { color: #5a5a5a; font-size: .95rem; }
.logo-grid { display: grid; grid-template-columns: repeat(13, 1fr); gap: 14px; list-style: none; margin: 0; padding: 0; }
.logo-grid li { aspect-ratio: 1; border-radius: 18px; background: #fff; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.logo-grid img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Méthode ---------- */
.method { background: var(--white); border-top: 1px solid #e6e6e6; }
.method-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.method-aside { position: sticky; top: 110px; }
.your-part {
  margin-top: 36px; background: var(--green); border-radius: 24px; padding: 26px 28px;
}
.your-part h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; margin: 0 0 8px; letter-spacing: -.01em; }
.your-part p { margin: 0; }
.no-more { margin: 28px 0 0; border: 2px solid var(--black); border-radius: 24px; padding: 22px 26px; }
.no-more p { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; line-height: 1.3; margin: 0 0 8px; }
.no-more ul { list-style: none; margin: 0; padding: 0; }
.no-more li { display: flex; gap: 14px; align-items: center; padding: 10px 0; color: var(--black); font-weight: 400; }
.no-more li + li { border-top: 1px solid #e6e6e6; }
.no-more li::before {
  content: ""; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--black);
  -webkit-mask: none;
  background-image: linear-gradient(45deg, transparent 45%, var(--green) 45%, var(--green) 55%, transparent 55%), linear-gradient(-45deg, transparent 45%, var(--green) 45%, var(--green) 55%, transparent 55%);
  background-size: 12px 12px; background-position: center; background-repeat: no-repeat;
}

.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; position: relative; }
.steps::before { content: ""; position: absolute; left: 23px; top: 24px; bottom: 24px; width: 2px; background: var(--black); }
.step { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 22px; padding-bottom: 34px; }
.step:last-child { padding-bottom: 0; }
.step-num {
  counter-increment: s; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; position: relative; z-index: 1;
  background: var(--black); color: var(--green);
  font-family: var(--font-display); font-weight: 700; font-size: 1.2rem;
}
.step-num::before { content: counter(s); }
.step.is-you .step-num { background: var(--green); color: var(--black); box-shadow: 0 0 0 2px var(--black); }
.step-who { display: inline-block; font-size: .85rem; font-weight: 700; border-radius: 999px; padding: 3px 11px; margin-bottom: 8px; background: #f0f0f0; color: #3b3b3b; }
.step.is-you .step-who { background: var(--green); color: var(--black); }
.step h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; line-height: 1.2; margin: 0 0 6px; }
.step p { margin: 0; color: #3b3b3b; max-width: 34em; }
.channel { display: inline-flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.channel > span { font-size: .82rem; font-weight: 700; border: 1.5px solid var(--black); border-radius: 8px; padding: 2px 9px; }

/* ---------- Résultats ---------- */
.results { background: var(--black); color: var(--white); }
.results .intro { color: var(--card-muted); }
.results-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; margin-bottom: clamp(36px, 5vw, 56px); }
.total { text-align: right; }
.total b { display: block; font-family: var(--font-display); font-weight: 700; color: var(--green); font-size: clamp(4rem, 10vw, 8rem); line-height: .85; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.total span { color: var(--card-muted); font-size: .95rem; display: block; margin-top: 10px; max-width: 22em; margin-left: auto; }
.card .tile { box-shadow: 0 0 0 1px #3a3a3a; }
.todo { background: #3a2a00; color: #FFB627; border-radius: 6px; padding: 1px 6px; font-weight: 700; }
.results-foot { color: var(--card-muted); font-size: .88rem; margin: 22px 0 0; }

.results-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 44px; padding: 28px; border-radius: 24px; background: #141414; }
.results-cta p { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; margin: 0; flex: 1 1 260px; }
.btn-call--green { background: var(--green); color: var(--black); }
.link-mail--light { color: var(--white); }

@media (max-width: 980px) {
  .method-grid { grid-template-columns: 1fr; }
  .method-aside { position: static; }
  .results-top { grid-template-columns: 1fr; }
  .logo-grid { grid-template-columns: repeat(7, 1fr); }
  .total { text-align: left; }
  .total span { margin-left: 0; }
}
@media (max-width: 560px) {
  .logo-grid { grid-template-columns: repeat(5, 1fr); gap: 8px; }
  .facts { grid-template-columns: 1fr; }
  .logo-grid li { border-radius: 14px; }
}

/* ---------- Pied de page ---------- */
.site-footer { background: var(--black); color: var(--white); padding: clamp(48px, 7vw, 80px) 0 calc(28px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid #1f1f1f; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) auto auto; gap: 40px 64px; align-items: start; }
.logo--footer { height: 44px; width: auto; display: block; }
.signature { margin: 16px 0 0; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--white); }
.signature b { color: var(--green); }
.footer-nav, .footer-contact { display: flex; flex-direction: column; gap: 10px; }
.footer-nav a, .footer-contact a { color: #cfcfcf; text-decoration: none; }
.footer-nav a:hover, .footer-contact a:hover { color: var(--green); }
.footer-contact .footer-phone { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--green); }
.footer-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 48px; padding-top: 22px; border-top: 1px solid #262626; color: #8a8a8a; font-size: .85rem; }
.footer-legal p { margin: 0; display: flex; gap: 20px; flex-wrap: wrap; }
.footer-legal a { color: #8a8a8a; }
.site-footer :focus-visible { outline-color: var(--green); }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 20px; } .footer-brand { grid-column: 1 / -1; } .footer-contact a { font-size: .95rem; word-break: break-word; } .signature { font-size: .7rem; letter-spacing: .1em; } }

.logos-legal { margin: 18px 0 0; color: #6b6b6b; font-size: .82rem; max-width: 60em; }
.pillars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pillar { border: 2px solid var(--black); border-radius: 22px; padding: 24px; }
.pillar h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; line-height: 1.2; margin: 0 0 8px; }
.pillar p { margin: 0; color: #3b3b3b; }
.pillar--main, .pillar--wide { grid-column: 1 / -1; }
.pillar-link { display: inline-block; margin-top: 12px; font-weight: 700; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.pillar--main { background: var(--black); color: var(--white); border-color: var(--black); padding: 30px; }
.pillar--main h3 { font-size: 1.7rem; color: var(--green); }
.pillar--main p { color: #cfcfcf; max-width: 36em; }
.pillar--main .channel > span { border-color: var(--green); color: var(--green); }
.diy { margin-top: clamp(56px, 7vw, 88px); background: var(--linen); border-radius: 32px; padding: clamp(28px, 5vw, 56px); }
.diy-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.7rem, 3.2vw, 2.6rem); line-height: 1.08; letter-spacing: -.02em; margin: 0 0 32px; max-width: 22ch; }
.diy-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.diy-grid > div { border-top: 2px solid var(--black); padding-top: 16px; }
.diy-grid h4 { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; margin: 0 0 6px; }
.diy-grid p { margin: 0; color: #3b3b3b; }
.diy-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 40px; }
.diy-cta p { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; margin: 0; flex: 1 1 280px; }
.totals { display: flex; gap: clamp(28px, 4vw, 56px); align-items: flex-end; }
.totals .total { text-align: left; }
.totals .total span { max-width: 14em; margin-left: 0; }
.totals .total + .total { border-left: 1px solid #3a3a3a; padding-left: clamp(28px, 4vw, 56px); }
@media (max-width: 980px) {
  .diy-grid { grid-template-columns: 1fr; gap: 20px; }
  .totals { justify-content: flex-start; flex-wrap: wrap; }
}
@media (max-width: 560px) {
  .pillars { grid-template-columns: 1fr; }
  .totals { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
  .total b { font-size: 2.9rem; }
  .totals .total + .total { padding-left: 18px; }
  .totals .total:first-child { padding-right: 14px; }
}

/* ---------- Cas clients ---------- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cases { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.case {
  background: #0f0f0f; border: 1px solid #262626; border-radius: 26px; padding: clamp(22px, 2.6vw, 30px);
  transition: border-color .25s, transform .25s;
}
.case:hover { border-color: #3d3d3d; transform: translateY(-3px); }
.case--featured { grid-column: 1 / -1; background: #111; border-color: #2e2e2e; }
.case-head { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.case-head .tile { width: 56px; height: 56px; border-radius: 14px; box-shadow: 0 0 0 1px #3a3a3a; }
.case-head h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.2; margin: 0; }
.case-since { margin: 3px 0 0; color: var(--card-muted); font-size: .88rem; }
.case-x { margin: 0 0 0 auto; display: flex; align-items: center; gap: 12px; text-align: right; }
.case-x b { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.6rem, 5vw, 4rem); line-height: 1; color: var(--green); letter-spacing: -.03em; }
.case-x span { color: #cfcfcf; font-size: .95rem; max-width: 12em; line-height: 1.3; text-align: left; }
.case-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.case-block + .case-block { border-left: 1px solid #262626; padding-left: 28px; }
.case-label { margin: 0 0 6px; color: var(--card-muted); font-size: .88rem; }
.case-values { margin: 0 0 12px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-family: var(--font-display); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.v-before { color: #7a7a7a; font-size: 1.5rem; }
.v-arrow { color: #7a7a7a; font-size: 1.3rem; }
.v-after { color: var(--white); font-size: clamp(2.4rem, 3.6vw, 3rem); letter-spacing: -.02em; }
.case-block:first-child .v-after { color: var(--green); }
.case--featured .v-after { font-size: clamp(3rem, 6vw, 4.6rem); }
.case--featured .v-before { font-size: 1.9rem; }
.case .chip { font-size: .9rem; padding: 4px 11px; }

.bars { margin-top: 22px; display: grid; gap: 10px; }
.cbar { display: grid; grid-template-columns: 82px 1fr; align-items: center; gap: 10px; font-size: .82rem; color: var(--card-muted); }
.bar-track { height: 12px; border-radius: 999px; background: #1f1f1f; overflow: hidden; }
.bar-fill { display: block; height: 100%; width: var(--w); border-radius: 999px; background: var(--green); }
.bar-fill--before { background: #6b6b6b; }

.gauge { margin-top: 26px; }
.gauge-track { position: relative; height: 12px; border-radius: 999px; background: #1f1f1f; }
.gauge-seg { position: absolute; top: 0; bottom: 0; left: var(--from); width: calc(var(--to) - var(--from)); background: var(--green); border-radius: 999px; }
.gauge-dot { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; transform: translate(-50%, -50%); }
.gauge-dot--before { left: var(--from); background: #6b6b6b; box-shadow: 0 0 0 3px #0f0f0f; }
.gauge-dot--after {
  left: var(--to); width: 26px; height: 26px; background: var(--green); color: var(--black);
  font-size: .8rem; line-height: 26px; text-align: center; font-style: normal; box-shadow: 0 0 0 4px rgba(43,255,134,.18);
}
.gauge-scale { display: flex; justify-content: space-between; margin-top: 10px; color: #6b6b6b; font-size: .78rem; font-variant-numeric: tabular-nums; }

/* Animation au défilement (activée seulement si le navigateur le permet) */
.cases.is-armed .bar-fill { width: 0; transition: width 1.1s cubic-bezier(.2,.8,.2,1); }
.cases.is-armed .gauge-seg { width: 0; transition: width 1.1s cubic-bezier(.2,.8,.2,1) .15s; }
.cases.is-armed .gauge-dot--after { left: var(--from); transition: left 1.1s cubic-bezier(.2,.8,.2,1) .15s; }
.cases.is-armed .case.is-in .bar-fill { width: var(--w); }
.cases.is-armed .case.is-in .gauge-seg { width: calc(var(--to) - var(--from)); }
.cases.is-armed .case.is-in .gauge-dot--after { left: var(--to); }
.cases.is-armed .case { opacity: 0; transform: translateY(18px); transition: opacity .6s, transform .6s, border-color .25s; }
.cases.is-armed .case.is-in { opacity: 1; transform: none; }
.cases.is-armed .case.is-in:hover { transform: translateY(-3px); }

@media (max-width: 980px) {
  .cases { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .case-body { grid-template-columns: 1fr; gap: 22px; }
  .case-block + .case-block { border-left: 0; padding-left: 0; border-top: 1px solid #262626; padding-top: 22px; }
  .case-head { flex-wrap: wrap; }
  .case-x { margin: 6px 0 0; width: 100%; text-align: left; }
}

/* ---------- Exemple de rapport ---------- */
.report-sec { background: var(--linen); }
.report-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(36px, 6vw, 88px); align-items: start; }
.report-text { position: sticky; top: 110px; }
.rp-keys { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 10px; }
.rp-keys button {
  width: 100%; display: flex; gap: 16px; align-items: flex-start; text-align: left; cursor: pointer;
  font: inherit; color: var(--black); background: var(--white); border: 2px solid transparent; border-radius: 18px; padding: 16px 18px;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.rp-keys button:hover, .rp-keys button.is-on { border-color: var(--black); transform: translateX(4px); box-shadow: 0 10px 24px -16px rgba(0,0,0,.4); }
.rp-keys b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; margin-bottom: 2px; }
.rp-keys span span, .rp-keys button > span:last-child { color: #3b3b3b; font-size: 1rem; line-height: 1.45; }
.rp-key-n, .rp-pin {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--black); color: var(--green); font-family: var(--font-display); font-weight: 700; font-size: .95rem;
  transition: background .2s, color .2s, transform .2s;
}
.rp-keys button.is-on .rp-key-n { background: var(--green); color: var(--black); transform: scale(1.1); }

.report-stage { position: relative; margin: 0; padding-top: 18px; }
.report-stage::before {
  content: ""; position: absolute; inset: 40px -14px -14px 14px; border-radius: 28px; background: #e4dfd3;
}
.rp-badge {
  position: absolute; top: 0; left: 24px; z-index: 3; margin: 0;
  background: var(--black); color: var(--white); font-size: .85rem; font-weight: 700; padding: 8px 14px; border-radius: 999px;
}
.report {
  position: relative; z-index: 1; background: var(--white); border-radius: 28px; overflow: hidden;
  font-size: clamp(10.5px, 1.12vw, 15.5px); box-shadow: 0 40px 80px -40px rgba(0,0,0,.45);
}
.rp-head { position: relative; background: var(--green); padding: 2.6em 2.2em 0; }
.rp-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2.6em; background: var(--white); }
.rp-head-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5em; }
.rp-title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 2.7em; line-height: 1; letter-spacing: -.02em; }
.rp-logo { width: 14em; height: auto; flex-shrink: 0; }
.rp-head-mid { margin: 1em 0 1.4em; }
.rp-month { display: inline-block; background: var(--black); color: var(--green); font-family: var(--font-display); font-weight: 700; font-size: 1.15em; padding: .45em 1.1em; border-radius: 999px; }
.rp-tiles { position: relative; z-index: 1; display: flex; gap: .9em; }
.rp-tile {
  width: 5.2em; height: 5.2em; border-radius: 1em; display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--white); font-size: 1em; font-weight: 400; line-height: 1.1;
}
.rp-tile b { font-family: var(--font-display); font-size: 1.9em; font-weight: 700; }
.rp-tile--1 { background: #1f3a5f; }
.rp-tile--2 { background: #7a3b2e; }
.rp-body { padding: 1.6em 2.2em 1.4em; }
.rp-zone { position: relative; border-radius: 1.4em; transition: opacity .3s, box-shadow .3s; }
.report.has-focus .rp-zone { opacity: .35; }
.report.has-focus .rp-zone.is-on { opacity: 1; box-shadow: 0 0 0 4px var(--green), 0 0 0 7px var(--black); }
.rp-pin { position: absolute; top: -.9em; left: -.9em; z-index: 2; width: 2.2em; height: 2.2em; font-size: 1em; box-shadow: 0 0 0 3px var(--white); }
.report[data-zone="1"] .rp-kpis .rp-pin, .report[data-zone="2"] .rp-progress .rp-pin,
.report[data-zone="3"] .rp-rows .rp-pin:not(.rp-pin--4), .report[data-zone="4"] .rp-pin--4 { background: var(--green); color: var(--black); transform: scale(1.15); }
.rp-dist { border-radius: .5em; transition: box-shadow .3s; }
.report.has-focus .rp-zone.is-soft { opacity: 1; }
.report[data-zone="2"] .rp-row-main, .report[data-zone="2"] .rp-dist,
.report[data-zone="2"] .rp-note > b, .report[data-zone="2"] .rp-note .rp-stars, .report[data-zone="2"] .rp-chip--flat { opacity: .3; }
.rp-row-main, .rp-dist, .rp-note > b, .rp-note .rp-stars, .rp-chip--flat { transition: opacity .3s; }
.rp-chip--up { transition: box-shadow .3s, transform .3s; }
.report[data-zone="2"] .rp-chip--up { box-shadow: 0 0 0 .25em #fff, 0 0 0 .5em var(--black); transform: scale(1.12); }
.rp-dist, .rp-chip--up { cursor: default; }
.rp-row-main, .rp-note { transition: opacity .3s; }
.report[data-zone="4"] .rp-row-main, .report[data-zone="4"] .rp-note { opacity: .35; }
.rp-dist.is-on { box-shadow: 0 0 0 .45em #fff, 0 0 0 .7em var(--green); }
.rp-pin--4 { left: auto; right: 34%; }
.rp-kpis { display: grid; grid-template-columns: 1fr 1fr 1fr; background: var(--black); color: var(--white); padding: 1.6em 0; }
.rp-kpis > div { padding: 0 1.6em; }
.rp-kpis > div + div { border-left: 1px solid #2a2a2a; }
.rp-big { display: block; font-family: var(--font-display); font-weight: 700; font-size: 3.6em; line-height: 1; color: var(--green); letter-spacing: -.02em; }
.rp-big em { font-style: normal; font-size: .5em; }
.rp-group { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.9em; line-height: 1.05; }
.rp-kpis p { margin: .5em 0 0; font-weight: 700; font-size: 1.05em; }
.rp-kpis small { display: block; font-weight: 400; color: #9a9a9a; font-size: .9em; margin-top: .15em; }
.rp-progress { display: flex; align-items: center; gap: 1.6em; margin-top: 1.2em; border: 2px solid var(--green); padding: 1em 1.4em; }
.rp-progress > p { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.1em; line-height: 1.15; width: 6.5em; }
.rp-progress ul { list-style: none; margin: 0; padding: 0; flex: 1; display: grid; gap: .35em; }
.rp-progress li { display: flex; justify-content: space-between; gap: 1em; font-size: 1em; }
.rp-detail-head { display: flex; justify-content: space-between; align-items: baseline; margin: 1.8em 0 0; padding-bottom: .6em; border-bottom: 2px solid var(--black); }
.rp-detail-head p { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.45em; }
.rp-detail-head span { color: #777; font-size: .95em; }
.rp-rows { margin-top: .4em; }
.rp-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 7.4em; gap: 1.4em; align-items: center; padding: 1.1em .4em; border-bottom: 1px solid #ececec; }
.rp-row:last-child { border-bottom: 0; }
.rp-store { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.15em; }
.rp-count { margin: .3em 0 0; color: #444; display: flex; align-items: center; gap: .5em; flex-wrap: wrap; }
.rp-count b { color: var(--black); font-family: var(--font-display); font-size: 1.1em; }
.rp-pos { margin: .3em 0 0; color: #777; font-size: .92em; }
.rp-pos b { color: #0f9d58; }
.rp-chip { display: inline-block; background: var(--green); color: var(--black); font-family: var(--font-display); font-weight: 700; font-size: .9em; padding: .2em .7em; border-radius: 999px; white-space: nowrap; }
.rp-chip--flat { background: #eeeeee; color: #555; }
.rp-dist { display: grid; gap: .22em; }
.rp-d { display: grid; grid-template-columns: 1.8em 1fr 1.2em; align-items: center; gap: .5em; font-size: .78em; color: #666; }
.rp-d b { text-align: right; color: var(--black); }
.rp-dt { height: .6em; background: #efefef; border-radius: 999px; overflow: hidden; }
.rp-df { display: block; height: 100%; border-radius: 999px; }
.rp-df--ok { background: #0f9d58; }
.rp-df--mid { background: #f2b33d; }
.rp-df--ko { background: #e5484d; }
.rp-note { border-left: 1px solid #ececec; padding-left: 1.1em; display: flex; flex-direction: column; align-items: flex-start; gap: .35em; }
.rp-note > b { font-family: var(--font-display); font-weight: 700; font-size: 2.4em; line-height: 1; }
.rp-stars { position: relative; display: inline-block; color: #d9d9d9; font-size: .95em; letter-spacing: .1em; line-height: 1; }
.rp-stars span { position: absolute; inset: 0 auto 0 0; overflow: hidden; white-space: nowrap; color: var(--star); }
.rp-foot { display: flex; justify-content: space-between; align-items: center; background: var(--black); color: #9a9a9a; padding: 1.1em 2.2em; font-size: .9em; }
.rp-foot b { color: var(--green); font-family: var(--font-display); font-size: 1.15em; }

@media (max-width: 980px) {
  .report-grid { grid-template-columns: 1fr; }
  .report-text { position: static; }
  .report { font-size: clamp(9px, 2.2vw, 14px); }
}
@media (max-width: 560px) {
  .report-stage { padding-top: 44px; }
  .report-stage::before { inset: 60px -6px -8px 6px; }
  .rp-badge { left: 0; font-size: .8rem; }
  .report { font-size: 8.6px; }
  .rp-head { padding: 2.2em 1.6em 0; }
  .rp-body { padding: 1.6em 1.4em 1.2em; }
  .rp-row { grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr) 6.6em; gap: 1em; }
  .rp-pin { width: 2.6em; height: 2.6em; font-size: 1.1em; }
}

/* Carte du hero : même langage que les cas clients, en plus grand */
.hero-case .card-head { margin-bottom: 24px; }
.hero-case .case-body { gap: 24px; }
.hero-case .case-block + .case-block { padding-left: 24px; }
.hero-case .v-after { font-size: clamp(3rem, 5vw, 4.4rem); }
.hero-case .v-before { font-size: 1.7rem; }
.hero-case .gauge-dot--before { box-shadow: 0 0 0 3px var(--black); }
.hero-case .bar-track, .hero-case .gauge-track { background: #222; }
.hero-case.is-armed .bar-fill { width: 0; transition: width 1.3s cubic-bezier(.2,.8,.2,1); }
.hero-case.is-armed .gauge-seg { width: 0; transition: width 1.3s cubic-bezier(.2,.8,.2,1) .1s; }
.hero-case.is-armed .gauge-dot--after { left: var(--from); transition: left 1.3s cubic-bezier(.2,.8,.2,1) .1s; }
.hero-case.is-armed.is-in .bar-fill { width: var(--w); }
.hero-case.is-armed.is-in .gauge-seg { width: calc(var(--to) - var(--from)); }
.hero-case.is-armed.is-in .gauge-dot--after { left: var(--to); }
@media (max-width: 560px) {
  .hero-case .case-body { grid-template-columns: 1fr 1fr; gap: 16px; }
  .hero-case .case-block + .case-block { border-left: 1px solid #262626; border-top: 0; padding-left: 16px; padding-top: 0; }
  .hero-case .v-after { font-size: 2.6rem; }
  .hero-case .v-before { font-size: 1.2rem; }
  .hero-case .cbar { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------- Spécialistes ---------- */
.expert { background: var(--green); overflow-x: clip; }
.expert-top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(36px, 6vw, 88px); align-items: start; }
.expert .h2 { max-width: 14ch; }
.expert-lead { font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.5; margin: 0 0 32px; max-width: 32em; }
.expert-lead strong { font-weight: 700; }
.expert-story { margin: -12px 0 0; padding: 4px 0 4px 22px; border-left: 4px solid var(--black); max-width: 32em; }
.expert-story p { margin: 0; font-size: 1.08rem; line-height: 1.55; }
.expert-for { margin: 0 0 10px; font-weight: 700; }
.univers { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.univers li { background: var(--black); color: var(--green); font-family: var(--font-display); font-weight: 700; padding: 8px 16px; border-radius: 999px; font-size: 1rem; }
.expert-who { margin: 18px 0 0; color: var(--ink-soft); }
.expert-stats { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.expert-stats li {
  display: grid; grid-template-columns: 7.5rem 1fr; align-items: center; gap: 20px;
  background: var(--black); color: var(--white); border-radius: 24px; padding: 22px 26px;
  transition: transform .25s;
}
.expert-stats li:hover { transform: translateX(-6px); }
.expert-stats b { font-family: var(--font-display); font-weight: 700; font-size: 3.2rem; line-height: 1; color: var(--green); letter-spacing: -.03em; white-space: nowrap; }
.expert-stats li > span { color: #d6d6d6; font-size: 1.02rem; line-height: 1.4; }
.expert-sub { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 2rem); margin: clamp(56px, 7vw, 88px) 0 22px; letter-spacing: -.01em; }
.insights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.insight { background: var(--white); border-radius: 24px; padding: 26px; transition: transform .25s, box-shadow .25s; }
.insight:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -24px rgba(0,0,0,.45); }
.insight-n { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: .95rem; color: var(--black); background: var(--green); border-radius: 999px; padding: 3px 11px; margin-bottom: 16px; }
.insight h4 { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; margin: 0 0 8px; line-height: 1.2; }
.insight p { margin: 0; color: #3b3b3b; }
.expert-side { display: grid; gap: 12px; }
.expert-card { background: var(--white); border-radius: 24px; padding: 24px 26px; }
.expert-card .expert-who { color: #3b3b3b; margin-top: 16px; }
.expert-top { align-items: center; }
/* Apparition échelonnée au défilement */
.expert-side.is-armed > * , .expert-side.is-armed .expert-stats li { opacity: 0; transform: translateY(18px); transition: opacity .6s, transform .6s cubic-bezier(.2,.8,.2,1); }
.expert-side.is-armed .expert-stats { opacity: 1; transform: none; }
.expert-side.is-armed.is-in > *, .expert-side.is-armed.is-in .expert-stats li { opacity: 1; transform: none; }
.expert-side.is-in .expert-stats li:nth-child(2) { transition-delay: .12s; }
.expert-side.is-in .expert-stats li:nth-child(3) { transition-delay: .24s; }
.expert-side.is-in .expert-card { transition-delay: .36s; }
.expert-side.is-in .expert-stats li:hover { transform: translateX(-6px); transition-delay: 0s; }

@media (max-width: 980px) {
  .expert-top { grid-template-columns: 1fr; }
  .insights { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .expert-stats li { grid-template-columns: 5.4rem 1fr; gap: 14px; padding: 18px 20px; }
  .expert-stats b { font-size: 2.4rem; }
}

/* ---------- Tarifs ---------- */
.pricing { background: var(--white); }
.pricing .h2 { max-width: 20ch; }

.price-card { margin-top: clamp(32px, 4vw, 48px); background: var(--black); color: var(--white); border-radius: 28px; padding: clamp(26px, 3.6vw, 48px); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.price-main { display: flex; flex-direction: column; }
.price-from { margin: 0; color: #cfcfcf; font-size: 1.05rem; }
.price-amount { margin: 6px 0 0; display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.price-amount b { font-family: var(--font-display); font-weight: 700; font-size: clamp(4.4rem, 9vw, 7rem); line-height: .85; color: var(--green); letter-spacing: -.04em; }
.price-amount span { color: #cfcfcf; font-size: 1.05rem; line-height: 1.35; padding-bottom: 6px; }
.price-note { margin: 22px 0 0; color: #9a9a9a; font-size: .95rem; max-width: 30em; }
.price-cancel { margin: 0; padding-top: 24px; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; }
.pricing-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 28px; padding: 28px; border-radius: 24px; background: var(--green); }
.pricing-cta p { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; margin: 0; flex: 1 1 260px; }
@media (max-width: 980px) { .price-card { grid-template-columns: 1fr; } .included { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .included { grid-template-columns: 1fr; } }

.compare { margin-top: clamp(40px, 5vw, 64px); }
.compare-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.1; letter-spacing: -.02em; margin: 0 0 24px; max-width: 22ch; }
.compare-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 0; }
.compare-col { border-radius: 24px; padding: clamp(22px, 3vw, 32px); }
.compare-col ul { list-style: none; margin: 0; padding: 0; }
.compare-col li { padding: 10px 0 10px 32px; position: relative; border-top: 1px solid rgba(0,0,0,.08); }
.compare-col li::before { position: absolute; left: 0; top: 10px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; font-weight: 700; }
.compare-label { margin: 0 0 12px; font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; }
.compare-col--old { background: #f1f1f1; color: #555; }
.compare-col--old li::before { content: "✕"; background: #d9d9d9; color: #555; }
.compare-col--new { background: var(--black); color: var(--white); }
.compare-col--new .compare-label { color: var(--green); }
.compare-col--new li { border-top-color: #262626; }
.compare-col--new li::before { content: "✓"; background: var(--green); color: var(--black); }
.compare-vs { align-self: center; z-index: 1; margin: 0 -22px; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: var(--black); font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; box-shadow: 0 0 0 6px var(--white); }
.chain { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; counter-reset: c; }
.chain li { position: relative; background: var(--linen); border-radius: 20px; padding: 20px 22px 20px 64px; color: #3b3b3b; counter-increment: c; }
.chain li::before { content: counter(c); position: absolute; left: 20px; top: 18px; width: 30px; height: 30px; border-radius: 50%; background: var(--black); color: var(--green); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; }
.chain li:not(:last-child)::after { content: "→"; position: absolute; right: -16px; top: 50%; transform: translateY(-50%); z-index: 1; width: 22px; text-align: center; font-weight: 700; color: var(--black); }
.chain b { color: var(--black); }
@media (max-width: 860px) {
  .compare-grid { grid-template-columns: 1fr; }
  .compare-vs { justify-self: center; margin: -18px 0; }
  .chain { grid-template-columns: 1fr; }
  .chain li:not(:last-child)::after { content: "↓"; right: auto; left: 30px; top: auto; bottom: -18px; transform: none; }
}

/* Calculateur de tarif */
.calc { background: #111; border: 1px solid #262626; border-radius: 22px; padding: clamp(20px, 2.6vw, 30px); }
.calc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.calc-head label { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; }
.calc-head output { font-family: var(--font-display); font-weight: 700; font-size: 2rem; color: var(--green); line-height: 1; }
#calc-range { -webkit-appearance: none; appearance: none; width: 100%; height: 10px; border-radius: 999px; outline-offset: 6px;
  background: linear-gradient(var(--green), var(--green)) 0 0 / var(--fill, 0%) 100% no-repeat, #2a2a2a; cursor: pointer; }
#calc-range::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: var(--green); border: 4px solid var(--black); box-shadow: 0 0 0 2px var(--green); cursor: grab; }
#calc-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--green); border: 4px solid var(--black); box-shadow: 0 0 0 2px var(--green); cursor: grab; }
#calc-range:focus-visible { outline: 3px solid var(--green); }
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-items: end; height: 150px; margin-top: 24px; }
.tier { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; }
.tier-bar { height: calc(var(--h) - 28px); border-radius: 14px 14px 6px 6px; background: #2a2a2a; display: flex; align-items: flex-start; justify-content: center; padding-top: 12px; transition: background .25s, transform .25s; }
.tier-bar b { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; color: var(--white); }
.tier span { text-align: center; font-size: .82rem; color: #9a9a9a; line-height: 1.2; }
.tier.is-on .tier-bar { background: var(--green); transform: translateY(-4px); }
.tier.is-on .tier-bar b { color: var(--black); }
.tier.is-on span { color: var(--green); font-weight: 700; }
.calc-result { margin: 20px 0 0; color: #cfcfcf; font-size: 1.02rem; line-height: 1.5; min-height: 3em; }
.calc-result b { color: var(--white); }

.included-band { margin-top: 18px; background: var(--linen); border-radius: 28px; padding: clamp(24px, 3.2vw, 40px); }
.included-band h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; margin: 0 0 18px; }
.included { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.included li { position: relative; background: var(--white); border-radius: 18px; padding: 18px 18px 18px 58px; color: #3b3b3b; line-height: 1.35; transition: transform .2s; }
.included li:hover { transform: translateY(-3px); }
.included li b { display: block; font-family: var(--font-display); font-weight: 700; color: var(--black); font-size: 1.08rem; margin-bottom: 2px; }
.included li::before {
  content: "✓"; position: absolute; left: 18px; top: 18px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--green); color: var(--black); font-weight: 700; font-size: .85rem;
}
@media (max-width: 980px) { .included { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .included { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq { background: var(--linen); }
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(36px, 6vw, 88px); align-items: start; }
.faq-main, .faq-aside { min-width: 0; }

.faq-contact { margin-top: 18px; background: var(--black); color: var(--white); border-radius: 24px; padding: 22px 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.faq-contact p { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; flex: 1 1 180px; }
.faq-contact .btn-call { background: var(--green); color: var(--black); }
.faq-contact .btn-call span { color: var(--black); }
.faq-contact .btn-call svg { color: var(--black); }
.faq-contact .link-mail { color: var(--white); }
.faq-list { display: block; }
.qa { background: var(--white); border-radius: 20px; border: 2px solid transparent; transition: border-color .2s; }
.qa[open] { border-color: var(--black); }
.qa summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 22px; font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; line-height: 1.3; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover span { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.qa summary i { position: relative; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--green); transition: background .2s, transform .3s; }
.qa summary i::before, .qa summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2.5px; background: var(--black); border-radius: 2px; transform: translate(-50%, -50%); transition: transform .3s; }
.qa summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.qa[open] summary i { background: var(--black); transform: rotate(180deg); }
.qa[open] summary i::before, .qa[open] summary i::after { background: var(--green); }
.qa[open] summary i::after { transform: translate(-50%, -50%) rotate(0deg); }
.qa-a { padding: 0 22px 20px; }
.qa-a p { margin: 0; color: #3b3b3b; max-width: 40em; }
.qa[open] .qa-a { animation: qa-in .3s ease; }
@keyframes qa-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.faq-tabs { margin-top: 32px; display: grid; gap: 10px; }
.faq-tabs button {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; cursor: pointer; text-align: left;
  font: 700 1.15rem/1.2 var(--font-display); color: var(--black); background: var(--white); border: 2px solid transparent; border-radius: 18px; padding: 16px 20px;
  transition: border-color .2s, background .2s, transform .2s;
}
.faq-tabs button:hover { border-color: var(--black); transform: translateX(4px); }
.tab-ico { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--linen); transition: background .2s, color .2s, transform .25s; }
.tab-ico svg { width: 16px; height: 16px; }
.faq-tabs button:hover .tab-ico { transform: translateX(3px); background: var(--green); }
.faq-tabs button[aria-selected="true"] { background: var(--black); color: var(--white); }
.faq-tabs button[aria-selected="true"] .tab-ico { background: var(--green); color: var(--black); }
.faq-cat { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; margin: 0 0 14px; }
.faq-panel { display: grid; gap: 10px; }
.faq-panel + .faq-panel { margin-top: 28px; }
.faq.js-tabs .faq-panel + .faq-panel { margin-top: 0; }
.faq.js-tabs .faq-cat { display: none; }
.faq.js-tabs .faq-panel[hidden] { display: none; }
.faq.js-tabs .faq-panel { animation: qa-in .3s ease; }
@media (max-width: 980px) {
  .faq-grid { grid-template-columns: minmax(0, 1fr); }
  .faq-tabs { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; margin: 24px calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter) 6px; scrollbar-width: none; }
  .faq-tabs button { font-size: 1rem; padding: 11px 16px; }
  .faq-tabs button:hover { transform: none; }
  .tab-ico { width: 26px; height: 26px; transform: rotate(90deg); }
  .faq-tabs button:hover .tab-ico { transform: rotate(90deg); }
}

/* ---------- Appel à l'action final ---------- */
.nw { white-space: nowrap; }
.final { background: var(--green); padding: clamp(72px, 10vw, 140px) 0 clamp(56px, 7vw, 96px); overflow-x: clip; }
.final-top { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.final-ico { width: 44px; height: 44px; flex-shrink: 0; }
.final-kicker { margin: 0; font-weight: 700; font-size: 1.1rem; }
.final-h { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.2rem, 4.6vw, 3.8rem); line-height: 1.02; letter-spacing: -.03em; margin: 0; max-width: 18ch; }
.final-phone {
  display: inline-block; margin: clamp(28px, 4vw, 48px) 0 0; text-decoration: none; color: var(--black);
  font-family: var(--font-display); font-weight: 700; font-size: clamp(3.1rem, 12.5vw, 11.5rem); line-height: .9; letter-spacing: -.045em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.final-tap { display: none; margin: 10px 0 0; font-weight: 700; font-size: .95rem; }
@media (hover: none) { .final-tap { display: block; } }
.final-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px 32px; margin-top: clamp(32px, 4vw, 52px); padding-top: 24px; border-top: 2px solid var(--black); }
.final-mail { margin: 0; font-size: 1.15rem; }
.final-mail a { font-weight: 700; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.final-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 24px; }
.final-checks li { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.final-checks li::before { content: "✓"; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--black); color: var(--green); font-size: .78rem; }
@media (max-width: 560px) {
  .final-phone { font-size: 13.4vw; letter-spacing: -.035em; }
  .final-checks { flex-direction: column; }
}

/* =========================================================
   PASSE INTERACTIONS
   ========================================================= */

/* En-tête intelligent : se compacte, se cache en descendant, revient en remontant */
.site-header { transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .2s; }
.site-header.is-hidden { transform: translateY(-100%); }
.bar { transition: height .3s; }
.site-header.is-scrolled .bar { height: 64px; }
.brand .logo { transition: height .3s; }
.site-header.is-scrolled .brand .logo { height: 30px; }
.progress { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--black); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); pointer-events: none; }

/* Menu : section en cours */
.nav a { position: relative; }
.nav a.is-active { background-size: 100% 2px; }
@media (max-width: 980px) {
  .nav.is-open a.is-active { background: none; padding-left: 22px; }
  .nav.is-open a.is-active::before { content: ""; position: absolute; left: 0; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--black); }
  .nav.is-open { animation: nav-in .25s ease; }
}
@keyframes nav-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* Boutons : reflet au survol + effet magnétique (piloté en JS) */
.btn-call { position: relative; overflow: hidden; isolation: isolate; transition: transform .15s, translate .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; }
.btn-call::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .7s cubic-bezier(.2,.8,.2,1);
}
.btn-call:hover::after { transform: translateX(120%); }
.btn-call:hover { box-shadow: 0 14px 30px -14px rgba(0,0,0,.55); }
.phone-pill { transition: background .2s, translate .25s cubic-bezier(.2,.8,.2,1); }

/* Halo lumineux qui suit la souris sur les cartes sombres */
.case, .price-card, .pillar--main, .expert-stats li, .card {
  background-image: radial-gradient(420px circle at var(--mx, -500px) var(--my, -500px), rgba(43, 255, 134, .11), transparent 45%);
}

/* Carte du hero : inclinaison 3D au survol (souris uniquement) */
.proof { perspective: 1200px; }
.proof .card { transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s; transform-style: preserve-3d; will-change: transform; }
.proof .card.is-tilting { transition: transform .12s linear, box-shadow .3s; box-shadow: 0 50px 80px -40px rgba(0,0,0,.6); }

/* Survols complémentaires */
.logo-grid li { transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s; }
.logo-grid li:hover { transform: translateY(-5px) scale(1.04); box-shadow: 0 16px 30px -16px rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,0,0,.08); }
.pillar { transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s; }
.pillar:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -26px rgba(0,0,0,.5); }
.compare-col { transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.compare-col--new:hover { transform: translateY(-4px); }
.chain li { transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.chain li:hover { transform: translateY(-3px); }
.qa { transition: border-color .2s, transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; }
.qa:not([open]):hover { transform: translateY(-2px); box-shadow: 0 12px 26px -20px rgba(0,0,0,.45); }

/* Numéro géant : chiffres qui montent un à un */
.digits { display: inline-flex; background: linear-gradient(var(--black), var(--black)) 0 100% / 0 .05em no-repeat; padding-bottom: .06em; transition: background-size .45s cubic-bezier(.2,.8,.2,1); }
.final-phone:hover .digits, .final-phone:focus-visible .digits { background-size: 100% .05em; }
.dg { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0 .06em .04em; margin: 0 -.06em; }
.dg > span { display: inline-block; }
.dg-sp { display: inline-block; width: .28em; }

/* Bouton d'appel flottant (mobile et tablette) */
.fab-call {
  position: fixed; z-index: 60; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: none; align-items: center; gap: 10px; padding: 14px 20px 14px 16px; border-radius: 999px;
  background: var(--black); color: var(--green); text-decoration: none;
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  box-shadow: 0 16px 34px -12px rgba(0,0,0,.55), 0 0 0 3px var(--green);
  transform: translateY(150%); transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.fab-call svg { width: 20px; height: 20px; }
.fab-call.is-visible { transform: none; }
@media (max-width: 980px) { .fab-call { display: inline-flex; } }

/* Apparitions au défilement */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .js:not(.reveal-all) :is(
    .logos-head, .logo-grid li, .logos-legal,
    .method-aside > *, .pillar, .diy-title, .diy-grid > div, .diy-cta,
    .results-top, .results-cta, .results-foot,
    .report-text > *, .report-stage,
    .expert-text > *, .expert-sub, .insight,
    .pricing > .wrap > .h2, .pricing > .wrap > .intro, .price-card, .included-band h3, .included li, .compare-title, .compare-col, .compare-vs, .chain li, .pricing-cta,
    .faq-aside > *, .faq-main,
    .final-top, .final-h, .final-bottom
  ):not(.is-revealed) { opacity: 0; translate: 0 26px; }
  .js :is(
    .logos-head, .logo-grid li, .logos-legal,
    .method-aside > *, .pillar, .diy-title, .diy-grid > div, .diy-cta,
    .results-top, .results-cta, .results-foot,
    .report-text > *, .report-stage,
    .expert-text > *, .expert-sub, .insight,
    .pricing > .wrap > .h2, .pricing > .wrap > .intro, .price-card, .included-band h3, .included li, .compare-title, .compare-col, .compare-vs, .chain li, .pricing-cta,
    .faq-aside > *, .faq-main,
    .final-top, .final-h, .final-bottom
  ) { transition: opacity .8s cubic-bezier(.2,.8,.2,1) calc(var(--d, 0) * 70ms), translate .8s cubic-bezier(.2,.8,.2,1) calc(var(--d, 0) * 70ms), transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .2s, background .2s; }

  /* Entrée du hero au chargement */
  .js .hero .kicker, .js .hero .lead, .js .hero .actions, .js .hero .facts { animation: rise .9s cubic-bezier(.2,.8,.2,1) both; }
  .js .hero h1 { animation: h1-in 1.1s cubic-bezier(.2,.8,.2,1) both .05s; }
  .js .hero .lead { animation-delay: .25s; }
  .js .hero .actions { animation-delay: .35s; }
  .js .hero .facts { animation-delay: .45s; }
  .js .hero .proof { animation: rise 1s cubic-bezier(.2,.8,.2,1) both .2s; }
  @keyframes rise { from { opacity: 0; translate: 0 30px; } to { opacity: 1; translate: 0 0; } }
  @keyframes h1-in { from { opacity: 0; clip-path: inset(0 0 100% 0); translate: 0 40px; } to { opacity: 1; clip-path: inset(0 0 -20% 0); translate: 0 0; } }

  /* Chiffres du numéro final */
  .js .final-phone:not(.is-revealed) .dg > span { translate: 0 105%; }
  .js .final-phone .dg > span { transition: translate .8s cubic-bezier(.2,.8,.2,1) calc(var(--i) * 45ms); }
}

/* Ajustements par format */
@media (min-width: 981px) and (max-width: 1180px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hero-case .v-after { font-size: 2.8rem; }
  .hero-case .v-before { font-size: 1.25rem; }
  .hero-case .case-values { flex-wrap: nowrap; }
  .hero-case .cbar { grid-template-columns: 1fr; gap: 4px; }
  .facts b { font-size: 1.25rem; }
}
@media (max-width: 400px) {
  .hero-case .case-body { grid-template-columns: 1fr; }
  .hero-case .case-block + .case-block { border-left: 0; padding-left: 0; border-top: 1px solid #262626; padding-top: 16px; }
  .hero-case .cbar { grid-template-columns: 82px 1fr; gap: 10px; }
  .tiers { gap: 6px; height: 140px; }
  .tier-bar b { font-size: 1.05rem; }
  .tier span { font-size: .72rem; }
  .calc { padding: 18px 14px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-contact .footer-phone { white-space: nowrap; }
  .final-checks li { font-size: .95rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Pages secondaires (mentions légales, confidentialité, 404) ---------- */
.legal { background: var(--white); padding: clamp(48px, 7vw, 96px) 0; }
.legal .wrap { max-width: 860px; }
.legal h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); max-width: none; margin-bottom: 12px; }
.legal .updated { color: #6b6b6b; margin: 0 0 40px; }
.legal h2 { font-family: var(--font-display); font-weight: 700; font-size: 1.45rem; margin: 40px 0 10px; }
.legal p, .legal li { color: #2b2b2b; }
.legal a { text-underline-offset: 3px; }
.todo { background: #fff3cd; color: #7a5a00; border-radius: 4px; padding: 0 4px; font-weight: 700; }
.notfound { background: var(--green); min-height: 70vh; display: grid; place-items: center; text-align: center; padding: 80px 0; }
.notfound h1 { margin: 0 auto 16px; max-width: 14ch; }
.notfound p { font-size: 1.2rem; margin: 0 0 32px; }