/* L'accueil de wattata.app : une page qu'on fait défiler, faite des cartes de
   l'app. Depuis le 2026-10-10 elle suit le système 2a de l'app iOS
   (docs/systeme-2a.md dans wattata-ios) : un fond uni, des cartes plates de
   rayon 10, sans liseré ni ombre, les chiffres en arrondi demi-gras, rien en
   capitales espacées. Cette feuille tient les jetons, la mise en page des
   sections, les cartes, les apparitions, le sélecteur de langue et le pied. */

:root {
  --bg: #0a0b14;
  --surface: #181a29;
  --chip: #1f2133;
  --bar: #2f3149;
  --base: #262839;
  --gridline: #23253a;
  --track: #3a3d52;
  --text: #e9e9ed;
  --text-soft: #c9cad4;
  --text-2: #898da1;
  --text-3: #6b6f86;
  --brand: #9184d9;
  --brand-l: #c5bdf0;
  --medal: #b3a9e6;
  --green: #3fbf7f;
  --spend: #d9a878;
  --amber: oklch(0.8 0.15 62);
  --work: #e9a23b;
  --red: #d65050;
  --sep: rgba(84, 84, 88, .6);
  --ios-blue: #0a84ff;
  /* Ce qui se touche sur le site : le bleu d'iOS, comme dans l'app. */
  --tap: var(--ios-blue);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
  --num: ui-rounded, "SF Pro Rounded", "Nunito", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: 15px; line-height: 1.5; font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-weight: 500; line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 6px; }
p { margin: 0 0 8px; }
a { color: var(--tap); text-underline-offset: 3px; }
a:hover { color: #409cff; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--tap); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--brand) 30%, transparent); }
.num { font-family: var(--num); font-weight: 600; font-variant-numeric: tabular-nums; }

@keyframes gzlight{0%{opacity:0}55%{opacity:1}66%{opacity:.55}78%{opacity:1}88%{opacity:.8}100%{opacity:1}}
@keyframes scrollCue{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(10px);opacity:1}}
@keyframes gzin{from{opacity:0}to{opacity:1}}
@keyframes gzneedle{0%{transform:rotate(-111.25deg);animation-timing-function:cubic-bezier(.35,0,.25,1)}44%{transform:rotate(111.25deg);animation-timing-function:cubic-bezier(.25,0,.2,1)}100%{transform:rotate(17.4deg)}}
/* L'aiguille en miles : 180 sur 300, l'écran du Duo de la page anglaise. */
@keyframes gzneedlemi{0%{transform:rotate(-111.25deg);animation-timing-function:cubic-bezier(.35,0,.25,1)}44%{transform:rotate(111.25deg);animation-timing-function:cubic-bezier(.25,0,.2,1)}100%{transform:rotate(22.25deg)}}
/* Le niveau de la barre E/F fait son autotest comme dans l'app : de E jusqu'à F, puis
   retour sur la mesure. Le vert tourne dans une découpe fixe (la piste) ; à 0° il la
   remplit, à 82° il en est sorti. 63,6 % pour la page française, 62.0% pour l'anglaise. */
@keyframes gzef{0%{transform:rotate(82deg);animation-timing-function:cubic-bezier(.35,0,.25,1)}43%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.25,0,.2,1)}100%{transform:rotate(30.33deg)}}
@keyframes gzefmi{0%{transform:rotate(82deg);animation-timing-function:cubic-bezier(.35,0,.25,1)}43%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.25,0,.2,1)}100%{transform:rotate(30.92deg)}}
@keyframes gzsL{0%{transform:rotate(-120deg);animation-timing-function:cubic-bezier(.35,0,.25,1)}44%{transform:rotate(120deg);animation-timing-function:cubic-bezier(.25,0,.2,1)}100%{transform:rotate(35deg)}}
@keyframes gzsR{0%{transform:rotate(-120deg);animation-timing-function:cubic-bezier(.35,0,.25,1)}44%{transform:rotate(120deg);animation-timing-function:cubic-bezier(.25,0,.2,1)}100%{transform:rotate(-36deg)}}
@keyframes gsA{from{left:46px}to{left:-28px}}@keyframes gsB{from{left:46px}to{left:-28px}}
@keyframes kitt{0%{left:-10px}50%{left:calc(100% - 110px)}100%{left:-10px}}

/* Le sélecteur de langue, au-dessus de la scène, neutre. */
.lang {
  position: fixed; top: 16px; right: 16px; z-index: 50;
  display: flex; gap: 2px; font-size: 13px; font-weight: 500;
}
.lang a { color: var(--text-2); text-decoration: none; padding: 4px 8px; border-radius: 8px; }
.lang a:hover, .lang a[aria-current="page"] { color: var(--text); }

/* Le menu (2026-10-23), en haut, par-dessus la page. La langue y est dès le
   début ; sur l'accueil, le reste paraît au premier défilement (site.js pose
   .on), les autres pages l'ont d'emblée. Le fond flou vient quand la page passe dessous (.sc),
   le logo quand le nom de l'ouverture est passé (.past). Sous 1000 px, les
   liens tiennent dans un panneau que le bouton ouvre (.open). Sans script,
   le menu reste en haut de la page, sans le bouton. */
.bar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: 56px; padding: 0 16px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  transition: background-color .3s ease, -webkit-backdrop-filter .3s ease, backdrop-filter .3s ease; }
.bar.sc { background: color-mix(in srgb, var(--bg) 80%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); }
html:not(.js) .bar { position: absolute; }
.bar .lang { position: static; }
.bar-home { justify-self: start; display: flex; align-items: center; gap: 8px; color: var(--text); font-size: 17px; font-weight: 500; letter-spacing: .04em; line-height: 1; text-decoration: none;
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s .3s; }
.bar-home:hover { color: var(--text); }
.bar-home svg { display: block; width: 28px; height: 15px; overflow: visible; }
.bar.past .bar-home { opacity: 1; visibility: visible; transition: opacity .3s ease; }
.bar-nav { display: flex; align-items: center; gap: 2px; }
.bar-nav a, .bar-nav button { padding: 6px 10px; border: 0; border-radius: 8px; background: none; color: var(--text-2); font: inherit; font-size: 14px; font-weight: 500; line-height: 1.4; text-decoration: none; white-space: nowrap; cursor: pointer; transition: color .15s; }
.bar-nav a:hover, .bar-nav button:hover { color: var(--text); }
.bar-end { justify-self: end; display: flex; align-items: center; gap: 10px; }
.bar-get { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: 999px; background: var(--tap); color: #fff; font-size: 13.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.bar-get:hover { color: #fff; filter: brightness(1.1); }
.bar-get:active { filter: brightness(.9); }
.bar-get i { font-size: 15px; }
.bar-nav .bar-get, .bar-menu { display: none; }
.bar-nav, .bar-get, .bar-menu { transition: opacity .6s ease, transform .8s cubic-bezier(.2,.8,.2,1), visibility 0s; }
html.js .bar:not(.on) :is(.bar-nav, .bar-get, .bar-menu) { opacity: 0; visibility: hidden; transform: translateY(-6px); }
@media (max-width: 999px) {
  .bar { grid-template-columns: 1fr auto; }
  .bar-end .bar-get { display: none; }
  .bar-menu { display: grid; place-items: center; width: 36px; height: 36px; margin-right: -6px; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--text); font-size: 22px; cursor: pointer; }
  html:not(.js) .bar-menu { display: none; }
  .bar-nav { position: absolute; top: calc(100% + 4px); left: 8px; right: 8px; flex-direction: column; align-items: stretch; gap: 0; padding: 8px;
    border-radius: 14px; background: var(--surface); box-shadow: 0 18px 48px rgba(0, 0, 0, .5);
    opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s ease, transform .25s cubic-bezier(.2,.8,.2,1), visibility 0s .25s; }
  .bar.open .bar-nav { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .25s cubic-bezier(.2,.8,.2,1); }
  html:not(.js) .bar-nav { display: none; }
  .bar-nav a, .bar-nav button { display: flex; align-items: center; height: 48px; padding: 0 12px; border-radius: 10px; color: var(--text); font-size: 17px; text-align: left; }
  .bar-nav a:hover, .bar-nav button:hover { background: var(--chip); }
  .bar-nav .bar-get { display: flex; justify-content: center; gap: 8px; height: 46px; margin-top: 8px; border-radius: 999px; background: var(--tap); color: #fff; font-size: 15px; }
  .bar-nav .bar-get:hover { background: var(--tap); color: #fff; }
}
@media (prefers-reduced-motion: reduce) { .bar, .bar * { transition: none !important; } }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* Après la scène : pour quelles voitures, puis le pied. */
.after { position: relative; z-index: 1; padding: 40px 24px 40px; text-align: center; color: var(--text-2); font-size: 13px; }
.after .for { max-width: 560px; margin: 0 auto 28px; line-height: 1.6; text-wrap: balance; }
.after .for strong { display: block; color: var(--text-soft); font-weight: 500; margin-bottom: 4px; }
.after .by { margin: -12px auto 28px; color: var(--text-soft); text-wrap: balance; }
.after .by a { color: inherit; text-decoration: underline; text-decoration-color: #51546c; text-underline-offset: 3px; }
.after .by a:hover { color: var(--text); text-decoration-color: currentColor; }
.after .ct-open { margin: 0 0 8px; padding: 4px 8px; border: 0; background: none; color: var(--text-2); font: inherit; cursor: pointer; }
.after .ct-open:hover { color: var(--text); }

/* Les fenêtres (contact, marques) : une surface plate sur un voile flou. */
.ctd { width: min(460px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 0; background: none; color: var(--text); overflow: visible; }
.ctd::backdrop { background: rgba(5, 6, 12, .7); -webkit-backdrop-filter: blur(10px) saturate(.9); backdrop-filter: blur(10px) saturate(.9); }
.ctd[open] { animation: ctdIn .28s cubic-bezier(.2, .8, .2, 1) both; }
.ctd[open]::backdrop { animation: ctdFade .28s ease both; }
@keyframes ctdIn { from { opacity: 0; transform: translateY(14px) scale(.975); } }
@keyframes ctdFade { from { opacity: 0; } }
.ctd-panel { position: relative; max-height: calc(100dvh - 32px); overflow: auto; padding: 26px 22px 22px; border-radius: 14px; background: var(--surface); }
.ctd h2 { margin: 0 44px 6px 0; font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.ctd-lead { margin: 0 0 18px; color: var(--text-2); font-size: 14.5px; line-height: 1.5; text-wrap: pretty; }
.ctd-x { position: absolute; top: 16px; right: 16px; width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 999px; background: var(--chip); color: var(--text-2); font-size: 14px; cursor: pointer; }
.ctd-x:hover { color: var(--text); }
.ctd .ct { display: flex; flex-direction: column; gap: 10px; }
.ctd .ct textarea, .ctd .ct input { width: 100%; min-width: 0; padding: 0 14px; border-radius: 10px; border: 0; background: var(--chip); color: var(--text); font: inherit; font-size: 15px; outline: none; transition: box-shadow .15s; }
.ctd .ct textarea { padding: 12px 14px; resize: none; height: 148px; line-height: 1.45; }
.ctd .ct input { height: 46px; }
.ctd .ct ::placeholder { color: var(--text-3); }
.ctd .ct textarea:focus, .ctd .ct input:focus { box-shadow: 0 0 0 2px var(--tap); }
.ctd .ct .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ctd-foot { display: flex; align-items: center; gap: 16px; margin-top: 6px; }
.ctd-foot .note { flex: 1; margin: 0; color: var(--text-2); font-size: 13px; line-height: 1.4; }
.ctd-foot .note.bad { color: var(--spend); }
.ctd button[type=submit], .ctd-ok { flex: none; height: 44px; padding: 0 22px; border-radius: 999px; border: 0; background: var(--tap); color: #fff; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.ctd button[type=submit]:hover, .ctd-ok:hover { filter: brightness(1.1); }
.ctd button[type=submit]:active, .ctd-ok:active { filter: brightness(.9); }
.ctd button[type=submit]:disabled { opacity: .5; cursor: default; }
.ctd-done { padding: 14px 0 4px; text-align: center; }
.ctd-done[hidden], .ctd-body[hidden] { display: none; }
.ctd-done .ph-check-circle { display: block; margin: 0 auto 14px; font-size: 44px; color: var(--green); animation: ctdIn .35s cubic-bezier(.2, .8, .2, 1) both; }
.ctd-done h2 { margin: 0 0 6px; }
.ctd-done .ctd-lead { margin-bottom: 22px; }
@media (max-width: 420px) {
  .ctd-panel { padding: 24px 18px 18px; }
  .ctd-foot { flex-direction: column; align-items: stretch; }
  .ctd-foot .note { text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .ctd[open], .ctd[open]::backdrop, .ctd-done .ph-check-circle { animation: none; } }
/* Android Automotive OS : le mot mène à la page des voitures compatibles
   (2026-10-23 ; avant, il ouvrait la liste des marques dans une fenêtre). */
.aaos { text-decoration: underline dotted color-mix(in srgb, var(--tap) 55%, transparent); text-underline-offset: 4px; }
.nw { white-space: nowrap; }
.aaos:hover { text-decoration-color: currentColor; }
.after small { display: block; margin-top: 14px; color: var(--text-3); font-size: 12px; }

noscript p { max-width: 480px; margin: 30vh auto; padding: 0 24px; text-align: center; font-size: 17px; }
.after .qc { display: flex; justify-content: center; margin: -14px auto 24px; }
.after .qc img { display: block; height: 24px; width: auto; border-radius: 2px; }

/* « Disponible maintenant » : une surface plate, le titre en phrase, le
   bouton plein dans le bleu d'iOS (2026-10-10). La waitlist qu'elle portait
   avant la sortie est partie le jour de la sortie. */
.soon {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: min(420px, calc(100vw - 32px)); text-align: center;
  padding: 24px 24px 26px; border-radius: 10px; background: var(--surface);
}
.soon > i { font-size: 26px; color: var(--text); margin-bottom: 6px; }
.soon b { font-size: 22px; font-weight: 600; letter-spacing: -.02em; color: var(--text); }
.soon > span { font-size: 14px; color: var(--text-2); }
.soon-go {
  height: 44px; padding: 0 22px; border-radius: 999px; border: 0;
  background: var(--tap); color: #fff; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
a.soon-go { display: inline-flex; align-items: center; margin-top: 16px; text-decoration: none; }
.soon-go:hover { filter: brightness(1.1); }
.soon-go:active { filter: brightness(.9); }
@media (max-width: 480px) { .soon { padding: 22px 18px 24px; } }

/* Les liens du pied : Confidentialité et Contact côte à côte (2026-09-23). */
.after .links { display: flex; justify-content: center; gap: 8px; margin: 0 0 8px; }
.after .links a { padding: 4px 8px; color: var(--text-2); text-decoration: none; }
.after .links a:hover { color: var(--text); }
.after .links .ct-open { margin: 0; }

/* La politique de confidentialité (privacy.html, fr/privacy.html) : le fond
   uni de l'accueil, une colonne de lecture, une surface par rubrique. */
.legal-page .lang { position: absolute; top: 24px; }
.legal { max-width: 720px; margin: 0 auto; padding: 28px 16px 24px; }
.legal .mark { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-size: 19px; font-weight: 500; letter-spacing: .04em; }
.legal .mark svg { display: block; overflow: visible; }
/* Le retour à l'accueil, au-dessus du titre ; il revient là où on était
   quand on arrive de l'accueil (2026-09-24). */
.legal .back { display: flex; width: fit-content; align-items: center; gap: 6px; margin-top: 56px; height: 34px; padding: 0 14px 0 10px; border-radius: 999px; background: var(--chip); color: var(--text-soft); font-size: 14px; font-weight: 500; text-decoration: none; }
.legal .back i { font-size: 15px; }
.legal .back:hover { color: var(--text); }
.legal h1 { margin: 28px 0 12px; font-size: clamp(34px, 6vw, 48px); font-weight: 500; letter-spacing: -.025em; color: var(--text); }
.legal .upd { margin: 0 0 32px; font-size: 14px; color: var(--text-2); }
.legal .intro { margin: 0 0 32px; font-size: 18px; line-height: 1.65; color: var(--text); text-wrap: pretty; }
.legal section { display: grid; grid-template-columns: 28px 1fr; gap: 0 16px; margin-bottom: 10px; padding: 22px 20px; border-radius: 10px; background: var(--surface); }
.legal section > i { font-size: 24px; line-height: 1; color: var(--text-soft); padding-top: 1px; }
.legal h2 { margin: 0 0 10px; font-size: 19px; font-weight: 500; letter-spacing: -.01em; color: var(--text); }
.legal p, .legal li { font-size: 15.5px; line-height: 1.7; color: var(--text-soft); text-wrap: pretty; }
.legal p { margin: 0 0 12px; }
.legal section p:last-child, .legal section ul:last-child, .legal section ol:last-child { margin-bottom: 0; }
.legal ul { list-style: none; margin: 4px 0 14px; padding: 0; }
.legal li { position: relative; padding-left: 18px; margin-bottom: 8px; }
.legal li::before { content: ""; position: absolute; left: 2px; top: .72em; width: 5px; height: 5px; border-radius: 50%; background: var(--text-3); }
.legal strong { font-weight: 500; color: var(--text); }
.legal section a { color: var(--tap); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--tap) 45%, transparent); }
.legal section a:hover { text-decoration-color: currentColor; }
.legal-page .after { padding-top: 40px; max-width: 720px; margin: 24px auto 0; }

/* Les voitures compatibles (cars.html, fr/cars.html, 2026-10-23) : la liste
   des marques, qui tenait dans une fenêtre de l'accueil, devient une page.
   Une colonne de lecture comme la politique, une surface par marque, le
   menu en haut. */
.cars { max-width: 720px; margin: 0 auto; padding: 112px 16px 24px; }
.cars h1 { margin: 0 0 14px; font-size: clamp(34px, 6vw, 48px); font-weight: 500; letter-spacing: -.025em; color: var(--text); }
.cars .intro { margin: 0 0 28px; font-size: 18px; line-height: 1.65; color: var(--text-soft); text-wrap: pretty; }
.cars h2 { margin: 48px 0 14px; font-size: 22px; font-weight: 500; letter-spacing: -.015em; color: var(--text); }
.cars-tip { display: grid; grid-template-columns: 28px 1fr; gap: 0 16px; padding: 20px; border-radius: 10px; background: var(--surface); }
.cars-tip + .cars-tip { margin-top: 8px; }
.cars-tip > i { font-size: 24px; line-height: 1; color: var(--text-soft); padding-top: 1px; }
.cars-tip b { display: block; margin-bottom: 4px; font-size: 16.5px; font-weight: 500; color: var(--text); }
.cars-tip p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-soft); text-wrap: pretty; }
.cars-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.cars-list li { padding: 16px; border-radius: 10px; background: var(--surface); }
.cars-list b { display: block; margin-bottom: 6px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--text); }
.cars-list span { display: block; font-size: 14.5px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.cars-list small { color: var(--text-3); font-size: 12px; white-space: nowrap; }
.cars-note { margin: 12px 0 0; font-size: 14px; line-height: 1.55; color: var(--text-2); }
.cars-ask { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 56px; padding: 28px 24px; border-radius: 10px; background: var(--surface); text-align: center; }
.cars-ask b { font-size: 22px; font-weight: 600; letter-spacing: -.02em; color: var(--text); }
.cars-ask span { font-size: 15px; color: var(--text-2); text-wrap: balance; }
.cars-ask .soon-go { margin-top: 16px; }
.cars ~ .after { padding-top: 56px; }
.bar-nav [aria-current="page"] { color: var(--text); }
.legal-page .after .by { margin-top: 0; }
@media (max-width: 560px) {
  .legal .back { margin-top: 40px; }
  .legal h1 { margin-top: 24px; }
  .legal .intro { font-size: 17px; }
  .legal section { grid-template-columns: 1fr; gap: 10px; padding: 18px 16px; }
}

/* La page des testeurs (testers/, fr/testers/, 2026-09-24) : les étapes
   numérotées, le bouton d'adhésion Play et les tableaux, dans la colonne
   de la politique de confidentialité. */
.legal ol { list-style: none; counter-reset: step; margin: 4px 0 14px; padding: 0; }
.legal ol li { counter-increment: step; padding-left: 34px; margin-bottom: 10px; }
.legal ol li::before { content: counter(step); left: 0; top: .2em; width: 24px; height: 24px; border-radius: 50%; background: var(--chip); color: var(--text-soft); font-family: var(--num); font-size: 13px; font-weight: 600; line-height: 24px; text-align: center; }
.legal ol ul { margin: 8px 0 0; }
.legal ol ul li { counter-increment: none; padding-left: 18px; margin-bottom: 6px; }
.legal ol ul li::before { content: ""; left: 2px; top: .72em; width: 5px; height: 5px; background: var(--text-3); }
.legal .cta { display: inline-flex; align-items: center; gap: 8px; margin: 2px 0 6px; height: 44px; padding: 0 20px; border-radius: 999px; background: var(--tap); color: #fff; font-size: 15px; font-weight: 600; text-decoration: none; }
.legal section a.cta { color: #fff; text-decoration: none; }
.legal section a.cta:hover { filter: brightness(1.1); color: #fff; }
.legal .note { padding: 14px 16px; border-radius: 10px; background: var(--chip); }
.legal .scroll { overflow-x: auto; margin: 4px 0 14px; }
.legal table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.55; }
.legal th { text-align: left; font-weight: 500; color: var(--text); padding: 0 12px 10px 0; border-bottom: .5px solid var(--sep); }
.legal td { color: var(--text-soft); padding: 10px 12px 10px 0; border-bottom: .5px solid var(--sep); vertical-align: top; }
.legal tr:last-child td { border-bottom: 0; }
@media (max-width: 560px) { .legal table { font-size: 14px; } .legal th, .legal td { padding-right: 8px; } }

/* Les maquettes de l'écran de la voiture (testers/, 2026-09-24). Elles
   dessinent l'app de la voiture, qui garde son propre dessin : seul le
   cadre s'aplatit. L'écran « Configurer wattata » n'en montre que trois
   lignes : les deux suivantes sont dessinées sous le bord, en pointillés,
   pour dire qu'il faut faire défiler. Puis le chemin des réglages Android
   pour « Toujours autoriser ». */
.mock { margin: 8px 0 20px; }
.mock .scr { position: relative; background: #11121d; border-radius: 12px; padding: 18px 18px 6px; overflow: hidden; }
.mock .bar { display: flex; justify-content: space-between; align-items: center; margin: -6px 0 14px; font-size: 11px; color: #6f7389; }
.mock .hd { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.mock .hd b { display: block; font-size: 17px; font-weight: 500; color: var(--text); }
.mock .hd small { display: block; font-size: 12px; color: var(--text-2); line-height: 1.4; }
.mock .all { flex: none; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #9fe0a8; border: 1px solid rgba(159,224,168,.45); border-radius: 6px; padding: 6px 9px; }
.mock .all.wait { color: var(--brand-l); border-color: rgba(145,132,217,.6); }
.mock .sb { position: absolute; right: 5px; top: 96px; width: 3px; height: 38%; border-radius: 2px; background: #b5abfc; }
.mock .row { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; padding: 9px 12px; margin-bottom: 8px; border-radius: 10px; background: #1b1d2c; }
.mock .row i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(145,132,217,.18); color: var(--brand-l); font-size: 14px; }
.mock .row b { display: block; font-size: 13px; font-weight: 500; color: var(--text); line-height: 1.3; }
.mock .row small { display: block; font-size: 11.5px; color: var(--text-2); line-height: 1.35; }
.mock .ok { font-size: 11.5px; color: #9fe0a8; white-space: nowrap; }
.mock .ok::before { content: "✓ "; }
.mock .todo { font-size: 11px; color: #f0b86e; border: 1px solid rgba(240,184,110,.6); border-radius: 6px; padding: 4px 8px; white-space: nowrap; }
.mock .fold { position: relative; margin: 14px 0 10px; text-align: center; font-size: 13px; font-weight: 500; color: #f0b86e; }
.mock .fold::before, .mock .fold::after { content: ""; position: absolute; top: 50%; width: calc(50% - 130px); border-top: 1px dashed rgba(240,184,110,.6); }
.mock .fold::before { left: 0; } .mock .fold::after { right: 0; }
.mock .fold i { vertical-align: -2px; margin-right: 4px; }
.mock .hid .row { background: transparent; border: 1px dashed #4a4d66; }
.mock figcaption { margin-top: 10px; font-size: 13px; color: var(--text-2); text-align: center; }
.path { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 8px 0 20px; counter-reset: pane; }
.path .scr { background: #11121d; border-radius: 10px; padding: 12px; font-size: 12px; color: var(--text-soft); counter-increment: pane; }
.path .scr > b { display: block; font-size: 12.5px; font-weight: 500; color: var(--text); margin-bottom: 8px; }
.path .scr > b::before { content: counter(pane); display: inline-block; width: 18px; height: 18px; margin-right: 6px; border-radius: 50%; background: var(--chip); color: var(--text-soft); font-family: var(--num); font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; }
.path .it { padding: 7px 8px; border-radius: 6px; line-height: 1.3; }
.path .it small { display: block; color: #6f7389; font-size: 10.5px; }
.path .it.on { background: #2a8aa8; color: #fff; }
.path .it.on small { color: rgba(255,255,255,.75); }
.path .rd { display: flex; gap: 8px; align-items: center; padding: 7px 8px; line-height: 1.3; }
.path .rd::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--text-2); }
.path .rd.on { color: var(--text); font-weight: 500; }
.path .rd.on::before { border-color: var(--text); background: radial-gradient(var(--text) 40%, transparent 45%); }
@media (max-width: 560px) {
  .path { grid-template-columns: 1fr; }
  .mock .scr { padding: 14px 12px 4px; }
  .mock .hd { flex-direction: column; }
  .mock .row { grid-template-columns: 24px 1fr; }
  .mock .row i { width: 24px; height: 24px; }
  .mock .row > :last-child { grid-column: 2; justify-self: start; }
  .mock .fold::before, .mock .fold::after { width: calc(50% - 120px); }
}

/* ── L'accueil, page statique (2026-09-24) ───────────────────────────────
   Rien ne dépend plus de la position du défilement : chaque bloc .rv
   apparaît une fois, quand il entre à l'écran (site.js lui pose .in). Sans
   script, tout est simplement visible. */

/* L'ouverture : le logo se trace, le nom et la tagline montent, le cadran
   s'allume, puis le Duo s'ouvre. */
.hero { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; padding: 56px 16px 72px; position: relative; overflow-x: clip; }
.brand { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.brand .name { margin: 0; font-size: 32px; font-weight: 500; letter-spacing: .04em; line-height: 1; }
.brand .tagline { margin: 0; font-size: 16px; line-height: 1.4; color: var(--text-soft); text-align: center; text-wrap: pretty; max-width: 320px; }
.w-lit { stroke-dasharray: 1 2; animation: wDraw 1s cubic-bezier(.65,0,.35,1) .2s both; }
.w-dot { transform-box: fill-box; animation: wDrop .7s 1.15s both; }
.brand .name { animation: rise .7s cubic-bezier(.2,.8,.2,1) 1.45s both; }
.brand .tagline { animation: rise .7s cubic-bezier(.2,.8,.2,1) 1.65s both; }
@keyframes wDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes wDrop {
  0% { transform: translateY(-1500px); animation-timing-function: cubic-bezier(.55,0,1,.45); }
  55% { transform: translateY(0); animation-timing-function: cubic-bezier(0,.55,.45,1); }
  75% { transform: translateY(-180px); animation-timing-function: cubic-bezier(.55,0,1,.45); }
  90% { transform: translateY(0); animation-timing-function: cubic-bezier(0,.55,.45,1); }
  95% { transform: translateY(-40px); animation-timing-function: cubic-bezier(.55,0,1,.45); }
  100% { transform: translateY(0); }
}
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }

.stage { flex: 1; width: 100%; display: flex; align-items: center; justify-content: center; position: relative; padding-top: 40px; }
/* Le Duo (2026-10-13), et le cadran d'avant avec lui : les cadrans
   s'allument seuls au milieu de la scène, l'iPhone fermé arrive autour d'eux,
   puis le Duo s'ouvre sur l'accueil en paysage. Les deux appareils sont des
   captures du Device Hub d'Xcode 27.1, détourées, une paire par langue
   (1398 × 1068 pour l'ouvert, 756 × 1049 pour le fermé, à la même échelle).
   L'ouvert est déjà plié vers soi : chaque moitié en montre sa part, coupée à
   la charnière (--hf), et se déplie depuis elle. Sans script ou sans
   animation, le Duo est ouvert d'emblée ; site.js pose .play, .land puis .open. */
.duo { --hf: .4982; position: relative; margin: 0; aspect-ratio: 1398 / 1068;
  width: min(calc(100% / 1.16), max(320px, min(1080px, calc((100svh - 330px) * 1.31)))); }
.duo-half { position: absolute; top: 0; bottom: 0; background: var(--open) no-repeat; }
.duo-l { left: 0; width: calc(var(--hf) * 100%); background-size: calc(100% / var(--hf)) 100%; background-position: left center; transform-origin: right center; }
.duo-r { left: calc(var(--hf) * 100%); right: 0; background-size: calc(100% / (1 - var(--hf))) 100%; background-position: right center; transform-origin: left center; }
/* L'iPhone fermé porte le cadran vivant : la capture a perdu le sien, effacé,
   et la boîte du cadran (390 × 400) se pose à sa place, à l'échelle (--k1).
   Au début, site.js agrandit l'iPhone entier (--s) autour du grand cadran,
   qui tient seul le milieu de la scène, l'appareil encore invisible ; .land
   le ramène à sa taille et le fait paraître autour des cadrans. */
.duo-shut { position: absolute; left: 22.78%; top: .89%; width: 54.08%; aspect-ratio: 756 / 1049; display: none; }
.duo-shut > img { display: block; width: 100%; height: auto; }
.duo .cluster { position: absolute; left: 0; top: 0; width: 390px; height: 400px; transform-origin: 0 0;
  transform: translate(var(--x1), var(--y1)) scale(var(--k1)); }
html.js .cluster.wait * { animation-play-state: paused !important; }
.duo.play .duo-shut { display: block; transform: translate(var(--tx), var(--ty)) scale(var(--s)); }
.duo.play .duo-shut > img { opacity: 0; }
.duo.play .duo-l { opacity: 0; transform: perspective(2400px) rotateY(90deg); }
.duo.play .duo-r { opacity: 0; transform: perspective(2400px) rotateY(-90deg); }
.duo.land .duo-shut { transform: none; transition: transform 1s cubic-bezier(.6,0,.2,1); }
.duo.land .duo-shut > img { opacity: 1; transition: opacity .7s ease .25s; }
/* La température et la voiture du cadran ne tombent pas sur celles de l'app : elles s'effacent, l'écran prend le relais. */
.duo.land .cluster .cl-tag { opacity: 0; transition: opacity .4s ease; }
.duo.open .duo-shut { transform: perspective(2400px) rotateY(-90deg); transition: transform .35s cubic-bezier(.55,0,1,.45); }
.duo.open .duo-half { opacity: 1; transform: perspective(2400px) rotateY(0deg); transition: transform 1.1s cubic-bezier(.2,.75,.25,1) .3s, opacity .15s linear .3s; }
/* L'iPhone et la montre (2026-10-21) : une fois le Duo ouvert, ils arrivent
   devant lui, pour qu'on ne croie pas wattata réservé au Duo. L'iPhone passe
   par cinq écrans de l'app, la montre montre la Live Activity du trajet
   « En route » de la capture (la famille .small de TripLiveActivity.swift
   dans wattata-ios). Chacun est dessiné dans ses propres points : --p vaut
   un point de l'iPhone (440 de large, cadre compris, écran de 402), --q un
   point de la montre (écran de 208), --u un point de son boîtier (234 de
   large, couronne comprise). Sans script ou sans animation, ils sont là
   d'emblée, l'iPhone sur le bloc-instruments ; site.js pose .more, fait
   courir la durée et change d'écran. */
.kin { position: absolute; z-index: 1; container-type: inline-size; filter: drop-shadow(0 1.6vw 2.4vw rgba(0,0,0,.6)); }
.kin-ip { right: -9%; bottom: -7%; width: 25.5%; aspect-ratio: 440 / 912; }
.kin-aw { left: -5%; bottom: -2%; width: 17%; aspect-ratio: 234 / 260; }
/* Au téléphone, pas de place de part et d'autre : le Duo reprend toute la
   largeur, l'iPhone et la montre tiennent dedans et descendent sous lui, dans
   une réserve qui garde la scène centrée et immobile quand ils arrivent. */
@media (max-width: 699px) {
  .duo { width: min(100%, max(320px, min(1080px, calc((100svh - 330px) * 1.31)))); margin-bottom: 31%; }
  .kin-ip { right: 1%; bottom: -40%; width: 34%; }
  .kin-aw { left: 2%; bottom: -27%; width: 25%; }
}
.kin b { font-weight: 600; }
.ip { --p: calc(100cqw / 440); position: absolute; inset: 0; padding: calc(5 * var(--p)); border-radius: calc(74 * var(--p));
  background: linear-gradient(140deg, #6d6f75, #2b2c31 28%, #46484e 52%, #1c1d21 78%, #5a5c62); }
.ip-b { position: absolute; width: 1.2%; border-radius: calc(2 * var(--p)); background: linear-gradient(90deg, #2a2b30, #5d5f65, #2a2b30); z-index: -1; }
.ip-scr { position: relative; height: 100%; overflow: hidden; border: calc(14 * var(--p)) solid #030305; border-radius: calc(69 * var(--p)); color: #fff; background: #0a0b14; background-clip: padding-box; }
/* L'écran : les captures de wattata-ios (marketing/app-store/shots, la barre d'état de l'anglais remise à 4:46), une seule .on à la fois. */
.ip-app img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s ease; }
.ip-app img.on { opacity: 1; }
.ip-di { position: absolute; left: 50%; top: calc(11 * var(--p)); width: calc(126 * var(--p)); height: calc(37 * var(--p)); margin-left: calc(-63 * var(--p)); border-radius: 99px; background: #000; }
/* La montre : le boîtier, la couronne, le bracelet qui s'efface, et la carte de la Smart Stack. */
.aw { --u: calc(100cqw / 234); --q: calc(100cqw / 248.4); position: absolute; left: 0; top: 0; width: calc(220 * var(--u)); height: 100%; padding: calc(12 * var(--u)); border-radius: calc(62 * var(--u));
  background: linear-gradient(150deg, #55575e, #1d1e22 34%, #2e2f34 64%, #121316); }
.aw::before, .aw::after { content: ""; position: absolute; left: calc(40 * var(--u)); right: calc(40 * var(--u)); height: calc(96 * var(--u)); z-index: -1; background: linear-gradient(90deg, #131418, #24252a 50%, #131418); }
.aw::before { bottom: calc(100% - 20 * var(--u)); border-radius: calc(20 * var(--u)) calc(20 * var(--u)) 0 0; -webkit-mask-image: linear-gradient(to top, #000 30%, transparent); mask-image: linear-gradient(to top, #000 30%, transparent); }
.aw::after { top: calc(100% - 20 * var(--u)); border-radius: 0 0 calc(20 * var(--u)) calc(20 * var(--u)); -webkit-mask-image: linear-gradient(#000 30%, transparent); mask-image: linear-gradient(#000 30%, transparent); }
.aw-crown, .aw-side { position: absolute; left: calc(100% - 3 * var(--u)); z-index: -1; }
.aw-crown { top: calc(58 * var(--u)); width: calc(17 * var(--u)); height: calc(46 * var(--u)); border-radius: calc(5 * var(--u));
  background: repeating-linear-gradient(#5e6067 0 calc(2 * var(--u)), #2a2b30 calc(2 * var(--u)) calc(4 * var(--u))); }
.aw-side { top: calc(128 * var(--u)); width: calc(8 * var(--u)); height: calc(58 * var(--u)); border-radius: calc(3 * var(--u)); background: linear-gradient(90deg, #2a2b30, #56585e); }
.aw-scr { position: relative; height: 100%; border-radius: calc(50 * var(--u)); background: #000; color: #fff; overflow: hidden; }
.aw-time { position: absolute; right: calc(20 * var(--q)); top: calc(10 * var(--q)); font-size: calc(17 * var(--q)); font-weight: 600; font-variant-numeric: tabular-nums; }
.aw .la { position: absolute; left: calc(7 * var(--q)); right: calc(7 * var(--q)); top: calc(92 * var(--q)); display: grid; gap: calc(4 * var(--q));
  padding: calc(12 * var(--q)) calc(14 * var(--q)); border-radius: calc(22 * var(--q)); background: #161826; line-height: 1; }
.la-w { display: flex; justify-content: space-between; gap: calc(8 * var(--q)); }
.la-w b { font-size: calc(26 * var(--q)); }
.la-wt { font-family: var(--num); font-size: calc(22 * var(--q)); font-weight: 600; font-variant-numeric: tabular-nums; }
.la-w > span { display: flex; align-items: baseline; gap: calc(2 * var(--q)); font-family: var(--num); }
.la-w small { font-family: var(--font); font-size: calc(10 * var(--q)); font-weight: 500; color: #898da1; }
.kin .a { color: #9184d9; }
/* L'arrivée : l'iPhone par la droite, la montre par la gauche, puis la carte paraît sur la montre. */
.duo.play .kin { opacity: 0; transform: translate(var(--kx), 10%); }
.duo.play .kin-ip { --kx: 16%; }
.duo.play .kin-aw { --kx: -20%; }
.duo.play .aw .la { opacity: 0; transform: translateY(8%) scale(.94); }
.duo.more .kin { opacity: 1; transform: none; transition: opacity .6s ease, transform 1.1s cubic-bezier(.2,.8,.2,1); }
.duo.more .kin-aw { transition-delay: .2s; }
.duo.more .aw .la { opacity: 1; transform: none; transition: opacity .5s ease 1.1s, transform .7s cubic-bezier(.2,.9,.3,1.15) 1.1s; }
.cue { position: absolute; left: 0; right: 0; bottom: 20px; display: flex; justify-content: center; transition: opacity .4s; animation: gzin .6s ease 3.6s both; }
.cue i { display: block; font-size: 24px; color: var(--text-3); animation: scrollCue 1.6s cubic-bezier(.45,0,.55,1) infinite; }
.cue.gone { opacity: 0; }

/* Les sections, en chapitres (2026-10-08, sans filet depuis le
   2026-10-10) : le titre en phrase, l'intro juste dessous, et les cartes
   qui partent du même bord. --w suit ce qui tient en largeur : trois
   cartes, puis deux, puis une. */
.feat { padding: 96px 16px; overflow-x: clip; }
.ch { --w: 1112px; padding-top: 136px; }
.ch > * { max-width: var(--w); margin-left: auto; margin-right: auto; }
.ch .ch-head { display: grid; gap: 14px; margin-bottom: 40px; }
.ch .ch-head h2 { margin: 0; font-size: clamp(30px, 3.4vw, 44px); font-weight: 500; line-height: 1.08; letter-spacing: -.025em; color: var(--text); text-wrap: balance; }
.ch .ch-head .lead { margin: 0; max-width: 60ch; font-size: 16.5px; line-height: 1.6; color: var(--text-2); text-wrap: pretty; }
.cards { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; gap: 16px; }
@media (max-width: 1199px) { .ch { --w: 736px; } }
@media (max-width: 879px) { .ch { --w: 600px; padding-top: 104px; } }

/* Qu'est-ce que wattata : le même en-tête, centré. */
.ch.how .ch-head { justify-items: center; gap: 20px; margin-bottom: 0; }
.ch.how .ch-head h2 { text-align: center; }
.how-text { max-width: 60ch; margin: 0 auto; text-align: center; }
.how-text p { margin: 0 0 20px; font-size: 18px; line-height: 1.65; color: var(--text-soft); text-wrap: pretty; }
.how-text p:last-child { margin-bottom: 0; }
@media (max-width: 600px) { .how-text p { font-size: 16px; } }

/* ── Les cartes de l'app, système 2a ─────────────────────────────────── */
.card { position: relative; width: 360px; max-width: 100%; border-radius: 10px; background: var(--surface); overflow: hidden; }
.c-in { display: flex; flex-direction: column; gap: 14px; padding: 14px 16px 16px; }
.c-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.c-row.base { align-items: baseline; }
.c-t { font-size: 16.5px; font-weight: 500; line-height: 1.3; color: var(--text); }
.c-mt { font-size: 20px; font-weight: 500; line-height: 1.2; letter-spacing: -.01em; color: var(--text); }
.c-sub { margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--text-2); }
.c-meta { font-size: 12.5px; color: var(--text-2); }
.c-fine { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-3); text-wrap: pretty; }
.c-tag { display: flex; align-items: center; gap: 7px; }
.c-tag > i { font-size: 16px; }
.home { color: var(--brand-l); }
.work { color: var(--work); }
.pro { color: var(--brand-l); }
/* La pastille des dates et des périodes (PeriodPill). */
.pill { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 999px; background: var(--chip); font-size: 12.5px; line-height: 1.2; color: var(--text-2); white-space: nowrap; }
.pill > i { font-size: 10px; }
.pill.soft { color: var(--text-soft); }
/* Le héros : le chiffre en 36 arrondi, l'unité en 14 à côté. */
.hn { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.hn > b { font-family: var(--num); font-weight: 600; font-size: 36px; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--text); }
.hn.xl > b { font-size: 48px; letter-spacing: -.03em; }
.hn .u { font-size: 14px; font-weight: 500; color: var(--text-2); }
.hn .ord { margin-left: -3px; }
.ctx { margin-top: 6px; font-size: 13px; line-height: 1.4; color: var(--text-2); }
.trend { display: inline-flex; align-items: baseline; gap: 4px; font-size: 12.5px; color: var(--text-2); white-space: nowrap; }
.trend i { align-self: center; color: var(--text-soft); }
.trend b { font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; }
/* Les chiffres en deux colonnes : la valeur en 18, l'unité collée en
   petit, le libellé dessous. */
.g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.st { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.st .v { font-family: var(--num); font-weight: 600; font-size: 18px; line-height: 1.25; font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.st .v small, .cf small, .figs small { font-family: var(--font); font-weight: 500; font-size: 12px; color: var(--text-3); }
.st .v small { margin-left: 3px; }
.st .v small.pre { margin: 0 1px 0 0; }
.st .l { font-size: 12px; color: var(--text-3); }
/* Les rangées d'une liste groupée : le séparateur part du texte et touche
   le bord droit. */
.rows { list-style: none; margin: 0; padding: 0; }
.rows > li { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 11px 16px; }
.rows > li + li::before { content: ""; position: absolute; top: 0; right: 0; left: var(--inset, 16px); border-top: .5px solid var(--sep); }
.rows .r-main { flex: 1; min-width: 0; }
.rows .r-main b { display: block; font-size: 15.5px; font-weight: 500; line-height: 1.3; color: var(--text); }
.rows .r-main span { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.35; color: var(--text-2); }
.caret { flex: none; font-size: 13px; color: var(--text-3); }
.list-hd { padding: 14px 16px 4px; }
.ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--chip); color: var(--text-soft); font-size: 17px; }
.ico.home { color: var(--brand-l); }
.ico.work { color: var(--work); }
.add { display: flex; align-items: center; gap: 8px; font-size: 15.5px; font-weight: 500; color: var(--ios-blue); }
.add i { font-size: 15px; }
.out-t { margin: 0 0 8px 4px; font-size: 15px; font-weight: 500; color: var(--text); }
.stack { width: 360px; max-width: 100%; }
.stack .card { width: 100%; }

/* La carte trajet (TripCell) : l'état, la destination, la courbe de la
   puissance, puis quatre chiffres. */
.trip .top { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 12px; }
.state { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--text); white-space: nowrap; }
.state > i { font-size: 14px; }
.curve { position: relative; padding-top: 24px; }
.curve svg { display: block; width: 100%; height: 50px; overflow: visible; }
.curve path, .curve line { vector-effect: non-scaling-stroke; }
.leaf { position: absolute; top: 0; right: 0; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 7px; border-radius: 999px; background: rgba(63, 191, 127, .14); color: var(--green); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.leaf i { font-size: 12px; }
.figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0 0 14px; }
.figs > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 0 12px; }
.figs > div:first-child { padding: 0 14px 0 16px; }
.figs b { font-family: var(--num); font-weight: 600; font-size: 18px; line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.figs small { font-size: 11px; }
.figs .g b { color: var(--green); }

/* Le mois : le héros, l'écart, la ligne de contexte, la grille, les jours. */
.wk-hd { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.wk-hd b { font-size: 12.5px; font-weight: 500; color: var(--text); }
.wk-hd span { font-size: 12px; color: var(--text-3); }
.wk { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: end; height: 76px; }
.wk > div { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; }
.wk i { display: block; width: 18px; border-radius: 4px; background: var(--track); }
.wk span { font-size: 11px; line-height: 1; color: var(--text-3); }

/* L'efficacité de la semaine : le héros, l'écart en pastille, les barres
   sur la grille, la médaille en pied. */
.chart { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: end; height: 110px; border-bottom: 1px solid var(--bar);
  background: linear-gradient(var(--gridline), var(--gridline)) 0 0 / 100% 1px no-repeat, linear-gradient(var(--gridline), var(--gridline)) 0 33.33% / 100% 1px no-repeat, linear-gradient(var(--gridline), var(--gridline)) 0 66.66% / 100% 1px no-repeat; }
.chart > div { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; }
.chart i { display: block; width: 10px; border-radius: 3px 3px 0 0; background: var(--bar); }
.chart i.on { background: var(--brand); }
.chart em { font-style: normal; font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--brand-l); }
.days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin-top: 8px; }
.days span { text-align: center; font-size: 11.5px; color: var(--text-3); }
.days span.now { color: var(--text); font-weight: 500; }
.best { display: flex; align-items: center; gap: 12px; }
.best .medal { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--chip); color: var(--medal); font-size: 18px; }
.best > div { flex: 1; min-width: 0; }
.best > div b { display: block; font-size: 14px; font-weight: 500; color: var(--text); }
.best > div span { display: block; font-size: 12px; color: var(--text-2); }
.best .val { flex: none; display: flex; align-items: baseline; gap: 3px; }
.best .val b { font-family: var(--num); font-weight: 600; font-size: 20px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--text); }
.best .val span { font-size: 11.5px; color: var(--text-2); }

/* Ce qui a eu de l'impact : une rangée par levier, ses segments. */
.segs { flex: none; display: flex; align-items: center; gap: 3px; }
.sg { display: block; width: 17px; height: 10px; border-radius: 3px; background: var(--base); }
.sg.n { width: 5px; }
.sg.seg { background: var(--on); }
.imp .rows > li { gap: 10px; padding-top: 12px; padding-bottom: 12px; }
.imp .r-l { flex: 1; min-width: 0; font-size: 15.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Le classement parmi les voitures du même modèle. */
.rk-avg { margin-bottom: 4px; text-align: right; font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.rk-bars { position: relative; display: flex; align-items: flex-end; gap: 3px; height: 40px; }
.rk-bars i { flex: 1; display: block; border-radius: 2px; background: var(--bar); }
.rk-bars i.on { background: var(--brand); }
.rk-bars .avg { position: absolute; left: 0; right: 0; bottom: 30px; border-top: 1px dashed var(--text-3); }
.rk-ends { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--text-3); }
.rk-me { display: inline-flex; align-items: baseline; gap: 6px; font-size: 13px; color: var(--text-2); white-space: nowrap; }
.rk-me i { align-self: center; width: 10px; height: 10px; border-radius: 2px; background: var(--brand); }
.rk-me b { font-family: var(--num); font-weight: 600; font-size: 17px; font-variant-numeric: tabular-nums; color: var(--text); }

/* Les recharges (carte 1a) : l'état et la date, le lieu, la batterie, la
   barre de cinq points, puis les chiffres qui passent à la ligne. */
.chg .state { color: var(--green); }
.soc { display: flex; align-items: center; gap: 8px; }
.soc .from { font-family: var(--num); font-weight: 600; font-size: 15px; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.soc .arr { font-size: 13px; color: var(--text-3); }
.soc .to { display: flex; align-items: baseline; gap: 4px; font-family: var(--num); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.soc .to b { font-weight: 600; font-size: 26px; line-height: 1; color: var(--text); }
.soc .to small { font-size: 14px; color: var(--text-2); }
.soc .heart { margin-left: auto; font-size: 18px; color: var(--red); }
.socbar { position: relative; height: 5px; border-radius: 3px; background: var(--base); overflow: hidden; }
.socbar i { position: absolute; top: 0; bottom: 0; left: 0; background: var(--track); }
.socbar i.plus { background: var(--green); }
.cfigs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; padding: 0 16px 14px; }
.cf { display: inline-flex; align-items: baseline; gap: 3px; white-space: nowrap; }
.cfx { display: inline-flex; align-items: baseline; gap: 12px; }
.cf b { font-family: var(--num); font-weight: 600; font-size: 17px; font-variant-numeric: tabular-nums; color: var(--text); }
.cf small { font-size: 11.5px; }
.cf.g b { color: var(--green); }
.cf.end { margin-left: auto; }
.cf.end b { color: var(--text-soft); }

/* Les profils de charge, leurs plages, et le détail d'un coût. */
.prof { --inset: 64px; }
.prof .add { --inset: 16px; }
.price { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 999px; background: rgba(10, 132, 255, .16); color: var(--ios-blue); font-size: 13px; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.price i { font-size: 11px; }
.price i.ph-caret-right { font-size: 10px; }
.grp-hd { margin: 2px 0 -6px 4px; font-size: 13px; color: var(--text-2); }
.box { border-radius: 10px; background: var(--chip); }
.box > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; font-size: 15px; color: var(--text); }
.box > div + div { box-shadow: inset 0 .5px 0 var(--sep); }
.box small { display: block; margin-top: 2px; font-size: 12px; color: var(--text-3); }
.box .r { font-family: var(--num); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-soft); white-space: nowrap; }
.cost { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 10px; background: var(--chip); font-size: 13px; line-height: 1.5; color: var(--text-2); }
.cost .ln { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cost .ln b { display: block; font-weight: 400; color: var(--text); }
.cost .ln small { display: block; margin-top: 1px; font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.cost .ln > span { font-family: var(--num); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.info { font-size: 15px; color: var(--text-2); }

/* Les voyages : la fiche, ses jours, un jour. */
.go { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-2); }
.go i { font-size: 17px; color: var(--amber); }
.go b { font-weight: 500; color: var(--text); }
.days-card .rows > li { padding-top: 11px; padding-bottom: 11px; }
.leg { display: flex; flex-direction: column; gap: 3px; }
.leg .when { font-size: 12.5px; color: var(--text-2); }
.leg .way { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.leg .way span { min-width: 0; font-size: 14.5px; line-height: 1.35; color: var(--text); }
.leg .way span em { font-style: normal; color: var(--text-3); }
.leg .way b { flex: none; font-family: var(--num); font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; color: var(--text); }
.leg .way b small { margin-left: 2px; font-family: var(--font); font-weight: 500; font-size: 11.5px; color: var(--text-3); }
.leg .tagl { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font-size: 12px; font-weight: 500; }
.leg .tagl i { font-size: 12px; }
.stop { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 10px; background: var(--chip); }
.stop .nm { display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--text); }
.stop .nm i { font-size: 16px; color: var(--amber); }
.day .rows > li { display: block; }
.day .rows > li.wrap { padding-top: 6px; padding-bottom: 6px; }
.day .rows > li.wrap::before { display: none; }
.day .rows > li.wrap + li::before { display: none; }
.more { display: flex !important; align-items: center; justify-content: space-between; font-size: 13.5px; color: var(--text-2); }
.more i { font-size: 13px; color: var(--text-3); }

/* Les frais : l'export et son fichier. */
.check { color: var(--ios-blue); font-size: 16px; }
.file { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; background: var(--chip); }
.file > i { flex: none; font-size: 26px; color: var(--text-soft); }
.file b { display: block; font-size: 13.5px; font-weight: 400; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.box .lead-i { display: flex; align-items: center; gap: 10px; }
.box .lead-i i { font-size: 17px; color: var(--text-soft); }

/* Le calendrier de la batterie, et sa liste à côté. */
.cal { display: flex; gap: 14px; justify-content: space-between; padding: 16px; }
.cal-text { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 22px); gap: 5px; flex: none; }
.cal-grid > span { text-align: center; font-size: 10.5px; color: var(--text-3); padding-bottom: 4px; }
.cell { width: 22px; height: 22px; border-radius: 5px; background: var(--chip); }
.cell.on { background: var(--brand); }
.cell.next { background: none; border: 1px dashed var(--bar); }
.cell.out { background: none; }
.cal .track { font-size: 13px; color: var(--brand-l); margin-top: 6px; }
.cards.batt { align-items: flex-start; }
.batt-list .rows b { flex: 1; font-size: 15.5px; font-weight: 400; color: var(--text); }
@media (max-width: 400px) {
  .cal { flex-direction: column-reverse; align-items: center; }
  .cal-text { width: 100%; flex-direction: row; align-items: flex-end; }
}

/* Comment ça marche et Questions fréquentes : deux listes groupées, l'une
   sous l'autre et de même largeur. Les étapes en rangées, le numéro à
   gauche, le séparateur aligné sur le texte (2026-10-11 ; côte à côte
   avant). */
.steps ol { list-style: none; margin: 0 auto 0 max(0px, calc((100% - var(--w)) / 2)); padding: 4px 0; max-width: 720px; border-radius: 10px; background: var(--surface); }
.steps li { position: relative; display: flex; align-items: flex-start; gap: 16px; padding: 16px 18px; }
.steps li + li::before { content: ""; position: absolute; top: 0; left: 70px; right: 0; border-top: .5px solid var(--sep); }
.steps a { color: var(--tap); text-underline-offset: 3px; }
.steps .n { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 999px; background: var(--chip); font-family: var(--num); font-size: 17px; font-weight: 600; color: var(--text); }
.steps b, .faq b { display: block; margin-bottom: 4px; font-size: 16.5px; font-weight: 500; line-height: 1.35; color: var(--text); }
.steps p, .faq p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-2); text-wrap: pretty; }
.faq ul { list-style: none; margin: 0 auto 0 max(0px, calc((100% - var(--w)) / 2)); padding: 4px 0; max-width: 720px; border-radius: 10px; background: var(--surface); }
.faq li { position: relative; padding: 16px 18px; }
.faq li + li::before { content: ""; position: absolute; top: 0; left: 18px; right: 0; border-top: .5px solid var(--sep); }
.faq a { color: var(--tap); text-underline-offset: 3px; }
.faq .ct-open { padding: 0; border: 0; background: none; font: inherit; color: var(--tap); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Le prix (2026-10-23) : l'essai, puis les deux abonnements comme le paywall
   de l'app les montre (Plan dans PaywallView.swift de wattata-ios) : le
   12 mois dit ses mois offerts et son prix ramené au mois, arrondi au cent
   inférieur. La page française en dollars canadiens, l'anglaise en dollars
   américains. */
.plan { width: 264px; }
.plan .c-in { gap: 24px; padding: 16px 18px 18px; }
.plan .c-row { min-height: 24px; }
.plan em { flex: none; padding: 3px 8px; border-radius: 99px; background: rgba(145,132,217,.16); font-style: normal; font-size: 12px; font-weight: 500; color: var(--brand-l); }
.pz { display: block; font-size: 40px; line-height: 1; letter-spacing: -.02em; color: var(--text); }
.pz-u { display: block; margin-top: 8px; font-size: 14px; color: var(--text-2); }
.plans .pz-note { margin-top: 20px; font-size: 13.5px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
@media (max-width: 600px) { .plan { width: 100%; } }

/* Et aussi : le reste de ce que l’app fait, en trois familles. */
.also .ch-head { margin-bottom: 36px; }
.grps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 48px; }
.grp h3 { margin: 0 0 20px; font-size: 15px; font-weight: 500; line-height: 1.35; letter-spacing: 0; color: var(--text-2); }
.grp ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 24px; }
.also li { display: flex; align-items: flex-start; gap: 14px; }
.also li i { flex: none; margin-top: 1px; font-size: 24px; color: var(--text-soft); }
.also b { display: block; margin-bottom: 4px; font-size: 16px; font-weight: 500; line-height: 1.35; color: var(--text); }
.also p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.also .also-end { display: flex; align-items: center; gap: 10px; margin: 48px auto 0; font-size: 15px; color: var(--text-soft); }
.also .also-end i { font-size: 20px; color: var(--text-soft); }
@media (max-width: 1199px) { .grps { gap: 40px 36px; } }
@media (max-width: 879px) { .grps { grid-template-columns: 1fr; gap: 36px; } }

/* Les astuces (2026-10-08) : la carte de l'app telle quelle, bordeaux éclairé
   depuis le coin haut gauche, ampoule dorée, le fait, le geste, le bénéfice ;
   depuis le système 2a, les mots de tête en phrase. Puis la liste de toutes. */
.tip-w { position: relative; width: 360px; max-width: 100%; }
.tip-w::before { content: ""; position: absolute; left: -150px; top: -150px; width: 300px; height: 300px; background: radial-gradient(closest-side, rgba(140,40,70,.55), rgba(140,40,70,.18) 45%, rgba(140,40,70,0)); z-index: 0; pointer-events: none; }
.card.tip { z-index: 1; width: 100%; padding: 18px; border: 1px solid rgba(233,215,222,.10); border-radius: 14px; background: radial-gradient(100% 90% at 0 0, rgba(140,40,70,.45), rgba(140,40,70,0) 65%), linear-gradient(160deg, #1f1a24, #161320 70%); }
.tip-hd { display: flex; align-items: center; gap: 7px; margin-bottom: 12px; font-size: 12.5px; font-weight: 500; color: var(--text-2); }
.tip-hd .ph-lightbulb { font-size: 15px; color: #e8c878; }
.tip-hd .ph-caret-right { margin-left: auto; font-size: 13px; color: var(--text-3); }
.tip-t { display: block; margin-bottom: 8px; font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--text); }
.tip-f, .tip-a { margin: 0 0 10px; font-size: 15px; line-height: 1.45; text-wrap: pretty; }
.tip-f { color: var(--text-2); }
.tip-a { color: var(--text); }
.tip-b { margin: 12px 0 0; font-size: 13px; line-height: 1.45; color: var(--text-2); }
.tip-b span { margin-right: 8px; font-size: 12px; font-weight: 500; color: var(--text-3); }
.tips-all { padding: 4px 0 6px; }
.tips-all .ta-hd { padding: 12px 16px 2px; font-size: 16.5px; font-weight: 500; color: var(--text); }
.ta-g { padding: 12px 16px 2px; font-size: 13px; color: var(--text-2); }
.tips-all ul { list-style: none; margin: 0; padding: 0; }
.tips-all li { position: relative; display: flex; gap: 12px; padding: 11px 16px; }
.tips-all li + li::before { content: ""; position: absolute; top: 0; left: 46px; right: 0; border-top: .5px solid var(--sep); }
.tips-all li i { flex: none; width: 18px; margin-top: 1px; font-size: 17px; color: var(--text-soft); }
.tips-all li > div { flex: 1; min-width: 0; }
.tips-all b { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--text); }
.tips-all em { flex: none; padding: 3px 8px; border-radius: 99px; background: rgba(145,132,217,.16); font-style: normal; font-size: 12px; font-weight: 500; color: var(--brand-l); }
.tips-all p { margin: 3px 0 0; font-size: 13px; line-height: 1.4; color: var(--text-2); text-wrap: pretty; }
.tips-all li.wait i, .tips-all li.wait b, .tips-all li.wait p { color: var(--text-3); }

/* La vie privée : cinq promesses en surfaces, puis ce que wattata ne fait
   pas, en liste groupée. */
.priv ul.pr { list-style: none; margin: 0 auto 16px; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.priv ul.pr > li { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px; border-radius: 10px; background: var(--surface); }
.priv ul.pr > li i { font-size: 24px; color: var(--text-soft); }
.priv ul.pr > li span { font-size: 15px; line-height: 1.4; color: var(--text); text-wrap: pretty; }
.how-not { max-width: 720px; margin-left: max(0px, calc((100% - var(--w)) / 2)); margin-right: auto; padding: 4px 0; border-radius: 10px; background: var(--surface); }
.how-not .how-not-t { margin: 0; padding: 12px 16px 4px; font-size: 16.5px; font-weight: 500; color: var(--text); }
.how-not ul { list-style: none; margin: 0; padding: 0; }
.how-not li { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 11px 16px; font-size: 15px; line-height: 1.45; color: var(--text-soft); }
.how-not li + li::before { content: ""; position: absolute; top: 0; left: 44px; right: 0; border-top: .5px solid var(--sep); }
.how-not li i { flex: none; margin-top: 3px; font-size: 16px; color: var(--text-3); }
@media (max-width: 1199px) { .priv ul.pr { grid-template-columns: repeat(2, minmax(0, 1fr)); } .priv ul.pr > li:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (max-width: 480px) { .priv ul.pr { grid-template-columns: 1fr; } .priv ul.pr > li { flex-direction: row; align-items: center; } }

/* La fin : pour quelles voitures, puis la carte « Disponible maintenant ». */
.get { display: flex; flex-direction: column; align-items: center; padding-bottom: 56px; }
.get .for { margin: 0 0 28px; font-size: 15px; line-height: 1.45; color: var(--text-soft); text-align: center; text-wrap: balance; }
.get .how-text { margin-bottom: 28px; }

@media (max-width: 600px) {
  .hero { padding-top: 64px; padding-bottom: 64px; }
  .feat { padding: 72px 16px; }
  .cards { gap: 12px; }
  .ch { --w: 100%; padding-top: 88px; }
  .ch .ch-head { margin-bottom: 28px; }
  .also .ch-head { margin-bottom: 28px; }
  .ch .ch-head .lead { font-size: 15.5px; }
}

/* Les apparitions. --d décale un bloc dans sa rangée ; à l'intérieur d'une
   carte, les barres poussent, le graphe se trace, les cases s'allument. */
html.js .rv { opacity: 0; transform: translateY(28px); transition: opacity .8s ease var(--d, 0s), transform .9s cubic-bezier(.2,.8,.2,1) var(--d, 0s); }
html.js .rv.in { opacity: 1; transform: none; }
html.js .rv .grow { transform: scaleY(0); transform-origin: bottom; transition: transform .9s cubic-bezier(.2,.8,.2,1) calc(var(--d, 0s) + .35s + var(--i, 0) * 70ms); }
html.js .rv .growx { transform: scaleX(0); transform-origin: left; transition: transform 1.2s cubic-bezier(.2,.8,.2,1) calc(var(--d, 0s) + .4s); }
html.js .rv.in .grow, html.js .rv.in .growx { transform: none; }
html.js .rv .draw { clip-path: inset(-30px 100% -10px 0); transition: clip-path 1.6s cubic-bezier(.45,0,.2,1) calc(var(--d, 0s) + .3s); }
html.js .rv.in .draw { clip-path: inset(-30px 0 -10px 0); }
html.js .rv .late { opacity: 0; transition: opacity .6s ease calc(var(--d, 0s) + 1.1s + var(--i, 0) * 70ms); }
html.js .rv.in .late { opacity: 1; }
html.js .rv .sg.seg, html.js .rv .cell.on { transition: background .35s ease calc(var(--d, 0s) + .4s + var(--t, 0s)); }
html.js .rv:not(.in) .sg.seg { background: var(--base); }
html.js .rv:not(.in) .cell.on { background: var(--chip); }

/* La carte trajet et la carte recharge jouent leur fin : la barre qui
   balaie, puis « Arrivé » ou « Chargée » (site.js pose .done). */
.kitt { position: absolute; top: 0; left: -10px; width: 120px; height: 60px; pointer-events: none; animation: kitt 3.2s cubic-bezier(.45,0,.55,1) infinite; transition: opacity .5s; }
.kitt::before { content: ""; position: absolute; left: 10px; right: 10px; top: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--k) 50%, transparent); box-shadow: 0 0 10px var(--k); }
.kitt::after { content: ""; position: absolute; left: 0; right: 0; top: -20px; height: 60px; background: radial-gradient(closest-side, color-mix(in srgb, var(--k) 26%, transparent), transparent); }
.kitt.b { --k: #b3a8f0; }
.kitt.g { --k: #5fd99a; }
.dot { width: 6px; height: 6px; border-radius: 999px; background: var(--text-3); transition: background .4s; }
.st-b { display: none; }
html.js .seq:not(.done) .kitt { opacity: 1; }
html.js .seq.done .kitt, html:not(.js) .kitt { opacity: 0; }
html.js .seq:not(.done) .st-a { display: none; }
html.js .seq:not(.done) .st-b { display: inline; }
html.js .seq:not(.done) .dot { background: var(--brand); }
html.js .seq.trip:not(.done) .state { color: var(--brand-l); }

@media (prefers-reduced-motion: reduce) {
  #app *, #app { animation-duration: .001s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; transition-delay: 0s !important; }
  html.js .rv { transform: none; }
}