/* ============================================================
   v22 — company-machines : « Work on every machine. / Your data on your Mac. »
   Gauche : titre, support, rail de micro-icônes + marqueur Local (inchangés).
   Droite : maquette animée de l'app BizOS — le chat à gauche, le panneau Screen
   à droite où l'on regarde le navigateur de l'Office Mac travailler.
   100 % HTML/CSS/SVG inline : aucune image, aucune librairie, aucune requête.
   Aucune dépendance à `animation-timeline` : boucle CSS classique de 19 s pilotée
   par un IntersectionObserver (section.js). Sans JS et en mouvement réduit :
   l'état final (landing ouverte, onglets visibles) reste affiché, figé.
   Tout est scopé sous #machines.
   ============================================================ */

#machines {
  --mach-ease: cubic-bezier(.2, .7, .2, 1);
  --mach-loop: 19s;
  --mach-line: rgba(11, 18, 32, .10);
  --mach-line-soft: rgba(11, 18, 32, .055);
  --mach-blue: #2267f5;
  --mach-bubble: #f0f0f2;
  --mach-ink: rgba(11, 18, 32, .92);
  --mach-muted: #6b7280;
  --mach-dh: 13px;            /* hauteur d'un chiffre du compteur */
  --mach-scroll: 26px;        /* course du défilement de la landing */
  max-width: 1188px;
  margin-inline: auto;
  padding: clamp(80px, 8.5vw, 116px) var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  align-items: center;
  gap: clamp(36px, 3.9vw, 56px);
}

/* ---------- Colonne de gauche (inchangée) ---------- */
#machines .machines-copy { align-self: center; }

#machines .machines-title {
  font-size: clamp(1.75rem, 2.62vw, 2.42rem);
  line-height: 1.1;
  letter-spacing: -.042em;
  text-wrap: nowrap;
}
#machines .machines-line { display: block; white-space: nowrap; }
#machines .machines-line + .machines-line { margin-top: .06em; }

#machines .machines-support {
  margin-top: 22px;
  max-width: 28em;
  color: #687581;
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: -.004em;
  text-wrap: pretty;
}

#machines .machines-rail {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 28em;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
#machines .machines-devices {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  color: #78838e;
}
#machines .machines-devices svg { display: block; flex: 0 0 auto; }
#machines .machines-local {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.008em;
  color: #0a63c9;
  white-space: nowrap;
}
#machines .machines-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 4px rgba(0, 122, 255, .11);
}

/* ---------- Description accessible de la maquette ---------- */
#machines .machines-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   La fenêtre
   ============================================================ */
#machines .machines-stage { min-width: 0; justify-self: center; width: 100%; }

#machines .mach-demo {
  --play: running;
  width: 100%;
  max-width: 600px;
  margin-inline: auto;
}

#machines .mach-win {
  border: 1px solid var(--mach-line);
  border-radius: 12px;
  background: #fff;
  box-shadow:
    0 1px 2px rgba(11, 18, 32, .04),
    0 10px 26px -14px rgba(11, 18, 32, .16),
    0 34px 62px -34px rgba(11, 18, 32, .20);
  overflow: hidden;
}

/* ---------- Barre de titre ---------- */
#machines .mach-titlebar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 34px;
  padding: 0 11px;
  border-bottom: 1px solid var(--mach-line-soft);
  background: #fbfbfc;
}
#machines .mach-lights { display: inline-flex; gap: 5px; flex: 0 0 auto; }
#machines .mach-lights i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e0e2e6;
  box-shadow: inset 0 0 0 .5px rgba(11, 18, 32, .06);
}
#machines .mach-lights i:nth-child(1) { background: #f0b1a6; }
#machines .mach-lights i:nth-child(2) { background: #f2d5a4; }
#machines .mach-lights i:nth-child(3) { background: #b6dfae; }

#machines .mach-who {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: -.012em;
  color: var(--mach-ink);
}
#machines .mach-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #d7e2fb;
  color: #1b4bb8;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(11, 18, 32, .045);
}
#machines .mach-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#machines .mach-meta {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
}

/* La puce machine : les deux états occupent la même cellule → zéro décalage au swap. */
#machines .mach-chip { display: grid; align-items: center; justify-items: end; }
#machines .mach-chip-item {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px 3px 6px;
  border-radius: 999px;
  background: rgba(11, 18, 32, .05);
  color: #56606b;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: -.006em;
  line-height: 14px;
  white-space: nowrap;
}
#machines .mach-chip-item svg { display: block; flex: 0 0 auto; opacity: .8; }
#machines .mach-chip-item[data-machine="laptop"] { opacity: 0; }
#machines .mach-chip-item[data-machine="desktop"] { opacity: 1; }

#machines .mach-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: -.006em;
  color: #0a63c9;
  white-space: nowrap;
}
#machines .mach-badge .machines-dot { width: 6px; height: 6px; box-shadow: 0 0 0 3px rgba(0, 122, 255, .12); }

/* ---------- Corps : chat 42 % / Screen 58 % ---------- */
#machines .mach-body {
  display: grid;
  grid-template-columns: 42% minmax(0, 1fr);
  height: 340px;
}
#machines .mach-pane { display: grid; min-width: 0; min-height: 0; }
#machines .mach-pane-chat {
  grid-template-rows: 26px minmax(0, 1fr) auto;
  border-right: 1px solid var(--mach-line-soft);
}
#machines .mach-pane-screen { grid-template-rows: 26px minmax(0, 1fr); }

#machines .mach-pane-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  border-bottom: 1px solid var(--mach-line-soft);
  font-size: 11px;
  letter-spacing: .002em;
  color: var(--mach-muted);
}
#machines .mach-pane-title { font-weight: 500; }

/* ---------- Fil de discussion ---------- */
#machines .mach-thread {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 12px 11px;
  min-height: 0;
  overflow: hidden;
}
#machines .mach-msg {
  position: relative;
  max-width: 92%;
  margin: 0;
  padding: 7px 10px;
  border-radius: 13px;
  font-size: 11.5px;
  line-height: 1.45;
  letter-spacing: -.008em;
}
#machines .mach-thread .mach-msg ~ .mach-msg { margin-top: 7px; }
#machines .mach-out {
  align-self: flex-end;
  background: var(--mach-blue);
  color: #fff;
  border-bottom-right-radius: 5px;
  box-shadow: 0 1px 2px rgba(34, 103, 245, .2);
}
#machines .mach-in {
  align-self: flex-start;
  background: var(--mach-bubble);
  color: var(--mach-ink);
  border-bottom-left-radius: 5px;
}
#machines .mach-ok {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: #2aa14a;
  vertical-align: middle;
  transform: translateY(-.5px);
}

/* L'indicateur de frappe ne prend aucune place : il se pose là où la réponse arrivera. */
#machines .mach-typing-slot { position: relative; align-self: stretch; height: 0; }
#machines .mach-typing {
  position: absolute;
  top: 7px;
  left: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 9px 11px;
  border-radius: 13px;
  border-bottom-left-radius: 5px;
  background: var(--mach-bubble);
  opacity: 0;
}
#machines .mach-typing i { width: 5px; height: 5px; border-radius: 50%; background: rgba(11, 18, 32, .42); }

/* ---------- Composer (décoratif, statique) ---------- */
#machines .mach-composer {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 10px;
  border-top: 1px solid var(--mach-line-soft);
}
#machines .mach-field {
  flex: 1;
  min-width: 0;
  height: 24px;
  padding: 0 10px;
  border-radius: 12px;
  background: var(--mach-bubble);
  border: 1px solid rgba(11, 18, 32, .05);
  color: var(--mach-muted);
  font-size: 11px;
  line-height: 22px;
  white-space: nowrap;
  overflow: hidden;
}
#machines .mach-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--mach-blue);
  color: #fff;
  box-shadow: 0 1px 2px rgba(34, 103, 245, .28);
}
#machines .mach-send svg { display: block; transform: translateX(.5px); }

/* ============================================================
   Panneau Screen — un vrai navigateur
   ============================================================ */
#machines .mach-rec {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: #8a939d;
  white-space: nowrap;
}
#machines .mach-rec-dot {
  width: 6px;
  height: 6px;
  margin-right: 7px;
  border-radius: 50%;
  background: #e2564a;
  box-shadow: 0 0 0 3px rgba(226, 86, 74, .13);
}
/* Compteur en rouleaux de chiffres : aucune écriture DOM, aucun décalage. */
#machines .mach-reel { display: inline-flex; }
#machines .mach-reel-col {
  display: block;
  height: var(--mach-dh);
  overflow: hidden;
  line-height: var(--mach-dh);
}
/* Le rouleau est un enfant du masque : c'est lui qui bouge, jamais la fenêtre. */
#machines .mach-reel-strip { display: block; transform: translateY(calc(var(--mach-dh) * -12)); }
#machines .mach-reel-strip i { display: block; height: var(--mach-dh); font-style: normal; }

#machines .mach-screen { display: flex; padding: 10px; min-height: 0; }
#machines .mach-browser {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--mach-line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

/* ---------- Barre d'onglets ---------- */
#machines .mach-tabs {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 28px;
  padding: 4px 6px 0;
  background: #eceef1;
}
#machines .mach-tab {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  max-width: 94px;
  height: 24px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
}
#machines .mach-tab-bg {
  position: absolute;
  inset: 0;
  border-radius: 7px 7px 0 0;
  background: #fff;
  box-shadow: 0 -1px 2px rgba(11, 18, 32, .05);
  opacity: 0;
}
#machines .mach-fav {
  position: relative;
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#machines .mach-fav svg { display: block; }
#machines .mach-fav-doc { border-radius: 3px; background: #c3c8cf; }
#machines .mach-fav-site { border-radius: 3px; background: var(--blue); box-shadow: inset 0 0 0 2.5px rgba(255, 255, 255, .55); }
#machines .mach-tab-title {
  position: relative;
  font-size: 11px;
  letter-spacing: -.006em;
  color: rgba(11, 18, 32, .8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#machines .mach-tab-new {
  flex: 0 0 auto;
  margin-left: auto;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: #7c8691;
}
#machines .mach-tab-new svg { display: block; }
/* États de base = fin de boucle : l'onglet « Pricing » est actif. */
#machines .mach-tab-0 { opacity: .6; }
#machines .mach-tab-1 { opacity: .6; }
#machines .mach-tab-2 { opacity: 1; }
#machines .mach-tab-2 .mach-tab-bg { opacity: 1; }

/* ---------- Omnibox ---------- */
#machines .mach-omni {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 9px;
  background: #fff;
  border-bottom: 1px solid var(--mach-line-soft);
}
#machines .mach-omni-nav { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; color: #98a1aa; }
#machines .mach-omni-nav svg { display: block; }
#machines .mach-omni-box {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  height: 20px;
  padding: 0 10px;
  border-radius: 999px;
  background: #f0f0f2;
}
#machines .mach-omni-ring {
  position: absolute;
  inset: -1.5px;
  border: 1.5px solid var(--blue);
  border-radius: 999px;
  opacity: 0;
}
#machines .mach-omni-hint {
  position: absolute;
  left: 10px;
  font-size: 11px;
  letter-spacing: -.004em;
  color: #99a2ab;
  white-space: nowrap;
  opacity: 0;
}
#machines .mach-url-typed {
  position: relative;
  display: inline-block;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: -.004em;
  color: var(--mach-ink);
  white-space: nowrap;
}
#machines .mach-url-text { display: block; }
/* Le curseur de saisie fait la largeur du texte et se translate en % : il suit
   exactement le bord du dévoilement, sans jamais mesurer quoi que ce soit en JS. */
#machines .mach-url-cursor { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: translateX(100%); opacity: 0; }
#machines .mach-url-cursor i { position: absolute; left: 0; top: 2px; width: 1.5px; height: 12px; background: var(--mach-ink); }

/* ---------- Le contenu de la page ---------- */
#machines .mach-viewport { position: relative; flex: 1 1 auto; min-height: 0; background: #fff; overflow: hidden; }

/* Page « Nouvel onglet » */
#machines .mach-newtab {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
}
#machines .mach-google svg { display: block; }
#machines .mach-search {
  margin-top: 17px;
  width: 64%;
  height: 22px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid var(--mach-line);
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(11, 18, 32, .06);
  color: #9aa3ad;
}
#machines .mach-search svg { display: block; }
#machines .mach-shortcuts { margin-top: 18px; display: flex; gap: 14px; }
#machines .mach-shortcuts i { width: 18px; height: 18px; border-radius: 50%; background: #f1f2f4; }

/* La landing page */
#machines .mach-site { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; }
#machines .mach-site-nav {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 9px;
  height: 22px;
  padding: 0 12px;
  border-bottom: 1px solid var(--mach-line-soft);
}
#machines .mach-nav-logo { width: 26px; height: 6px; border-radius: 2px; background: rgba(11, 18, 32, .78); }
#machines .mach-nav-link { width: 15px; height: 4px; border-radius: 2px; background: rgba(11, 18, 32, .16); }
#machines .mach-nav-btn { margin-left: auto; width: 30px; height: 12px; border-radius: 4px; background: var(--blue); }

#machines .mach-site-scroll { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
#machines .mach-site-body {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 14px 20px;
  transform: translateY(calc(var(--mach-scroll) * -1));
}
#machines .mach-hero-h1 { width: 64%; height: 12px; border-radius: 3px; background: rgba(11, 18, 32, .8); }
#machines .mach-hero-sub { width: 44%; height: 7px; margin-top: 9px; border-radius: 3px; background: rgba(11, 18, 32, .2); }
#machines .mach-hero-btn { width: 78px; height: 20px; margin-top: 18px; border-radius: 6px; background: var(--blue); box-shadow: 0 1px 4px rgba(0, 122, 255, .18); }
#machines .mach-price-label { width: 32%; height: 7px; margin-top: 30px; border-radius: 3px; background: rgba(11, 18, 32, .22); }
#machines .mach-price-cards {
  width: 100%;
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
#machines .mach-price-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 8px;
  border: 1px solid var(--mach-line);
  border-radius: 6px;
  background: #fff;
}
#machines .mach-price-2 { border-color: rgba(0, 122, 255, .4); }
#machines .mach-l { display: block; border-radius: 2px; background: rgba(11, 18, 32, .13); }
#machines .mach-l-a { width: 52%; height: 4px; background: rgba(11, 18, 32, .22); }
#machines .mach-l-b { width: 64%; height: 11px; background: rgba(11, 18, 32, .68); }
#machines .mach-l-c { width: 88%; height: 3px; }
#machines .mach-l-c + .mach-l-c { width: 66%; }
#machines .mach-l-d { width: 100%; height: 10px; margin-top: 2px; border-radius: 3px; background: rgba(0, 122, 255, .16); }

/* Le curseur : deux calques (X puis Y) de la taille du navigateur, avec deux
   courbes d'accélération différentes — les trajets sont des courbes, pas des segments. */
#machines .mach-cursor,
#machines .mach-cursor-x,
#machines .mach-cursor-y { position: absolute; inset: 0; pointer-events: none; }
#machines .mach-cursor-x { transform: translateX(55%); }
#machines .mach-cursor-y { transform: translateY(46%); }
#machines .mach-cursor svg {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  filter: drop-shadow(0 1px 1.5px rgba(11, 18, 32, .22));
}

/* ============================================================
   Entrée au scroll (inchangée)
   ============================================================ */
.js #machines .reveal { transition-duration: .62s; transition-timing-function: var(--mach-ease); }
.js #machines .machines-title { transition-delay: 0ms; }
.js #machines .machines-stage { transform: translateY(20px); transition-delay: 70ms; }
.js #machines .machines-support { transition-delay: 110ms; }
.js #machines .machines-rail { transition-delay: 200ms; }
.js #machines .machines-stage.is-visible { transform: none; }

.js #machines .machines-rail .machines-dot { transform: scale(.35); opacity: 0; transition: transform .5s var(--mach-ease) 460ms, opacity .4s var(--mach-ease) 460ms; }
.js #machines .machines-rail.is-visible .machines-dot { transform: none; opacity: 1; }

/* ============================================================
   La boucle — 19 s. Assignée uniquement si JS est présent (.is-armed, posé la
   première fois que la section entre dans l'écran) et si l'utilisateur n'a pas
   demandé moins de mouvement. Sinon : l'état de base ci-dessus, c'est-à-dire
   l'état final de la démo, figé.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .js #machines .mach-demo.is-armed { --play: paused; }
  .js #machines .mach-demo.is-armed.is-playing { --play: running; }

  .js #machines .mach-demo.is-armed :is(
    .mach-out, .mach-typing, .mach-in-1, .mach-in-2,
    .mach-chip-item[data-machine="laptop"], .mach-chip-item[data-machine="desktop"],
    .mach-rec, .mach-reel-strip,
    .mach-tab-1, .mach-tab-1 .mach-tab-bg, .mach-tab-2, .mach-tab-2 .mach-tab-bg,
    .mach-omni-hint, .mach-omni-ring, .mach-url-text, .mach-url-cursor,
    .mach-newtab, .mach-google, .mach-search,
    .mach-site, .mach-site-nav, .mach-site-body,
    .mach-hero-h1, .mach-hero-sub, .mach-hero-btn, .mach-price-label,
    .mach-price-1, .mach-price-2, .mach-price-3,
    .mach-cursor-x, .mach-cursor-y, .mach-cursor svg
  ) {
    animation-duration: var(--mach-loop);
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    animation-timing-function: var(--mach-ease);
    animation-play-state: var(--play);
  }

  /* --- chat --- */
  .js #machines .mach-demo.is-armed .mach-out { animation-name: mach-msg-1; }
  .js #machines .mach-demo.is-armed .mach-typing { animation-name: mach-typing; }
  .js #machines .mach-demo.is-armed .mach-in-1 { animation-name: mach-msg-2; }
  .js #machines .mach-demo.is-armed .mach-in-2 { animation-name: mach-msg-3; }
  .js #machines .mach-demo.is-armed .mach-typing i { animation: mach-dot 1.25s var(--mach-ease) infinite; animation-play-state: var(--play); }
  .js #machines .mach-demo.is-armed .mach-typing i:nth-child(2) { animation-delay: .16s; }
  .js #machines .mach-demo.is-armed .mach-typing i:nth-child(3) { animation-delay: .32s; }

  /* --- puce machine --- */
  .js #machines .mach-demo.is-armed .mach-chip-item[data-machine="laptop"] { animation-name: mach-chip-a; }
  .js #machines .mach-demo.is-armed .mach-chip-item[data-machine="desktop"] { animation-name: mach-chip-b; }

  /* --- enregistrement --- */
  .js #machines .mach-demo.is-armed .mach-rec { animation-name: mach-rec; }
  .js #machines .mach-demo.is-armed .mach-reel-strip { animation-name: mach-reel; animation-timing-function: linear; }

  /* --- onglets --- */
  .js #machines .mach-demo.is-armed .mach-tab-1 { animation-name: mach-tab1; }
  .js #machines .mach-demo.is-armed .mach-tab-1 .mach-tab-bg { animation-name: mach-tab1-bg; }
  .js #machines .mach-demo.is-armed .mach-tab-2 { animation-name: mach-tab2; }
  .js #machines .mach-demo.is-armed .mach-tab-2 .mach-tab-bg { animation-name: mach-tab2-bg; }

  /* --- omnibox --- */
  .js #machines .mach-demo.is-armed .mach-omni-hint { animation-name: mach-hint; }
  .js #machines .mach-demo.is-armed .mach-omni-ring { animation-name: mach-ring; }
  .js #machines .mach-demo.is-armed .mach-url-text { animation-name: mach-type; }
  .js #machines .mach-demo.is-armed .mach-url-cursor { animation-name: mach-caret; }

  /* --- pages --- */
  .js #machines .mach-demo.is-armed .mach-newtab { animation-name: mach-newtab; }
  .js #machines .mach-demo.is-armed .mach-google { animation-name: mach-google; }
  .js #machines .mach-demo.is-armed .mach-search { animation-name: mach-search; }
  .js #machines .mach-demo.is-armed .mach-site { animation-name: mach-site; }
  .js #machines .mach-demo.is-armed .mach-site-nav { animation-name: mach-nav; }
  .js #machines .mach-demo.is-armed .mach-site-body { animation-name: mach-scroll; }
  .js #machines .mach-demo.is-armed .mach-hero-h1 { animation-name: mach-h1; }
  .js #machines .mach-demo.is-armed .mach-hero-sub { animation-name: mach-sub; }
  .js #machines .mach-demo.is-armed .mach-hero-btn { animation-name: mach-cta; }
  .js #machines .mach-demo.is-armed .mach-price-label { animation-name: mach-plabel; }
  .js #machines .mach-demo.is-armed .mach-price-1 { animation-name: mach-card-1; }
  .js #machines .mach-demo.is-armed .mach-price-2 { animation-name: mach-card-2; }
  .js #machines .mach-demo.is-armed .mach-price-3 { animation-name: mach-card-3; }

  /* --- curseur --- */
  .js #machines .mach-demo.is-armed .mach-cursor-x { animation-name: mach-cursor-x; }
  .js #machines .mach-demo.is-armed .mach-cursor-y { animation-name: mach-cursor-y; animation-timing-function: cubic-bezier(.45, .05, .2, 1); }
  .js #machines .mach-demo.is-armed .mach-cursor svg { animation-name: mach-cursor-pop; }
}

/* ============================================================
   Les images-clés. Repères en secondes sur une boucle de 19 s.
   ============================================================ */

/* ---------- Chat ---------- */
/* 0,8 s — « Build the pricing page on the office Mac. » */
@keyframes mach-msg-1 {
  0%, 4.21% { opacity: 0; transform: translate3d(0, 8px, 0) scale(.96); }
  6.84%, 89.47% { opacity: 1; transform: none; }
  94.21%, 100% { opacity: 0; transform: translate3d(0, -4px, 0) scale(.98); }
}
/* 1,9 → 3,3 s — indicateur de frappe */
@keyframes mach-typing {
  0%, 10% { opacity: 0; transform: translate3d(0, 6px, 0) scale(.94); }
  12.63%, 17.37% { opacity: 1; transform: none; }
  18.42%, 100% { opacity: 0; transform: translate3d(0, 0, 0) scale(.94); }
}
@keyframes mach-dot {
  0%, 62%, 100% { transform: translateY(0); opacity: .38; }
  28% { transform: translateY(-3px); opacity: .9; }
}
/* 3,5 s — « On it. Running on Office Mac. » */
@keyframes mach-msg-2 {
  0%, 18.42% { opacity: 0; transform: translate3d(0, 8px, 0) scale(.96); }
  21.05%, 89.47% { opacity: 1; transform: none; }
  94.21%, 100% { opacity: 0; transform: translate3d(0, -4px, 0) scale(.98); }
}
/* 14,6 s — « Done. Draft is ready to review. » */
@keyframes mach-msg-3 {
  0%, 76.84% { opacity: 0; transform: translate3d(0, 8px, 0) scale(.96); }
  79.47%, 89.47% { opacity: 1; transform: none; }
  94.21%, 100% { opacity: 0; transform: translate3d(0, -4px, 0) scale(.98); }
}

/* ---------- Puce machine : MacBook Pro → Office Mac (4,0 s) ---------- */
@keyframes mach-chip-a {
  0%, 20% { opacity: 1; transform: none; }
  23%, 89.47% { opacity: 0; transform: translate3d(0, -5px, 0); }
  94.21%, 100% { opacity: 1; transform: none; }
}
@keyframes mach-chip-b {
  0%, 20% { opacity: 0; transform: translate3d(0, 5px, 0); }
  23%, 89.47% { opacity: 1; transform: none; }
  94.21%, 100% { opacity: 0; transform: translate3d(0, 5px, 0); }
}

/* ---------- Enregistrement : 00:04 → 00:16 entre 4,4 s et 14,6 s ---------- */
@keyframes mach-rec {
  0%, 21.05% { opacity: 0; transform: translate3d(0, 3px, 0); }
  23.5%, 89.47% { opacity: 1; transform: none; }
  94.21%, 100% { opacity: 0; transform: translate3d(0, 3px, 0); }
}
@keyframes mach-reel {
  0% { transform: translateY(0); }
  23.16% { transform: translateY(0); animation-timing-function: steps(12, end); }
  76.84% { transform: translateY(calc(var(--mach-dh) * -12)); }
  95% { transform: translateY(calc(var(--mach-dh) * -12)); }
  95.4%, 100% { transform: translateY(0); }
}

/* ---------- Onglets : actif = « New Tab », puis « Pricing » (8,0 s),
     retour sur « New Tab » (12,8 s), retour sur « Pricing » (13,8 s) ---------- */
@keyframes mach-tab1 {
  0%, 42.11% { opacity: 1; }
  45.26%, 66.32% { opacity: .6; }
  68.42%, 70.53% { opacity: 1; }
  71.58%, 89.47% { opacity: .6; }
  94.21%, 100% { opacity: 1; }
}
@keyframes mach-tab1-bg {
  0%, 42.11% { opacity: 1; }
  45.26%, 66.32% { opacity: 0; }
  68.42%, 70.53% { opacity: 1; }
  71.58%, 89.47% { opacity: 0; }
  94.21%, 100% { opacity: 1; }
}
@keyframes mach-tab2 {
  0%, 42.11% { opacity: 0; clip-path: inset(0 100% 0 0); }
  45.26% { opacity: 1; clip-path: inset(0 0 0 0); }
  66.32% { opacity: 1; clip-path: inset(0 0 0 0); }
  68.42%, 70.53% { opacity: .6; clip-path: inset(0 0 0 0); }
  71.58%, 89.47% { opacity: 1; clip-path: inset(0 0 0 0); }
  94.21%, 100% { opacity: 0; clip-path: inset(0 100% 0 0); }
}
@keyframes mach-tab2-bg {
  0%, 42.11% { opacity: 0; }
  45.26%, 66.32% { opacity: 1; }
  68.42%, 70.53% { opacity: 0; }
  71.58%, 89.47% { opacity: 1; }
  94.21%, 100% { opacity: 0; }
}

/* ---------- Omnibox : clic (5,4 s), frappe (5,6 → 7,6 s), Entrée (7,9 s) ---------- */
@keyframes mach-hint {
  0%, 28.42% { opacity: 1; }
  29.47%, 66.84% { opacity: 0; }
  68.42%, 71.58% { opacity: 1; }
  73.16%, 89.47% { opacity: 0; }
  94.21%, 100% { opacity: 1; }
}
@keyframes mach-ring {
  0%, 27.37% { opacity: 0; }
  28.42%, 41.05% { opacity: 1; }
  42.11%, 100% { opacity: 0; }
}
@keyframes mach-type {
  0% { opacity: 1; clip-path: inset(0 100% 0 0); }
  29.47% { opacity: 1; clip-path: inset(0 100% 0 0); animation-timing-function: steps(23, end); }
  40% { opacity: 1; clip-path: inset(0 0 0 0); }
  66.84% { opacity: 1; clip-path: inset(0 0 0 0); }
  68.42%, 71.58% { opacity: 0; clip-path: inset(0 0 0 0); }
  73.16%, 89.47% { opacity: 1; clip-path: inset(0 0 0 0); }
  94.21% { opacity: 0; clip-path: inset(0 0 0 0); }
  95%, 100% { opacity: 1; clip-path: inset(0 100% 0 0); }
}
@keyframes mach-caret {
  0% { opacity: 0; transform: translateX(0); }
  28.42% { opacity: 0; transform: translateX(0); }
  29.47% { opacity: 1; transform: translateX(0); animation-timing-function: steps(23, end); }
  40% { opacity: 1; transform: translateX(100%); }
  41.05% { opacity: 1; transform: translateX(100%); }
  42.11%, 100% { opacity: 0; transform: translateX(100%); }
}

/* ---------- Page « Nouvel onglet » : ouverte à 4,0 s, revue à 12,9 s ---------- */
@keyframes mach-newtab {
  0%, 21.05% { opacity: 0; }
  24.21%, 43.16% { opacity: 1; }
  45.79%, 66.84% { opacity: 0; }
  68.42%, 71.58% { opacity: 1; }
  73.16%, 100% { opacity: 0; }
}
@keyframes mach-google {
  0%, 21.05% { opacity: 0; transform: translate3d(0, 7px, 0) scale(.94); }
  24.74%, 89.47% { opacity: 1; transform: none; }
  94.21%, 100% { opacity: 0; transform: translate3d(0, 7px, 0) scale(.94); }
}
@keyframes mach-search {
  0%, 22.11% { opacity: 0; transform: translate3d(0, 6px, 0); }
  25.79%, 89.47% { opacity: 1; transform: none; }
  94.21%, 100% { opacity: 0; transform: translate3d(0, 6px, 0); }
}

/* ---------- La landing page : ouverte à 8,6 s ---------- */
@keyframes mach-site {
  0%, 44.21% { opacity: 0; }
  46.32%, 66.84% { opacity: 1; }
  68.42%, 71.58% { opacity: 0; }
  73.68%, 89.47% { opacity: 1; }
  94.21%, 100% { opacity: 0; }
}
@keyframes mach-nav {
  0%, 45.26% { opacity: 0; transform: translate3d(0, -6px, 0); }
  47.37%, 89.47% { opacity: 1; transform: none; }
  94.21%, 100% { opacity: 0; transform: translate3d(0, -6px, 0); }
}
/* Le léger défilement de la page pendant que la section pricing se remplit. */
@keyframes mach-scroll {
  0%, 56.84% { transform: translateY(0); }
  62.11%, 89.47% { transform: translateY(calc(var(--mach-scroll) * -1)); }
  94.21% { transform: translateY(calc(var(--mach-scroll) * -1)); }
  95%, 100% { transform: translateY(0); }
}
@keyframes mach-h1 {
  0%, 46.84% { opacity: 1; clip-path: inset(0 100% 0 0); }
  48.95%, 89.47% { opacity: 1; clip-path: inset(0 0 0 0); }
  94.21% { opacity: 0; clip-path: inset(0 0 0 0); }
  95%, 100% { opacity: 1; clip-path: inset(0 100% 0 0); }
}
@keyframes mach-sub {
  0%, 48.42% { opacity: 1; clip-path: inset(0 100% 0 0); }
  50.53%, 89.47% { opacity: 1; clip-path: inset(0 0 0 0); }
  94.21% { opacity: 0; clip-path: inset(0 0 0 0); }
  95%, 100% { opacity: 1; clip-path: inset(0 100% 0 0); }
}
@keyframes mach-cta {
  0%, 50.53% { opacity: 0; transform: translate3d(0, 7px, 0) scale(.9); }
  53.16%, 89.47% { opacity: 1; transform: none; }
  94.21%, 100% { opacity: 0; transform: translate3d(0, 5px, 0) scale(.94); }
}
@keyframes mach-plabel {
  0%, 55.79% { opacity: 0; transform: translate3d(0, 6px, 0); }
  57.37%, 89.47% { opacity: 1; transform: none; }
  94.21%, 100% { opacity: 0; transform: translate3d(0, 5px, 0); }
}
@keyframes mach-card-1 {
  0%, 57.89% { opacity: 0; transform: translate3d(0, 11px, 0) scale(.97); }
  60%, 89.47% { opacity: 1; transform: none; }
  94.21%, 100% { opacity: 0; transform: translate3d(0, 6px, 0) scale(.97); }
}
@keyframes mach-card-2 {
  0%, 60% { opacity: 0; transform: translate3d(0, 11px, 0) scale(.97); }
  62.11%, 89.47% { opacity: 1; transform: none; }
  94.21%, 100% { opacity: 0; transform: translate3d(0, 6px, 0) scale(.97); }
}
@keyframes mach-card-3 {
  0%, 62.11% { opacity: 0; transform: translate3d(0, 11px, 0) scale(.97); }
  64.21%, 89.47% { opacity: 1; transform: none; }
  94.21%, 100% { opacity: 0; transform: translate3d(0, 6px, 0) scale(.97); }
}

/* ---------- Le curseur ---------- */
@keyframes mach-cursor-x {
  0%, 21.05% { transform: translateX(72%); }
  25.5% { transform: translateX(56%); }
  28.42%, 30% { transform: translateX(35%); }
  33.5%, 41.58% { transform: translateX(30%); }
  46.5% { transform: translateX(55%); }
  55% { transform: translateX(30%); }
  63% { transform: translateX(60%); }
  66.32% { transform: translateX(47%); }
  71.05% { transform: translateX(77%); }
  76.5%, 89.47% { transform: translateX(55%); }
  94.21%, 100% { transform: translateX(72%); }
}
@keyframes mach-cursor-y {
  0%, 21.05% { transform: translateY(78%); }
  24.5% { transform: translateY(50%); }
  28.42%, 30% { transform: translateY(14.6%); }
  33.5%, 41.58% { transform: translateY(27%); }
  47.5% { transform: translateY(46%); }
  55.5% { transform: translateY(66%); }
  63.5% { transform: translateY(78%); }
  66.9% { transform: translateY(5.4%); }
  71.5% { transform: translateY(5.4%); }
  77%, 89.47% { transform: translateY(46%); }
  94.21%, 100% { transform: translateY(78%); }
}
@keyframes mach-cursor-pop {
  0%, 21.05% { opacity: 0; transform: scale(.8); }
  23.7% { opacity: 1; transform: scale(1); }
  28.2% { transform: scale(1); }
  28.95% { transform: scale(.78); }
  29.7% { transform: scale(1); }
  66.9% { transform: scale(1); }
  67.5% { transform: scale(.78); }
  68.1% { transform: scale(1); }
  71.4% { transform: scale(1); }
  72% { transform: scale(.78); }
  72.6% { transform: scale(1); }
  89.47% { opacity: 1; transform: scale(1); }
  94.21%, 100% { opacity: 0; transform: scale(.85); }
}

/* ============================================================
   Adaptations
   ============================================================ */
/* Sous 1040 px la fenêtre passe sous le texte : les deux panneaux gardent
   assez de largeur pour rester lisibles côte à côte. */
@media (max-width: 1040px) {
  #machines {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(32px, 4vw, 44px);
    padding-block: clamp(70px, 8vw, 100px);
  }
  #machines .machines-support, #machines .machines-rail { max-width: 34em; }
}

@media (max-width: 760px) {
  #machines { padding: 62px 24px 68px; gap: 30px; }
  #machines .machines-title { font-size: clamp(1.55rem, 7.35vw, 2.42rem); }
  #machines .machines-support { margin-top: 18px; font-size: 15px; max-width: 32em; }
  #machines .machines-rail { max-width: none; margin-top: 26px; padding-top: 18px; gap: 16px; }
  #machines .machines-devices { gap: 18px; }
}

/* Sous 520 px les deux panneaux ne tiennent plus côte à côte :
   le Screen passe au-dessus du chat. */
@media (max-width: 520px) {
  #machines {
    --mach-scroll: 22px;
  }
  #machines .mach-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 300px 196px;
    height: auto;
  }
  #machines .mach-pane-screen { order: -1; border-bottom: 1px solid var(--mach-line-soft); }
  #machines .mach-pane-chat { border-right: 0; }
  #machines .mach-titlebar { gap: 8px; padding: 0 9px; }
  #machines .mach-who { gap: 6px; font-size: 11px; }
  #machines .mach-avatar { width: 18px; height: 18px; font-size: 10px; }
  #machines .mach-meta { gap: 7px; }
  #machines .mach-chip-item { padding: 3px 7px 3px 5px; }
  #machines .mach-thread { padding: 10px; }
  #machines .mach-msg { max-width: 90%; }
  /* La maquette de page descend d'un cran pour tenir dans un panneau plus court. */
  #machines .mach-site-body { padding: 18px 12px 16px; }
  #machines .mach-hero-h1 { height: 11px; }
  #machines .mach-hero-sub { height: 6px; margin-top: 8px; }
  #machines .mach-hero-btn { width: 70px; height: 18px; margin-top: 14px; }
  #machines .mach-price-label { height: 6px; margin-top: 24px; }
  #machines .mach-price-cards { margin-top: 12px; gap: 7px; }
  #machines .mach-price-card { padding: 9px 7px; gap: 5px; }
  #machines .mach-l-b { height: 10px; }
  #machines .mach-l-d { height: 9px; }
  #machines .mach-newtab .mach-google svg { width: 30px; height: 30px; }
  #machines .mach-search { margin-top: 14px; height: 20px; }
  #machines .mach-shortcuts { margin-top: 14px; }
}

/* ============================================================
   Mouvement réduit : rien ne bouge, l'état final reste affiché.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .js #machines .machines-stage { transform: none; }
  .js #machines .machines-rail .machines-dot { transform: none; opacity: 1; transition: none; }
}