/* =========================================================
   GolfTrack — démo animée de « Comment ça marche »
   L'écran est dessiné à la taille d'un vrai téléphone (390 × 800)
   puis réduit : les valeurs reprennent celles de l'application.
   ========================================================= */

/* ---------- Mise en page de la section ---------- */
.how.has-demo { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; align-items: center; }
.how.has-demo .steps { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.how.has-demo .steps li { padding: 20px 22px; cursor: pointer; transition: background 0.3s, border-color 0.3s, opacity 0.3s; opacity: 0.62; }
.how.has-demo .steps li:hover { opacity: 0.85; }
.how.has-demo .steps li.on { opacity: 1; background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.5); }
.how.has-demo .steps .num { width: 40px; height: 40px; font-size: 19px; border-radius: 4px; }
.how.has-demo .steps h3 { margin-top: 2px; }

.dm { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.dm[hidden] { display: none; }

/* ---------- Téléphone ---------- */
.dm-phone { width: 100%; max-width: 300px; margin: 0 auto; border-radius: 4px; padding: 11px; background: #000; box-shadow: inset 0 0 0 2px #3D3D3D; }
.dm-screen { position: relative; overflow: hidden; border-radius: 4px; background: #F8FAFC; }
.dm-vp {
  --canvas: #F8FAFC; --card: #fff; --line: #E2E8F0; --chip: #F1F5F9; --muted: #64748B; --muted-2: #94A3B8;
  --red: #B91C1C; --red-ink: #B91C1C; --amber: #A8B8AC; --wedge-soft: #E0E7FF; --wedge-ink: #4338CA; --green-ink: #123F32;
  --shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.06);
  position: absolute; top: 0; left: 0; width: 390px; height: 760px; transform-origin: 0 0;
  color: var(--ink); font-size: 15px; line-height: 22px; pointer-events: none; user-select: none; -webkit-user-select: none;
}
.dm-vp svg { width: 22px; height: 22px; }

/* barre du haut */
.dm-appbar { position: absolute; z-index: 3; top: 0; left: 0; right: 0; height: 61px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; background: rgba(248, 250, 252, 0.95); border-bottom: 1px solid var(--line); }
.dm-brand { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }
.dm-brand img { width: 40px; height: 40px; border-radius: 4px; }
.dm-gps { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; background: var(--chip); font-family: var(--display); font-weight: 700; font-size: 14px; }
.dm-dot-gps { width: 9px; height: 9px; border-radius: 50%; background: var(--green); flex: none; animation: dm-breathe 1.8s ease-in-out infinite; }
@keyframes dm-breathe { 0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55); } 50% { box-shadow: 0 0 0 5px rgba(16, 185, 129, 0); } }

/* zone qui défile */
.dm-view { position: absolute; top: 61px; left: 0; right: 0; bottom: 68px; overflow: hidden; }
.dm-content { position: relative; padding: 12px 16px 96px; transition: transform 0.6s cubic-bezier(0.3, 0.7, 0.2, 1); }
.dm-page { display: flex; flex-direction: column; gap: 16px; }
.dm-page[hidden] { display: none; }
.dm-page.enter { animation: dm-enter 0.4s ease-out; }
@keyframes dm-enter { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }

/* barre du bas */
.dm-tabbar { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 68px; display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; border-top: 1px solid var(--line); }
.dm-tabbar span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-family: var(--display); font-size: 13px; font-weight: 700; color: var(--muted); }
.dm-tabbar span.on { color: var(--primary); }
.dm-tabbar svg { width: 24px; height: 24px; }
.dm-actions { position: absolute; z-index: 2; left: 0; right: 0; bottom: 68px; display: grid; grid-template-columns: 1fr 1.7fr; gap: 10px; padding: 10px 16px; background: linear-gradient(to top, var(--canvas) 70%, rgba(248, 250, 252, 0)); }
.dm-actions[hidden] { display: none; }

/* boutons */
.dm-btn { min-height: 56px; border-radius: 4px; display: flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--display); font-size: 17px; font-weight: 700; white-space: nowrap; transition: transform 0.12s, background 0.2s, color 0.2s; }
.dm-btn.primary { background: var(--primary); color: #fff; box-shadow: 0 6px 16px -6px rgba(5, 150, 105, 0.6); }
.dm-btn.second { background: #fff; color: var(--ink); border: 1.5px solid var(--ink); font-size: 16px; }
.dm-btn.off { background: var(--chip); color: var(--muted); box-shadow: none; }

/* cartouche sombre */
.dm-hud { position: relative; overflow: hidden; color: #fff; border: 1px solid var(--slate-2); border-radius: 4px; padding: 16px; display: flex; flex-direction: column; gap: 14px;
  background: repeating-radial-gradient(circle at 92% 8%, transparent 0 46px, rgba(16, 185, 129, 0.1) 47px 48px, transparent 49px 92px), linear-gradient(160deg, #1E293B 0%, #0F172A 70%); }
.dm-hud-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dm-hole { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dm-badge { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 4px; background: var(--primary); font-family: var(--display); font-size: 26px; font-weight: 700; }
.dm-badge.dark { background: var(--slate-2); color: var(--mint); }
.dm-title { font-family: var(--display); font-size: 22px; font-weight: 700; line-height: 28px; white-space: nowrap; }
.dm-sub { font-family: var(--display); font-size: 14px; font-weight: 600; color: var(--muted-2); }
.dm-eyebrow { font-family: var(--display); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: var(--muted-2); white-space: nowrap; }
.dm-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: rgba(16, 185, 129, 0.14); color: var(--mint); font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; white-space: nowrap; }
.dm-pods { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 8px; }
.dm-pod { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 4px; padding: 10px 6px; text-align: center; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.dm-pod .k { font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: #CBD5E1; text-transform: uppercase; white-space: nowrap; }
.dm-pod .v { font-family: var(--display); font-size: 26px; font-weight: 700; line-height: 32px; font-variant-numeric: tabular-nums; }
.dm-pod.main { background: rgba(5, 150, 105, 0.32); border-color: rgba(16, 185, 129, 0.45); }
.dm-pod.main .k { color: var(--mint); }
.dm-pod.main .v { font-size: 46px; line-height: 50px; letter-spacing: -0.03em; }
.dm-pod.main .v small { font-size: 18px; color: var(--mint); margin-left: 1px; letter-spacing: 0; }
.dm-pod.main .v.wait { font-size: 22px; line-height: 50px; color: #CBD5E1; letter-spacing: 0; }
.dm-pod.main.flash { animation: dm-flash 1.1s ease-out; }
@keyframes dm-flash { 0% { box-shadow: 0 0 0 0 rgba(110, 231, 183, 0.7); } 100% { box-shadow: 0 0 0 16px rgba(110, 231, 183, 0); } }
.dm-under { color: #FCA5A5; }
.dm-strip { list-style: none; margin: 0; padding: 0; display: flex; justify-content: flex-start; gap: 6px; overflow: hidden; }
.dm-strip.end { justify-content: flex-end; }
.dm-strip li { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); font-size: 13px; color: #E2E8F0; white-space: nowrap; }
.dm-strip li.new { animation: dm-pop 0.35s cubic-bezier(0.3, 1.5, 0.5, 1); }
.dm-strip li.empty { flex: 1; justify-content: center; background: transparent; border: 1px dashed rgba(255, 255, 255, 0.2); color: var(--muted-2); }
.dm-strip b { font-family: var(--display); color: var(--mint); }
.dm-strip .sn { font-family: var(--display); font-size: 11px; font-weight: 700; color: var(--muted-2); }
.dm-strip .g { font-style: normal; color: var(--muted-2); }
.dm-strip .m { font-style: normal; color: #FCD34D; font-size: 12px; }
@keyframes dm-pop { from { transform: scale(0.7); opacity: 0; } to { transform: none; opacity: 1; } }
.dm-q { width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block; }
.dm-q.q1 { background: var(--red); } .dm-q.q2 { background: var(--amber); } .dm-q.q3 { background: var(--green); }

/* haut de l'écran du trou */
.dm-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dm-back { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 12px 0 6px; border-radius: 999px; background: var(--chip); font-family: var(--display); font-weight: 700; font-size: 14px; }
.dm-back svg { width: 18px; height: 18px; }
.dm-parline { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.dm-parmini { display: grid; grid-template-columns: repeat(3, 44px); gap: 6px; }
.dm-parmini span { min-height: 36px; border-radius: 4px; border: 1.5px solid var(--line); background: var(--canvas); display: grid; place-items: center; color: var(--ink); font-size: 18px; letter-spacing: 0; }
.dm-parmini span.on { background: var(--slate); border-color: var(--slate); color: var(--mint); }

/* clubs */
.dm-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.dm-head h4 { margin: 0; font-family: var(--display); font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: -0.01em; }
.dm-pill { background: var(--chip); color: var(--muted); font-size: 13px; font-weight: 500; padding: 4px 12px; border-radius: 999px; }
.dm-clubs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dm-club { position: relative; min-height: 104px; padding: 12px 6px 10px; border-radius: 4px; background: #fff; border: 1.5px solid var(--line); box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; transition: transform 0.15s, background 0.15s, color 0.15s; }
.dm-club .b { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 4px; background: var(--chip); font-family: var(--display); font-size: 19px; font-weight: 700; }
.dm-club.wood .b { background: var(--green-soft); color: var(--green-ink); }
.dm-club.wedge .b { background: var(--wedge-soft); color: var(--wedge-ink); }
.dm-club .n { font-family: var(--display); font-size: 18px; font-weight: 700; line-height: 22px; white-space: nowrap; }
.dm-club .a { font-family: var(--display); font-size: 13px; font-weight: 600; color: var(--muted); line-height: 14px; min-height: 14px; }
.dm-club.last { border: 1.5px dashed var(--green); }
.dm-club.last .b { background: var(--green-soft); color: var(--green-ink); }
.dm-club.picked { background: var(--slate); color: #fff; border: 2px solid var(--green); outline: 3px solid var(--green); outline-offset: 2px; transform: translateY(-2px); box-shadow: 0 10px 20px -10px rgba(5, 150, 105, 0.6); }
.dm-club.picked .n { color: var(--mint); }
.dm-club.picked .a { color: var(--muted-2); }
.dm-club.picked .b { background: var(--slate-2); color: var(--mint); }

/* panneau du coup */
.dm-panel { background: #fff; border: 2px solid var(--green); border-radius: 4px; padding: 12px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 -10px 30px -12px rgba(15, 23, 42, 0.35); }
.dm-sp-head { display: flex; align-items: center; gap: 8px; min-height: 36px; }
.dm-sp-club { font-family: var(--display); font-size: 22px; font-weight: 700; line-height: 26px; }
.dm-sp-club.none { color: var(--muted); font-size: 18px; }
.dm-sp-shot { flex: 1; font-size: 13px; color: var(--muted); }
.dm-label { font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.dm-dirs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.dm-dirs > span { min-height: 56px; border-radius: 4px; background: var(--canvas); border: 1.5px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px 2px; transition: background 0.15s; }
.dm-dirs svg { transform: rotate(var(--a)); stroke-width: 2.4; }
.dm-dirs small { font-size: 11px; line-height: 13px; color: var(--muted); white-space: nowrap; }
.dm-dirs > span.straight svg { color: var(--primary); }
.dm-dirs > span.on { background: var(--slate); border-color: var(--slate); color: #fff; }
.dm-dirs > span.on svg { color: var(--mint); }
.dm-dirs > span.on small { color: #CBD5E1; }
.dm-contacts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.dm-contacts > span { min-height: 50px; border-radius: 4px; border: 1.5px solid var(--line); background: var(--canvas); display: flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--display); font-weight: 700; font-size: 15px; transition: background 0.15s, color 0.15s; }
.dm-contacts > span.q2.on { background: var(--amber); border-color: var(--amber); color: #fff; }
.dm-contacts > span.q3.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.dm-contacts > span.on .dm-q { background: #fff; }
.dm-manual { display: flex; flex-direction: column; gap: 8px; border: 1.5px solid var(--line); border-radius: 4px; padding: 10px; }
.dm-manual[hidden] { display: none; }
.dm-manual-head { display: flex; justify-content: space-between; align-items: center; font-family: var(--display); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: var(--primary); }
.dm-manual-head i { font-style: normal; font-family: var(--body); font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.dm-quick { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.dm-quick span { min-height: 38px; display: grid; place-items: center; border-radius: 4px; background: var(--chip); font-family: var(--display); font-weight: 700; font-size: 14px; transition: background 0.15s, color 0.15s; }
.dm-quick span.on { background: var(--slate); color: var(--mint); }

/* carte du parcours */
.dm-sum { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #CBD5E1; }
.dm-sum b { font-family: var(--display); color: #fff; }
.dm-sum > :first-child { margin-right: auto; }
.dm-topar { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-family: var(--display); font-weight: 700; font-size: 15px; line-height: 15px; }
.dm-topar.small { padding: 1px 6px; font-size: 11px; }
.dm-topar.under { background: #E9EFEB; color: #111713; }
.dm-topar.even { background: #E2E8F0; color: #334155; }
.dm-sheet { background: #fff; border-radius: 4px; color: var(--ink); overflow: hidden; }
.dm-card { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; table-layout: fixed; }
.dm-card th, .dm-card td { text-align: center; padding: 5px 0; font-size: 13px; border-bottom: 1px solid var(--line); font-weight: 400; }
.dm-card th:first-child { width: 42px; text-align: left; padding-left: 6px; font-family: var(--display); font-size: 11px; font-weight: 700; color: var(--muted); }
.dm-card th:last-child, .dm-card td:last-child { width: 36px; background: #E2E8F0; font-family: var(--display); font-weight: 700; }
.dm-card .dm-num th { background: var(--slate); color: #fff; font-family: var(--display); font-size: 12px; font-weight: 700; }
.dm-card .dm-num th:first-child { color: var(--muted-2); }
.dm-card .dm-num th:last-child { background: var(--primary); font-size: 10px; }
.dm-card .dm-num th.todo { color: var(--muted); }
.dm-card .par td { color: var(--muted); font-weight: 600; }
.dm-card .me td { font-family: var(--display); font-weight: 700; font-size: 15px; }
.dm-card .tp td { font-family: var(--display); font-size: 12px; font-weight: 700; border-bottom: 0; }
.dm-card .tp td.under { color: #111713; }
.dm-card .tp td.over { color: #111713; }
.dm-card td.todo { color: #CBD5E1; }
.dm-s { display: inline-grid; place-items: center; width: 24px; height: 24px; }
.dm-s.birdie { border: 2px solid #111713; border-radius: 50%; color: #111713; }
.dm-s.bogey { border: 2px solid #111713; border-radius: 4px; color: #111713; }
.dm-card td.new { background: var(--green-soft); }
.dm-card td.new .dm-s { animation: dm-stamp 0.6s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes dm-stamp { from { transform: scale(2.2); opacity: 0; } to { transform: none; opacity: 1; } }
.dm-ractions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.dm-ractions span { min-height: 46px; border-radius: 4px; display: flex; align-items: center; justify-content: center; gap: 4px; background: #fff; border: 1.5px solid var(--line); font-family: var(--display); font-weight: 700; font-size: 13px; }
.dm-ractions svg { width: 16px; height: 16px; }
.dm-ractions .fin { background: var(--primary); border-color: var(--primary); color: #fff; }
.dm-ractions .ab { color: var(--red-ink); border-color: #FCA5A5; }
.dm-new { display: flex; flex-direction: column; gap: 12px; background: #fff; border: 1.5px solid var(--line); border-radius: 4px; padding: 16px; box-shadow: var(--shadow); }
.dm-nh { display: flex; align-items: center; gap: 12px; }
.dm-nh-num { width: 52px; height: 52px; border-radius: 4px; flex: none; display: grid; place-items: center; background: var(--slate); color: var(--mint); font-family: var(--display); font-size: 26px; font-weight: 700; }
.dm-nh-e { font-family: var(--display); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: var(--muted); }
.dm-nh-t { display: block; font-family: var(--display); font-size: 18px; line-height: 22px; }
.dm-nh small { display: block; font-size: 12px; line-height: 16px; color: var(--muted); }
.dm-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dm-tile { position: relative; min-height: 92px; border-radius: 4px; padding: 10px 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; color: #fff; border: 2px solid var(--slate); transition: transform 0.12s; }
.dm-tile b { font-family: var(--display); font-size: 38px; line-height: 40px; color: var(--mint); }
.dm-tile span { font-family: var(--display); font-weight: 700; font-size: 14px; }
.dm-tile small { font-size: 11px; color: var(--muted-2); }
.dm-tile.p3 { background: linear-gradient(160deg, #1E293B, #0F172A); }
.dm-tile.p4 { background: linear-gradient(160deg, #064E3B, #0F172A); }
.dm-tile.p5 { background: linear-gradient(160deg, #1E3A8A, #0F172A); }
.dm-hc { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; column-gap: 10px; padding: 8px 10px 8px 8px; border-radius: 4px; background: #fff; border: 1.5px solid var(--line); box-shadow: var(--shadow); }
.dm-hc + .dm-hc { margin-top: -10px; }
.dm-hc.new { animation: dm-pop 0.45s cubic-bezier(0.3, 1.4, 0.5, 1); border-color: var(--green); }
.dm-hc-b { width: 34px; height: 34px; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; border-radius: 4px; background: var(--slate); color: #fff; font-family: var(--display); font-size: 16px; font-weight: 700; }
.dm-hc-b small { font-size: 9px; line-height: 10px; opacity: 0.75; }
.dm-hc-l { font-size: 14px; line-height: 18px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.dm-hc-l b { font-family: var(--display); font-size: 17px; color: var(--ink); }
.dm-hc-d { display: flex; gap: 3px; margin-top: 3px; }
.dm-hc-d .dm-q { width: 8px; height: 8px; }

/* message furtif */
.dm-toast { position: absolute; z-index: 4; left: 50%; bottom: 158px; display: flex; align-items: center; gap: 8px; background: var(--slate); color: #fff; padding: 12px 18px; border-radius: 999px; font-weight: 500; font-size: 14px; white-space: nowrap; box-shadow: 0 10px 24px -8px rgba(15, 23, 42, 0.6); opacity: 0; transform: translate(-50%, 10px); transition: opacity 0.25s, transform 0.25s; }
.dm-toast.on { opacity: 1; transform: translate(-50%, 0); }
.dm-toast .dm-q { width: 10px; height: 10px; }

/* doigt */
.dm-finger { position: absolute; z-index: 5; top: 0; left: 0; width: 46px; height: 46px; margin: -23px 0 0 -23px; opacity: 0; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s; }
.dm-finger.on { opacity: 1; }
.dm-finger i { display: block; width: 100%; height: 100%; border-radius: 50%; background: rgba(15, 23, 42, 0.32); border: 2.5px solid rgba(255, 255, 255, 0.9); box-shadow: 0 4px 14px rgba(15, 23, 42, 0.35); transition: transform 0.14s; }
.dm-finger.press i { transform: scale(0.72); }
.dm-finger::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--green); opacity: 0; }
.dm-finger.press::after { animation: dm-ripple 0.5s ease-out; }
@keyframes dm-ripple { from { transform: scale(0.6); opacity: 0.9; } to { transform: scale(1.8); opacity: 0; } }
.dm-pressed { transform: scale(0.96) !important; }

/* ---------- Légende et commandes, sous le téléphone ---------- */
.dm-cap { min-height: 46px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; font-family: var(--display); font-weight: 600; font-size: 15px; line-height: 22px; color: #fff; }
.dm-cap span.in { animation: dm-cap 0.35s ease-out; }
@keyframes dm-cap { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.dm-walk { position: relative; width: 150px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.16); }
.dm-walk[hidden] { display: none; }
.dm-walk i { position: absolute; top: -3px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--mint); animation: dm-walk 2.4s ease-in-out forwards; }
@keyframes dm-walk { to { left: calc(100% - 10px); } }
.dm-ctrl { display: flex; align-items: center; gap: 12px; max-width: 300px; width: 100%; margin: 0 auto; }
.dm-toggle { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 50%; background: rgba(255, 255, 255, 0.06); color: #fff; cursor: pointer; padding: 0; }
.dm-toggle:hover { background: rgba(255, 255, 255, 0.14); }
.dm-toggle svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.dm-segs { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.dm-seg { border: 0; background: none; padding: 14px 0; cursor: pointer; }
.dm-seg i { display: block; position: relative; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.16); overflow: hidden; }
.dm-seg i::after { content: ''; position: absolute; inset: 0; width: var(--p, 0%); border-radius: 4px; background: var(--mint); transition: width 0.5s linear; }
.dm-toggle:focus-visible, .dm-seg:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; border-radius: 4px; }

/* ---------- Rendu compact de l'app sur téléphone (flow.css) ---------- */
.dm-appbar { height: 66px; }
.dm-view { top: 66px; }
.dm-brand small { display: block; font-size: 12px; line-height: 14px; font-weight: 600; letter-spacing: 0.04em; color: var(--muted); }
.dm-brand > div { line-height: 24px; }
.dm-page[data-el="play"] { gap: 10px; }
.dm-page[data-el="play"] .dm-hud { padding: 12px 14px; gap: 10px; }
.dm-page[data-el="play"] .dm-head { margin-top: 0; }
.dm-page[data-el="play"] .dm-head h4 { font-size: 18px; line-height: 24px; }
.dm-page[data-el="play"] .dm-title { font-size: 19px; line-height: 24px; }
.dm-page[data-el="play"] .dm-pod { padding: 6px 4px; }
.dm-page[data-el="play"] .dm-pod .v { font-size: 22px; line-height: 26px; }
.dm-page[data-el="play"] .dm-pod.main .v { font-size: 30px; line-height: 34px; }
.dm-page[data-el="play"] .dm-pod.main .v small { font-size: 16px; }
.dm-page[data-el="play"] .dm-pod.main .v.wait { font-size: 16px; line-height: 34px; }
.dm-chip.gps { padding: 5px 8px; font-size: 9.5px; letter-spacing: 0.05em; flex: none; }
.dm-hint { margin: -4px 0 0; font-size: 11px; line-height: 14px; color: var(--muted-2); }
.dm-hint[hidden] { display: none; }
.dm-clubs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.dm-club { min-height: 0; padding: 8px 4px; gap: 2px; border-radius: 4px; }
.dm-club .b { display: none; }
.dm-club .n { font-size: 15px; line-height: 19px; }
.dm-club .a { font-size: 11px; }
.dm-club .a:empty { display: none; }
.dm-club.picked { transform: none; outline-offset: 1px; }
.dm-sp-x { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--chip); color: var(--muted); flex: none; }
.dm-sp-x svg { width: 18px; height: 18px; }
.dm-mtoggle { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-size: 14px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }
.dm-mtoggle[hidden] { display: none; }
.dm-mtoggle svg { width: 16px; height: 16px; }
.dm-sum > :first-child { font-family: var(--display); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mint); }

/* ---------- Écrans plus étroits ---------- */
@media (max-width: 960px) {
  .how.has-demo { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .how.has-demo .dm { order: -1; }
  .dm-phone, .dm-ctrl { max-width: 340px; }
  .how.has-demo .steps li { opacity: 1; }
}

/* ---------- Mouvement réduit : pas de glissements ---------- */
@media (prefers-reduced-motion: reduce) {
  .dm-content, .dm-finger { transition: none; }
  .dm-page.enter, .dm-strip li.new, .dm-hc.new, .dm-card td.new .dm-s, .dm-pod.main.flash, .dm-cap span.in, .dm-walk i, .dm-dot-gps { animation: none; }
}

/* ---------- Choix du par : même mise en évidence que dans l'app (flow.css) ---------- */
.dm-new { background: #A8B8AC; border: 2px solid #A8B8AC; box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.3); }
.dm-nh-e { color: var(--slate); }
.dm-nh-num { background: var(--slate); color: #A8B8AC; }
.dm-nh-t { font-size: 22px; line-height: 26px; }
.dm-nh small { color: var(--slate); }
.dm-tile.p3, .dm-tile.p4, .dm-tile.p5 { background: #fff; color: var(--slate); border-color: #fff; box-shadow: 0 8px 16px -8px rgba(120, 53, 15, 0.7); }
.dm-tile b { color: var(--slate); }
.dm-tile small { color: var(--muted); }

/* ---------- Le jaune est la couleur de la saisie (voir saisie.css dans l'app) ---------- */
.dm-zone { display: flex; flex-direction: column; gap: 10px; border-radius: 4px; padding: 12px; background: #A8B8AC; border: 2px solid #A8B8AC; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25); }
.dm-page[data-el="play"] .dm-zone .dm-pill { background: #fff; color: var(--slate); }
.dm-club { border-color: #fff; }
.dm-club.last { border: 1.5px dashed var(--slate); }
.dm-club.picked { border-color: var(--slate); outline-color: var(--slate); box-shadow: none; }
.dm-club.picked .n { color: #A8B8AC; }
.dm-panel { background: #A8B8AC; border-color: #A8B8AC; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25); }
.dm-label, .dm-sp-shot, .dm-mtoggle, .dm-sp-club.none { color: #451A03; }
.dm-mtoggle { text-decoration-color: currentColor; }
.dm-sp-x { background: #fff; color: var(--slate); }
.dm-dirs > span { background: #fff; border-color: #fff; }
.dm-dirs > span.straight svg { color: var(--slate); }
.dm-dirs > span.on { background: var(--slate); border-color: var(--slate); }
.dm-dirs > span.on svg { color: #A8B8AC; }
.dm-contacts > span { background: #fff; border-color: #fff; }
.dm-contacts > span.q2.on { background: #677169; border-color: #677169; }
.dm-manual { background: #fff; border-color: #fff; }
.dm-manual-head { color: #451A03; }
.dm-quick span.on { color: #A8B8AC; }
.dm-panel .dm-btn.primary { background: var(--slate); box-shadow: 0 8px 16px -8px rgba(120, 53, 15, 0.7); }
.dm-panel .dm-btn.off { background: rgba(255, 255, 255, 0.55); color: #451A03; }
.dm-parline { background: #A8B8AC; border: 2px solid #A8B8AC; border-radius: 4px; padding: 4px 8px; color: #451A03; }
.dm-parmini span { background: #fff; border-color: #fff; }
.dm-parmini span.on { color: #A8B8AC; }

/* ---------- Charte monochrome de l'app (voir charte.css) ---------- */
.dm-vp { --slate: #111713; --slate-2: #1D4D3F; --ink: #111713; --primary: #111713; --green: #123F32; --mint: #FFFFFF; --green-soft: #E9EFEB; --green-ink: #111713;
  --muted: #677169; --muted-2: #A8B8AC; --line: #DCE2DC; --chip: #E9EFEB; --canvas: #F5F6F2; --shadow: none; background: #F5F6F2; }
.dm-screen { background: #F5F6F2; }
.dm-hud { background: var(--slate); border-color: var(--slate); }
.dm-badge { background: #fff; color: var(--slate); }
.dm-badge.dark { background: var(--slate-2); color: #fff; }
.dm-chip { background: rgba(255, 255, 255, 0.1); color: #fff; }
.dm-pod.main { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.28); }
.dm-pod.main.flash { animation-name: dm-flash-mono; }
@keyframes dm-flash-mono { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6); } 100% { box-shadow: 0 0 0 16px rgba(255, 255, 255, 0); } }
.dm-btn.primary { box-shadow: none; }
.dm-card .dm-num th:last-child { background: var(--slate-2); }
.dm-ractions .fin { box-shadow: none; }
.dm-hc.new { border-color: var(--slate); }
.dm-contacts > span.q3.on { background: #123F32; border-color: #123F32; }


/* =========================================================
   « Comment ça marche » : le parcours et le téléphone, côte à côte
   ========================================================= */
.how.has-demo { display: flex; flex-direction: column; gap: 32px; }
.how.has-demo .dm { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 40px; align-items: center; }
.dm-left, .dm-right { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.how.has-demo .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.how.has-demo .steps li { padding: 16px; }
.how.has-demo .steps h3 { font-size: 16px; line-height: 22px; }
.how.has-demo .steps p { font-size: 14px; line-height: 20px; }
.how.has-demo .steps .num { width: 28px; height: 28px; font-size: 14px; }
.dm-segs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dm-brand img { width: 150px; height: auto; border-radius: 0; }
.dm-tile b { font-size: 20px; line-height: 26px; color: var(--slate); }
.dm-tile { min-height: 64px; }
.dm-gps.walking { background: #123F32; color: #fff; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 18px; }
.dm-gps.walking .dm-dot-gps { display: none; }

.hm { position: relative; border-radius: 4px; overflow: hidden; background: #DCE2DC; }
.hm-svg { display: block; width: 100%; height: auto; }
.hm-t { font: 500 13px 'Inter', system-ui, sans-serif; fill: #677169; }
.hm-flight { fill: none; stroke: #123F32; stroke-width: 1.5; stroke-linecap: round; }
.hm-walk { fill: none; stroke: #123F32; stroke-width: 4; stroke-linecap: round; }
.hm-ball { fill: #fff; stroke: #123F32; stroke-width: 2; }
.hm-walker circle { fill: #123F32; }
.hm-walker path { fill: none; stroke: #123F32; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.hm-pin circle { fill: #123F32; }
.hm-pin text { fill: #fff; font: 600 9px 'Inter', system-ui, sans-serif; }
.hm-tag rect { fill: #123F32; }
.hm-tag text { fill: #fff; font: 500 12px 'IBM Plex Mono', ui-monospace, monospace; }
.hm-live { position: absolute; top: 5%; left: 4%; padding: 10px 16px; background: #123F32; color: #fff; border-radius: 4px; display: flex; flex-direction: column; gap: 0; }
.hm-live[hidden] { display: none; }
.hm-live b { font: 500 clamp(32px, 6vw, 60px)/1.1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.hm-live span { font: 400 clamp(12px, 1.4vw, 15px)/1.3 'Inter', system-ui, sans-serif; color: #E9EFEB; }
.dm-cap { min-height: 56px; font-size: clamp(18px, 2.2vw, 24px); line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; text-align: left; align-items: flex-start; }

@media (max-width: 900px) {
  .how.has-demo .dm { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .how.has-demo .dm .dm-right { max-width: 260px; width: 100%; margin: 0 auto; }
  .how.has-demo .steps { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .how.has-demo .steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px; padding: 12px; }
  .how.has-demo .steps .num { grid-row: span 2; }
  .how.has-demo .steps h3 { margin: 0; }
  .dm-cap { min-height: 48px; }
}

/* Corrections : largeur stable, textes nets, téléphone aux couleurs de la charte */
.how.has-demo { align-items: stretch; }
.hm-svg { stroke: none; }
.hm-svg text { stroke: none; }
.dm-brand small { display: none; }
.dm-screen, .dm-vp { background: #F5F6F2; }
.dm-appbar { background: #fff; border-bottom: 1px solid #DCE2DC; }
.dm-hud { background: #123F32; border-color: #123F32; color: #fff; }
.dm-pod, .dm-pod.main { background: none; border: 0; border-left: 1px solid rgba(255, 255, 255, 0.22); border-radius: 0; }
.dm-pod:first-child { border-left: 0; }
.dm-chip { background: transparent; border: 1px solid rgba(255, 255, 255, 0.35); color: #fff; }
.dm-chip .dm-dot-gps { background: #fff; }
.dm-dot-gps { background: #123F32; }
.dm-zone, .dm-panel, .dm-new { background: #fff; border: 1px solid #DCE2DC; box-shadow: none; color: #111713; }
.dm-zone .dm-pill, .dm-panel .dm-pill { background: #fff; border: 1px solid #DCE2DC; }
.dm-club, .dm-tile, .dm-tile.p3, .dm-tile.p4, .dm-tile.p5, .dm-dirs span, .dm-contacts span, .dm-quick span { background: #fff; border: 1px solid #DCE2DC; color: #111713; box-shadow: none; }
.dm-club.picked, .dm-dirs span.on, .dm-contacts span.on, .dm-quick span.on { background: #123F32; border-color: #123F32; color: #fff; }
.dm-dirs span.on small, .dm-club.picked .a { color: #fff; }
.dm-club.last { border: 1px dashed #123F32; }
.dm-btn.primary, .dm-ractions .fin { background: #123F32; border-color: #123F32; color: #fff; }
.dm-btn.off { background: #DCE2DC; color: #677169; }
.dm-btn.second { background: #fff; border: 1px solid #DCE2DC; color: #123F32; }
.dm-actions { background: #F5F6F2; }
.dm-num th { background: #123F32; }
.dm-q.q1 { background: #DCE2DC; } .dm-q.q2 { background: #A8B8AC; } .dm-q.q3 { background: #123F32; }

/* Sur téléphone : le parcours reste visible au-dessus de l'écran de l'appli */
@media (max-width: 900px) {
  .how.has-demo .dm-left { position: sticky; top: calc(var(--nav-h) - 4px); z-index: 3; background: #123F32; padding: 4px 0 8px; gap: 6px; }
  .how.has-demo .dm .dm-right { max-width: 250px; }
  .hm-live { padding: 6px 10px; }
  .hm-live b { font-size: 28px; }
  .hm-live span { font-size: 11px; }
  .dm-cap { min-height: 44px; font-size: 16px; }
}
@media (min-width: 600px) and (max-width: 900px) {
  .how.has-demo .dm-left { max-width: 520px; width: 100%; margin: 0 auto; }
  .hm-live b { font-size: 40px; }
}

/* Même code couleur que l'appli : fond sauge, choix blancs, sélection vert parcours */
.dm-zone, .dm-panel, .dm-new { background: #A8B8AC; border-color: #A8B8AC; color: #111713; }
.dm-zone .dm-head h4, .dm-sp-club, .dm-sp-shot, .dm-label, .dm-nh-e, .dm-nh-t, .dm-mtoggle, .dm-manual-head { color: #111713; }
.dm-panel .dm-btn.primary, .dm-panel .dm-btn { background: #123F32; color: #fff; box-shadow: none; }
.dm-panel .dm-btn.off { background: #DCE2DC; color: #677169; }
.dm-nh-num { background: #123F32; color: #fff; }

/* Le boîtier vient de landing.css : on ne garde que l'écran, plein cadre */
.dm-phone.dev { max-width: 280px; border-radius: 42px !important; }
.dm-screen { border-radius: 0; }
.dm-phone.dev .dev-glass { border-radius: 34px; }
@media (max-width: 900px) { .dm-phone.dev { max-width: 250px; border-radius: 38px !important; } .dm-phone.dev .dev-glass { border-radius: 30px; } }

.dm-parmini span.on { background: #123F32; color: #fff; }