/* PayTick : feuille de style commune à la landing et à la politique de confidentialité.

   Les couleurs sont celles de Shared/Theme.swift, **variante claire uniquement** : l'app
   se montre en clair sur les captures, sur l'App Store et dans les mockups de cette page,
   et un site qui bascule en noir chez la moitié des visiteurs ne ressemblerait plus à ce
   qu'ils vont installer. Une valeur corrigée ici doit l'être là-bas aussi. */

:root {
  color-scheme: light;

  --bg:            #FAFAF8;
  --surface:       #FFFFFF;
  --surface-alt:   #F2F2EE;
  --separator:     #E6E6E1;
  --text:          #14171A;
  --text-2:        #6B7280;
  --text-3:        #9CA3AF;
  --accent:        #1FA971;
  --accent-soft:   #E8F6EF;
  --resting:       #8B5CF6;
  --resting-soft:  #F1EBFE;

  --radius:    20px;
  --radius-lg: 32px;
  --radius-sm: 12px;
  --pad:       20px;

  --shadow:    0 1px 2px rgba(20, 23, 26, .04), 0 8px 24px rgba(20, 23, 26, .05);
  --shadow-lg: 0 2px 4px rgba(20, 23, 26, .04), 0 24px 60px rgba(20, 23, 26, .10);

  --font: "Nunito", -apple-system, BlinkMacSystemFont, "SF Pro Rounded", "Segoe UI",
          system-ui, sans-serif;

  /* La courbe de toutes les animations de la page : sortie franche, arrivée posée.
     C'est celle qui ressemble le plus aux ressorts de SwiftUI. */
  --ease: cubic-bezier(.22, 1, .36, 1);

  --max: 1080px;
}

/* Les angles du mockup se déplacent à la souris : les enregistrer permet de les faire
   *glisser* plutôt que sauter d'une position à l'autre. */
@property --tx { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --ty { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: var(--accent); }

h1, h2, h3 { line-height: 1.15; letter-spacing: -.02em; margin: 0; font-weight: 800; }
h1 { font-size: clamp(2.3rem, 6vw, 3.9rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.7rem); }
h3 { font-size: 1.2rem; font-weight: 700; }
p  { margin: 0; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: 24px; }
.section { padding: clamp(64px, 10vw, 120px) 0; }
.section.alt { background: var(--surface-alt); }
.center { text-align: center; }
.lead { font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--text-2); }
.muted { color: var(--text-2); }
.small { font-size: .92rem; }

/* ---------- En-tête ---------- */

.nav {
  position: sticky; top: 0; z-index: 30;
  backdrop-filter: saturate(180%) blur(14px);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, background .25s ease;
}
.nav.is-stuck {
  border-bottom-color: var(--separator);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
}
.nav .wrap { display: flex; align-items: center; gap: 16px; height: 68px; transition: height .3s var(--ease); }
.nav.is-stuck .wrap { height: 58px; }

/* La barre d'avancement de la lecture, collée sous l'en-tête. */
.nav-progress {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--accent), var(--resting));
  border-radius: 0 2px 2px 0;
  transition: width .12s linear;
}

.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; color: var(--text); text-decoration: none; letter-spacing: -.02em; }
.brand img { width: 34px; height: 34px; border-radius: 9px; box-shadow: var(--shadow); transition: transform .4s var(--ease); }
.brand:hover img { transform: rotate(-6deg) scale(1.06); }

.nav-links { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.nav-links > a { color: var(--text-2); text-decoration: none; font-size: .95rem; font-weight: 600; position: relative; }
.nav-links > a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
  background: var(--accent); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.nav-links > a:not(.btn):hover { color: var(--text); }
.nav-links > a:not(.btn):hover::after { transform: scaleX(1); }
.nav-links > a.btn-primary { color: #fff; }
.nav-links > a.btn-ghost { color: var(--text); }
@media (max-width: 860px) { .nav-links a.hide-sm { display: none; } }

/* ---------- Bascule de langue ---------- */

.lang {
  display: inline-flex; gap: 3px; padding: 3px;
  background: var(--surface-alt); border: 1px solid var(--separator);
  border-radius: 999px;
}
.lang .flag {
  border: 0; padding: 4px; margin: 0; cursor: pointer; background: transparent;
  border-radius: 999px; line-height: 0;
  transition: background .25s ease, transform .25s var(--ease);
}
.lang .flag svg {
  width: 26px; height: 18px; display: block;
  border-radius: 3px; object-fit: cover;
  box-shadow: 0 0 0 1px rgba(20, 23, 26, .12);
  opacity: .48; filter: saturate(.55);
  transition: opacity .25s ease, filter .25s ease, transform .25s var(--ease);
}
.lang .flag:hover svg { opacity: .85; filter: saturate(1); }
.lang .flag:hover { transform: translateY(-1px); }
.lang .flag[aria-pressed="true"] { background: var(--surface); box-shadow: var(--shadow); }
.lang .flag[aria-pressed="true"] svg { opacity: 1; filter: none; transform: scale(1.04); }
.lang .flag:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Boutons ---------- */

.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 24px; border-radius: 999px;
  font: inherit; font-weight: 700; font-size: 1rem;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: transform .25s var(--ease), box-shadow .3s ease, background .2s ease;
}
.btn > * { position: relative; z-index: 1; }
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, .38), transparent 75%);
  transform: translateX(-120%);
  transition: transform .75s var(--ease);
}
.btn:hover::after { transform: translateX(120%); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-sm { padding: 9px 18px; font-size: .95rem; }

.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 30%, transparent); }
.btn-primary:hover { box-shadow: 0 14px 30px color-mix(in srgb, var(--accent) 38%, transparent); }
.btn-ghost { background: var(--surface); color: var(--text); border-color: var(--separator); box-shadow: var(--shadow); }
.btn-ghost:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--separator)); }

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 15px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
  font-size: .85rem; font-weight: 800; letter-spacing: .01em;
}
.pill.rest { background: var(--resting-soft); color: var(--resting); }

.link-arrow { font-weight: 700; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .25s ease; }
.link-arrow:hover { border-bottom-color: currentColor; }

/* ---------- Héros ---------- */

.hero { position: relative; padding: clamp(40px, 6vw, 76px) 0 clamp(56px, 8vw, 100px); overflow: clip; }

/* Deux halos qui dérivent lentement, et suivent le défilement (cf. main.js). */
.blob {
  position: absolute; z-index: -1; border-radius: 50%;
  filter: blur(70px); pointer-events: none;
  will-change: transform;
}
.blob-a {
  width: 46vw; height: 46vw; max-width: 560px; max-height: 560px;
  top: -12%; left: -10%;
  background: color-mix(in srgb, var(--accent) 19%, transparent);
  animation: drift 18s ease-in-out infinite;
}
.blob-b {
  width: 38vw; height: 38vw; max-width: 460px; max-height: 460px;
  top: 2%; right: -12%;
  background: color-mix(in srgb, var(--resting) 15%, transparent);
  animation: drift 22s ease-in-out infinite reverse;
}
@keyframes drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(4%, 6%, 0) scale(1.08); }
}

.hero-grid { display: grid; gap: clamp(36px, 5vw, 56px); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 940px) { .hero-grid { grid-template-columns: 1.05fr .95fr; } }

.hero h1 { margin: 18px 0 16px; }
.hero .lead { max-width: 32ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 30px; }
.hero-note { margin-top: 14px; color: var(--text-3); font-size: .9rem; }

.rate-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--separator);
  color: var(--text-2); font-size: .95rem; font-weight: 600;
}
.rate-field {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 6px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--separator); box-shadow: var(--shadow);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.rate-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.rate-row input {
  width: 78px; padding: 7px 12px; text-align: right;
  font: inherit; font-weight: 800; color: var(--text);
  background: var(--surface-alt); border: 1px solid transparent;
  border-radius: 999px;
}
.rate-row input:focus { outline: none; }

.mock-caption { margin-top: 20px; text-align: center; color: var(--text-3); font-size: .85rem; font-weight: 600; }

/* =====================================================================
   Les mockups iPhone
   ---------------------------------------------------------------------
   Un seul châssis, trois écrans : l'app, l'écran verrouillé, l'écran
   d'accueil. Tout l'intérieur est dimensionné en `em`, et la base est un
   pourcentage de la largeur du châssis : le téléphone se réduit sur mobile
   sans qu'une seule taille soit à retoucher.
   ===================================================================== */

.iphone {
  position: relative;
  container-type: inline-size;
  width: min(316px, 78vw);
  margin-inline: auto;
  aspect-ratio: 879 / 1832;     /* les proportions exactes de assets/mockup-iphone.png */
  filter:
    drop-shadow(0 2px 4px rgba(20, 23, 26, .20))
    drop-shadow(0 28px 44px rgba(20, 23, 26, .30));
  transition: --tx .4s var(--ease), --ty .4s var(--ease);
  transform: perspective(1400px) rotateX(var(--tx)) rotateY(var(--ty)) rotate(var(--rot, 0deg));
}

/* Le châssis : une photo détourée, tranches et Dynamic Island comprises, posée
   par-dessus l'écran. Sa fenêtre est transparente, et c'est elle qui masque les
   coins de l'écran, inutile d'en redessiner l'arrondi au pixel près. */
.iphone-frame {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%;
  pointer-events: none; user-select: none;
}

/* L'écran se glisse dans la fenêtre du châssis, en débordant d'un poil sous le
   cadre pour qu'aucun filet de fond ne passe sur les bords. */
.iphone-screen {
  position: absolute; top: 2%; bottom: 2%; left: 3.9%; right: 3.8%;
  border-radius: 13cqw; overflow: hidden;
  display: flex; flex-direction: column;
  font-size: 13px;              /* repli si les unités de conteneur manquent */
  font-size: 4.5cqw;
  line-height: 1.35;
}

/* Le reflet qui balaie la vitre. */
.glare { position: absolute; inset: 0; z-index: 4; border-radius: 18cqw; overflow: hidden; pointer-events: none; }
.glare::after {
  content: ""; position: absolute; top: -40%; bottom: -40%; width: 34%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .30), transparent);
  filter: blur(7px);
  animation: sweep 7s cubic-bezier(.5, 0, .3, 1) infinite;
}
@keyframes sweep {
  0%        { transform: translateX(-160%) rotate(16deg); }
  45%, 100% { transform: translateX(320%) rotate(16deg); }
}

/* Flottement, inclinaison, et l'orientation que la souris donne au mockup du héros. */
@keyframes phoneFloat {
  0%, 100% { transform: perspective(1400px) rotateX(var(--tx)) rotateY(var(--ty)) rotate(var(--rot, 0deg)) translateY(0); }
  50%      { transform: perspective(1400px) rotateX(var(--tx)) rotateY(var(--ty)) rotate(var(--rot, 0deg)) translateY(-13px); }
}
.iphone-tilt   { --rot: -3.5deg; animation: phoneFloat 9s ease-in-out infinite; }
.iphone-tilt-r { --rot: 3.5deg;  animation: phoneFloat 10s ease-in-out infinite .6s; }

/* ---------- Chrome commun aux trois écrans ---------- */

.ios-status {
  display: flex; align-items: center; justify-content: space-between;
  padding: .95em 1.5em .2em; font-size: .82em; font-weight: 800;
  color: var(--text); letter-spacing: -.01em; flex: 0 0 auto;
}
.ios-status.light { color: #fff; }
.ios-status-icons { display: inline-flex; align-items: center; gap: .32em; }
.ios-status-icons i { display: block; background: currentColor; border-radius: 1px; }
.ios-status-icons .sig  { width: .95em; height: .62em; clip-path: polygon(0 70%,18% 70%,18% 100%,0 100%,27% 45%,45% 45%,45% 100%,27% 100%,55% 20%,73% 20%,73% 100%,55% 100%,82% 0,100% 0,100% 100%,82% 100%); }
.ios-status-icons .wifi { width: .85em; height: .6em; clip-path: polygon(50% 8%, 100% 100%, 0 100%); }
.ios-status-icons .bat  { width: 1.35em; height: .62em; border-radius: .18em; }

.home-bar {
  position: absolute; left: 50%; bottom: .5em; transform: translateX(-50%);
  width: 34%; height: .3em; border-radius: 999px; background: rgba(20, 23, 26, .3);
}
.home-bar.light { background: rgba(255, 255, 255, .75); }

/* ---------- Écran 1 : le compteur de l'app ---------- */

.app-screen { background: var(--bg); color: var(--text); }

.app-top { display: flex; align-items: center; gap: .6em; padding: .9em 1.2em 0; flex: 0 0 auto; }
.periods {
  display: flex; gap: .35em; overflow: hidden; flex: 1;
  -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent);
          mask-image: linear-gradient(90deg, #000 80%, transparent);
}
.periods span {
  padding: .55em .8em; border-radius: 999px; white-space: nowrap;
  font-size: .8em; font-weight: 700; color: var(--text-2);
}
.periods .on { background: var(--accent-soft); color: var(--accent); }
.gear {
  flex: 0 0 auto; width: 2.6em; height: 2.6em; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--separator); color: var(--text-2);
}
.gear svg { width: 1.3em; height: 1.3em; }

.app-center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6em; padding: 0 1em; }

.app-amount {
  font-size: 3.2em; font-weight: 700; letter-spacing: -.035em;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
  line-height: 1; white-space: nowrap;
}
/* Chaque caractère est une case : seuls les chiffres qui changent roulent. */
.app-amount .ch { display: inline-block; }
.app-amount .ch.roll { animation: rollUp .34s var(--ease); }
@keyframes rollUp {
  0%   { transform: translateY(.42em); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

.app-goal { display: flex; flex-direction: column; align-items: center; gap: .55em; text-align: center; }
.app-goal-prev { font-size: .88em; font-weight: 600; color: var(--text-2); }
.app-track { display: block; width: 8.6em; height: .3em; border-radius: 999px; background: var(--separator); overflow: hidden; }
.app-track i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--accent); transition: width .9s var(--ease); }
.app-goal-line { font-size: .76em; color: var(--text-3); }

.app-bottom { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: .9em; padding-bottom: 1.8em; }
.app-mascot { width: 8.4em; height: auto; animation: float 5s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.app-status {
  display: inline-flex; align-items: center; gap: .6em;
  padding: .65em 1.1em; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--separator);
  font-size: .8em; font-weight: 600; color: var(--text-2);
}
.app-status .dot { width: .55em; height: .55em; border-radius: 999px; background: var(--accent); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  70%      { box-shadow: 0 0 0 .5em transparent; }
}

/* ---------- Écran 2 : l'écran verrouillé ---------- */

.lock-screen {
  color: #fff; align-items: center; padding: 0 1.2em 1.4em;
  background:
    radial-gradient(120% 70% at 25% 8%, #2c6b56 0%, transparent 58%),
    radial-gradient(90% 60% at 88% 26%, #3c6f8a 0%, transparent 55%),
    linear-gradient(168deg, #14251f 0%, #0b110f 55%, #17201c 100%);
}
.lock-screen .ios-status { width: 100%; }

/* La Live Activity de la Dynamic Island se pose sur celle du châssis, au pixel
   près : mêmes coordonnées que la pastille noire de assets/mockup-iphone.png. */
.island {
  position: absolute; z-index: 3;
  top: 3.82%; left: 50%; transform: translateX(-50%);
  width: 28.2%; height: 3.93%;
  border-radius: 999px; background: #000;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 .75em; font-size: 3.3cqw; font-weight: 800;
}
.island-dot { width: 1.05em; height: 1.05em; border-radius: 999px; background: #34C88A; animation: pulse 2.4s ease-in-out infinite; }
.island-val { color: #34C88A; font-variant-numeric: tabular-nums; }

/* L'île n'est plus dans le flux de l'écran : l'heure reprend la place qu'elle tenait. */
.lock-time { margin-top: 3.3em; font-size: 4.2em; font-weight: 600; letter-spacing: -.035em; line-height: 1; opacity: .96; }
.lock-date { font-size: .85em; opacity: .62; margin-top: .5em; font-weight: 600; }

.la-card {
  margin-top: auto; width: 100%; border-radius: 1.5em; padding: .95em 1.05em;
  background: rgba(255, 255, 255, .13);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .14);
  display: flex; align-items: center; gap: .85em;
}
.la-card img { width: 2.9em; }
.la-body { flex: 1; min-width: 0; }
.la-card .t { font-size: .68em; opacity: .72; font-weight: 800; letter-spacing: .05em; }
.la-card .v { font-size: 1.55em; font-weight: 800; color: #34C88A; font-variant-numeric: tabular-nums; letter-spacing: -.025em; line-height: 1.15; }
.la-bar { height: .35em; border-radius: 999px; background: rgba(255, 255, 255, .2); margin-top: .5em; overflow: hidden; }
.la-bar .fill { display: block; height: 100%; width: 0; border-radius: 999px; background: #34C88A; transition: width 1.3s var(--ease) .3s; }

.lock-actions { display: flex; justify-content: space-between; width: 100%; margin-top: 1.1em; padding: 0 .6em 1em; }
.lock-actions span { width: 2.9em; height: 2.9em; border-radius: 999px; background: rgba(255, 255, 255, .16); backdrop-filter: blur(6px); }

/* ---------- Écran 3 : l'écran d'accueil, widgets posés ---------- */

.home-screen {
  color: #fff; padding: 0 1.25em 1.4em;
  background:
    radial-gradient(110% 70% at 18% 4%, #2f7159 0%, transparent 58%),
    radial-gradient(95% 65% at 92% 22%, #6a54a6 0%, transparent 55%),
    radial-gradient(120% 80% at 55% 104%, #12332a 0%, transparent 58%),
    linear-gradient(162deg, #1b2c26 0%, #101815 60%, #1a2320 100%);
}

.springboard {
  flex: 1; margin-top: 2.2em;
  display: grid; grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 4.23em; gap: .95em .9em; align-content: start;
}

/* Les tuiles : fond `solid` du studio, c'est-à-dire Theme.surface. */
.w {
  background: rgba(255, 255, 255, .95);
  border-radius: 1.55em;
  padding: .85em .95em;
  color: var(--text);
  box-shadow: 0 .5em 1.4em rgba(0, 0, 0, .28);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.w:hover { transform: translateY(-3px) scale(1.015); box-shadow: 0 .8em 1.8em rgba(0, 0, 0, .34); }
.w-medium { grid-column: span 4; grid-row: span 2; display: flex; align-items: center; gap: .7em; }
.w-medium .w-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .35em; }
.w-medium img { width: 5.4em; flex: 0 0 auto; }
.w-small { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; gap: .3em; }

.w-head { display: inline-flex; align-items: center; gap: .4em; font-size: .62em; font-weight: 800; letter-spacing: .06em; color: var(--text-2); }
.w-dot { width: .55em; height: .55em; border-radius: 999px; background: var(--accent); flex: 0 0 auto; }
.w-amount { font-size: 1.72em; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.1; margin-top: auto; }
.w-small .w-amount { font-size: 1.42em; }
.w-track { display: block; height: .32em; border-radius: 999px; background: var(--separator); overflow: hidden; }
.w-track .fill { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--accent); transition: width 1.2s var(--ease) .35s; }
.w-caption, .w-goal { font-size: .62em; font-weight: 600; color: var(--text-3); }

/* Les icônes voisines : des vignettes, jamais l'imitation d'une app existante. */
.app-icon { display: flex; flex-direction: column; align-items: center; justify-content: start; gap: .38em; }
.app-icon::before {
  content: ""; width: 80%; aspect-ratio: 1; border-radius: 24%;
  box-shadow: 0 .25em .6em rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .25);
  background: linear-gradient(150deg, #64748b, #334155);
}
.app-icon::after {
  content: ""; width: 56%; height: .34em; border-radius: 999px;
  background: rgba(255, 255, 255, .32);
}
.app-icon.i1::before { background: linear-gradient(150deg, #7dd3fc, #2563eb); }
.app-icon.i2::before { background: linear-gradient(150deg, #fda4af, #e11d48); }
.app-icon.i3::before { background: linear-gradient(150deg, #fde68a, #f59e0b); }
.app-icon.i4::before { background: linear-gradient(150deg, #c4b5fd, #7c3aed); }
.app-icon.i5::before { background: linear-gradient(150deg, #a7f3d0, #059669); }
.app-icon.i6::before { background: linear-gradient(150deg, #e5e7eb, #9ca3af); }
.app-icon.i7::before { background: linear-gradient(150deg, #fbcfe8, #db2777); }
.app-icon.i8::before { background: linear-gradient(150deg, #bae6fd, #0891b2); }
.app-icon.i9::before { background: linear-gradient(150deg, #fed7aa, #ea580c); }
.app-icon.i10::before { background: linear-gradient(150deg, #d9f99d, #65a30d); }
.app-icon.i11::before { background: linear-gradient(150deg, #cbd5e1, #475569); }

.app-icon.paytick::before, .app-icon.paytick::after { content: none; }
.app-icon.paytick img {
  width: 80%; aspect-ratio: 1; border-radius: 24%;
  box-shadow: 0 .25em .7em rgba(0, 0, 0, .34), 0 0 0 1px rgba(255, 255, 255, .18);
  animation: nudge 6s ease-in-out infinite;
}
@keyframes nudge {
  0%, 88%, 100% { transform: translateY(0) scale(1); }
  92%           { transform: translateY(-2px) scale(1.05); }
}
.app-icon.paytick b { font-size: .55em; font-weight: 700; height: .34em; line-height: .34em; }

.page-dots { display: flex; justify-content: center; gap: .45em; padding: .9em 0 .7em; }
.page-dots i { width: .38em; height: .38em; border-radius: 999px; background: rgba(255, 255, 255, .38); }
.page-dots i.on { background: #fff; }

.dock {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .9em;
  padding: .75em; border-radius: 1.7em;
  background: rgba(255, 255, 255, .16); backdrop-filter: blur(10px);
  margin-bottom: 1.1em;
}
.dock span {
  width: 100%; aspect-ratio: 1; border-radius: 24%;
  background: linear-gradient(150deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .22));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}

/* ---------- Cartes ---------- */

.card {
  background: var(--surface); border: 1px solid var(--separator);
  border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s ease;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--accent) 22%, var(--separator)); }

.grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid-3 { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 820px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

.step .num {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); font-size: .85rem; font-weight: 800;
  margin-bottom: 10px;
  transition: transform .4s var(--ease);
}
.step:hover .num { transform: scale(1.15) rotate(-8deg); }

.feature h3 { margin-bottom: 6px; }
.feature .ico { font-size: 1.6rem; line-height: 1; margin-bottom: 12px; display: block; transition: transform .4s var(--ease); }
.feature:hover .ico { transform: translateY(-3px) scale(1.12); }

.head { max-width: 34ch; margin-bottom: clamp(32px, 5vw, 52px); }
.head.center { margin-inline: auto; }

/* ---------- Sections en vis-à-vis ---------- */

.showcase { display: grid; gap: clamp(28px, 5vw, 48px); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 940px) {
  .showcase { grid-template-columns: .85fr 1.15fr; }
  .showcase.flip > :first-child { order: 2; }
}

.checks { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 9px; }
.checks li { display: flex; gap: 10px; align-items: flex-start; color: var(--text-2); }
.checks li::before { content: "✓"; color: var(--accent); font-weight: 900; }

/* Les trois variantes de couleur du widget, sous le texte. */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 28px; max-width: 380px; }
.tile {
  aspect-ratio: 1; border-radius: 18px; padding: 12px;
  display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: var(--shadow); border: 1px solid var(--separator); background: var(--surface);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.tile:hover { transform: translateY(-4px) rotate(-2deg); box-shadow: var(--shadow-lg); }
.tile .t { font-size: .62rem; font-weight: 800; opacity: .78; text-transform: uppercase; letter-spacing: .06em; }
.tile .v { font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tile.green  { background: var(--accent);  border-color: transparent; color: #fff; }
.tile.violet { background: var(--resting); border-color: transparent; color: #fff; }
.tile.dark   { background: #14171A;        border-color: transparent; color: #fff; }
.tile.dark .v { color: #34C88A; }

/* ---------- Confidentialité ---------- */

.privacy-band {
  background: var(--accent-soft);
  border-radius: var(--radius-lg);
  padding: clamp(32px, 5vw, 56px);
  display: grid; gap: 28px; align-items: center; grid-template-columns: 1fr;
}
@media (min-width: 820px) { .privacy-band { grid-template-columns: 220px 1fr; } }
.privacy-band img { width: 190px; margin-inline: auto; animation: float 6s ease-in-out infinite; }
.privacy-band h2 { color: var(--text); }

/* ---------- Prix ---------- */

.price-card { max-width: 460px; margin-inline: auto; text-align: center; padding: 32px; }
.price-card:hover { transform: none; }
.price { font-size: 3rem; font-weight: 800; letter-spacing: -.03em; }
.price small { font-size: 1rem; font-weight: 700; color: var(--text-2); letter-spacing: 0; }
.price-card img { width: 120px; margin: -80px auto 8px; animation: float 5.5s ease-in-out infinite; }
.price-list { list-style: none; padding: 0; margin: 22px 0 26px; display: grid; gap: 10px; text-align: left; }
.price-list li { display: flex; gap: 10px; align-items: flex-start; font-size: .98rem; }
.price-list li::before { content: "✓"; color: var(--accent); font-weight: 900; }

/* ---------- FAQ ---------- */

.faq { max-width: 720px; margin-inline: auto; display: grid; gap: 12px; }
.faq details {
  background: var(--surface); border: 1px solid var(--separator);
  border-radius: var(--radius); padding: 4px 20px;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.faq details[open] { border-color: color-mix(in srgb, var(--accent) 28%, var(--separator)); box-shadow: var(--shadow); }
.faq summary {
  cursor: pointer; list-style: none; padding: 16px 0; font-weight: 700;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; color: var(--accent); font-size: 1.5rem; font-weight: 700; line-height: 1;
  transition: transform .35s var(--ease);
}
.faq details[open] summary::after { transform: rotate(135deg); }
.faq .faq-body { padding-bottom: 18px; color: var(--text-2); }
.faq details[open] .faq-body { animation: faqIn .38s var(--ease); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---------- Pied de page ---------- */

.footer { border-top: 1px solid var(--separator); padding: 48px 0 60px; color: var(--text-2); }
.footer .wrap { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; }
.footer a { color: var(--text-2); text-decoration: none; font-weight: 600; transition: color .25s ease; }
.footer a:hover { color: var(--text); }
.footer nav { display: flex; gap: 22px; flex-wrap: wrap; }

/* ---------- Apparition au défilement ---------- */

.reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity .75s var(--ease) var(--d, 0s), transform .75s var(--ease) var(--d, 0s);
  will-change: opacity, transform;
}
.reveal-left  { transform: translateX(-30px); }
.reveal-right { transform: translateX(30px); }
.reveal-zoom  { transform: scale(.93) translateY(20px); }
.reveal.in    { opacity: 1; transform: none; will-change: auto; }

/* Les jauges se remplissent une fois le bloc entré dans l'écran. */
.in .fill, .reveal.in .fill { width: var(--w, 0); }

/* ---------- Mouvement réduit ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .fill { transition: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ---------- Page de texte (politique) ---------- */

.doc { max-width: 720px; margin-inline: auto; padding: clamp(48px, 8vw, 88px) 24px 90px; }
.doc h1 { font-size: clamp(2rem, 5vw, 2.8rem); margin-bottom: 10px; }
.doc h2 { font-size: 1.35rem; margin: 44px 0 12px; }
.doc p, .doc li { color: var(--text-2); }
.doc p { margin: 12px 0; }
.doc ul { padding-left: 22px; margin: 12px 0; }
.doc li { margin: 7px 0; }
.doc strong { color: var(--text); }
.doc .updated { color: var(--text-3); font-size: .92rem; }
.doc .box { background: var(--surface); border: 1px solid var(--separator); border-radius: var(--radius); padding: 22px; margin: 26px 0; }
.doc table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: .95rem; }
.doc th, .doc td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--separator); color: var(--text-2); }
.doc th { color: var(--text); font-weight: 700; }