/* TooMee — page produit.
 *
 * Reprise du handoff `design_handoff_toomee_landing_responsive`. Le
 * prototype simulait ses deux mises en page en JavaScript ; ici ce sont de
 * vraies requêtes de média, écrites **mobile d'abord**, avec l'unique point
 * de rupture du design : 760 px.
 *
 * Feuille autonome : elle ne partage aucune classe avec `site.css`, qui
 * habille le reste du studio. Tout est préfixé `tm-`.
 */

:root {
  --tm-ink: #1d1d1f;
  --tm-black: #17171a;
  --tm-grey: #6e6e73;
  --tm-grey-light: #86868b;
  --tm-surface: #ffffff;
  --tm-surface-grey: #f5f5f7;
  --tm-surface-grey-2: #ececef;
  --tm-divider: #d2d2d7;
  --tm-divider-light: #f0f0f2;
  --tm-blue: #0071e3;
  --tm-blue-hover: #0077ed;
  --tm-link: #0066cc;
  --tm-dot: #c8c8cd;
  --tm-nav-bg: #ffffffd9;

  --tm-bezel: linear-gradient(145deg, #eef0f3, #c2c4ca 28%, #8a8b90 62%, #d8dade);
  --tm-well: #050505;
  --tm-title-gradient: linear-gradient(100deg, #3e4a56, #7c8ea3 60%, #a9b8ca);

  --tm-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tm-ease-pose: cubic-bezier(0.2, 0.9, 0.25, 1);
  --tm-ease-out: cubic-bezier(0.4, 0, 0.6, 1);

  --tm-pad-x: 22px;
  --tm-col: 480px;
}

@media (min-width: 760px) {
  :root {
    --tm-pad-x: 60px;
    --tm-col: 1180px;
  }
}

/* ===== Socle ===== */
/* **Le défilement des ancres est doux, et il s'arrête sous la barre.**
   `scroll-behavior` se pose sur l'élément qui défile vraiment — `html`,
   pas `body`. Et sans `scroll-margin-top`, la barre collante (46 px)
   recouvrirait le titre visé : on arriverait sur une section décapitée.
   Cette feuille n'est chargée que par la page TooMee. */
html { scroll-behavior: smooth; }
.tm-page [id] { scroll-margin-top: 66px; }

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

.tm-page {
  margin: 0;
  background: var(--tm-surface);
  color: var(--tm-ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* **Aucune graisse nulle part** : le contraste vient de la taille, des
     gris et du dégradé. C'est la règle centrale du design. */
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  /* Au téléphone, le téléphone de gauche du hero déborde exprès : la page
     ne doit pas se décaler pour autant. */
  overflow-x: hidden;
}

.tm-page a { color: inherit; text-decoration: none; }
/* **`height: auto` n'est pas décoratif.** Les attributs `width` et
   `height` d'une balise `img` valent des styles présentatifs : contraindre
   la seule largeur en CSS laisse la hauteur figée sur la valeur d'origine,
   et l'image s'étire. C'est ce qui aplatissait les visuels de la section
   « Pourquoi TooMee » (constaté le 2026-08-21). Les attributs restent —
   ils réservent la place et évitent que la page saute au chargement. */
.tm-page img { display: block; max-width: 100%; height: auto; }
.tm-page svg { display: block; }

/* La colonne de contenu, partout la même. */
.tm-wrap {
  width: 100%;
  max-width: var(--tm-col);
  margin: 0 auto;
}

.tm-grad {
  background: var(--tm-title-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

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

/* Le glyphe TooMee, seul dessin de la page. */
.tm-mark {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: var(--tm-black);
}
.tm-mark svg { stroke: #ffffff; fill: none; stroke-width: 2.6; stroke-linecap: round; }

/* ===== Navigation — collante, translucide ===== */
.tm-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--tm-nav-bg);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--tm-divider-light);
}
.tm-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 46px;
  max-width: var(--tm-col);
  margin: 0 auto;
  padding: 0 var(--tm-pad-x);
}
.tm-nav__home { display: flex; align-items: center; }
.tm-nav__home .tm-mark { width: 21px; height: 21px; border-radius: 7px; }
.tm-nav__home .tm-mark svg { width: 12px; height: 12px; }

/* Au téléphone la barre ne garde que la marque, la langue et l'action :
   six liens y deviendraient six cibles de 10 px. */
.tm-nav__links { display: none; }

.tm-lang {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--tm-grey-light);
}
.tm-lang a[aria-current="true"] { color: var(--tm-ink); }
.tm-lang span { color: var(--tm-divider); }

.tm-nav__actions { display: flex; align-items: center; gap: 14px; }

/* **Les liens n'apparaissent qu'à 1000 px, pas à 760.** « Pourquoi
   choisir TooMee » est trois fois plus long que « Vie privée » : entre
   760 et 1000, les six libellés passaient à la ligne dans une barre haute
   de 46 px. En dessous, la barre reprend la forme prévue par le design
   pour le téléphone — marque, langue, action — sans menu déroulant.
   L'écart suit la fenêtre et retrouve les 38 px du gabarit à 1180. */
@media (min-width: 1000px) {
  .tm-nav__links {
    display: flex;
    align-items: center;
    gap: clamp(20px, 3.2vw, 38px);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 10.6px;
    color: #1d1d1fcc;
    white-space: nowrap;
  }
  .tm-nav__links a:hover { color: var(--tm-link); }
}

.tm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--tm-blue);
  /* **Écrit deux fois, à dessein** : `.tm-page a { color: inherit }` pèse
     plus lourd qu'une simple classe et repeignait le texte des boutons en
     encre sombre sur bleu. */
  color: #ffffff;
  border: none;
  border-radius: 980px;
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.25s ease;
}
.tm-page a.tm-btn,
.tm-page a.tm-btn:hover,
.tm-page button.tm-btn { color: #ffffff; }
.tm-btn:hover { background: var(--tm-blue-hover); }
.tm-nav__btn { padding: 7px 15px; font-size: 11.5px; }

.tm-link {
  color: var(--tm-link);
  font-size: 15px;
}
.tm-page a.tm-link { color: var(--tm-link); }

/* **Le second choix est un bouton, pas un lien.** Deux actions de rang
   différent côté à côté : la première pleine, la seconde posée sur le
   fond de la page avec un simple filet. Le contour est un `inset` plutôt
   qu'une bordure — il ne change pas la hauteur, et les deux boutons
   gardent donc exactement la même. */
.tm-btn--ghost {
  background: var(--tm-surface);
  box-shadow: inset 0 0 0 1px var(--tm-divider);
}
.tm-btn--ghost:hover { background: var(--tm-surface-grey); }
.tm-page a.tm-btn--ghost,
.tm-page a.tm-btn--ghost:hover,
.tm-page button.tm-btn--ghost { color: var(--tm-ink); }

/* ===== Châssis de téléphone — gabarit unique ===== */
.tm-phone { position: relative; padding: 2px; background: var(--tm-bezel); display: inline-block; line-height: 0; }
.tm-phone__well { background: var(--tm-well); }
.tm-phone__well img { width: 100%; height: auto; }

/* ===== Titres de section — le même bloc partout ===== */
.tm-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* **Au téléphone, un titre ne colle pas à son texte.** Le grand écran
   sépare les deux de 26 px par `.tm-head__body` ; en colonne, rien ne les
   séparait et le paragraphe se lisait comme une troisième ligne de titre. */
.tm-head__body { display: flex; flex-direction: column; gap: 25px; }
.tm-eyebrow {
  margin: 0;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--tm-grey);
}
.tm-h2 {
  margin: 0;
  font-size: 29px;
  line-height: 1.10;
  letter-spacing: -0.01em;
  font-weight: 400;
}
.tm-lede {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--tm-grey);
  max-width: 30em;
}
.tm-lede strong,
.tm-copy strong { color: var(--tm-ink); font-weight: 400; }
/* La définition et le détail sont deux idées : le retour à la ligne les
   sépare, et cette respiration empêche les deux phrases de se toucher.
   `inline-block` parce qu'une marge basse ne s'applique pas à un `strong`
   resté en ligne. */
.tm-hero__lede strong { display: inline-block; margin-bottom: 10px; }

@media (min-width: 760px) {
  .tm-head {
    display: grid;
    grid-template-columns: minmax(0, 210px) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
  }
  .tm-head__body { display: flex; flex-direction: column; gap: 26px; }
  .tm-eyebrow { margin-top: 5px; font-size: 13px; }
  .tm-h2 { font-size: 39px; line-height: 1.09; }
  .tm-lede { font-size: 17.8px; }
}

/* ===== Sections ===== */
.tm-section { padding: 80px var(--tm-pad-x); }
.tm-section--white { padding: 90px var(--tm-pad-x); }
.tm-section--grey { background: var(--tm-surface-grey); }
.tm-section__inner { max-width: var(--tm-col); margin: 0 auto; display: flex; flex-direction: column; gap: 30px; }

@media (min-width: 760px) {
  .tm-section { padding: 170px var(--tm-pad-x); }
  .tm-section--white { padding: 180px var(--tm-pad-x); }
  .tm-section__inner { gap: 44px; }
}

/* ===== 1. Hero ===== */
.tm-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 22px;
  padding: 54px var(--tm-pad-x) 60px;
  max-width: var(--tm-col);
  margin: 0 auto;
}
.tm-hero__lockup { display: flex; align-items: center; gap: 13px; order: 1; }
.tm-hero__lockup .tm-mark { width: 44px; height: 44px; border-radius: 15px; }
.tm-hero__lockup .tm-mark svg { width: 25px; height: 25px; }
.tm-hero__word { font-size: 25px; letter-spacing: -0.02em; color: var(--tm-black); }

.tm-hero h1 {
  order: 2;
  margin: 0;
  font-size: 34px;
  line-height: 1.08;
  letter-spacing: -0.01em;
  font-weight: 400;
}
.tm-hero__lede { order: 4; }
.tm-hero__marquee-block { order: 6; width: 100%; padding-top: 20px; }
.tm-hero__buttons { order: 5; }
.tm-hero__phones { order: 3; }
.tm-hero__badge { order: 7; }



.tm-hero__buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
}
.tm-hero__buttons .tm-btn { padding: 14px 28px; font-size: 14.5px; }

/* Le groupe des trois téléphones. */
.tm-hero__phones {
  position: relative;
  width: 100%;
  max-width: 1060px;
  height: 400px;
  margin-top: 14px;
  transform: translateX(14px);
  transition: transform 0.9s var(--tm-ease);
}
.tm-hero__phone { position: absolute; }
.tm-hero__phone--left { z-index: 1; left: -46px; bottom: 74px; border-radius: 27px; }
.tm-hero__phone--left .tm-phone__well { padding: 5px; border-radius: 25px; }
.tm-hero__phone--left img { width: 128px; border-radius: 21px; }
.tm-hero__phone--mid { z-index: 2; left: 58px; bottom: 38px; border-radius: 32px; }
.tm-hero__phone--mid .tm-phone__well { padding: 6px; border-radius: 30px; }
.tm-hero__phone--mid img { width: 152px; border-radius: 25px; }
.tm-hero__phone--main { z-index: 3; left: 182px; bottom: 0; padding: 3px; border-radius: 36px; }
.tm-hero__phone--main .tm-phone__well { padding: 6px; border-radius: 33px; }
.tm-hero__phone--main img { width: 176px; border-radius: 28px; }

.tm-hero__phone--left { box-shadow: 0 22px 52px #1d1d1f24; }
.tm-hero__phone--mid { box-shadow: 0 24px 58px #1d1d1f26; }
.tm-hero__phone--main { box-shadow: 0 28px 64px #1d1d1f2b; }

.tm-hero__badge {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  /* Il ferme la section : de l'air au-dessus comme en dessous. */
  padding: 30px 0;
}
.tm-hero__badge-circle {
  width: 58px; height: 58px; border-radius: 999px; background: var(--tm-ink);
  display: grid; place-items: center; box-shadow: 0 10px 28px #1d1d1f1f;
}
.tm-hero__badge-circle svg { width: 30px; height: 30px; stroke: #fff; fill: none; stroke-width: 2.6; stroke-linecap: round; }
.tm-hero__badge-label { font-size: 16.5px; letter-spacing: -0.01em; }

@media (min-width: 760px) {
  /* Le bas du hero se resserre de 30 px : le badge ferme déjà la section
     avec ses 50 px, et l'ensemble décollait trop de la section suivante. */
  .tm-hero { padding: 140px var(--tm-pad-x) 90px; }
  /* De l'air au-dessus des deux actions, qui suivent la bande des
     plateformes — sans quoi les trois blocs se lisent d'un seul tenant. */
  .tm-hero__buttons { padding-top: 30px; }
  .tm-hero__lockup .tm-mark { width: 62px; height: 62px; }
  .tm-hero__lockup .tm-mark svg { width: 34px; height: 34px; }
  .tm-hero__word { font-size: 34px; }
  .tm-hero h1 { font-size: 59px; line-height: 1.07; }
  /* **L'ordre du grand écran** : l'accroche, puis les appareils, et
     seulement ensuite ce qui accompagne — la bande des plateformes et les
     deux boutons. Ils s'intercalaient entre la promesse et sa preuve ;
     descendus sous les écrans, ils se lisent comme ce qu'ils sont : la
     suite, pas l'argument (réglage du propriétaire, 2026-08-21).
     Le badge reste collé aux téléphones, il en fait partie. */
  .tm-hero__lede { order: 3; }
  .tm-hero__phones { order: 4; }
  .tm-hero__marquee-block { order: 5; }
  .tm-hero__buttons { order: 6; }
  .tm-hero__badge { order: 7; }

  /* Le groupe se rapproche du texte de 30 px et s'écarte de 20 px de ce qui
     suit : l'accroche et les appareils disent la même chose, la bande des
     plateformes en dit une autre (réglage du propriétaire, 2026-08-21). */
  .tm-hero__phones {
    height: 620px;
    margin-top: 24px;
    margin-bottom: 20px;
    transform: translateX(40px);
  }
  .tm-hero__phone--left { left: calc(50% - 380px); bottom: 78px; padding: 3px; border-radius: 38px; }
  .tm-hero__phone--left .tm-phone__well { padding: 6px; border-radius: 35px; }
  .tm-hero__phone--left img { width: 186px; border-radius: 29px; }
  .tm-hero__phone--mid { left: calc(50% - 200px); bottom: 38px; padding: 3px; border-radius: 45px; }
  .tm-hero__phone--mid .tm-phone__well { padding: 8px; border-radius: 42px; }
  .tm-hero__phone--mid img { width: 222px; border-radius: 34px; }
  .tm-hero__phone--main { left: calc(50% + 17px); border-radius: 53px; }
  .tm-hero__phone--main .tm-phone__well { padding: 9px; border-radius: 50px; }
  .tm-hero__phone--main img { width: 262px; border-radius: 41px; }

  .tm-hero__badge { padding: 50px 0; }
  .tm-hero__badge-circle { width: 74px; height: 74px; }
  .tm-hero__badge-circle svg { width: 38px; height: 38px; }
  .tm-hero__badge-label { font-size: 19px; }
}

/* Les boutons latéraux du châssis, détail du grand écran. */
.tm-phone__key { position: absolute; width: 2.5px; border-radius: 2px; background: #97989d; }
@media (max-width: 759px) { .tm-phone__key { display: none; } }

/* Bande des plateformes. */
.tm-marquee-label { display: block; font-size: 12.4px; color: var(--tm-ink); margin-bottom: 14px; }
.tm-marquee {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.tm-marquee__track {
  display: flex;
  gap: 30px;
  width: max-content;
  animation: tm-marquee 56s linear infinite;
}
.tm-marquee__item {
  display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
  color: var(--tm-grey); font-size: 13px;
}
.tm-marquee__item img { width: 23px; height: 23px; object-fit: contain; }
@keyframes tm-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ===== 2. Comment ça marche ===== */
.tm-steps { display: flex; flex-direction: column; gap: 24px; align-items: center; }
.tm-steps__stage { display: flex; flex-direction: column; gap: 24px; align-items: center; }
.tm-steps__phone { border-radius: 42px; box-shadow: 0 36px 80px #1d1d1f2b; padding: 3px; }
.tm-steps__phone .tm-phone__well { padding: 7px; border-radius: 37px; }
.tm-steps__phone img { width: 216px; border-radius: 31px; }
/* Centré au téléphone : la colonne fait toute la largeur, et un texte
   court aligné à gauche sous un appareil centré se lit de travers. */
.tm-steps__text { text-align: center; width: 100%; }
.tm-steps__text h3 { margin: 0 0 8px; font-size: 20px; font-weight: 400; letter-spacing: -0.01em; }
.tm-steps__text p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--tm-grey); }

.tm-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  width: 100%;
}
.tm-tab {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 6px; border-radius: 16px; border: none; cursor: pointer;
  background: var(--tm-surface-grey-2); color: var(--tm-grey);
  font: inherit; text-align: center;
  transition: background 0.25s ease, color 0.25s ease;
}
.tm-tab svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tm-tab span { font-size: 11.5px; line-height: 1.3; }
.tm-tab[aria-selected="true"] { background: var(--tm-ink); color: #ffffff; }

@media (min-width: 760px) {
  .tm-steps { align-items: stretch; gap: 44px; }
  .tm-steps__body { display: grid; grid-template-columns: minmax(0, 210px) minmax(0, 1fr); gap: 40px; }
  .tm-steps__stage { flex-direction: row; align-items: center; gap: 56px; }
  .tm-steps__phone { border-radius: 57px; }
  .tm-steps__phone .tm-phone__well { padding: 10px; border-radius: 54px; }
  .tm-steps__phone img { width: 286px; border-radius: 44px; }
  .tm-steps__text { max-width: 15em; text-align: left; }
  .tm-steps__text h3 { font-size: 28px; margin-bottom: 12px; }
  .tm-steps__text p { font-size: 15.3px; }
  .tm-tabs { grid-template-columns: repeat(4, 168px); gap: 4px; justify-content: center; width: auto; margin: 0 auto; }
  .tm-tab { padding: 18px 14px; border-radius: 18px; gap: 10px; }
  .tm-tab svg { width: 28px; height: 28px; }
  .tm-tab span { font-size: 13.2px; }
}

/* La bascule d'un pas : le groupe entier sort, se repose, revient. */
.tm-steps__stage[data-phase="out"] { opacity: 0; transform: scale(0.99); transition: opacity 0.4s ease, transform 0.4s ease; }
.tm-steps__stage[data-phase="set"] { opacity: 0; transform: scale(1.05) translateY(-26px); transition: none; }
.tm-steps__stage[data-phase="in"] { opacity: 1; transform: none; transition: opacity 0.5s ease, transform 0.9s var(--tm-ease-pose); }

/* ===== 3. Recherche sémantique ===== */
.tm-sem { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.tm-sem__phone { border-radius: 42px; box-shadow: 0 36px 80px #1d1d1f2b; padding: 3px; }
.tm-sem__phone .tm-phone__well { padding: 8px; border-radius: 39px; }
.tm-sem__phone img { width: 210px; border-radius: 32px; }

.tm-sem__figure { display: flex; flex-direction: column; gap: 2px; }
.tm-sem__figure span { font-size: 15px; color: var(--tm-grey); }
.tm-sem__figure strong { font-size: 25px; font-weight: 400; letter-spacing: -0.01em; color: var(--tm-ink); }

/* Carrousel du téléphone : trois blocs, glissés au doigt. */
.tm-sem__carousel {
  display: flex;
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  touch-action: pan-x;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tm-sem__carousel::-webkit-scrollbar { display: none; width: 0; height: 0; }
.tm-sem__slide { flex: 0 0 100%; scroll-snap-align: center; text-align: center; padding: 0 6px; }

.tm-dots { display: flex; justify-content: center; gap: 8px; }
.tm-dots button {
  width: 6px; height: 6px; padding: 0; border: none; border-radius: 999px;
  background: var(--tm-dot); cursor: pointer; transition: background 0.3s ease;
}
.tm-dots button[aria-current="true"] { background: var(--tm-ink); }

@media (min-width: 760px) {
  .tm-sem { display: grid; grid-template-columns: 1fr auto 1fr; gap: 60px; align-items: center; }
  .tm-sem__col { display: flex; flex-direction: column; gap: 44px; }
  .tm-sem__col--left { text-align: right; }
  .tm-sem__figure span { font-size: 16.2px; }
  .tm-sem__figure strong { font-size: 31px; }
  .tm-sem__phone { border-radius: 51px; box-shadow: 0 40px 90px #1d1d1f2e; }
  .tm-sem__phone .tm-phone__well { padding: 9px; border-radius: 48px; }
  .tm-sem__phone img { width: 250px; border-radius: 39px; }
  .tm-sem__carousel, .tm-sem__dots { display: none; }
}
@media (max-width: 759px) {
  .tm-sem__col { display: none; }
}

/* ===== 4. Les écrans (rail) ===== */
.tm-rail-section {
  padding: 80px 0;
  /* **Où commence la colonne de texte, à n'importe quelle largeur.**
     Le titre est centré dans une colonne bornée ; le rail, lui, traverse
     tout l'écran. Écrire 310 px en dur n'alignait les deux que sur un
     écran de 1180 px — au-delà, le titre s'écartait du rail (mesuré à
     560 px contre 310 le 2026-08-21). La valeur se calcule donc. */
  --tm-col-start: calc((100% - min(100%, var(--tm-col))) / 2 + var(--tm-pad-x));
  /* La largeur de la colonne de gauche du bloc-titre, plus sa gouttière. */
  --tm-col-offset: 0px;
  --tm-card-w: 232px;
}
.tm-rail-section .tm-head { padding: 0 var(--tm-pad-x); max-width: var(--tm-col); margin: 0 auto; }
.tm-rail {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 30px var(--tm-pad-x) 22px;
  padding-left: calc(var(--tm-col-start) + var(--tm-col-offset));
  /* **La dernière carte doit atteindre la colonne du titre.** Sans marge
     de fin, le défilement bute dès qu'il n'y a plus rien à droite et la
     dernière carte reste décalée — elle ne s'aligne jamais là où toutes
     les autres s'arrêtent. La marge vaut donc ce qu'il reste de largeur
     une fois la carte posée à sa place. */
  padding-right: max(var(--tm-pad-x), calc(100% - var(--tm-col-start) - var(--tm-col-offset) - var(--tm-card-w)));
  scroll-padding-left: calc(var(--tm-col-start) + var(--tm-col-offset));
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tm-rail::-webkit-scrollbar { display: none; width: 0; height: 0; }
.tm-rail-card {
  flex: 0 0 232px;
  scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 18px; align-items: center;
  background: var(--tm-surface); border-radius: 26px; padding: 22px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.tm-rail-card .tm-phone { border-radius: 27px; box-shadow: 0 14px 30px #1d1d1f1a; }
.tm-rail-card .tm-phone__well { padding: 5px; border-radius: 25px; }
.tm-rail-card img { width: 124px; border-radius: 21px; }
.tm-rail-card p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--tm-grey); }
.tm-rail-card p strong { color: var(--tm-ink); font-weight: 400; }

.tm-rail-nav { display: flex; gap: 12px; padding: 0 var(--tm-pad-x); padding-left: calc(var(--tm-col-start) + var(--tm-col-offset)); }
.tm-rail-nav button {
  width: 42px; height: 42px; border-radius: 999px; border: none; cursor: pointer;
  background: #e8e8ed; color: var(--tm-grey); font-size: 28px; line-height: 1;
  display: grid; place-items: center;
  transition: background 0.25s ease, color 0.25s ease;
}
.tm-rail-nav button:hover { background: #dcdce1; color: var(--tm-ink); }

@media (min-width: 760px) {
  .tm-rail-section { padding: 150px 0; }
  /* Au grand écran, le rail s'aligne sur le titre — pas sur l'intertitre :
     250 px de plus, soit la colonne de gauche (210) et sa gouttière (40). */
  .tm-rail-section { --tm-col-offset: 250px; --tm-card-w: 300px; }
  .tm-rail {
    gap: 22px;
    padding-top: 40px;
    padding-bottom: 22px;
  }
  .tm-rail-card { flex: 0 0 300px; padding: 28px; }
  .tm-rail-card:hover { transform: translateY(-6px); box-shadow: 0 22px 50px #1d1d1f1f; }
  .tm-rail-card img { width: 132px; }
  .tm-rail-card p { font-size: 14.5px; }

}

/* ===== 5. Habillages ===== */
.tm-skins {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* **95 px ne centre que sur un écran de 390.** La valeur du handoff est
     juste pour ce seul appareil ; ailleurs, la première et la dernière
     carte ne pouvaient pas rejoindre le milieu et restaient collées à leur
     bord. Ce qu'il faut, c'est la moitié de ce qui dépasse. */
  /* Le rail déborde de sa colonne par des marges négatives : sa largeur
     réelle vaut celle du parent **plus** les deux gouttières. Calculer la
     moitié sur le seul `100%` du parent laissait les cartes de bord à
     22 px du centre — la gouttière exactement (mesuré le 2026-08-21). */
  gap: 40px;
  padding: 0 max(12px, calc((100% + var(--tm-pad-x) * 2 - 200px) / 2)) 12px;
  margin: 0 calc(var(--tm-pad-x) * -1);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tm-skins::-webkit-scrollbar { display: none; width: 0; height: 0; }
.tm-skin { flex: 0 0 200px; scroll-snap-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.tm-skin .tm-phone { border-radius: 38px; box-shadow: 0 26px 60px #1d1d1f26; }
.tm-skin .tm-phone__well { padding: 6px; border-radius: 35px; }
.tm-skin img { width: 182px; border-radius: 29px; }
.tm-skin__caption { text-align: center; opacity: 0; transition: opacity 0.45s ease; }
.tm-skin__caption[data-active="true"] { opacity: 1; }
.tm-skin__caption h3 { margin: 0 0 6px; font-size: 19px; font-weight: 400; letter-spacing: -0.01em; }
.tm-skin__caption p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--tm-grey); max-width: 15em; }

@media (min-width: 760px) {
  .tm-skins {
    overflow: visible; gap: 40px; padding: 0; margin: 0;
    justify-content: center; align-items: flex-end;
  }
  .tm-skin { flex: 0 0 auto; gap: 22px; }
  .tm-skin .tm-phone { border-radius: 42px; }
  .tm-skin .tm-phone__well { padding: 7px; border-radius: 39px; }
  .tm-skin img { width: 208px; border-radius: 32px; }
  .tm-skin--left .tm-phone { transform: perspective(1400px) rotateY(14deg); }
  .tm-skin--right .tm-phone { transform: perspective(1400px) rotateY(-14deg); }
  .tm-skin--main { position: relative; z-index: 3; }
  .tm-skin--main .tm-phone { border-radius: 48px; box-shadow: 0 40px 84px #1d1d1f2e; }
  .tm-skin--main .tm-phone__well { padding: 8px; border-radius: 45px; }
  .tm-skin--main img { width: 236px; border-radius: 37px; }
  .tm-skin__caption { opacity: 1; height: 104px; }
  .tm-skin__caption h3 { font-size: 22.1px; }
  .tm-skins-dots { display: none; }
}

.tm-appearance {
  display: flex; flex-direction: column; gap: 22px; align-items: center; text-align: center;
  background: var(--tm-surface-grey); border-radius: 32px; padding: 32px 24px;
}
.tm-appearance .tm-phone { border-radius: 36px; box-shadow: 0 18px 42px #1d1d1f1f; padding: 3px; }
.tm-appearance .tm-phone__well { padding: 6px; border-radius: 33px; }
.tm-appearance img { width: 160px; border-radius: 27px; }
.tm-appearance h3 { margin: 0 0 10px; font-size: 20px; font-weight: 400; letter-spacing: -0.01em; }
.tm-appearance p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--tm-grey); max-width: 36em; }

@media (min-width: 760px) {
  .tm-appearance { flex-direction: row; text-align: left; gap: 48px; padding: 44px 48px; }
  .tm-appearance img { width: 188px; }
  .tm-appearance h3 { font-size: 28px; }
  .tm-appearance p { font-size: 15.3px; }
}

/* ===== 6. ToomCard ===== */
/* Au téléphone, les trois cartes se balaient au lieu de s'empiler : trois
   blocs à la suite font défiler la page sur trois écrans pour dire une
   seule chose. Les cartes, elles, ne changent pas. */
.tm-cards {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 14px;
  padding: 0 100px 4px var(--tm-pad-x);
  scroll-padding-left: var(--tm-pad-x);
  margin: 0 calc(var(--tm-pad-x) * -1);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tm-cards::-webkit-scrollbar { display: none; width: 0; height: 0; }
/* **Alignées à gauche, sur la colonne du titre**, et non centrées : une
   carte centrée laisse une amorce des deux côtés, si bien qu'aucune ne
   commence là où commence le texte. La marge de fin laisse la dernière
   atteindre cette même colonne. */
/* La largeur se mesure sur l'écran, pas sur le conteneur : en pourcentage,
   elle dépendrait de la marge de fin, qui dépend elle-même de la largeur —
   le calcul se mord la queue et la dernière carte n'atteint jamais sa
   colonne. */
.tm-cards > .tm-card { flex: 0 0 calc(100vw - 98px); scroll-snap-align: start; }
.tm-card {
  display: flex; align-items: center; gap: 20px;
  background: var(--tm-surface); border-radius: 24px; padding: 22px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.tm-card .tm-phone { border-radius: 30px; box-shadow: 0 14px 30px #1d1d1f1a; flex-shrink: 0; }
.tm-card .tm-phone__well { padding: 6px; border-radius: 28px; }
.tm-card img { width: 116px; border-radius: 22px; }
.tm-card h3 { margin: 0 0 8px; font-size: 18px; font-weight: 400; letter-spacing: -0.01em; }
.tm-card p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--tm-grey); }

@media (min-width: 760px) {
  .tm-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    overflow: visible;
    padding: 0;
    margin: 0;
  }
  .tm-cards > .tm-card { flex: initial; }
  .tm-cards-dots { display: none; }
  .tm-card { flex-direction: column; text-align: center; gap: 24px; border-radius: 28px; padding: 36px 30px; }
  .tm-card:hover { transform: translateY(-6px); box-shadow: 0 22px 50px #1d1d1f1f; }
  .tm-card img { width: 158px; }
  .tm-card h3 { font-size: 20.4px; }
  .tm-card p { font-size: 14.5px; }
}

/* ===== 7. Mac ===== */
.tm-mac-shot { width: 100%; border-radius: 10px; overflow: hidden; }
.tm-mac-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.tm-mac-card { background: var(--tm-surface-grey); border-radius: 22px; padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.tm-mac-card img { width: 100%; border-radius: 13px; }
.tm-mac-card h3 { margin: 0 0 6px; font-size: 17px; font-weight: 400; letter-spacing: -0.01em; }
.tm-mac-card p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--tm-grey); }

/* Au téléphone, seule la première carte reste : les deux autres disent une
   nuance de réglage qu'on ne juge pas sur 350 px. */
@media (max-width: 759px) { .tm-mac-card--desktop-only { display: none; } }

@media (min-width: 760px) {
  .tm-mac-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .tm-mac-card { border-radius: 26px; padding: 28px; }
  .tm-mac-card h3 { font-size: 18.7px; }
  .tm-mac-card p { font-size: 14.5px; }
}

/* ===== 8. Pourquoi TooMee ===== */
.tm-why { padding: 0 14px 90px; }
.tm-why__panel {
  background: var(--tm-surface-grey); border-radius: 32px; padding: 44px 20px;
  display: flex; flex-direction: column; gap: 34px;
  max-width: var(--tm-col); margin: 0 auto;
}
.tm-why__head { display: flex; flex-direction: column; gap: 25px; }
.tm-why__head .tm-lede { max-width: 32em; }
.tm-why-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.tm-why-card {
  background: var(--tm-surface); border-radius: 22px; padding: 28px 22px;
  display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.tm-why-card p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--tm-grey); max-width: 16em; }
.tm-why-card p strong { color: var(--tm-ink); font-weight: 400; }
.tm-why-card__art { width: 100%; height: 132px; display: grid; place-items: center; position: relative; }
.tm-why-card__art img { max-height: 100%; width: auto; height: auto; object-fit: contain; }
/* **Réduits par la hauteur, pas par la largeur.** Le cadre est bas
   (132 px au téléphone, 164 au-delà) : une image carrée y est bornée par
   sa hauteur, et une `max-width` plus petite ne changeait rien au
   téléphone — c'est pourquoi la réduction ne se voyait qu'au grand écran. */
.tm-why-card__art--small img { max-height: 75%; }
@media (max-width: 759px) { .tm-why-card__art--ads img { max-height: 80%; } }
/* **Posée, pas dimensionnée en pourcentage.** Une hauteur en % sur un
   élément de grille ne se résout pas de façon fiable ici : l'image gardait
   son rapport et débordait de la carte. Le cadre est déjà `relative`. */
.tm-why-card__art--fill img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  border-radius: 17px;
}
.tm-why-card__strike {
  position: absolute; top: 50%; left: 8%; width: 84%; height: 5px;
  background: #ffffff; border-radius: 3px;
  transform: translateY(-50%) rotate(-16deg);
  box-shadow: 0 0 12px #00000026;
}
.tm-why__note { margin: 0; font-size: 11.9px; line-height: 1.5; color: var(--tm-grey-light); }

@media (min-width: 760px) {
  .tm-why { padding: 0 40px 170px; }
  .tm-why__panel { padding: 70px 60px; }
  .tm-why-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .tm-why-card { border-radius: 26px; padding: 40px 32px 34px; gap: 24px; }
  .tm-why-card p { font-size: 16.2px; }
  .tm-why-card:hover { transform: translateY(-6px); box-shadow: 0 22px 50px #1d1d1f14; }
  .tm-why-card__art { height: 164px; }
}

/* ===== 8 bis. Questions =====
   Reprise de l'ancienne page : dix questions-réponses, seul bloc de la
   page qui répond avec des phrases entières. C'est ce que les moteurs de
   réponse citent, et ce qui portait le schéma `FAQPage` — un schéma sans
   contenu visible serait une déclaration fausse. */
.tm-faq-list { display: flex; flex-direction: column; }
@media (min-width: 760px) {
  /* Alignée sur le titre : la colonne de gauche (210) et sa gouttière (40)
     appartiennent à l'intertitre, pas aux questions. La même marge est
     reprise à droite — un bloc décalé d'un seul côté se lit de travers,
     et les filets couraient jusqu'au bord de la colonne. */
  .tm-faq-list { margin-left: 250px; margin-right: 250px; }
}
.tm-faq {
  border-top: 1px solid var(--tm-divider);
}
.tm-faq:last-child { border-bottom: 1px solid var(--tm-divider); }
.tm-faq summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  font-size: 17px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--tm-ink);
}
.tm-faq summary:hover { color: var(--tm-link); }
.tm-faq summary::after {
  content: "+";
  flex-shrink: 0;
  font-size: 21px;
  line-height: 1;
  color: var(--tm-grey-light);
  transition: transform 0.25s ease;
}
.tm-faq[open] summary::after { transform: rotate(45deg); }
.tm-faq__answer {
  margin: 0;
  padding: 0 0 22px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--tm-grey);
  max-width: 46em;
}
.tm-faq__answer a { color: var(--tm-link); }

@media (min-width: 760px) {
  .tm-faq summary { padding: 24px 0; font-size: 19px; }
  .tm-faq__answer { padding-bottom: 26px; font-size: 15.3px; }
}

/* ===== 9. Appel final ===== */
.tm-cta {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px;
  padding: 10px var(--tm-pad-x) 100px;
  max-width: var(--tm-col); margin: 0 auto;
}
.tm-cta h2 { margin: 0; font-size: 36px; line-height: 1.08; letter-spacing: -0.01em; font-weight: 400; }
.tm-cta__lede { max-width: 32em; }

.tm-waitlist { width: 100%; max-width: 420px; }
.tm-waitlist__row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--tm-surface-grey); border-radius: 980px; padding: 6px 6px 6px 22px;
  width: 100%;
}
.tm-waitlist__row input {
  flex: 1 1 auto; min-width: 0; border: none; background: transparent;
  font: inherit; font-size: 16px; color: var(--tm-ink); outline: none; padding: 8px 0;
}
.tm-waitlist__row input::placeholder { color: var(--tm-grey-light); }
.tm-waitlist__row input:focus-visible { outline: 2px solid var(--tm-blue); outline-offset: 4px; border-radius: 4px; }
.tm-waitlist__row .tm-btn { padding: 14px 24px; font-size: 13.6px; }
/* **Le remerciement remplace le champ, il en prend la place.** Écrit à la
   taille de l'accroche : c'est le seul retour que reçoit quelqu'un qui
   vient de confier son adresse, et il se lisait plus petit que la note
   légale posée juste en dessous. */
.tm-waitlist__done {
  margin: 0;
  font-size: 20px;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--tm-ink);
  max-width: 26em;
}
.tm-waitlist__note { margin: 0; font-size: 11.9px; line-height: 1.5; color: var(--tm-grey-light); max-width: 34em; }

@media (min-width: 760px) {
  .tm-cta { padding: 40px var(--tm-pad-x) 180px; }
  .tm-cta h2 { font-size: 50px; line-height: 1.07; }
  .tm-waitlist { width: auto; }
  .tm-waitlist__done { font-size: 22px; }
  .tm-waitlist__row { width: auto; }
  .tm-waitlist__row input { min-width: 15em; font-size: 14.5px; }
}

/* ===== Retour en haut =====
   **Au téléphone seulement.** La page est longue et la barre collante ne
   porte que la marque : sans ce bouton, remonter demande de balayer neuf
   sections. Il n'apparaît qu'une fois la première page passée — posé dès
   le départ, il masquerait le hero pour rien. */
.tm-top {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 40;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 999px;
  background: #ffffffe6;
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  box-shadow: 0 4px 16px #1d1d1f26, inset 0 0 0 1px var(--tm-divider);
  color: var(--tm-ink);
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s var(--tm-ease);
}
.tm-top[data-shown="true"] { opacity: 1; transform: none; pointer-events: auto; }
.tm-top svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 760px) { .tm-top { display: none; } }
@media (prefers-reduced-motion: reduce) { .tm-top { transition: none; } }

/* La phrase qui suit le titre de l'appel final. */
.tm-cta__note { padding-top: 50px; }

/* ===== Pied de page ===== */
.tm-footer { background: var(--tm-surface-grey); padding: 26px var(--tm-pad-x) 34px; }
.tm-footer__inner {
  max-width: var(--tm-col); margin: 0 auto;
  display: flex; flex-direction: column; gap: 14px;
  font-size: 10.2px; line-height: 1.6; color: var(--tm-grey-light);
}
.tm-footer p { margin: 0; }
.tm-footer__row {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border-top: 1px solid var(--tm-divider); padding-top: 14px;
}
.tm-footer__links { display: flex; gap: 16px; flex-wrap: wrap; }
.tm-footer a:hover { color: var(--tm-link); }

@media (min-width: 760px) { .tm-footer { padding: 34px var(--tm-pad-x) 40px; } }

/* ===== Révélation au défilement ===== */
[data-reveal] { opacity: 0; transform: translateY(26px); will-change: opacity, transform; }
[data-reveal="scale"] { transform: scale(0.968) translateY(14px); }
[data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity 0.85s var(--tm-ease), transform 1s var(--tm-ease);
}

/* **Le mouvement est un supplément, jamais la condition de la lecture.**
   Le prototype ne traitait pas ce réglage ; sans ce bloc, quelqu'un qui
   demande moins d'animations se retrouve devant une page vide. */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal].is-in { opacity: 1 !important; transform: none !important; transition: none !important; }
  .tm-marquee__track { animation: none; }
  .tm-hero__phones { transform: none !important; transition: none !important; }
  .tm-hero__phone { opacity: 1 !important; transform: none !important; transition: none !important; }
  .tm-skin .tm-phone { transition: none !important; }
  .tm-steps__stage { opacity: 1 !important; transform: none !important; transition: none !important; }
  html,
  .tm-page * { scroll-behavior: auto !important; }
}

/* =====================================================================
   Téléphone : une barre plus haute, et tout le texte d'un point au-dessus
   ---------------------------------------------------------------------
   Les tailles du gabarit sont calées sur une colonne de 1180 px ; reprises
   telles quelles sur 390, elles se lisent petit — la barre de 46 px la
   première, dont la marque faisait 21 px. Chaque rôle gagne donc un point,
   et la barre les proportions qui vont avec (réglages du propriétaire,
   2026-08-21).
   ===================================================================== */
@media (max-width: 759px) {
  .tm-nav__inner { height: 58px; }
  .tm-nav__home .tm-mark { width: 27px; height: 27px; border-radius: 9px; }
  .tm-nav__home .tm-mark svg { width: 15px; height: 15px; }
  .tm-lang { font-size: 12px; gap: 6px; }
  .tm-lang a { padding: 2px 1px; }
  .tm-nav__btn { padding: 9px 17px; font-size: 12.5px; }
  /* L'ancre s'arrête toujours sous la barre : sa hauteur a changé. */
  .tm-page [id] { scroll-margin-top: 78px; }

  .tm-eyebrow { font-size: 12.5px; }
  .tm-h2 { font-size: 30px; }
  .tm-lede { font-size: 16.5px; }

  .tm-hero h1 { font-size: 35px; }
  .tm-hero__word { font-size: 26px; }
  .tm-hero__badge-label { font-size: 17.5px; }
  .tm-marquee-label { font-size: 13.4px; }
  .tm-marquee__item { font-size: 14px; }
  .tm-hero__buttons .tm-btn { font-size: 15.5px; }
  .tm-link { font-size: 16px; }

  .tm-steps__text h3 { font-size: 21px; }
  .tm-steps__text p { font-size: 16px; }
  .tm-tab span { font-size: 12.5px; }

  .tm-sem__figure span { font-size: 16px; }
  .tm-sem__figure strong { font-size: 26px; }

  .tm-rail-card p { font-size: 14.5px; }

  .tm-skin__caption h3 { font-size: 20px; }
  .tm-skin__caption p { font-size: 15.5px; }
  .tm-appearance h3 { font-size: 21px; }
  .tm-appearance p { font-size: 16px; }

  .tm-card h3 { font-size: 19px; }
  .tm-card p { font-size: 14.5px; }

  .tm-mac-card h3 { font-size: 18px; }
  .tm-mac-card p { font-size: 14.5px; }

  .tm-why-card p { font-size: 16px; }
  .tm-why__note { font-size: 12.9px; }

  .tm-faq summary { font-size: 18px; }
  .tm-faq__answer { font-size: 16px; }

  .tm-cta h2 { font-size: 37px; }
  /* 17 px : au-dessus des 16 px sous lesquels iOS zoome au focus. */
  .tm-waitlist__row input { font-size: 17px; }
  .tm-waitlist__row .tm-btn { font-size: 14.6px; }
  .tm-waitlist__done { font-size: 18.5px; }
  .tm-waitlist__note { font-size: 12.9px; }

  .tm-footer__inner { font-size: 11.2px; }
}