/* ==========================================================================
   AXIOM STORE · Mini App
   Gris clair, cartes blanches, encre noire. Flou réservé aux barres/feuilles
   (le verre sur chaque carte provoquait des saccades au défilement).
   ========================================================================== */

:root {
  --bg: #f4f4f2;
  --card: #ffffff;
  --ink: #0c0c0d;
  --ink-2: #6d6d74;
  --ink-3: #9e9ea4;
  --line: #e9e9e6;
  --green: #1fa356;
  --amber: #dd8a00;
  --red: #c0392b;
  --radius: 24px;
  --radius-sm: 18px;
  --ease: cubic-bezier(.32, .72, 0, 1);
  --spring: cubic-bezier(.34, 1.4, .5, 1);
  --pad: 18px;
  --card-shadow: 0 1px 2px rgba(12, 12, 13, .04), 0 8px 24px -18px rgba(12, 12, 13, .25);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, system-ui, sans-serif;
  font-size: 15px; line-height: 1.5; letter-spacing: -.012em;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
body { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }

button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
input, textarea { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }
svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
img { max-width: 100%; }

/* ─────────────────────────────── lancement ────────────────────────────── */
.splash {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-content: center;
  background: var(--bg);
  transition: opacity .55s var(--ease), visibility .55s;
}
.splash.hide { opacity: 0; visibility: hidden; }
.splash-brand {
  font-size: 34px; font-weight: 700; letter-spacing: -.045em; color: var(--ink);
  display: inline-flex;
}
.splash-brand i {
  font-style: normal;
  opacity: 0; transform: translateY(16px);
  animation: rise .7s var(--spring) forwards;
}
.splash-brand i:nth-child(1) { animation-delay: .05s }
.splash-brand i:nth-child(2) { animation-delay: .1s }
.splash-brand i:nth-child(3) { animation-delay: .15s }
.splash-brand i:nth-child(4) { animation-delay: .2s }
.splash-brand i:nth-child(5) { animation-delay: .25s }
.splash-brand i:nth-child(6) { animation-delay: .3s }
.splash-brand i:nth-child(7) { animation-delay: .35s }
.splash-brand i:nth-child(8) { animation-delay: .4s }
.splash-brand i:nth-child(9) { animation-delay: .45s }
.splash-brand i:nth-child(10) { animation-delay: .5s }
.splash-brand i:nth-child(11) { animation-delay: .55s }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ──────────────────────────────── en-tête ─────────────────────────────── */
/* Barre profil : dans le flux de page (elle défile), seul l'îlot est collé. */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(12px + env(safe-area-inset-top)) var(--pad) 4px;
  transition: margin-top .45s var(--spring);
}
.who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.avatar {
  width: 38px; height: 38px; border-radius: 50%; overflow: hidden; flex: none;
  display: grid; place-items: center;
  font-size: 15px; font-weight: 600; color: #fff;
  background: var(--ink);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.who-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.who-text small { font-size: 11.5px; color: var(--ink-2); }
.who-text b { font-size: 14.5px; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* badge des clients venus par un partenaire */
.member-badge {
  display: inline-block; margin-left: 5px; padding: 2px 7px; border-radius: 99px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: #eff5ff; color: #2b62c9; border: 1px solid rgba(47, 126, 246, .25);
  vertical-align: 1px;
}
.icon-btn {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  color: var(--ink); background: var(--card);
  box-shadow: var(--card-shadow);
  transition: transform .3s var(--spring);
}
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn:active { transform: scale(.88); }

/* ──────────────────────────────── cartes ──────────────────────────────── */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
}

/* ──────────────────────────────── vues ────────────────────────────────── */
.view { padding: 10px var(--pad) 0; animation: enter .5s var(--ease); }
@keyframes enter { from { opacity: 0; transform: translateY(10px); } }

.title { font-size: 30px; font-weight: 700; letter-spacing: -.04em; }
.subtitle { color: var(--ink-2); font-size: 14px; margin: 5px 0 20px; }
.signature { text-align: center; font-size: 11px; color: var(--ink-3); padding: 34px 0 8px; }
.eyebrow { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3); }

/* ───────────── carte statistiques (style santé, piste arrondie) ───────── */
.sc { padding: 16px 16px 14px; }
.sc-head { display: flex; align-items: center; gap: 10px; }
.sc-icon {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: #f0f1f4; color: var(--ink-2);
}
.sc-icon svg { width: 17px; height: 17px; }
.sc-title { font-size: 16.5px; font-weight: 700; letter-spacing: -.025em; flex: 1; }

.sc-stats { display: flex; gap: 8px; margin: 16px 2px 14px; }
.sc-stat { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.sc-stat b { font-size: 21px; font-weight: 700; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.sc-stat span { font-size: 11px; color: var(--ink-2); }
.sc-delta { color: var(--ink-3); }
.sc-delta.up { color: #1fa356; }
.sc-delta.down { color: #c0392b; }

.sc-track { background: #f0f1f4; border-radius: 16px; padding: 14px 12px 8px; }
.sc-chart { height: 58px; }
.sc-chart svg { width: 100%; height: 100%; display: block; overflow: visible; }
.sc-axis {
  display: flex; align-items: center; gap: 10px; margin-top: 8px;
  font-size: 10.5px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.sc-ticks {
  flex: 1; height: 7px;
  background: repeating-linear-gradient(90deg, #d6d8de 0 1.5px, transparent 1.5px 12px);
  background-position: center;
}

.sc-legend { display: flex; gap: 6px; margin-top: 13px; }
.sc-key { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; text-align: center; }
.sc-key > span { display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-size: 10.5px; color: var(--ink-2); white-space: nowrap; }
.sc-key i { width: 7px; height: 7px; border-radius: 99px; flex: none; }
.sc-key b { font-size: 13.5px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* ─────────────── îlot dynamique (commande en cours, haut d'écran) ──────── */
.island {
  position: fixed; left: 50%; transform: translateX(-50%);
  top: calc(8px + env(safe-area-inset-top));
  z-index: 36; width: min(92vw, 410px);
  background: #0a0a0b; color: #fff;
  border-radius: 26px; padding: 13px 17px 15px;
  box-shadow: 0 18px 44px -14px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .07);
  text-align: left;
  animation: islandIn .55s var(--spring);
  transition: transform .3s var(--spring);
}
.island:active { transform: translateX(-50%) scale(.97); }
@keyframes islandIn { from { opacity: 0; transform: translateX(-50%) translateY(-16px) scale(.9); } }
.island-row { display: flex; align-items: center; gap: 9px; }
.island-spin {
  width: 15px; height: 15px; border-radius: 50%; flex: none;
  border: 2.5px solid rgba(255, 255, 255, .22); border-top-color: #fff;
  animation: spin 1s linear infinite;
}
.island-label {
  flex: 1; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .85);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.island-pct { font-size: 27px; font-weight: 700; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.island-bar { position: relative; height: 8px; border-radius: 99px; background: #3d3d40; margin-top: 11px; }
.island-bar i {
  position: absolute; top: 0; bottom: 0; left: 0; width: 4%; min-width: 16px;
  border-radius: 99px;
  background: linear-gradient(90deg, #23662b, #6dbf3e 72%, #b5e96a);
  transition: width .35s linear; /* suit le chrono de façon régulière */
}
.island-knob {
  position: absolute; right: -3px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(181, 233, 106, .9), 0 0 16px 5px rgba(150, 220, 80, .75);
}
/* Îlot actif : collé en haut, la barre profil (qui défile) démarre dessous. */
body.has-island .topbar { margin-top: 84px; }

/* ───────────────────── carte statistiques (analytique) ────────────────── */
.stat-card { padding: 18px 18px 16px; }
.stat-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mini-seg { display: flex; gap: 2px; padding: 3px; border-radius: 99px; background: #ececea; }
.mseg {
  padding: 6px 12px; border-radius: 99px;
  font-size: 11.5px; font-weight: 600; color: var(--ink-2);
  transition: all .3s var(--ease);
}
.mseg.on { background: #fff; color: var(--ink); box-shadow: 0 2px 8px -3px rgba(12, 12, 13, .3); }

.stat-line { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.stat-big { font-size: 42px; line-height: 1; font-weight: 700; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.delta {
  font-size: 12px; font-weight: 700; letter-spacing: -.01em;
  padding: 4px 9px; border-radius: 9px;
  color: var(--green); background: rgba(31, 163, 86, .1);
  font-variant-numeric: tabular-nums;
}
.delta.down { color: var(--ink-2); background: #ececea; }

.area { height: 84px; margin-top: 16px; }
.area svg { width: 100%; height: 100%; display: block; overflow: visible; }
.area-empty { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--ink-3); font-size: 12px; }
.axis {
  display: flex; justify-content: space-between; margin-top: 7px;
  font-size: 9.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}
.stat-rows { margin-top: 8px; }
.pill-btn {
  width: 100%; margin-top: 14px; padding: 14px;
  border-radius: 99px; background: var(--bg); border: 1px solid var(--line);
  font-size: 13.5px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform .3s var(--spring);
}
.pill-btn:active { transform: scale(.97); }

/* ─────────────────────── carte Axiom (noire, brillante) ───────────────── */
.hero-card {
  position: relative; overflow: hidden;
  padding: 18px 20px 15px;
  border-radius: var(--radius);
  color: #fff;
  background:
    radial-gradient(130% 120% at 85% -10%, rgba(255, 255, 255, .16), transparent 46%),
    radial-gradient(120% 160% at 12% 0%, #2c2c31 0%, #131315 48%, #0a0a0b 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    inset 0 0 0 .5px rgba(255, 255, 255, .07),
    0 24px 48px -22px rgba(12, 12, 13, .6);
}
.hero-card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(155deg, rgba(255, 255, 255, .1), transparent 38%);
}
.hero-card > * { position: relative; z-index: 1; }

.hero-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.hero-brand { font-size: 12.5px; font-weight: 400; letter-spacing: -.01em; color: rgba(255, 255, 255, .55); }
.hero-brand b { font-weight: 700; color: #fff; }
.hero-invested { font-size: 11.5px; color: rgba(255, 255, 255, .5); font-variant-numeric: tabular-nums; }

.hero-eyebrow { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: rgba(255, 255, 255, .45); }
.hero-figure {
  font-size: 52px; line-height: 1.04; font-weight: 700; letter-spacing: -.05em;
  font-variant-numeric: tabular-nums; margin-top: 3px;
}
.hero-unit { font-size: 12.5px; color: rgba(255, 255, 255, .55); }

.hero-status { display: flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 12.5px; color: rgba(255, 255, 255, .68); }
.hero-status-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-percent { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; color: #fff; }
.hero-bar { height: 4px; border-radius: 99px; background: rgba(255, 255, 255, .16); overflow: hidden; margin-top: 9px; }
.hero-bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: #fff; transition: width 1.2s var(--ease); }

.hero-cols { display: flex; align-items: center; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .12); }
.hcol { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.hcol span { font-size: 10.5px; color: rgba(255, 255, 255, .5); }
.hcol b { font-size: 16.5px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.hcol-sep { width: 1px; height: 28px; background: rgba(255, 255, 255, .12); }

.dot { width: 6px; height: 6px; border-radius: 99px; background: var(--ink-3); flex: none; }
.hero-card .dot { background: rgba(255, 255, 255, .4); }
.dot.run { background: #fff; animation: blink 1.9s ease-in-out infinite; }
.dot.done, .dot.ok { background: var(--green) !important; }
.dot.wait { background: var(--amber) !important; }
.dot.warn, .dot.off { background: var(--red) !important; }
@keyframes blink { 50% { opacity: .25; } }

.bar { height: 4px; border-radius: 99px; background: #ededea; overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--ink); transition: width 1.2s var(--ease); }

/* ─────────────────────────── titres de section ────────────────────────── */
.head-row { display: flex; align-items: baseline; justify-content: space-between; margin: 26px 2px 12px; }
.section { font-size: 15.5px; font-weight: 700; letter-spacing: -.025em; color: var(--ink); }
.count { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ─────────────────────────────── vedettes ─────────────────────────────── */
.featured {
  display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none;
  margin: 0 calc(var(--pad) * -1); padding: 2px var(--pad) 6px;
  scroll-snap-type: x proximity; scroll-padding-inline: var(--pad);
}
.featured::-webkit-scrollbar { display: none; }
.feature {
  flex: 0 0 182px; scroll-snap-align: start; text-align: left;
  padding: 15px; border-radius: var(--radius-sm);
  display: flex; flex-direction: column; align-items: flex-start;
  transition: transform .35s var(--spring);
}
.feature:active { transform: scale(.965); }
.feature-name { font-size: 14.5px; font-weight: 600; letter-spacing: -.025em; margin-top: 11px; }
.feature-meta { font-size: 11px; color: var(--ink-2); margin-top: 2px; }
.feature-foot { display: flex; align-items: baseline; gap: 4px; margin-top: 11px; }
.feature-price { font-size: 14px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.per { font-size: 10.5px; color: var(--ink-3); font-weight: 400; }

.chip { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.chip svg { width: 18px; height: 18px; }

/* ─────────────────────────────── recherche ────────────────────────────── */
.search {
  display: flex; align-items: center; gap: 10px; margin: 20px 0 12px;
  padding: 0 15px; border-radius: 16px;
  background: var(--card); border: 1px solid var(--line);
  transition: border-color .3s var(--ease);
}
.search:focus-within { border-color: var(--ink-3); }
.search svg { width: 17px; height: 17px; color: var(--ink-3); flex: none; }
.search input { flex: 1; border: 0; outline: none; background: none; padding: 13px 0; font-size: 14.5px; min-width: 0; }
.search input::placeholder { color: var(--ink-3); }
.search input::-webkit-search-cancel-button { display: none; }
.search button { color: var(--ink-3); font-size: 13px; padding: 6px; }

/* ────────────────────────────── plateformes ───────────────────────────── */
.platforms {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  margin: 0 calc(var(--pad) * -1) 2px; padding: 2px var(--pad) 6px;
}
.platforms::-webkit-scrollbar { display: none; }
.platform {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px 9px 11px; border-radius: 99px; white-space: nowrap;
  font-size: 13px; font-weight: 500; color: var(--ink-2);
  background: var(--card); border: 1px solid var(--line);
  transition: all .3s var(--ease);
}
.platform svg { width: 15px; height: 15px; color: var(--tint, var(--ink)); }
.platform:active { transform: scale(.94); }
.platform.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.platform.on svg { color: #fff; }

/* ──────────────────────────── grille catalogue ────────────────────────── */
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 560px) { .grid { grid-template-columns: repeat(3, 1fr); } }
.gcard {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--card-shadow);
  text-align: left; padding: 14px;
  display: flex; flex-direction: column; align-items: flex-start; min-height: 142px;
  transition: transform .35s var(--spring);
}
.gcard:active { transform: scale(.965); }
.gcard .chip { width: 34px; height: 34px; }
.gcard .chip svg { width: 17px; height: 17px; }
.gcard-name { font-size: 13.5px; font-weight: 600; letter-spacing: -.022em; line-height: 1.3; margin-top: 10px; }
.gcard-meta { font-size: 11px; color: var(--ink-2); margin-top: 3px; flex: 1; }
.gcard-foot { display: flex; align-items: center; gap: 4px; margin-top: 11px; width: 100%; }
.gcard-price { font-size: 14px; font-weight: 700; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.gcard-plus {
  margin-left: auto; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ink); color: #fff;
}
.gcard-plus svg { width: 13px; height: 13px; stroke-width: 2; }

/* ─────────────────────────────── feuilles ─────────────────────────────── */
.scrim {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(15, 15, 16, .35);
  animation: fade .3s var(--ease);
}
@keyframes fade { from { opacity: 0; } }

.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  max-height: 92vh;
  /* Défilement interne : Telegram capture les gestes verticaux si l'on ne
     déclare pas explicitement `touch-action` · sans ça, la fiche est figée. */
  overflow-y: auto; overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  background: rgba(250, 250, 249, .92);
  backdrop-filter: blur(30px) saturate(160%); -webkit-backdrop-filter: blur(30px) saturate(160%);
  border-radius: 26px 26px 0 0;
  box-shadow: 0 -20px 60px -20px rgba(12, 12, 13, .4);
  animation: sheetIn .5s var(--ease);
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
  will-change: transform; /* glissement composé par le GPU */
}
@keyframes sheetIn { from { transform: translateY(100%); } }
.sheet.closing { animation: sheetOut .28s var(--ease) forwards; }
@keyframes sheetOut { to { transform: translateY(100%); } }
.grip { width: 36px; height: 4px; border-radius: 99px; margin: 11px auto 2px; background: rgba(12, 12, 13, .14); }
.sheet-body { padding: 10px 20px 20px; }

/* ───────── pop-up centrée (parcours d'achat, style Apple) ────────────── */
.pop { text-align: center; padding: 8px 4px 0; }
.pop-icon {
  width: 76px; height: 76px; border-radius: 26px; margin: 0 auto 18px;
  display: grid; place-items: center;
  animation: popIn .6s var(--spring) both;
}
.pop-icon svg { width: 36px; height: 36px; stroke-width: 1.7; }
@keyframes popIn { from { opacity: 0; transform: scale(.55); } }
.pop-title {
  font-size: 25px; font-weight: 800; letter-spacing: -.04em; line-height: 1.15;
  animation: popUp .55s .05s var(--spring) both;
}
.pop-sub {
  font-size: 14px; color: var(--ink-2); margin-top: 7px; line-height: 1.45;
  animation: popUp .55s .1s var(--spring) both;
}
@keyframes popUp { from { opacity: 0; transform: translateY(12px); } }
.pop-body { animation: popUp .55s .16s var(--spring) both; }

/* volume, version épurée */
.pop-qty { margin-top: 26px; }
.pop-qty-value {
  font-size: 46px; font-weight: 800; letter-spacing: -.055em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pop-qty-unit { font-size: 13.5px; color: var(--ink-2); margin-top: 4px; }
.pop-steps { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }

/* champ centré */
.pop-field { margin-top: 24px; text-align: left; }
.pop-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-3); margin-bottom: 8px; text-align: center; display: block;
}
.pop-tools { display: flex; gap: 8px; justify-content: center; margin-top: 10px; }
.pop-note { font-size: 11px; color: var(--ink-3); text-align: center; margin-top: 10px; line-height: 1.45; }
.pop-note b { color: var(--ink-2); font-weight: 700; }

/* récapitulatif encadré */
.pop-recap {
  margin-top: 22px; padding: 4px 16px; border-radius: 18px;
  background: var(--bg); border: 1px solid var(--line); text-align: left;
}
.pop-line {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 13px 0; font-size: 14px;
}
.pop-line + .pop-line { border-top: 1px solid var(--line); }
.pop-line span { color: var(--ink-2); flex: none; }
.pop-line b { font-weight: 700; text-align: right; word-break: break-all; font-variant-numeric: tabular-nums; }
.pop-line.total b { font-size: 21px; letter-spacing: -.035em; }
.pop-line .old-price { font-weight: 400; }

.pop-actions { margin-top: 22px; display: grid; gap: 9px; }
.btn-ghost-link {
  padding: 12px; font-size: 13.5px; font-weight: 600; color: var(--ink-2);
  border-radius: 14px; transition: color .25s;
}
.btn-ghost-link:active { color: var(--ink); }
.btn-danger { color: #c0392b; }

.sheet-head { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }
.sheet-head .chip { width: 44px; height: 44px; border-radius: 15px; }
.sheet-head .chip svg { width: 21px; height: 21px; }
.sheet-title { font-size: 22px; font-weight: 700; letter-spacing: -.035em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-sub { color: var(--ink-2); font-size: 12.5px; margin-top: 2px; }
.head-price { flex: none; text-align: right; margin-left: 4px; }
.head-price b { display: block; font-size: 20px; font-weight: 700; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.head-price span { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); }

.field { margin-top: 22px; }
.field-label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-3); margin-bottom: 9px;
}
.input {
  width: 100%; padding: 15px 16px; border-radius: 15px;
  background: var(--card); border: 1px solid var(--line);
  outline: none; font-size: 15px; text-align: left; direction: ltr;
  transition: border-color .3s var(--ease);
}
.input::placeholder { color: var(--ink-3); }
.input:focus { border-color: var(--ink); }
.input.err { border-color: var(--red); }
.hint { font-size: 11px; color: var(--ink-2); margin-top: 7px; }
.hint.err { color: var(--red); }
.hint.ok { color: var(--green); }

/* outils du champ lien : ouvrir la plateforme + coller */
.link-tools { display: flex; gap: 8px; margin-top: 10px; }
.tool {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 13px; border-radius: 99px;
  font-size: 12.5px; font-weight: 600;
  background: var(--card); border: 1px solid var(--line);
  transition: transform .3s var(--spring);
}
.tool:active { transform: scale(.94); }
.tool svg { width: 15px; height: 15px; }
.tool .chip-mini { width: 20px; height: 20px; border-radius: 7px; display: grid; place-items: center; }
.tool .chip-mini svg { width: 13px; height: 13px; }

/* Clavier ouvert : les actions cessent de flotter (elles cachaient le champ),
   et on ménage de la place pour faire défiler le champ au-dessus du clavier. */
.sheet.kb .actions { position: static; background: none; margin-top: 16px; }
.sheet.kb .sheet-body { padding-bottom: 42vh; }

/* volume */
.qty-display { display: flex; align-items: baseline; gap: 8px; }
.qty-value { font-size: 40px; font-weight: 700; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.qty-unit { font-size: 14px; color: var(--ink-2); }
.slider { width: 100%; margin: 15px 0 4px; -webkit-appearance: none; appearance: none; background: none; }
.slider::-webkit-slider-runnable-track {
  height: 4px; border-radius: 99px;
  background: linear-gradient(90deg, var(--ink) var(--fill, 0%), #e6e6e3 var(--fill, 0%));
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; margin-top: -12px;
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 3px 10px rgba(12, 12, 13, .25);
}
.slider::-moz-range-track { height: 4px; border-radius: 99px; background: #e6e6e3; }
.slider::-moz-range-progress { height: 4px; border-radius: 99px; background: var(--ink); }
.slider::-moz-range-thumb { width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 50%; background: #fff; }
/* Une seule ligne : les raccourcis se partagent la largeur à parts égales. */
.steps { display: flex; gap: 5px; flex-wrap: nowrap; margin-top: 13px; }
.step {
  flex: 1 1 0; min-width: 0; padding: 8px 4px; border-radius: 99px;
  font-size: 12px; font-weight: 600; text-align: center; white-space: nowrap;
  font-variant-numeric: tabular-nums;
  background: var(--card); border: 1px solid var(--line);
  transition: all .3s var(--ease);
}
.step:active { transform: scale(.93); }
.step.on { background: var(--ink); color: #fff; border-color: var(--ink); }

/* choix */
.choices { display: grid; gap: 9px; }
.choice {
  display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 15px 16px; border-radius: 15px;
  background: var(--card); border: 1.5px solid var(--line);
  transition: border-color .3s var(--ease);
}
.choice.on { border-color: var(--ink); }
.choice-main { flex: 1; min-width: 0; }
.choice-name { font-size: 14.5px; font-weight: 600; letter-spacing: -.018em; }
.choice-meta { font-size: 12px; color: var(--ink-2); margin-top: 1px; }
.tick { width: 18px; height: 18px; color: var(--ink); opacity: 0; transition: opacity .25s var(--ease); flex: none; }
.choice.on .tick { opacity: 1; }

/* totaux */
.totals { margin-top: 22px; padding-top: 15px; border-top: 1px solid var(--line); }
.total-row { display: flex; justify-content: space-between; padding: 5px 0; font-size: 14px; color: var(--ink-2); }
.total-row.grand { color: var(--ink); font-size: 24px; font-weight: 700; letter-spacing: -.04em; padding-top: 11px; }
.total-row b { font-variant-numeric: tabular-nums; }

.actions {
  position: sticky; bottom: 0; margin: 20px -20px -20px;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(250, 250, 249, .97) 62%, transparent);
  display: flex; gap: 9px;
}
.actions[style*="column"] { gap: 8px; }
.btn {
  flex: 1; padding: 16px; border-radius: 17px; font-size: 15px; font-weight: 600;
  text-align: center;
  transition: transform .3s var(--spring), opacity .3s;
}
.btn:active { transform: scale(.97); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink[disabled] { opacity: .32; }
.btn-clear { flex: 0 0 auto; padding-inline: 20px; background: var(--card); border: 1px solid var(--line); }
/* action secondaire mise en avant : contour bleu, fond clair */
.btn-outline { background: #eff5ff; color: #2b62c9; border: 1.5px solid rgba(47, 126, 246, .45); }

/* ─────────────────────────────── paiement ─────────────────────────────── */
.pay-amount { text-align: center; padding: 2px 0 0; }
.pay-amount b { font-size: 42px; font-weight: 800; letter-spacing: -.05em; line-height: 1.05; font-variant-numeric: tabular-nums; display: block; }
.pay-amount span { display: block; font-size: 12.5px; color: var(--ink-2); margin-top: 4px; }
.pay-block {
  background: var(--card); border: 1px solid var(--line); border-radius: 15px;
  padding: 13px 15px; margin-top: 14px;
}
.pay-block-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); margin-bottom: 7px; }
.pay-value { display: flex; align-items: center; gap: 10px; }
.pay-value code {
  flex: 1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; word-break: break-all; color: var(--ink);
}
.copy-btn {
  flex: none; padding: 8px 13px; border-radius: 10px; font-size: 12px; font-weight: 600;
  background: var(--bg); border: 1px solid var(--line);
}
.copy-btn:active { transform: scale(.94); }
.pay-steps { margin: 18px 0 6px; display: grid; gap: 11px; }
.pay-step {
  display: flex; gap: 11px; align-items: center;
  font-size: 13.5px; color: var(--ink-2);
  white-space: nowrap; /* chaque étape tient sur une seule ligne */
}
.pay-step > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.pay-step b { color: var(--ink); font-weight: 700; }
.pay-step-n {
  flex: none; width: 23px; height: 23px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11.5px; font-weight: 700;
  background: var(--ink); color: #fff;
}

/* consigne compte public · bleu informatif (le rouge évoquait une erreur) */
.notice {
  display: flex; align-items: flex-start; gap: 11px;
  margin-top: 12px; padding: 12px 14px; border-radius: 14px;
  background: linear-gradient(180deg, #eff5ff, #e8f0fe);
  box-shadow: inset 0 0 0 1px rgba(47, 126, 246, .16), inset 0 1px 0 rgba(255, 255, 255, .65);
}
.notice-icon {
  width: 30px; height: 30px; border-radius: 10px; flex: none;
  display: grid; place-items: center;
  background: rgba(47, 126, 246, .12); color: #2f7ef6;
}
.notice-icon svg { width: 16px; height: 16px; }
.notice-text { font-size: 11.5px; line-height: 1.42; color: #40639e; }
.notice-text b { font-weight: 700; color: #2b62c9; }
.notice-title { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: -.01em; color: #2b6de0; margin-bottom: 1px; }

/* chrono de vérification */
.chrono {
  margin-top: 12px; font-size: 26px; font-weight: 700; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: var(--ink-2);
}

/* attente de vérification du paiement */
.wait-badge {
  width: 74px; height: 74px; margin: 0 auto 18px;
  display: grid; place-items: center;
  background: #eaeae7; color: var(--ink-3);
  clip-path: polygon(50% 0%, 61% 5%, 73% 3%, 80% 12%, 92% 15%, 93% 27%, 100% 37%, 96% 50%, 100% 63%, 93% 73%, 92% 85%, 80% 88%, 73% 97%, 61% 95%, 50% 100%, 39% 95%, 27% 97%, 20% 88%, 8% 85%, 7% 73%, 0% 63%, 4% 50%, 0% 37%, 7% 27%, 8% 15%, 20% 12%, 27% 3%, 39% 5%);
}
.wait-badge svg { width: 30px; height: 30px; animation: spin 3.2s linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }
.fail-badge {
  width: 74px; height: 74px; margin: 0 auto 18px;
  display: grid; place-items: center;
  background: #f6dfdb; color: var(--red);
  clip-path: polygon(50% 0%, 61% 5%, 73% 3%, 80% 12%, 92% 15%, 93% 27%, 100% 37%, 96% 50%, 100% 63%, 93% 73%, 92% 85%, 80% 88%, 73% 97%, 61% 95%, 50% 100%, 39% 95%, 27% 97%, 20% 88%, 8% 85%, 7% 73%, 0% 63%, 4% 50%, 0% 37%, 7% 27%, 8% 15%, 20% 12%, 27% 3%, 39% 5%);
  animation: pop .7s var(--spring);
}
.fail-badge svg { width: 26px; height: 26px; stroke-width: 2.2; }

/* ──────────────────────── badges de confiance ─────────────────────────── */
.trust { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 12px; }
.trust-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px 7px 9px; border-radius: 99px;
  font-size: 11.5px; font-weight: 600; letter-spacing: -.005em;
  background: var(--card); border: 1px solid var(--line); color: var(--ink-2);
}
.trust-badge svg { width: 14px; height: 14px; }
.trust-badge.green { color: #197a45; border-color: rgba(31, 163, 86, .28); background: #f1faf4; }
.trust-badge.blue { color: #2b62c9; border-color: rgba(47, 126, 246, .26); background: #eff5ff; }

/* prix barré (tarif de lancement) */
.old-price { font-size: 11px; color: var(--ink-3); text-decoration: line-through; margin-right: 5px; font-variant-numeric: tabular-nums; }
.promo-tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 99px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .01em;
  background: #eff5ff; color: #2b62c9; border: 1px solid rgba(47, 126, 246, .22);
}

/* ───────────────────────────── avis clients ───────────────────────────── */
.rev-hero { padding: 20px 18px 18px; display: flex; align-items: center; gap: 20px; }
.rev-left { text-align: center; flex: none; }
.rev-score { font-size: 44px; font-weight: 800; letter-spacing: -.055em; line-height: 1; font-variant-numeric: tabular-nums; }
.rev-outof { font-size: 11px; color: var(--ink-3); font-weight: 600; }
.rev-stars { display: inline-flex; gap: 2px; margin-top: 7px; }
.rev-stars svg { width: 14px; height: 14px; fill: #2f7ef6; stroke: none; }
.rev-stars svg.off { fill: #e6e6e3; }
.rev-count { font-size: 11px; color: var(--ink-2); margin-top: 6px; }
.rev-spread { flex: 1; display: grid; gap: 6px; min-width: 0; }
.rev-row { display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: var(--ink-3); font-weight: 600; }
.rev-row .bar { flex: 1; height: 6px; background: #e7e7e4; }
.rev-row .bar i { background: #2f7ef6; }
.rev-row b { width: 16px; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); font-weight: 600; }

.rev-empty { padding: 30px 20px; text-align: center; }
.rev-empty .rev-stars svg { width: 22px; height: 22px; }

.rev-card { padding: 16px; border-radius: var(--radius-sm); margin-bottom: 10px; }
.rev-head { display: flex; align-items: center; gap: 11px; }
.rev-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 14.5px; font-weight: 700; color: #fff;
  background: linear-gradient(145deg, #33353b, #0c0c0d);
}
.rev-who { flex: 1; min-width: 0; }
.rev-name { font-size: 14px; font-weight: 700; letter-spacing: -.02em; display: flex; align-items: center; gap: 6px; }
.rev-verified { color: var(--green); display: inline-flex; }
.rev-verified svg { width: 13px; height: 13px; stroke-width: 2.6; }
.rev-meta { font-size: 11px; color: var(--ink-3); margin-top: 1px; }
.rev-mini { display: inline-flex; gap: 1.5px; flex: none; }
.rev-mini svg { width: 12px; height: 12px; fill: #2f7ef6; stroke: none; }
.rev-mini svg.off { fill: #e6e6e3; }
.rev-text {
  font-size: 13.5px; color: var(--ink); margin-top: 12px; line-height: 1.55;
  padding-left: 12px; border-left: 2px solid var(--line);
}
.rev-service {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 12px;
  padding: 6px 11px 6px 7px; border-radius: 99px;
  font-size: 11px; font-weight: 600; color: var(--ink-2); background: var(--bg);
}
.rev-service .chip-mini { width: 18px; height: 18px; border-radius: 6px; display: grid; place-items: center; }
.rev-service .chip-mini svg { width: 11px; height: 11px; }

/* saisie d'un avis · étoiles bleues sur carte blanche, bien contrastées */
.star-box {
  background: #fff; border: 1px solid var(--line); border-radius: 20px;
  padding: 20px 14px 16px; margin-top: 4px;
}
.star-pick { display: flex; justify-content: center; gap: 6px; }
.star-pick button { padding: 5px; transition: transform .35s var(--spring); }
.star-pick button:active { transform: scale(.82); }
.star-pick svg {
  width: 40px; height: 40px; fill: #dfe3ea; stroke: none;
  transition: fill .25s var(--ease), transform .35s var(--spring);
}
.star-pick button.on svg { fill: #2f7ef6; transform: scale(1.08); }
.star-legend {
  text-align: center; font-size: 14px; font-weight: 700; letter-spacing: -.02em;
  color: var(--ink-3); margin-top: 14px; min-height: 20px;
  transition: color .25s var(--ease);
}
.star-legend.set { color: #2f7ef6; }

/* ─────────────── carte de suivi animée (détail de commande) ───────────── */
.track-card {
  position: relative; overflow: hidden;
  border-radius: 24px; background: #f6f9ff;
  aspect-ratio: 720 / 973; max-height: 74vh;
  box-shadow: inset 0 0 0 1px rgba(47, 126, 246, .07);
  /* Isole le rendu de la carte : la vidéo ne fait plus recalculer la page. */
  contain: paint;
}
.track-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: translateZ(0); /* composition GPU, pas de à-coup à l'apparition */
}

.track-top {
  position: absolute; top: 16px; left: 0; right: 0;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
}
.track-pill {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 18px 10px 11px; border-radius: 99px;
  background: #fff; font-size: 15px; font-weight: 700; letter-spacing: -.02em;
  box-shadow: 0 10px 26px -10px rgba(30, 60, 120, .25);
}
.tp-check {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--green); color: #fff;
}
.tp-check svg { width: 13px; height: 13px; stroke-width: 2.6; }
.tp-check.wait { background: var(--amber); }
.tp-check.warn, .tp-check.off { background: var(--red); }
.tp-check.run { background: #2f7ef6; }
.track-sub { font-size: 11.5px; font-weight: 600; color: #7d8aa5; font-variant-numeric: tabular-nums; }

.track-bottom { position: absolute; left: 20px; right: 20px; bottom: 18px; }
.track-dest {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 9px; border-radius: 99px;
  background: #fff; font-size: 13.5px; font-weight: 700; letter-spacing: -.01em;
  box-shadow: 0 8px 22px -10px rgba(30, 60, 120, .22);
  margin-bottom: 12px;
}
.track-dest .chip-mini { width: 22px; height: 22px; border-radius: 8px; display: grid; place-items: center; }
.track-dest .chip-mini svg { width: 13px; height: 13px; }
.track-status { font-size: 29px; font-weight: 800; letter-spacing: -.045em; line-height: 1.08; }
.track-eta {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 7px; font-size: 12.5px; font-weight: 600; color: #2f7ef6;
}
.track-eta svg { width: 13px; height: 13px; animation: spin 4s linear infinite; }
.track-info { display: flex; flex-direction: column; gap: 1px; margin-top: 12px; }
.track-info-label { font-size: 13px; color: #5c6980; }
.track-info-value { font-size: 16.5px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.track-info-foot { font-size: 12px; color: #7d8aa5; margin-top: 3px; }
.track-progress { display: flex; align-items: center; gap: 10px; margin-top: 13px; }
.track-progress .bar { flex: 1; height: 6px; background: rgba(47, 126, 246, .14); }
.track-progress .bar i { background: linear-gradient(90deg, #2f7ef6, #56c8f5); }
.track-pct { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; color: #2f7ef6; }

/* détail de commande : chronologie */
.tl { margin-top: 6px; }
.tl-row { display: flex; gap: 12px; }
.tl-side { display: flex; flex-direction: column; align-items: center; }
.tl-dot { width: 9px; height: 9px; border-radius: 99px; background: var(--ink); margin-top: 5px; flex: none; }
.tl-row:first-child .tl-dot { background: var(--green); }
.tl-line { width: 1.5px; flex: 1; background: var(--line); min-height: 16px; }
.tl-row:last-child .tl-line { display: none; }
.tl-main { padding-bottom: 15px; }
.tl-label { font-size: 13.5px; font-weight: 600; letter-spacing: -.015em; }
.tl-date { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; font-variant-numeric: tabular-nums; }

/* lignes d'information du détail */
.info-rows { margin-top: 4px; }
.info-row { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.info-row:last-child { border-bottom: 0; }
.info-row span { color: var(--ink-2); flex: none; }
.info-row b { font-weight: 600; text-align: right; word-break: break-all; font-variant-numeric: tabular-nums; }

.order .chev { width: 15px; height: 15px; color: var(--ink-3); flex: none; }

/* succès (badge festonné, comme la référence) */
.success { text-align: center; padding: 26px 0 6px; }
.success-badge {
  width: 74px; height: 74px; margin: 0 auto 18px;
  display: grid; place-items: center;
  background: #d9f2e2; color: var(--green);
  clip-path: polygon(50% 0%, 61% 5%, 73% 3%, 80% 12%, 92% 15%, 93% 27%, 100% 37%, 96% 50%, 100% 63%, 93% 73%, 92% 85%, 80% 88%, 73% 97%, 61% 95%, 50% 100%, 39% 95%, 27% 97%, 20% 88%, 8% 85%, 7% 73%, 0% 63%, 4% 50%, 0% 37%, 7% 27%, 8% 15%, 20% 12%, 27% 3%, 39% 5%);
  animation: pop .8s var(--spring);
}
.success-badge svg { width: 30px; height: 30px; stroke-width: 2.4; }
@keyframes pop { from { opacity: 0; transform: scale(.5); } }
.success h3 { font-size: 23px; font-weight: 700; letter-spacing: -.038em; }
.success p { color: var(--ink-2); font-size: 14px; margin-top: 8px; }
.ref {
  display: inline-block; margin-top: 16px; padding: 10px 18px; border-radius: 13px;
  font-weight: 700; letter-spacing: .06em; font-variant-numeric: tabular-nums;
  background: var(--card); border: 1px solid var(--line);
}

/* ─────────────────────────────── commandes ────────────────────────────── */
.order { padding: 15px; border-radius: var(--radius-sm); margin-bottom: 10px; }
.order-head { display: flex; align-items: center; gap: 12px; }
.order-head .chip { width: 36px; height: 36px; }
.order-name { font-size: 14px; font-weight: 600; letter-spacing: -.022em; flex: 1; min-width: 0; }
.order-total { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.order-progress { margin-top: 12px; }
.order-figures { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink-2); margin-top: 7px; font-variant-numeric: tabular-nums; }
.order-meta { display: flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 12px; color: var(--ink-2); }

/* ─────────────────────────────── onglets ──────────────────────────────── */
.tabbar {
  position: fixed; z-index: 45; left: 50%; transform: translateX(-50%);
  bottom: calc(14px + env(safe-area-inset-bottom));
  display: flex; gap: 4px; padding: 6px; border-radius: 99px;
  width: min(64vw, 260px);
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 10px 34px -14px rgba(12, 12, 13, .4);
}
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 4px; border-radius: 99px; color: var(--ink-3);
  font-size: 10px; font-weight: 500;
  transition: color .3s var(--ease), background .3s var(--ease);
}
.tab svg { width: 19px; height: 19px; }
.tab.on { color: #fff; background: var(--ink); }

/* ──────────────────────────────── divers ──────────────────────────────── */
.empty { text-align: center; color: var(--ink-2); padding: 46px 20px; font-size: 14px; }
.empty svg { width: 30px; height: 30px; margin-bottom: 12px; color: var(--ink-3); }
.empty b { display: block; color: var(--ink); font-size: 16px; margin-bottom: 6px; }

.faq { padding: 12px 0; border-bottom: 1px solid var(--line); }
.faq-q { font-size: 13px; font-weight: 600; letter-spacing: -.015em; }
.faq-a { font-size: 12px; color: var(--ink-2); margin-top: 4px; line-height: 1.5; }

.toast {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 90;
  bottom: calc(92px + env(safe-area-inset-bottom));
  padding: 13px 20px; border-radius: 15px; max-width: 86vw;
  font-size: 13.5px; font-weight: 500; text-align: center; color: #fff;
  background: rgba(12, 12, 13, .94);
  animation: toastIn .38s var(--spring);
}
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 14px); } }

.skeleton {
  height: 142px; border-radius: var(--radius-sm);
  background: linear-gradient(100deg, #ececea 30%, #f7f7f5 50%, #ececea 70%);
  background-size: 220% 100%; animation: shimmer 1.5s linear infinite;
}
@keyframes shimmer { to { background-position: -220% 0; } }

/* ─────────────────────────── tutoriel d'accueil ───────────────────────── */
:root { --morph: .75s cubic-bezier(.3, 1.18, .35, 1); }

.tuto-panel {
  position: fixed; z-index: 70; opacity: 0;
  background: rgba(244, 244, 242, .55);
  /* flou léger : 4 panneaux re-floutés à chaque morph, 5px suffit et reste fluide */
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  transition: top var(--morph), left var(--morph), width var(--morph), height var(--morph), opacity .5s var(--ease);
}
.tuto-panel.on { opacity: 1; }
.tuto-ring {
  position: fixed; z-index: 71; pointer-events: none; opacity: 0;
  border-radius: 26px;
  box-shadow: 0 0 0 2.5px var(--ink), 0 0 0 7px rgba(12, 12, 13, .08), 0 18px 50px -18px rgba(12, 12, 13, .4);
  transition: top var(--morph), left var(--morph), width var(--morph), height var(--morph), border-radius var(--morph), opacity .5s var(--ease);
}
.tuto-ring.on { opacity: 1; }
/* étape interactive : halo qui pulse pour inviter au toucher */
.tuto-ring.tap::after {
  content: ''; position: absolute; inset: -3px; border-radius: inherit;
  animation: tapPulse 1.7s ease-out infinite;
}
@keyframes tapPulse {
  0% { box-shadow: 0 0 0 0 rgba(12, 12, 13, .28); }
  70% { box-shadow: 0 0 0 16px rgba(12, 12, 13, 0); }
  100% { box-shadow: 0 0 0 0 rgba(12, 12, 13, 0); }
}
.tuto-card {
  position: fixed; z-index: 72; left: 20px; right: 20px; opacity: 0;
  background: var(--card); border-radius: 22px; padding: 18px 18px 16px;
  box-shadow: 0 24px 60px -20px rgba(12, 12, 13, .45);
  transition: top var(--morph), opacity .45s var(--ease);
}
.tuto-card.on { opacity: 1; }
.tuto-step { font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--ink-3); }
.tuto-title { font-size: 18px; font-weight: 700; letter-spacing: -.03em; margin-top: 5px; }
.tuto-text { font-size: 13.5px; color: var(--ink-2); margin-top: 6px; }
.tuto-actions { display: flex; gap: 9px; margin-top: 15px; }
.tuto-skip {
  flex: 0 0 auto; padding: 12px 17px; border-radius: 13px;
  font-size: 13.5px; font-weight: 600; color: var(--ink-2);
  background: var(--bg); border: 1px solid var(--line);
}
.tuto-next {
  flex: 1; padding: 12px; border-radius: 13px;
  font-size: 14px; font-weight: 600; color: #fff; background: var(--ink);
  transition: transform .3s var(--spring);
}
.tuto-next:active { transform: scale(.97); }
.tuto-dots { display: flex; gap: 5px; margin-top: 13px; justify-content: center; }
.tuto-dot { width: 6px; height: 6px; border-radius: 99px; background: var(--line); transition: background .3s, width .3s; }
.tuto-dot.on { background: var(--ink); width: 18px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}