/* =========================================================
   Triceratops — v4 · Light SaaS · Stripe-inspired
   ========================================================= */

@property --svc-r { syntax: '<number>'; inherits: true; initial-value: 212; }
@property --svc-g { syntax: '<number>'; inherits: true; initial-value: 96;  }
@property --svc-b { syntax: '<number>'; inherits: true; initial-value: 58;  }

:root {
  /* Logo (fichier officiel) : les 3 cornes, posées à 90 % d'opacité dans le SVG */
  --logo-coral: #d85a30;
  --logo-green: #4a7c5f;
  --logo-blue:  #2c4a7c;

  --coral:  #D4603C;
  --green:  #4A8A68;
  --blue:   #3D6A9A;

  --bg:     #FAFAF8;
  --white:  #FFFFFF;
  --text:   #111117;
  --text-2: #6B7280;
  --text-3: #9CA3AF;
  --border: rgba(0,0,0,.08);
  --border-hi: rgba(0,0,0,.13);
  --shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.06);
  --shadow-lg: 0 2px 4px rgba(0,0,0,.06), 0 20px 48px rgba(0,0,0,.1);

  --svc-r: 212; --svc-g: 96; --svc-b: 58;
  --service: rgba(var(--svc-r),var(--svc-g),var(--svc-b),1);

  --ease:     cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(0,.55,.45,1);
  --dur:      .7s;

  transition:
    --svc-r var(--dur) var(--ease),
    --svc-g var(--dur) var(--ease),
    --svc-b var(--dur) var(--ease);
}

/* ── Reset ── */
*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }
html,body { margin:0; padding:0; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
ul,ol { list-style: none; padding:0; margin:0; }
button { font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
:focus-visible { outline: 2px solid var(--service); outline-offset:3px; border-radius:6px; }
.container { width:100%; max-width:1240px; margin:0 auto; padding:0 40px; }

/* =========================================================
   REVEAL
   ========================================================= */
.js-ready [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .65s var(--ease-out), transform .65s var(--ease-out);
}
.js-ready [data-reveal].is-visible { opacity:1; transform:none; }
.js-ready [data-delay="0"] { transition-delay:0s; }
.js-ready [data-delay="1"] { transition-delay:.10s; }
.js-ready [data-delay="2"] { transition-delay:.20s; }
.js-ready [data-delay="3"] { transition-delay:.30s; }
.js-ready [data-delay="4"] { transition-delay:.40s; }
.js-ready [data-delay="5"] { transition-delay:.50s; }

/* =========================================================
   HEADER
   ========================================================= */
.header {
  position: fixed; top:0; left:0; right:0; z-index:100;
  display: flex; align-items: center; gap:28px;
  padding: 0 40px; height: 64px;
  background: rgba(250,250,248,.82);
  backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--border);
}
.brand { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.brand-mark { width:36px; height:20px; }
.brand-word { display:flex; flex-direction:column; line-height:1; }
.brand-word__top { font-size:8px; font-weight:600; letter-spacing:.14em; color:var(--text-3); }
.brand-word__bot { font-size:11px; font-weight:700; letter-spacing:.08em; color:var(--text); }

.nav { display:flex; align-items:center; gap:2px; margin-left:auto; }
.nav-link {
  display:flex; align-items:center; gap:7px;
  padding:7px 14px; border-radius:100px;
  font-size:13.5px; font-weight:500; color:var(--text-2);
  transition: color .2s, background .2s;
}
.nav-link:hover,
.nav-link[aria-pressed="true"] { color:var(--text); background:rgba(0,0,0,.05); }

.nav-dot { width:6px; height:6px; border-radius:50%; background:var(--text-3); transition:background .3s; }
.nav-link[data-service="coral"] .nav-dot { background:var(--coral); }
.nav-link[data-service="green"]  .nav-dot { background:var(--green); }
.nav-link[data-service="blue"]   .nav-dot { background:var(--blue); }

/* Buttons */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 20px; border-radius:8px;
  font-size:14px; font-weight:600;
  transition: opacity .15s, transform .15s, box-shadow .2s;
  white-space:nowrap;
}
.btn:hover { opacity:.88; transform:translateY(-1px); }
.btn:active { transform:none; }

.btn--header {
  padding:8px 16px; font-size:13px;
  background:var(--white);
  border:1px solid var(--border-hi);
  color:var(--text);
  box-shadow: var(--shadow);
}
.btn--primary {
  background: rgba(var(--svc-r),var(--svc-g),var(--svc-b),1);
  color:#fff;
  box-shadow: 0 0 0 3px rgba(var(--svc-r),var(--svc-g),var(--svc-b),.15),
              0 4px 12px rgba(var(--svc-r),var(--svc-g),var(--svc-b),.25);
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              opacity .15s, transform .15s;
}
.btn--ghost {
  background:transparent;
  border:1.5px solid var(--border-hi);
  color:var(--text-2);
}
.btn--ghost:hover { background:rgba(0,0,0,.04); color:var(--text); }
.btn--cta {
  padding:14px 32px; font-size:15px; border-radius:10px;
  background: rgba(var(--svc-r),var(--svc-g),var(--svc-b),1);
  color:#fff;
  box-shadow: 0 4px 20px rgba(var(--svc-r),var(--svc-g),var(--svc-b),.35);
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              opacity .15s, transform .15s;
}

.burger { display:none; flex-direction:column; gap:5px; width:28px; padding:4px; margin-left:auto; }
.burger span { display:block; height:1.5px; background:var(--text-2); border-radius:2px; }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  min-height: 100vh;
  display: flex; flex-direction:column; justify-content:center;
  padding: 120px 40px 80px;
  position: relative; overflow:hidden;
}

.hero-bg {
  position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
}
.hero-blob {
  position:absolute; border-radius:50%;
  filter:blur(80px);
}
.hero-blob--1 {
  width:700px; height:700px;
  top:-200px; right:-100px;
  background: radial-gradient(circle,
    rgba(var(--svc-r),var(--svc-g),var(--svc-b),.12) 0%, transparent 70%);
  transition: background var(--dur) var(--ease);
}
.hero-blob--2 {
  width:500px; height:500px;
  bottom:-150px; left:-100px;
  background: radial-gradient(circle, rgba(61,106,154,.08) 0%, transparent 70%);
}

.hero-layout {
  position:relative; z-index:1;
  max-width:1240px; margin:0 auto; width:100%;
  display:grid; grid-template-columns:1fr 1fr;
  gap:80px; align-items:center;
}

/* Hero copy */
.hero-eyebrow {
  display:flex; align-items:center; gap:10px;
  font-size:12px; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--text-3); margin:0 0 28px;
  animation: fadeUp .6s var(--ease-out) .05s both;
}
.eyebrow-dot {
  width:6px; height:6px; border-radius:50%;
  background: rgba(var(--svc-r),var(--svc-g),var(--svc-b),1);
  transition: background var(--dur) var(--ease);
  flex-shrink:0;
}

.hero-h1 {
  margin:0 0 24px;
  font-family:'Plus Jakarta Sans', sans-serif;
  font-weight:900; line-height:1.05; letter-spacing:-.02em;
}
.h1-line { display:block; color:var(--text); }
.h1-line--a {
  font-size: clamp(34px,3.8vw,58px);
  animation: fadeUp .7s var(--ease-out) .15s both;
}
.h1-line--b {
  font-size: clamp(42px,5.2vw,78px);
  animation: fadeUp .7s var(--ease-out) .25s both;
}
.hero-h1 em {
  font-style:normal;
  color: rgba(var(--svc-r),var(--svc-g),var(--svc-b),1);
  transition: color var(--dur) var(--ease);
}

.hero-sub {
  font-size:clamp(15px,1.5vw,18px); color:var(--text-2); line-height:1.7;
  margin:0 0 36px;
  animation: fadeUp .7s var(--ease-out) .35s both;
}
.hero-actions {
  display:flex; gap:12px; flex-wrap:wrap;
  animation: fadeUp .7s var(--ease-out) .45s both;
}

@keyframes fadeUp {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:none; }
}

/* ── Visuel du hero (scènes illustrées : voir HERO SCENES) ── */
.hero-visual { animation: fadeUp .8s var(--ease-out) .3s both; }

.scroll-hint {
  position:absolute; bottom:32px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px; opacity:.3;
}
.scroll-hint__line { width:1px; height:48px; background:linear-gradient(to bottom, transparent, var(--text)); }
.scroll-hint__label { font-size:9px; letter-spacing:.2em; color:var(--text); }

/* =========================================================
   TRUST
   ========================================================= */
.trust {
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background:var(--white);
  padding:32px 0;
}
.trust-row {
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
}
.trust-stat { text-align:center; padding:12px 48px; }
.trust-n {
  display:block;
  font-size:clamp(26px,3vw,38px); font-weight:700;
  font-family:'Plus Jakarta Sans', sans-serif;
  color:var(--text); letter-spacing:-.01em; margin-bottom:2px;
}
.trust-stat dd { font-size:13px; color:var(--text-2); margin:0; }
.trust-div { width:1px; height:40px; background:var(--border); }

/* ── Variante métal (homepage) ────────────────────────────────
   Même plaque graphite que .partners et .funnel-card--primary :
   dégradé, stries brossées, biseau inset, reflet qui traverse.
   Chiffres en chrome (même dégradé que le « Pas vous. » du hero),
   libellés gravés, séparateurs en rainure. */
.trust--metal {
  position:relative; overflow:hidden;
  border-top:0; border-bottom:0;
  padding:40px 0;
  color:#fff;
  background: linear-gradient(100deg, #2c2f3e 0%, #1b1d28 55%, #272a38 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.35),
    0 24px 48px -28px rgba(0,0,0,.4);
}
.trust--metal::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(70% 140% at 50% -40%, rgba(255,255,255,.09) 0%, transparent 60%),
    linear-gradient(90deg, rgba(0,0,0,.28) 0%, transparent 18%, transparent 82%, rgba(0,0,0,.28) 100%),
    repeating-linear-gradient(90deg,
      transparent 0px, transparent 3px,
      rgba(255,255,255,.022) 3px, rgba(255,255,255,.022) 4px);
}
.trust--metal::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(110deg,
    transparent 38%, rgba(255,255,255,.045) 48%, rgba(255,255,255,.07) 50%,
    rgba(255,255,255,.045) 52%, transparent 62%);
  transform:translateX(-100%);
  animation: partnersSheen 14s cubic-bezier(.4,0,.2,1) 7s infinite;
}
.trust--metal .container { position:relative; z-index:1; }

/* chiffres en acier brossé (inline-block : chaque chiffre reçoit la même tranche du dégradé)
   3 couches clipées dans le texte, de haut en bas :
   1. reflet diagonal (animé pendant le comptage)
   2. grain brossé vertical — même direction que les stries de la plaque
   3. volume : clair en haut, plus sombre vers le milieu, clair en bas
   + biseau (arête claire au-dessus, ombre dessous) et léger relief via drop-shadow,
     qui suit la forme des glyphes contrairement à text-shadow. */
.trust--metal .trust-n { display:inline-block; margin-bottom:4px; }
.trust--metal .trust-n,
.metal-num {
  background:
    linear-gradient(110deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.7) 50%, rgba(255,255,255,0) 60%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 1px, rgba(0,0,0,.05) 1px 2px),
    linear-gradient(180deg, #f3f5fa 0%, #d0d4e0 30%, #9aa0b4 50%, #b3b8c9 62%, #dde0e9 85%, #eff1f6 100%);
  background-size:300% 100%, auto, auto;
  background-position:40% 0, 0 0, 0 0; /* repos : le reflet au centre du chiffre */
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  filter:
    drop-shadow(0 1px 0 rgba(0,0,0,.7))
    drop-shadow(0 -1px 0 rgba(255,255,255,.28))
    drop-shadow(0 4px 10px rgba(0,0,0,.35));
}
/* le reflet entre par la gauche et se pose pendant que le chiffre défile (classe posée par le JS) */
@keyframes trustMetalSweep {
  from { background-position:100% 0, 0 0, 0 0; }
  to   { background-position:40% 0, 0 0, 0 0; }
}
.trust--metal .trust-n.is-counting {
  animation: trustMetalSweep 1.2s cubic-bezier(.4,0,.2,1) both;
}

/* libellés gravés */
.trust--metal .trust-stat dd {
  color:rgba(255,255,255,.55);
  text-shadow:0 1px 0 rgba(0,0,0,.4);
}

/* séparateurs : rainure (ombre + arête claire) qui s'estompe aux extrémités */
.trust--metal .trust-div {
  position:relative; width:1px; height:48px;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.5) 25%, rgba(0,0,0,.5) 75%, transparent);
}
.trust--metal .trust-div::after {
  content:''; position:absolute; top:0; bottom:0; left:1px; width:1px;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.12) 25%, rgba(255,255,255,.12) 75%, transparent);
}

@media (max-width:768px) {
  .trust--metal { padding:28px 0; }
}
@media (prefers-reduced-motion:reduce) {
  .trust--metal::after { animation:none; }
  .trust--metal .trust-n.is-counting { animation:none; }
}

/* =========================================================
   SECTIONS
   ========================================================= */
.section { padding:100px 0; }
.section--alt { background:var(--white); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }

.sec-head { margin-bottom:56px; max-width:580px; }
.sec-head--center { text-align:center; margin-left:auto; margin-right:auto; }

.sec-title {
  font-family:'Plus Jakarta Sans', sans-serif;
  font-size:clamp(30px,3.8vw,50px); font-weight:900;
  line-height:1.1; letter-spacing:-.02em;
  color:var(--text); margin:0 0 48px;
}
.sec-title--center { text-align:center; }
.sec-head .sec-title { margin-bottom:16px; }

.sec-sub { font-size:16px; color:var(--text-2); line-height:1.7; margin:0; }

/* =========================================================
   SERVICE CARDS
   ========================================================= */
.cards-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }

.svc-card {
  position:relative; overflow:hidden;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:16px; padding:0;
  display:flex; flex-direction:column;
  box-shadow: var(--shadow);
  transition: box-shadow .25s, border-color .2s, transform .12s;
}
.svc-card:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--border-hi);
}

/* Illustration area */
.svc-illus {
  padding:32px 28px 20px;
  display:flex; align-items:center; justify-content:center;
  border-bottom:1px solid var(--border);
}
.svc-illus svg { width:100%; max-width:140px; height:auto; }
.svc-illus--blue  { color:var(--blue);  background:rgba(61,106,154,.05); }
.svc-illus--coral { color:var(--coral); background:rgba(212,96,60,.05); }
.svc-illus--green { color:var(--green); background:rgba(74,138,104,.05); }

.svc-body { padding:20px 24px 0; display:flex; flex-direction:column; gap:8px; flex:1; }

.svc-chip {
  display:inline-block;
  font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  padding:4px 10px; border-radius:100px; align-self:flex-start;
}
.svc-chip--blue  { background:rgba(61,106,154,.1);  color:var(--blue); }
.svc-chip--coral { background:rgba(212,96,60,.1);   color:var(--coral); }
.svc-chip--green { background:rgba(74,138,104,.1);  color:var(--green); }

.svc-card h3 {
  font-family:'Plus Jakarta Sans', sans-serif;
  font-size:19px; font-weight:900; line-height:1.2;
  color:var(--text); margin:0;
}
.svc-card p {
  font-size:14px; color:var(--text-2); line-height:1.6; margin:0;
}

.svc-card__foot {
  margin-top:auto; padding:16px 24px;
  border-top:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  background:var(--bg);
}
.svc-price { font-size:13px; color:var(--text-2); margin:0; }
.svc-price strong { color:var(--text); }
.svc-more {
  font-size:13px; font-weight:600;
  transition: opacity .15s;
}
.svc-more--blue  { color:var(--blue); }
.svc-more--coral { color:var(--coral); }
.svc-more--green { color:var(--green); }
.svc-more:hover { opacity:.7; }

/* =========================================================
   PROCESS
   ========================================================= */
.process-row { display:flex; align-items:center; gap:0; }
.process-step {
  flex:1; padding:34px 24px 36px;
  background:var(--white); border:1px solid var(--border); border-radius:16px;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px;
  align-self:stretch;
  box-shadow:var(--shadow);
}
.step-n {
  font-size:clamp(36px,4vw,52px); font-weight:900; line-height:1;
  font-family:'Plus Jakarta Sans', sans-serif;
  color: rgba(var(--svc-r),var(--svc-g),var(--svc-b),.18);
  transition: color var(--dur) var(--ease);
  letter-spacing:-.02em;
}
.process-step h3 {
  font-size:18px; font-weight:600;
  color:var(--text); margin:0;
}
.process-step p {
  font-size:14px; line-height:1.6; color:var(--text-2);
  margin:-2px 0 0; max-width:300px;
}
.process-arrow {
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; width:48px; color:var(--text-3); opacity:.4;
}
.process-arrow svg { width:28px; }

/* =========================================================
   PRICING
   ========================================================= */
.tarif-group { margin-bottom:56px; }
.tarif-label {
  display:inline-flex; align-items:center; gap:7px;
  font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  padding:5px 12px; border-radius:100px; margin-bottom:20px;
}
.tarif-label--blue  { background:rgba(61,106,154,.08);  color:var(--blue); }
.tarif-label--coral { background:rgba(212,96,60,.08);   color:var(--coral); }
.tarif-label--green { background:rgba(74,138,104,.08);  color:var(--green); }

.tarif-note {
  font-size:13px; color:var(--text-2);
  margin:-8px 0 16px;
  padding:10px 14px;
  border-left:2px solid var(--green);
  background:rgba(74,138,104,.05); border-radius:0 8px 8px 0;
}

.tarif-row { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.tarif-row--2 { grid-template-columns:repeat(2,1fr); max-width:780px; margin:0 auto; }
.tarif-more { margin-top:64px; }
.tarif-more__h {
  font-family:'Plus Jakarta Sans', sans-serif;
  font-size:clamp(22px,2.6vw,30px); font-weight:800; letter-spacing:-.02em;
  text-align:center; color:var(--text); margin:0 0 28px;
}

.tarif-card {
  background:var(--white); border:1px solid var(--border); border-radius:14px;
  padding:24px; display:flex; flex-direction:column; gap:14px;
  box-shadow:var(--shadow);
  transition: box-shadow .2s, border-color .2s, transform .12s;
  border-top-width: 3px;
}
.tarif-card:hover { box-shadow:var(--shadow-lg); }
.tarif-card--blue  { border-top-color:var(--blue); }
.tarif-card--coral { border-top-color:var(--coral); }
.tarif-card--green { border-top-color:var(--green); }

.tarif-card h3 { font-size:16px; font-weight:600; color:var(--text); margin:0; }
.tarif-price {
  display:flex; align-items:baseline; flex-wrap:wrap; gap:6px; line-height:1;
}
.tarif-price em {
  font-style:normal; font-size:26px; font-weight:800;
  font-family:'Plus Jakarta Sans', sans-serif; color:var(--text);
}
.tarif-price span { font-size:13px; color:var(--text-3); }
.tarif-price sub { font-size:12px; color:var(--text-3); vertical-align:baseline; line-height:1.4; }
.tarif-badge {
  display:inline-block; align-self:flex-start;
  font-size:11.5px; font-weight:600; line-height:1.4;
  color:var(--green); background:rgba(74,138,104,.09);
  border-radius:100px; padding:4px 11px; margin:-4px 0 0;
}
.tarif-card ul { flex:1; display:flex; flex-direction:column; gap:8px; }
.tarif-card li {
  font-size:13.5px; color:var(--text-2);
  padding-left:18px; position:relative;
}
.tarif-card li::before {
  content:''; position:absolute; left:0; top:8px;
  width:7px; height:7px; border-radius:50%;
  background:var(--border-hi);
}
.tarif-card--blue  li::before { background:rgba(61,106,154,.3); }
.tarif-card--coral li::before { background:rgba(212,96,60,.3); }
.tarif-card--green li::before { background:rgba(74,138,104,.3); }

.tarif-btn {
  display:block; text-align:center; padding:10px; border-radius:8px;
  font-size:13.5px; font-weight:600; transition:opacity .15s; margin-top:auto;
  border:1.5px solid;
}
.tarif-btn:hover { opacity:.75; }
.tarif-btn--blue  { color:var(--blue);  border-color:rgba(61,106,154,.25);  background:rgba(61,106,154,.06); }
.tarif-btn--coral { color:var(--coral); border-color:rgba(212,96,60,.25);   background:rgba(212,96,60,.06); }
.tarif-btn--green { color:var(--green); border-color:rgba(74,138,104,.25);  background:rgba(74,138,104,.06); }

/* =========================================================
   TESTIMONIALS
   ========================================================= */
.temo-card {
  background:var(--white); border:1px solid var(--border); border-radius:16px;
  padding:28px; display:flex; flex-direction:column; gap:16px;
  box-shadow:var(--shadow);
  transition: box-shadow .2s, transform .12s;
}
.temo-card:hover { box-shadow:var(--shadow-lg); }
.temo-stars { font-size:13px; color:#F59E0B; letter-spacing:1px; }
.temo-card > p { font-size:14.5px; color:var(--text-2); line-height:1.7; margin:0; flex:1; font-style:italic; }
.temo-card footer {
  display:flex; align-items:center; gap:12px;
  padding-top:16px; border-top:1px solid var(--border);
}
.temo-av {
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; flex-shrink:0;
}
.temo-av--blue  { background:rgba(61,106,154,.1);  color:var(--blue); }
.temo-av--coral { background:rgba(212,96,60,.1);   color:var(--coral); }
.temo-av--green { background:rgba(74,138,104,.1);  color:var(--green); }
.temo-card footer strong { display:block; font-size:13.5px; color:var(--text); }
.temo-card footer span   { display:block; font-size:12px; color:var(--text-3); }

/* =========================================================
   FAQ
   ========================================================= */
.faq-layout { display:grid; grid-template-columns:280px 1fr; gap:80px; align-items:start; }
.faq-title { margin-bottom:0; }
.faq-list { display:flex; flex-direction:column; }
.faq-item { border-bottom:1px solid var(--border); }
.faq-item:first-child { border-top:1px solid var(--border); }
.faq-btn {
  display:flex; align-items:center; justify-content:space-between;
  width:100%; padding:18px 0; text-align:left;
  font-size:15px; font-weight:500; color:var(--text); gap:16px;
  transition: color .15s;
}
.faq-btn:hover { color: rgba(var(--svc-r),var(--svc-g),var(--svc-b),1); }
.faq-icon {
  width:20px; height:20px; flex-shrink:0; border-radius:50%;
  border:1.5px solid var(--border-hi); position:relative;
  transition: border-color .2s, transform .25s;
}
.faq-icon::before,.faq-icon::after {
  content:''; position:absolute;
  background:var(--text-3); border-radius:2px;
  top:50%; left:50%; transform:translate(-50%,-50%);
}
.faq-icon::before { width:9px; height:1.5px; }
.faq-icon::after  { width:1.5px; height:9px; transition:transform .25s; }
.faq-item.is-open .faq-icon {
  border-color: rgba(var(--svc-r),var(--svc-g),var(--svc-b),.5);
  transform:rotate(45deg);
}
.faq-body { max-height:0; overflow:hidden; opacity:0; transition:max-height .36s var(--ease), opacity .28s; }
.faq-item.is-open .faq-body { opacity:1; }
.faq-body p { padding:0 0 18px; font-size:14.5px; color:var(--text-2); line-height:1.7; margin:0; }

/* =========================================================
   CTA BAND
   ========================================================= */
.cta-band {
  padding:120px 0; text-align:center; position:relative; overflow:hidden;
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%,
      rgba(var(--svc-r),var(--svc-g),var(--svc-b),.07) 0%, transparent 65%),
    var(--white);
  border-top:1px solid var(--border);
  transition: background var(--dur) var(--ease);
}
.cta-eyebrow { color:var(--text-3); margin-bottom:16px; }
.cta-title {
  font-family:'Plus Jakarta Sans', sans-serif;
  font-size:clamp(40px,5vw,72px); font-weight:900; letter-spacing:-.02em;
  color:var(--text); margin:0 0 16px; line-height:1.08;
}
.cta-title em {
  font-style:normal;
  color: rgba(var(--svc-r),var(--svc-g),var(--svc-b),1);
  transition: color var(--dur) var(--ease);
}
.cta-sub { font-size:16px; color:var(--text-2); margin:0 0 40px; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer {
  background:#111117; color:rgba(255,255,255,.6);
  padding:60px 0 32px;
}
.footer .brand-word__top { color:rgba(255,255,255,.35); }
.footer .brand-word__bot { color:rgba(255,255,255,.8); }
.footer-top { display:flex; justify-content:space-between; gap:48px; margin-bottom:48px; }
.footer-id { display:flex; flex-direction:column; gap:12px; }
.footer-tagline { font-size:13px; margin:0; }
.footer-mail { font-size:13px; transition:color .15s; }
.footer-mail:hover { color:rgba(255,255,255,.9); }
.footer-nav { display:flex; gap:48px; }
.footer-col { display:flex; flex-direction:column; gap:10px; }
.footer-col__h {
  font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.25); margin:0 0 4px;
}
.footer-col a { font-size:13.5px; transition:color .15s; }
.footer-col a:hover { color:rgba(255,255,255,.9); }
.footer-bottom {
  display:flex; justify-content:space-between; padding-top:24px;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:12px; color:rgba(255,255,255,.22);
}

/* =========================================================
   TILT CARDS
   ========================================================= */
.tilt-card { will-change:transform; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1024px) {
  .hero-layout { grid-template-columns:1fr; gap:60px; }
  .hero { min-height:auto; padding-top:100px; }
  .cards-3 { grid-template-columns:1fr; }
  .tarif-row { grid-template-columns:1fr; }
  .faq-layout { grid-template-columns:1fr; gap:40px; }
  .process-row { flex-direction:column; gap:16px; }
  .process-arrow { transform:rotate(90deg); align-self:center; }
  .footer-top { flex-direction:column; }
}
@media (max-width:768px) {
  .container { padding:0 20px; }
  .header { padding:0 20px; gap:16px; }
  .nav { display:none; }
  .burger { display:flex; }
  .trust-stat { padding:12px 24px; }
  .footer-nav { flex-direction:column; gap:28px; }
  .footer-bottom { flex-direction:column; gap:6px; }
}
/* ── Page intro : l'extinction (homepage only) ──────────────── */
.page-curtain {
  position:fixed; inset:0; z-index:9999;
  background:radial-gradient(ellipse at 50% 38%, #10121c 0%, #07080d 100%);
  overflow:hidden;
  animation:
    curtainFade .75s ease-in-out 2.6s forwards,
    pcShake .38s linear 1.55s;
  pointer-events:none;
}
@keyframes curtainFade { to { opacity:0; } }
/* la secousse d'impact : caméra qui encaisse, amplitude décroissante */
@keyframes pcShake {
  0%,100% { transform:translate(0,0); }
  15% { transform:translate(-7px,4px); }
  30% { transform:translate(6px,-3px); }
  45% { transform:translate(-4px,-4px); }
  60% { transform:translate(4px,3px); }
  75% { transform:translate(-2px,2px); }
  88% { transform:translate(2px,-1px); }
}

/* retour de lumière fluide quand l'intro se termine */
.hero--funnel .hero-h1 { transition:color .5s ease, text-shadow .5s ease; }
.hero--funnel .hero-h1 .hw { transition:opacity .5s ease; }
.hero--funnel .hero-h1 em { transition:opacity .5s ease; }
.hero-mark { transition:filter .5s ease; }
.hw--1 { --x:1.7s; }
.hw--2 { --x:1.58s; }
.hw--3 { --x:1.85s; }

/* pendant l'intro : les vrais éléments de la page émergent du noir, éteints.
   Le hero-funnel-wrap passe au-dessus du rideau ; tout le reste est masqué
   et rejouera son fadeUp au retour de la lumière. */
@media (prefers-reduced-motion:no-preference) {
  .intro-live .hero-funnel-wrap {
    z-index:10000;
    animation: pcShake .38s linear 1.55s;
  }
  .intro-live .hero--funnel .hero-sub,
  .intro-live .funnel-q,
  .intro-live .funnel-cards,
  .intro-live .funnel-note { animation:none; opacity:0; }
  /* avant l'impact : tout est allumé, comme des enseignes dans la nuit */
  .intro-live .hero--funnel .hero-h1 {
    color:#d4d7e2;
    text-shadow:0 0 26px rgba(205,212,238,.3);
    animation:
      fadeUp .6s var(--ease-out) .1s both,
      pcHum .7s ease-in-out .45s 2;
  }
  /* masquage instantané : sans transition:none, le fondu de .5s
     s'applique aussi à l'aller et « Pas vous. » reste visible au départ */
  .intro-live .hero--funnel .hero-h1 em { opacity:0; transition:none; }
  .intro-live .hero-mark {
    animation:
      fadeUp .6s var(--ease-out) .05s both,
      pcMarkGlow .55s ease 3.5s forwards,
      pcMarkSurge .5s ease 3.95s forwards;
  }
  .intro-live .hero-mark polygon { fill:#b9bdcc; }
  .intro-live .hero-mark polygon:nth-of-type(1) {
    animation: pcHornDie .35s ease 2.05s forwards, pcHornC .35s ease 3.25s forwards;
  }
  .intro-live .hero-mark polygon:nth-of-type(2) {
    animation: pcHornDie .35s ease 2.05s forwards, pcHornG .35s ease 3.4s forwards;
  }
  .intro-live .hero-mark polygon:nth-of-type(3) {
    animation: pcHornDie .35s ease 2.05s forwards, pcHornB .35s ease 3.55s forwards;
  }
  .intro-live .hw { animation:pcWordOut .45s linear var(--x,1.4s) forwards; }
}
/* frémissement de néon pendant la vie d'avant */
@keyframes pcHum {
  0%,100% { opacity:1; }
  30% { opacity:.93; }
  55% { opacity:.98; }
  78% { opacity:.91; }
}
/* l'impact éteint aussi le logo */
@keyframes pcHornDie {
  to { fill:#333749; }
}
/* la lumière ne s'estompe pas, elle grésille avant de mourir */
@keyframes pcWordOut {
  0%   { opacity:1; }
  18%  { opacity:.2; }
  32%  { opacity:.7; }
  50%  { opacity:.1; }
  66%  { opacity:.35; }
  100% { opacity:0; }
}
/* le rallumage : 1, 2, 3 — chaque corne prend sa couleur */
@keyframes pcHornC { from { fill:#333749; } to { fill:var(--logo-coral); } }
@keyframes pcHornG { from { fill:#333749; } to { fill:var(--logo-green); } }
@keyframes pcHornB { from { fill:#333749; } to { fill:var(--logo-blue); } }
@keyframes pcMarkGlow {
  to { filter:drop-shadow(0 0 18px rgba(255,255,255,.35)); }
}
/* la surtension : la lumière du survivant enfle juste avant d'inonder l'écran */
@keyframes pcMarkSurge {
  to {
    filter:
      drop-shadow(0 0 30px rgba(255,255,255,.55))
      drop-shadow(0 0 64px rgba(255,255,255,.3));
  }
}

/* le ciel étoilé — s'éteint après l'impact (le nuage de poussière) */
.pc-stars {
  position:absolute; top:0; left:0;
  width:2px; height:2px; border-radius:50%;
  background:transparent;
  box-shadow:
    7vw  12vh 0 0   rgba(255,255,255,.4),
    16vw  6vh 0 1px rgba(255,255,255,.22),
    24vw 22vh 0 0   rgba(255,255,255,.32),
    33vw  9vh 0 0   rgba(255,255,255,.45),
    41vw 15vh 0 1px rgba(255,255,255,.18),
    52vw  5vh 0 0   rgba(255,255,255,.38),
    58vw 19vh 0 0   rgba(255,255,255,.28),
    66vw  8vh 0 1px rgba(255,255,255,.32),
    74vw 14vh 0 0   rgba(255,255,255,.42),
    81vw 24vh 0 0   rgba(255,255,255,.22),
    88vw 10vh 0 0   rgba(255,255,255,.38),
    93vw 30vh 0 1px rgba(255,255,255,.18),
    12vw 32vh 0 0   rgba(255,255,255,.2),
    47vw 28vh 0 0   rgba(255,255,255,.26);
  opacity:0;
  animation:
    pcStarsIn  .7s ease .05s forwards,
    pcStarsOut .45s ease 1.85s forwards;
}
@keyframes pcStarsIn  { to { opacity:.9; } }
@keyframes pcStarsOut { to { opacity:0; } }

/* l'étoile filante d'annonce : discrète, haute, elle prépare l'œil */
.pc-comet {
  position:absolute; top:13%; left:28%;
  width:90px; height:1.5px; border-radius:2px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.55));
  opacity:0;
  transform:rotate(9deg);
  animation: pcComet .5s ease-out .4s forwards;
}
@keyframes pcComet {
  0%   { opacity:0; transform:translate(0,0) rotate(9deg); }
  25%  { opacity:.7; }
  100% { opacity:0; transform:translate(26vw, 4vw) rotate(9deg); }
}

/* la météorite : tête lumineuse, traînée, trajectoire vers la phrase */
.pc-meteor {
  position:absolute; top:-6%; left:-14%;
  width:260px; height:3px; border-radius:3px;
  background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.35) 60%, #fff 100%);
  box-shadow:0 0 14px 2px rgba(255,255,255,.35);
  opacity:0;
  transform:rotate(23deg);
  animation: pcMeteor .34s cubic-bezier(.4,0,.8,.4) 1.2s forwards;
}
@keyframes pcMeteor {
  0%   { opacity:0; transform:translate(0,0) rotate(23deg); }
  12%  { opacity:1; }
  85%  { opacity:1; }
  100% { opacity:0; transform:translate(72vw, 30vw) rotate(23deg); }
}

/* le flash : radial depuis le point d'impact, juste derrière la phrase */
.pc-flash {
  position:absolute; inset:0;
  background:radial-gradient(circle at 58% 52%,
    #fff 0%,
    rgba(240,245,255,.85) 16%,
    rgba(224,233,255,.35) 40%,
    transparent 68%
  );
  opacity:0;
  animation: pcFlash .5s ease-out 1.5s forwards;
}
@keyframes pcFlash {
  0%   { opacity:0; }
  8%   { opacity:1; }
  30%  { opacity:.5; }
  44%  { opacity:.75; }
  100% { opacity:0; }
}

/* la lueur résiduelle : froide et cendrée, elle s'attarde au point d'impact */
.pc-ember {
  position:absolute; inset:0;
  background:radial-gradient(circle at 58% 52%,
    rgba(172,186,224,.18) 0%,
    rgba(150,168,214,.08) 13%,
    transparent 30%
  );
  opacity:0;
  animation: pcEmber 1.1s ease 1.6s forwards;
}
@keyframes pcEmber {
  0%   { opacity:0; }
  20%  { opacity:1; }
  55%  { opacity:.65; }
  70%  { opacity:.85; }
  100% { opacity:0; }
}

/* les poussières : retombées fines pendant le silence */
.pc-dust {
  position:absolute;
  width:3px; height:3px; border-radius:50%;
  background:rgba(220,224,238,.9);
  opacity:0;
  animation: pcDust 1.1s linear var(--dd,1.9s) forwards;
}
.pc-dust--1 { left:22%; top:30%; --dd:1.85s; --do:.3;  }
.pc-dust--2 { left:38%; top:22%; --dd:2.05s; --do:.2;  width:2px; height:2px; }
.pc-dust--3 { left:55%; top:34%; --dd:1.95s; --do:.34; }
.pc-dust--4 { left:66%; top:26%; --dd:2.15s; --do:.24; width:2px; height:2px; }
.pc-dust--5 { left:78%; top:38%; --dd:2s;    --do:.3;  }
.pc-dust--6 { left:45%; top:42%; --dd:2.3s;  --do:.18; width:2px; height:2px; }
@keyframes pcDust {
  0%   { opacity:0; transform:translateY(-10px); }
  20%  { opacity:var(--do,.3); }
  80%  { opacity:var(--do,.3); }
  100% { opacity:0; transform:translateY(34px); }
}

/* l'aube : la lumière du survivant grandit depuis le logo et inonde l'écran */
.pc-dawn {
  position:absolute; left:50%; top:30%;
  width:200vmax; height:200vmax;
  margin:-100vmax 0 0 -100vmax;
  border-radius:50%;
  background:radial-gradient(circle,
    #FAFAF8 0%, #FAFAF8 68%, rgba(250,250,248,0) 88%);
  opacity:0;
  transform:none;
  animation: pcDawn .55s ease-in-out 2.6s forwards;
}
/* le retour de la lumière : un simple fondu du noir au blanc, sans cercle */
@keyframes pcDawn {
  0%   { opacity:0; }
  100% { opacity:1; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none !important; transition-duration:.001s !important; }
  .js-ready [data-reveal] { opacity:1; transform:none; }
  .page-curtain { display:none; }
}

/* =========================================================
   EYEBROW (global)
   ========================================================= */
.sec-eyebrow {
  font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--text-3); text-align:center; margin:0 0 16px;
}

/* =========================================================
   3 PILIERS — 3 cartes avec animations CSS en boucle
   ========================================================= */
.piliers-section { padding-top:0; }
.piliers-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:20px; margin-top:48px;
}
.pilier {
  border-radius:20px; overflow:hidden;
  background:var(--white); border:1px solid var(--border);
  display:flex; flex-direction:column; box-shadow:var(--shadow);
  transition:box-shadow .2s, transform .15s;
}
.pilier:hover { box-shadow:var(--shadow-lg); transform:translateY(-3px); }

/* Zone visuelle */
.pilier__vis {
  height:192px; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.pilier--blue  .pilier__vis { background:rgba(61,106,154,.05); }
.pilier--green .pilier__vis { background:rgba(74,138,104,.05); }
.pilier--coral .pilier__vis { background:rgba(212,96,60,.05); }

/* Zone texte */
.pilier__copy { padding:24px; display:flex; flex-direction:column; gap:10px; flex:1; }
.pilier__num {
  font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-3);
}
.pilier__h {
  font-family:'Plus Jakarta Sans', sans-serif;
  font-size:17px; font-weight:800; line-height:1.35; color:var(--text); margin:0;
}
.pilier__sub { font-size:13.5px; color:var(--text-2); line-height:1.7; margin:0; flex:1; }
.pilier__cta {
  display:inline-flex; align-self:flex-start;
  font-size:12.5px; font-weight:600; text-decoration:none;
  padding:8px 14px; border-radius:8px; margin-top:6px; transition:opacity .15s;
}
.pilier__cta:hover { opacity:.7; }
.pilier__cta--blue  { color:var(--blue);  background:rgba(61,106,154,.1); }
.pilier__cta--green { color:var(--green); background:rgba(74,138,104,.1); }
.pilier__cta--coral { color:var(--coral); background:rgba(212,96,60,.1); }

/* ── Visuel 01 : navigateur avec notification ─── */
.pvis-browser {
  width:176px; background:var(--white);
  border:1.5px solid var(--border); border-radius:10px;
  box-shadow:0 8px 32px rgba(0,0,0,.12); overflow:hidden; position:relative;
}
.pvis-head {
  height:22px; background:#f0f0ee; border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:4px; padding:0 8px;
}
.pvis-dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--border-hi);
}
.pvis-urlbar {
  font-size:7.5px; color:var(--text-3); margin-left:4px;
  background:rgba(0,0,0,.06); padding:2px 7px; border-radius:3px;
}
.pvis-page { padding:12px 12px 14px; }
.pvis-line {
  background:var(--border); border-radius:3px; margin-bottom:6px;
}
.pvis-line--title { height:8px; width:78%; }
.pvis-line--sub   { height:6px; width:52%; }
.pvis-cta-btn {
  margin-top:10px; background:var(--blue); color:#fff;
  font-size:7px; font-weight:700; padding:4px 9px; border-radius:4px;
  display:inline-block;
  animation:pvsBtnPulse 2.2s ease-in-out infinite;
}
@keyframes pvsBtnPulse {
  0%,100% { box-shadow:0 0 0 0 rgba(61,106,154,.5); }
  55%     { box-shadow:0 0 0 9px rgba(61,106,154,0); }
}
.pvis-notif {
  position:absolute; bottom:-40px; left:50%; transform:translateX(-50%);
  background:var(--white); border:1px solid var(--border); border-radius:8px;
  padding:6px 10px; display:flex; align-items:center; gap:6px;
  font-size:8px; color:var(--text); white-space:nowrap;
  box-shadow:0 6px 20px rgba(0,0,0,.13);
  animation:pvisNotifLoop 3.8s ease-in-out infinite;
}
.pvis-notif-dot {
  width:7px; height:7px; border-radius:50%; background:var(--blue); flex-shrink:0;
  animation:pvsDotBlink 1.1s ease-in-out infinite;
}
@keyframes pvsDotBlink { 0%,100%{opacity:1} 50%{opacity:.25} }
@keyframes pvisNotifLoop {
  0%,8%   { opacity:0; transform:translateX(-50%) translateY(10px); }
  22%,72% { opacity:1; transform:translateX(-50%) translateY(0); }
  88%,100%{ opacity:0; transform:translateX(-50%) translateY(-8px); }
}

/* ── Visuel 02 : graphique ROI ─── */
.pvis-chart { display:flex; flex-direction:column; gap:8px; width:160px; }
.pvis-chart-top { display:flex; justify-content:space-between; align-items:baseline; }
.pvis-chart-label { font-size:8px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); }
.pvis-roi {
  font-family:'Plus Jakarta Sans', sans-serif;
  font-size:24px; font-weight:900; letter-spacing:-.03em; color:var(--green);
  animation:pvisRoiIn 3.6s ease-in-out infinite;
}
@keyframes pvisRoiIn {
  0%,5%   { opacity:0; transform:translateY(8px); }
  20%,80% { opacity:1; transform:none; }
  95%,100%{ opacity:0; }
}
.pvis-bars {
  display:flex; align-items:flex-end; gap:7px; height:68px;
}
.pvis-bar {
  flex:1; border-radius:4px 4px 0 0; height:var(--h);
  background:rgba(74,138,104,.2); transform-origin:bottom;
  animation:pvisBarGrow 3.6s ease-in-out infinite;
}
.pvis-bar--peak { background:var(--green); }
.pvis-bar:nth-child(1){ animation-delay:.0s }
.pvis-bar:nth-child(2){ animation-delay:.1s }
.pvis-bar:nth-child(3){ animation-delay:.2s }
.pvis-bar:nth-child(4){ animation-delay:.3s }
.pvis-bar:nth-child(5){ animation-delay:.4s }
.pvis-bar:nth-child(6){ animation-delay:.5s }
@keyframes pvisBarGrow {
  0%,5%    { transform:scaleY(0); }
  35%,80%  { transform:scaleY(1); }
  95%,100% { transform:scaleY(0); }
}

/* ── Visuel 03 : réputation / avis ─── */
.pvis-rep { display:flex; flex-direction:column; align-items:center; gap:7px; width:186px; }
.pvis-stars { display:flex; gap:2px; }
.pvis-star {
  font-size:19px; color:var(--coral);
  animation:pvisStarPop 3.5s ease-in-out infinite;
}
.pvis-star:nth-child(1){ animation-delay:.0s }
.pvis-star:nth-child(2){ animation-delay:.1s }
.pvis-star:nth-child(3){ animation-delay:.2s }
.pvis-star:nth-child(4){ animation-delay:.3s }
.pvis-star:nth-child(5){ animation-delay:.4s }
@keyframes pvisStarPop {
  0%,5%   { opacity:0; transform:scale(0) rotate(-20deg); }
  22%,80% { opacity:1; transform:scale(1) rotate(0); }
  95%,100%{ opacity:1; transform:scale(1); }
}
.pvis-score {
  font-size:11px; font-weight:700; color:var(--text); letter-spacing:.02em;
}
.pvis-reviews { display:flex; flex-direction:column; gap:5px; width:100%; }
.pvis-review {
  display:flex; align-items:center; gap:7px;
  background:var(--white); border:1px solid var(--border);
  border-radius:8px; padding:6px 9px;
  font-size:8.5px; color:var(--text-2);
  box-shadow:0 2px 8px rgba(0,0,0,.07);
}
.pvis-av {
  width:20px; height:20px; border-radius:50%; background:var(--coral); color:#fff;
  font-size:6px; font-weight:700; display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.pvis-review--a { animation:pvisReviewSlide 3.5s ease-in-out infinite 0s; }
.pvis-review--b { animation:pvisReviewSlide 3.5s ease-in-out infinite .55s; }
@keyframes pvisReviewSlide {
  0%,8%   { opacity:0; transform:translateX(-12px); }
  25%,75% { opacity:1; transform:none; }
  92%,100%{ opacity:0; transform:translateX(8px); }
}

@media (max-width:900px) {
  .piliers-grid { grid-template-columns:1fr; }
  .pilier__vis { height:160px; }
}

/* =========================================================
   NAV DOTS (static color classes for page nav)
   ========================================================= */
.nav-dot--blue  { background:var(--blue); }
.nav-dot--coral { background:var(--coral); }
.nav-dot--green { background:var(--green); }
.nav-link[aria-current="page"] { color:var(--text); background:rgba(0,0,0,.05); }

/* =========================================================
   HERO FUNNEL (homepage)
   ========================================================= */
.hero--funnel {
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:120px 40px 80px;
  text-align:center; position:relative; overflow:hidden;
}
.hero-funnel-wrap {
  position:relative; z-index:1;
  max-width:680px; width:100%;
  display:flex; flex-direction:column; align-items:center; gap:0;
}
.hero-mark {
  width:54px; height:30px; margin-bottom:32px;
  animation: fadeUp .6s var(--ease-out) .05s both;
}
.hero--funnel .hero-h1 {
  font-family:'Plus Jakarta Sans', sans-serif;
  font-size:clamp(38px,5.5vw,74px); font-weight:900;
  line-height:1.08; letter-spacing:-.025em;
  color:var(--text); margin:0 0 20px;
  animation: fadeUp .7s var(--ease-out) .15s both;
}
.hero--funnel .hero-h1 em {
  font-style:normal;
  background: linear-gradient(110deg,
    #b0b4c2 0%, #7b7f92 12%, #c4c7d4 22%, #8c8fa0 31%,
    #eef0f6 42%, #ffffff 46%, #eef0f6 50%,
    #b0b4c2 62%, #7b7f92 76%, #c4c7d4 89%, #8c8fa0 100%
  );
  background-size:320% 100%;
  background-position:100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* la réponse : le reflet traverse « Pas vous. » quand la page apparaît.
   Uniquement quand l'intro vient de jouer (classe posée par le JS). */
@keyframes heroMetalSweep {
  to { background-position:0% 0; }
}
.intro-played .hero--funnel .hero-h1 em {
  animation: heroMetalSweep .9s cubic-bezier(.4,0,.2,1) 3.4s forwards;
}
.hero--funnel .hero-sub {
  animation: fadeUp .7s var(--ease-out) .25s both;
  margin-bottom:36px;
}
.funnel-q {
  font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--text-3); margin:0 0 14px;
  animation: fadeUp .6s var(--ease-out) .35s both;
}
.funnel-cards {
  display:grid; grid-template-columns:1fr 1fr; gap:14px; width:100%;
  animation: fadeUp .7s var(--ease-out) .42s both;
}
.funnel-card {
  display:flex; align-items:center; gap:14px;
  padding:18px 20px; border-radius:14px; text-decoration:none;
  text-align:left; transition: transform .15s, box-shadow .2s;
}
.funnel-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.funnel-card { background:var(--white); border:1.5px solid var(--border-hi); box-shadow:var(--shadow); }
.funnel-card--primary {
  background: linear-gradient(160deg, #2c2f3e 0%, #1b1d28 55%, #272a38 100%);
  border: 1px solid rgba(255,255,255,.13);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.25),
    0 8px 40px rgba(0,0,0,.28);
  color:#fff;
  position:relative;
  overflow:hidden;
  transition: transform .15s, box-shadow .2s;
}
.funnel-card--primary::before {
  content:'';
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: repeating-linear-gradient(
    90deg,
    transparent 0px, transparent 3px,
    rgba(255,255,255,.022) 3px, rgba(255,255,255,.022) 4px
  );
}
.funnel-card--primary:hover {
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 16px 48px rgba(0,0,0,.38);
}
.funnel-card__icon { width:36px; height:36px; flex-shrink:0; }
.funnel-card__icon svg { width:100%; height:100%; }
.funnel-card__body { flex:1; }
.funnel-card__body strong { display:block; font-size:14px; font-weight:600; line-height:1.3; }
.funnel-card__body span { display:block; font-size:12.5px; margin-top:3px; opacity:.65; }
.funnel-card--primary .funnel-card__body span { opacity:.75; }
.funnel-card--primary::after {
  content:'';
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: linear-gradient(
    110deg,
    transparent 30%,
    rgba(255,255,255,.07) 50%,
    transparent 70%
  );
  transform: translateX(-120%);
  transition: transform .7s cubic-bezier(.25,.46,.45,.94);
}
.funnel-card--primary:hover::after { transform: translateX(120%); }
.funnel-card__arrow { font-size:16px; flex-shrink:0; opacity:.5; }
.funnel-note {
  font-size:13.5px; color:var(--text-3); line-height:1.7;
  margin:24px 0 0;
  animation: fadeUp .7s var(--ease-out) .52s both;
}

/* =========================================================
   PARTENAIRES — plaque métal défilante (homepage, sous le hero)
   Même matériau que la carte primaire du hero (.funnel-card--primary) :
   dégradé graphite, stries brossées, biseau inset, reflet qui traverse.
   ========================================================= */
.partners {
  --partners-logo-w: 160px;
  --partners-logo-h: 64px;
  --partners-gap: 64px;
  --partners-speed: 70s;
  position:relative; z-index:1;
  padding:34px 0 40px;
  overflow:hidden;
  color:#fff;
  background: linear-gradient(100deg, #2c2f3e 0%, #1b1d28 55%, #272a38 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.35),
    0 24px 48px -28px rgba(0,0,0,.4);
}
/* brossage + lumière : stries verticales fines, halo en haut, ombre dans les angles */
.partners::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(70% 140% at 50% -40%, rgba(255,255,255,.09) 0%, transparent 60%),
    linear-gradient(90deg, rgba(0,0,0,.28) 0%, transparent 18%, transparent 82%, rgba(0,0,0,.28) 100%),
    repeating-linear-gradient(90deg,
      transparent 0px, transparent 3px,
      rgba(255,255,255,.022) 3px, rgba(255,255,255,.022) 4px);
}
/* reflet diagonal qui traverse lentement la plaque */
.partners::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(110deg,
    transparent 38%, rgba(255,255,255,.045) 48%, rgba(255,255,255,.07) 50%,
    rgba(255,255,255,.045) 52%, transparent 62%);
  transform:translateX(-100%);
  animation: partnersSheen 14s cubic-bezier(.4,0,.2,1) 2s infinite;
}
@keyframes partnersSheen {
  0%   { transform:translateX(-100%); }
  45%,100% { transform:translateX(100%); }
}

/* Libellé gravé, style eyebrow, encadré de deux filets qui s'estompent */
.partners-label {
  position:relative; z-index:1;
  display:flex; align-items:center; gap:18px;
  margin:0 0 26px;
  font-family:'Inter', system-ui, sans-serif;
  font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.45);
  text-shadow:0 1px 0 rgba(0,0,0,.4);
}
.partners-label span { flex-shrink:0; }
.partners-label::before,
.partners-label::after {
  content:''; flex:1; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.14));
  box-shadow:0 1px 0 rgba(0,0,0,.35);
}
.partners-label::after { background:linear-gradient(90deg, rgba(255,255,255,.14), transparent); }

/* Fenêtre du défilement : fondu sur les bords */
.partners-viewport {
  position:relative; z-index:1;
  overflow:hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
}
.partners-rail {
  display:flex; width:max-content;
  will-change:transform;
}
.partners-track {
  display:flex; align-items:center; flex:none;
  gap:var(--partners-gap);
  padding-right:var(--partners-gap); /* = un gap de plus → 2 pistes se raccordent sans couture */
  margin:0;
}
.partners-logo {
  flex:none;
  width:var(--partners-logo-w); height:var(--partners-logo-h);
  display:flex; align-items:center; justify-content:center;
}
.partners-logo img {
  display:block; width:100%; height:100%; object-fit:contain;
  opacity:.88; user-select:none; -webkit-user-drag:none;
  transition:opacity .25s;
}
.partners-logo:hover img { opacity:1; }

/* boucle : activée par le JS une fois la piste clonée */
.partners.is-looping .partners-rail {
  animation: partnersScroll var(--partners-speed) linear infinite;
}
.partners.is-looping:hover .partners-rail { animation-play-state:paused; }
@keyframes partnersScroll {
  from { transform:translate3d(0,0,0); }
  to   { transform:translate3d(-50%,0,0); }
}

/* la section suivante (piliers) n'a plus le hero juste au-dessus : on lui redonne de l'air */
.partners + .piliers-section { padding-top:96px; }

@media (max-width:768px) {
  .partners {
    --partners-logo-w:120px; --partners-logo-h:48px; --partners-gap:40px;
    padding:26px 0 30px;
  }
  .partners-label { margin-bottom:20px; gap:14px; }
  .partners + .piliers-section { padding-top:72px; }
}
@media (prefers-reduced-motion:reduce) {
  /* pas de défilement : la rangée devient scrollable au doigt */
  .partners-viewport { overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
  .partners-track { padding:0 40px; }
}

/* =========================================================
   HERO PAGE (service pages)
   ========================================================= */
.hero--page { min-height:auto; padding:100px 40px 80px; }
.hero--centered {
  display:flex; align-items:center; justify-content:center;
  text-align:center; min-height:60vh;
}
.hero--centered .hero-funnel-wrap { gap:16px; }
.hero--centered .hero-h1 { margin-bottom:0; }

/* =========================================================
   ALTERNATIVE SERVICES CARDS (homepage)
   ========================================================= */
.cards-2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.alt-card {
  display:flex; flex-direction:column; gap:16px;
  background:var(--white); border:1px solid var(--border); border-radius:16px;
  padding:28px; text-decoration:none; color:var(--text);
  box-shadow:var(--shadow);
  transition: box-shadow .2s, border-color .2s, transform .12s;
}
.alt-card:hover { box-shadow:var(--shadow-lg); border-color:var(--border-hi); }
.alt-card__icon {
  width:52px; height:52px;
  border-radius:14px; padding:12px;
  display:flex; align-items:center; justify-content:center;
}
.alt-card__icon svg { width:100%; height:100%; }
.alt-card__icon--coral { color:var(--coral); background:rgba(212,96,60,.08); }
.alt-card__icon--green  { color:var(--green);  background:rgba(74,138,104,.08); }
.alt-card__body { flex:1; display:flex; flex-direction:column; gap:8px; }
.alt-card h3 {
  font-family:'Plus Jakarta Sans', sans-serif;
  font-size:20px; font-weight:900; line-height:1.2; color:var(--text); margin:0;
}
.alt-card p { font-size:14px; color:var(--text-2); margin:0; line-height:1.6; }
.alt-card__cta {
  font-size:13px; font-weight:600; color:var(--text-3);
  transition:color .15s;
}
.alt-card:hover .alt-card__cta { color:var(--text); }

/* =========================================================
   OFFRES — la base + deux accélérateurs (homepage)
   Deux modules (Notoriété, Publicité) viennent se brancher sur une
   plaque métal « Site web · la base ». Plaque : même matériau que
   .partners / .trust--metal (graphite, stries, biseau, reflet).
   ========================================================= */
.stack-section .sec-title { margin-bottom:16px; }
.stack-sub {
  font-size:16px; color:var(--text-2); line-height:1.7;
  text-align:center; max-width:560px; margin:0 auto 52px;
}
.stack { position:relative; }

/* ── Modules ── */
.stack__modules {
  position:relative; z-index:2;
  display:grid; grid-template-columns:1fr 1fr; gap:24px;
  padding:0 44px;   /* un peu plus étroits que la plaque : posés dessus */
}
.stack-mod {
  --mod: var(--coral); --mod-rgb: 212,96,60;
  position:relative;
  display:flex; flex-direction:column; gap:14px;
  padding:30px 30px 32px;
  background:
    linear-gradient(180deg, rgba(var(--mod-rgb),.07) 0%, rgba(var(--mod-rgb),0) 150px),
    var(--white);
  border:1px solid var(--border); border-radius:20px;
  box-shadow:var(--shadow);
  transition: box-shadow .25s, transform .2s, border-color .2s;
}
.stack-mod--green { --mod: var(--green); --mod-rgb: 74,138,104; }
.stack-mod:hover {
  box-shadow:var(--shadow-lg);
  transform:translateY(-3px);
  border-color:rgba(var(--mod-rgb),.3);
}
.stack-mod__head { display:flex; align-items:center; gap:12px; }
.stack-mod__mark {
  width:16px; height:22px; flex-shrink:0;
  fill:var(--mod);
  filter:drop-shadow(0 4px 8px rgba(var(--mod-rgb),.35));
}
.stack-mod__mark--blue { --mod:var(--blue); --mod-rgb:61,106,154; }
.stack-mod__h {
  font-family:'Plus Jakarta Sans', sans-serif;
  font-size:clamp(20px,1.9vw,24px); font-weight:800;
  line-height:1.2; letter-spacing:-.01em; color:var(--text); margin:0;
}
.stack-mod__p { font-size:14.5px; color:var(--text-2); line-height:1.65; margin:0; }
.stack-mod__list { display:flex; flex-direction:column; gap:9px; margin:4px 0 6px; }
.stack-mod__list li {
  position:relative; padding-left:27px;
  font-size:14px; color:var(--text); line-height:1.5;
}
.stack-mod__list li::before {
  content:''; position:absolute; left:0; top:2px;
  width:17px; height:17px; border-radius:50%;
  background:rgba(var(--mod-rgb),.12);
}
.stack-mod__list li::after {   /* la coche */
  content:''; position:absolute; left:6.5px; top:5px;
  width:4px; height:8px;
  border:solid var(--mod); border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.stack-mod__foot {
  margin-top:auto; padding-top:18px;
  border-top:1px solid var(--border);
  display:flex; align-items:flex-end; justify-content:space-between; gap:14px 16px; flex-wrap:wrap;
}
.stack-price {
  display:flex; align-items:baseline; flex-wrap:wrap; gap:6px; line-height:1;
}
.stack-price__from { font-size:13px; color:var(--text-3); }
.stack-price em {
  font-style:normal; font-family:'Plus Jakarta Sans', sans-serif;
  font-size:28px; font-weight:800; letter-spacing:-.01em; color:var(--text);
}
.stack-price sub { font-size:12.5px; color:var(--text-3); vertical-align:baseline; line-height:1.4; }
.stack-mod__price { display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.stack-mod__price .tarif-badge { margin:0; }
.stack-mod__cta {
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  padding:10px 16px; border-radius:9px;
  font-size:13.5px; font-weight:600;
  color:var(--mod); background:rgba(var(--mod-rgb),.1);
  transition: background .2s, color .2s, box-shadow .2s, transform .15s;
}
.stack-mod__cta:hover {
  color:#fff; background:var(--mod);
  box-shadow:0 6px 18px rgba(var(--mod-rgb),.32);
  transform:translateY(-1px);
}
/* la prise : le module se branche sur la base */
.stack-mod__plug {
  position:absolute; left:50%; bottom:-15px; transform:translateX(-50%);
  width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--white); border:1.5px solid rgba(var(--mod-rgb),.45);
  color:var(--mod); font-size:18px; font-weight:700; line-height:1;
  box-shadow:0 4px 12px rgba(0,0,0,.14);
}

/* ── La base : plinthe en alu brossé clair, les modules sont posés dessus ── */
.stack__base {
  position:relative; z-index:1;
  margin-top:-14px;                 /* les modules mordent sur la plinthe */
  padding:32px 32px 18px;
  border-radius:16px;
  display:flex; align-items:center; flex-wrap:wrap; gap:18px 40px;
  color:var(--text);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #f7f8fb 0%, #e6e8ef 60%, #edeff4 100%);
  border:1px solid rgba(0,0,0,.08);
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -1px 0 rgba(0,0,0,.08),
    0 16px 32px -22px rgba(0,0,0,.3);
}
.stack__base-copy { flex:1 1 300px; min-width:0; }
.stack__base-label {
  display:flex; align-items:center; gap:9px; margin:0 0 4px;
  font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--text-3);
}
.stack__base-label .stack-mod__mark { width:12px; height:16px; }
.stack__base-p { font-size:14.5px; color:var(--text); line-height:1.5; margin:0; }
.stack__base-price { display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.stack__base-price .tarif-badge { margin:0; }
.stack__base-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px 18px; margin-left:auto; }
.stack__base-alt {
  font-size:13px; font-weight:600; color:var(--text-2); white-space:nowrap;
  border-bottom:1px solid var(--border-hi); padding-bottom:1px;
  transition:color .15s, border-color .15s;
}
.stack__base-alt:hover { color:var(--text); border-color:var(--text-3); }
.btn--blue { background:var(--blue); color:#fff; box-shadow:0 4px 14px rgba(61,106,154,.3); }
.stack-note { margin-top:22px; }

@media (max-width:1024px) {
  .stack__modules { padding:0 24px; gap:20px; }
  .stack__base-actions { margin-left:0; }
}
@media (max-width:900px) {
  .stack__modules { grid-template-columns:1fr; padding:0 16px; }
  .stack-mod:not(:last-child) .stack-mod__plug { display:none; }
  .stack__base { padding:32px 24px 20px; gap:16px 28px; }
}
@media (max-width:768px) {
  .stack__modules { padding:0; }
  .stack-mod { padding:24px 22px 26px; }
  .stack-mod__foot { flex-direction:column; align-items:stretch; }
  .stack-mod__cta { justify-content:center; }
  .stack-mod__plug { display:none; }
  .stack__base { margin-top:20px; border-radius:14px; padding:22px 20px; flex-direction:column; align-items:stretch; }
  .stack__base-copy { flex:0 0 auto; }
  .stack__base-actions { flex-direction:column-reverse; align-items:stretch; }
  .stack__base-actions .btn { justify-content:center; }
  .stack__base-alt { align-self:center; text-align:center; white-space:normal; }
}

/* =========================================================
   SPLIT SECTIONS (site-web page)
   ========================================================= */
.split-section {
  display:grid; grid-template-columns:1fr 1fr;
  gap:80px; align-items:center;
}
.split-section--reverse .split-copy { order:2; }
.split-section--reverse .split-visual { order:1; }
.split-copy { display:flex; flex-direction:column; gap:20px; }
.split-copy .svc-chip { align-self:flex-start; }
.split-copy .sec-title { margin-bottom:0; }
.split-copy .sec-sub { margin:0; }

/* Audit checklist */
.audit-checklist { display:flex; flex-direction:column; gap:12px; }
.check-item {
  display:flex; align-items:flex-start; gap:14px;
  padding:14px 16px; border-radius:12px;
  border:1px solid var(--border);
  background:var(--white);
}
.check-icon {
  width:28px; height:28px; border-radius:8px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700;
}
.check-item--ok  .check-icon { background:rgba(74,138,104,.1);  color:var(--green); }
.check-item--warn .check-icon { background:rgba(234,179,8,.1); color:#CA8A04; }
.check-item strong { display:block; font-size:13.5px; font-weight:600; color:var(--text); }
.check-item span   { display:block; font-size:12.5px; color:var(--text-2); margin-top:2px; }

/* Offer cards (site-web pricing) — le texte au-dessus, les 3 formules
   en pleine largeur : des colonnes assez larges pour être lues d'un coup d'œil */
.split-section--offers { grid-template-columns:1fr; gap:44px; align-items:start; }
.split-section--offers .split-copy { max-width:680px; margin:0 auto; text-align:center; align-items:center; }
.split-section--offers .split-copy .svc-chip { align-self:center; }
.offer-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.offer-card {
  background:var(--white); border:1px solid var(--border); border-radius:16px;
  padding:26px 26px 24px; display:flex; flex-direction:column; gap:14px;
  border-top-width:3px; box-shadow:var(--shadow);
  transition:box-shadow .2s;
}
.offer-card:hover { box-shadow:var(--shadow-lg); }
.offer-card--blue  { border-top-color:var(--blue); }
.offer-card h3 { font-size:17px; font-weight:600; color:var(--text); margin:0; }
.offer-card .tarif-price em { font-size:30px; }
.offer-card ul { flex:1; display:flex; flex-direction:column; gap:9px; margin-top:4px; }
.offer-card li { font-size:14px; color:var(--text-2); padding-left:18px; position:relative; line-height:1.5; }
.offer-card li::before { content:''; position:absolute; left:0; top:8px; width:7px; height:7px; border-radius:50%; background:rgba(61,106,154,.3); }
.offer-note {
  font-size:12.5px; color:var(--text-3);
  margin-top:16px; text-align:center;
}

/* =========================================================
   WHY STATS (community + ads pages)
   ========================================================= */
.why-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.why-item {
  text-align:center; padding:32px 20px;
  background:var(--white); border:1px solid var(--border); border-radius:16px;
}
.why-n {
  display:block; font-family:'Plus Jakarta Sans', sans-serif; font-weight:800;
  font-size:clamp(36px,4vw,52px); font-weight:900; letter-spacing:-.02em;
  color: rgba(var(--svc-r),var(--svc-g),var(--svc-b),1);
  transition: color var(--dur) var(--ease);
  margin-bottom:12px; line-height:1;
}
.why-item p { font-size:14px; color:var(--text-2); margin:0; line-height:1.6; }

/* =========================================================
   RESPONSIVE ADDITIONS
   ========================================================= */
@media (max-width:768px) {
  .funnel-cards { grid-template-columns:1fr; }
  .cards-2 { grid-template-columns:1fr; }
  .split-section { grid-template-columns:1fr; gap:40px; }
  .split-section--reverse .split-copy { order:1; }
  .split-section--reverse .split-visual { order:2; }
  .offer-cards { grid-template-columns:1fr; }
  .why-grid { grid-template-columns:1fr; }
}

/* =========================================================
   NOTORIÉTÉ · Avis Google & Abonnés (sections + pages dédiées)
   ========================================================= */
/* mock : fiche Google */
.gmock {
  background:var(--white); border:1px solid var(--border); border-radius:16px;
  padding:22px 24px; box-shadow:var(--shadow-lg); max-width:420px; margin:0 auto;
}
.gmock__head { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.gmock__logo { width:38px; height:38px; border-radius:10px; flex-shrink:0;
  background:linear-gradient(135deg,#f3b09b,#d4603c); }
.gmock__name { font-weight:700; font-size:14px; color:var(--text); }
.gmock__cat  { font-size:12px; color:var(--text-3); }
.gmock__score { display:flex; align-items:center; gap:10px; }
.gmock__note { font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:28px; color:var(--text); line-height:1; }
.gmock__stars { color:#F5A623; letter-spacing:1px; font-size:15px; }
.gmock__count { font-size:12.5px; color:var(--text-2); margin:6px 0 14px; }
.gmock__count b { color:var(--green); font-weight:600; }
.gmock__rev { display:flex; gap:10px; padding:11px 0; border-top:1px solid var(--border); }
.gmock__av { width:28px; height:28px; border-radius:50%; flex-shrink:0; display:grid; place-items:center;
  font-size:11px; font-weight:700; color:#fff; }
.gmock__rev p { margin:0; font-size:12.5px; color:var(--text-2); line-height:1.5; }
.gmock__rev small { display:block; font-size:11px; color:var(--text-3); margin-top:2px; }
.gmock__new { display:inline-block; font-size:10px; font-weight:600; color:var(--green);
  background:rgba(74,138,104,.1); border-radius:100px; padding:2px 7px; margin-left:6px; vertical-align:middle; }

/* mock : profil Instagram */
.igmock {
  background:var(--white); border:1px solid var(--border); border-radius:16px;
  padding:22px 24px; box-shadow:var(--shadow-lg); max-width:420px; margin:0 auto;
}
.igmock__head { display:flex; align-items:center; gap:18px; margin-bottom:16px; }
.igmock__av { width:62px; height:62px; border-radius:50%; flex-shrink:0; padding:3px;
  background:conic-gradient(#f9ce34,#ee2a7b,#6228d7,#f9ce34); }
.igmock__av span { display:block; width:100%; height:100%; border-radius:50%; background:var(--white);
  border:2px solid var(--white); background-image:linear-gradient(135deg,#f3b09b,#d4603c); }
.igmock__stats { display:flex; gap:22px; }
.igmock__stat { text-align:center; }
.igmock__stat b { display:block; font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:17px; color:var(--text); }
.igmock__stat b.is-up { color:var(--coral); }
.igmock__stat span { font-size:11px; color:var(--text-3); }
.igmock__name { font-weight:700; font-size:14px; color:var(--text); }
.igmock__bio  { font-size:12.5px; color:var(--text-2); margin:2px 0 14px; line-height:1.5; }
.igmock__btn  { display:inline-block; font-size:12.5px; font-weight:600; color:#fff; background:#0095f6;
  border-radius:8px; padding:7px 22px; margin-bottom:16px; }
.igmock__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; }
.igmock__grid span { aspect-ratio:1; border-radius:4px; background:linear-gradient(135deg,#eceef3,#dfe2ea); }
.igmock__grid span:nth-child(2) { background:linear-gradient(135deg,#f3c9bb,#e79c82); }
.igmock__grid span:nth-child(4) { background:linear-gradient(135deg,#cfd9e8,#a9bcd6); }
.igmock__grid span:nth-child(6) { background:linear-gradient(135deg,#cfe3d6,#a6c9b3); }

/* tableau de prix (options / autres réseaux) */
.price-table-wrap { border:1px solid var(--border); border-radius:14px; overflow:hidden; overflow-x:auto;
  background:var(--white); box-shadow:var(--shadow); }
.price-table { width:100%; border-collapse:collapse; font-size:14px; min-width:520px; }
.price-table th, .price-table td { padding:14px 20px; text-align:left; border-bottom:1px solid var(--border); }
.price-table th { font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-3);
  font-weight:600; background:var(--bg); }
.price-table tr:last-child td { border-bottom:0; }
.price-table td strong { color:var(--text); font-weight:600; }
.price-table td em { font-style:normal; font-weight:700; color:var(--text); white-space:nowrap; }
.price-table td .muted { color:var(--text-3); font-size:12.5px; }

/* comparatif deux colonnes */
.cmp-card { background:var(--white); border:1px solid var(--border); border-radius:16px; padding:28px; }
.cmp-card--bad  { border-color:rgba(212,96,60,.35); }
.cmp-card--good { border-color:rgba(74,138,104,.45); box-shadow:var(--shadow); }
.cmp-card h3 { font-size:16px; font-weight:700; color:var(--text); margin:0 0 14px; }
.cmp-card ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px; }
.cmp-card li { font-size:14px; color:var(--text-2); padding-left:24px; position:relative; line-height:1.55; }
.cmp-card li::before { position:absolute; left:0; top:0; font-weight:700; }
.cmp-card--bad  li::before { content:'✕'; color:var(--coral); }
.cmp-card--good li::before { content:'✓'; color:var(--green); }

/* texte long (SEO), lisible */
.prose { max-width:740px; margin:0 auto; }
.prose h2 { font-family:'Plus Jakarta Sans',sans-serif; font-size:clamp(24px,3vw,34px); font-weight:800;
  letter-spacing:-.02em; line-height:1.15; color:var(--text); margin:0 0 20px; }
.prose h3 { font-size:17px; font-weight:700; color:var(--text); margin:30px 0 8px; }
.prose p  { font-size:15.5px; color:var(--text-2); line-height:1.75; margin:0 0 14px; }
.prose ul { margin:0 0 14px; padding-left:20px; }
.prose li { font-size:15px; color:var(--text-2); line-height:1.7; margin-bottom:6px; }
.prose a  { color:var(--coral); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.pack-note { font-size:12.5px; color:var(--text-3); text-align:center; margin:14px 0 0; }
.tarif-card--featured { border-color:rgba(212,96,60,.5); box-shadow:var(--shadow-lg); position:relative; }
.tarif-card--featured::after { content:'Le plus choisi'; position:absolute; top:-11px; right:16px;
  font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#fff;
  background:var(--coral); border-radius:100px; padding:3px 10px; }
.section-links { display:flex; gap:12px; flex-wrap:wrap; }

@media (max-width:768px) {
  .gmock, .igmock { max-width:100%; }
  .price-table th, .price-table td { padding:12px 14px; }
}
.cmp-card a, .faq-body a { color:var(--coral); font-weight:600; text-decoration:underline; text-underline-offset:3px; }

/* sélecteur de réseau (page abonnés) */
.net-tabs {
  display:flex; justify-content:center; gap:6px;
  background:var(--white); border:1px solid var(--border); border-radius:100px;
  padding:5px; width:max-content; margin:0 auto 32px; box-shadow:var(--shadow);
}
.net-tab {
  border:0; background:transparent; cursor:pointer;
  font:inherit; font-size:14px; font-weight:600; color:var(--text-2);
  padding:9px 22px; border-radius:100px;
  transition:background .18s, color .18s;
}
.net-tab:hover { color:var(--text); }
.net-tab.is-active { background:var(--text); color:#fff; }
.net-name { color:var(--text-3); font-weight:500; }
.tarif-price em { transition:opacity .15s; }
.tarif-price em.is-swapping { opacity:0; }

/* extras : quantité → prix */
.extras { max-width:720px; margin:0 auto; display:flex; flex-direction:column; gap:10px; }
.extra {
  display:grid; grid-template-columns:150px 1fr auto; align-items:center; gap:18px;
  background:var(--white); border:1px solid var(--border); border-radius:14px;
  padding:16px 22px; box-shadow:var(--shadow);
}
.extra__qty { font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:16px; color:var(--text); }
.extra__what { font-size:14px; color:var(--text-2); }
.extra__price { font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:20px; color:var(--text); white-space:nowrap; }
@media (max-width:768px) {
  .net-tab { padding:8px 14px; font-size:13px; }
  .extra { grid-template-columns:1fr auto; }
  .extra__what { grid-column:1 / -1; }
}

/* garanties communes sous les packs */
.pack-included {
  list-style:none; margin:28px auto 0; padding:14px 22px;
  display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:10px 26px;
  background:var(--white); border:1px solid var(--border); border-radius:14px; width:max-content; max-width:100%;
}
.pack-included li { font-size:13.5px; color:var(--text-2); display:flex; align-items:center; gap:8px; }
.pack-included li::before { content:'✓'; color:var(--green); font-weight:700; }
.pack-included__h { font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); }
.pack-included__h::before { content:none; }
@media (max-width:768px) {
  .pack-included { flex-direction:column; align-items:flex-start; gap:8px; }
}


/* =========================================================
   HERO SCENES — illustrations animées des pages services
   ---------------------------------------------------------
   Chaque scène est dessinée en 540×400 px puis mise à
   l'échelle (--hs-scale, calculé par le JS) pour tenir dans
   la colonne. Le JS pose .is-on et le retire toutes les
   --hs-loop secondes : les entrées (a-pop, a-rise…) rejouent,
   chaque .hs-stage fait un fondu de sortie juste avant.
   Sans JS ou en reduced-motion : illustration fixe (état final).
   ========================================================= */
.hs-wrap {
  position:relative; width:100%; max-width:540px; margin:0 auto;
  aspect-ratio:54/40; --hs-scale:1;
}
.hs-halo {
  position:absolute; inset:-12%; z-index:0; pointer-events:none; border-radius:50%;
  background:radial-gradient(ellipse at 50% 50%,
    rgba(var(--svc-r),var(--svc-g),var(--svc-b),.12) 0%, transparent 65%);
  transition:background var(--dur) var(--ease);
}
.hs {
  position:absolute; top:0; left:0; z-index:1;
  width:540px; height:400px;
  transform:scale(var(--hs-scale)); transform-origin:0 0;
  font-family:'Inter', system-ui, sans-serif; line-height:1.3; color:var(--text);
  --pj:'Plus Jakarta Sans', sans-serif;
  --ph:rgba(0,0,0,.09); --ph-2:rgba(0,0,0,.15);
  --g-blue:linear-gradient(135deg,#cfd9e8,#a9bcd6);
  --g-coral:linear-gradient(135deg,#f3c9bb,#e79c82);
  --g-green:linear-gradient(135deg,#cfe3d6,#a6c9b3);
  --g-neutral:linear-gradient(135deg,#eceef3,#dfe2ea);
  --spring:cubic-bezier(.34,1.45,.64,1);
}
.hs *, .hs *::before, .hs *::after { box-sizing:border-box; }
.hs svg { display:block; }
.hs p { margin:0; }
.js-ready .hs:not(.is-on) { visibility:hidden; }   /* pas de flash de l'état final avant le 1er lancement */
.hs-stage { position:absolute; inset:0; }
.hs-card, .hs-chip { position:absolute; background:var(--white); border:1px solid var(--border); }
.hs-card { border-radius:14px; box-shadow:var(--shadow-lg); }
.hs-chip {
  display:flex; align-items:center; gap:7px; padding:7px 12px; border-radius:100px;
  box-shadow:0 4px 16px rgba(0,0,0,.08); font-size:11.5px; font-weight:600; white-space:nowrap;
}
.hs-ico { width:22px; height:22px; border-radius:7px; display:grid; place-items:center; flex-shrink:0; }
.hs-ico svg { width:12px; height:12px; }
.hs-av { border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:700; flex-shrink:0; }
.hs-num { font-family:var(--pj); font-weight:800; letter-spacing:-.02em; line-height:1; font-variant-numeric:tabular-nums; }
.hs-travel { opacity:0; }   /* n'existe que le temps de l'animation */
.hs-line { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.hs-line path { fill:none; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:0; }

/* téléphone générique */
.hs-phone {
  position:absolute; background:var(--white);
  border:1.5px solid rgba(0,0,0,.14); border-radius:24px;
  box-shadow:var(--shadow-lg); padding:6px;
}
.hs-phone__screen { position:relative; width:100%; height:100%; border-radius:18px; background:#F5F4F0; overflow:hidden; }
.hs-phone__notch {
  position:absolute; left:50%; top:7px; width:34px; height:6px; margin-left:-17px;
  border-radius:100px; background:#1A1A1F; z-index:2;
}

/* ── Entrées (jouées quand .is-on est posé ; --d = délai) ── */
@keyframes hsPop   { from{opacity:0; transform:scale(.8)}         to{opacity:1; transform:none} }
@keyframes hsRise  { from{opacity:0; transform:translateY(14px)}   to{opacity:1; transform:none} }
@keyframes hsDrop  { from{opacity:0; transform:translateY(-18px)}  to{opacity:1; transform:none} }
@keyframes hsFromL { from{opacity:0; transform:translateX(-22px)}  to{opacity:1; transform:none} }
@keyframes hsFromR { from{opacity:0; transform:translateX(22px)}   to{opacity:1; transform:none} }
@keyframes hsGrowX { from{transform:scaleX(0)}                      to{transform:none} }
@keyframes hsDraw  { from{stroke-dashoffset:1}                      to{stroke-dashoffset:0} }
@keyframes hsOut   { to{opacity:0} }
.hs.is-on .a-pop   { animation:hsPop   .55s var(--spring)   var(--d,0s) both; }
.hs.is-on .a-rise  { animation:hsRise  .6s  var(--ease-out) var(--d,0s) both; }
.hs.is-on .a-drop  { animation:hsDrop  .6s  var(--spring)   var(--d,0s) both; }
.hs.is-on .a-left  { animation:hsFromL .6s  var(--ease-out) var(--d,0s) both; }
.hs.is-on .a-right { animation:hsFromR .6s  var(--ease-out) var(--d,0s) both; }
.hs.is-on .a-grow  { transform-origin:0 50%; animation:hsGrowX .55s var(--ease-out) var(--d,0s) both; }
.hs.is-on .a-draw  { animation:hsDraw  .8s  var(--ease-out) var(--d,0s) both; }
.hs.is-on .hs-stage { animation:hsOut .6s var(--ease) calc(var(--hs-loop) - .7s) forwards; }

/* ─────────────────────────────────────────────────────────
   Scène « Site web » : le site se construit en 7 jours,
   passe en ligne, on le trouve sur Google, le téléphone sonne
   ───────────────────────────────────────────────────────── */
.hs--web { --hs-loop:10.5s; }
.web-days { position:absolute; left:30px; top:14px; display:flex; align-items:center; gap:6px; }
.web-day {
  width:22px; height:22px; border-radius:6px; display:grid; place-items:center;
  font-size:9.5px; font-weight:700; color:#fff;
  background:var(--blue); border:1px solid var(--blue);
}
@keyframes webDayFill { from{ background:var(--white); border-color:var(--border); color:var(--text-3); } }
.hs.is-on .web-day { animation:webDayFill .3s var(--ease) var(--d) both; }
.web-live {
  left:232px; top:14px; height:22px; padding:0 10px; gap:6px;
  font-size:10.5px; color:var(--green); box-shadow:none;
  border-color:rgba(74,138,104,.35); background:rgba(74,138,104,.08);
}
.web-live i { width:6px; height:6px; border-radius:50%; background:var(--green); animation:blink 1.6s ease-in-out infinite; }

.web-browser { left:30px; top:52px; width:350px; height:272px; overflow:hidden; }
.web-bar {
  height:30px; display:flex; align-items:center; gap:6px; padding:0 12px;
  background:#F4F4F2; border-bottom:1px solid var(--border);
}
.web-bar i { width:8px; height:8px; border-radius:50%; background:rgba(0,0,0,.1); }
.web-url {
  margin-left:8px; flex:1; height:16px; border-radius:5px; background:rgba(0,0,0,.05);
  font-size:9.5px; color:var(--text-3); display:flex; align-items:center; justify-content:center; gap:4px;
}
.web-url svg { width:8px; height:8px; }
.web-page { position:absolute; left:0; right:0; top:30px; bottom:0; padding:14px 16px; display:flex; flex-direction:column; gap:9px; }
.web-nav { display:flex; align-items:center; gap:8px; height:14px; }
.web-nav u { width:11px; height:11px; border-radius:3px; background:var(--blue); }
.web-nav i { height:5px; border-radius:3px; background:var(--ph); }
.web-nav i:nth-of-type(1){ width:26px } .web-nav i:nth-of-type(2){ width:20px } .web-nav i:nth-of-type(3){ width:24px }
.web-nav b { margin-left:auto; width:40px; height:12px; border-radius:4px; border:1px solid rgba(61,106,154,.45); }
.web-img { height:86px; border-radius:10px; background:var(--g-blue); position:relative; overflow:hidden; }
.web-img::before {
  content:''; position:absolute; left:-30%; top:-60%; width:60%; height:220%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent); transform:rotate(18deg);
}
.web-img::after {
  content:''; position:absolute; right:-24px; bottom:-40px; width:120px; height:80px; border-radius:50%;
  background:rgba(255,255,255,.22);
}
.web-img__pill {
  position:absolute; left:10px; bottom:9px; height:16px; padding:0 8px; border-radius:100px;
  background:rgba(255,255,255,.88); font-size:8px; font-weight:700; color:var(--blue);
  display:flex; align-items:center; gap:4px;
}
.web-img__pill i { width:5px; height:5px; border-radius:50%; background:var(--green); }
.web-t { height:10px; border-radius:4px; background:var(--ph-2); }
.web-t--1 { width:64%; }
.web-t--2 { width:42%; height:7px; background:var(--ph); margin-top:-3px; }
.web-row { display:flex; align-items:center; gap:10px; }
.web-btn {
  display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 10px; border-radius:6px;
  background:var(--blue); color:#fff; font-size:9.5px; font-weight:700;
}
.web-btn svg { width:10px; height:10px; }
.hs.is-on .web-btn {
  animation:hsPop .5s var(--spring) var(--d) both,
            webBtnPulse 2.2s ease-in-out calc(var(--d) + .6s) infinite;
}
@keyframes webBtnPulse { 0%,100%{box-shadow:0 0 0 0 rgba(61,106,154,.45)} 55%{box-shadow:0 0 0 9px rgba(61,106,154,0)} }
.web-row i { height:6px; border-radius:3px; background:var(--ph); }
.web-row i:nth-of-type(1){ width:46px } .web-row i:nth-of-type(2){ width:30px }
.web-tiles { display:flex; gap:8px; }
.web-tile { flex:1; height:32px; border-radius:8px; }
.web-tile:nth-child(1){ background:var(--g-coral) } .web-tile:nth-child(2){ background:var(--g-neutral) } .web-tile:nth-child(3){ background:var(--g-green) }

.web-google { left:398px; top:62px; width:126px; padding:9px 10px 8px; border-radius:12px; display:flex; flex-direction:column; gap:7px; }
.web-q {
  display:flex; align-items:center; gap:6px; height:22px; padding:0 8px; border-radius:100px;
  border:1px solid var(--border-hi); font-size:9.5px; color:var(--text);
}
.web-q svg { width:10px; height:10px; color:var(--text-3); flex-shrink:0; }
.web-q span { display:inline-block; max-width:100px; overflow:hidden; white-space:nowrap; }
@keyframes webType { from{ max-width:0 } }
.hs.is-on .web-q span { animation:webType .7s steps(13) var(--d) both; }
.web-r { display:flex; align-items:center; gap:5px; font-size:9.5px; }
.web-r svg { width:9px; height:8px; flex-shrink:0; }
.web-r b { font-weight:600; }
.web-r em {
  margin-left:auto; font-style:normal; font-size:8px; font-weight:700; color:var(--blue);
  background:rgba(61,106,154,.1); border-radius:100px; padding:2px 6px;
}

.web-phone { left:352px; top:176px; width:120px; height:206px; }
@keyframes webRing { 0%,100%{transform:none} 10%,50%,90%{transform:rotate(-2deg)} 30%,70%{transform:rotate(2deg)} }
.hs.is-on .web-phone { animation:webRing 1.3s ease-in-out 6.3s 1; }
.web-time { position:absolute; left:0; right:0; top:22px; text-align:center; font-size:20px; opacity:.85; }
.web-call {
  position:absolute; left:7px; right:7px; top:58px; padding:10px 5px 8px; border-radius:12px;
  background:var(--white); border:1px solid var(--border); box-shadow:0 8px 20px rgba(0,0,0,.1);
  display:flex; flex-direction:column; align-items:center; gap:3px; text-align:center;
}
.web-call .hs-av { width:28px; height:28px; background:var(--g-blue); color:var(--blue); font-size:10px; margin-bottom:3px; }
.web-call small { font-size:8px; color:var(--text-3); }
.web-call b { font-size:10px; font-weight:700; white-space:nowrap; }
.web-call__btns { display:flex; gap:12px; margin-top:6px; }
.web-call__btns i { width:24px; height:24px; border-radius:50%; display:grid; place-items:center; color:#fff; }
.web-call__btns i svg { width:11px; height:11px; }
.web-call__no { background:var(--coral); }
.web-call__ok { background:var(--green); animation:webOkPulse 1.4s ease-in-out infinite; }
@keyframes webOkPulse { 0%,100%{box-shadow:0 0 0 0 rgba(74,138,104,.5)} 60%{box-shadow:0 0 0 8px rgba(74,138,104,0)} }

/* ─────────────────────────────────────────────────────────
   Scène « Notoriété » : votre commerce devient la référence
   de la ville — les clients convergent, les concurrents s'éteignent
   ───────────────────────────────────────────────────────── */
.hs--city { --hs-loop:11s; }
.city-map {
  position:absolute; left:20px; top:20px; width:500px; height:360px; border-radius:20px;
  background:var(--white); border:1px solid var(--border); box-shadow:var(--shadow-lg); overflow:hidden;
}
.city-map svg { width:100%; height:100%; }
.city-ghost { position:absolute; width:18px; height:22px; opacity:.16; color:#9C9C96; }
@keyframes cityDim { from{opacity:.55} }
.hs.is-on .city-ghost { animation:cityDim .8s ease 6.6s both; }
.city-pin { position:absolute; left:250px; top:156px; width:40px; height:48px; z-index:4; }
.city-pin__body { width:100%; height:100%; transform-origin:50% 100%; color:var(--coral); }
.city-pin__body svg { width:100%; height:100%; filter:drop-shadow(0 6px 10px rgba(212,96,60,.35)); }
@keyframes cityBeat { 0%,100%{transform:none} 40%{transform:scale(1.18)} }
.hs.is-on .city-pin__body { animation:cityBeat .7s var(--spring) 6.8s 1; }
.city-ring {
  position:absolute; left:270px; top:202px; width:12px; height:12px; margin:-6px 0 0 -6px;
  border-radius:50%; border:2px solid rgba(212,96,60,.5); z-index:3;
  animation:cityRing 2.6s ease-out infinite;
}
.city-ring--2 { animation-delay:1.3s; }
@keyframes cityRing { 0%{transform:scale(1); opacity:.9} 100%{transform:scale(7); opacity:0} }
.city-lbl { left:270px; top:214px; translate:-50% 0; font-size:10px; padding:5px 10px; z-index:4; }
.city-ref { left:270px; top:118px; translate:-50% 0; font-size:11px; z-index:5; }
.city-ref svg { width:12px; height:12px; color:var(--coral); }
.city-ig { left:34px; top:36px; width:132px; padding:8px; border-radius:12px; z-index:3; }
.city-ig__head { display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.city-ig__head .hs-av { width:16px; height:16px; background:var(--g-coral); }
.city-ig__head b { font-size:8.5px; font-weight:700; }
.city-ig__img { height:64px; border-radius:8px; background:var(--g-coral); position:relative; overflow:hidden; }
.city-ig__img::after {
  content:''; position:absolute; left:-10px; bottom:-30px; width:90px; height:60px; border-radius:50%;
  background:rgba(255,255,255,.28);
}
.city-ig__foot { display:flex; align-items:center; gap:10px; margin-top:6px; font-size:9px; font-weight:600; color:var(--text-2); }
.city-ig__foot span { display:flex; align-items:center; gap:3px; }
.city-ig__foot svg { width:11px; height:11px; }
.city-heart { color:var(--coral); }
@keyframes cityHeart { 0%,100%{transform:none} 45%{transform:scale(1.4)} }
.hs.is-on .city-heart { animation:cityHeart .55s var(--spring) var(--d) both; }
.city-rev { left:374px; top:52px; width:142px; padding:9px 10px; border-radius:12px; z-index:3; }
.city-rev__head { display:flex; align-items:center; gap:6px; }
.city-rev__head .hs-av { width:18px; height:18px; background:var(--g-blue); color:var(--blue); font-size:7px; }
.city-rev__head b { font-size:9px; font-weight:700; }
.city-rev__head svg { margin-left:auto; width:12px; height:12px; }
.city-rev__stars { display:flex; gap:1px; color:#F5A623; margin:5px 0 3px; }
.city-rev__stars svg { width:10px; height:10px; }
.city-rev p { font-size:8.5px; line-height:1.4; color:var(--text-2); }
.city-fb { left:44px; top:302px; width:166px; padding:8px 10px; border-radius:12px; display:flex; align-items:center; gap:8px; z-index:3; }
.city-fb .hs-ico { border-radius:50%; background:#1877F2; color:#fff; font-size:13px; font-weight:800; font-family:var(--pj); }
.city-fb b { display:block; font-size:10px; font-weight:700; }
.city-fb small { font-size:8.5px; color:var(--text-3); white-space:nowrap; }
.city-links path { stroke:rgba(212,96,60,.45); stroke-width:1.5; }
.city-walker {
  position:absolute; left:0; top:0; width:18px; height:18px; border-radius:50%;
  border:2px solid #fff; box-shadow:0 2px 8px rgba(0,0,0,.18); z-index:2;
  offset-path:var(--p); offset-rotate:0deg;
}
@keyframes cityWalk {
  0%   { offset-distance:0%; opacity:0; transform:scale(.5); }
  10%  { opacity:1; transform:none; }
  88%  { opacity:1; transform:none; offset-distance:100%; }
  100% { offset-distance:100%; opacity:0; transform:scale(.3); }
}
.hs.is-on .city-walker { animation:cityWalk 2.6s ease-in-out var(--d) both; }

/* ─────────────────────────────────────────────────────────
   Scène « Publicité » : le budget entre, l'annonce tourne,
   les clients sortent
   ───────────────────────────────────────────────────────── */
.hs--ads { --hs-loop:11s; }
.ads-budget { left:14px; top:140px; width:134px; padding:12px 12px 14px; border-radius:14px; display:flex; flex-direction:column; gap:5px; }
.ads-budget small { font-size:8.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); }
.ads-budget .hs-num { font-size:24px; }
.ads-budget em { font-style:normal; font-size:8.5px; color:var(--text-2); }
.ads-slider { position:relative; height:4px; border-radius:100px; background:rgba(0,0,0,.08); margin:8px 0 6px; }
.ads-slider__fill { position:absolute; left:0; top:0; height:100%; width:60%; border-radius:100px; background:var(--green); transform-origin:0 50%; }
.ads-slider__knob {
  position:absolute; top:50%; left:60%; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%;
  background:#fff; border:2px solid var(--green); box-shadow:0 1px 4px rgba(0,0,0,.15);
}
@keyframes adsFill { from{transform:scaleX(0)} }
@keyframes adsKnob { from{left:0} }
.hs.is-on .ads-slider__fill { animation:adsFill .8s var(--ease-out) .5s both; }
.hs.is-on .ads-slider__knob { animation:adsKnob .8s var(--ease-out) .5s both; }
.ads-stack { position:relative; height:36px; margin-top:6px; }
.ads-stack i {
  position:absolute; width:30px; height:12px; border-radius:50%;
  background:#EAF3EE; border:1.5px solid rgba(74,138,104,.45);
}
.ads-stack i:nth-child(1){ left:0;  bottom:0 }  .ads-stack i:nth-child(2){ left:0;  bottom:6px }
.ads-stack i:nth-child(3){ left:0;  bottom:12px } .ads-stack i:nth-child(4){ left:0; bottom:18px }
.ads-stack i:nth-child(5){ left:34px; bottom:0 } .ads-stack i:nth-child(6){ left:34px; bottom:6px }
.ads-stack i:nth-child(7){ left:68px; bottom:0 }
.ads-coin {
  position:absolute; left:0; top:0; width:22px; height:22px; border-radius:50%;
  background:#EAF3EE; border:1.5px solid rgba(74,138,104,.5); color:var(--green);
  font-family:var(--pj); font-weight:800; font-size:11px; display:grid; place-items:center;
  box-shadow:0 2px 6px rgba(0,0,0,.1); z-index:3;
  offset-path:path('M 146 214 C 192 214, 192 150, 250 150'); offset-rotate:0deg;
}
@keyframes adsFly {
  0%   { offset-distance:0%; opacity:0; transform:scale(.6); }
  12%  { opacity:1; transform:none; }
  86%  { opacity:1; transform:none; offset-distance:100%; }
  100% { offset-distance:100%; opacity:0; transform:scale(.3); }
}
.hs.is-on .ads-coin { animation:adsFly 1.3s cubic-bezier(.5,0,.5,1) var(--d) both; }
.ads-phone { left:196px; top:50px; width:148px; height:300px; }
.ads-feed { position:absolute; left:8px; right:8px; }
.ads-feed--1 { top:20px; } .ads-feed--2 { top:206px; }
.ads-feed i { display:block; height:5px; border-radius:3px; background:var(--ph); margin-bottom:5px; }
.ads-feed i:nth-child(1){ width:40% } .ads-feed i:nth-child(2){ width:100%; height:30px; border-radius:6px; background:rgba(0,0,0,.05) } .ads-feed i:nth-child(3){ width:70% }
.ads-ad {
  position:absolute; left:7px; right:7px; top:52px; padding:7px; border-radius:10px;
  background:var(--white); border:1px solid var(--border); box-shadow:0 6px 16px rgba(0,0,0,.08); z-index:1;
}
.ads-ad__head { display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.ads-ad__head u { width:14px; height:14px; border-radius:4px; background:var(--g-coral); }
.ads-ad__head > div { min-width:0; }
.ads-ad__head b { font-size:8.5px; font-weight:700; white-space:nowrap; }
.ads-ad__head small { display:block; font-size:7px; color:var(--text-3); }
.ads-ad__img { height:62px; border-radius:7px; background:var(--g-blue); position:relative; overflow:hidden; }
.ads-ad__img::after { content:''; position:absolute; right:-16px; bottom:-26px; width:70px; height:50px; border-radius:50%; background:rgba(255,255,255,.25); }
.ads-ad p { font-size:8px; color:var(--text-2); margin:6px 0; line-height:1.3; }
.ads-ad__btn { height:19px; border-radius:6px; background:var(--green); color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; gap:4px; }
.ads-ad__btn svg { width:9px; height:9px; }
@keyframes adsBtnPulse { 0%,100%{box-shadow:0 0 0 0 rgba(74,138,104,.45)} 55%{box-shadow:0 0 0 7px rgba(74,138,104,0)} }
.hs.is-on .ads-ad__btn { animation:adsBtnPulse 2s ease-in-out 2.8s infinite; }
.ads-net {
  position:absolute; top:12px; width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  background:#fff; border:1px solid var(--border); box-shadow:0 2px 8px rgba(0,0,0,.12); z-index:2;
  font-family:var(--pj); font-weight:800; font-size:12px; color:#fff;
}
.ads-net svg { width:12px; height:12px; }
.ads-net--g  { left:227px; }
.ads-net--fb { left:258px; background:#1877F2; border-color:#1877F2; }
.ads-net--ig { left:289px; background:conic-gradient(#f9ce34,#ee2a7b,#6228d7,#f9ce34); border-color:transparent; }
.ads-links path { stroke:rgba(74,138,104,.45); stroke-width:1.5; }
.ads-res { left:366px; width:158px; padding:9px 10px; border-radius:12px; display:flex; align-items:center; gap:9px; }
.ads-res--1{ top:92px } .ads-res--2{ top:158px } .ads-res--3{ top:224px }
.ads-res .hs-ico { width:28px; height:28px; border-radius:9px; background:rgba(74,138,104,.1); color:var(--green); }
.ads-res .hs-ico svg { width:14px; height:14px; }
.ads-res b { display:block; font-size:10.5px; font-weight:700; }
.ads-res small { font-size:8.5px; color:var(--text-3); }
.ads-roi { left:366px; top:290px; width:158px; padding:10px 12px 12px; border-radius:14px; }
.ads-roi small { display:block; font-size:8.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); margin-bottom:4px; }
.ads-roi .hs-num { font-size:30px; color:var(--green); }
.ads-roi em { display:block; font-style:normal; font-size:8.5px; color:var(--text-2); margin-top:3px; }

/* ─────────────────────────────────────────────────────────
   Scène « Avis Google » : les Local Guides passent, publient,
   la fiche grimpe (6 → 63 avis, 4,2 → 4,9) et on appelle
   ───────────────────────────────────────────────────────── */
.hs--reviews { --hs-loop:12s; }
.rv-fiche { left:118px; top:110px; width:284px; padding:16px 18px; border-radius:16px; z-index:2; }
.rv-head { display:flex; align-items:center; gap:10px; }
.rv-logo { width:42px; height:42px; border-radius:11px; background:var(--g-coral); flex-shrink:0; }
.rv-head b { display:block; font-size:14px; font-weight:700; }
.rv-head small { font-size:10.5px; color:var(--text-3); }
.rv-head > svg { margin-left:auto; width:18px; height:18px; align-self:flex-start; }
.rv-score { display:flex; align-items:center; gap:10px; margin:14px 0 2px; }
.rv-score .hs-num { font-size:36px; }
.rv-stars { display:flex; gap:1px; color:#F5A623; }
.rv-stars svg { width:15px; height:15px; }
@keyframes rvStar { from{color:rgba(0,0,0,.14); transform:scale(1)} 60%{transform:scale(1.4)} to{color:#F5A623} }
.hs.is-on .rv-star--5 { animation:rvStar .45s var(--ease) 8s both; }
.rv-count { font-size:12px; color:var(--text-2); margin-left:2px; }
.rv-count b { font-weight:700; color:var(--text); font-variant-numeric:tabular-nums; }
.rv-actions { display:flex; gap:8px; margin-top:14px; }
.rv-btn {
  display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 13px; border-radius:100px;
  font-size:10.5px; font-weight:600; border:1px solid var(--border-hi); color:var(--text-2);
}
.rv-btn svg { width:11px; height:11px; }
.rv-btn--call { background:var(--coral); border-color:var(--coral); color:#fff; }
@keyframes rvClick { 0%,100%{transform:none} 50%{transform:scale(.92)} }
.hs.is-on .rv-btn--call { animation:rvClick .35s var(--ease) 9.9s 1; }
.rv-ripple {
  position:absolute; left:176px; top:267px; width:14px; height:14px; margin:-7px 0 0 -7px;
  border-radius:50%; border:2px solid rgba(212,96,60,.7); z-index:6;
}
@keyframes rvRipple { 0%{opacity:.9; transform:scale(.4)} 100%{opacity:0; transform:scale(3.4)} }
.hs.is-on .rv-ripple { animation:rvRipple .7s ease-out 9.95s both; }
.rv-guide { position:absolute; width:42px; height:42px; z-index:3; }
.rv-guide .hs-av { width:42px; height:42px; font-size:13px; box-shadow:0 4px 12px rgba(0,0,0,.12); }
.rv-badge {
  position:absolute; right:-4px; bottom:-4px; width:16px; height:16px; border-radius:50%;
  background:#F29900; border:2px solid #fff; display:grid; place-items:center; color:#fff;
}
.rv-badge svg { width:8px; height:8px; }
.rv-g1 { left:40px;  top:66px; }
.rv-g2 { left:450px; top:94px; }
.rv-g3 { left:52px;  top:318px; }
.rv-bubble { width:146px; padding:9px 11px; border-radius:12px; z-index:3; }
.rv-b1 { left:88px;  top:48px;  border-bottom-left-radius:3px; --tx:89px;   --ty:141px; }
.rv-b2 { left:404px; top:146px; width:130px; border-top-right-radius:3px; --tx:-219px; --ty:43px; }
.rv-b3 { left:100px; top:334px; border-top-left-radius:3px; --tx:77px;   --ty:-147px; }
.rv-bubble__stars { display:flex; gap:1px; color:#F5A623; margin-bottom:3px; }
.rv-bubble__stars svg { width:9px; height:9px; }
.rv-bubble p { font-size:9px; line-height:1.4; color:var(--text-2); }
.rv-bubble small { display:block; margin-top:4px; font-size:7.5px; color:var(--text-3); }
@keyframes rvFly { to{ transform:translate(var(--tx),var(--ty)) scale(.2); opacity:0; } }
.hs.is-on .rv-bubble {
  animation:hsPop .55s var(--spring) var(--d) both,
            rvFly .7s cubic-bezier(.5,0,.8,.5) var(--d2) forwards;
}
.rv-new {
  position:absolute; left:296px; top:210px; font-size:9px; font-weight:700; color:var(--coral);
  background:rgba(212,96,60,.1); border-radius:100px; padding:2px 7px; z-index:5; white-space:nowrap;
}
@keyframes rvNew { 0%{opacity:0; transform:translateY(8px)} 25%{opacity:1; transform:none} 100%{opacity:0; transform:translateY(-18px)} }
.hs.is-on .rv-new { animation:rvNew 1.3s ease-out var(--d) both; }
.rv-cursor { position:absolute; left:452px; top:346px; width:16px; height:20px; z-index:7; }
.rv-cursor svg { width:100%; height:100%; filter:drop-shadow(0 2px 4px rgba(0,0,0,.25)); }
@keyframes rvCursorIn { from{opacity:0} to{opacity:1} }
@keyframes rvCursor   { to{transform:translate(-277px,-79px)} }
.hs.is-on .rv-cursor {
  animation:rvCursorIn .3s ease 8.6s both,
            rvCursor 1s cubic-bezier(.4,0,.2,1) 8.9s forwards;
}
.rv-calling { left:286px; top:278px; font-size:10px; color:var(--green); border-color:rgba(74,138,104,.35); z-index:6; }
.rv-calling i { width:6px; height:6px; border-radius:50%; background:var(--green); animation:blink 1.4s ease-in-out infinite; }

/* ─────────────────────────────────────────────────────────
   Scène « Abonnés » : le flux d'abonnés remplit le compteur
   en 48 h, sans mot de passe
   ───────────────────────────────────────────────────────── */
.hs--followers { --hs-loop:11s; }
.fo-phone { left:52px; top:28px; width:196px; height:344px; }
.fo-top { display:flex; align-items:center; justify-content:center; gap:4px; height:26px; margin-top:18px; font-size:9px; font-weight:700; }
.fo-top svg { width:9px; height:9px; }
.fo-prof { display:flex; align-items:center; gap:10px; padding:0 12px; }
.fo-ring { width:40px; height:40px; border-radius:50%; padding:2.5px; background:conic-gradient(#f9ce34,#ee2a7b,#6228d7,#f9ce34); flex-shrink:0; }
.fo-ring i { display:block; width:100%; height:100%; border-radius:50%; border:2px solid #F5F4F0; background:var(--g-coral); }
.fo-stats { display:flex; flex:1; justify-content:space-around; text-align:center; }
.fo-stat b { display:block; font-family:var(--pj); font-size:11px; font-weight:800; font-variant-numeric:tabular-nums; }
.fo-stat--main b { font-size:12px; color:var(--coral); }
.fo-stat span { font-size:7px; color:var(--text-3); white-space:nowrap; }
.fo-bio { padding:8px 12px 0; }
.fo-bio b { display:block; font-size:9px; font-weight:700; }
.fo-bio i { display:block; height:5px; border-radius:3px; background:var(--ph); margin-top:4px; }
.fo-bio i:nth-of-type(1){ width:82% } .fo-bio i:nth-of-type(2){ width:56% }
.fo-follow { margin:10px 12px 0; height:20px; border-radius:6px; background:#0095f6; color:#fff; font-size:8.5px; font-weight:700; display:grid; place-items:center; }
.fo-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; margin-top:12px; padding:0 4px; }
.fo-grid i { aspect-ratio:1; border-radius:3px; background:var(--g-neutral); }
.fo-grid i:nth-child(2){ background:var(--g-coral) } .fo-grid i:nth-child(4){ background:var(--g-blue) }
.fo-grid i:nth-child(6){ background:var(--g-green) } .fo-grid i:nth-child(8){ background:var(--g-coral) }
.fo-src { padding:6px 12px 6px 6px; gap:8px; font-size:10.5px; }
.fo-src .hs-ico { width:22px; height:22px; border-radius:50%; color:#fff; font-family:var(--pj); font-weight:800; font-size:12px; }
.fo-src--ig { left:398px; top:66px; }
.fo-src--fb { left:420px; top:146px; }
.fo-src--tt { left:404px; top:226px; }
.fo-src--ig .hs-ico { background:conic-gradient(#f9ce34,#ee2a7b,#6228d7,#f9ce34); }
.fo-src--fb .hs-ico { background:#1877F2; }
.fo-src--tt .hs-ico { background:#111117; }
.fo-src .hs-ico svg { width:12px; height:12px; }
.fo-dot {
  position:absolute; left:0; top:0; width:16px; height:16px; border-radius:50%;
  border:2px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.15); z-index:2;
  offset-path:var(--p); offset-rotate:0deg;
}
@keyframes foFlow {
  0%   { offset-distance:0%; opacity:0; transform:scale(.4); }
  12%  { opacity:1; transform:none; }
  86%  { opacity:1; transform:none; offset-distance:100%; }
  100% { offset-distance:100%; opacity:0; transform:scale(.2); }
}
.hs.is-on .fo-dot { animation:foFlow 1.5s cubic-bezier(.45,0,.55,1) var(--d) both; }
.fo-tag { left:256px; top:30px; font-size:10.5px; }
.fo-tag i { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.fo-tag--before { color:var(--text-2); }
.fo-tag--before i { background:var(--text-3); }
.fo-tag--after { color:var(--coral); border-color:rgba(212,96,60,.35); background:rgba(212,96,60,.06); }
.fo-tag--after i { background:var(--coral); }
@keyframes foTagBefore {
  0%   { opacity:0; transform:scale(.85); }
  8%   { opacity:1; transform:none; }
  90%  { opacity:1; transform:none; }
  100% { opacity:0; transform:translateY(-6px); }
}
.hs.is-on .fo-tag--before { animation:foTagBefore 4s var(--ease) .8s both; }
.fo-timer { left:378px; top:292px; width:152px; padding:9px 12px; border-radius:14px; display:flex; align-items:center; gap:10px; }
.fo-timer > svg { width:36px; height:36px; flex-shrink:0; transform:rotate(-90deg); }
.fo-timer circle { fill:none; stroke-width:3.5; }
.fo-timer .fo-ring-t { stroke:rgba(0,0,0,.08); }
.fo-timer .fo-ring-p { stroke:var(--coral); stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:0; }
@keyframes foRing { from{stroke-dashoffset:1} }
.hs.is-on .fo-ring-p { animation:foRing 6.6s linear 1.9s both; }
.fo-timer b { display:block; font-family:var(--pj); font-size:14px; font-weight:800; }
.fo-timer small { font-size:8.5px; color:var(--text-3); white-space:nowrap; }
.fo-done {
  position:absolute; left:34px; top:2px; width:16px; height:16px; border-radius:50%;
  background:var(--green); border:2px solid #fff; display:grid; place-items:center; color:#fff;
}
.fo-done svg { width:8px; height:8px; }
.fo-lock { left:250px; top:354px; font-size:10.5px; }
.fo-lock .hs-ico { background:rgba(74,138,104,.1); color:var(--green); }

/* =========================================================
   ONBOARDING — demarrer.html
   Un seul écran, 2–3 champs, service présélectionné par l'URL.
   Le client ne crée pas de compte : il dit l'essentiel, on le rappelle
   (ou il paie tout de suite pour un pack), et on s'occupe du reste.
   ========================================================= */
.hero--onb { min-height:auto; padding:104px 40px 72px; }
.onb {
  position:relative; z-index:1;
  max-width:1120px; margin:0 auto; width:100%;
  display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:56px; align-items:start;
}
.onb-main .svc-chip { margin-bottom:18px; }
.onb-h1 {
  margin:0 0 12px;
  font-family:'Plus Jakarta Sans', sans-serif; font-weight:900; letter-spacing:-.02em; line-height:1.08;
  font-size:clamp(32px,4vw,50px); color:var(--text);
}
.onb-h1 em { font-style:normal; color:rgba(var(--svc-r),var(--svc-g),var(--svc-b),1); transition:color var(--dur) var(--ease); }
.onb-lead { margin:0 0 30px; font-size:clamp(15px,1.4vw,17px); color:var(--text-2); line-height:1.65; }

.onb [hidden] { display:none !important; }
.onb-form { display:flex; flex-direction:column; gap:26px; }
.onb-fields { display:flex; flex-direction:column; gap:22px; }
.onb-main .svc-chip:not([class*='--']) { background:rgba(0,0,0,.05); color:var(--text-2); }
.onb-block { display:flex; flex-direction:column; gap:10px; }
.onb-label {
  display:flex; align-items:baseline; gap:8px;
  font-size:14px; font-weight:600; color:var(--text);
}
.onb-label small { font-weight:400; color:var(--text-3); font-size:12.5px; }

/* choix du service : 6 tuiles radio */
.onb-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.onb-tile { position:relative; }
.onb-tile input { position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.onb-tile span {
  display:flex; flex-direction:column; gap:3px; min-height:70px;
  padding:13px 14px 12px 34px; border-radius:14px; position:relative;
  background:var(--white); border:1.5px solid var(--border-hi);
  font-size:14px; font-weight:600; color:var(--text); line-height:1.25;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.onb-tile span::before {
  content:''; position:absolute; left:14px; top:17px; width:9px; height:9px; border-radius:50%;
  background:var(--dot, var(--text-3));
}
.onb-tile span small { font-size:12px; font-weight:400; color:var(--text-3); }
.onb-tile input:hover + span { border-color:rgba(0,0,0,.22); }
.onb-tile input:focus-visible + span { box-shadow:0 0 0 3px rgba(var(--svc-r),var(--svc-g),var(--svc-b),.25); }
.onb-tile input:checked + span {
  border-color:var(--dot, var(--text)); background:color-mix(in srgb, var(--dot, var(--text)) 7%, var(--white));
  box-shadow:0 0 0 1px var(--dot, var(--text)) inset;
}
.onb-tile--blue  { --dot:var(--blue); }
.onb-tiles.is-locked { display:flex; }
.onb-tiles.is-locked .onb-tile { min-width:280px; }
.onb-tiles.is-locked .onb-tile span { min-height:0; }
.onb-label .onb-change {
  margin-left:auto; padding:0; border:0; background:none; cursor:pointer;
  font:inherit; font-size:12.5px; font-weight:600; color:var(--text-3); text-decoration:underline; text-underline-offset:3px;
}
.onb-label .onb-change:hover { color:var(--text); }
.onb-tile--coral { --dot:var(--coral); }
.onb-tile--green { --dot:var(--green); }

/* chips radio (formule, pack, réseau, moment) */
.onb-chips { display:flex; flex-wrap:wrap; gap:8px; }
.onb-chip { position:relative; }
.onb-chip input { position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.onb-chip span {
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 14px; border-radius:100px;
  background:var(--white); border:1.5px solid var(--border-hi);
  font-size:13.5px; font-weight:500; color:var(--text);
  transition:border-color .2s, background .2s, color .2s, box-shadow .2s;
}
.onb-chip span small { color:var(--text-3); font-weight:400; }
.onb-chip input:hover + span { border-color:rgba(0,0,0,.24); }
.onb-chip input:focus-visible + span { box-shadow:0 0 0 3px rgba(var(--svc-r),var(--svc-g),var(--svc-b),.25); }
.onb-chip input:checked + span {
  border-color:rgba(var(--svc-r),var(--svc-g),var(--svc-b),1);
  background:rgba(var(--svc-r),var(--svc-g),var(--svc-b),.09);
  color:var(--text); font-weight:600;
}
.onb-chip input:checked + span small { color:rgba(var(--svc-r),var(--svc-g),var(--svc-b),1); }

/* champs */
.onb-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.onb-field { display:flex; flex-direction:column; gap:7px; }
.onb-field label { font-size:13.5px; font-weight:600; color:var(--text); }
.onb-field label small { font-weight:400; color:var(--text-3); }
.onb-input {
  width:100%; height:50px; padding:0 16px; border-radius:12px;
  border:1.5px solid var(--border-hi); background:var(--white);
  font:inherit; font-size:15px; color:var(--text);
  transition:border-color .2s, box-shadow .2s;
}
.onb-input::placeholder { color:var(--text-3); }
.onb-input:focus {
  outline:none; border-color:rgba(var(--svc-r),var(--svc-g),var(--svc-b),1);
  box-shadow:0 0 0 4px rgba(var(--svc-r),var(--svc-g),var(--svc-b),.14);
}
.onb-field.is-error .onb-input { border-color:var(--coral); }
.onb-error { display:none; font-size:12.5px; color:var(--coral); }
.onb-field.is-error .onb-error { display:block; }

.onb-submit { display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:4px; }
.btn--big { padding:15px 28px; font-size:15.5px; border-radius:12px; }
.btn--big svg { width:15px; }
.btn[aria-busy="true"] { opacity:.6; pointer-events:none; }
.onb-reassure { margin:0; font-size:12.5px; color:var(--text-3); }
.onb-reassure b { color:var(--text-2); font-weight:600; }

/* confirmation */
.onb-done { display:flex; flex-direction:column; gap:18px; }
.onb-done__ok {
  width:52px; height:52px; border-radius:50%; display:grid; place-items:center; color:#fff;
  background:rgba(var(--svc-r),var(--svc-g),var(--svc-b),1);
  box-shadow:0 8px 24px rgba(var(--svc-r),var(--svc-g),var(--svc-b),.3);
}
.onb-done__ok svg { width:24px; }
.onb-done h2 {
  margin:0; font-family:'Plus Jakarta Sans', sans-serif; font-weight:900; letter-spacing:-.02em;
  font-size:clamp(28px,3.4vw,40px); line-height:1.1; color:var(--text);
}
.onb-done p { margin:0; font-size:16px; line-height:1.7; color:var(--text-2); max-width:600px; }
.onb-done p b { color:var(--text); font-weight:600; }
.onb-done__actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:6px; }
.onb-done__note {
  font-size:13px; color:var(--text-3); background:var(--white); border:1px solid var(--border);
  border-radius:12px; padding:12px 14px; max-width:600px;
}
.btn--wa { background:#25D366; color:#fff; box-shadow:0 4px 14px rgba(37,211,102,.3); }
.btn--wa svg, .btn--phone svg { width:16px; }
.btn--phone { background:var(--white); border:1.5px solid var(--border-hi); color:var(--text); }

/* colonne droite : récap + suite */
.onb-side { display:flex; flex-direction:column; gap:16px; position:sticky; top:88px; }
.onb-card {
  background:var(--white); border:1px solid var(--border); border-radius:18px;
  padding:22px 24px; box-shadow:var(--shadow);
}
.onb-card__h {
  margin:0 0 12px; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3);
}
.onb-recap__svc { display:flex; align-items:center; gap:10px; font-size:16px; font-weight:700; color:var(--text); }
.onb-recap__svc i { width:10px; height:10px; border-radius:50%; background:rgba(var(--svc-r),var(--svc-g),var(--svc-b),1); transition:background var(--dur) var(--ease); }
.onb-recap__pack { font-size:14px; color:var(--text-2); margin-top:4px; }
.onb-recap__price {
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-top:12px;
  font-family:'Plus Jakarta Sans', sans-serif; font-weight:800; font-size:26px; letter-spacing:-.02em; color:var(--text); line-height:1;
}
.onb-recap__price small { font-family:'Inter', sans-serif; font-weight:400; font-size:13px; color:var(--text-3); letter-spacing:0; }
.onb-recap__start {
  display:inline-block; margin-top:12px; font-size:12px; font-weight:600; line-height:1.4;
  color:var(--green); background:rgba(74,138,104,.09); border-radius:100px; padding:4px 11px;
}
.onb-recap__empty { font-size:14px; color:var(--text-3); line-height:1.6; }
.onb-next { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.onb-next li { display:flex; gap:12px; font-size:13.5px; line-height:1.55; color:var(--text-2); }
.onb-next li b { color:var(--text); font-weight:600; }
.onb-next li i {
  flex-shrink:0; width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  font-style:normal; font-size:11px; font-weight:700; font-family:'Plus Jakarta Sans', sans-serif;
  color:rgba(var(--svc-r),var(--svc-g),var(--svc-b),1); background:rgba(var(--svc-r),var(--svc-g),var(--svc-b),.1);
  transition:color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.onb-trust { display:flex; flex-wrap:wrap; gap:6px 14px; font-size:12.5px; color:var(--text-3); }
.onb-trust span { display:flex; align-items:center; gap:5px; }
.onb-trust span::before { content:'✓'; color:var(--green); font-weight:700; }

@media (max-width:1024px) {
  .onb { grid-template-columns:1fr; gap:36px; }
  .onb-side { position:static; }
  .hero--onb { padding-top:96px; }
}
@media (max-width:768px) {
  .hero--onb { padding:88px 20px 56px; }
  .onb-tiles { grid-template-columns:1fr 1fr; }
  .onb-grid-2 { grid-template-columns:1fr; }
  .onb-submit .btn--big { width:100%; justify-content:center; }
}
@media (max-width:420px) {
  .onb-tiles { grid-template-columns:1fr; }
  .onb-tile span { min-height:0; }
}

/* =========================================================
   LOGO v6 — nouveau logo officiel (assets/logo/)
   Marque : 3 cornes qui se chevauchent (viewBox 100×43.75), couleurs
   --logo-* à 90 % d'opacité. Wordmark : image (police vectorisée du
   fichier), blanc sur header et footer sombres.
   Proportions du lockup officiel : wordmark = 0,6 × hauteur de la marque,
   écart marque→texte = 0,24 × hauteur.
   ========================================================= */
.brand { gap:8px; }
.brand-mark { width:73px; height:32px; }
.brand-mark polygon { transform-box:fill-box; transform-origin:50% 100%; transition:transform .45s var(--ease-out); }
.brand:hover .brand-mark polygon:nth-of-type(1) { transform:translateY(-2px); transition-delay:0s; }
.brand:hover .brand-mark polygon:nth-of-type(2) { transform:translateY(-2px); transition-delay:.06s; }
.brand:hover .brand-mark polygon:nth-of-type(3) { transform:translateY(-2px); transition-delay:.12s; }
img.brand-word { display:block; height:19px; width:auto; }
.footer .brand-mark { width:64px; height:28px; }
.footer img.brand-word { height:17px; opacity:.85; }
.hero-mark { width:73px; height:32px; }
@media (max-width:768px) {
  .brand-mark { width:60px; height:26px; }
  img.brand-word { height:16px; }
}

/* =========================================================
   HEADER v6 — clair, translucide, moderne
   Transparent en haut de page (le hero respire), verre dépoli dès qu'on
   scrolle ; logo officiel compact ; CTA noir en pilule ; menu mobile clair.
   ========================================================= */
html { scroll-padding-top:84px; }

.header {
  gap:24px; padding:0 32px; height:64px;
  background:rgba(250,250,248,0);
  border-bottom:1px solid transparent;
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  transition:background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.header.is-scrolled,
body.menu-open .header {
  background:rgba(250,250,248,.72);
  border-bottom-color:rgba(17,17,23,.06);
  box-shadow:0 8px 32px rgba(17,17,23,.04);
}

/* Marque : logo officiel, un cran plus compact que le footer, wordmark noir */
.brand { gap:7px; padding:6px 8px; margin-left:-8px; border-radius:10px; }
.header .brand-mark { width:64px; height:28px; overflow:visible; }
.header img.brand-word { height:17px; }

/* Navigation */
.header .nav-link { padding:8px 13px; font-size:14px; font-weight:500; color:var(--text-2); }
.header .nav-link:hover,
.header .nav-link[aria-pressed="true"],
.header .nav-link[aria-current="page"] { color:var(--text); background:rgba(17,17,23,.06); }
.header .nav-dot { width:6px; height:6px; }

/* CTA : pilule noire */
.header .btn--header {
  padding:9px 18px; font-size:13.5px; border-radius:100px;
  background:var(--text); color:#fff; border:0;
  box-shadow:0 1px 2px rgba(17,17,23,.25), 0 0 0 1px rgba(17,17,23,.06);
}
.header .btn--header:hover { opacity:1; background:#26262E; transform:translateY(-1px); box-shadow:0 6px 16px rgba(17,17,23,.2); }
.header .btn--header:active { transform:none; }

/* Burger → croix */
.burger {
  position:relative; width:40px; height:40px; padding:0; margin:0; border-radius:10px;
  display:none; flex-direction:row; gap:0;
  transition:background .2s;
}
.burger:hover { background:rgba(17,17,23,.05); }
.header .burger span {
  position:absolute; left:11px; width:18px; height:1.5px; border-radius:2px;
  background:var(--text);
  transition:top .25s var(--ease), transform .3s var(--ease);
}
.burger span:nth-child(1) { top:15px; }
.burger span:nth-child(2) { top:23px; }
.burger[aria-expanded="true"] span:nth-child(1) { top:19px; transform:rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { top:19px; transform:rotate(-45deg); }

/* Menu mobile clair */
.mnav {
  position:fixed; left:0; right:0; top:64px; bottom:0; z-index:99;
  display:flex; flex-direction:column;
  padding:14px 12px calc(28px + env(safe-area-inset-bottom));
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:rgba(250,250,248,.94);
  backdrop-filter:blur(24px) saturate(180%); -webkit-backdrop-filter:blur(24px) saturate(180%);
  opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:opacity .25s var(--ease), transform .3s var(--ease-out), visibility 0s linear .3s;
}
.mnav.is-open { opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.mnav__label {
  margin:14px 0 4px 14px;
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3);
}
.mnav__item {
  display:flex; align-items:center; gap:14px;
  padding:13px 14px; border-radius:14px; color:var(--text);
}
.mnav__item:active, .mnav__item[aria-current="page"] { background:rgba(17,17,23,.05); }
.mnav__item .nav-dot { width:8px; height:8px; flex-shrink:0; }
.mnav__item b { display:block; font-size:17px; font-weight:600; letter-spacing:-.012em; line-height:1.2; }
.mnav__item small { display:block; font-size:13px; color:var(--text-2); margin-top:2px; }
.mnav__item .arrow { margin-left:auto; width:16px; height:16px; color:rgba(17,17,23,.25); flex-shrink:0; }
.nav-menu__ico {
  flex-shrink:0; width:34px; height:34px; margin:-4px 0; border-radius:10px; display:grid; place-items:center;
  background:#fff; border:1px solid var(--border); color:var(--coral);
}
.nav-menu__ico--star { color:#F59E0B; }
.nav-menu__ico svg { width:18px; height:18px; }
.mi-price {
  margin-left:auto; flex-shrink:0; padding:5px 10px; border-radius:100px;
  font-size:12.5px; font-weight:600; letter-spacing:.01em; white-space:nowrap;
  color:var(--text); background:#fff; border:1px solid var(--border-hi);
}
.mnav__cta { margin-top:auto; display:grid; gap:10px; padding:26px 4px 0; }
.mnav__cta .btn { justify-content:center; padding:15px 20px; font-size:15.5px; border-radius:100px; }
.mnav__cta .btn--main { background:var(--text); color:#fff; }
.mnav__cta .btn--outline { border:1px solid var(--border-hi); color:var(--text); background:#fff; }
.mnav__cta .btn--outline:hover { background:#F4F4F1; opacity:1; }
.mnav__foot { text-align:center; font-size:12.5px; color:var(--text-3); margin-top:16px; }
.mnav__foot a { color:var(--text-2); }
.mnav.is-open .mnav__item,
.mnav.is-open .mnav__label,
.mnav.is-open .mnav__cta { animation:mnavIn .45s var(--ease-out) both; animation-delay:calc(var(--i, 0) * 40ms); }
@keyframes mnavIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
body.menu-open { overflow:hidden; }

@media (max-width:768px) {
  .header { padding:0 12px 0 20px; gap:8px; }
  .header .brand-mark { width:56px; height:24.5px; }
  .header img.brand-word { height:15px; }
  .header .btn--header { margin-left:auto; padding:8px 14px; font-size:13px; }
  .burger { display:flex; }
}
@media (min-width:769px) { .mnav { display:none; } }
@media (prefers-reduced-motion:reduce) {
  .header, .mnav, .burger span { transition:none; }
  .mnav.is-open .mnav__item, .mnav.is-open .mnav__label, .mnav.is-open .mnav__cta { animation:none; }
}
/* =========================================================
   HERO ACCUEIL — version légère
   Titre sur 2 lignes (il peut déborder du bloc de 680 px), sous-titre
   d'une phrase, cartes courtes ; plus de logo dans le hero (le header
   l'affiche déjà), l'aube de l'intro part du titre.
   ========================================================= */
.hero--funnel .hero-h1 {
  font-size:clamp(36px,4.8vw,66px); line-height:1.05;
  width:max-content; max-width:calc(100vw - 48px);
  margin-bottom:22px;
}
.hero--funnel { min-height:min(100vh, 820px); }
.hero--funnel .hero-sub { max-width:none; margin-bottom:34px; text-wrap:balance; }
.funnel-card__body span { line-height:1.4; }
/* plus de logo dans le hero (ni pendant l'intro), plus d'aube blanche à part :
   le rideau noir se fond directement sur la page, titre déjà en place */
.pc-dawn { display:none; }
.intro-played .hero--funnel .hero-h1,
.intro-played .hero--funnel .hero-h1 .hw,
.intro-played .hero--funnel .hero-h1 em { transition:none; }
/* le titre (deux lignes, reflet sur « Pas vous. ») est seul pendant ~1,2 s,
   puis tout le reste arrive : header, sous-titre, cartes, suite de la page */
.intro-played .header { opacity:0; }
.intro-played:not(.intro-live) .header { animation:pcRestIn .6s ease 1.2s forwards; }
.intro-played:not(.intro-live) .hero--funnel .hero-sub { animation:fadeUp .7s var(--ease-out) 1.2s both; }
.intro-played:not(.intro-live) .funnel-cards { animation:fadeUp .7s var(--ease-out) 1.35s both; }
.intro-played .hero--funnel ~ * { opacity:0; }
.intro-played:not(.intro-live) .hero--funnel ~ * { animation:pcRestIn .7s ease 1.2s forwards; }
@keyframes pcRestIn { from { opacity:0; } to { opacity:1; } }
.intro-played:not(.intro-live) .hero--funnel .hero-sub { animation:fadeUp .7s var(--ease-out) 1.45s both; }
.intro-played:not(.intro-live) .funnel-cards { animation:fadeUp .7s var(--ease-out) 1.6s both; }
@media (max-width:768px) {
  .hero--funnel .hero-h1 { width:auto; max-width:none; }
}

/* =========================================================
   PILIERS v2 — section « Ce qu'on fait pour vous » (accueil)
   Cartes cliquables, ordre du menu (Site web · Notoriété · Publicité),
   étiquette de service à la place du numéro. Visuels : les animations
   d'origine (navigateur + notification, barres, étoiles + avis).
   ========================================================= */
a.pilier { color:inherit; text-decoration:none; cursor:pointer; }
.pilier__tag {
  display:inline-flex; align-items:center; gap:7px;
  font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3);
}
.pilier__tag .nav-dot { width:6px; height:6px; }
.pilier__cta { transition:opacity .15s, background .2s; }
.pilier:hover .pilier__cta--blue  { background:rgba(61,106,154,.16); }
.pilier:hover .pilier__cta--green { background:rgba(74,138,104,.16); }
.pilier:hover .pilier__cta--coral { background:rgba(212,96,60,.16); }
.pilier:focus-visible { outline:2px solid var(--service); outline-offset:3px; }

/* =========================================================
   APERÇU DE SITE — « Voyez votre site » (accueil, section Nos offres)
   Nom + ville + métier → un mini-site généré dans un navigateur ou un
   téléphone (base 720×470 / 320×640, mis à l'échelle par --sp-scale, JS).
   Chaque métier a sa structure (héros + sections), sa typo, sa forme, son ambiance.
   ========================================================= */
.stack-section .stack-sub { max-width:640px; text-wrap:balance; }
.sp {
  display:grid; grid-template-columns:340px 1fr; gap:26px; align-items:start;
  padding:24px; background:var(--white); border:1px solid var(--border); border-radius:22px;
  box-shadow:var(--shadow-lg);
}
.sp__ctrl { display:flex; flex-direction:column; gap:18px; min-width:0; }
.sp-lbl { display:block; margin-bottom:7px; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); }
.sp-input {
  width:100%; padding:11px 14px; border:1.5px solid var(--border-hi); border-radius:10px;
  font:inherit; font-size:15px; color:var(--text); background:var(--white);
  transition:border-color .2s, box-shadow .2s;
}
.sp-input::placeholder { color:var(--text-3); }
.sp-input:focus { outline:none; border-color:var(--text); box-shadow:0 0 0 3px rgba(17,17,23,.08); }
.sp-row2 { display:grid; grid-template-columns:1.45fr 1fr; gap:10px; }
.sp-chips { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.sp-chip {
  position:relative; display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:9px 4px 8px; border:1.5px solid var(--border); border-radius:10px; cursor:pointer;
  text-align:center; font-size:11px; font-weight:600; line-height:1.15; color:var(--text-2); background:var(--white);
  transition:border-color .2s, background .2s, color .2s, transform .15s;
}
.sp-chip input { position:absolute; inset:0; margin:0; opacity:0; cursor:pointer; }
.sp-chip svg { width:18px; height:18px; color:var(--text-3); transition:color .2s; }
.sp-chip:hover { border-color:var(--border-hi); transform:translateY(-1px); }
.sp-chip:has(input:checked) { border-color:var(--text); background:var(--text); color:#fff; }
.sp-chip:has(input:checked) svg { color:#fff; }
.sp-chip:has(input:focus-visible) { outline:2px solid var(--text); outline-offset:2px; }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.sp-swatches { display:flex; gap:8px; flex-wrap:wrap; }
.sp-swatch {
  position:relative; width:26px; height:26px; border-radius:50%; background:var(--c); cursor:pointer;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.9), 0 0 0 1px rgba(0,0,0,.1); transition:transform .15s, box-shadow .15s;
}
.sp-swatch input { position:absolute; inset:0; margin:0; opacity:0; cursor:pointer; }
.sp-swatch:hover { transform:scale(1.1); }
.sp-swatch:has(input:checked) { box-shadow:inset 0 0 0 2px #fff, 0 0 0 2px var(--c); }
.sp-swatch:has(input:focus-visible) { outline:2px solid var(--text); outline-offset:3px; }
.sp-tools { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.sp-seg { display:inline-flex; padding:3px; border-radius:100px; background:rgba(17,17,23,.06); }
.sp-seg button { padding:6px 12px; border-radius:100px; font-size:12.5px; font-weight:600; color:var(--text-2); transition:background .2s, color .2s; }
.sp-seg button[aria-pressed="true"] { background:var(--white); color:var(--text); box-shadow:0 1px 3px rgba(0,0,0,.12); }
.sp-shuffle {
  display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:100px;
  border:1px solid var(--border-hi); font-size:12.5px; font-weight:600; color:var(--text-2);
  transition:background .2s, color .2s;
}
.sp-shuffle svg { width:14px; height:14px; }
.sp-shuffle:hover { color:var(--text); background:rgba(17,17,23,.04); }
.sp-shuffle:active svg { transform:rotate(90deg); }

/* aperçu */
.sp__stage { display:flex; flex-direction:column; gap:14px; min-width:0; }
.sp-view {
  position:relative; width:100%; aspect-ratio:720/500; --sp-scale:1;
  background:radial-gradient(ellipse at 50% 35%, rgba(17,17,23,.07), rgba(17,17,23,.02) 70%), #F3F3EF;
  border-radius:16px; overflow:hidden;
}
.sp-device {
  position:absolute; left:50%; top:50%; width:720px; height:500px;
  transform:translate(-50%,-50%) scale(var(--sp-scale)); transform-origin:center;
  display:flex; flex-direction:column;
  background:#fff; border-radius:12px; border:1px solid rgba(0,0,0,.08); overflow:hidden;
  box-shadow:0 2px 4px rgba(0,0,0,.06), 0 28px 64px rgba(0,0,0,.2);
  transition:width .35s var(--ease), height .35s var(--ease), border-radius .35s var(--ease);
}
.sp-chrome { flex:0 0 26px; display:flex; align-items:center; gap:5px; padding:0 10px; background:#F0F0ED; border-bottom:1px solid rgba(0,0,0,.07); }
.sp-chrome i { width:7px; height:7px; border-radius:50%; background:rgba(0,0,0,.14); }
.sp-chrome span { margin-left:8px; flex:1; max-width:260px; height:14px; border-radius:4px; background:#fff; font-size:8px; color:#8a8f9c; display:flex; align-items:center; justify-content:center; }
.sp-view.is-phone .sp-device { width:320px; height:640px; border-radius:34px; border:7px solid #1C1C22; box-shadow:0 2px 4px rgba(0,0,0,.1), 0 30px 70px rgba(0,0,0,.28); }
.sp-view.is-phone .sp-chrome { display:none; }
.sp-view.is-phone .sp-device::before { content:''; position:absolute; left:50%; top:8px; width:70px; height:6px; margin-left:-35px; border-radius:3px; background:#1C1C22; z-index:3; }

/* le mini-site : thèmes, typos, formes ───────────────────── */
.sp-site {
  --acc:#D4603C;
  --soft:color-mix(in srgb, var(--acc) 10%, var(--bg));
  --soft2:color-mix(in srgb, var(--acc) 24%, var(--bg));
  --bg:#fff; --fg:#15151a; --mute:#5b5f6e; --card:#fff; --line:rgba(0,0,0,.07); --alt:#F7F7F4;
  --rad:10px; --rad-s:7px; --fh:'Inter', system-ui, sans-serif; --fw:800; --ls:-.02em;
  position:relative; flex:1; display:flex; flex-direction:column; min-height:0;
  background:var(--bg); color:var(--fg); font-family:'Inter', system-ui, sans-serif; line-height:1.35;
  overflow:hidden; transition:opacity .18s;
}
.sp-site.t-warm  { --bg:#FBF7F0; --alt:#F4EEE3; }
.sp-site.t-rose  { --bg:#FCF6F7; --alt:#F6ECEF; }
.sp-site.t-grey  { --bg:#F4F5F7; --alt:#E9EBEF; --card:#fff; }
.sp-site.t-green { --bg:#F5F8F4; --alt:#EAF1E9; }
.sp-site.t-teal  { --bg:#F3F8F8; --alt:#E7F0F0; }
.sp-site.t-wood  { --bg:#F8F3EC; --alt:#F0E7DB; }
.sp-site.t-dark  { --bg:#121216; --fg:#fff; --mute:rgba(255,255,255,.62); --card:#1C1C22; --line:rgba(255,255,255,.1); --alt:#18181E; }
.sp-site.f-serif   { --fh:Georgia, 'Iowan Old Style', 'Palatino Linotype', serif; --fw:700; --ls:-.01em; }
.sp-site.f-display { --fh:'Plus Jakarta Sans', sans-serif; --fw:800; --ls:-.025em; }
.sp-site.r-sharp { --rad:4px;  --rad-s:3px; }
.sp-site.r-round { --rad:18px; --rad-s:100px; }
.sp-site.is-upper h4, .sp-site.is-upper .s-sec__t { text-transform:uppercase; letter-spacing:.02em; }
.sp-site.is-swap { opacity:0; }
.sp-site * { box-sizing:border-box; }
.sp-site > * { flex-shrink:0; }
.sp-site svg { display:block; }
.sp-site h4, .sp-site p { margin:0; }
.sp-site .sp-in { animation:spIn .5s var(--ease-out) calc(var(--i,0) * 70ms) both; }
@keyframes spIn { from { opacity:0; transform:translateY(8px); } }

/* éléments communs */
.s-btn { display:inline-flex; align-items:center; gap:5px; padding:7px 12px; border-radius:var(--rad-s); background:var(--acc); color:#fff; font-size:10px; font-weight:700; white-space:nowrap; line-height:1.2; }
.s-btn svg { width:10px; height:10px; }
.s-btn--ghost { background:transparent; color:var(--fg); border:1px solid color-mix(in srgb, var(--fg) 18%, transparent); }
.s-btn--phone { font-size:12px; padding:8px 13px; }
.s-ctas { display:flex; gap:8px; flex-wrap:wrap; }
.s-hero h4, .s-sec__t { font-family:var(--fh); font-weight:var(--fw); letter-spacing:var(--ls); }
.s-hero small { display:block; font-size:9.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--acc); margin-bottom:8px; }
.s-hero h4 { font-size:24px; line-height:1.12; margin-bottom:8px; text-wrap:balance; }
.s-hero h4.is-italic { font-style:italic; }
.s-hero p { font-size:10.5px; color:var(--mute); line-height:1.55; margin-bottom:12px; }
.s-note { display:inline-flex; align-items:center; gap:5px; margin-top:10px; font-size:9px; color:var(--mute); }
.s-note svg { width:10px; height:10px; color:var(--acc); }
.s-tile { display:block; border-radius:var(--rad); background:linear-gradient(135deg, var(--soft2), var(--soft)); position:relative; overflow:hidden; }
.s-tile::after { content:''; position:absolute; right:-30%; bottom:-40%; width:80%; height:80%; border-radius:50%; background:var(--acc); opacity:.1; }
.s-blob { position:absolute; border-radius:50%; background:var(--acc); opacity:.12; }
.s-blob--1 { width:160px; height:160px; right:-50px; top:-60px; }
.s-blob--2 { width:110px; height:110px; left:-40px; bottom:-50px; opacity:.09; }
.s-stars { display:inline-flex; gap:1px; color:#F59E0B; }
.s-stars svg { width:10px; height:10px; }
.s-card__ico { display:grid; place-items:center; width:24px; height:24px; border-radius:var(--rad-s); background:var(--soft); color:var(--acc); flex-shrink:0; }
.s-card__ico svg { width:13px; height:13px; }
.s-sec { padding:0 22px; }
.s-sec__t { font-size:12px; display:block; margin-bottom:8px; }

/* nav */
.s-nav { display:flex; align-items:center; gap:14px; padding:0 22px; height:46px; border-bottom:1px solid var(--line); }
.s-logo { display:flex; align-items:center; gap:8px; font-weight:800; font-size:12px; letter-spacing:-.01em; white-space:nowrap; min-width:0; }
.s-logo i { width:24px; height:24px; border-radius:var(--rad-s); background:var(--acc); color:#fff; font-style:normal; font-size:9px; font-weight:800; display:grid; place-items:center; flex-shrink:0; }
.s-logo b { overflow:hidden; text-overflow:ellipsis; max-width:230px; }
.f-serif .s-logo b { font-family:var(--fh); font-weight:700; font-size:13px; }
.s-links { display:flex; gap:14px; margin-left:auto; font-size:10.5px; font-weight:500; color:var(--mute); white-space:nowrap; }
.s-burger { display:none; }
.s-nav--center { justify-content:center; position:relative; }
.s-nav--center .s-logo { position:absolute; left:50%; transform:translateX(-50%); }
.s-nav--center .s-links { margin-left:0; margin-right:auto; }
.s-nav--center .s-btn { margin-left:auto; }
.s-nav--over { position:absolute; left:0; right:0; top:0; z-index:2; border-bottom:0; color:#fff; }
.s-nav--over .s-links { color:rgba(255,255,255,.8); }
.s-nav--over .s-btn { background:#fff; color:#15151a; }
.s-nav--over .s-logo i { background:#fff; color:#15151a; }
.s-nav--over ~ .s-hero--cover { padding-top:56px; }

/* héros : centré */
.s-hero--center { padding:26px 40px 18px; text-align:center; display:flex; flex-direction:column; align-items:center; background:linear-gradient(180deg, var(--soft), var(--bg) 90%); }
.s-hero--center h4 { font-size:26px; max-width:420px; }
.s-hero--center p { max-width:360px; }
.s-hero--center .s-ctas { justify-content:center; }
.s-avail { display:flex; align-items:center; gap:6px; margin-top:8px; flex-wrap:wrap; justify-content:center; }
.s-avail small { display:inline; margin:0 4px 0 0; font-size:8.5px; letter-spacing:.06em; color:var(--mute); }
.s-avail span { font-size:8.5px; font-weight:600; padding:4px 8px; border-radius:var(--rad-s); border:1px solid var(--line); background:var(--card); }
.s-avail span.is-on { background:var(--acc); color:#fff; border-color:var(--acc); }
/* héros : deux colonnes */
.s-hero--split { display:grid; grid-template-columns:1.15fr 1fr; gap:24px; padding:24px 22px 20px; align-items:center; background:linear-gradient(180deg, var(--soft), var(--bg) 90%); }
.s-hero--split.is-rev .s-hero__txt { order:2; }
.s-hero__img { position:relative; height:156px; border-radius:var(--rad); background:linear-gradient(135deg, var(--soft2), var(--soft)); overflow:hidden; display:grid; place-items:center; }
.s-hero__ico { width:60px; height:60px; color:var(--acc); position:relative; z-index:1; filter:drop-shadow(0 10px 18px color-mix(in srgb, var(--acc) 35%, transparent)); }
.s-tag { position:absolute; left:10px; bottom:10px; z-index:1; padding:4px 8px; border-radius:var(--rad-s); background:var(--card); color:var(--fg); font-size:8.5px; font-weight:700; box-shadow:0 4px 12px rgba(0,0,0,.12); }
.s-checks { list-style:none; margin:0 0 12px; padding:0; display:flex; flex-direction:column; gap:5px; }
.s-checks li { display:flex; align-items:center; gap:6px; font-size:10px; font-weight:600; }
.s-checks svg { width:12px; height:12px; padding:2px; border-radius:50%; background:var(--soft); color:var(--acc); }
.s-img--ba { display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:0; background:none; place-items:stretch; }
.s-ba { display:block; border-radius:var(--rad); position:relative; background:linear-gradient(160deg, #D9D2C5, #B9AE9B); }
.s-ba--b { background:linear-gradient(160deg, var(--soft2), color-mix(in srgb, var(--acc) 55%, #fff)); }
.s-ba em { position:absolute; left:8px; bottom:8px; font-style:normal; font-size:8.5px; font-weight:700; padding:3px 7px; border-radius:var(--rad-s); background:rgba(255,255,255,.9); color:#15151a; }
.s-img--wood { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:6px; padding:0; background:none; place-items:stretch; }
.s-img--wood .s-tile--w3 { grid-column:span 2; }
.s-img--wood .s-tile { background:linear-gradient(135deg, #D8B58E, #B98B5E); }
.s-img--wood .s-tile--w2 { background:linear-gradient(135deg, #E8D2B6, #CFAE85); }
.s-img--wood .s-tile--w3 { background:linear-gradient(135deg, #C89B6F, #9E6F47); }
/* héros : couverture */
.s-hero--cover { position:relative; padding:30px 26px 26px; min-height:196px; display:flex; align-items:flex-end; overflow:hidden;
  background:linear-gradient(160deg, color-mix(in srgb, var(--acc) 55%, #1a1a1f), #1a1a1f 80%); color:#fff; }
.s-hero--cover.is-light { background:linear-gradient(160deg, var(--soft2), var(--soft)); color:var(--fg); }
.s-hero--cover .s-blob--1 { width:260px; height:260px; right:-60px; top:-110px; opacity:.28; }
.s-hero--cover .s-blob--2 { width:160px; height:160px; left:30%; bottom:-90px; opacity:.18; }
.s-cover__ico { position:absolute; right:46px; top:34px; width:70px; height:70px; color:rgba(255,255,255,.7); }
.s-hero--cover.is-light .s-cover__ico { color:var(--acc); opacity:.9; }
.s-cover__txt { position:relative; z-index:1; max-width:380px; }
.s-hero--cover small { color:rgba(255,255,255,.75); }
.s-hero--cover.is-light small { color:var(--acc); }
.s-hero--cover h4 { font-size:28px; }
.s-hero--cover p { color:rgba(255,255,255,.75); }
.s-hero--cover.is-light p { color:var(--mute); }
.s-hero--cover .s-btn { background:#fff; color:#15151a; }
.s-hero--cover .s-btn--ghost { background:transparent; color:#fff; border-color:rgba(255,255,255,.4); }
.s-hero--cover.is-light .s-btn { background:var(--acc); color:#fff; }
.s-hero--cover.is-light .s-btn--ghost { background:transparent; color:var(--fg); border-color:color-mix(in srgb, var(--fg) 18%, transparent); }
/* héros : réservation */
.s-hero--booking { display:grid; grid-template-columns:1fr 230px; gap:22px; padding:26px 22px 20px; align-items:center; background:linear-gradient(180deg, var(--soft), var(--bg) 90%); }
.s-book { background:var(--card); border:1px solid var(--line); border-radius:var(--rad); padding:12px; box-shadow:0 14px 30px rgba(0,0,0,.08); display:flex; flex-direction:column; gap:8px; }
.s-book > b { display:flex; align-items:center; gap:6px; font-size:11px; }
.s-book > b svg { width:12px; height:12px; color:var(--acc); }
.s-book__svc { display:flex; justify-content:space-between; align-items:center; padding:7px 9px; border:1px solid var(--line); border-radius:var(--rad-s); font-size:9.5px; background:var(--bg); }
.s-book__svc i { font-style:normal; color:var(--mute); font-size:8px; }
.s-slots { display:grid; grid-template-columns:1fr 1fr; gap:5px; }
.s-slots span { font-size:8.5px; font-weight:600; text-align:center; padding:5px 4px; border-radius:var(--rad-s); border:1px solid var(--line); background:var(--bg); }
.s-slots span.is-on { background:var(--acc); color:#fff; border-color:var(--acc); }
.s-book .s-btn { justify-content:center; }
/* héros : urgence */
.s-hero--urgent { display:grid; grid-template-columns:1.3fr .8fr; gap:20px; padding:24px 22px 20px; align-items:center; background:linear-gradient(180deg, var(--soft), var(--bg) 90%); }
.s-badge { display:inline-flex; align-items:center; gap:6px; padding:4px 9px; border-radius:100px; background:#15151a; color:#fff; font-size:8.5px; font-weight:700; margin-bottom:10px; }
.s-badge i { width:6px; height:6px; border-radius:50%; background:#4A8A68; box-shadow:0 0 0 3px rgba(74,138,104,.25); }
.s-img--urgent { height:140px; }
.s-pulse { position:absolute; width:90px; height:90px; border-radius:50%; border:2px solid var(--acc); opacity:.35; animation:sPulse 2.2s ease-out infinite; }
@keyframes sPulse { 0% { transform:scale(.6); opacity:.5; } 100% { transform:scale(1.5); opacity:0; } }
/* héros : mosaïque (photographe) */
.s-hero--gallery { display:grid; grid-template-columns:1.2fr 1fr; gap:22px; padding:18px 22px 16px; align-items:center; }
.s-mosaic { display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(2,100px); gap:6px; }
.s-mosaic .s-tile { border-radius:var(--rad); background:linear-gradient(135deg, #3A3A42, #26262D); display:grid; place-items:center; }
.s-mosaic .s-tile::after { display:none; }
.s-mosaic .s-tile--m1 { grid-row:span 2; background:linear-gradient(160deg, #6B5A4E, #2E2A27); }
.s-mosaic .s-tile--m2 { background:linear-gradient(135deg, #8A7362, #4A3E35); }
.s-mosaic .s-tile--m3 { background:linear-gradient(135deg, color-mix(in srgb, var(--acc) 70%, #000), color-mix(in srgb, var(--acc) 35%, #000)); }
.s-mosaic .s-tile--m4 { background:linear-gradient(135deg, #5F6B74, #2C3238); }
.s-mosaic .s-tile--m5 { background:linear-gradient(135deg, #A8998A, #5E5348); }
.s-tile__ico { width:26px; height:26px; color:rgba(255,255,255,.85); }
.s-hero--gallery h4 { font-size:26px; }

/* sections */
.s-services { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding-top:4px; padding-bottom:12px; }
.s-card { padding:10px 12px; border-radius:var(--rad); border:1px solid var(--line); background:var(--card); box-shadow:0 4px 12px rgba(0,0,0,.04); min-width:0; }
.s-card .s-card__ico { margin-bottom:6px; }
.s-card b { display:block; font-size:10.5px; font-weight:700; }
.s-card small { display:block; font-size:9px; color:var(--mute); margin-top:2px; }
.s-products { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding-top:6px; padding-bottom:12px; }
.s-prod .s-tile { height:62px; margin-bottom:6px; }
.s-tile--p2 { filter:hue-rotate(-8deg) saturate(1.1); } .s-tile--p3 { filter:saturate(.8) brightness(1.04); } .s-tile--p4 { filter:hue-rotate(8deg); }
.s-prod b { display:block; font-size:10px; font-weight:700; }
.s-prod em { font-style:normal; font-size:9.5px; color:var(--acc); font-weight:700; }
.s-hours { display:flex; align-items:center; gap:8px; padding:9px 22px; background:var(--alt); font-size:9.5px; color:var(--mute); }
.s-hours svg { width:12px; height:12px; color:var(--acc); }
.s-hours b { color:var(--fg); }
.s-open { margin-left:auto; display:inline-flex; align-items:center; gap:5px; font-weight:700; color:#3E7A5A; }
.s-open i { width:6px; height:6px; border-radius:50%; background:#4A8A68; }
.s-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding-top:6px; padding-bottom:12px; }
.s-step { position:relative; padding:10px 12px 10px 40px; border-radius:var(--rad); border:1px solid var(--line); background:var(--card); }
.s-step i { position:absolute; left:11px; top:11px; width:20px; height:20px; border-radius:50%; background:var(--acc); color:#fff; font-style:normal; font-size:9.5px; font-weight:800; display:grid; place-items:center; }
.s-step b { display:block; font-size:10px; font-weight:700; }
.s-step small { display:block; font-size:8.5px; color:var(--mute); margin-top:2px; }
.s-reviews { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:10px 22px 12px; background:var(--alt); }
.s-rev { background:var(--card); border:1px solid var(--line); border-radius:var(--rad); padding:9px 11px; }
.s-rev em { display:block; font-style:italic; font-size:9.5px; margin:4px 0 3px; }
.s-rev small { font-size:8.5px; color:var(--mute); }
.s-list { padding-top:6px; padding-bottom:12px; }
.s-list__grid { display:grid; gap:4px 18px; }
.s-list--c2 .s-list__grid { grid-template-columns:1fr 1fr; }
.s-list--c3 .s-list__grid { grid-template-columns:1fr 1fr 1fr; }
.s-li { display:flex; align-items:baseline; gap:6px; font-size:10px; padding:5px 0; border-bottom:1px dashed var(--line); }
.s-li span { font-weight:600; }
.s-li i { flex:1; }
.s-li small { color:var(--mute); font-size:8.5px; margin-left:auto; }
.s-li em { font-style:normal; font-weight:800; color:var(--acc); white-space:nowrap; }
.s-menu { padding-top:14px; padding-bottom:14px; }
.s-menu__head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:6px; }
.s-menu__head .s-sec__t { font-size:15px; margin:0; }
.s-menu__head span { font-size:9px; font-weight:700; color:var(--acc); padding:3px 8px; border-radius:var(--rad-s); background:var(--soft); }
.s-menu .s-list__grid { grid-template-columns:1fr 1fr; gap:2px 24px; }
.s-menu .s-li { font-family:var(--fh); font-size:11px; border-bottom:1px dotted var(--line); padding:6px 0; }
.s-menu .s-li span { font-weight:600; }
.s-menu .s-li em { font-family:'Inter', system-ui, sans-serif; }
.s-gallery { display:grid; gap:8px; padding-top:6px; padding-bottom:12px; }
.s-gallery--c3 { grid-template-columns:repeat(3,1fr); }
.s-gallery--c6 { grid-template-columns:repeat(6,1fr); }
.s-gal .s-tile { height:70px; margin-bottom:5px; }
.s-gallery--c6 .s-gal .s-tile { height:58px; }
.s-gal b { display:block; font-size:9.5px; font-weight:700; }
.s-gal small { display:block; font-size:8.5px; color:var(--mute); }
.s-tile--g2 { filter:hue-rotate(-10deg); } .s-tile--g3 { filter:saturate(.75) brightness(1.04); } .s-tile--g4 { filter:hue-rotate(12deg) saturate(1.1); } .s-tile--g5 { filter:brightness(.96); } .s-tile--g6 { filter:saturate(.6) brightness(1.06); }
.s-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:6px 22px 10px; text-align:center; }
.s-stats > div { padding:8px 6px; border-radius:var(--rad); background:var(--soft); }
.s-stats b { display:block; font-family:var(--fh); font-size:16px; font-weight:800; color:var(--acc); letter-spacing:-.01em; }
.s-stats small { font-size:8.5px; color:var(--mute); }
.s-chips { display:flex; flex-wrap:wrap; gap:6px; padding:6px 22px 10px; }
.s-chips span { display:inline-flex; align-items:center; gap:5px; padding:4px 9px; border-radius:var(--rad-s); background:var(--card); border:1px solid var(--line); font-size:9px; font-weight:600; }
.s-chips svg { width:10px; height:10px; color:var(--acc); }
.s-band { display:flex; align-items:center; gap:10px; padding:9px 22px; background:var(--acc); color:#fff; font-size:10px; font-weight:600; }
.s-band svg { width:14px; height:14px; flex-shrink:0; }
.s-band span { flex:1; }
.s-band .s-btn { background:#fff; color:#15151a; }
.s-quote { padding:16px 22px 14px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:5px; }
.s-quote em { font-family:var(--fh); font-size:12.5px; font-style:italic; max-width:440px; line-height:1.4; }
.s-quote small { font-size:9px; color:var(--mute); }
.s-rows { display:flex; flex-direction:column; gap:5px; padding-top:6px; padding-bottom:6px; }
.s-row { display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:var(--rad); background:var(--card); border:1px solid var(--line); }
.s-row__txt { display:flex; align-items:baseline; gap:8px; min-width:0; }
.s-row b { font-size:10px; font-weight:700; white-space:nowrap; }
.s-row small { font-size:9px; color:var(--mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.s-row i { margin-left:auto; font-style:normal; color:var(--acc); font-weight:700; font-size:11px; }
.s-map { display:grid; grid-template-columns:150px 1fr; gap:12px; align-items:center; padding:6px 22px 8px; }
.s-map__tile { position:relative; height:54px; border-radius:var(--rad); background:linear-gradient(135deg, color-mix(in srgb, var(--acc) 9%, #EEF0EA), #E6E9E2); overflow:hidden; border:1px solid var(--line); }
.s-map__tile i { position:absolute; background:#fff; }
.s-map__tile i:nth-child(1) { left:-10%; right:-10%; top:46%; height:4px; transform:rotate(-6deg); }
.s-map__tile i:nth-child(2) { top:-10%; bottom:-10%; left:36%; width:4px; transform:rotate(8deg); }
.s-map__tile i:nth-child(3) { left:8%; top:10%; width:20%; height:26%; border-radius:3px; background:color-mix(in srgb, var(--acc) 28%, #fff); }
.s-map__tile::after { content:''; position:absolute; right:10%; bottom:10%; width:22%; height:30%; border-radius:3px; background:rgba(255,255,255,.55); }
.s-map__pin { position:absolute; left:50%; top:50%; width:18px; height:18px; margin:-12px 0 0 -9px; color:var(--acc); filter:drop-shadow(0 2px 3px rgba(0,0,0,.25)); }
.s-map__txt b { display:block; font-size:10px; }
.s-map__txt small { display:block; font-size:8.5px; color:var(--mute); margin-top:1px; }

/* pied de page */
.s-foot { margin-top:auto; display:flex; align-items:center; gap:16px; padding:0 22px; height:36px; border-top:1px solid var(--line); font-size:9px; color:var(--mute); white-space:nowrap; overflow:hidden; }
.s-foot > span { display:inline-flex; align-items:center; gap:5px; min-width:0; }
.s-foot svg { width:10px; height:10px; color:var(--acc); flex-shrink:0; }
.s-foot b { color:var(--fg); overflow:hidden; text-overflow:ellipsis; max-width:180px; }

/* version téléphone ───────────────────────────────────────── */
.is-phone .sp-site { padding-top:14px; }
.is-phone .s-nav { padding:0 14px; height:42px; gap:10px; }
.is-phone .s-nav--center .s-logo { position:static; transform:none; }
.is-phone .s-nav--center { justify-content:flex-start; }
.is-phone .s-nav--over { top:14px; }
.is-phone .s-nav--over ~ .s-hero--cover { padding-top:50px; }
.is-phone .s-logo b { max-width:190px; }
.is-phone .s-links, .is-phone .s-nav > .s-btn { display:none; }
.is-phone .s-burger { display:flex; flex-direction:column; gap:4px; margin-left:auto; }
.is-phone .s-burger i { display:block; width:16px; height:2px; border-radius:2px; background:currentColor; }
.is-phone .s-nav--over .s-burger i { background:#fff; }
.is-phone .s-sec { padding-left:16px; padding-right:16px; }
.is-phone .s-hero h4 { font-size:21px; }
.is-phone .s-hero--center { padding:18px 18px 14px; }
.is-phone .s-hero--center h4 { font-size:22px; }
.is-phone .s-avail span:nth-child(n+4) { display:none; }
.is-phone .s-hero--split, .is-phone .s-hero--urgent, .is-phone .s-hero--booking, .is-phone .s-hero--gallery { grid-template-columns:1fr; gap:12px; padding:14px 16px 12px; }
.is-phone .s-hero--split .s-hero__img { order:-1; height:96px; }
.is-phone .s-hero--split.is-rev .s-hero__txt { order:0; }
.is-phone .s-hero__ico { width:46px; height:46px; }
.is-phone .s-checks { gap:4px; margin-bottom:10px; }
.is-phone .s-img--ba { height:90px; }
.is-phone .s-img--wood { height:96px; grid-template-columns:1fr 1fr 1fr; }
.is-phone .s-img--wood .s-tile--w3 { grid-column:auto; }
.is-phone .s-hero--cover { min-height:180px; padding:20px 16px 16px; }
.is-phone .s-hero--cover h4 { font-size:23px; }
.is-phone .s-cover__ico { right:16px; top:52px; width:44px; height:44px; }
.is-phone .s-hero--booking .s-hero__txt .s-ctas { display:none; }
.is-phone .s-book { padding:10px; gap:6px; }
.is-phone .s-img--urgent { display:none; }
.is-phone .s-hero--gallery .s-mosaic { grid-template-rows:repeat(2,56px); order:-1; }
.is-phone .s-hero--gallery h4 { font-size:22px; }
.is-phone .s-services, .is-phone .s-steps { grid-template-columns:1fr; gap:6px; }
.is-phone .s-card { display:grid; grid-template-columns:auto 1fr; column-gap:9px; align-items:center; padding:7px 10px; }
.is-phone .s-card .s-card__ico { margin:0; grid-row:span 2; }
.is-phone .s-step { padding:7px 10px 7px 36px; }
.is-phone .s-step i { left:9px; top:8px; width:18px; height:18px; font-size:9px; }
.is-phone .s-products { grid-template-columns:1fr 1fr; gap:8px; }
.is-phone .s-prod .s-tile { height:44px; }
.is-phone .s-reviews { grid-template-columns:1fr; gap:6px; padding:8px 16px 10px; }
.is-phone .s-reviews .s-rev:nth-child(2) { display:none; }
.is-phone .s-list--c2 .s-list__grid, .is-phone .s-list--c3 .s-list__grid, .is-phone .s-menu .s-list__grid { grid-template-columns:1fr; gap:0; }
.is-phone .s-list .s-li:nth-child(n+5) { display:none; }
.is-phone .s-menu { padding-top:10px; padding-bottom:8px; }
.is-phone .s-gallery--c6 { grid-template-columns:repeat(3,1fr); }
.is-phone .s-gallery--c6 .s-gal:nth-child(n+4) { display:none; }
.is-phone .s-gallery--c3 .s-gal .s-tile { height:48px; }
.is-phone .s-gallery--c6 .s-gal .s-tile { height:48px; }
.is-phone .s-stats { padding:4px 16px 8px; gap:6px; }
.is-phone .s-stats b { font-size:14px; }
.is-phone .s-chips { padding:4px 16px 8px; }
.is-phone .s-band { padding:8px 16px; font-size:9.5px; flex-wrap:wrap; }
.is-phone .s-band span { flex:1 1 140px; }
.is-phone .s-quote { padding:10px 16px 8px; }
.is-phone .s-quote em { font-size:11.5px; }
.is-phone .s-rows { gap:4px; }
.is-phone .s-row__txt { flex-direction:column; gap:1px; }
.is-phone .s-map { grid-template-columns:90px 1fr; gap:10px; padding:6px 16px 8px; }
.is-phone .s-map__tile { height:46px; }
.is-phone .s-hours { padding:8px 16px; flex-wrap:wrap; font-size:9px; }
.is-phone .s-foot { flex-direction:column; align-items:flex-start; gap:3px; height:auto; padding:8px 16px 10px; margin-top:auto; }

/* sous l'aperçu */
.sp__go { display:flex; align-items:center; gap:12px 20px; flex-wrap:wrap; }
.sp__go .btn { padding:12px 22px; border-radius:100px; background:var(--text); color:#fff; box-shadow:0 1px 2px rgba(17,17,23,.25), 0 8px 20px rgba(17,17,23,.12); }
.sp__go .btn:hover { opacity:1; background:#26262E; }
.sp__go small { font-size:13px; color:var(--text-2); line-height:1.5; }
.sp__go small b { color:var(--text); font-weight:700; }

/* génération : état vide, séquence, machine à écrire ────────── */
.sp-site.is-empty { background:#FAFAF8; }
.s-empty { height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:30px; text-align:center; color:var(--text-3); }
.s-empty svg { width:30px; height:30px; color:var(--text-3); opacity:.6; margin-bottom:4px; }
.s-empty b { font-size:15px; font-weight:700; color:var(--text-2); }
.s-empty span { font-size:12px; max-width:260px; line-height:1.5; }
.is-phone .s-empty { padding:20px; }
.sp-site.is-hidden { opacity:0; }
.sp-gen {
  position:absolute; inset:0; z-index:5; display:grid; place-items:center; padding:16px;
  background:rgba(250,250,248,.86); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; visibility:hidden; transition:opacity .25s var(--ease), visibility 0s linear .25s;
}
.sp-view.is-gen .sp-gen { opacity:1; visibility:visible; transition-delay:0s; }
.sp-gen__card { width:min(100%, 330px); background:var(--white); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow-lg); padding:16px 18px 14px; }
.sp-gen__title { display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:700; margin:0 0 10px; }
.sp-gen__title i { width:14px; height:14px; border-radius:50%; border:2px solid rgba(17,17,23,.15); border-top-color:var(--text); animation:spSpin .8s linear infinite; flex-shrink:0; }
@keyframes spSpin { to { transform:rotate(360deg); } }
.sp-gen__bar { display:block; height:4px; border-radius:2px; background:rgba(17,17,23,.08); overflow:hidden; margin-bottom:12px; }
.sp-gen__bar b { display:block; height:100%; width:0; background:var(--text); border-radius:2px; transition:width .45s var(--ease); }
.sp-gen__steps { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.sp-gen__steps li { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-3); transition:color .2s; }
.sp-gen__steps li svg { width:14px; height:14px; padding:2px; border-radius:50%; border:1.5px solid var(--border-hi); color:transparent; flex-shrink:0; transition:background .2s, border-color .2s, color .2s; }
.sp-gen__steps li.is-doing { color:var(--text); }
.sp-gen__steps li.is-doing svg { border-color:var(--text); border-top-color:transparent; animation:spSpin .8s linear infinite; }
.sp-gen__steps li.is-done { color:var(--text-2); }
.sp-gen__steps li.is-done svg { background:var(--green); border-color:var(--green); color:#fff; animation:none; }
.s-hero h4.is-typing::after { content:'|'; font-weight:300; margin-left:1px; animation:spBlink .8s steps(1) infinite; }
@keyframes spBlink { 50% { opacity:0; } }
.sp-gen-btn { width:100%; justify-content:center; padding:13px 20px; border-radius:100px; background:var(--text); color:#fff; font-size:14.5px; box-shadow:0 1px 2px rgba(17,17,23,.25), 0 8px 20px rgba(17,17,23,.12); }
.sp-gen-btn:hover { opacity:1; background:#26262E; }
.sp-gen-btn svg { width:15px; height:15px; }
.sp.is-live .sp-gen-btn { background:transparent; color:var(--text); border:1.5px solid var(--border-hi); box-shadow:none; }
.sp.is-live .sp-gen-btn:hover { background:rgba(17,17,23,.04); }
.sp-hint { display:block; margin-top:6px; font-size:11.5px; color:var(--text-3); }
.sp.has-metier .sp-hint { visibility:hidden; }
.sp-chips.is-shake { animation:spShake .45s var(--ease); }
@keyframes spShake { 0%,100% { transform:none; } 20% { transform:translateX(-5px); } 40% { transform:translateX(5px); } 60% { transform:translateX(-3px); } 80% { transform:translateX(3px); } }
.sp__meta { display:flex; align-items:center; justify-content:space-between; gap:10px 16px; flex-wrap:wrap; min-height:30px; }
.sp__label { display:flex; flex-direction:column; gap:1px; font-size:12px; color:var(--text-3); }
.sp__label b { font-weight:600; color:var(--text-2); }
.sp__tip { display:none; font-size:11.5px; }
.sp.is-live .sp__tip { display:block; }
.sp__acts { display:flex; gap:6px; flex-wrap:wrap; }
.sp-alt--dice svg { width:14px; height:14px; }
.sp-alt { display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:100px; border:1px solid var(--border-hi); font-size:12.5px; font-weight:600; color:var(--text-2); transition:background .2s, color .2s, opacity .2s; }
.sp-alt svg { width:13px; height:13px; }
.sp-alt:hover { color:var(--text); background:rgba(17,17,23,.04); }
.sp:not(.is-live) .sp__label, .sp:not(.is-live) #spAlt, .sp:not(.is-live) .sp__go { opacity:.45; pointer-events:none; }
.sp__esq { font-size:12px; color:var(--text-3); line-height:1.5; width:100%; }
@media (prefers-reduced-motion:reduce) {
  .sp-gen__title i, .sp-gen__steps li.is-doing svg, .s-hero h4.is-typing::after, .sp-chips.is-shake { animation:none; }
}

@media (max-width:1024px) {
  .sp { grid-template-columns:300px 1fr; gap:20px; padding:20px; }
}
@media (max-width:900px) {
  .sp { grid-template-columns:1fr; }
}
@media (max-width:768px) {
  .sp { padding:16px; border-radius:16px; }
  .sp-row2 { grid-template-columns:1fr; }
  .sp-view.is-phone { aspect-ratio:auto; height:560px; }
}
@media (prefers-reduced-motion:reduce) {
  .sp-site .sp-in, .s-pulse { animation:none; }
  .sp-device, .sp-site { transition:none; }
}

/* =========================================================
   TARIF — mention « sans engagement » dans chaque carte de prix
   ========================================================= */
.tarif-free {
  display:flex; align-items:center; gap:7px;
  font-size:12.5px; font-weight:600; color:var(--green);
  margin-top:-4px;
}
.tarif-free svg { width:13px; height:13px; flex-shrink:0; }