/* 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(29.58deg)}}
@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); }

/* 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 se touche et ouvre la liste des marques. */
.aaos { padding: 0; border: 0; background: none; font: inherit; color: var(--tap); text-decoration: underline dotted color-mix(in srgb, var(--tap) 55%, transparent); text-underline-offset: 4px; cursor: pointer; }
.nw { white-space: nowrap; }
.aaos:hover { text-decoration-color: currentColor; }
.brd-list { list-style: none; margin: 0 0 18px; padding: 0 14px; border-radius: 12px; background: var(--chip); }
.brd-list li { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 11px 0; font-size: 14.5px; line-height: 1.4; }
.brd-list li + li { border-top: 1px solid color-mix(in srgb, var(--text-3) 25%, transparent); }
.brd-list b { font-weight: 600; color: var(--text); }
.brd-list span { color: var(--text-2); text-wrap: pretty; }
.brd-list small { color: var(--text-3); font-size: 12px; white-space: nowrap; }
.brd-note { margin: 0 0 8px; color: var(--text-2); font-size: 13px; line-height: 1.5; text-wrap: pretty; }
.brd-note:last-child { margin: 0; }
.brd-note .ct-open { padding: 0; border: 0; background: none; font: inherit; color: var(--tap); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.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; }

/* « Bientôt disponible » à la place de la waitlist : une surface plate, le
   titre en phrase, le bouton plein dans le bleu d'iOS (2026-10-10). */
.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;
}
.soon-go:hover { filter: brightness(1.1); }
.soon-go:active { filter: brightness(.9); }
/* Le bouton, les champs et le « sur la liste » partagent une case de hauteur
   fixe, qui s'allonge en douceur quand les champs (voiture, puis courriel)
   remplacent le bouton : la carte ne saute pas. */
.soon-slot { margin-top: 16px; width: 100%; max-width: 360px; height: 44px; transition: height .3s cubic-bezier(.2,.8,.2,1); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.soon-slot.open { height: 120px; }
.soon-slot.open:has(.soon-done:not([hidden])) { height: 44px; }
.soon-form { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.soon-form div { display: flex; gap: 6px; }
.soon-form input {
  flex: 1; min-width: 0; height: 44px; padding: 0 16px; border-radius: 999px;
  border: 0; background: var(--chip); color: var(--text); font: inherit; font-size: 15px; outline: none;
}
.soon-form input::placeholder { color: var(--text-3); }
.soon-form > input { flex: none; }
.soon-form input:focus { box-shadow: 0 0 0 2px var(--tap); }
.soon-form button {
  flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0;
  background: var(--tap); color: #fff; font-size: 18px; cursor: pointer;
  display: grid; place-items: center;
}
.soon-form button:hover { filter: brightness(1.1); }
.soon .soon-note { margin: 0; font-size: 12.5px; line-height: 1.45; text-align: center; }
.soon .soon-done { margin: 0; height: 44px; display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--text); }
.soon .soon-done i { font-size: 18px; color: var(--green); margin: 0; }
@media (max-width: 480px) { .soon { padding: 22px 18px 24px; } .soon-slot.open { height: 138px; } }
@media (prefers-reduced-motion: reduce) { .soon-slot { transition: none; } }

/* 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; }
.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(100%, 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; }
.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; }
/* « Bientôt » à la place des liens des stores tant que les fiches ne sont pas
   publiques (2026-10-13) ; le jour J, les liens reviennent et la pastille part. */
.steps .sn { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 999px; background: var(--chip); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); vertical-align: 2px; line-height: 1.4; white-space: nowrap; }
.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; }

/* 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 « Bientôt disponible ». */
.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; }
.soon-slot [hidden] { display: none; }

@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; }
}