/* ==========================================================================
   TheUnnamedCompany — site.css (v3)
   Tokens repris du design system, sans renommage. Mobile first : les valeurs
   par défaut sont les valeurs mobiles, les paliers min-width montent vers le
   desktop. Aucune décision de mise en page n'est prise en JavaScript.
   Motion : transform et opacity uniquement.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts — auto-hébergées, sous-ensemble latin, variable woff2
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
  src: url("../fonts/inter-tight-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
  --font-display: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* couleurs — cinq neutres, un accent */
  --ink: #0a0a0a;
  --white: #ffffff;
  --paper: #f4f3ef;
  --gray-500: #6b6862;
  --gray-300: #9c9a94;
  --rule: #e4e2dc;
  --acid: #ddff33;

  --ink-800: #1c1c1a;
  --ink-600: #2e2e2b;
  --paper-dark: #eceae4;

  --text-primary: var(--ink);
  --text-secondary: var(--gray-500);
  --text-inverse: var(--white);
  --text-inverse-secondary: var(--gray-300);
  --text-accent: var(--acid); /* surfaces sombres uniquement — 1,14:1 sur blanc */

  --surface-page: var(--white);
  --surface-paper: var(--paper);
  --surface-ink: var(--ink);
  --surface-ink-raised: var(--ink-800);
  --surface-inset: var(--paper-dark);

  --border-hairline: var(--rule);
  --border-hairline-dark: #2e2e2b;
  --border-strong: var(--ink);
  --highlight-bg: var(--acid);
  --highlight-text: var(--ink);
  --focus-ring: var(--acid);

  /* typographie */
  --display-xxl-size: 76px;
  --display-xl-size: 58px;
  --display-l-size: 44px;
  --display-weight: 800;
  --display-leading: 1;
  --display-tracking: -0.035em;

  --h2-size: 34px;
  --h2-weight: 800;
  --h2-leading: 1.06;
  --h2-tracking: -0.032em;

  --h3-size: 22px;
  --h3-weight: 700;
  --h3-leading: 1.18;
  --h3-tracking: -0.022em;

  --h4-size: 17px;
  --h4-weight: 700;
  --h4-leading: 1.3;
  --h4-tracking: -0.015em;

  --body-l-size: 18px;
  --body-l-leading: 1.6;
  --body-size: 15.5px;
  --body-leading: 1.68;
  --body-s-size: 14px;
  --body-s-leading: 1.62;
  --body-weight: 400;
  --body-tracking: -0.004em;

  --eyebrow-size: 11px;
  --eyebrow-weight: 600;
  --eyebrow-tracking: 0.16em;
  --tag-size: 11.5px;
  --tag-weight: 500;
  --tag-tracking: 0.02em;
  --caption-size: 12.5px;
  --caption-leading: 1.6;

  --numeral-size: 52px;
  --numeral-weight: 800;
  --numeral-tracking: -0.04em;
  --index-size: 20px;
  --index-size-sm: 13px;

  /* espacements */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 88px;
  --space-10: 120px;
  --space-11: 160px;
  --space-12: 208px;

  --container-max: 1200px;

  /* Densité mobile (§4 du brief v3). Valeurs par défaut = mobile. */
  --gutter-page: 20px;
  --gutter-page-mobile: 20px;
  --grid-gap: 28px;
  --grid-gap-wide: 32px;
  --section-pad-y: 56px;
  --section-pad-y-tight: 56px;
  --stack-header: 20px;
  --stack-block: 40px;
  --stack-item: 20px;

  --measure-text: 58ch;
  --measure-headline: 20ch;
  --measure-intro: 52ch;

  --bp-md: 960px;
  --bp-sm: 520px;

  /* effets */
  --border-width: 1px;
  --radius-0: 0px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --shadow-card-hover: 0 18px 40px -18px rgba(10, 10, 10, 0.28);
  --shadow-none: none;
  --scrim-header: rgba(255, 255, 255, 0.78);
  --blur-header: saturate(180%) blur(14px);

  /* motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 180ms;
  --duration-base: 280ms;
  --duration-reveal: 420ms;
  --reveal-offset: 18px;
  --hover-lift: -2px;
  --hover-scale: 1.015;
  --marquee-duration: 32s;

  --header-pad-y: 14px;
  --header-h: 62px;
}

/* --------------------------------------------------------------------------
   3. Reset et base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--body-size);
  font-weight: var(--body-weight);
  line-height: var(--body-leading);
  letter-spacing: var(--body-tracking);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Verrou de défilement pendant l'ouverture du menu mobile. */
body.is-locked {
  overflow: hidden;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-display);
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: var(--gutter-page-mobile);
  top: 0;
  z-index: 100;
  transform: translateY(-140%);
  background: var(--ink);
  color: var(--white);
  font-size: 13px;
  font-weight: 600;
  padding: 12px 18px;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  text-decoration: none;
  transition: transform var(--duration-fast) var(--ease-out);
}

.skip-link:focus {
  transform: translateY(0);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */

.section {
  padding: var(--section-pad-y) var(--gutter-page);
}

.section--ink {
  background: var(--surface-ink);
  color: var(--text-inverse);
}

.section--paper {
  background: var(--surface-paper);
}

.section--page {
  background: var(--surface-page);
}

.inner {
  max-width: var(--container-max);
  margin: 0 auto;
}

.stack-block {
  display: flex;
  flex-direction: column;
  gap: var(--stack-block);
}

/* --------------------------------------------------------------------------
   5. Primitives
   -------------------------------------------------------------------------- */

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--eyebrow-size);
  font-weight: var(--eyebrow-weight);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  line-height: 1;
  color: var(--text-secondary);
}

.section--ink .eyebrow {
  color: var(--text-inverse-secondary);
}

/* Surlignage acide. Le fond est un background-image cloné sur chaque ligne
   (box-decoration-break) : un pseudo-élément absolu ne couvrirait qu'un
   rectangle, et le texte des lignes non couvertes deviendrait noir sur noir. */
.highlight {
  color: var(--highlight-text);
  padding: 0 0.12em;
  background-image: linear-gradient(var(--highlight-bg), var(--highlight-bg));
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.tag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--tag-size);
  font-weight: var(--tag-weight);
  letter-spacing: var(--tag-tracking);
  line-height: 1;
  padding: 6px 10px;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  color: var(--ink);
  background: transparent;
}

.tag--dark {
  color: var(--white);
  border-color: var(--border-hairline-dark);
}

.badge {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--tag-size);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  background: var(--ink);
  color: var(--acid);
  border: 1px solid var(--border-hairline-dark);
}

.badge--live {
  background: var(--acid);
  color: var(--ink);
  border-color: var(--acid);
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.btn {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 22px;
  min-height: 44px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
  transition: background var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.btn:active {
  transform: translateY(0);
  transition-duration: 90ms;
}

.btn--lg {
  font-size: 15px;
  padding: 18px 26px;
}

.btn--sm {
  font-size: 13px;
  padding: 11px 16px;
}

.btn--outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--border-hairline);
}

.btn--solid-inverse {
  background: var(--white);
  color: var(--ink);
  border-color: var(--white);
}

.btn--outline-inverse {
  background: transparent;
  color: var(--white);
  border-color: var(--border-hairline-dark);
}

.arrow-link {
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  position: relative;
}

.arrow-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 10px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--duration-base) var(--ease-out);
}

.arrow-link--light {
  color: var(--white);
}

.arrow {
  transition: transform var(--duration-fast) var(--ease-out);
}

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--scrim-header);
  -webkit-backdrop-filter: var(--blur-header);
  backdrop-filter: var(--blur-header);
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-base) var(--ease-out);
}

.site-header.is-stuck {
  border-bottom-color: var(--border-hairline);
}

/* La compression du header au scroll passe par le padding d'un conteneur
   promu sur sa propre couche : le recalcul reste confiné au header. */
.site-header__bar {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: var(--header-pad-y) var(--gutter-page);
  transform: translateZ(0);
  transition: padding var(--duration-base) var(--ease-out);
}

.site-header.is-stuck .site-header__bar {
  --header-pad-y: 8px;
}

.logo {
  display: flex;
  align-items: baseline;
  gap: 10px;
  text-decoration: none;
  min-height: 44px;
  align-content: center;
  flex-wrap: wrap;
}

/* Pastille de marque, posée sur les pages produit : l'astérisque de TooMee au
   lieu du seul nom de l'éditeur. Alignée sur le centre et non la ligne de base,
   sinon le carré d'encre flotte au-dessus du mot. */
.logo__mark {
  flex: 0 0 auto;
  align-self: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
}

.logo__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.04em;
  color: var(--text-primary);
}

.logo__baseline {
  display: none;
  font-size: 11px;
  color: var(--text-secondary);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.site-nav__link {
  display: none;
  position: relative;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 12px 0;
  transition: color var(--duration-fast) var(--ease-out);
}

.site-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--duration-fast) var(--ease-out);
}

.site-nav > .btn {
  display: none;
}

.lang-switch {
  display: flex;
  gap: 2px;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  padding: 2px;
}

.lang-switch__item {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 6px 9px;
  min-width: 34px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  text-decoration: none;
  color: var(--text-secondary);
  background: transparent;
  transition: color var(--duration-fast) var(--ease-out);
}

.lang-switch__item[aria-current="true"] {
  background: var(--ink);
  color: var(--white);
}

.burger {
  display: flex;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
}

.burger span {
  width: 18px;
  height: 1.5px;
  background: var(--ink);
  transition: transform var(--duration-fast) var(--ease-out);
}

.burger[aria-expanded="true"] span:first-child {
  transform: translateY(2.75px) rotate(45deg);
}

.burger[aria-expanded="true"] span:last-child {
  transform: translateY(-2.75px) rotate(-45deg);
}

/* Panneau mobile : sans JavaScript il est en flux, ouvert et navigable.
   Avec JavaScript il coulisse depuis le haut du header. */
.mobile-panel {
  border-top: 1px solid var(--border-hairline);
  background: var(--white);
  padding: var(--space-4) var(--gutter-page-mobile) var(--space-6);
}

.mobile-panel ul {
  display: flex;
  flex-direction: column;
}

.mobile-panel a {
  display: flex;
  align-items: center;
  min-height: 52px;
  font-size: 17px;
  font-weight: 500;
  text-decoration: none;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-hairline);
}

.mobile-panel .btn {
  margin-top: var(--space-5);
  width: 100%;
}

.js .mobile-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 29;
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: transform 196ms var(--ease-out), opacity 196ms var(--ease-out),
    visibility 0s linear 196ms;
}

.js .mobile-panel.is-open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition: transform var(--duration-base) var(--ease-out),
    opacity var(--duration-base) var(--ease-out), visibility 0s;
}

/* Cascade des liens : le décalage est posé en JS via --i. */
.js .mobile-panel li,
.js .mobile-panel > .btn {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.js .mobile-panel.is-open li,
.js .mobile-panel.is-open > .btn {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i, 0) * 40ms);
}

.scrim {
  position: fixed;
  inset: 0;
  z-index: 25;
  background: rgba(10, 10, 10, 0.38);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-out);
}

.scrim.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */

.hero {
  padding-top: 96px;
  padding-bottom: 72px;
}

.hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--stack-header);
}

.hero h1 {
  font-weight: var(--display-weight);
  font-size: clamp(32px, 8vw, var(--display-xxl-size));
  line-height: var(--display-leading);
  letter-spacing: var(--display-tracking);
  max-width: 18ch;
}

.hero__sub {
  font-size: var(--body-l-size);
  line-height: var(--body-l-leading);
  color: var(--text-inverse-secondary);
  max-width: var(--measure-intro);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}

.hero__actions .btn {
  width: 100%;
}

/* --------------------------------------------------------------------------
   8. Bandeau défilant
   -------------------------------------------------------------------------- */

.marquee {
  overflow: hidden;
  background: var(--surface-ink);
  border-top: 1px solid var(--border-hairline-dark);
  border-bottom: 1px solid var(--border-hairline-dark);
  padding: 14px 0;
}

.marquee__track {
  display: flex;
  width: max-content;
  gap: 40px;
  animation: tuc-marquee var(--marquee-duration) linear infinite;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 40px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: var(--text-inverse);
}

.marquee__sep {
  color: var(--acid);
}

@keyframes tuc-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* --------------------------------------------------------------------------
   9. En-tête de section
   -------------------------------------------------------------------------- */

.section-header {
  display: flex;
  flex-direction: column;
  gap: var(--stack-header);
  align-items: flex-start;
}

.section-header--center {
  align-items: center;
  text-align: center;
}

.section-header h2 {
  font-size: clamp(26px, 5.2vw, var(--h2-size));
  font-weight: var(--h2-weight);
  line-height: var(--h2-leading);
  letter-spacing: var(--h2-tracking);
  max-width: 26ch;
}

.section-header__intro {
  font-size: var(--body-l-size);
  line-height: var(--body-l-leading);
  color: var(--text-secondary);
  max-width: var(--measure-intro);
}

.section--ink .section-header__intro {
  color: var(--text-inverse-secondary);
}

/* --------------------------------------------------------------------------
   10. Cellules numérotées — Approche.
       Mobile : une colonne, filet 1 px, pas de carte.
   -------------------------------------------------------------------------- */

.cells {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.cell {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 0;
  border-top: 1px solid var(--border-hairline);
}

.section--ink .cell {
  border-top-color: var(--border-hairline-dark);
}

.cell__index {
  font-family: var(--font-display);
  font-size: var(--index-size);
  font-weight: var(--display-weight);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text-secondary);
}

.section--ink .cell__index {
  color: var(--acid);
}

.cell h3 {
  font-size: var(--h4-size);
  font-weight: var(--h4-weight);
  line-height: var(--h4-leading);
  letter-spacing: var(--h4-tracking);
}

.cell p {
  font-size: var(--body-s-size);
  line-height: var(--body-leading);
  max-width: 42ch;
  color: var(--text-secondary);
}

.section--ink .cell p {
  color: var(--text-inverse-secondary);
}

/* --------------------------------------------------------------------------
   11. Services
   -------------------------------------------------------------------------- */

.service-list {
  border-bottom: 1px solid var(--border-hairline);
}

.service-row {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 6px 12px;
  align-items: start;
  padding: 24px 0;
  border-top: 1px solid var(--border-hairline);
  transition: background var(--duration-fast) var(--ease-out);
}

.service-row__index {
  font-family: var(--font-display);
  font-size: var(--index-size-sm);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-secondary);
  line-height: 1.5;
  transition: color var(--duration-fast) var(--ease-out);
}

.service-row h3 {
  font-size: var(--h3-size);
  font-weight: 800;
  letter-spacing: var(--h3-tracking);
  line-height: var(--h3-leading);
  transition: transform var(--duration-fast) var(--ease-out);
}

.service-row p {
  grid-column: 2 / -1;
  font-size: var(--body-s-size);
  line-height: var(--body-leading);
  color: var(--text-secondary);
  max-width: 52ch;
}

/* --------------------------------------------------------------------------
   12. Parcours & preuves
   -------------------------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--grid-gap);
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.stat__value {
  font-family: var(--font-display);
  font-size: clamp(38px, 9vw, var(--numeral-size));
  font-weight: var(--numeral-weight);
  letter-spacing: var(--numeral-tracking);
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.stat p {
  font-size: var(--caption-size);
  line-height: var(--body-s-leading);
  color: var(--text-secondary);
  max-width: 24ch;
}

.firms {
  border-top: 1px solid var(--border-hairline);
  border-bottom: 1px solid var(--border-hairline);
  padding: 20px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  align-items: center;
}

.firms li {
  display: flex;
  align-items: center;
  gap: 20px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.firms .sep {
  color: var(--text-secondary);
}

.caption {
  font-size: var(--caption-size);
  line-height: var(--body-leading);
  color: var(--text-secondary);
  max-width: var(--measure-text);
}

/* Bande sombre SooMee, à l'intérieur de la section Parcours. */
.product-band {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--surface-ink);
  color: var(--text-inverse);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
  transition: transform var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
}

.product-band__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.product-band h3 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  margin-right: var(--space-2);
}

.product-band p {
  font-size: var(--body-s-size);
  line-height: var(--body-leading);
  color: var(--text-inverse-secondary);
  max-width: 60ch;
}

/* --------------------------------------------------------------------------
   13. À propos
   -------------------------------------------------------------------------- */

.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap-wide);
  align-items: start;
  max-width: 560px;
}

.about__portrait {
  max-width: 190px;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.about__portrait img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: grayscale(1);
}

.about__text {
  display: flex;
  flex-direction: column;
  gap: var(--stack-item);
}

.about__text h2 {
  font-size: clamp(26px, 5.2vw, var(--h2-size));
  font-weight: 800;
  letter-spacing: var(--h2-tracking);
  line-height: var(--h2-leading);
}

.about__text p {
  font-size: var(--body-size);
  line-height: var(--body-leading);
  color: var(--text-secondary);
  max-width: var(--measure-text);
}

.about__links {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   14. FAQ
   -------------------------------------------------------------------------- */

.faq-list {
  border-top: 1px solid var(--border-hairline);
}

.faq-item {
  border-bottom: 1px solid var(--border-hairline);
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color var(--duration-fast) var(--ease-out);
}

.faq-item h3 {
  font-size: var(--h3-size);
  font-weight: 700;
  letter-spacing: var(--h3-tracking);
  line-height: var(--h3-leading);
  max-width: 34ch;
}

.faq-item p {
  font-size: var(--body-size);
  line-height: var(--body-leading);
  color: var(--text-secondary);
  max-width: var(--measure-text);
}

/* --------------------------------------------------------------------------
   15. CTA final
   -------------------------------------------------------------------------- */

.cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  text-align: center;
}

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  width: 100%;
}

.cta__actions .btn {
  width: 100%;
}

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--surface-ink);
  color: var(--text-inverse);
  padding: 0 var(--gutter-page) 40px;
}

.site-footer__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  border-top: 1px solid var(--border-hairline-dark);
  padding-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: space-between;
  align-items: flex-start;
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.site-footer__wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(24px, 7vw, 44px);
  letter-spacing: -0.04em;
  line-height: 1;
}

.site-footer__legal {
  font-size: 12.5px;
  color: var(--text-inverse-secondary);
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  align-items: center;
}

.site-footer__links a {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-inverse-secondary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  transition: color var(--duration-fast) var(--ease-out);
}

.site-footer__links .sep {
  color: var(--border-hairline-dark);
}

.to-top {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-hairline-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  text-decoration: none;
  font-size: 16px;
  transition: border-color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

/* --------------------------------------------------------------------------
   17. Pages légales
   -------------------------------------------------------------------------- */

.legal {
  padding: 96px var(--gutter-page) var(--section-pad-y);
}

.legal__inner {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.legal h1 {
  font-size: clamp(30px, 8vw, var(--display-l-size));
  font-weight: 800;
  letter-spacing: var(--display-tracking);
  line-height: 1.04;
}

.legal h2 {
  font-size: var(--h3-size);
  font-weight: 700;
  letter-spacing: var(--h3-tracking);
  margin-top: var(--space-4);
}

.legal p,
.legal li {
  font-size: var(--body-size);
  line-height: var(--body-leading);
  color: var(--text-secondary);
}

.legal li {
  padding: 2px 0;
}

/* --------------------------------------------------------------------------
   18. Motion — entrée du hero, révélation au scroll.
       Sans la classe .js sur <html>, rien n'est masqué : la page est complète.
   -------------------------------------------------------------------------- */

.js .reveal {
  opacity: 0;
  transform: translateY(var(--reveal-offset));
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity var(--duration-reveal) var(--ease-out),
    transform var(--duration-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

/* Hero : animations CSS, pas de requestAnimationFrame. Un onglet ouvert en
   arrière-plan suspend rAF — l'entrée ne partirait jamais et le contenu
   resterait masqué jusqu'au retour de l'utilisateur.
   Le H1 reste à opacité pleine : c'est l'élément LCP, un fondu retarderait
   le Largest Contentful Paint d'autant. Translation seule. */
@keyframes tuc-fade-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes tuc-rise {
  from {
    transform: translateY(14px);
  }
  to {
    transform: none;
  }
}

/* Le fond se dessine de gauche à droite, une seule fois. Le texte ne prend sa
   couleur définitive qu'à la toute fin du tracé : plus tôt, il passerait noir
   sur noir le temps du geste. */
@keyframes tuc-sweep {
  from {
    background-size: 0% 100%;
    color: var(--text-inverse);
  }
  99% {
    color: var(--text-inverse);
  }
  to {
    background-size: 100% 100%;
    color: var(--highlight-text);
  }
}

.js .hero-anim {
  animation: tuc-fade-up 400ms var(--ease-out) both;
}

.js .hero-anim--h1 {
  animation: tuc-rise 450ms var(--ease-out) 60ms both;
}

.js .hero-anim--sub {
  animation-delay: 120ms;
}

.js .hero-anim--cta {
  animation-delay: 180ms;
}

.js .hero .highlight {
  animation: tuc-sweep 380ms var(--ease-out) 400ms both;
}

/* --------------------------------------------------------------------------
   19. États interactifs — pointeur fin uniquement.
       Sur tactile, aucun survol : il resterait collé après le tap.
   -------------------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    transform: translateY(var(--hover-lift));
  }

  .btn:not(.btn--outline):not(.btn--solid-inverse):not(.btn--outline-inverse):hover {
    background: var(--ink-800);
    border-color: var(--ink-800);
  }

  .btn--outline:hover {
    border-color: var(--ink);
  }

  .btn--solid-inverse:hover {
    background: var(--paper);
    border-color: var(--paper);
  }

  .btn--outline-inverse:hover {
    border-color: var(--white);
  }

  .arrow-link:hover::after {
    transform: scaleX(1);
  }

  .arrow-link:hover .arrow,
  .btn:hover .arrow {
    transform: translateX(4px);
  }

  .site-nav__link:hover {
    color: var(--text-primary);
  }

  .site-nav__link:hover::after {
    transform: scaleX(1);
  }

  .lang-switch__item:hover {
    color: var(--text-primary);
  }

  .service-row:hover {
    background: var(--surface-inset);
  }

  .service-row:hover .service-row__index {
    color: var(--ink);
  }

  .service-row:hover h3 {
    transform: translateX(4px);
  }

  .product-band:hover {
    transform: translateY(var(--hover-lift));
    box-shadow: var(--shadow-card-hover);
  }

  .faq-item:hover {
    border-bottom-color: var(--ink);
  }

  .site-footer__links a:hover {
    color: var(--white);
  }

  .to-top:hover {
    border-color: var(--white);
    transform: translateY(var(--hover-lift));
  }
}

/* --------------------------------------------------------------------------
   20. Responsive — mobile first, uniquement des min-width
   -------------------------------------------------------------------------- */

@media (min-width: 520px) {
  :root {
    --section-pad-y: 64px;
  }

  .logo__baseline {
    display: inline;
  }

  .hero__actions .btn,
  .cta__actions .btn {
    width: auto;
  }

  .cta__actions {
    width: auto;
  }

  .stats {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }

  .product-band {
    padding: var(--space-7) var(--space-6);
  }

  .site-footer__inner {
    flex-direction: row;
    align-items: flex-end;
    gap: 24px;
  }
}

@media (min-width: 768px) {
  :root {
    --gutter-page: 40px;
    --section-pad-y: 96px;
    --stack-block: 56px;
  }

  .hero {
    padding-top: 128px;
    padding-bottom: 96px;
  }

  .cells {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--grid-gap-wide);
  }

  .cell {
    padding: 0;
    border-top: none;
    gap: 14px;
  }

  .cell__index {
    order: 1;
  }

  .cell::before {
    content: "";
    display: block;
    height: 1px;
    background: var(--border-hairline);
    order: 2;
  }

  .section--ink .cell::before {
    background: var(--border-hairline-dark);
  }

  .cell h3 {
    order: 3;
  }

  .cell p {
    order: 4;
  }
}

@media (min-width: 960px) {
  :root {
    --gutter-page: 56px;
    --section-pad-y: 160px;
    --section-pad-y-tight: 120px;
    --grid-gap: 48px;
    --grid-gap-wide: 96px;
    --stack-block: 88px;
    --stack-header: 28px;
    --header-pad-y: 20px;
    --header-h: 80px;
  }

  .site-header__bar {
    min-height: 80px;
  }

  .site-header.is-stuck .site-header__bar {
    --header-pad-y: 12px;
    min-height: 64px;
  }

  .site-nav__link,
  .site-nav > .btn {
    display: inline-flex;
  }

  .burger,
  .mobile-panel,
  .scrim {
    display: none;
  }

  .hero {
    padding-top: 176px;
    padding-bottom: 128px;
  }

  .section-header h2 {
    max-width: 22ch;
  }

  .service-row {
    grid-template-columns: 64px minmax(200px, 1fr) 2fr;
    gap: 32px;
    padding: 32px 20px;
    margin: 0 -20px;
  }

  .service-row p {
    grid-column: auto;
  }

  .firms {
    padding: 28px 0;
    gap: 16px 32px;
  }

  .firms li {
    font-size: 15px;
    gap: 32px;
  }

  .about-grid {
    grid-template-columns: 190px 1fr;
    max-width: none;
  }

  .product-band {
    padding: var(--space-8) var(--space-7);
  }
}

/* --------------------------------------------------------------------------
   21. prefers-reduced-motion — version équivalente, pas dégradée
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }

  .marquee__track {
    animation: none !important;
    transform: none !important;
  }

  .js .reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  .js .hero-anim,
  .js .hero .highlight {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .highlight {
    background-size: 100% 100% !important;
    color: var(--highlight-text) !important;
  }

  .js .mobile-panel li,
  .js .mobile-panel > .btn {
    opacity: 1;
    transform: none;
  }

  .btn:hover,
  .to-top:hover,
  .product-band:hover,
  .service-row:hover h3 {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   22. Page TooMee — identité du produit, pas celle du studio.

   **Pourquoi une section entière plutôt qu'une réutilisation des composants
   du site.** TooMee a son propre design system, achromatique : aucune teinte
   nulle part, les distinctions passent par la graisse, la position et
   l'inversion. La page d'accueil du studio, elle, repose sur un accent acide
   et sur Inter Tight. Habiller TooMee avec ces deux-là donnerait une page qui
   ne ressemble pas au produit qu'elle vend — le visiteur qui télécharge
   ensuite l'app trouverait autre chose que ce qu'on lui a montré.

   Tous les jetons ci-dessous sont repris **sans renommage** de
   `TooMeeKit/Sources/TooMeeKit/Design/` : `TMColor` §1.1 pour les couleurs,
   `TMType` pour les rôles typographiques, `TMSpace` pour l'échelle. Le
   préfixe `.tm-` et le porteur `.tm-page` garantissent qu'aucune règle d'ici
   ne peut atteindre la page d'accueil.
   -------------------------------------------------------------------------- */

.tm-page {
  /* Surfaces et rampe d'encre — TMColor, apparence claire. */
  --tm-paper: #f3f2ed;
  --tm-sheet: #ffffff;
  --tm-fill: #e7e5dd;
  --tm-rule: #dcdad1;
  --tm-ink: #16161a;
  --tm-ink80: #3a3a36;
  --tm-ink60: #6e6e68;
  --tm-ink50: #8b8a83;
  --tm-ink40: #a3a29b;

  /* Helvetica Neue : la fonte de l'app. Pas de fonte chargée pour cette
     page — elle est native sur les appareils Apple, seul public de TooMee,
     et une police de plus coûterait un aller-retour réseau au premier
     rendu. */
  --tm-font: "Helvetica Neue", Helvetica, Arial, sans-serif;

  background: var(--tm-paper);
  color: var(--tm-ink);
  font-family: var(--tm-font);
}

/* L'app suit l'apparence du système ; sa page aussi. Ce sont exactement les
   valeurs sombres de `TMColor.allPairs`. */
@media (prefers-color-scheme: dark) {
  .tm-page {
    --tm-paper: #141414;
    --tm-sheet: #1c1c1c;
    --tm-fill: #262626;
    --tm-rule: #333333;
    --tm-ink: #f2f1ec;
    --tm-ink80: #c9c8c1;
    --tm-ink60: #a8a8a0;
    --tm-ink50: #8f8e87;
    --tm-ink40: #77776f;
  }
}

/* --- Sections ------------------------------------------------------------ */

/* La gouttière horizontale vient de `--gutter-page`, comme pour `.section` :
   sans elle, le texte touchait le bord de l'écran sur téléphone alors que
   l'en-tête, lui, gardait sa marge. Constaté au rendu en 430 px. */
.tm-section {
  padding: 64px var(--gutter-page); /* TMSpace.huge */
  background: var(--tm-paper);
  border-top: 1px solid var(--tm-rule);
}

.tm-section--sheet {
  background: var(--tm-sheet);
}

/* L'inversion est la seule emphase que le design autorise : pas de couleur
   d'accent, donc c'est le fond qui bascule.

   **La section inversée redéfinit toute la palette, elle ne bascule pas deux
   jetons.** Première version : `background: var(--tm-ink)` et texte en
   `--tm-paper`. En apparence sombre, `--tm-ink` vaut #F2F1EC : la section
   « encre » devenait donc claire, et le titre — resté sur `--tm-ink` — clair
   sur clair, c'est-à-dire invisible. Constaté au rendu, pas déduit. En
   redéfinissant les jetons, tout ce qu'elle contient hérite du bon contraste
   sans qu'aucune règle n'ait à l'énumérer. */
.tm-section--ink {
  --tm-paper: #16161a;
  --tm-sheet: #1c1c1c;
  --tm-fill: #262626;
  --tm-rule: #333333;
  --tm-ink: #f2f1ec;
  --tm-ink80: #c9c8c1;
  --tm-ink60: #a8a8a0;
  --tm-ink50: #8f8e87;
  --tm-ink40: #77776f;

  background: var(--tm-paper);
  color: var(--tm-ink);
  border-top: 0;
}

/* En apparence sombre, l'inversion se fait dans l'autre sens : la section
   d'emphase est celle qui s'éclaircit. Sans cela, elle serait de la même
   couleur que le reste de la page et l'emphase disparaîtrait. */
@media (prefers-color-scheme: dark) {
  .tm-section--ink {
    --tm-paper: #f3f2ed;
    --tm-sheet: #ffffff;
    --tm-fill: #e7e5dd;
    --tm-rule: #dcdad1;
    --tm-ink: #16161a;
    --tm-ink80: #3a3a36;
    --tm-ink60: #6e6e68;
    --tm-ink50: #8b8a83;
    --tm-ink40: #a3a29b;
  }
}

/* L'écart vertical entre blocs. **Le sélecteur est préfixé par `.tm-page`**
   parce que `.tm-page p { margin: 0 }` l'emportait autrement en spécificité :
   les paragraphes se collaient au titre qui les précède, ce que le rendu a
   montré tout de suite. */
.tm-page .tm-stack > * + * {
  margin-top: 32px; /* TMSpace.section */
}

/* --- Typographie — rôles de TMType --------------------------------------- */

/* TMType.label : 11 pt, gras, +0,12 em, en petites capitales. C'est
   l'étiquette de section de l'app, celle qui coiffe CHANNEL, CATEGORY,
   TAGS. */
.tm-eyebrow {
  display: block;
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tm-ink40);
}

/* TMType.display : 34 pt, gras, −0,035 em. Agrandi ici par `clamp` parce
   qu'un écran de 1 400 px n'est pas un iPhone — le rapport entre le titre
   et le corps, lui, est conservé. */
.tm-page h1 {
  font-family: var(--tm-font);
  /* Le titre porte un saut de ligne imposé : la borne basse doit laisser
     « Enregistrez maintenant. » tenir sur une ligne d'iPhone, et la coupure
     de mot sert de filet pour les langues aux mots plus longs. */
  font-size: clamp(34px, 7.4vw, 68px);
  overflow-wrap: break-word;
  line-height: 1.06;
  letter-spacing: -0.035em;
  font-weight: 700;
  margin: 0;
  color: var(--tm-ink);
}

.tm-page h2 {
  font-family: var(--tm-font);
  font-size: clamp(26px, 4vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 700;
  margin: 0;
  color: var(--tm-ink);
}

/* TMType.rowTitleIOS : le titre d'une ligne de liste, 22 pt gras. C'est la
   taille que le visiteur retrouvera dans l'app. */
.tm-page h3 {
  font-family: var(--tm-font);
  font-size: 22px;
  line-height: 1.17;
  letter-spacing: -0.015em;
  font-weight: 700;
  margin: 0;
  color: var(--tm-ink);
}

/* TMType.body : 15 pt, interligne 21. */
.tm-page p {
  font-family: var(--tm-font);
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--tm-ink60);
}

.tm-lede {
  font-size: clamp(17px, 2.2vw, 20px) !important;
  line-height: 1.45;
  max-width: 52ch;
  color: var(--tm-ink80) !important;
}

.tm-page a {
  color: inherit;
}

/* --- Marque et bande ------------------------------------------------------ */

/* La marque : l'icône réelle de l'app — l'astérisque du produit, exporté du
   catalogue d'icônes iOS avec le rayon d'Apple (185/1024) — suivie du mot.
   Pas un astérisque retapé en texte : le visiteur doit reconnaître dans
   l'App Store exactement ce qu'il a vu ici. */
/* Préfixé, comme les écarts du `.tm-stack` : `.tm-page p` porte une taille
   de corps qui l'emporterait sur celle de la marque. */
.tm-page .tm-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--tm-ink);
}

.tm-brand__icon {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 13px; /* 185/1024 de 56 */
}

/* --- Hero ---------------------------------------------------------------- */

.tm-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}

/* Deux écrans, l'un devant l'autre : c'est le geste entier en une image —
   « Save to TooMee » d'un côté, ce que ça donne de l'autre. Un seul écran ne
   raconterait que la moitié. */
/* Deux appareils posés côte à côte, qui se chevauchent par une marge
   négative. **Pas de positionnement absolu** : la première version plaçait le
   second en `position: absolute`, et il sortait de la colonne — donc du
   cadre, avec le risque d'une barre de défilement horizontale sur la page
   entière. Constaté au rendu. */
/* **Pas de découpe ici.** Une première version portait `overflow: clip` par
   précaution : la découpe tranchait l'ombre portée des appareils en plein
   dégradé, ce qui donnait deux barres nettes sous les captures (constaté à
   l'écran). Une ombre ne participe pas à la mise en page et ne peut pas
   provoquer de défilement horizontal — il n'y avait rien à retenir. Le
   retrait intérieur, lui, reste : il réserve la place que l'ombre et
   l'inclinaison occupent. */
.tm-hero__art {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 8px 24px 24px;
}

/* Sur un téléphone, deux appareils de 200 px plus leur chevauchement et leur
   rotation dépassaient la largeur de l'écran : la page entière se décalait et
   le texte sortait du cadre à droite. Constaté au rendu en 430 px de large.
   La largeur est donc relative tant qu'on n'a pas la place. */
.tm-hero__device {
  max-width: 44%;
  flex: 0 1 auto;
}

.tm-hero__device--front {
  z-index: 1;
  margin-right: -40px;
  transform: rotate(-3deg);
  /* Deux ombres : une portée large et douce, une courte au contact. C'est
     ce qui pose l'appareil sur la page au lieu de le faire flotter. */
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.10);
}

.tm-hero__device--back {
  z-index: 0;
  transform: rotate(5deg) translateY(30px);
  opacity: 0.95;
}

/* Les mots de la bande basse de l'app — All, Favs, Colls, Tags. Ils servent
   ici de sommaire, à la même taille et à la même graisse que dans le
   produit. */
.tm-band {
  display: flex;
  flex-wrap: wrap;
  gap: 18px; /* TMSpace.bandGap */
  margin: 0;
  padding: 0;
  list-style: none;
}

.tm-band a {
  font-size: 25.5px; /* TMType.navWord */
  line-height: 30px;
  letter-spacing: -0.01em;
  font-weight: 700;
  text-decoration: none;
  color: var(--tm-ink);
}

.tm-band a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* --- Lignes de liste ------------------------------------------------------ */

/* La liste de l'app : un filet, un glyphe, un titre, une description. C'est
   la vue que le visiteur passera le plus de temps à regarder, donc celle qui
   doit apparaître sur la page. */
.tm-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.tm-row {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 8px; /* TMSpace.sm */
  padding: 20px 0; /* TMSpace.gutter */
  border-top: 1px solid var(--tm-rule);
}

.tm-row:first-child {
  border-top: 0;
}

.tm-row__glyph {
  width: 24px;
  height: 24px;
  color: var(--tm-ink60);
}

.tm-row__glyph svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7; /* TMStroke.regular */
}

.tm-page .tm-row__text > * + * {
  margin-top: 4px; /* TMSpace.xs */
}

/* Une ligne de prose passe mal au-delà d'une soixantaine de signes : sur un
   grand écran, sans borne, chaque description traversait 1 200 px. */
.tm-page .tm-row__text p,
.tm-page .tm-step p {
  max-width: 62ch;
}

/* La puce de catégorie : encre pleine, texte papier. Le design l'inverse
   parce qu'aucune couleur ne peut la distinguer des étiquettes. */
.tm-chip {
  display: inline-block;
  font-size: 12px;
  line-height: 16px;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--tm-ink);
  color: var(--tm-paper);
}

.tm-chip--tag {
  background: var(--tm-fill);
  color: var(--tm-ink60);
}

.tm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px; /* TMSpace.chipGap */
  margin-top: 8px;
}

/* --- Cadre d'appareil ----------------------------------------------------- */

/* Un iPhone dessiné, pas photographié : une photo de téléphone date la page
   en dix-huit mois et pèse dix fois plus lourd. */
.tm-device {
  position: relative;
  width: 100%;
  max-width: 260px;
  margin: 0;
  padding: 8px;
  border: 1px solid var(--tm-rule);
  border-radius: 34px;
  background: var(--tm-fill);
}

.tm-device img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 26px;
  background: var(--tm-sheet);
}

.tm-caption {
  margin-top: 12px;
  font-size: 13px; /* TMType.description */
  line-height: 18px;
  color: var(--tm-ink50);
}

/* --- Les trois temps ------------------------------------------------------ */

.tm-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

.tm-page .tm-step > * + * {
  margin-top: 12px; /* TMSpace.md */
}

/* Un écran entier fait 19,5 sur 9 : trois côte à côte occupent une page de
   haut pour des captures qu'on regarde en diagonale. La hauteur est donc
   bornée et l'image cadrée par le haut — c'est là que se trouve ce qui
   compte, la marque et les premières lignes. */
.tm-page .tm-step .tm-device {
  max-width: 232px;
}

.tm-page .tm-step .tm-device img {
  max-height: 420px;
  object-fit: cover;
  object-position: top;
}

.tm-step__index {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--tm-ink40);
}

/* --- Galerie d'écrans ----------------------------------------------------- */

.tm-shots {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 74%;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
}

.tm-shots figure {
  margin: 0;
  scroll-snap-align: center;
}

.tm-shots .tm-device {
  max-width: none;
}

/* --- Plateformes et disponibilité ---------------------------------------- */

.tm-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tm-specs li {
  font-size: 12px;
  line-height: 16px;
  padding: 4px 10px;
  border: 1px solid var(--tm-rule);
  border-radius: 6px;
  color: var(--tm-ink60);
}

/* --- Mac ------------------------------------------------------------------ */

/* La fenêtre du Mac se montre telle quelle, sans cadre d'ordinateur dessiné
   autour : la capture porte déjà ses pastilles et sa barre de titre, et un
   châssis de plus n'ajouterait qu'un anneau gris. Seuls le rayon et l'ombre
   la décollent du fond. */
.tm-mac {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--tm-rule);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.10);
}

.tm-mac img {
  display: block;
  width: 100%;
  height: auto;
}

/* La fenêtre surgissante de la barre de menus : plus petite, elle se pose à
   côté du texte qui l'explique. */
.tm-mac--menu {
  max-width: 420px;
}

/* --- Boutons de magasin, inactifs ---------------------------------------- */

/* **Ce ne sont pas les badges d'Apple.** Les siens sont des marques
   déposées, servies avec des règles d'usage : ils doivent pointer vers une
   fiche réellement en ligne et ne peuvent être ni modifiés ni grisés. Or ce
   qu'il faut montrer ici, c'est justement une porte qui n'ouvre pas encore.
   Ces deux boutons-là sont donc dessinés à la mesure d'un badge — même
   silhouette, même paire de lignes — mais dans les jetons de TooMee, et ils
   seront remplacés par les vrais le jour de la sortie. */
.tm-stores {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tm-store {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 10px 20px;
  border: 1px solid var(--tm-ink40);
  border-radius: 10px;
  color: var(--tm-ink);
  /* Inactif, et qui le dit : le contraste tombe, le curseur refuse, et
     l'état est porté par `aria-disabled` pour qui n'a pas d'yeux. */
  opacity: 0.5;
  cursor: not-allowed;
}

.tm-store svg {
  width: 26px;
  height: 26px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

.tm-store__lines {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.tm-page .tm-store__soon {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: inherit;
}

.tm-page .tm-store__name {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: inherit;
}

/* --- Liste d'attente ------------------------------------------------------ */

.tm-waitlist {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin: 0;
}

/* Un seul champ, à la taille du corps de l'app. Le trait sous le champ
   plutôt qu'un cadre complet : le design ne dessine pas de boîtes, il pose
   des filets. */
.tm-page .tm-waitlist input[type="email"] {
  /* Borné : un champ qui traverse 1 200 px pour recevoir une adresse de
     trente signes a l'air d'attendre autre chose. */
  flex: 1 1 260px;
  max-width: 420px;
  min-width: 0;
  font-family: var(--tm-font);
  font-size: 17px;
  line-height: 24px;
  color: var(--tm-ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--tm-ink40);
  border-radius: 0;
  padding: 10px 2px;
  appearance: none;
}

.tm-page .tm-waitlist input[type="email"]::placeholder {
  color: var(--tm-ink40);
}

.tm-page .tm-waitlist input[type="email"]:focus {
  outline: none;
  border-bottom-color: var(--tm-ink);
}

/* Le mot d'action a la taille des mots de la bande basse de l'app : c'est le
   même geste, il doit avoir le même poids. */
.tm-page .tm-waitlist button {
  font-family: var(--tm-font);
  font-size: 25.5px;
  line-height: 30px;
  letter-spacing: -0.01em;
  font-weight: 700;
  color: var(--tm-ink);
  background: transparent;
  border: 0;
  padding: 0;
  min-height: 44px;
  cursor: pointer;
}

.tm-page .tm-waitlist button:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.tm-waitlist-note {
  margin-top: 12px;
  font-size: 13px;
  line-height: 18px;
  color: var(--tm-ink50);
}

/* --- Grille de deux colonnes --------------------------------------------- */

.tm-duo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}

@media (min-width: 768px) {
  .tm-section {
    padding: 96px var(--gutter-page);
  }

  .tm-steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }

  .tm-shots {
    grid-auto-columns: minmax(0, 1fr);
    overflow: visible;
  }

  .tm-duo {
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px;
  }

  .tm-hero {
    grid-template-columns: 0.95fr 1.05fr;
    gap: 48px;
  }

  /* Assez grands pour qu'on lise « Save to TooMee » sur la capture : c'est
     le seul argument du hero, et à 232 px il était illisible. */
  .tm-hero__device {
    max-width: 296px;
  }
}