/* Site vitrine de Klintt — le haut de page.
 *
 * Les cotes viennent de la planche Figma « Site · Haut de page — ordi » (page
 * « website », section 5428:2170), dessinée à 1440 de large. Elles sont écrites
 * telles quelles pour l'ordinateur ; ce qui s'adapte à la largeur est regroupé en
 * bas du fichier.
 *
 * La grille a été relevée sur les références d'Evan (XinoTask, TaskGo) : carte
 * de héros encartée de 12, titre sur deux lignes, sous-titre d'une ligne, deux
 * boutons, puis l'app dans un cadre de verre coupé par le bas de la carte, et
 * des étiquettes qui flottent devant. Leurs nuages sont remplacés par d'autres
 * espaces de Klintt, plus loin derrière l'écran : la profondeur, et le CRM
 * entier plutôt qu'un seul écran.
 */

:root {
  --encre: #18181B;
  --fort: #52525B;
  --nav: #3F3F46;
  --blanc: #FFFFFF;
  --bleu: #2D6FF4;
  --ombre-bleue: 29, 59, 122;
  --courbe: cubic-bezier(0.22, 1, 0.36, 1);
  /* La largeur de la colonne : 1160 à 1440, puis une marge de 48 de chaque côté de la carte */
  --large: min(1160px, calc(100vw - 24px - 96px));
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--blanc);
  color: var(--encre);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; }

/* ── La carte du héros ─────────────────────────────────────────────────── */

.heros { padding: 12px; }

.heros__carte {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 30px;
  border-radius: 28px;
  overflow: hidden;
  isolation: isolate;
  /* au-dessus de la suite de la page : la feuille du menu, fixée à l'écran, passe devant */
  z-index: 1;
  /* le ciel des références (XinoTask, TaskGo), sans ses nuages */
  background: linear-gradient(180deg, #CCDFFF 0%, #E3EDFF 38%, #F2F6FF 70%, #FAFBFF 100%);
}

/* ── La barre du haut ──────────────────────────────────────────────────── */

.nav {
  position: relative;
  /* au-dessus du texte du héros (3) : le panneau du menu passe devant lui */
  z-index: 5;
  width: var(--nav-large);
  height: 40px;
  flex: none;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.nav__marque { justify-self: start; }
.nav__marque svg { height: 27px; width: auto; }

.nav__liens {
  display: flex;
  gap: 34px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__liens a,
.nav__connexion {
  font-weight: 500;
  font-size: 15px;
  line-height: 18px;
  letter-spacing: -0.005em;
  color: var(--nav);
  transition: color 0.2s;
}
.nav__liens a:hover { color: var(--encre); }
.nav__connexion { color: var(--encre); }

.nav__actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 22px;
}

/* ── La barre du haut (js/nav-fixe.js) ─────────────────────────────────────── */
/* 01/10, Evan : sur l'accueil, les blocs vont d'un bord à l'autre de l'écran (plus de cadre sombre
 * sur les côtés, seulement les coins arrondis entre les blocs, comme la feuille blanche de
 * Substy) ; la barre redevient donc celle de substy.ai : une bande pleine largeur, transparente en
 * haut ; dès 24 px, un fond à 94 %, un flou de 16 px et un filet d'un pixel en bas, en 0,22 s ; et
 * elle prend la couleur de la section qu'elle survole (sombre sur data-nav-sombre, logo compris).
 * La bande est un pseudo-élément (::before) : un élément qui porte un backdrop-filter couperait le
 * flou du menu qui s'ouvre dessous. Contenu jusqu'à 1 680 px.
 * La variante « verre liquide » (la plaque qui se resserre, maquette d'Evan 5531:2430) reste
 * disponible avec ?barre=verre dans l'adresse (classe barre-verre sur <html>). */

:root {
  --nav-large: max(var(--large), min(1680px, calc(100vw - 24px - 96px)));
  /* le resserrement de la variante en verre : part vite, se pose en douceur */
  --serre: cubic-bezier(0.32, 0.72, 0, 1);
}

.nav-fixe {
  --nav-fond: rgba(255, 255, 255, 0.94);
  --nav-filet: #E6E8ED;
  --nav-texte: var(--nav);
  --nav-titre: var(--encre);
  position: sticky;
  z-index: 50;
  top: 0;
  isolation: isolate;
  padding: 16px 0;
  /* au repos, le contenu à la place de la barre du héros (42 px du haut) ; la marge du bas
     rend sa hauteur au flux (26 + 72 − 98 = 0) : le héros ne bouge pas */
  margin: 26px 0 -98px;
  visibility: hidden;
}
.avec-js .nav-fixe { visibility: visible; }
.avec-js .heros .nav { visibility: hidden; }
/* la bande */
.nav-fixe::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-bottom: 1px solid transparent;
  background-color: transparent;
  pointer-events: none;
  transition: background-color 0.22s, border-color 0.22s;
}
.nav-fixe--pleine::before {
  background-color: var(--nav-fond);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom-color: var(--nav-filet);
}
/* sur une section sombre (data-nav-sombre) : la bande, le logo et les liens s'inversent */
.nav-fixe[data-theme="sombre"] {
  --nav-fond: rgba(18, 18, 21, 0.94);
  --nav-filet: rgba(255, 255, 255, 0.11);
  --nav-texte: #C9C9D0;
  --nav-titre: #F4F4F5;
}

.nav-fixe__interieur {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: var(--nav-large);
  height: 40px;
  margin: 0 auto;
}
.nav-fixe__marque { justify-self: start; }
.nav-fixe__marque svg { width: auto; height: 27px; }
.nav-fixe__marque path { transition: fill 0.22s; }
.nav-fixe[data-theme="sombre"] .nav-fixe__marque path[fill="#0A0A0A"] { fill: var(--nav-titre); }
.nav-fixe__liens { display: flex; gap: 34px; }
.nav-fixe__liens a, .nav-fixe__liens .menu__declencheur { font-weight: 500; font-size: 15px; line-height: 18px; letter-spacing: -0.005em; color: var(--nav-texte); transition: color 0.22s; }
.nav-fixe__liens a:hover, .nav-fixe__liens .menu__declencheur:hover, .nav-fixe__liens .menu__declencheur[aria-expanded="true"] { color: var(--nav-titre); }
.nav-fixe .nav__connexion { color: var(--nav-titre); transition: color 0.22s; }
.nav-fixe .bouton--encre { transition: background-color 0.22s, color 0.22s; }
.nav-fixe[data-theme="sombre"] .bouton--encre { background: #F4F4F5; color: var(--encre); }
.nav-fixe[data-theme="sombre"] .menu__bouton { background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); color: var(--nav-titre); }
.nav-fixe a:focus-visible { outline: 2px solid #2547FF; outline-offset: 3px; border-radius: 6px; }

/* ── La variante « verre liquide » (?barre=verre, js/verre-liquide.js) ─────────────────
 * En descendant, le contenu se resserre sur la colonne du site et descend de 12 px ; une plaque de
 * verre (::after, colonne + 18 px de chaque côté, 71 px, coins 19) apparaît en se resserrant avec
 * lui, en 0,6 s. Réfraction sur les bords (filtre SVG, Chromium), givre et teinte réglés pour que les
 * liens restent lisibles quand le grand titre noir passe dessous (flou 16, blanc 55 %, halo). */
.barre-verre .nav-fixe {
  --verre-teinte: rgba(244, 245, 248, 0.55);
  --verre-large: calc(var(--large) + 36px);
  --verre-haut: 71px;
  --verre-coins: 19px;
  --givre: blur(16px) saturate(1.6) brightness(1.05);
  --descente: 12px;
}
.barre-verre .nav-fixe[data-theme="sombre"] { --verre-teinte: rgba(28, 28, 32, 0.46); }
.barre-verre .nav-fixe::before { display: none; }
.barre-verre .nav-fixe::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(16px + var(--descente) + 20px - var(--verre-haut) / 2);
  left: 50%;
  width: var(--verre-large);
  height: var(--verre-haut);
  border-radius: var(--verre-coins);
  background-color: var(--verre-teinte);
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 42%);
  -webkit-backdrop-filter: var(--verre-filtre, var(--givre));
  backdrop-filter: var(--verre-filtre, var(--givre));
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.75),
    inset -1px -1px 0 rgba(255, 255, 255, 0.24),
    inset 0 0 18px rgba(255, 255, 255, 0.16),
    0 12px 32px -14px rgba(16, 24, 40, 0.3),
    0 2px 6px rgba(16, 24, 40, 0.06);
  opacity: 0;
  transform: translateX(-50%) scale(var(--verre-depart, 1.1), 0.9);
  transition: opacity 0.4s ease, transform 0.6s var(--serre), background-color 0.25s, box-shadow 0.25s;
  pointer-events: none;
}
.barre-verre .nav-fixe--pleine::after { opacity: 1; transform: translateX(-50%); }
.barre-verre .nav-fixe[data-theme="sombre"]::after {
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 42%);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.24),
    inset -1px -1px 0 rgba(255, 255, 255, 0.07),
    inset 0 0 18px rgba(255, 255, 255, 0.04),
    0 12px 32px -14px rgba(0, 0, 0, 0.7);
}
.barre-verre .nav-fixe__interieur { transition: width 0.6s var(--serre), transform 0.6s var(--serre); }
.barre-verre .nav-fixe--pleine .nav-fixe__interieur { width: var(--large); transform: translateY(var(--descente)); }
.barre-verre .nav-fixe--pleine .nav-fixe__liens a, .barre-verre .nav-fixe--pleine .nav-fixe__liens .menu__declencheur, .barre-verre .nav-fixe--pleine .nav__connexion { text-shadow: 0 0 10px rgba(255, 255, 255, 0.9), 0 0 2px rgba(255, 255, 255, 0.85); }
.barre-verre .nav-fixe--pleine[data-theme="sombre"] .nav-fixe__liens a, .barre-verre .nav-fixe--pleine[data-theme="sombre"] .nav-fixe__liens .menu__declencheur, .barre-verre .nav-fixe--pleine[data-theme="sombre"] .nav__connexion { text-shadow: 0 0 10px rgba(0, 0, 0, 0.7), 0 0 2px rgba(0, 0, 0, 0.6); }

@media (max-width: 860px) {
  .nav-fixe__liens { display: none; }
  .nav-fixe__interieur { grid-template-columns: 1fr auto; }
}
@media (max-width: 640px) {
  /* au repos : 8 + 18 = 26, une barre de 38 ; bande de 12 + 38 + 12 = 62 */
  .nav-fixe { padding: 12px 0; margin: 14px 0 -76px; }
  .nav-fixe__interieur { height: 38px; }
  .nav-fixe__marque svg { height: 23px; }
  .nav-fixe__actions .nav__connexion { display: none; }
  .barre-verre .nav-fixe { --verre-large: calc(100vw - 16px); --verre-haut: 60px; --verre-coins: 16px; --descente: 8px; }
  .barre-verre .nav-fixe::after { top: calc(12px + var(--descente) + 19px - var(--verre-haut) / 2); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-fixe::before, .nav-fixe::after, .nav-fixe__interieur, .nav-fixe__liens a, .nav-fixe__marque path { transition: none; }
}

/* ── Le menu du haut (js/menu.js) ──────────────────────────────────────── */
/* D'après le menu de vinteer.io (le NavigationMenu de Radix), en clair : au survol,
 * une boîte de verre blanc s'ouvre sous la barre ; d'un onglet à l'autre elle change
 * de taille et glisse sous le déclencheur, et son contenu glisse de 28 px. */

.nav-fixe__liens { margin: 0; padding: 0; list-style: none; }
.nav-fixe__liens li, .nav__liens li { display: flex; }
.nav-fixe__actions { justify-self: end; display: flex; align-items: center; gap: 20px; }

.menu__declencheur {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 500;
  font-size: 15px;
  line-height: 18px;
  letter-spacing: -0.005em;
  color: var(--nav);
  cursor: pointer;
  transition: color 0.2s;
}
.nav-fixe__liens .menu__declencheur { font-size: 15px; }
.menu__declencheur:hover, .menu__declencheur[aria-expanded="true"] { color: var(--encre); }
.menu__declencheur:focus-visible { outline: 2px solid #2547FF; outline-offset: 3px; border-radius: 6px; }
.menu__chevron { width: 15px; height: 15px; opacity: 0.7; transition: transform 0.3s var(--courbe); }
.menu__declencheur[aria-expanded="true"] .menu__chevron { transform: rotate(180deg); }

.menu__vue {
  position: absolute;
  z-index: 20;
  top: calc(100% + 12px);
  left: 0;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.34s var(--courbe), opacity 0.18s;
}
/* une bande invisible entre la barre et la boîte : la souris y passe sans fermer */
.menu__vue::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 16px; }
.menu__vue--ouverte { opacity: 1; pointer-events: auto; }
/* sous la plaque de verre de la barre (descendue de 12 px) : 8 px sous son bord, et la bande
   invisible couvre l'écart */
.barre-verre .nav-fixe--pleine .menu__vue { top: calc(100% + 24px); }
.barre-verre .nav-fixe--pleine .menu__vue::before { height: 28px; }
.menu__vue--net, .menu__vue--net .menu__boite, .menu__vue--net .menu__panneau { transition: none !important; }
.menu__boite {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  /* le verre de la barre (30/09) : plus de blanc plein, un verre clair qui garde le texte lisible */
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(26px) saturate(1.9);
  backdrop-filter: blur(26px) saturate(1.9);
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.95),
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.7),
    0 0 0 1px rgba(24, 24, 27, 0.05),
    0 2px 4px rgba(24, 24, 27, 0.04),
    0 24px 48px -16px rgba(var(--ombre-bleue), 0.28);
  transform-origin: top center;
  transition: width 0.34s var(--courbe), height 0.34s var(--courbe), transform 0.22s var(--courbe);
}
.menu__vue:not(.menu__vue--ouverte) .menu__boite { transform: translateY(-4px) scale(0.97); }

.menu__panneau {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  gap: 8px;
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s, transform 0.28s var(--courbe), visibility 0s 0.28s;
}
.menu__panneau[data-etat="la"] { opacity: 1; visibility: visible; transform: none; transition: opacity 0.24s 0.04s, transform 0.32s var(--courbe), visibility 0s; }
.menu__panneau[data-etat="entre"] { visibility: visible; transform: translateY(-4px); transition: none; }
.menu__panneau[data-etat="entre-droite"] { visibility: visible; transform: translateX(28px); transition: none; }
.menu__panneau[data-etat="entre-gauche"] { visibility: visible; transform: translateX(-28px); transition: none; }
.menu__panneau[data-etat="sort-gauche"] { transform: translateX(-28px); }
.menu__panneau[data-etat="sort-droite"] { transform: translateX(28px); }
.menu__panneau--fonctions { width: 752px; }
.menu__panneau--otto { width: 752px; }
.menu__panneau--outils { width: 752px; }

/* la carte vedette, comme « Voir toutes les fonctionnalités » chez Vinteer : le ciel du haut de page */
.menu__vedette {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 226px;
  padding: 18px;
  border-radius: 14px;
  background: linear-gradient(200deg, #CCDFFF 0%, #E3EDFF 45%, #F2F6FF 100%);
}
.menu__vedette--otto { background: linear-gradient(200deg, #E4DAFE 0%, #EFE9FE 45%, #F7F6FB 100%); }
/* la grille fine des cartes de l'accueil, qui s'efface depuis le coin haut droit */
.menu__vedette { position: relative; overflow: hidden; isolation: isolate; }
.menu__vedette::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(rgba(120, 150, 220, 0.2) 1px, transparent 1px), linear-gradient(90deg, rgba(120, 150, 220, 0.2) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(circle at 100% 0%, #000 0%, rgba(0, 0, 0, 0.5) 30%, transparent 64%);
  mask-image: radial-gradient(circle at 100% 0%, #000 0%, rgba(0, 0, 0, 0.5) 30%, transparent 64%);
}
.menu__vedette--otto::after { background-image: linear-gradient(rgba(140, 110, 220, 0.2) 1px, transparent 1px), linear-gradient(90deg, rgba(140, 110, 220, 0.2) 1px, transparent 1px); }
/* Tout Klintt : trois vrais écrans en éventail (tableau de bord, stock, messagerie) */
.menu__ecrans { position: relative; display: block; height: 104px; margin: 2px 0 auto; }
.menu__ecrans picture { position: absolute; top: 20px; left: 50%; display: block; width: 108px; transform: translateX(-50%) translate(var(--x, 0), var(--y, 0)) rotate(var(--a, 0deg)); transition: transform 0.5s var(--courbe); }
.menu__ecrans img { display: block; width: 100%; height: auto; border-radius: 7px; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 10px 22px -8px rgba(var(--ombre-bleue), 0.45); }
.menu__ecrans picture:nth-child(1) { --x: -40px; --y: 10px; --a: -9deg; }
.menu__ecrans picture:nth-child(2) { --x: 0px; --y: 0px; --a: 0deg; z-index: 2; }
.menu__ecrans picture:nth-child(3) { --x: 40px; --y: 10px; --a: 9deg; }
.menu__vedette:hover .menu__ecrans picture:nth-child(1) { --x: -46px; --y: 7px; --a: -12deg; }
.menu__vedette:hover .menu__ecrans picture:nth-child(2) { --y: -5px; }
.menu__vedette:hover .menu__ecrans picture:nth-child(3) { --x: 46px; --y: 7px; --a: 12deg; }
/* Otto : en grand, dans une lueur ; ses yeux suivent le pointeur (js/otto.js) */
.menu__otto-scene { position: relative; display: grid; place-items: center; height: 104px; margin: 2px 0 auto; }
.menu__otto-lueur { position: absolute; left: 50%; top: 50%; width: 170px; height: 150px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.95), rgba(236, 228, 255, 0.6) 55%, rgba(236, 228, 255, 0) 100%); }
.menu__vedette--otto .menu__otto { --t: 76px; position: relative; margin: 0; transition: transform 0.5s var(--courbe); }
.menu__vedette--otto:hover .menu__otto { transform: translateY(-3px) rotate(-4deg); }
/* les outils : un gris bleuté, ni le ciel de Klintt ni le violet d'Otto */
.menu__vedette--outils { background: linear-gradient(200deg, #DCE5F2 0%, #E9EEF6 45%, #F5F7FA 100%); }
/* les quatre tuiles 3D des outils, en éventail ; il s'ouvre un peu au survol */
.menu__tuiles { display: flex; margin: -4px 0 auto -6px; }
.menu__tuiles img { width: 64px; height: 64px; margin-left: -20px; transform: translateY(var(--y, 0)) rotate(var(--a, 0deg)); transition: transform 0.45s var(--courbe); }
.menu__tuiles img:first-child { margin-left: 0; }
.menu__tuiles img:nth-child(1) { --a: -8deg; }
.menu__tuiles img:nth-child(2) { --a: 3deg; --y: 5px; }
.menu__tuiles img:nth-child(3) { --a: -4deg; --y: 1px; }
.menu__tuiles img:nth-child(4) { --a: 7deg; --y: 6px; }
.menu__vedette:hover .menu__tuiles img { transform: translateY(calc(var(--y, 0px) - 3px)) rotate(calc(var(--a, 0deg) * 1.6)); }
.menu__vedette-tuile {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: auto;
  border-radius: 11px;
  background: #4190F9;
  color: var(--blanc);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 6px 14px -6px rgba(65, 144, 249, 0.6);
}
.menu__vedette-tuile svg { width: 22px; height: auto; }
.menu__otto { --t: 36px; margin-bottom: auto; }
.menu__vedette--outils .menu__tuiles { height: 104px; align-items: center; justify-content: center; margin: 2px 0 auto; }
.menu__vedette-titre { margin-top: 28px; font-weight: 600; font-size: 17px; line-height: 22px; letter-spacing: -0.015em; color: var(--encre); }
.menu__vedette-texte { font-size: 14px; line-height: 20px; color: #52525B; }
.menu__vedette-lien { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-weight: 500; font-size: 14px; color: var(--bleu); }
.menu__vedette-lien svg { width: 16px; height: 16px; transition: transform 0.2s var(--courbe); }
.menu__vedette:hover .menu__vedette-lien svg { transform: translateX(3px); }
.menu__vedette:focus-visible { outline: 2px solid #2547FF; outline-offset: 2px; }

.menu__liste { flex: 1; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; align-content: start; }
.menu__liste--colonne { grid-template-columns: 1fr; }
.menu__lien { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: 12px; transition: background-color 0.2s; }
.menu__lien:hover, .menu__lien:focus-visible { background: #F4F5F8; outline: none; }
.menu__icone {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--blanc);
  box-shadow: inset 0 0 0 1px #ECECEF, 0 1px 2px rgba(24, 24, 27, 0.05);
  color: #52525B;
}
.menu__icone svg { width: 19px; height: 19px; transform-origin: 50% 60%; }
/* au survol, l'icône joue son geste (--geste, posé dans le modèle) et se teinte du bleu de l'app */
.menu__icone { transition: color 0.25s, box-shadow 0.25s, transform 0.35s var(--courbe); }
.menu__lien:hover .menu__icone, .menu__lien:focus-visible .menu__icone { color: var(--bleu); box-shadow: inset 0 0 0 1px #D2E1FC, 0 6px 14px -6px rgba(65, 144, 249, 0.45); transform: translateY(-1px); }
.menu__lien:hover .menu__icone svg, .menu__lien:focus-visible .menu__icone svg { animation: var(--geste, icone-rebond) 0.6s var(--courbe); }
.menu__icone .otto { --t: 19px; }
@keyframes icone-rebond { 0%, 100% { transform: none; } 30% { transform: translateY(-3px) scale(1.1); } 60% { transform: translateY(1px) scale(0.97); } }
@keyframes icone-penche { 0%, 100% { transform: none; } 25% { transform: rotate(-14deg) scale(1.08); } 55% { transform: rotate(9deg); } 80% { transform: rotate(-3deg); } }
@keyframes icone-roule { 0%, 100% { transform: none; } 35% { transform: translateX(4px); } 55% { transform: translateX(-2px); } 75% { transform: translateX(1px); } }
@keyframes icone-pousse { 0%, 100% { transform: none; transform-origin: 50% 100%; } 40% { transform: scaleY(1.22); transform-origin: 50% 100%; } 70% { transform: scaleY(0.94); transform-origin: 50% 100%; } }
@keyframes icone-tourne { to { transform: rotate(360deg); } }
.menu__ecrans + .menu__vedette-titre, .menu__otto-scene + .menu__vedette-titre, .menu__tuiles + .menu__vedette-titre { margin-top: 16px; }
/* un outil : sa tuile 3D, sans le cadre blanc (l'image porte son ombre) */
.menu__icone--tuile { background: none; box-shadow: none; }
.menu__icone--tuile img { width: 46px; height: 46px; max-width: none; margin: -5px; transition: transform 0.35s var(--courbe); }
.menu__lien:hover .menu__icone--tuile img { transform: translateY(-2px) rotate(-3deg); }
.menu__textes { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 1px; }
.menu__titre { font-weight: 500; font-size: 15px; line-height: 20px; color: var(--encre); }
.menu__desc { font-size: 13.5px; line-height: 18px; color: #71717A; }

/* Téléphone : le bouton « Menu » et la feuille, qui montre tout d'un coup */
.menu__bouton {
  display: none;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 0 0 1px var(--blanc);
  color: var(--encre);
  cursor: pointer;
}
.menu__bouton svg { width: 20px; height: 20px; }
.menu__vue--feuille { left: 0; right: 0; transform: none !important; }
/* la feuille tient dans l'écran sous sa barre (--haut-feuille, posé par js/menu.js) et défile seule */
.menu__vue--feuille .menu__boite {
  width: auto !important;
  height: auto !important;
  max-height: calc(100vh - var(--haut-feuille, 110px) - 12px);
  max-height: calc(100dvh - var(--haut-feuille, 110px) - 12px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.menu__vue--feuille .menu__panneau { position: static; width: auto; flex-direction: column; }
.menu__vue--feuille .menu__vedette { width: auto; flex-direction: row; align-items: center; flex-wrap: wrap; column-gap: 12px; }
.menu__vue--feuille .menu__vedette-tuile, .menu__vue--feuille .menu__otto { margin-bottom: 0; }
/* sur la feuille du téléphone, la carte de gauche devient une rangée : son visuel reste à l'ordinateur */
.menu__vue--feuille .menu__ecrans, .menu__vue--feuille .menu__otto-scene, .menu__vue--feuille .menu__tuiles { display: none; }
.menu__vue--feuille .menu__vedette::after { display: none; }
.menu__vue--feuille .menu__vedette-titre { margin-top: 0; }
.menu__vue--feuille .menu__vedette-texte, .menu__vue--feuille .menu__vedette-lien { flex-basis: 100%; }

/* ce que la barre cache sur téléphone, en bas de la feuille : trois tuiles grises */
.menu__autres { display: none; }
.menu__vue--feuille .menu__autres {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 2px 10px 10px;
}
.menu__autres a {
  display: grid;
  place-items: center;
  height: 44px;
  border-radius: 12px;
  background: #F4F5F8;
  font-weight: 500;
  font-size: 15px;
  color: var(--encre);
  transition: background-color 0.2s;
}
.menu__autres a:hover, .menu__autres a:focus-visible { background: #ECEDF1; outline: none; }

@media (max-width: 860px) {
  .menu__bouton { display: grid; }
}
@media (max-width: 640px) {
  .menu__vue--feuille .menu__liste { grid-template-columns: 1fr; }
  .menu__vue { top: calc(100% + 8px); }
}
@media (prefers-reduced-motion: reduce) {
  .menu__vue, .menu__boite, .menu__panneau, .menu__chevron { transition: none !important; }
}

/* ── Les boutons ───────────────────────────────────────────────────────── */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 24px;
  border-radius: 12px;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.008em;
  white-space: nowrap;
  transition: transform 0.25s var(--courbe), box-shadow 0.25s, background-color 0.2s;
}
/* un <button> prend la même allure qu'un lien-bouton (les outils en ont) */
button.bouton { appearance: none; border: 0; font-family: inherit; cursor: pointer; }
.bouton:active { transform: scale(0.98); }
.bouton:focus-visible, .nav a:focus-visible, .pastille:focus-visible { outline: 2px solid #2547FF; outline-offset: 3px; }

.bouton--encre {
  background: var(--encre);
  color: var(--blanc);
  box-shadow: 0 6px 16px -4px rgba(24, 24, 27, 0.18);
}
.bouton--encre:hover { background: #27272A; }

.bouton--verre {
  background: rgba(255, 255, 255, 0.7);
  color: var(--encre);
  box-shadow: inset 0 0 0 1px var(--blanc), 0 2px 8px rgba(var(--ombre-bleue), 0.06);
}
.bouton--verre:hover { background: rgba(255, 255, 255, 0.9); }

.bouton--petit {
  height: 40px;
  padding: 0 18px;
  border-radius: 10px;
  font-size: 15px;
  letter-spacing: -0.005em;
  box-shadow: none;
}
.bouton--verre.bouton--petit { box-shadow: inset 0 0 0 1px #E4E4E7; }

/* ── Les marques dans le texte ─────────────────────────────────────────── */

/* La tuile Klintt dans le titre, comme le X de XinoTask : la pastille bleue de
 * la colonne de l'app (30 de côté, rayon 9, #4190F9), le symbole blanc à 62,5 %
 * de sa largeur — la respiration qu'Evan a fixée, à ne pas retoucher sans lui. */
.tuile-klintt {
  --t: 58px;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--t);
  height: var(--t);
  border-radius: calc(var(--t) * 9 / 30);
  background: #4190F9;
  color: var(--blanc);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 8px 18px -8px rgba(65, 144, 249, 0.6);
}
.tuile-klintt svg { width: calc(var(--t) * 0.625); height: auto; }

/* Otto, vivant (js/otto.js) : la couleur est celle du texte, les yeux sont des trous */
.otto { display: inline-block; flex: none; width: var(--t, 20px); height: var(--t, 20px); color: var(--encre); }
.otto__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.otto--titre { --t: 58px; cursor: pointer; }
.otto--mini { --t: 16px; }

/* Le titre porte Otto ; ?titre=klintt remet la tuile Klintt pour comparer */
.titre .tuile-klintt { display: none; }
.heros[data-titre="klintt"] .titre .otto { display: none; }
.heros[data-titre="klintt"] .titre .tuile-klintt { display: inline-grid; }

/* ── Le texte ──────────────────────────────────────────────────────────── */

.heros__texte {
  position: relative;
  z-index: 3;
  margin-top: 64px;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.pastille {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 14px 0 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 0 0 1px var(--blanc), 0 2px 8px rgba(var(--ombre-bleue), 0.07);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.005em;
  color: #27272A;
}

.titre {
  margin: 0;
  font-weight: 600;
  font-size: 64px;
  line-height: 68px;
  letter-spacing: -0.035em;
  color: var(--encre);
}
.titre__ligne { display: block; }
.titre__ligne--tuile {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
}

.sous-titre {
  margin: 18px 0 0;
  font-size: 19px;
  line-height: 28px;
  letter-spacing: -0.008em;
  color: var(--fort);
  text-wrap: balance;
}

.boutons {
  display: flex;
  gap: 12px;
  margin-top: 34px;
}

/* ── La scène : l'app dans son cadre de verre ─────────────────────────── */
/* La scène ne mesure que la part visible du cadre (42,4 % de sa largeur, soit
 * 492 à 1440) : le cadre, plus haut, déborde, et c'est la carte qui le coupe.
 * Tout ce qui est dedans est coté en unités de la scène (cqw = 1 % de sa
 * largeur), pour suivre toutes les largeurs sans se déformer. */

.scene {
  position: relative;
  z-index: 2;
  width: var(--large);
  height: calc(var(--large) * 0.4241);
  margin-top: 60px;
  flex: none;
  container-type: inline-size;
}

.cadre {
  position: absolute;
  inset: 0 0 auto 0;
  margin: 0;
  padding: 12px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.42);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.9),
    0 30px 70px -10px rgba(var(--ombre-bleue), 0.14),
    0 4px 12px rgba(var(--ombre-bleue), 0.06);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}

.cadre__ecran {
  aspect-ratio: 1136 / 732;
  border-radius: 13px;
  overflow: hidden;
  background: #F4F4F5;
}
.cadre__ecran img { width: 100%; height: auto; }

/* ── La brume : la profondeur des nuages, sans leur forme ────────────── */
/* Les nuages des références sont doux, pâles et placés sur les côtés du cadre :
 * ils éclaircissent le ciel là où l'œil ne s'arrête pas. On garde exactement ce
 * rôle, sans dessiner un seul nuage : un voile de lumière derrière, sur les
 * côtés, et une brume devant le bas du cadre, d'où l'app sort. Contraste faible
 * exprès : blanc sur bleu très clair. */

.brume {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 420px 170px at 9% 60%, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0) 70%),
    radial-gradient(ellipse 320px 120px at 21% 45%, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 70%),
    radial-gradient(ellipse 460px 180px at 92% 53%, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0) 70%),
    radial-gradient(ellipse 300px 110px at 80% 40%, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0) 70%);
  translate: calc(var(--px, 0) * -6px) calc(var(--py, 0) * -4px + var(--defil, 0) * 0.1px);
}

.brume-devant {
  position: absolute;
  z-index: 1;
  left: -12cqw;
  right: -12cqw;
  bottom: 0;
  height: 60%;
  pointer-events: none;
  background:
    radial-gradient(ellipse 34% 70% at 6% 100%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 72%),
    radial-gradient(ellipse 34% 70% at 94% 100%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 72%),
    linear-gradient(180deg, rgba(250, 251, 255, 0) 0%, rgba(250, 251, 255, 0.35) 55%, rgba(250, 251, 255, 0.82) 100%);
  translate: calc(var(--px, 0) * 8px) calc(var(--py, 0) * 5px - var(--defil, 0) * 0.05px);
}

.heros[data-profondeur="ciel"] .brume,
.heros[data-profondeur="ciel"] .brume-devant { display: none; }

/* ── Ce qui passe devant : trois étiquettes, nettes ───────────────────── */

.plan-pres {
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: transform;
  translate: calc(var(--px, 0) * 12px) calc(var(--py, 0) * 7px - var(--defil, 0) * 0.08px);
}

.etiquette {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 13px 0 6px;
  border-radius: 999px;
  background: var(--blanc);
  box-shadow: 0 1px 1px rgba(24, 24, 27, 0.04), 0 10px 24px -6px rgba(var(--ombre-bleue), 0.22);
  font-weight: 500;
  font-size: 13.5px;
  letter-spacing: -0.005em;
  color: #27272A;
  white-space: nowrap;
}
.etiquette b { font-weight: 600; color: var(--encre); }
.etiquette img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
/* l'icône dans la pastille teintée de l'app (#EAF1FE, trait bleu) */
.etiquette__icone {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #EAF1FE;
  color: var(--bleu);
}
.etiquette__icone svg { width: 13px; height: 13px; }
/* une étiquette de chose faite (pages Otto et Fonctionnalités) : la coche verte de l'app */
.etiquette__icone--vert { background: #E7F6EE; color: #12A150; }
.etiquette__icone--vert svg { width: 12px; height: 12px; }

/* Positions relevées à 1440 (cadre de 1160), en unités de la scène */
.etiquette--1 { left: -6.034cqw; top: 16.897cqw; }
.etiquette--2 { left: 12.931cqw; top: -54px; }
.etiquette--3 { right: 12.931cqw; top: -46px; }

/* ── L'arrivée ─────────────────────────────────────────────────────────── */
/* Le texte monte, la brume se lève, le cadre suit, puis les étiquettes
 * arrivent. Sans JavaScript, ou si le visiteur a demandé moins d'animations,
 * tout est déjà à sa place. */

.avec-js .entre,
.avec-js .cadre,
.avec-js .brume,
.avec-js .brume-devant,
.avec-js .etiquette { transition-timing-function: var(--courbe); }

.avec-js .heros:not(.est-pret) .entre { opacity: 0; transform: translateY(14px); }
.avec-js .entre { transition: opacity 0.8s, transform 0.9s; transition-delay: calc(0.08s + var(--rang, 0) * 0.07s); }

.avec-js .heros:not(.est-pret) .brume,
.avec-js .heros:not(.est-pret) .brume-devant { opacity: 0; }
.avec-js .brume, .avec-js .brume-devant { transition: opacity 1.8s 0.2s; }

.avec-js .heros:not(.est-pret) .cadre { opacity: 0; transform: translateY(56px); }
.avec-js .cadre { transition: opacity 0.9s 0.3s, transform 1.2s 0.3s; }

.avec-js .heros:not(.est-complet) .etiquette { opacity: 0; transform: translateY(8px) scale(0.96); }
.avec-js .etiquette { transition: opacity 0.6s, transform 0.7s; transition-delay: calc(0.35s + var(--rang, 0) * 0.14s); }

@media (prefers-reduced-motion: reduce) {
  .avec-js .heros .entre,
  .avec-js .heros .brume,
  .avec-js .heros .brume-devant,
  .avec-js .heros .cadre,
  .avec-js .heros .etiquette { transition: none !important; }
}

/* ── Les largeurs ──────────────────────────────────────────────────────── */

/* Portable : la marge de la carte ne loge plus les 70 px qui dépassent du
 * cadre (il en faut 82 avec la respiration, soit 1348 de large) : l'étiquette
 * de côté rentre sur le cadre. */
@media (max-width: 1347px) {
  .etiquette--1 { left: -2cqw; }
}

/* Tablette : le titre descend d'un cran, les liens se serrent */
@media (max-width: 1024px) {
  :root { --large: calc(100vw - 24px - 56px); }
  .nav__liens { gap: 22px; }
  .titre { font-size: 54px; line-height: 58px; }
  .tuile-klintt, .otto--titre { --t: 50px; }
  .etiquette--1 { display: none; }
}

@media (max-width: 860px) {
  .nav { grid-template-columns: 1fr auto; }
  .nav__liens { display: none; }
}

/* Téléphone : l'app entière réduite à 350 px serait illisible. On montre le
 * haut du Stock à une taille qu'on lit, dans le même cadre de verre. */
@media (max-width: 640px) {
  :root { --large: calc(100vw - 16px - 32px); }
  .heros { padding: 8px; }
  .heros__carte { padding-top: 18px; border-radius: 22px; }
  .nav { height: 38px; }
  .nav__marque svg { height: 23px; }
  .nav__connexion { display: none; }
  .heros__texte { margin-top: 44px; }
  .pastille { height: 30px; font-size: 13px; }
  .titre {
    font-size: 38px;
    line-height: 42px;
    letter-spacing: -0.035em;
    text-wrap: balance;
  }
  .titre__ligne, .titre__ligne--tuile { display: inline; }
  .titre__ligne--tuile > span:not(.tuile-klintt):not(.otto) { display: inline; }
  /* la tuile se centre sur la ligne sans la grandir : « middle » tient la boîte de
   * ligne à 42, le décalage relatif la remonte là où Figma la centre */
  .tuile-klintt, .otto--titre { --t: 36px; vertical-align: middle; position: relative; top: -3px; margin: 0 1px; }
  .heros[data-titre="klintt"] .titre .tuile-klintt { display: inline-grid; }
  .sous-titre { margin-top: 14px; font-size: 16px; line-height: 24px; max-width: 30ch; }
  .boutons { margin-top: 26px; }
  .boutons .bouton { height: 46px; padding: 0 20px; font-size: 15px; }

  .scene { margin-top: 44px; height: 360px; }
  /* la colonne de l'app à 0,49 de sa taille : les espaces du CRM, lisibles, et le Stock qui continue hors de la carte */
  .cadre { padding: 8px; border-radius: 20px; width: 300%; }
  .cadre__ecran { border-radius: 12px; }
  .plan-pres { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════
 * Les fonctionnalités
 *
 * D'après la grille de cartes collée par Evan (« Features To Boost Your
 * Productivity »), relevée au pixel : cartes à liseré blanc épais (6/255 de la
 * largeur, soit 14 à 1440), rapport 1,2, deux colonnes et une grande carte en
 * bas, écart d'un seizième de carte ; dans chaque carte, un fond gris à peine
 * bleui vers le coin haut droit, une grille fine qui s'y efface, la
 * mini-interface en haut (fondue vers le bas) et le texte en bas à gauche.
 * ════════════════════════════════════════════════════════════════════════ */

.fonctions { padding: 0 12px 12px; }

.fonctions__carte {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 104px 0 120px;
  border-radius: 28px;
  background: #F2F3F6;
}

.entete {
  width: var(--large);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.pastille--pleine {
  padding: 0 14px 0 10px;
  background: var(--blanc);
  box-shadow: inset 0 0 0 1px #E9E9EC, 0 1px 2px rgba(24, 24, 27, 0.04);
}
.pastille--pleine svg { width: 16px; height: 16px; color: var(--fort); }
/* « Bientôt » dans une pastille : ce qui n'est pas encore ouvert dans l'app */
.pastille__bientot, .comparatif__bientot {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: #EEEFF2;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0;
  color: #71717A;
}
.pastille__bientot { margin-left: 2px; margin-right: -6px; }
.comparatif__bientot { margin-left: 8px; vertical-align: 1px; }

.entete__titre {
  margin: 22px 0 0;
  font-weight: 600;
  font-size: 48px;
  line-height: 54px;
  letter-spacing: -0.035em;
  color: var(--encre);
  text-wrap: balance;
}

.entete__source {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 18px;
  color: #A1A1AA;
}

.entete__texte {
  margin: 14px 0 0;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: -0.008em;
  color: #71717A;
}

.grille {
  width: var(--large);
  margin-top: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

/* sous les cartes : vers la page qui montre chaque écran de l'app */
.fonctions__tout {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  margin-top: 48px;
  padding: 0 16px 0 20px;
  border-radius: 12px;
  background: var(--blanc);
  box-shadow: inset 0 0 0 1px #E9E9EC, 0 1px 2px rgba(24, 24, 27, 0.04);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.005em;
  color: var(--encre);
  transition: box-shadow 0.2s, transform 0.25s var(--courbe);
}
.fonctions__tout svg { width: 16px; height: 16px; color: #52525B; transition: transform 0.2s var(--courbe); }
.fonctions__tout:hover { box-shadow: inset 0 0 0 1px #DCDCE0, 0 4px 12px -4px rgba(var(--ombre-bleue), 0.16); }
.fonctions__tout:hover svg { transform: translateX(3px); }
.fonctions__tout:active { transform: scale(0.98); }
.fonctions__tout:focus-visible { outline: 2px solid #2547FF; outline-offset: 3px; }

/* La carte : le liseré blanc est le padding ; le fond et la grille sont peints
 * dessous, sur le rectangle intérieur */
.fonction {
  position: relative;
  aspect-ratio: 1.2;
  padding: 14px;
  border-radius: 32px;
  background: var(--blanc);
  box-shadow: 0 1px 2px rgba(24, 24, 27, 0.04), 0 18px 40px -20px rgba(var(--ombre-bleue), 0.20);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  isolation: isolate;
  overflow: hidden;
}
.fonction--large { grid-column: 1 / -1; aspect-ratio: auto; height: 480px; }

.fonction::before,
.fonction::after {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 20px;
  z-index: -1;
  pointer-events: none;
}
.fonction::before {
  background: linear-gradient(212deg, #E4EBFD 0%, #EEF2FC 24%, #F6F7FA 52%, #F7F8FA 100%);
}
.fonction::after {
  background-image:
    linear-gradient(rgba(154, 178, 238, 0.28) 1px, transparent 1px),
    linear-gradient(90deg, rgba(154, 178, 238, 0.28) 1px, transparent 1px);
  background-size: 26px 26px;
  background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(circle at 100% 0%, #000 0%, rgba(0, 0, 0, 0.55) 26%, transparent 58%);
  mask-image: radial-gradient(circle at 100% 0%, #000 0%, rgba(0, 0, 0, 0.55) 26%, transparent 58%);
}

.fonction__visuel {
  position: absolute;
  inset: 14px 14px auto;
  height: 64%;
  display: grid;
  place-items: center;
  /* la mini-interface se fond vers le texte, comme sur la référence */
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
}
.fonction--large .fonction__visuel { height: 72%; }

.fonction__titre {
  position: relative;
  margin: 0;
  padding: 0 22px;
  font-weight: 500;
  font-size: 24px;
  line-height: 30px;
  letter-spacing: -0.02em;
  color: var(--encre);
}
.fonction__texte {
  position: relative;
  margin: 8px 0 0;
  padding: 0 22px 22px;
  max-width: 470px;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.006em;
  color: #71717A;
}

/* ── Les petites pièces de l'app, communes aux cartes ─────────────────── */

.puce {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border-radius: 7px;
  font-weight: 500;
  font-size: 12.5px;
  white-space: nowrap;
}
.puce--verte { background: #E7F6EE; color: #12A150; }
.puce--bleue { background: #EAF1FE; color: var(--bleu); }
.puce--orange { background: #FDEFE3; color: #D66A1E; }

.mini-bouton {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: 8px;
  background: #F1F1F3;
  font-weight: 500;
  font-size: 13px;
  color: var(--encre);
  white-space: nowrap;
}
.mini-bouton--bleu { background: #4190F9; color: var(--blanc); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); }


/* ── 1. Le stock : trois lignes empilées, la plus proche nette ─────────── */

.pile { position: relative; width: 84%; height: 178px; margin-top: 30px; }
.ligne {
  position: absolute;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: 44px 1fr auto auto auto;
  align-items: center;
  gap: 12px;
  transition: top 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.45s;
  padding: 12px 16px 12px 12px;
  border-radius: 17px;
  background: var(--blanc);
  box-shadow: 0 1px 2px rgba(24, 24, 27, 0.05), 0 14px 30px -16px rgba(var(--ombre-bleue), 0.28);
  transform-origin: 50% 0;
}
.ligne--1 { top: 100px; z-index: 4; }
.ligne--2 { top: 50px; z-index: 3; transform: scale(0.94); opacity: 0.78; }
.ligne--3 { top: 4px; z-index: 2; transform: scale(0.88); opacity: 0.5; }
.ligne--4 { top: -30px; z-index: 1; transform: scale(0.82); opacity: 0; }
/* celle qui arrive devant (js/fonctions.js) */
.ligne--0 { top: 112px; z-index: 5; opacity: 0; }
.ligne__photo { width: 44px; height: 44px; border-radius: 11px; background: #EEE center / cover; }
.ligne__nom { display: flex; flex-direction: column; min-width: 0; font-weight: 500; font-size: 15.5px; line-height: 20px; color: var(--encre); white-space: nowrap; }
.ligne__nom small { font-weight: 400; font-size: 12px; line-height: 16px; color: #A1A1AA; }
.ligne__nom, .ligne__nom small { overflow: hidden; text-overflow: ellipsis; }
.ligne__prix { font-weight: 500; font-size: 15.5px; color: var(--encre); font-variant-numeric: tabular-nums; }
.ligne__prix span { color: #A1A1AA; }
.ligne__marge { font-weight: 500; font-size: 13px; color: #12A150; max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; transition: max-width 0.5s var(--courbe), opacity 0.4s; }
.ligne--1 .ligne__marge { max-width: 80px; opacity: 1; }

/* ── 2. Les annonces : la colonne des outils ──────────────────────────── */

.outils {
  width: 62%;
  margin-top: 34px;
  padding: 12px 10px;
  border-radius: 18px;
  background: var(--blanc);
  box-shadow: 0 1px 2px rgba(24, 24, 27, 0.05), 0 16px 34px -18px rgba(var(--ombre-bleue), 0.28);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.outils__titre { padding: 2px 10px 6px; font-size: 12px; color: #A1A1AA; }
.outil {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  height: 41px;
  padding: 0 10px;
  border-radius: 10px;
  font-weight: 500;
  font-size: 15.5px;
  color: #3F3F46;
}
.outil--actif { background: #F4F4F5; color: var(--encre); }
/* La tuile des outils de l'app (lib/v5/tuiles.ts) : rayon au tiers, dégradé à
 * 135°, liseré gris translucide, reflet blanc interne, glyphe blanc aux 2/3 */
.tuile-outil {
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 7.33px;
  background: linear-gradient(135deg, var(--a), var(--b));
  box-shadow: inset 0 0 0 1px rgba(197, 197, 197, 0.24), inset 0 1.8px 3.7px rgba(255, 255, 255, 0.24), 0 3.7px 1.8px rgba(0, 0, 0, 0.08);
}
.tuile-outil svg { width: 14.7px; height: 14.7px; fill: var(--blanc); }

/* ── 3. Les messages : une question, puis l'offre ─────────────────────── */

.conversation { width: 84%; margin-top: 26px; display: flex; flex-direction: column; gap: 14px; }
.bulle-acheteur { display: flex; align-items: flex-end; gap: 10px; }
.bulle-acheteur__photo { flex: none; width: 32px; height: 32px; border-radius: 9px; background: #EEE center / cover; }
.bulle-acheteur__texte {
  padding: 10px 14px;
  border-radius: 16px 16px 16px 6px;
  background: var(--blanc);
  box-shadow: 0 1px 2px rgba(24, 24, 27, 0.05);
  font-size: 14px;
  line-height: 20px;
  color: #27272A;
}
.offre {
  margin-left: 42px;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--blanc);
  box-shadow: 0 1px 2px rgba(24, 24, 27, 0.05), 0 16px 34px -18px rgba(var(--ombre-bleue), 0.28);
  display: flex;
  flex-direction: column;
}
.offre__libelle { font-size: 12.5px; color: #A1A1AA; }
.offre__montant { margin-top: 2px; font-weight: 600; font-size: 26px; line-height: 34px; letter-spacing: -0.02em; color: var(--encre); }
.offre__montant small { margin-left: 10px; font-weight: 400; font-size: 13px; letter-spacing: 0; color: #A1A1AA; }
.offre__boutons { margin-top: 12px; display: flex; gap: 8px; }

/* ── 4. Otto : la demande, la proposition, Valider ────────────────────── */

.copilote { width: 80%; margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.copilote__demande {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 7px 8px;
  border-radius: 14px;
  background: var(--encre);
  font-weight: 500;
  font-size: 14px;
  color: var(--blanc);
}
.copilote__selection { display: flex; }
.copilote__selection span { width: 22px; height: 22px; border-radius: 7px; background: #EEE center / cover; box-shadow: 0 0 0 2px var(--encre); }
.copilote__selection span + span { margin-left: -7px; }
.copilote__reponse {
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--blanc);
  box-shadow: 0 1px 2px rgba(24, 24, 27, 0.05), 0 16px 34px -18px rgba(var(--ombre-bleue), 0.28);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.copilote__tete { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 14px; color: var(--encre); }
.copilote__ligne { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--encre); white-space: nowrap; }
.copilote__ligne > span { flex: none; width: 26px; height: 26px; border-radius: 7px; background: #EEE center / cover; }
.copilote__ligne s { margin-left: auto; color: #A1A1AA; }
.copilote__ligne b { font-weight: 600; min-width: 34px; text-align: right; }
.copilote__boutons { display: flex; gap: 8px; padding-top: 4px; }

/* ── 5. Les ventes : la carte « Ventes par jour » du tableau de bord ───── */

.ventes {
  width: 88%;
  height: 100%;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 56px;
  align-items: center;
  padding-top: 26px;
}
.ventes__chiffres { display: flex; flex-direction: column; gap: 26px; }
.chiffre { display: flex; flex-direction: column; gap: 4px; }
.chiffre__libelle { font-size: 14px; color: #71717A; }
.chiffre__valeur { font-weight: 600; font-size: 32px; line-height: 38px; letter-spacing: -0.025em; color: var(--encre); font-variant-numeric: tabular-nums; }
.hausse { margin-left: 10px; font-style: normal; font-weight: 500; font-size: 14px; letter-spacing: 0; color: #12A150; }
.barres { position: relative; height: 230px; display: flex; align-items: flex-end; gap: 16px; padding-bottom: 26px; }
.barres__moyenne { position: absolute; left: 0; right: 0; bottom: calc(26px + 0.58 * 190px); border-top: 1.5px dashed #C6D0E4; }
.barre {
  position: relative;
  flex: 1;
  height: calc(var(--h) * 190px);
  border-radius: 10px 10px 5px 5px;
  background: linear-gradient(180deg, #E1E7F4, #EDF0F6);
}
.barre i { position: absolute; left: 50%; bottom: -26px; translate: -50% 0; font-style: normal; font-size: 12.5px; color: #A1A1AA; }
.barre--active { background: linear-gradient(180deg, #4190F9 0%, #7DB3FB 70%, #B7D5FD 100%); }
.barre--active b {
  position: absolute;
  left: 50%;
  top: -40px;
  translate: -50% 0;
  padding: 5px 10px;
  border-radius: 8px;
  background: #4190F9;
  font-weight: 600;
  font-size: 12.5px;
  color: var(--blanc);
  white-space: nowrap;
}

/* ── Les fonctionnalités, aux autres largeurs ─────────────────────────── */

/* Dès que la carte se resserre, les lignes du Stock perdent leur prix :
 * le statut partout, et la marge sur la ligne de devant */
@media (max-width: 1180px) {
  .ligne { grid-template-columns: 44px 1fr auto auto; }
  .ligne .ligne__prix { display: none; }
  .offre { margin-left: 0; }
  .offre__boutons .mini-bouton { padding: 0 10px; }
}

@media (max-width: 1024px) {
  .fonctions__carte { padding: 88px 0 96px; }
  .entete__titre { font-size: 42px; line-height: 48px; }
  .grille { gap: 20px; }
  .fonction { aspect-ratio: auto; min-height: 460px; }
  .pile { width: 90%; }
  .outils { width: 72%; }
  .conversation, .copilote { width: 90%; }
  .ventes { grid-template-columns: 220px 1fr; gap: 32px; width: 92%; }
}

@media (max-width: 880px) {
  .grille { grid-template-columns: 1fr; }
  .fonction--large { height: auto; min-height: 560px; }
  .fonction--large .fonction__visuel { height: 66%; }
  .ventes { grid-template-columns: 1fr; gap: 18px; align-content: center; padding-top: 18px; }
  .ventes__chiffres { flex-direction: row; gap: 28px; }
  .barres { height: 170px; }
  .barre { height: calc(var(--h) * 130px); }
  .barres__moyenne { bottom: calc(26px + 0.58 * 130px); }
}

@media (max-width: 640px) {
  .fonctions { padding: 0 8px 8px; }
  .fonctions__carte { padding: 64px 0 64px; border-radius: 22px; }
  .entete__titre { margin-top: 18px; font-size: 32px; line-height: 38px; }
  .entete__texte { font-size: 16px; line-height: 24px; max-width: 30ch; }
  .grille { margin-top: 36px; gap: 14px; }
  .fonction { min-height: 430px; padding: 10px; border-radius: 26px; }
  .fonction::before, .fonction::after { inset: 10px; border-radius: 18px; }
  .fonction__visuel { inset: 10px 10px auto; height: 62%; padding: 0 12px; }
  .fonction__titre { padding: 0 16px; font-size: 21px; line-height: 27px; }
  .fonction__texte { padding: 0 16px 18px; font-size: 15px; line-height: 22px; }

  /* Stock : la ligne proche garde le prix et la marge, les deux autres leur statut */
  .pile { width: 100%; height: 170px; }
  .ligne { grid-template-columns: 36px 1fr auto auto; gap: 10px; padding: 10px 12px 10px 10px; }
  .ligne--1 { top: 96px; }
  .ligne--0 { top: 108px; }
  .ligne__photo { width: 36px; height: 36px; border-radius: 9px; }
  .ligne__nom { font-size: 14.5px; }

  .outils { width: 86%; }
  .conversation, .copilote { width: 100%; }

  /* Ventes : les deux chiffres côte à côte, la hausse sous le montant */
  .fonction--large { min-height: 540px; }
  .ventes { width: 100%; gap: 22px; padding-top: 22px; }
  .ventes__chiffres { gap: 26px; }
  .chiffre__valeur { display: flex; flex-direction: column; font-size: 22px; line-height: 28px; }
  .hausse { margin: 2px 0 0; font-size: 13px; }
  .barres { height: 196px; gap: 10px; }
  .barre { height: calc(var(--h) * 126px); }
  .barres__moyenne { bottom: calc(26px + 0.58 * 126px); }
}

/* Petits téléphones (moins de 380 de large) : on resserre les mini-interfaces */
@media (max-width: 380px) {
  .fonction__visuel { padding: 0 4px; }
  .ligne { gap: 8px; }
  .ligne__marge { font-size: 12px; }
  .offre { padding: 14px; }
  .offre__boutons { gap: 6px; }
  .offre__boutons .mini-bouton { padding: 0 8px; font-size: 12px; }
  .copilote__reponse { padding: 12px; }
  .copilote__ligne { gap: 8px; font-size: 13px; }
  .bulle-acheteur__texte { font-size: 13px; }
}

/* Très petits écrans (320) : les mini-interfaces entières, un cran plus petites */
@media (max-width: 340px) {
  .fonction__visuel > * { zoom: 0.84; }
}

/* ════════════════════════════════════════════════════════════════════════
 * Klintt Track, les trois étapes, la confiance
 *
 * Ce qu'un site de SaaS doit dire et que la page ne disait pas : le deuxième
 * espace de l'app (le marché), comment on démarre, et pourquoi on peut confier
 * sa boutique. Les visuels sont de vrais morceaux de l'app : l'écran « Scan ·
 * Résultat » de Klintt Track, et la fenêtre « Connecter un compte Vinted ».
 * ════════════════════════════════════════════════════════════════════════ */

/* ── Klintt Track : le texte à gauche, l'écran coupé par son panneau à droite ── */

.track {
  display: flex;
  justify-content: center;
  padding: 120px 12px 112px;
}
.track__grille {
  width: var(--large);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 64px;
  align-items: center;
}
.track__texte { display: flex; flex-direction: column; align-items: flex-start; }
.track__titre {
  margin: 22px 0 0;
  font-weight: 600;
  font-size: 48px;
  line-height: 54px;
  letter-spacing: -0.035em;
  color: var(--encre);
  text-wrap: balance;
}
.track__intro { margin: 14px 0 0; max-width: 36ch; font-size: 18px; line-height: 28px; letter-spacing: -0.008em; color: #71717A; }

/* trois points : une tuile d'icône, un titre de trois mots, une ligne */
.points { margin: 36px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 20px; text-align: left; }
.points li { display: flex; align-items: flex-start; gap: 14px; }
.points__icone {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--blanc);
  box-shadow: inset 0 0 0 1px #ECECEF, 0 1px 2px rgba(24, 24, 27, 0.05);
  color: var(--encre);
}
.points__icone svg { width: 20px; height: 20px; }
.points li > span:last-child { display: flex; flex-direction: column; padding-top: 1px; font-size: 15px; line-height: 22px; color: #71717A; }
.points b { font-weight: 500; font-size: 16px; line-height: 22px; color: var(--encre); }

/* le panneau prend la teinte menthe de Klintt Track ; l'écran le dépasse à droite et en bas */
.track__panneau {
  position: relative;
  margin: 0;
  height: 440px;
  border-radius: 28px;
  overflow: hidden;
  background: linear-gradient(200deg, #D3F8EA 0%, #E6F5F1 34%, #F0F2F6 72%, #F4F5F8 100%);
}
.track__ecran {
  position: absolute;
  left: 48px;
  top: 56px;
  width: 980px;
  max-width: none;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 0 0 1px rgba(24, 24, 27, 0.05), 0 30px 60px -24px rgba(var(--ombre-bleue), 0.28);
}

/* ── Prêt en trois étapes : la fenêtre de connexion, puis les trois pas ── */

.demarrer { padding: 0 12px 12px; }
.demarrer__carte {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 104px 0 112px;
  border-radius: 28px;
  background: #F2F3F6;
}
.demarrer__grille {
  width: var(--large);
  margin-top: 56px;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 20px;
}
.demarrer__visuel {
  display: grid;
  place-items: center;
  min-height: 460px;
  padding: 40px;
  border-radius: 28px;
  overflow: hidden;
  /* le ciel du haut de page */
  background: linear-gradient(200deg, #CCDFFF 0%, #E3EDFF 45%, #F2F6FF 100%);
}

/* la fenêtre « Connecter un compte Vinted » de l'app (Figma 5411:16460) */
.connexion {
  width: min(520px, 100%);
  padding: 18px;
  border-radius: 22px;
  background: #FAFAFA;
  box-shadow: inset 0 0 0 1px var(--blanc), 0 1px 2px rgba(24, 24, 27, 0.06), 0 24px 48px -20px rgba(var(--ombre-bleue), 0.3);
  text-align: left;
}
.connexion__tete { display: flex; align-items: center; gap: 12px; padding: 2px 2px 16px; }
.connexion__icone { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: #EFEFF1; color: #3F3F46; }
.connexion__icone svg { width: 20px; height: 20px; }
.connexion__titres { display: flex; flex-direction: column; }
.connexion__titres b { font-weight: 500; font-size: 16px; line-height: 22px; color: var(--encre); }
.connexion__titres small { font-size: 13.5px; line-height: 19px; color: #71717A; }
.connexion__corps { padding: 18px 20px 20px; border-radius: 16px; background: var(--blanc); box-shadow: inset 0 0 0 1px #EFEFF0; }
.connexion__onglets { display: inline-flex; padding: 3px; border-radius: 11px; background: #EFEFF1; font-weight: 500; font-size: 14px; line-height: 18px; }
.connexion__onglets span { padding: 7px 12px; border-radius: 8px; color: #71717A; }
.connexion__onglets .connexion__onglet--actif { background: var(--bleu); color: var(--blanc); }
.connexion__etapes { margin: 18px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.etape { display: flex; align-items: center; gap: 12px; font-size: 14.5px; line-height: 20px; color: #A1A1AA; transition: color 0.3s; }
.etape__rond {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #EFEFF1;
  color: #A1A1AA;
  font-weight: 500;
  font-size: 12px;
  transition: background-color 0.3s, color 0.3s;
}
/* le filet qui relie un rond au précédent */
.etape + .etape .etape__rond::before { content: ""; position: absolute; bottom: 100%; left: 50%; width: 1px; height: 14px; background: #E4E4E7; }
.etape__rond i { font-style: normal; transition: opacity 0.2s; }
.etape__rond svg { position: absolute; width: 13px; height: 13px; opacity: 0; transform: scale(0.6); transition: opacity 0.2s, transform 0.3s var(--courbe); }
.etape--en-cours { color: var(--encre); }
.etape--en-cours .etape__rond { background: var(--bleu); color: var(--blanc); }
.etape--faite { color: #71717A; }
.etape--faite .etape__rond { background: var(--encre); color: var(--blanc); }
.etape--faite .etape__rond i { opacity: 0; }
.etape--faite .etape__rond svg { opacity: 1; transform: none; }
.connexion__note { margin: 18px 0 0; font-size: 13.5px; line-height: 19px; color: #71717A; }
.connexion__pied { display: flex; justify-content: flex-end; padding: 16px 2px 2px; }
.connexion__bouton { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 11px; background: var(--encre); color: var(--blanc); font-weight: 500; font-size: 15px; }
.connexion__libelle { display: inline-block; transition: opacity 0.16s, transform 0.16s; }

/* les trois pas, à droite */
.demarrer__etapes { margin: 0; padding: 0; list-style: none; display: grid; grid-template-rows: repeat(3, 1fr); gap: 20px; }
.pas {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 28px;
  border-radius: 24px;
  background: var(--blanc);
  box-shadow: 0 1px 2px rgba(24, 24, 27, 0.04);
}
.pas__numero {
  align-self: flex-start;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: #F2F3F6;
  font-weight: 600;
  font-size: 14px;
  color: var(--encre);
  font-variant-numeric: tabular-nums;
}
.pas__titre { margin: 18px 0 0; font-weight: 500; font-size: 20px; line-height: 26px; letter-spacing: -0.015em; color: var(--encre); }
.pas__texte { margin: 6px 0 0; font-size: 15.5px; line-height: 23px; color: #71717A; }

/* ── Confiance : quatre garanties ─────────────────────────────────────── */

.confiance { display: flex; flex-direction: column; align-items: center; padding: 120px 12px 0; }
.confiance__grille {
  width: var(--large);
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.garantie { padding: 28px; border-radius: 24px; background: #F4F5F8; }
.garantie__icone {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--blanc);
  box-shadow: inset 0 0 0 1px #ECECEF, 0 1px 2px rgba(24, 24, 27, 0.05);
  color: var(--encre);
}
.garantie__icone svg { width: 22px; height: 22px; }
.garantie__titre { margin: 22px 0 0; font-weight: 500; font-size: 18px; line-height: 24px; letter-spacing: -0.01em; color: var(--encre); }
.garantie__texte { margin: 8px 0 0; font-size: 15px; line-height: 22px; color: #71717A; }

/* ── Aux autres largeurs ───────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .track { padding: 96px 12px 96px; }
  .track__grille { gap: 40px; }
  .track__titre { font-size: 42px; line-height: 48px; }
  .demarrer__carte { padding: 88px 0 96px; }
  .demarrer__visuel { padding: 28px; }
  .confiance { padding-top: 96px; }
  .confiance__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 880px) {
  .track__grille { grid-template-columns: 1fr; }
  .track__texte { align-items: center; text-align: center; }
  .demarrer__grille { grid-template-columns: 1fr; }
  .demarrer__etapes { grid-template-rows: none; }
}

@media (max-width: 640px) {
  .track { padding: 72px 8px 64px; }
  .track__titre { margin-top: 18px; font-size: 32px; line-height: 38px; }
  .track__intro { font-size: 16px; line-height: 24px; }
  .points { margin-top: 28px; gap: 16px; }
  .track__panneau { height: 300px; border-radius: 22px; }
  .track__ecran { left: 20px; top: 32px; width: 680px; border-radius: 12px; }
  .demarrer { padding: 0 8px 8px; }
  .demarrer__carte { padding: 64px 0; border-radius: 22px; }
  .demarrer__grille { margin-top: 36px; gap: 14px; }
  .demarrer__visuel { min-height: 0; padding: 20px 12px; border-radius: 22px; }
  .connexion { padding: 12px; border-radius: 18px; }
  .connexion__tete { padding-bottom: 12px; }
  .connexion__corps { padding: 14px; }
  .connexion__onglets { font-size: 13px; }
  .connexion__onglets span { padding: 6px 10px; }
  .etape { gap: 10px; font-size: 13.5px; line-height: 19px; }
  /* une étape peut passer sur deux lignes : le filet ne relierait plus les ronds */
  .etape + .etape .etape__rond::before { display: none; }
  .pas { padding: 22px; border-radius: 22px; }
  .pas__titre { margin-top: 14px; font-size: 18px; line-height: 24px; }
  .pas__texte { font-size: 15px; line-height: 22px; }
  .confiance { padding: 72px 8px 0; }
  .confiance__grille { margin-top: 36px; grid-template-columns: 1fr; gap: 12px; }
  .garantie { padding: 22px; border-radius: 22px; }
  .garantie__titre { margin-top: 16px; font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .etape, .etape__rond, .etape__rond i, .etape__rond svg, .connexion__libelle { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════════
 * Les tarifs
 *
 * D'après la section « Pricing » de x.ai/bot : une carte par offre, le nom et un
 * sélecteur de palier en tête, le prix en grand, le bouton, puis « Inclus : » et
 * une liste cochée ; le prix et les chiffres de la liste roulent d'un palier à
 * l'autre. Transposé en clair : cartes gris très pâle sur la page blanche.
 * ════════════════════════════════════════════════════════════════════════ */

.tarifs {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 112px 12px 120px;
}

.tarifs__grille {
  width: var(--large);
  margin-top: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.forfait {
  display: flex;
  flex-direction: column;
  padding: 32px;
  border-radius: 28px;
  background: #F4F5F8;
}

.forfait__haut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
/* une carte sans sélecteur (Starter) garde la hauteur de l'en-tête de sa voisine,
 * pour que les prix soient à la même hauteur */
.forfait__haut:has(> .forfait__nom:only-child) { min-height: 38px; }

.forfait__nom {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: #52525B;
}

/* Le sélecteur de palier : une piste, un curseur blanc qui glisse sous le choix */
.segment {
  position: relative;
  display: inline-flex;
  padding: 3px;
  border-radius: 12px;
  background: #E8E9ED;
  isolation: isolate;
}
.segment__curseur {
  position: absolute;
  z-index: -1;
  top: 3px;
  bottom: 3px;
  left: 0;
  border-radius: 9px;
  background: var(--blanc);
  box-shadow: 0 1px 2px rgba(24, 24, 27, 0.08), 0 2px 8px rgba(24, 24, 27, 0.06);
  transition: transform 0.45s var(--courbe), width 0.45s var(--courbe);
}
.segment button {
  appearance: none;
  border: 0;
  background: none;
  padding: 0 14px;
  height: 32px;
  border-radius: 9px;
  font: inherit;
  font-weight: 500;
  font-size: 14px;
  color: #71717A;
  cursor: pointer;
  transition: color 0.25s;
}
.segment button[aria-checked="true"] { color: var(--encre); }
.segment button:focus-visible { outline: 2px solid #2547FF; outline-offset: 1px; }

.forfait__prix {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 34px 0 0;
}
.forfait__montant {
  font-weight: 600;
  font-size: 52px;
  letter-spacing: -0.035em;
  color: var(--encre);
}
.forfait__periode { font-size: 16px; color: #71717A; }
.forfait__note { margin: 8px 0 0; font-size: 14px; color: #A1A1AA; }

.forfait__bouton { margin-top: 28px; width: 100%; }
.forfait__cta { display: inline-block; transition: opacity 0.16s, transform 0.16s; }
.forfait__cta--sort { opacity: 0; transform: translateY(4px); }

.bouton--verre-plein {
  background: var(--blanc);
  color: var(--encre);
  box-shadow: 0 1px 2px rgba(24, 24, 27, 0.06), inset 0 0 0 1px #E9E9EC;
}
.bouton--verre-plein:hover { background: #FAFAFB; }

.forfait__inclus { margin: 32px 0 0; font-weight: 500; font-size: 15px; color: var(--encre); }
.forfait__liste { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.forfait__liste li { display: flex; align-items: flex-start; gap: 10px; font-size: 15.5px; line-height: 22px; color: #52525B; }
.forfait__liste svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: #A1A1AA; }

/* à qui l'offre s'adresse, sous son nom ; il change en fondu avec le palier */
.forfait__profil { margin: 10px 0 0; font-size: 15px; line-height: 22px; color: #71717A; }
.forfait__profil span { display: inline-block; transition: opacity 0.16s, transform 0.16s; }
.forfait__profil + .forfait__prix { margin-top: 22px; }

/* ce que Business ajoute à Pro : en bas de la liste, coche bleue ; sur Pro, la place
 * reste réservée, pour que rien ne saute quand on passe de l'un à l'autre */
.forfait__plus { transition: opacity 0.3s, transform 0.45s var(--courbe); }
.forfait__plus:not(.forfait__plus--la) { opacity: 0; transform: translateY(4px); }
.forfait__liste .forfait__plus svg { color: var(--bleu); }

/* un nom lu par les lecteurs d'écran, caché à l'œil */
.cache-visuel {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Comparer les offres : replié sous les cartes, comme le tableau de Claude */
.comparatif {
  width: var(--large);
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.comparatif__bouton {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: none;
  font: inherit;
  font-weight: 500;
  font-size: 15px;
  color: #52525B;
  cursor: pointer;
  transition: color 0.2s, background-color 0.2s;
}
.comparatif__bouton:hover { color: var(--encre); background: #F4F5F8; }
.comparatif__bouton:focus-visible { outline: 2px solid #2547FF; outline-offset: 2px; }
.comparatif__bouton svg { width: 18px; height: 18px; transition: transform 0.3s var(--courbe); }
.comparatif__bouton[aria-expanded="true"] svg { transform: rotate(180deg); }
.comparatif__corps {
  width: 100%;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--courbe);
}
.comparatif--ouvert .comparatif__corps { grid-template-rows: 1fr; }
/* « clip » et non « hidden » : un conteneur qui défile empêcherait l'en-tête du
 * tableau de rester collé en haut de l'écran */
.comparatif__corps > div { overflow: clip; min-height: 0; } /* sans min-height : 0, « clip » empêche la ligne de se replier */
.comparatif__defile {
  margin-top: 12px;
  padding: 0 28px 12px;
  border-radius: 24px;
  background: #F4F5F8;
}
.comparatif__table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 22px; }
.comparatif__table th, .comparatif__table td { padding: 14px 12px; text-align: center; border-top: 1px solid #E6E7EB; }
/* les noms des offres restent visibles sous la barre fixe pendant qu'on descend */
.comparatif__table thead th, .comparatif__table thead td {
  position: sticky;
  z-index: 1;
  top: 68px;
  padding-top: 20px;
  border-top: 0;
  background: #F4F5F8;
  box-shadow: 0 1px 0 #E6E7EB;
  font-weight: 500;
  color: var(--encre);
}
.comparatif__table tbody th { padding-left: 0; text-align: left; font-weight: 400; color: #52525B; }
.comparatif__table td { width: 17%; color: var(--encre); font-variant-numeric: tabular-nums; }
/* un module de l'app : une ligne-titre, sans filet au-dessus des autres lignes */
.comparatif__table .comparatif__groupe th {
  padding-top: 30px;
  padding-bottom: 10px;
  border-top: 0;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.005em;
  color: var(--encre);
}
.comparatif__table tbody tr:first-child.comparatif__groupe th { padding-top: 18px; }
.comparatif__detail { display: block; margin-top: 2px; font-size: 13px; line-height: 18px; color: #A1A1AA; }
.comparatif__oui { display: inline-block; width: 18px; height: 18px; vertical-align: -4px; color: var(--encre); }
.comparatif__non { color: #C4C4CC; }
.comparatif__texte { font-size: 14px; color: #52525B; }

.tarifs__bandeau {
  width: var(--large);
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 16px 16px 24px;
  border-radius: 20px;
  background: #F4F5F8;
}
.tarifs__bandeau-texte { display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: 15px; color: var(--encre); }
.tarifs__bandeau-texte svg { width: 20px; height: 20px; color: #52525B; }
.attenue { font-weight: 400; color: #A1A1AA; }

/* ── Les chiffres qui roulent (js/roule.js) ───────────────────────────── */

.roule { display: inline-flex; font-variant-numeric: tabular-nums; white-space: nowrap; }
.roule__interne { display: inline-flex; }
.roule__chiffre {
  position: relative;
  display: inline-block;
  height: 1.2em;
  overflow: hidden;
  transition: width 0.6s var(--courbe), opacity 0.45s;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%);
}
.roule__colonne {
  display: flex;
  flex-direction: column;
  transition: transform 0.75s cubic-bezier(0.25, 1.15, 0.4, 1);
}
.roule__colonne > span { display: block; height: 1.2em; line-height: 1.2em; text-align: center; }
.roule__signe { display: inline-block; height: 1.2em; line-height: 1.2em; white-space: pre; overflow: hidden; transition: width 0.6s var(--courbe), opacity 0.45s; }

@media (prefers-reduced-motion: reduce) {
  .roule__colonne, .roule__chiffre, .roule__signe, .segment__curseur, .forfait__cta,
  .forfait__profil span, .forfait__plus, .comparatif__corps, .comparatif__bouton svg { transition: none !important; }
}

@media (max-width: 880px) {
  .tarifs { padding: 88px 12px 96px; }
  .tarifs__grille { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .tarifs { padding: 64px 8px 72px; }
  .tarifs__grille { margin-top: 36px; gap: 14px; }
  .forfait { padding: 22px 18px; border-radius: 22px; }
  .forfait__haut { flex-direction: column; align-items: flex-start; gap: 14px; }
  .forfait__haut:has(> .forfait__nom:only-child) { min-height: 0; }
  .segment { width: 100%; }
  .segment button { flex: 1; padding: 0 8px; }
  .forfait__montant { font-size: 44px; }
  .comparatif__defile { padding: 0 14px 8px; border-radius: 20px; }
  .comparatif__table { font-size: 13.5px; line-height: 19px; }
  .comparatif__table th, .comparatif__table td { padding: 12px 4px; }
  .comparatif__table td { width: 19%; }
  .comparatif__table thead th, .comparatif__table thead td { top: 60px; padding-top: 14px; font-size: 13px; }
  .comparatif__table .comparatif__groupe th { padding-top: 24px; font-size: 13.5px; }
  .comparatif__texte { font-size: 12.5px; }
  .comparatif__detail { font-size: 12px; line-height: 16px; }
    .tarifs__bandeau { flex-direction: column; align-items: flex-start; padding: 18px; }
  .tarifs__bandeau-texte { flex-wrap: wrap; }
}

/* ════════════════════════════════════════════════════════════════════════
 * La fin de la page : les questions, le dernier appel, le pied de page
 *
 * D'après la fin de x.ai/bot : « FAQs » (titre à gauche, questions à droite,
 * un filet entre chaque, un « + » qui tourne en « × »), puis « Meet your first
 * Bot » (titre, deux boutons, la mascotte géante en simple trait, coupée par le
 * bas et fondue, qui suit le pointeur). Leur fond sombre devient notre ciel :
 * la carte du dernier appel reprend le dégradé du haut de page, à l'envers.
 * ════════════════════════════════════════════════════════════════════════ */

/* ── Les questions ─────────────────────────────────────────────────────── */

.questions {
  display: flex;
  justify-content: center;
  padding: 104px 12px 120px;
}
.questions__grille {
  width: var(--large);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.questions__entete {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.questions__titre {
  margin: 22px 0 0;
  font-weight: 600;
  font-size: 48px;
  line-height: 54px;
  letter-spacing: -0.035em;
  color: var(--encre);
}
.questions__liste { border-bottom: 1px solid #ECECEF; }
.question { border-top: 1px solid #ECECEF; }
.question__titre { margin: 0; }
.question__bouton {
  appearance: none;
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 500;
  font-size: 17px;
  line-height: 26px;
  letter-spacing: -0.01em;
  color: var(--encre);
  text-align: left;
  cursor: pointer;
}
.question__bouton:focus-visible { outline: 2px solid #2547FF; outline-offset: 2px; border-radius: 6px; }
.question__bouton svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  color: #A1A1AA;
  transition: transform 0.2s var(--courbe), color 0.2s;
}
.question--ouverte .question__bouton svg { transform: rotate(45deg); color: var(--encre); }
/* la réponse s'ouvre en faisant pousser sa ligne de grille, de 0 à sa hauteur */
.question__reponse {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s var(--courbe);
}
.question--ouverte .question__reponse { grid-template-rows: 1fr; }
.question__reponse > div { overflow: hidden; }
.question__reponse p {
  margin: 0;
  padding: 0 44px 24px 0;
  max-width: 52ch;
  font-size: 16px;
  line-height: 26px;
  color: #71717A;
  opacity: 0;
  transition: opacity 0.2s;
}
.question--ouverte .question__reponse p { opacity: 1; transition: opacity 0.3s 0.08s; }

/* ── Le dernier appel ──────────────────────────────────────────────────── */

.appel { padding: 0 12px 12px; }
/* sur les pages où la confiance précède le dernier appel, les cartes ne se touchent pas */
.confiance + .appel { margin-top: 120px; }
.appel__carte {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 112px;
  border-radius: 28px;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  /* le ciel du haut de page, à l'envers : la page se ferme sur lui */
  background: linear-gradient(180deg, #FAFBFF 0%, #F2F6FF 30%, #E3EDFF 62%, #CCDFFF 100%);
}
.appel__titre {
  margin: 0;
  font-weight: 600;
  font-size: 56px;
  line-height: 60px;
  letter-spacing: -0.035em;
  color: var(--encre);
}
.appel__texte {
  margin: 16px 0 0;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: -0.008em;
  color: var(--fort);
}
.appel .boutons { margin-top: 32px; }
/* Otto en géant, en simple trait d'encre très pâle : on en voit les quatre
 * cinquièmes, et le bas se fond avant le bord de la carte */
.appel__otto {
  --t: 620px;
  display: block;
  /* une marge autour du dessin : le masque rogne tout ce qui sort de la boîte,
   * et le corps respire et penche au-delà de son cercle */
  padding: 14px;
  margin: 64px 0 calc(var(--t) * -0.2);
  color: rgba(24, 24, 27, 0.16);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 56%, transparent 80%);
  mask-image: linear-gradient(180deg, #000 56%, transparent 80%);
}
.otto__trait { fill: none; stroke: currentColor; stroke-width: 1.75px; vector-effect: non-scaling-stroke; }

/* ── Le pied de page ───────────────────────────────────────────────────── */

.pied {
  width: var(--large);
  margin: 0 auto;
  padding: 72px 0 40px;
}
.pied__haut {
  display: flex;
  justify-content: space-between;
  gap: 48px;
}
.pied__marque .nav__marque svg { height: 24px; }
.pied__marque p { margin: 16px 0 0; font-size: 15px; line-height: 22px; color: #71717A; }
.pied__liens { display: flex; gap: 72px; }
.pied__liens h2 { margin: 0; font-weight: 500; font-size: 14px; line-height: 20px; color: var(--encre); }
.pied__liens ul { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.pied__liens a { font-size: 15px; line-height: 22px; color: #71717A; transition: color 0.2s; }
.pied__liens a:hover { color: var(--encre); }
.pied__bas {
  margin-top: 56px;
  padding-top: 20px;
  border-top: 1px solid #ECECEF;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 13.5px;
  line-height: 20px;
  color: #A1A1AA;
}

/* ── La fin de la page, aux autres largeurs ────────────────────────────── */

@media (max-width: 1024px) {
  .questions { padding: 88px 12px 96px; }
  .questions__titre { font-size: 42px; line-height: 48px; }
  .appel__titre { font-size: 48px; line-height: 54px; }
  .appel__otto { --t: min(620px, 72vw); }
}

@media (max-width: 880px) {
  .questions__grille { grid-template-columns: 1fr; gap: 36px; }
  .questions__entete { align-items: center; text-align: center; }
  .pied__haut { flex-direction: column; }
}

@media (max-width: 640px) {
  .questions { padding: 64px 8px 72px; }
  .questions__titre { margin-top: 18px; font-size: 32px; line-height: 38px; }
  .question__bouton { gap: 16px; padding: 18px 0; font-size: 16px; line-height: 24px; }
  .question__reponse p { padding: 0 0 20px; font-size: 15px; line-height: 23px; }
  .appel { padding: 0 8px 8px; }
  .confiance + .appel { margin-top: 72px; }
  .appel__carte { padding-top: 72px; border-radius: 22px; }
  .appel__titre { font-size: 38px; line-height: 42px; }
  .appel__texte { margin-top: 12px; font-size: 16px; line-height: 24px; }
  .appel .boutons { margin-top: 26px; }
  .appel .boutons .bouton { height: 46px; padding: 0 20px; font-size: 15px; }
  .appel__otto { --t: 94vw; margin-top: 44px; }
  .pied { padding: 56px 0 32px; }
  .pied__liens { flex-wrap: wrap; gap: 32px 48px; }
  .pied__bas { flex-direction: column; gap: 6px; margin-top: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .question__reponse, .question__reponse p, .question__bouton svg { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════════
 * Les cartes animées (js/fonctions.js)
 *
 * La retenue de x.ai/bot, relevée dans leur feuille de style : une scène de
 * 9 s qui s'efface en 0,3 s et revient en 0,52 s ; des entrées de 8 px à 0,97 ;
 * des échanges en fondu de 0,26 s, à la même place ; un curseur de 16 px
 * marqué « Toi », qui glisse en 0,5 s. Un geste à la fois, puis la scène reste
 * immobile. Les états de départ sont posés par le script : sans script, ou
 * avec moins d'animations, la carte montre son état de repos.
 * ════════════════════════════════════════════════════════════════════════ */

/* L'apparition au défilement des pages secondaires (js/scenes.js) : ce qui porte
 * [data-apparait] monte de 28 px en fondu, une fois ; --r décale les voisins d'un dixième
 * de seconde. Sans script, ou avec moins d'animations, tout est déjà là. */
.avec-js [data-apparait] { transition: opacity 0.7s var(--courbe), transform 0.9s var(--courbe); transition-delay: calc(var(--r, 0) * 0.1s); }
.avec-js [data-apparait]:not(.apparu) { opacity: 0; transform: translateY(28px); }
@media (prefers-reduced-motion: reduce) { .avec-js [data-apparait] { transition: none; } .avec-js [data-apparait]:not(.apparu) { opacity: 1; transform: none; } }

@keyframes entree { from { opacity: 0; transform: translateY(8px) scale(0.97); } }
@keyframes tourne { to { transform: rotate(360deg); } }

/* La prise : ce qui s'efface entre deux scènes */
.prise { transition: opacity 0.52s cubic-bezier(0.22, 1, 0.36, 1); }
.prise--eteinte { opacity: 0; transition: opacity 0.3s cubic-bezier(0.4, 0, 0.6, 1); }
/* un état posé d'un coup (pendant que la prise est effacée, ou hors de l'écran) */
.net, .net * { transition: none !important; }

/* Une pièce qui arrive */
.attend { opacity: 0; }
.entre { animation: entree 0.42s cubic-bezier(0.2, 0.9, 0.3, 1.15) both; }

/* Deux états à la même place : l'un s'efface, l'autre apparaît */
.echange { display: grid; }
.echange > * { grid-area: 1 / 1; transition: opacity 0.26s; }
.echange > [data-cache] { opacity: 0; pointer-events: none; }

/* Le curseur, comme ceux de x.ai : une pointe arrondie au liseré blanc, une
 * ombre d'un demi-pixel, et l'étiquette « Toi » en gris translucide */
.pointeur {
  position: absolute;
  z-index: 6;
  left: 0;
  top: 0;
  pointer-events: none;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.pointeur svg {
  display: block;
  width: 16px;
  height: 16px;
  overflow: visible;
  filter: drop-shadow(0 0.5px 1px rgba(0, 0, 0, 0.3));
  transform-origin: 2.5px 2.5px;
  transition: transform 0.12s;
}
.pointeur--clic svg { transform: scale(0.86); }
.pointeur__nom {
  position: absolute;
  left: 12px;
  top: 14px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  font-weight: 500;
  font-size: 10.5px;
  line-height: 16px;
  letter-spacing: -0.01em;
  color: var(--blanc);
  white-space: nowrap;
}
/* posé à la main dans le HTML (état de repos de la carte des annonces) */
.pointeur--pose { left: calc(50% - 2.5px); top: 52px; }

/* Ce que le curseur touche */
.mini-bouton, .outil { transition: transform 0.12s, background-color 0.26s, color 0.26s; }
.presse { transform: scale(0.96); }
.mini-bouton--bleu.survole { background: #3584EE; }

/* 1. Le stock : un article arrive devant, son statut change, sa marge s'ouvre */
.ligne.sans-marge .ligne__marge { max-width: 0; opacity: 0; }
.puce { transition: opacity 0.16s, width 0.3s var(--courbe); overflow: hidden; }
.puce--sort { opacity: 0; }

/* 2. Les annonces : l'outil travaille, puis dit ce qu'il a fait, sur sa ligne */
.outils { position: relative; }
.outil__etat { display: grid; margin-left: auto; }
.outil__etat > * {
  grid-area: 1 / 1;
  justify-self: end;
  align-self: center;
  opacity: 0;
  transition: opacity 0.26s, transform 0.3s var(--courbe);
}
.outil__attente {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1.5px solid #E4E4E7;
  border-top-color: #71717A;
  animation: tourne 1.1s linear infinite;
}
.outil__fait {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 7px;
  border-radius: 6px;
  background: #E7F6EE;
  font-weight: 500;
  font-size: 12px;
  color: #12A150;
  white-space: nowrap;
  transform: scale(0.96);
}
.outil__fait svg { width: 12px; height: 12px; }
.outil--attente .outil__attente { opacity: 1; }
.outil--fait .outil__fait { opacity: 1; transform: none; }

/* 3. Les messages : la question, l'offre, puis « Offre acceptée » à la place des boutons */
.conversation { position: relative; }
.offre__actions { margin-top: 12px; }
.offre__actions .offre__boutons { margin-top: 0; }
.offre__fait, .copilote__fait {
  justify-self: start;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 11px;
  border-radius: 8px;
  background: #E7F6EE;
  font-weight: 500;
  font-size: 13px;
  color: #12A150;
  white-space: nowrap;
}
.offre__fait svg, .copilote__fait svg { width: 13px; height: 13px; }

/* 4. Otto : la demande, la proposition, les prix qui baissent un par un */
.copilote { position: relative; }
.copilote__actions { padding-top: 4px; transition: opacity 0.3s, transform 0.4s var(--courbe); }
.copilote__actions .copilote__boutons { padding-top: 0; }
.copilote__actions.attend-doux { opacity: 0; transform: translateY(4px); }
.copilote__ligne s { position: relative; text-decoration: none; transition: color 0.3s; }
.copilote__ligne s::after {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  top: 52%;
  height: 1.5px;
  background: currentColor;
  transform-origin: left;
  transition: transform 0.35s var(--courbe);
}
.copilote__ligne b { max-width: 64px; transition: max-width 0.45s var(--courbe), opacity 0.3s, margin 0.45s var(--courbe); }
.anime .copilote__ligne:not(.baisse) s { color: var(--encre); }
.anime .copilote__ligne:not(.baisse) s::after { transform: scaleX(0); }
.anime .copilote__ligne:not(.baisse) b { max-width: 0; min-width: 0; margin-left: -10px; opacity: 0; }
.copilote__ligne b .roule__chiffre { height: 1.25em; }

/* 5. Les ventes : les barres montent, le curseur passe sur deux jours */
.barre { transition: height 1s var(--courbe); transition-delay: calc(var(--i, 0) * 60ms); }
.barres--vides .barre { height: 0 !important; transition-duration: 0s; transition-delay: 0s; }
.barre::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, #4190F9 0%, #7DB3FB 70%, #B7D5FD 100%); opacity: 0; transition: opacity 0.45s; }
.barre--active::after { opacity: 1; }
.anime .barre--active { background: linear-gradient(180deg, #E1E7F4, #EDF0F6); }
.barres__bulle {
  position: absolute;
  z-index: 2;
  transform: translateX(-50%);
  padding: 5px 10px;
  border-radius: 8px;
  background: #4190F9;
  font-weight: 600;
  font-size: 12.5px;
  color: var(--blanc);
  white-space: nowrap;
  opacity: 0;
  transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1), bottom 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s;
}
.barres--pretes .barres__bulle { opacity: 1; }
.barres__montant .roule__chiffre, .barres__montant .roule__signe { height: 1.25em; line-height: 1.25em; }
.chiffre__valeur .roule { vertical-align: top; }

@media (prefers-reduced-motion: reduce) {
  .outil__attente { animation: none; }
  .prise, .pointeur, .entre { transition: none; animation: none; }
}

/* ════════════════════════════════════════════════════════════════════════
 * L'accueil, version C (Figma 5514:2171, validée par Evan le 01/10, d'après
 * substy.ai) : la page passe sur un fond sombre ; le haut de page, puis une seule
 * feuille claire (les fonctionnalités, Klintt Track, les étapes, la confiance, les
 * tarifs, les questions, le dernier appel), d'un bord à l'autre de l'écran ; entre
 * les deux, la bande sombre de Substy : badges, plateformes, filet, chiffres. Le
 * pied de page est sombre.
 * La barre du haut passe au sombre au-dessus de ce qui porte data-nav-sombre.
 * Les autres pages gardent leur fond blanc.
 * ════════════════════════════════════════════════════════════════════════ */

:root:has(body.accueil) { background: #08090A; }
body.accueil { background: #08090A; --cadre: 12px; }
.accueil .track { background: var(--blanc); }
.feuille { margin: 0 12px 12px; border-radius: 28px; background: var(--blanc); }
/* d'un bord à l'autre (Evan, 01/10) : plus de cadre sombre, ni sur les côtés ni ENTRE les blocs clairs
   (« j'ai pas dit que je voulais des écarts entre toutes les sections »). Comme chez Substy, les coins
   arrondis ne marquent que la frontière du clair et du sombre : le haut de page touche le haut de l'écran
   et s'arrondit en bas, sur la bande sombre ; puis une seule feuille claire, des fonctionnalités au
   dernier appel, arrondie en haut et en bas, posée entre la bande sombre et le pied de page. Dedans,
   les sections se suivent sans écart. */
.accueil .heros { padding: 0 0 var(--cadre); }
.accueil .heros__carte { padding-top: calc(30px + var(--cadre)); border-radius: 0 0 28px 28px; }
.accueil .fonctions, .accueil .demarrer, .accueil .appel { padding: 0; }
.accueil .fonctions__carte { border-radius: 28px 28px 0 0; }
.accueil .demarrer__carte { border-radius: 0; }
.accueil .feuille { margin: 0; border-radius: 0; }
.accueil .appel__carte { border-radius: 0 0 28px 28px; }

/* le pied de page, sur le sombre */
.accueil .pied__marque path[fill="#0A0A0A"] { fill: #F4F4F5; }
.accueil .pied__marque p { color: #8B8B94; }
.accueil .pied__liens h2 { color: #E4E4E7; }
.accueil .pied__liens a { color: #8B8B94; }
.accueil .pied__liens a:hover { color: #F4F4F5; }
.accueil .pied__bas { border-top-color: rgba(255, 255, 255, 0.08); color: #6B6B73; }

/* ── La bande sombre ─────────────────────────────────────────────────────
 * Cotes relevées sur substy.ai (1440) et sur la maquette C : badges à 40 px
 * sous la carte, légende 47 px plus bas, logos, filet 56 px plus bas, petit
 * titre 20 px sous le filet, chiffres 64 px plus bas, 100 px avant la carte
 * suivante. */
.preuves { padding: 28px 0 100px; }

/* les badges : pilules sombres, filet blanc à 8 %, icône bleue au trait fin */
.badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0; padding: 0 18px; list-style: none; }
.badge { display: inline-flex; align-items: center; gap: 8px; height: 37px; padding: 0 14px; border-radius: 999px; background: rgba(16, 19, 23, 0.65); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); font-size: 12px; line-height: 16px; color: #E7EAF0; white-space: nowrap; }
.badge > svg { width: 17px; height: 17px; flex: none; color: #638CFF; }
.badge--drapeaux { height: 42px; }
.drapeaux { position: relative; flex: none; width: 85px; height: 22px; }
.drapeaux svg { position: absolute; top: 2.5px; width: 25px; height: 17px; border-radius: 3px; overflow: hidden; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4); }
.drapeaux svg:nth-child(1) { left: 1.5px; transform: rotate(-9deg); }
.drapeaux svg:nth-child(2) { left: 20.5px; transform: rotate(-3deg); }
.drapeaux svg:nth-child(3) { left: 39.5px; transform: rotate(3deg); }
.drapeaux svg:nth-child(4) { left: 58.5px; transform: rotate(9deg); }

/* les plateformes : Vinted, puis celles qui arrivent, en gris, avec l'état « Bientôt »
   de l'app (l'état gris du thème sombre : fond #232323, encre #9F9F9F, choisi par Evan) */
.plateformes__legende { margin: 47px 0 0; padding: 0 18px; text-align: center; font-size: 11px; line-height: 15px; letter-spacing: -0.16px; color: #737373; }
.plateformes { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 20px 64px; margin: 21px 0 0; padding: 0 18px; list-style: none; }
.plateforme { display: flex; flex-direction: column; align-items: center; }
.plateforme__logo { display: flex; align-items: center; height: 44px; }
.plateforme__logo img { display: block; }
.plateforme--bientot .plateforme__logo { opacity: 0.45; }
.etat { display: inline-flex; align-items: center; height: 22px; margin-top: 2px; padding: 0 8px; border-radius: 5.5px; background: #232323; font-weight: 500; font-size: 12px; line-height: 15px; color: #9F9F9F; }

/* les chiffres : pas de carte, trois colonnes séparées d'un filet, étiquettes penchées */
.chiffres { width: min(1120px, calc(100% - 48px)); margin: 56px auto 0; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.chiffres__titre { margin: 0; text-align: center; font-weight: 500; font-size: 10px; line-height: 13px; letter-spacing: 1px; text-transform: uppercase; color: #92959D; }
.chiffres__liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 64px 0 0; padding: 0; list-style: none; }
.chiffres__liste li { display: flex; flex-direction: column; align-items: center; padding: 1px 24px 0; text-align: center; }
.chiffres__liste li + li { box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.047); }
.chiffres__etiquette { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border-radius: 999px; background: #191A1D; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.043); font-weight: 500; font-size: 10px; line-height: 14px; color: #BDC0C9; transform: rotate(-4deg); }
.chiffres__liste li:nth-child(2) .chiffres__etiquette { transform: rotate(3deg); }
.chiffres__etiquette svg { width: 15px; height: 15px; flex: none; color: #8796DA; }
.chiffres__point { position: absolute; top: 1px; right: 0; width: 7px; height: 7px; border-radius: 50%; background: #36D992; }
.chiffres__nombre { margin-top: 13px; font-weight: 400; font-size: 86.4px; line-height: 90.72px; letter-spacing: -4px; color: #EEEEF0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chiffres__legende { margin-top: 18px; font-size: 17px; line-height: 25.5px; letter-spacing: -0.3px; color: #B3B5BD; }

/* la même grammaire en carte sombre, sur une page claire (la page d'Otto) */
.preuves--carte { margin: 0 12px 12px; padding: 64px 0 88px; border-radius: 28px; background: #08090A; }
.preuves--carte .chiffres { margin-top: 0; padding-top: 0; border-top: 0; }

@media (max-width: 1180px) {
  .chiffres__nombre { font-size: 72px; line-height: 78px; letter-spacing: -3.2px; }
}
@media (max-width: 880px) {
  .chiffres__liste { grid-template-columns: minmax(0, 1fr); margin-top: 28px; }
  .chiffres__liste li { padding: 26px 0; }
  .chiffres__liste li + li { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
}
@media (max-width: 640px) {
  /* le cadre des cartes, sur téléphone, comme le haut de page et les fonctionnalités */
  body.accueil { --cadre: 8px; }
  .accueil .heros__carte { padding-top: calc(18px + var(--cadre)); border-radius: 0 0 22px 22px; }
  .accueil .fonctions__carte { border-radius: 22px 22px 0 0; }
  .accueil .appel__carte { border-radius: 0 0 22px 22px; }
  .preuves { padding: 20px 0 64px; }
  /* deux lignes de deux badges à 390 : texte, marges et drapeaux un peu resserrés */
  .badges { gap: 8px 6px; padding: 0 12px; }
  .badge { gap: 7px; padding: 0 11px; font-size: 11.5px; }
  .drapeaux { width: 72px; }
  .drapeaux svg:nth-child(2) { left: 16.5px; }
  .drapeaux svg:nth-child(3) { left: 31.5px; }
  .drapeaux svg:nth-child(4) { left: 46.5px; }
  .plateformes { gap: 18px 36px; }
  .plateforme__logo img { transform: scale(0.86); }
  .chiffres { width: calc(100% - 32px); margin-top: 44px; }
  .chiffres__nombre { font-size: 60px; line-height: 66px; letter-spacing: -2.6px; }
  .chiffres__legende { font-size: 16px; line-height: 24px; }
  .preuves--carte { margin: 0 8px 8px; padding: 44px 0 40px; border-radius: 22px; }
}