/* ==========================================================================
   Flex Timer · landing — socle visuel partagé
   Layout : une scène colorée FIXE derrière toute la page (comme le fond de
   l'app), le contenu défile par-dessus ; chaque section annonce sa couleur,
   la scène fond vers elle en 700 ms (même durée que la teinte de repos).
   ========================================================================== */

/* Couleurs animables : sans @property, un dégradé ne sait pas faire de fondu. */
@property --bg1 { syntax: '<color>'; inherits: true; initial-value: #101010; }
@property --bg2 { syntax: '<color>'; inherits: true; initial-value: #060606; }
@property --bg3 { syntax: '<color>'; inherits: true; initial-value: #000000; }
@property --mode { syntax: '<color>'; inherits: true; initial-value: #FFFFFF; }
@property --ink { syntax: '<color>'; inherits: true; initial-value: #FFFFFF; }
@property --ink-2 { syntax: '<color>'; inherits: true; initial-value: rgba(255,255,255,.88); }
@property --ink-3 { syntax: '<color>'; inherits: true; initial-value: rgba(255,255,255,.70); }
@property --ink-muted { syntax: '<color>'; inherits: true; initial-value: rgba(255,255,255,.52); }
@property --line { syntax: '<color>'; inherits: true; initial-value: rgba(255,255,255,.16); }
@property --glass { syntax: '<color>'; inherits: true; initial-value: rgba(255,255,255,.10); }
@property --glass-border { syntax: '<color>'; inherits: true; initial-value: rgba(255,255,255,.22); }
@property --ring-on { syntax: '<color>'; inherits: true; initial-value: #FFFFFF; }
@property --ring-off { syntax: '<color>'; inherits: true; initial-value: rgba(255,255,255,.22); }

:root {
  color-scheme: dark;

  /* Les 5 modes + or Premium : aucune autre couleur n'existe dans l'app. */
  --amrap: #FF5454;
  --basic: #9A9A9A;
  --emom: #1FC777;
  --tabata: #FFC933;
  --mix: #9575FF;
  --gold: #F0C954;
  --success: #1FC777;
  --black: #000000;
  --paper: #0A0A0A;

  /* Scène (animée par core.js selon la section au centre de l'écran) */
  --bg1: #101010;
  --bg2: #060606;
  --bg3: #000000;
  --mode: #FFFFFF;

  /* Encre claire (textMode 'light' de l'app, lib/tokens.js) */
  --ink: #FFFFFF;
  --ink-2: rgba(255,255,255,.88);
  --ink-3: rgba(255,255,255,.70);
  --ink-muted: rgba(255,255,255,.52);
  --line: rgba(255,255,255,.16);
  --glass: rgba(255,255,255,.10);
  --glass-border: rgba(255,255,255,.22);
  --ring-on: #FFFFFF;
  --ring-off: rgba(255,255,255,.22);
  --cta-bg: #FFFFFF;
  --cta-ink: #0A0A0A;

  /* Typo : exactement celles de l'app */
  --font-display: 'Anton', Impact, 'Arial Narrow Bold', 'Arial Narrow', sans-serif;
  --font-sans: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Échelle */
  --fs-mega: clamp(4.5rem, 17vw, 13rem);
  --fs-h1: clamp(3rem, 9vw, 7rem);
  --fs-h2: clamp(2.4rem, 6.4vw, 4.8rem);
  --fs-h3: clamp(1.35rem, 2.4vw, 1.75rem);
  --fs-lead: clamp(1.05rem, 1.6vw, 1.3rem);
  --fs-body: 1rem;
  --fs-small: .875rem;
  --fs-label: .72rem;

  --gutter: clamp(16px, 5vw, 56px);
  --wrap: 1180px;
  --radius: 22px;
  --radius-sm: 14px;

  /* Mouvement : easeImpact de l'app (lib/animations.js) */
  --ease-impact: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-forward: cubic-bezier(0.22, 1.3, 0.36, 1);
  --fade: 700ms;
}

/* TABATA : texte NOIR sur jaune (textMode 'dark'). Toute la page visible est
   posée sur la même scène, donc on bascule l'encre au niveau de la racine. */
:root[data-ink="dark"] {
  --ink: #0A0A0A;
  --ink-2: rgba(10,10,10,.82);
  --ink-3: rgba(10,10,10,.66);
  --ink-muted: rgba(10,10,10,.52);
  --line: rgba(10,10,10,.16);
  --glass: rgba(10,10,10,.08);
  --glass-border: rgba(10,10,10,.16);
  --ring-on: #0A0A0A;
  --ring-off: rgba(10,10,10,.22);
  --cta-bg: #0A0A0A;
  --cta-ink: #FFFFFF;
}

:root {
  transition:
    --bg1 var(--fade) var(--ease-impact), --bg2 var(--fade) var(--ease-impact), --bg3 var(--fade) var(--ease-impact),
    --mode var(--fade) var(--ease-impact),
    --ink var(--fade) ease, --ink-2 var(--fade) ease, --ink-3 var(--fade) ease, --ink-muted var(--fade) ease,
    --line var(--fade) ease, --glass var(--fade) ease, --glass-border var(--fade) ease,
    --ring-on var(--fade) ease, --ring-off var(--fade) ease;
}

/* Première pose de la scène : sans fondu (classe retirée par core.js juste après). */
:root.ft-instant { transition: none !important; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--black);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--mode); color: var(--black); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 8px; }

/* ---------- Scène fixe ---------- */
.ft-stage {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(140% 95% at 50% 0%, var(--bg1) 0%, var(--bg2) 46%, var(--bg3) 100%);
  pointer-events: none;
}
/* Grain léger : le dithering que GrainOverlay devait faire dans l'app, ici
   gratuit. Évite les bandes visibles dans les grands dégradés. */
.ft-stage::after {
  content: '';
  position: absolute;
  inset: -50%;
  opacity: .09;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- Layout ---------- */
.ft-wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.ft-section { position: relative; padding-block: clamp(72px, 12vw, 160px); }
.ft-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 72px); align-items: center; }
@media (max-width: 860px) { .ft-grid-2 { grid-template-columns: minmax(0, 1fr); } }
.ft-stack { display: flex; flex-direction: column; gap: 16px; }
.ft-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ---------- Typo ---------- */
.ft-mega, .ft-h1, .ft-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  /* Anton monte et descend plus que sa taille : x1.18 minimum (piège n°19). */
  line-height: .98;
  margin: 0;
  text-wrap: balance;
}
.ft-mega { font-size: var(--fs-mega); letter-spacing: -0.035em; line-height: .9; }
.ft-h1 { font-size: var(--fs-h1); }
.ft-h2 { font-size: var(--fs-h2); }
.ft-h3 { font-family: var(--font-sans); font-weight: 800; font-size: var(--fs-h3); letter-spacing: -0.02em; line-height: 1.2; margin: 0; }
.ft-lead { font-size: var(--fs-lead); color: var(--ink-2); line-height: 1.55; max-width: 60ch; margin: 0; }
.ft-body { color: var(--ink-2); max-width: 65ch; margin: 0; }
.ft-eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-label);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
}
.ft-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.ft-num { font-family: var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }

/* ---------- Boutons (mapping de lib/buttonTokens.js) ---------- */
.ft-btn {
  --h: 56px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--h);
  padding: 0 26px;
  border-radius: 999px;
  border: 0;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform .35s var(--ease-forward), box-shadow .35s var(--ease-impact), background-color .35s ease;
  white-space: nowrap;
}
.ft-btn:active { transform: scale(.96); }
.ft-btn--md { --h: 48px; padding: 0 20px; font-size: .95rem; }
.ft-btn--sm { --h: 36px; padding: 0 14px; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; }
.ft-btn .ft-icon { width: 20px; height: 20px; flex: none; }

/* Porcelaine : action principale sur fond sombre */
.ft-btn--solid {
  background: linear-gradient(180deg, #FFFFFF 0%, #ECECEC 100%);
  color: #0A0A0A;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.9), inset 0 -2px 0 rgba(0,0,0,.08);
}
:root[data-ink="dark"] .ft-btn--solid { background: linear-gradient(180deg, #1C1C1C 0%, #050505 100%); color: #FFFFFF; box-shadow: 0 10px 30px -12px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.12); }

/* Accent : couleur du mode (texte noir/blanc calculé par core.js, règle 3:1) */
.ft-btn--accent {
  --c: var(--mode);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 82%, #fff) 0%, var(--c) 55%, color-mix(in srgb, var(--c) 86%, #000) 100%);
  color: var(--on, #0A0A0A);
  box-shadow: 0 14px 40px -14px color-mix(in srgb, var(--c) 80%, transparent), inset 0 1px 0 rgba(255,255,255,.45);
}
/* Verre : secondaire */
.ft-btn--glass {
  background: var(--glass);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--glass-border), inset 0 1px 0 rgba(255,255,255,.18), 0 8px 24px -14px rgba(0,0,0,.5);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}
.ft-btn--ghost { background: transparent; color: var(--ink-2); padding-inline: 12px; }
.ft-btn--ghost:hover { color: var(--ink); }
.ft-btn--gold {
  background: linear-gradient(180deg, #FFE08A 0%, var(--gold) 55%, #C9A12E 100%);
  color: #1A1204;
  box-shadow: 0 14px 40px -14px rgba(240,201,84,.7), inset 0 1px 0 rgba(255,255,255,.6);
}
/* Spectre : les 4 couleurs des modes, système / fête */
.ft-btn--spectrum {
  background: linear-gradient(100deg, var(--amrap), var(--tabata) 38%, var(--emom) 68%, var(--mix));
  color: #0A0A0A;
  box-shadow: 0 14px 40px -16px rgba(149,117,255,.7), inset 0 1px 0 rgba(255,255,255,.5);
}
/* Reflet qui traverse (ShineSweep) : accent / gold / spectrum seulement */
.ft-btn--accent::after, .ft-btn--gold::after, .ft-btn--spectrum::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.55) 48%, transparent 66%);
  transform: translateX(-120%);
  animation: ft-shine 6.5s var(--ease-impact) .7s infinite;
}
@keyframes ft-shine { 0% { transform: translateX(-120%); } 16%, 100% { transform: translateX(120%); } }

/* Rond (IconButton) */
.ft-iconbtn {
  width: 44px; height: 44px;
  display: inline-grid; place-items: center;
  border-radius: 999px; border: 0; cursor: pointer;
  background: var(--glass);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--glass-border), inset 0 1px 0 rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  text-decoration: none;
  transition: transform .3s var(--ease-forward);
}
.ft-iconbtn:active { transform: scale(.92); }
.ft-iconbtn .ft-icon { width: 20px; height: 20px; }

/* ---------- Pastilles ---------- */
.ft-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--glass);
  box-shadow: inset 0 0 0 1px var(--glass-border);
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ft-chip .ft-icon { width: 15px; height: 15px; }
.ft-dot { width: 8px; height: 8px; border-radius: 99px; background: currentColor; display: inline-block; }

/* ---------- Carte de verre ---------- */
.ft-card {
  position: relative;
  border-radius: var(--radius);
  background: var(--glass);
  box-shadow: inset 0 0 0 1px var(--glass-border), inset 0 1px 0 rgba(255,255,255,.14), 0 24px 60px -30px rgba(0,0,0,.6);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  backdrop-filter: blur(18px) saturate(130%);
  padding: clamp(20px, 3vw, 32px);
  min-width: 0;
}

/* ---------- Icônes ---------- */
.ft-icon { display: inline-block; width: 1em; height: 1em; vertical-align: middle; flex: none; overflow: visible; }

/* ---------- Anneau à 60 graduations (TickRing) ---------- */
.ft-ring { display: block; width: 100%; height: auto; overflow: visible; }
.ft-ring .ft-tick { stroke: var(--ring-off); stroke-width: 1.5; stroke-linecap: round; transition: stroke .22s ease, opacity .22s ease; }
.ft-ring .ft-tick.is-major { stroke-width: 2.5; }
.ft-ring .ft-tick.on { stroke: var(--ring-on); }

/* ---------- Téléphone + écran d'app recréé ---------- */
.ft-phone {
  position: relative;
  width: min(100%, 340px);
  aspect-ratio: 360 / 760;
  border-radius: 13.5% / 6.4%;
  padding: 3.2%;
  background: linear-gradient(160deg, #2A2A2E 0%, #0B0B0D 40%, #1A1A1D 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    inset 0 0 0 1.5px rgba(255,255,255,.10),
    0 50px 90px -40px rgba(0,0,0,.85),
    0 30px 60px -30px color-mix(in srgb, var(--mode) 45%, transparent);
  container-type: inline-size;
  max-width: 100%;
}
.ft-phone__screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 11% / 5.2%;
  overflow: hidden;
  background: #000;
}
.ft-phone__screen > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ft-phone__notch {
  position: absolute; top: 1.6%; left: 50%; translate: -50% 0;
  width: 3.6%; aspect-ratio: 1; border-radius: 99px; background: #050505;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); z-index: 5;
}

/* L'écran d'accueil de l'app, en unités de conteneur (cqw) : il se met à
   l'échelle du téléphone, comme un vrai écran de 360 dp de large. */
.ft-app {
  --b1: #101010; --b2: #060606; --b3: #000;
  --t1: #FFFFFF; --t3: rgba(255,255,255,.70); --tm: rgba(255,255,255,.52);
  --cbg: rgba(255,255,255,.14); --cbd: rgba(255,255,255,.22);
  --ron: #FFFFFF; --roff: rgba(255,255,255,.22);
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center;
  padding: 11cqw 6.7cqw 6cqw;
  color: var(--t1);
  font-family: var(--font-sans);
  background: radial-gradient(140% 95% at 50% 0%, var(--b1) 0%, var(--b2) 46%, var(--b3) 100%);
  transition: background .6s var(--ease-impact);
}
.ft-app[data-ink="dark"] {
  --t1: #0A0A0A; --t3: rgba(10,10,10,.62); --tm: rgba(10,10,10,.52);
  --cbg: rgba(10,10,10,.08); --cbd: rgba(10,10,10,.14);
  --ron: #0A0A0A; --roff: rgba(10,10,10,.22);
}
.ft-app__top { width: 100%; display: flex; align-items: center; justify-content: space-between; }
.ft-app__iconbtn { width: 11cqw; height: 11cqw; border-radius: 99px; display: grid; place-items: center; background: var(--cbg); box-shadow: inset 0 0 0 1px var(--cbd); color: var(--t1); }
.ft-app__iconbtn .ft-icon { width: 5.2cqw; height: 5.2cqw; }
.ft-app__tag { font-weight: 600; font-size: 3.05cqw; letter-spacing: .3em; text-transform: uppercase; color: var(--t3); }
.ft-app__desc { margin-top: 6cqw; font-weight: 500; font-size: 3.05cqw; letter-spacing: .25em; text-transform: uppercase; text-align: center; color: var(--t3); line-height: 1.5; min-height: 9cqw; }
.ft-app__ring { position: relative; width: 84cqw; margin-top: 3cqw; --ring-on: var(--ron); --ring-off: var(--roff); }
.ft-app__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ft-app__unit { font-weight: 600; font-size: 3.05cqw; letter-spacing: .3em; color: var(--t3); }
.ft-app__num { font-family: var(--font-display); font-size: 36cqw; line-height: 1.02; letter-spacing: -0.035em; color: var(--t1); font-variant-numeric: tabular-nums; }
.ft-app__num.is-long { font-size: 26cqw; }
.ft-app__name { font-weight: 700; font-size: 6.1cqw; letter-spacing: -0.02em; margin-top: 1cqw; color: var(--t1); }
.ft-app__stats { display: flex; gap: 2.2cqw; width: 100%; margin-top: 5cqw; }
.ft-app__stat { flex: 1; min-width: 0; padding: 2.8cqw 1.5cqw; border-radius: 3.9cqw; background: var(--cbg); box-shadow: inset 0 0 0 1px var(--cbd); text-align: center; }
.ft-app__stat b { display: block; font-weight: 600; font-size: 2.5cqw; letter-spacing: .2em; color: var(--tm); }
.ft-app__stat span { font-family: var(--font-mono); font-weight: 700; font-size: 4.2cqw; color: var(--t1); }
.ft-app__stat small { font-family: var(--font-mono); font-size: 3cqw; margin-left: .6cqw; color: var(--t3); }
.ft-app__phases { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.7cqw; margin-top: 4cqw; }
.ft-app__phase { padding: 1.5cqw 3.3cqw; border-radius: 99px; background: var(--cbg); box-shadow: inset 0 0 0 1px var(--cbd); font-weight: 600; font-size: 2.5cqw; letter-spacing: .16em; color: var(--t3); }
.ft-app__cta {
  margin-top: auto; width: 100%; height: 15.5cqw; border-radius: 99px;
  display: grid; place-items: center;
  font-weight: 700; font-size: 4.4cqw;
  background: linear-gradient(180deg, color-mix(in srgb, var(--m) 70%, #fff) 0%, var(--m) 60%, color-mix(in srgb, var(--m) 82%, #000) 100%);
  color: var(--on, #0A0A0A);
  box-shadow: 0 3cqw 8cqw -3cqw rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.4);
}
.ft-app__dots { display: flex; gap: 1.8cqw; margin-top: 4cqw; }
.ft-app__dots i { width: 1.8cqw; height: 1.8cqw; border-radius: 99px; background: var(--roff); transition: width .4s var(--ease-impact), background .4s; }
.ft-app__dots i.on { width: 6cqw; background: var(--t1); }

/* ---------- Navigation (rendue par core.js) ---------- */
.ft-nav {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  padding-block: 12px;
}
.ft-nav__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 8px 8px 16px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg2) 55%, transparent);
  box-shadow: inset 0 0 0 1px var(--glass-border), 0 18px 40px -24px rgba(0,0,0,.7);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
}
.ft-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.ft-logo__ring { width: 30px; height: 30px; }
.ft-logo__word { font-family: var(--font-display); font-size: 1.25rem; letter-spacing: .02em; line-height: 1; }
.ft-nav__links { display: flex; gap: 4px; }
.ft-nav__links a {
  padding: 9px 14px; border-radius: 999px; text-decoration: none;
  font-weight: 600; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2);
  transition: background .25s, color .25s;
}
.ft-nav__links a:hover { background: var(--glass); color: var(--ink); }
.ft-nav__modes { display: flex; gap: 6px; align-items: center; }
.ft-nav__modes a { width: 10px; height: 10px; border-radius: 99px; display: block; transition: transform .3s var(--ease-forward); }
.ft-nav__modes a:hover { transform: scale(1.5); }
@media (max-width: 760px) {
  .ft-nav__links { display: none; }
  .ft-nav__cta .ft-btn__long { display: none; }
}

/* ---------- Bandeau bêta ---------- */
.ft-beta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 8px; border-radius: 999px;
  background: var(--glass); box-shadow: inset 0 0 0 1px var(--glass-border);
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2);
}
.ft-beta__pulse { width: 18px; height: 18px; border-radius: 99px; display: grid; place-items: center; background: color-mix(in srgb, var(--success) 22%, transparent); }
.ft-beta__pulse::before { content: ''; width: 7px; height: 7px; border-radius: 99px; background: var(--success); box-shadow: 0 0 0 0 rgba(31,199,119,.6); animation: ft-pulse 2s infinite; }
@keyframes ft-pulse { 0% { box-shadow: 0 0 0 0 rgba(31,199,119,.55); } 70%, 100% { box-shadow: 0 0 0 9px rgba(31,199,119,0); } }

/* Note de prévention sous chaque bouton de téléchargement */
.ft-install-note { display: flex; gap: 10px; align-items: flex-start; max-width: 46ch; font-size: .82rem; line-height: 1.5; color: var(--ink-3); margin: 0; }
.ft-install-note .ft-icon { width: 18px; height: 18px; margin-top: 1px; color: var(--success); }

/* ---------- Pied de page ---------- */
.ft-footer { padding-block: 64px 40px; border-top: 1px solid var(--line); }
.ft-footer__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 760px) { .ft-footer__grid { grid-template-columns: minmax(0, 1fr); } }
.ft-footer h4 { margin: 0 0 12px; }
.ft-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ft-footer a { text-decoration: none; color: var(--ink-2); }
.ft-footer a:hover { color: var(--ink); }
.ft-footer__base { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; color: var(--ink-muted); font-size: .8rem; }

/* ---------- Accessibilité mouvement ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
.ft-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }