/* ================= Meltzaron — landing (light · luxe) ================= */
:root {
  --bg: #ffffff;
  --bg-soft: #faf8f2;
  --ink: #101015;
  --ink-2: #35353d;
  --muted: #7c7c86;
  --gold: #c8a35f;
  --gold-deep: #a87a2c;
  --gold-light: #e7c87a;
  --line: rgba(16, 16, 21, 0.08);
  --line-2: rgba(16, 16, 21, 0.14);
  --grad-gold: linear-gradient(115deg, #e7c87a 0%, #c8a35f 42%, #a87a2c 100%);
  --grad-sheen: linear-gradient(115deg, #b98a34, #edd18f 45%, #b98a34);
  --maxw: 1180px;
  --r: 22px;
  --ease: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-2: cubic-bezier(0.16, 1, 0.3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: "General Sans", system-ui, -apple-system, sans-serif;
  background: var(--bg); color: var(--ink); line-height: 1.6;
  overflow-x: hidden; -webkit-font-smoothing: antialiased; cursor: default;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: rgba(200, 163, 95, 0.28); }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 26px; }
h1, h2, h3, h4 { font-family: "Clash Display", "General Sans", sans-serif; font-weight: 600; line-height: 1.05; letter-spacing: -0.015em; }

.grad {
  background: var(--grad-gold); background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  animation: sheen 6s linear infinite;
}
@keyframes sheen { to { background-position: 200% center; } }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 22px;
}
.eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--grad-gold);
  box-shadow: 0 0 0 0 rgba(200, 163, 95, 0.5); animation: pulse 2.4s infinite;
}
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(200,163,95,.5); } 70% { box-shadow: 0 0 0 9px rgba(200,163,95,0); } 100% { box-shadow: 0 0 0 0 rgba(200,163,95,0); } }

/* ---------- Ambient background ---------- */
.bg-grain { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5;
  background-image: radial-gradient(rgba(16,16,21,0.04) 1px, transparent 1px); background-size: 3.5px 3.5px; }
.orb { position: fixed; border-radius: 50%; filter: blur(60px); z-index: 0; pointer-events: none; opacity: 0.55; }
.orb-1 { width: 620px; height: 620px; top: -180px; right: -160px;
  background: radial-gradient(closest-side, rgba(231,200,122,0.55), rgba(231,200,122,0)); animation: drift1 22s ease-in-out infinite; }
.orb-2 { width: 520px; height: 520px; top: 40%; left: -200px;
  background: radial-gradient(closest-side, rgba(200,163,95,0.4), rgba(200,163,95,0)); animation: drift2 26s ease-in-out infinite; }
.orb-3 { width: 460px; height: 460px; bottom: -160px; right: 10%;
  background: radial-gradient(closest-side, rgba(214,180,120,0.35), rgba(214,180,120,0)); animation: drift1 30s ease-in-out infinite reverse; }
@keyframes drift1 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-40px, 40px); } }
@keyframes drift2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(50px, -30px); } }
main, .nav, .footer { position: relative; z-index: 1; }

/* ---------- Cursor glow ---------- */
.cursor-glow { position: fixed; top: 0; left: 0; width: 380px; height: 380px; border-radius: 50%; z-index: 2;
  pointer-events: none; transform: translate(-50%, -50%); mix-blend-mode: multiply; opacity: 0; transition: opacity 0.4s;
  background: radial-gradient(closest-side, rgba(200,163,95,0.14), rgba(200,163,95,0) 70%); }

/* ---------- Buttons ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 50px; padding: 0 26px; border-radius: 999px; font-family: "Clash Display", "General Sans", sans-serif; font-weight: 600; font-size: 15px;
  cursor: pointer; border: none; overflow: hidden;
  transition: transform 0.3s var(--ease-2), box-shadow 0.3s var(--ease-2); }
/* will-change appliqué seulement pendant l'interaction (pas en permanence) : un calque GPU
   composé en continu sur un bord arrondi fin produit un liseré flou/grisâtre sur Chrome/Safari
   — visible même sans hover puisque will-change était posé de façon statique auparavant. */
.btn:hover, .btn:focus-visible { will-change: transform; }
.btn-gold { color: #221803; background: linear-gradient(180deg, #edcf88 0%, #d4ac60 55%, #c9a352 100%);
  box-shadow: 0 14px 28px -14px rgba(200,163,95,0.6), inset 0 1px 0 rgba(255,255,255,0.45); }
.btn-gold::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.55) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform 0.7s var(--ease); }
.btn-gold:hover::after { transform: translateX(120%); }
.btn-gold:hover { box-shadow: 0 16px 40px -10px rgba(200,163,95,0.85); }
.btn-lg { height: 58px; padding: 0 38px; font-size: 16.5px; }

/* ---------- Nav ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 60; transition: all 0.4s var(--ease); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 80px; }
.nav.scrolled { background: rgba(255,255,255,0.95); backdrop-filter: blur(16px) saturate(1.4); border-bottom: 1px solid var(--line); }
.nav.scrolled .nav-inner { height: 68px; }
.brand { display: flex; align-items: center; }
.brand-logo { height: 48px; width: auto; display: block; }
.nav.scrolled .brand-logo { height: 42px; transition: height 0.4s var(--ease); }
.nav-links { display: flex; align-items: center; gap: 28px; }

/* language switch */
.lang-switch { display: inline-flex; padding: 3px; border: 1px solid var(--line-2); border-radius: 999px; background: rgba(16,16,21,0.03); }
.lang-switch button { border: 0; background: none; cursor: pointer; font-family: "General Sans"; font-weight: 600; font-size: 13px;
  color: var(--muted); padding: 5px 12px; border-radius: 999px; letter-spacing: 0.03em; transition: color 0.25s var(--ease), background 0.25s var(--ease); }
.lang-switch button.active { color: #221803; background: var(--grad-gold); box-shadow: 0 4px 12px -6px rgba(200,163,95,0.7); }
.nav-links > a:not(.btn) { font-size: 15px; font-weight: 500; color: var(--ink-2); position: relative; }
.nav-links > a:not(.btn)::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px; background: var(--grad-gold); transition: width 0.3s var(--ease); }
.nav-links > a:not(.btn):hover::after { width: 100%; }
.nav-cta { height: 44px; padding: 0 22px; }
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { width: 24px; height: 2px; background: var(--ink); border-radius: 2px; transition: 0.3s var(--ease); }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero : texte centré en haut, téléphones inclinés en dessous ---------- */
.hero { padding: 150px 0 40px; }
.hero-inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.hero-copy { display: flex; flex-direction: column; align-items: center; max-width: 720px; }
.hero-title { font-size: clamp(48px, 7.4vw, 92px); font-weight: 600; margin-bottom: 26px; }
.hero-title .line { display: block; overflow: hidden; padding-bottom: 0.08em; }
.hero-title .w { display: inline-block; transform: translateY(115%); opacity: 0; transition: transform 1.1s var(--ease), opacity 1.1s var(--ease); }
body.loaded .hero-title .w { transform: none; opacity: 1; }
.lead { font-size: clamp(17px, 2vw, 20px); color: var(--muted); max-width: 500px; margin: 0 auto 34px;
  opacity: 0; transform: translateY(20px); transition: 0.9s var(--ease) 0.5s; }
.lead strong { color: var(--ink); font-weight: 600; }
body.loaded .lead { opacity: 1; transform: none; }
.hero-actions { display: flex; flex-direction: column; align-items: center;
  opacity: 0; transform: translateY(20px); transition: 0.9s var(--ease) 0.66s; }
body.loaded .hero-actions { opacity: 1; transform: none; }
.hero-badges { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px; margin-top: 30px; }
.hero-badges li { position: relative; padding-left: 22px; font-size: 14px; color: var(--muted); font-weight: 500; }
.hero-badges li::before { content: ""; position: absolute; left: 0; top: 6px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--grad-gold); box-shadow: 0 0 12px rgba(200,163,95,0.5); }

/* store buttons */
.store-row { display: flex; gap: 14px; flex-wrap: wrap; }
.store-row.center { justify-content: center; }
.store-btn { display: inline-flex; align-items: center; gap: 12px; height: 58px; padding: 0 22px;
  background: var(--ink); border-radius: 15px; color: #fff;
  transition: transform 0.3s var(--ease-2), box-shadow 0.3s var(--ease-2); box-shadow: 0 12px 30px -14px rgba(16,16,21,0.6); }
.store-btn:hover, .store-btn:focus-visible { transform: translateY(-3px); box-shadow: 0 20px 40px -16px rgba(16,16,21,0.7); will-change: transform; }
.store-ico { width: 26px; height: 26px; flex-shrink: 0; }
.store-txt { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.store-txt small { font-size: 11px; color: rgba(255,255,255,0.7); font-weight: 500; }
.store-txt strong { font-size: 17px; font-weight: 600; font-family: "Clash Display"; }

/* Vrai cadre iPhone (asset officiel Apple Design Resources, PNG avec fenêtre d'écran
   transparente) : la capture est posée dessous, précisément alignée sur le trou d'écran,
   le cadre (verre, Dynamic Island, boutons, reflets) est posé par-dessus. Coordonnées du
   trou d'écran mesurées sur le PNG source (1470×3000) : x 75–1395, y 66–2934. */
.phone-halo { position: absolute; width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(200,163,95,0.35), rgba(200,163,95,0) 70%); filter: blur(10px); }
.phone { position: relative; width: 300px; aspect-ratio: 1470 / 3000; }
.phone-bezel { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.phone img.phone-shot {
  position: absolute; left: 5.10%; top: 2.2%; width: 89.80%; height: 95.6%;
  object-fit: cover; object-position: top center; border-radius: 11% / 8%; z-index: 1;
}

/* ---------- Marquee ---------- */
.marquee { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 26px 0; overflow: hidden;
  background: var(--bg-soft); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: inline-flex; align-items: center; gap: 34px; white-space: nowrap; animation: marquee 26s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span { font-family: "Clash Display"; font-weight: 600; font-size: clamp(26px, 4vw, 42px);
  -webkit-text-stroke: 1.2px var(--gold); color: transparent; letter-spacing: 0.01em; }
.marquee-track b { color: var(--gold); font-size: 14px; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Stats ---------- */
.stats { padding: 74px 0; }
.stats-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stat { text-align: center; }
.stat-num { display: block; font-family: "Clash Display"; font-weight: 600; font-size: clamp(34px, 4.6vw, 54px);
  background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stat-label { font-size: 13.5px; color: var(--muted); font-weight: 500; letter-spacing: 0.01em; }

/* ---------- Section head ---------- */
.section-head { text-align: center; max-width: 720px; margin: 0 auto 66px; }
.section-head .eyebrow { justify-content: center; }
.section-head h2 { font-size: clamp(34px, 4.8vw, 56px); margin-bottom: 18px; }
.section-head p { color: var(--muted); font-size: 18px; }

/* ---------- Features : scrollytelling façon template Payer/Framer ----------
   Téléphone sticky au centre, immobile ; seul l'écran (les .fs-shot empilés en
   absolute) change par crossfade + léger zoom quand un nouveau .fs-step devient
   actif. Le texte à droite est resynchronisé sur la même étape. Activation
   pilotée en JS par IntersectionObserver (bande centrée), pas de calcul de
   scroll manuel — natif, fluide, jamais saccadé. */
.features-scroll { padding: 40px 0; }
.fs-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; max-width: 1040px; }
/* Le téléphone alterne de côté à chaque étape : .fs-sticky reste en 1re colonne
   dans le flux (pour que le sticky se calcule sur cette position), et se
   décale visuellement d'une colonne vers la droite en glissant (transform,
   transitionnable) quand .fs-layout.alt est actif ; .fs-steps fait le trajet
   inverse pour occuper la colonne laissée libre. */
.fs-sticky { position: sticky; top: 18vh; height: min-content; display: flex; justify-content: center;
  align-self: start; transition: transform 0.8s var(--ease); will-change: transform; }
.fs-layout.alt .fs-sticky { transform: translateX(calc(100% + 64px)); }
.fs-steps { transition: transform 0.8s var(--ease); will-change: transform; }
.fs-layout.alt .fs-steps { transform: translateX(calc(-100% - 64px)); }
.fs-float { animation: fsFloat 7s ease-in-out infinite; will-change: transform; }
@keyframes fsFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(0.6deg); }
}
.fs-sticky .phone { width: 258px; }
.fs-sticky .phone-halo { position: absolute; width: 340px; height: 340px; }
.fs-sticky .phone img.fs-shot {
  opacity: 0; transform: scale(1.03);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.fs-sticky .phone img.fs-shot.active { opacity: 1; transform: scale(1); z-index: 1; }

.fs-steps { display: flex; flex-direction: column; gap: 46vh; padding: 30vh 0; }
.fs-step { opacity: 0; transform: translateY(20px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.fs-step.active { opacity: 1; transform: none; }
.fs-step > * { opacity: 0; transform: translateY(20px); transition: opacity 0.55s var(--ease), transform 0.55s var(--ease); }
.fs-step.active > * { opacity: 1; transform: none; }
.fs-step.active > *:nth-child(1) { transition-delay: 0.05s; }
.fs-step.active > *:nth-child(2) { transition-delay: 0.15s; }
.fs-step.active > *:nth-child(3) { transition-delay: 0.25s; }
.fs-step.active > *:nth-child(4) { transition-delay: 0.35s; }
.fs-step h3 { font-size: clamp(28px, 3.4vw, 40px); margin-bottom: 16px; }
.fs-step p { color: var(--muted); font-size: 17.5px; margin-bottom: 24px; max-width: 460px; }
.ticks { list-style: none; display: flex; flex-direction: column; gap: 13px; }
.ticks li { position: relative; padding-left: 34px; font-size: 15.5px; font-weight: 500; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%;
  background: var(--grad-gold); box-shadow: 0 4px 12px -4px rgba(200,163,95,0.7); }
.ticks li::after { content: ""; position: absolute; left: 7px; top: 6px; width: 7px; height: 4px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }

/* ---------- How ---------- */
.how { padding: 90px 0; background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.step { position: relative; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 36px 30px;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease); }
.step:hover { transform: translateY(-8px); box-shadow: 0 30px 60px -30px rgba(16,16,21,0.25); border-color: var(--line-2); }
.step-n { font-family: "Clash Display"; font-weight: 600; font-size: 46px;
  background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.step h4 { font-size: 22px; margin: 12px 0 10px; }
.step p { color: var(--muted); font-size: 15.5px; }

/* ---------- Feature grid ---------- */
.grid-section { padding: 100px 0; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.g-card { position: relative; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 32px 30px;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); overflow: hidden; }
.g-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: var(--grad-gold); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.4s var(--ease); }
.g-card:hover { transform: translateY(-8px); box-shadow: 0 30px 60px -30px rgba(16,16,21,0.28); }
.g-card:hover::before { opacity: 1; }
.g-ico { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 15px; margin-bottom: 18px; color: var(--gold-deep);
  background: rgba(200,163,95,0.12); border: 1px solid rgba(200,163,95,0.3); }
.g-ico svg { width: 26px; height: 26px; }
.g-card h4 { font-size: 20px; margin-bottom: 8px; }
.g-card p { color: var(--muted); font-size: 15px; }

/* ---------- Pricing ---------- */
.pricing { padding: 40px 0 100px; }
.pricing-inner { position: relative; text-align: center; max-width: 820px; margin: 0 auto; padding: 76px 44px;
  border-radius: 32px; overflow: hidden; border: 1px solid var(--line-2);
  background: radial-gradient(120% 130% at 50% 0%, rgba(231,200,122,0.28), rgba(255,255,255,0) 62%), #fffdf8; }
.pricing-inner h2 { font-size: clamp(36px, 5vw, 60px); margin-bottom: 14px; }
.pricing-inner p { color: var(--muted); font-size: 18px; margin-bottom: 24px; }
.pro-perks { list-style: none; padding: 0; margin: 8px auto 24px; max-width: 640px; text-align: left;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px; }
.pro-perks li { position: relative; padding-left: 28px; color: var(--text); font-size: 16px; line-height: 1.5; }
.pro-perks li::before { content: ""; position: absolute; left: 0; top: 8px; width: 16px; height: 16px;
  border-radius: 50%; background: linear-gradient(135deg, #d8b46f, #a87a2c);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.9); }
.pro-note { color: var(--muted); font-size: 14px; margin: 4px auto 24px; max-width: 520px; }
@media (max-width: 720px) { .pro-perks { grid-template-columns: 1fr; } }
[dir="rtl"] .pro-perks li { padding-left: 0; padding-right: 28px; }
[dir="rtl"] .pro-perks li::before { left: auto; right: 0; }

/* ---------- Download ---------- */
.download { padding: 30px 0 120px; }
.download-inner { text-align: center; }
.dl-mark { width: 92px; height: 92px; border-radius: 22px; margin: 0 auto 26px; box-shadow: 0 26px 60px -18px rgba(200,163,95,0.6); }
.download h2 { font-size: clamp(36px, 5vw, 62px); margin-bottom: 12px; }
.download p { color: var(--muted); font-size: 18px; margin-bottom: 36px; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line); padding: 70px 0 36px; background: var(--bg-soft); }
.footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.footer-logo { height: 52px; width: auto; }
.footer-tag { color: var(--muted); font-size: 14.5px; margin-top: 8px; max-width: 260px; }
.footer-col h5 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); margin-bottom: 16px; font-weight: 600; }
.footer-col a { display: block; color: var(--ink-2); font-size: 15px; margin-bottom: 11px; transition: color 0.2s; }
.footer-col a:hover { color: var(--gold-deep); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 50px; padding-top: 24px;
  border-top: 1px solid var(--line); color: var(--muted); font-size: 13.5px; }
.footer-heb { font-family: "Clash Display"; font-size: 22px; color: var(--gold-deep); }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(34px); filter: blur(6px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease), filter 0.9s var(--ease); }
.reveal.in { opacity: 1; transform: none; filter: none; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .cursor-glow { display: none; }
  .nav-links { position: fixed; inset: 68px 0 auto 0; flex-direction: column; gap: 4px; padding: 22px 26px 30px;
    background: rgba(255,255,255,0.97); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line);
    transform: translateY(-160%); transition: transform 0.45s var(--ease); align-items: stretch; }
  .nav-links.open { transform: none; }
  .nav-links > a:not(.btn) { padding: 12px 4px; font-size: 17px; }
  .nav-cta { height: 50px; margin-top: 8px; }
  .nav-toggle { display: flex; }
  .hero { padding: 128px 0 50px; }
  .hero-inner { grid-template-columns: 1fr; text-align: center; gap: 8px; }
  .lead, .hero-badges { margin-left: auto; margin-right: auto; }
  .hero-badges, .store-row { justify-content: center; }
  .stats-inner { grid-template-columns: repeat(2, 1fr); gap: 34px 20px; }
  .fs-layout { grid-template-columns: 1fr; gap: 0; text-align: center; }
  /* Le sticky-scroll (téléphone épinglé pendant que le texte défile) ne
     fonctionne bien qu'avec assez de largeur pour les deux colonnes côte à
     côte ; sur mobile le téléphone reste statique en haut de la section (son
     écran continue de changer au scroll), pour éviter tout chevauchement
     avec le texte qui suit. */
  .fs-sticky, .fs-layout.alt .fs-sticky, .fs-steps, .fs-layout.alt .fs-steps { transform: none; }
  .fs-sticky { position: static; margin-bottom: 30px; }
  .fs-steps { gap: 12px; padding: 0; }
  .fs-step p { margin-left: auto; margin-right: auto; }
  .ticks { display: inline-flex; text-align: left; }
  .steps, .grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 30px; }
}
@media (max-width: 520px) {
  .container { padding: 0 18px; }
  .hero-title { font-size: 46px; }
  .store-btn { flex: 1; min-width: 0; justify-content: center; }
  .footer-inner { grid-template-columns: 1fr; }
  .pricing-inner { padding: 54px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
  .reveal, .hero-title .w, .lead, .hero-actions { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* ───────── Page Assistance ───────── */
.support-main { padding: 140px 0 64px; max-width: 760px; margin: 0 auto; }
.support-title { font-family: "Clash Display", sans-serif; font-size: clamp(2rem, 5vw, 2.6rem); letter-spacing: -0.02em; margin: 0 0 8px; }
.support-lede { color: var(--muted); margin: 0 0 36px; font-size: 1.05rem; }
.support-card { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 18px; padding: 22px 26px; margin-bottom: 14px; }
.support-card h2 { font-size: 1.05rem; margin: 0 0 6px; }
.support-card p { margin: 0; color: var(--ink-2); line-height: 1.7; }
.support-card a { color: var(--gold-deep); font-weight: 600; text-decoration: none; }
.support-card a:hover { text-decoration: underline; }
.support-faq-title { font-family: "Clash Display", sans-serif; font-size: 1.35rem; letter-spacing: -0.01em; margin: 44px 0 10px; }
.support-faq { border-bottom: 1px solid var(--line); padding: 14px 0; }
.support-faq summary { cursor: pointer; font-weight: 600; color: var(--ink); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.support-faq summary::-webkit-details-marker { display: none; }
.support-faq summary::after { content: "+"; color: var(--gold); font-size: 1.3rem; font-weight: 400; flex-shrink: 0; }
.support-faq[open] summary::after { content: "–"; }
.support-faq p { color: var(--ink-2); margin: 10px 0 4px; line-height: 1.7; }
.support-faq a { color: var(--gold-deep); font-weight: 600; text-decoration: none; }

/* ───────── RTL (hébreu) ───────── */
[dir="rtl"] body, [dir="rtl"] .container { text-align: right; }
[dir="rtl"] .nav-links, [dir="rtl"] .footer-inner, [dir="rtl"] .footer-col { direction: rtl; }
[dir="rtl"] .support-faq summary { flex-direction: row; }

/* ───────── Nouveau logo (monogramme + wordmark côte à côte) ───────── */
.brand { gap: 10px; }
.brand-mark { height: 54px; width: auto; display: block; }
.nav.scrolled .brand-mark { height: 44px; transition: height 0.4s var(--ease); }
.brand-logo { height: 22px; width: auto; max-width: none; }
.nav.scrolled .brand-logo { height: 19px; }
.footer-logo { height: 26px; width: auto; max-width: none; }