/* ============================================================
   COCKPIT — Design system
   Palette zinc + accent unique blue-700. Inter / Inter Tight / JetBrains Mono.
   ============================================================ */

:root {
  /* Neutres zinc */
  --white:    #ffffff;
  --zinc-50:  #fafafa;
  --zinc-100: #f4f4f5;
  --zinc-200: #e4e4e7;
  --zinc-300: #d4d4d8;
  --zinc-400: #a1a1aa;
  --zinc-500: #71717a;
  --zinc-600: #52525b;
  --zinc-700: #3f3f46;
  --zinc-800: #27272a;
  --zinc-900: #18181b;
  --zinc-950: #09090b;

  /* Accent : noir & blanc d'abord. Le bleu reste un signal IA rare. */
  --accent:       #18181b;
  --accent-hover: #000000;
  --accent-soft:  #f4f4f5;
  --accent-ring:  rgba(9, 9, 11, 0.12);
  --ai:           #1d4ed8;
  --ai-soft:      #eff6ff;

  /* Sémantiques (parcimonie) */
  --success: #15803d; --success-bg: #f0fdf4;
  --error:   #b91c1c; --error-bg:   #fef2f2;
  --warning: #92400e; --warning-bg: #fffbeb;

  /* Surfaces */
  --bg:        var(--white);
  --bg-soft:   var(--zinc-50);
  --border:    var(--zinc-200);
  --border-soft: #ededee;
  --text:      var(--zinc-950);
  --text-soft: var(--zinc-600);
  --text-mute: var(--zinc-500);

  /* Radius */
  --r-badge: 6px;
  --r-btn:   8px;
  --r-card:  12px;
  --r-modal: 16px;

  /* Shadows (quasi inexistantes) */
  --shadow-xs: 0 1px 2px rgba(9, 9, 11, 0.04);
  --shadow-sm: 0 1px 2px rgba(9, 9, 11, 0.05), 0 1px 1px rgba(9, 9, 11, 0.03);
  --shadow-md: 0 4px 12px rgba(9, 9, 11, 0.06), 0 1px 2px rgba(9, 9, 11, 0.04);
  --shadow-lg: 0 12px 40px rgba(9, 9, 11, 0.10), 0 2px 8px rgba(9, 9, 11, 0.05);

  /* Type */
  --font-text: "Inter", system-ui, -apple-system, sans-serif;
  --font-display: "Inter Tight", "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Layout */
  --maxw: 1160px;
  --nav-h: 60px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  margin: 0;
  font-family: var(--font-text);
  font-feature-settings: "cv11", "ss01";
  letter-spacing: -0.011em;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--zinc-950);
  text-wrap: balance;
}

p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

.mono { font-family: var(--font-mono); font-feature-settings: "tnum"; }

/* ---------- Layout helpers ---------- */
/* 🔴 12/09 (Adam : « ne colle pas autant les trucs sur le bord des pages ») — MARGES
   LATÉRALES RESPIRABLES. 24px fixes : sur un grand écran la largeur max (1160) centre le
   contenu et personne ne le remarque, mais entre ~1000 et ~1200px de large — la fenêtre la
   plus courante — le contenu venait à 24px du bord, donc collé. En vw, la marge grandit avec
   la fenêtre jusqu'à 64px, puis la largeur max prend le relais. */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(24px, 5vw, 64px); }
.section { padding: 96px 0; }
.section-sm { padding: 64px 0; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--accent);
  text-transform: none;
}
.eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 2px;
  background: var(--accent);
}

.section-head { max-width: 640px; margin-bottom: 52px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 {
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.08;
  margin: 14px 0 0;
}
.section-head p {
  margin-top: 16px;
  font-size: 17px;
  color: var(--text-soft);
  line-height: 1.55;
  text-wrap: pretty;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px;
  border-radius: var(--r-btn);
  font-size: 14.5px; font-weight: 550;
  border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(0.5px); }
.btn-primary {
  background: var(--accent); color: #fff;
  box-shadow: var(--shadow-xs);
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost {
  background: transparent; color: var(--zinc-800);
  border-color: var(--border);
}
.btn-ghost:hover { background: var(--zinc-50); border-color: var(--zinc-300); }
.btn-dark {
  background: var(--zinc-950); color: #fff;
}
.btn-dark:hover { background: var(--zinc-800); }
.btn-lg { height: 46px; padding: 0 22px; font-size: 15.5px; }
.btn-block { width: 100%; }
.btn .arr { transition: transform .15s ease; }
.btn:hover .arr { transform: translateX(2px); }

/* ---------- Badges / pills ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 9px;
  border-radius: var(--r-badge);
  font-size: 12px; font-weight: 550;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--text-soft);
}
.badge.success { color: var(--success); background: var(--success-bg); border-color: #bbf7d0; }
.badge.error   { color: var(--error);   background: var(--error-bg);   border-color: #fecaca; }
.badge.warning { color: var(--warning); background: var(--warning-bg); border-color: #fde68a; }
.badge.accent  { color: var(--accent);  background: var(--accent-soft); border-color: var(--border); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ============================================================
   NAVBAR
   ============================================================ */
.announce {
  background: var(--zinc-950); color: var(--zinc-100);
  font-size: 13px; text-align: center;
  min-height: 38px; padding: 6px 14px; display: flex; align-items: center; justify-content: center;
  gap: 8px; flex-wrap: wrap; letter-spacing: -0.005em;
}
@media (max-width: 560px) {
  .announce { font-size: 11.5px; gap: 6px; padding: 7px 12px; line-height: 1.35; }
  .announce .pip { display: none; }
}
.announce strong { color: #fff; font-weight: 600; }
/* 🔴 14/08 (Adam : « le -30 % on le voit à peine ») — INVERSION DES POIDS. « Préparez votre Q4 »
   était en blanc gras, et « -30 % » en gris clair : le chiffre qui décide était le moins lisible
   des deux. Il passe devant, en pastille blanche sur le noir du bandeau — c'est le contraste le
   plus fort disponible sur cette barre, et il ne dépend d'aucune couleur d'accent. */
/* 🔴 14/08 (Adam : « le -30 %, pas de carré autour ») — la pastille blanche découpait un bloc dans
   le bandeau et cassait la ligne. Le contraste vient maintenant de la graisse et du blanc pur, pas
   d'un fond : le chiffre reste l'élément le plus fort de la phrase sans être encadré. */
.announce .ann-pct { color: #fff; font-weight: 700; font-size: 14px; letter-spacing: -.01em;
  margin-right: 2px; font-feature-settings: "tnum"; white-space: nowrap; }
.announce a { color: #fff; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(255,255,255,.4); }
.announce .pip { color: var(--zinc-500); }

/* 🔴 12/09 (Adam : « je t'ai dit blanc un peu grisé, pas noir ») — RETOUR AU CLAIR.
   J'étais parti au noir sur une demande précédente ; c'est bien la pilule flottante qu'il
   fallait garder, pas sa couleur. En clair, elle se distingue par sa FORME et son ombre — pas
   par un aplat sombre qui écrase le haut de la page et masque la constellation derrière. */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: transparent; border: 0;
  padding: 14px clamp(24px, 5vw, 64px) 0;
  transition: padding .2s ease;
}
.nav-inner {
  height: var(--nav-h);
  display: flex; align-items: center; gap: 28px;
  max-width: var(--maxw); margin: 0 auto;
  padding: 0 12px 0 18px;
  background: rgba(250,250,250,0.82);
  backdrop-filter: saturate(180%) blur(16px);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 4px 18px rgba(9,9,11,.07);
  transition: box-shadow .2s ease, background .2s ease;
}
.nav.scrolled { padding-top: 8px; }
.nav.scrolled .nav-inner { background: rgba(250,250,250,0.94); box-shadow: 0 8px 26px rgba(9,9,11,.11); }
@media (max-width:560px){ .nav{padding:8px 14px 0} .nav-inner{border-radius:13px} }
.nav .logo-word { color: var(--zinc-950); }
.nav .nav-link { color: var(--zinc-600); }
.nav .nav-link:hover { color: var(--zinc-950); }
/* Sur fond clair, le bouton principal redevient noir : c'est lui le point de contraste. */
.nav .btn-primary { background: var(--zinc-950); color: #fff; }
.nav .btn-primary:hover { background: #000; }
.nav .btn-ghost { color: var(--zinc-800); border-color: var(--border); background: transparent; }
.nav .btn-ghost:hover { background: #fff; border-color: var(--zinc-300); color: var(--zinc-950); }

/* (l'ancienne définition de .nav-inner vivait ici ; elle écrasait la barre flottante
   définie plus haut — supprimée le 12/09.) */
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-link {
  font-size: 14px; font-weight: 500; color: var(--zinc-600);
  padding: 7px 11px; border-radius: 7px;
  transition: color .15s ease, background .15s ease;
}
.nav-link:hover { color: var(--zinc-950); background: var(--zinc-100); }
.nav-cta { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.nav-burger { display: none; }

/* Logo */
.logo { display: inline-flex; align-items: center; gap: 9px; }
.logo-mark {
  width: 28px; height: 28px; flex: none;
  display: grid; place-items: center;
  background: var(--zinc-950); border-radius: 8px;
  color: #fff;
}
.logo-mark img { width: 64%; height: 64%; object-fit: contain; display: block; }
.logo-word {
  font-family: var(--font-display);
  font-weight: 600; font-size: 18px; letter-spacing: -0.03em;
  color: var(--zinc-950);
}

/* ============================================================
   HERO
   ============================================================ */
/* 🔴 14/08 (Adam, 2e passe : « elle est toujours trop haut, le ratio n'est pas bon, et
   l'inscription est trop collée à la phrase ») — VRAI CENTRAGE VERTICAL.
   Ajouter du padding en haut ne centrait rien : ça poussait le bloc vers le bas sans jamais
   l'équilibrer, et le résultat changeait à chaque taille d'écran. On donne au hero la hauteur
   de l'écran moins la nav et le bandeau d'offre (118px), et on centre son contenu en flex :
   l'espace restant se répartit alors tout seul, au-dessus ET en dessous, sur n'importe quel
   écran. La respiration entre la phrase et l'inscription passe de 26 à 54px. */
/* 🔴 12/09 (Adam : « t'as rien changé là ») — MESURÉ : le hero commençait à 74px du haut.
   Depuis que la nav est une pilule flottante, elle occupe sa place dans le flux (14px de marge
   + 60px de barre). Résultat : une bande blanche vide en haut de page, et le fond étoilé qui ne
   démarrait qu'EN DESSOUS de la nav — donc invisible là où Adam regardait.
   On remonte le hero de la hauteur exacte de la nav : la constellation passe désormais DERRIÈRE
   la pilule et remplit le haut de l'écran. Le padding compense pour que rien ne passe dessous ;
   le script de calage du titre remesure de toute façon la position réelle. */
.hero {
  padding: calc(var(--nav-h) + 14px) 0 0;
  margin-top: calc(-1 * (var(--nav-h) + 14px));
  position: relative; overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  /* 🔴 12/09 (Adam : « remets en blanc, un tout petit peu grisé ») — le voile sombre du haut
     passe de 0,05 à 0,028 et le fond gagne un gris très léger : assez pour que la page ne soit
     pas d'un blanc plat, assez discret pour que la constellation reste le motif dominant. */
  background:
    linear-gradient(to bottom, #fafafa 0%, #ffffff 62%),
    radial-gradient(60% 46% at 50% 0%, rgba(9,9,11,0.028), transparent 72%);
  pointer-events: none;
}
/* 🔴 12/09 — Le hero n'a plus aucun fond animé : ni constellation, ni courbe. Essayées toutes
   les deux, retirées toutes les deux. Le dégradé de .hero::before suffit. */

.hero-grid {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(to right, rgba(9,9,11,0.032) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(9,9,11,0.032) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(80% 60% at 50% 0%, #000 30%, transparent 75%);
          mask-image: radial-gradient(80% 60% at 50% 0%, #000 30%, transparent 75%);
}
.hero-inner {
  position: relative; z-index: 1; text-align: center;
  min-height: calc(100vh - 118px);
  /* 🔴 12/09 (3e passe) — `justify-content:center` rendait la position du titre IMPRÉVISIBLE :
     le flex distribuait l'espace restant au-dessus et en dessous, donc la hauteur exacte du titre
     dépendait de tout ce qui le suit. Mesuré : 73px d'écart inexpliqué à 1080px de haut.
     En `flex-start`, le titre est exactement à `haut du hero + padding` — on peut donc le placer
     au pixel, à n'importe quelle hauteur d'écran. */
  display: flex; flex-direction: column; justify-content: flex-start;
  /* 🔴 12/09 (Adam : « descends la phrase principale vraiment au centre de l'écran ») —
     Le bloc est centré DANS SON ENSEMBLE, mais il est lourd du bas : sous le titre viennent
     la carte d'inscription, « Déjà un compte ? » et la rangée « Propulsé par ». Le centre de
     gravité étant bas, le titre remonte — d'où l'impression qu'il n'est pas centré.
     Une marge haute déplace la zone de centrage vers le bas de la MOITIÉ de ce qu'on ajoute
     (le flex répartit l'espace restant des deux côtés) : ~215px ici ≈ 85px de descente réelle.
     En vh pour que ça suive la hauteur d'écran ; les deux règles ci-dessous neutralisent
     l'effet sur les écrans courts et sur mobile, où il n'y a pas d'espace à distribuer. */
  /* 99px = bandeau + nav ; 32px = demi-hauteur du titre. `min()` prend la plus petite des deux :
     soit le centrage parfait (50vh - 131), soit le plus bas possible SANS pousser la rangée
     « Propulsé par » hors de l'écran (100vh - 551). En dessous de ~840px de haut, centrer
     parfaitement obligerait à couper le bas — la 2e borne prend alors le relais. */
  padding-top: clamp(44px, min(calc(50vh - 148px), calc(100vh - 551px)), 560px);
  padding-bottom: 48px;
}
/* 🔴 12/09 (2e passe, Adam : « descends encore plus ») — SEUIL RAMENE A 620px. Mon seuil de
   820 neutralisait tout le recentrage sur les fenetres de hauteur moyenne : sur un portable dont
   la fenetre fait moins de 820px de haut, le titre restait exactement la ou il etait. C'est le
   cas le plus courant, donc le reglage ne servait presque personne. En dessous de 620px il n'y a
   physiquement plus d'espace a distribuer, la on garde la version compacte. */
@media (max-height: 620px) { .hero-inner { min-height: 0; padding-top: 56px; padding-bottom: 36px; } }
@media (max-width: 720px)  { .hero-inner { min-height: 0; padding-top: 52px; padding-bottom: 36px; } }

.hero h1 {
  font-size: clamp(36px, 6.2vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  /* 🔴 12/09 — l'eyebrow au-dessus a été retirée : sa marge de 46px laissait un trou et
     poussait le titre trop haut dans un hero déjà en pleine hauteur. Le titre et la carte
     d'inscription forment maintenant un seul bloc, centré par le flex de .hero-inner. */
  max-width: 880px; margin: 0 auto;
}
.hero h1 .grad { color: var(--zinc-400); }
/* 🔴 14/08 (Adam, choix final — variante 16) — LE MOT « VINTED » EN TEXTE, DANS LEUR VERT.
   Le logotype vectoriel a été essayé puis retiré : il sortait « Vinted » du texte du h1, or c'est
   l'élément le plus lourd de la page pour la requête « cockpit vinted », qu'on travaille depuis
   une semaine. Ici le mot reste du VRAI texte — Google le lit — dans Inter (la police que
   vinted.fr sert réellement : V_Inter_Semibold_580, dont 600 est le plus proche disponible) et
   dans #007782, leur vert relevé dans le fichier de leur logo.
   La phrase entière passe en noir : le gris disparaît, donc seul le mot porte la couleur. */
.hero h1 { color: var(--zinc-950, #09090b); }
.hero h1 .vtd { font-family: Inter, var(--font-text), system-ui, sans-serif; font-weight: 600;
                letter-spacing: -0.022em; color: #007782; }
.hero-sub {
  max-width: 600px; margin: 22px auto 0;
  font-size: clamp(16px, 2vw, 19px);
  color: var(--text-soft); line-height: 1.55; text-wrap: pretty;
}
.hero-cta { margin-top: 56px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero-proof {
  margin-top: 40px;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  font-size: 13.5px; color: var(--text-mute);
}
.avatars { display: flex; }
.avatars span {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid #fff; margin-left: -8px;
  background: var(--zinc-300);
  display: grid; place-items: center; font-size: 10px; font-weight: 600; color: var(--zinc-700);
}
.avatars span:first-child { margin-left: 0; }
.stars { color: var(--accent); letter-spacing: 1px; font-size: 12px; }

/* 🔴 14/08 (Adam : « des photos de profil au lieu des avatars Google ») — AVATARS REDESSINÉS.
   Les six couleurs étaient EXACTEMENT celles de Google (#db4437, #4285f4, #0f9d58…) : la pastille
   ne disait pas « un vendeur », elle disait « un compte Google ». D'où l'impression de générique.
   Elles sont remplacées par des dégradés propres à Cockpit, une typographie plus affirmée et un
   léger relief. On garde les initiales : mettre des visages laisserait entendre que ce sont des
   clients identifiables, ce qui n'est pas le cas. */
.gav { color: #fff; font-weight: 700; font-family: "Inter Tight", var(--font-text);
       text-transform: uppercase; letter-spacing: -.02em;
       box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 1px 3px rgba(9,9,11,.18); }
.avatars .gav, .test-av.gav, .acc-user .gav, .acc-avatar-row .gav { color: #fff; }
.avatars .gav { border: 2px solid #fff; }
.gav.g-red,    .g-red    { background: linear-gradient(145deg, #f97362, #d6402c); }
.gav.g-blue,   .g-blue   { background: linear-gradient(145deg, #5b93f7, #2b5fd0); }
.gav.g-green,  .g-green  { background: linear-gradient(145deg, #34c98a, #0d8f5d); }
.gav.g-amber,  .g-amber  { background: linear-gradient(145deg, #fbbf5c, #d98613); }
.gav.g-purple, .g-purple { background: linear-gradient(145deg, #a97af0, #7238cc); }
.gav.g-teal,   .g-teal   { background: linear-gradient(145deg, #3ec8bd, #0b7d74); }

.hero-shot {
  position: relative; z-index: 1;
  max-width: 1040px; margin: 72px auto 0;
  padding: 0 24px;
}

/* ⭐ Transition premium hero → vidéo : quand le mockup entre à l'écran (au scroll), il se lève,
   se redresse (léger 3D) et grandit en douceur, avec une ombre profonde. Une seule passe,
   fluide, GPU, tous navigateurs. Surcharge le fondu générique .reveal pour le hero-shot. */
.hero-shot .app {
  box-shadow: 0 44px 90px -46px rgba(9,9,11,.40), 0 14px 34px -20px rgba(9,9,11,.22);
  border-radius: 16px;
}
.hero-shot { transform-origin: 50% 100%; }
.hero-shot.reveal.in { animation: heroShotRise 1.15s cubic-bezier(.33,1,.68,1) both; }
@keyframes heroShotRise {
  from { opacity: 0; transform: perspective(1500px) rotateX(9deg) scale(.94) translateY(64px); }
  to   { opacity: 1; transform: perspective(1500px) rotateX(0)    scale(1)   translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-shot.reveal.in { animation: none; opacity: 1; transform: none; }
}

/* ============================================================
   PRODUCT MOCK (faux dashboard)
   ============================================================ */
.app {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--white);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.app-bar {
  display: flex; align-items: center; gap: 12px;
  height: 44px; padding: 0 14px;
  border-bottom: 1px solid var(--border);
  background: var(--zinc-50);
}
.traffic { display: flex; gap: 7px; }
.traffic i { width: 11px; height: 11px; border-radius: 50%; background: var(--zinc-300); }
.app-url {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--zinc-500);
  background: #fff; border: 1px solid var(--border); border-radius: 6px;
  padding: 4px 10px; flex: 1; max-width: 320px; margin: 0 auto;
  display: flex; align-items: center; gap: 6px;
}
.app-body { display: flex; min-height: 460px; }
.app-side {
  width: 196px; flex: none; border-right: 1px solid var(--zinc-800);
  padding: 12px 10px; background: var(--zinc-950);
}
.app-sync { background: #fff; color: var(--zinc-950); font-size: 12px; font-weight: 600; text-align: center; padding: 9px; border-radius: 8px; margin-bottom: 10px; }
.app-side .grp { font-size: 10.5px; font-weight: 600; color: var(--zinc-600); text-transform: uppercase; letter-spacing: 0.04em; padding: 10px 8px 4px; }
.app-nav {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 9px; border-radius: 7px;
  font-size: 12.5px; color: var(--zinc-400); font-weight: 500;
}
.app-nav .ic { width: 15px; height: 15px; color: var(--zinc-500); flex: none; }
.app-nav.active { background: var(--zinc-800); color: #fff; }
.app-nav.active .ic { color: #fff; }
.app-nav .count { margin-left: auto; font-size: 10.5px; color: var(--zinc-500); font-family: var(--font-mono); }
.app-nav.active .count { color: var(--zinc-300); }

.app-main { flex: 1; padding: 16px 18px; background: var(--bg-soft); min-width: 0; }
.app-tools { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.app-btn { height: 30px; padding: 0 13px; border-radius: 8px; font-size: 11.5px; font-weight: 550; border: 1px solid var(--border); background: #fff; color: var(--zinc-700); }
.app-btn.dark { background: var(--zinc-950); color: #fff; border-color: var(--zinc-950); }
.app-backup { margin-left: auto; font-size: 10.5px; color: var(--zinc-400); }
.app-h {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px;
}
.app-h h3 { font-size: 16px; }
.app-h .sub { font-size: 12px; color: var(--zinc-500); margin-top: 2px; }

.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.kpi { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 12px 13px; }
.kpi .lbl { font-size: 11px; color: var(--zinc-500); font-weight: 500; }
.kpi .val { font-family: var(--font-mono); font-size: 19px; font-weight: 600; margin-top: 6px; letter-spacing: -0.02em; }
.kpi .delta { font-size: 11px; font-weight: 600; margin-top: 3px; }
.kpi .delta.up { color: var(--success); }
.kpi .delta.down { color: var(--error); }

.tbl { background: #fff; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.tbl-row {
  display: grid; grid-template-columns: 1.9fr 0.9fr 0.6fr 0.6fr 0.8fr 0.9fr;
  align-items: center; gap: 8px;
  padding: 9px 13px; font-size: 12px;
  border-bottom: 1px solid var(--border-soft);
}
.tbl-row:last-child { border-bottom: none; }
.tbl-head { background: var(--zinc-50); color: var(--zinc-500); font-weight: 600; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.03em; }
.tbl-item { display: flex; align-items: center; gap: 9px; min-width: 0; }
.tbl-thumb { width: 26px; height: 26px; border-radius: 6px; background: linear-gradient(135deg, var(--zinc-200), var(--zinc-100)); flex: none; border: 1px solid var(--border); }
.tbl-item .nm { font-weight: 550; color: var(--zinc-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbl-item .sku { font-family: var(--font-mono); font-size: 10px; color: var(--zinc-400); }
.tbl .num { font-family: var(--font-mono); font-feature-settings: "tnum"; }
.tbl .marge { font-weight: 600; }
.tbl .marge.up { color: var(--success); }
.tbl .marge.down { color: var(--error); }

/* Annotation callouts on the shot */
.anno {
  position: absolute; z-index: 4;
  background: var(--zinc-950); color: #fff;
  font-size: 11.5px; font-weight: 500; line-height: 1.3;
  padding: 7px 10px; border-radius: 8px;
  box-shadow: var(--shadow-md);
  max-width: 168px;
}
.anno b { font-weight: 600; }
.anno::after {
  content: ""; position: absolute; width: 8px; height: 8px;
  background: var(--zinc-950); transform: rotate(45deg);
}

/* ============================================================
   LOGOS / INTEGRATIONS
   ============================================================ */
.logos { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg-soft); }
.logos-inner { padding: 30px 0; }
.logos-cap { text-align: center; font-size: 12.5px; color: var(--zinc-500); margin-bottom: 20px; font-weight: 500; }
.logos-row { display: flex; align-items: center; justify-content: center; gap: 44px; flex-wrap: wrap; }
.logo-chip { display: inline-flex; align-items: center; gap: 8px; color: var(--zinc-400); font-weight: 600; font-size: 15px; letter-spacing: -0.01em; transition: color .15s; }
.logo-chip:hover { color: var(--zinc-700); }
.logo-chip svg { opacity: .85; }

/* ============================================================
   PROBLÈME (avant / après)
   ============================================================ */
.prob-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.prob-card {
  border: 1px solid var(--border); border-radius: var(--r-card);
  padding: 24px; background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.prob-card:hover { border-color: var(--zinc-300); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.prob-card .quote {
  font-size: 16px; font-weight: 500; color: var(--zinc-800);
  line-height: 1.45; letter-spacing: -0.015em;
}
.prob-card .quote::before { content: "\201C"; color: var(--zinc-300); font-size: 24px; margin-right: 1px; font-family: Georgia, serif; }
.prob-split { display: flex; gap: 0; margin-top: 18px; border-top: 1px solid var(--border-soft); padding-top: 16px; }
.prob-split > div { flex: 1; }
.prob-split .l { padding-right: 16px; border-right: 1px solid var(--border-soft); }
.prob-split .r { padding-left: 16px; }
.prob-split .tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
.prob-split .l .tag { color: var(--error); }
.prob-split .r .tag { color: var(--success); }
.prob-split .txt { font-size: 13px; color: var(--zinc-600); line-height: 1.4; }
.prob-split .r .txt { color: var(--zinc-800); font-weight: 500; }

/* ---------- Avant / après (problème repositionné, visuel) ---------- */
.ba-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ba-col { border-radius: var(--r-card); padding: 26px; border: 1px solid var(--border); }
.ba-col.before { background: #fff; }
.ba-col.after { background: var(--zinc-950); border-color: var(--zinc-950); }
.ba-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--border-soft); }
.ba-col.after .ba-h { border-bottom-color: var(--zinc-800); }
.ba-tag { font-size: 13px; font-weight: 600; color: #fff; background: var(--zinc-950); padding: 5px 11px; border-radius: 7px; white-space: nowrap; }
.ba-tag.red { color: var(--error); background: var(--error-bg); border: 1px solid #fecaca; }
.ba-col.after .ba-tag { background: #fff; color: var(--zinc-950); }
.ba-time { font-size: 12px; color: var(--zinc-400); }
.ba-col.after .ba-time { color: var(--zinc-500); }
.ba-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ba-list li { display: flex; gap: 11px; font-size: 14px; line-height: 1.4; align-items: flex-start; }
.ba-col.before .ba-list li { color: var(--zinc-500); }
.ba-col.after .ba-list li { color: var(--zinc-200); }
.ba-x, .ba-c { width: 18px; height: 18px; border-radius: 50%; flex: none; margin-top: 1px; display: grid; place-items: center; }
.ba-x { background: var(--error-bg); position: relative; }
.ba-x::before, .ba-x::after { content: ""; position: absolute; width: 9px; height: 2px; background: var(--error); border-radius: 1px; }
.ba-x::before { transform: rotate(45deg); }
.ba-x::after { transform: rotate(-45deg); }
.ba-c { background: #fff; color: var(--zinc-950); }
.ba-c svg { width: 12px; height: 12px; }

/* ============================================================
   SOLUTION (feature rows)
   ============================================================ */
.feat { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
/* 🔴 12/09 (Adam : « la démo de l'agent IA est trop collée à celle des photos ») —
   110 -> 170px. Chaque bloc porte maintenant une animation haute (dossier, cercle, comparateur,
   conversation) : à 110px, la fin d'une animation touchait le début de la suivante. */
.feat + .feat { margin-top: 230px; }
.feat.rev .feat-text { order: 2; }
/* 🔴 12/09 (Adam : « les titres numéro un, numéro deux sont trop petits ») — Depuis que les
   pavés de texte ont sauté, ces deux lignes sont le SEUL titre de la section : à 12,5px elles
   avaient encore la taille d'une étiquette secondaire. Elles deviennent le titre. */
.feat-tag { display: inline-flex; align-items: center; gap: 10px; font-size: clamp(17px, 2vw, 22px);
  font-weight: 600; letter-spacing: -.02em; color: var(--zinc-950); margin-bottom: 14px;
  font-family: var(--font-display); }
.feat-text h3 { font-size: clamp(24px, 3vw, 30px); line-height: 1.1; }
.feat-text > p { margin-top: 14px; font-size: 16px; color: var(--text-soft); line-height: 1.55; text-wrap: pretty; }
.feat-list { margin: 22px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.feat-list li { display: flex; gap: 11px; font-size: 14.5px; color: var(--zinc-700); align-items: flex-start; }
.feat-list .chk { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--accent); }
.feat-visual {
  border: 1px solid var(--border); border-radius: var(--r-card);
  background: var(--bg-soft); overflow: hidden; box-shadow: var(--shadow-md);
  min-height: 300px; position: relative;
}

/* Europe heatmap */
.eu-map { padding: 22px; }
.eu-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; }
.eu-head .t { font-size: 13px; font-weight: 600; }
.eu-head .s { font-size: 11px; color: var(--zinc-500); }
.eu-list { display: flex; flex-direction: column; gap: 9px; }
.eu-row { display: grid; grid-template-columns: 110px 1fr 64px; gap: 12px; align-items: center; }
.eu-row .c { font-size: 12.5px; font-weight: 500; color: var(--zinc-700); display: flex; align-items: center; gap: 7px; }
.eu-flag { width: 16px; height: 12px; border-radius: 2px; border: 1px solid var(--border); flex: none; background: var(--zinc-200); }
.eu-bar { height: 8px; border-radius: 4px; background: var(--zinc-100); overflow: hidden; }
.eu-bar i { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.eu-row .v { font-family: var(--font-mono); font-size: 11.5px; color: var(--zinc-500); text-align: right; }

/* TVA card */
.tva { padding: 22px; }
.tva-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.tva-head .t { font-size: 13px; font-weight: 600; }
.tva-rows { background: #fff; border: 1px solid var(--border); border-radius: 10px; }
.tva-r { display: flex; justify-content: space-between; align-items: center; padding: 11px 14px; font-size: 13px; border-bottom: 1px solid var(--border-soft); }
.tva-r:last-child { border-bottom: none; }
.tva-r .k { color: var(--zinc-600); }
.tva-r .v { font-family: var(--font-mono); font-weight: 600; color: var(--zinc-900); }
.tva-r.total { background: var(--zinc-50); }
.tva-r.total .k { font-weight: 600; color: var(--zinc-900); }
.tva-r.total .v { color: var(--accent); font-size: 15px; }

/* Agent IA chat */
.chat-demo { padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.cd-h { font-size: 12px; color: var(--zinc-500); display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.bub { max-width: 78%; padding: 9px 13px; border-radius: 13px; font-size: 13px; line-height: 1.4; }
.bub.them { align-self: flex-start; background: #fff; border: 1px solid var(--border); border-bottom-left-radius: 4px; color: var(--zinc-800); }
.bub.me { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.bub .who { font-size: 10.5px; font-weight: 600; margin-bottom: 3px; opacity: .7; }
.cd-tag { align-self: flex-end; font-size: 10.5px; color: var(--accent); font-weight: 600; display: flex; align-items: center; gap: 5px; }

/* Stock lots */
.lots { padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.lot { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 13px 15px; }
.lot-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; }
.lot-top .nm { font-size: 13px; font-weight: 600; }
.lot-top .nm .sku { font-family: var(--font-mono); font-size: 10px; color: var(--zinc-400); font-weight: 400; margin-left: 6px; }
.lot-prog { height: 7px; border-radius: 4px; background: var(--zinc-100); overflow: hidden; margin-bottom: 8px; }
.lot-prog i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.lot-meta { display: flex; justify-content: space-between; font-size: 11px; }
.lot-meta .num { font-family: var(--font-mono); }
.lot-meta .marge { color: var(--success); font-weight: 600; }

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: step; }
/* 🔴 12/09 (Adam : « pourquoi c'est pas centré ? ») — MESURÉ : le bloc des trois étapes EST
   parfaitement centré (son centre tombe sur celui de l'écran au pixel près). Ce qui décalait
   visuellement, c'est le CONTENU aligné à gauche dans chaque colonne : le dernier titre étant
   court (« Cockpit pilote »), il laissait 64px de vide à droite alors que le premier collait au
   bord gauche — la rangée paraissait tirée vers la gauche. Contenu centré : la rangée est
   symétrique, et elle s'accorde enfin au titre centré juste au-dessus. */
.step { position: relative; padding-top: 22px; text-align: center;
        display: flex; flex-direction: column; align-items: center; }
.step p { max-width: 34ch; }
.step .n {
  font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--accent);
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 14px;
}
.step .n::before,
.step .n::after { content: ""; width: 26px; height: 1px; background: var(--border); }
.step .ic-box {
  width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border);
  background: #fff; display: grid; place-items: center; color: var(--zinc-700); margin-bottom: 16px;
}
.step h3 { font-size: 18px; }
.step p { margin-top: 9px; font-size: 14.5px; color: var(--text-soft); line-height: 1.5; }
.steps-line { position: relative; }

/* ============================================================
   ROI CALCULATOR
   ============================================================ */
.roi {
  border: 1px solid var(--border); border-radius: var(--r-modal);
  background: var(--white); overflow: hidden;
  display: grid; grid-template-columns: 1fr 1fr;
  box-shadow: var(--shadow-md);
}
.roi-in { padding: 40px; border-right: 1px solid var(--border); }
.roi-in h3 { font-size: 22px; }
.roi-in > p { margin-top: 10px; font-size: 14.5px; color: var(--text-soft); }
.roi-field { margin-top: 26px; }
.roi-field label { display: flex; justify-content: space-between; font-size: 13px; font-weight: 500; color: var(--zinc-700); margin-bottom: 12px; }
.roi-field label .out { font-family: var(--font-mono); font-size: 15px; color: var(--accent); font-weight: 600; }
input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px;
  border-radius: 4px; background: var(--zinc-200); outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 2px solid var(--accent); cursor: pointer; box-shadow: var(--shadow-sm);
  transition: transform .1s ease;
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.12); }
input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid var(--accent); cursor: pointer; }
.roi-scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--zinc-400); font-family: var(--font-mono); margin-top: 8px; }
.roi-toggle { margin-top: 26px; display: flex; gap: 8px; }
.roi-toggle button {
  flex: 1; height: 36px; border-radius: 8px; border: 1px solid var(--border);
  background: #fff; font-size: 13px; font-weight: 500; color: var(--zinc-600);
}
.roi-toggle button.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

.roi-out { padding: 40px; background: var(--zinc-950); color: #fff; }
.roi-out .lbl { font-size: 12.5px; color: var(--zinc-400); font-weight: 500; }
.roi-out .big { font-family: var(--font-mono); font-size: 52px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; margin-top: 10px; }
.roi-out .big .u { font-size: 22px; color: var(--zinc-400); margin-left: 4px; }
.roi-out .sub { font-size: 13.5px; color: var(--zinc-400); margin-top: 12px; line-height: 1.5; }
.roi-breaks { margin-top: 30px; border-top: 1px solid var(--zinc-800); padding-top: 22px; display: flex; flex-direction: column; gap: 14px; }
.roi-break { display: flex; justify-content: space-between; align-items: center; }
.roi-break .k { font-size: 13px; color: var(--zinc-300); }
.roi-break .v { font-family: var(--font-mono); font-size: 15px; font-weight: 600; white-space: nowrap; padding-left: 14px; }
.roi-break .v.acc { color: #ffffff; }
.roi-note { margin-top: 22px; font-size: 11.5px; color: var(--zinc-500); line-height: 1.45; }

/* ============================================================
   TÉMOIGNAGES
   ============================================================ */
.test-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.test {
  border: 1px solid var(--border); border-radius: var(--r-card); padding: 24px; background: #fff;
  display: flex; flex-direction: column;
}
.test-stat { font-family: var(--font-mono); font-size: 30px; font-weight: 600; letter-spacing: -0.02em; color: var(--zinc-950); }
.test-stat .u { color: var(--accent); }
.test-statl { font-size: 12.5px; color: var(--zinc-500); margin-top: 4px; }
.test q { display: block; margin-top: 18px; font-size: 14.5px; color: var(--zinc-700); line-height: 1.5; quotes: none; flex: 1; }
.test q::before, .test q::after { content: ""; }
.test-who { display: flex; align-items: center; gap: 10px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border-soft); }
.test-av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; flex: none; }
.test-who .nm { font-size: 13px; font-weight: 600; }
.test-who .ro { font-size: 11.5px; color: var(--zinc-500); }
.test-disc { font-size: 11px; color: var(--zinc-400); margin-top: 4px; }

/* ============================================================
   PRICING TEASER
   ============================================================ */
.price-toggle { display: inline-flex; align-items: center; gap: 10px; padding: 4px; border: 1px solid var(--border); border-radius: 10px; background: #fff; margin: 0 auto 8px; }
.price-toggle button { height: 32px; padding: 0 16px; border-radius: 7px; border: none; background: transparent; font-size: 13px; font-weight: 550; color: var(--zinc-600); }
.price-toggle button.on { background: var(--zinc-950); color: #fff; }
.price-save { font-size: 12px; color: var(--success); font-weight: 600; }

/* 🔴 11/08 : trois offres depuis le retrait du gratuit. Sans borne, les cartes s'étirent
   sur toute la largeur et le bloc perd son centre de gravité. On borne et on centre. */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); gap: 16px; margin-top: 44px; align-items: stretch; max-width: 1080px; margin-left: auto; margin-right: auto; }
.plan {
  border: 1px solid var(--border); border-radius: var(--r-card); padding: 28px 24px; background: #fff;
  display: flex; flex-direction: column; position: relative;
}
.plan.feat-plan { border-color: var(--zinc-950); box-shadow: var(--shadow-md); }

/* 🔴 14/08 (Adam : « quand je passe la souris sur les tarifs, faut que ça soulève un petit peu,
   mais vraiment un petit effet ») — 3 px et une ombre. Assez pour que la carte réponde, assez peu
   pour que la grille ne tressaute pas quand on la balaie. */
.plan { transition: transform .18s cubic-bezier(.4,0,.2,1), box-shadow .18s cubic-bezier(.4,0,.2,1), border-color .18s; }
.plan:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(9,9,11,.04), 0 12px 28px rgba(9,9,11,.09); border-color: var(--zinc-300, #d4d4d8); }
.plan.feat-plan:hover { border-color: var(--zinc-950); }
@media (prefers-reduced-motion: reduce) { .plan { transition: none } .plan:hover { transform: none } }
.plan .pop { position: absolute; top: -11px; left: 24px; background: var(--zinc-950); color: #fff; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 6px; }
.plan .pname { font-size: 14px; font-weight: 600; color: var(--zinc-700); }
.plan .pdesc { display: block; font-size: 13px; color: var(--zinc-500); margin-top: 7px; line-height: 1.45; min-height: 40px; }
.plan .pprice { margin-top: 18px; display: flex; align-items: baseline; gap: 4px; }
.plan .pprice .amt { font-family: var(--font-display); font-size: 44px; font-weight: 700; letter-spacing: -0.045em; font-feature-settings: "tnum"; color: var(--zinc-950); line-height: 1; }
.plan .pprice .per { font-size: 13px; color: var(--zinc-500); }
.plan .pann { display: none; }
.plan .btn { margin-top: 20px; }
/* Offre de lancement : ancien prix barré BIEN VISIBLE + badges (charte zinc) */
/* 🔴 14/08 (Adam : « la taille est bonne, c'est la couleur ») — l'ancien prix était en zinc-400
   barré en zinc-300 : deux gris pâles qui disparaissaient à côté du grand chiffre noir. On monte
   d'un cran sur le texte et de deux sur la barre, pour qu'elle se lise comme une rature volontaire. */
.plan .pprice .amt-old { font-family: var(--font-display); font-size: 24px; font-weight: 500; color: var(--zinc-600); text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--zinc-500); margin-right: 10px; font-feature-settings: "tnum"; }
.plan .plaunch { position: absolute; top: -11px; right: 24px; background: var(--zinc-950); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; padding: 4px 10px; border-radius: 6px; border: none; white-space: nowrap; }
.plan-feats { margin: 22px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.plan-feats li { display: flex; gap: 9px; font-size: 13px; color: var(--zinc-700); align-items: flex-start; }
.plan-feats .chk { width: 16px; height: 16px; color: var(--accent); flex: none; margin-top: 1px; }

/* ============================================================
   FAQ
   ============================================================ */
.faq { max-width: 760px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q {
  width: 100%; text-align: left; background: none; border: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 22px 0; font-size: 16px; font-weight: 550; color: var(--zinc-900);
  letter-spacing: -0.015em;
}
.faq-q .pm { flex: none; width: 20px; height: 20px; color: var(--zinc-400); transition: transform .25s ease; }
.faq-item.open .faq-q .pm { transform: rotate(45deg); color: var(--accent); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-a-inner { padding: 0 0 22px; font-size: 14.5px; color: var(--text-soft); line-height: 1.6; max-width: 640px; }

/* ============================================================
   FINAL CTA
   ============================================================ */
.cta-final { background: var(--zinc-950); border-radius: var(--r-modal); padding: 64px 48px; text-align: center; position: relative; overflow: hidden; }
.cta-final::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(70% 80% at 50% 0%, #000, transparent);
          mask-image: radial-gradient(70% 80% at 50% 0%, #000, transparent);
}
.cta-final > * { position: relative; z-index: 1; }
.cta-final h2 { color: #fff; font-size: clamp(28px, 4vw, 42px); line-height: 1.08; }
.cta-final p { color: var(--zinc-400); font-size: 17px; margin-top: 16px; max-width: 480px; margin-left: auto; margin-right: auto; }
.cta-final .hero-cta { margin-top: 30px; }
.cta-final .btn-ghost { background: transparent; color: #fff; border-color: var(--zinc-700); }
.cta-final .btn-ghost:hover { background: var(--zinc-800); border-color: var(--zinc-600); }
.cta-guarantee { margin-top: 22px; font-size: 13px; color: var(--zinc-500); display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.cta-guarantee span { display: inline-flex; align-items: center; gap: 6px; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { border-top: 1px solid var(--border); padding: 64px 0 40px; background: var(--bg-soft); }
.footer-top { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 32px; }
.footer-brand p { font-size: 13.5px; color: var(--zinc-500); margin-top: 14px; max-width: 240px; line-height: 1.5; }
.footer-col h4 { font-size: 12px; font-weight: 600; color: var(--zinc-900); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 14px; font-family: var(--font-text); }
.footer-col a { display: block; font-size: 13.5px; color: var(--zinc-500); padding: 5px 0; transition: color .15s; }
.footer-col a:hover { color: var(--zinc-900); }
.footer-bot { display: flex; justify-content: space-between; align-items: center; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--zinc-500); flex-wrap: wrap; gap: 12px; }
.footer-status { display: inline-flex; align-items: center; gap: 7px; }
.footer-status .dot { background: var(--success); }
.footer-social { display: flex; gap: 14px; }
.footer-social a { color: var(--zinc-400); }
.footer-social a:hover { color: var(--zinc-800); }

/* ============================================================
   COOKIE BANNER + CHAT
   ============================================================ */
.cookie {
  position: fixed; bottom: 18px; left: 18px; z-index: 80;
  max-width: 360px; background: #fff; border: 1px solid var(--border);
  border-radius: var(--r-card); padding: 18px; box-shadow: var(--shadow-lg);
  transition: transform .35s cubic-bezier(.16,1,.3,1), opacity .35s;
}
.cookie.hide { transform: translateY(140%); opacity: 0; pointer-events: none; }
.cookie p { font-size: 13px; color: var(--zinc-600); line-height: 1.45; }
.cookie p strong { color: var(--zinc-900); }
.cookie-act { display: flex; gap: 8px; margin-top: 14px; }
.cookie-act .btn { height: 34px; font-size: 13px; flex: 1; }

.chat-fab {
  position: fixed; bottom: 22px; right: 22px; z-index: 80;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--zinc-950); color: #fff; border: none;
  display: grid; place-items: center; box-shadow: var(--shadow-lg);
  transition: transform .15s ease;
}
.chat-fab:hover { transform: scale(1.06); }
.chat-panel {
  position: fixed; bottom: 86px; right: 22px; z-index: 80;
  width: 340px; background: #fff; border: 1px solid var(--border);
  border-radius: var(--r-modal); box-shadow: var(--shadow-lg); overflow: hidden;
  transform: translateY(12px) scale(.98); opacity: 0; pointer-events: none;
  transition: transform .25s cubic-bezier(.16,1,.3,1), opacity .25s;
}
.chat-panel.open { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }
.chat-hd { background: var(--zinc-950); color: #fff; padding: 16px 18px; }
.chat-hd .t { font-size: 14px; font-weight: 600; }
.chat-hd .s { font-size: 12px; color: var(--zinc-400); margin-top: 3px; display: flex; align-items: center; gap: 6px; }
.chat-bd { padding: 16px; display: flex; flex-direction: column; gap: 10px; max-height: 220px; }
.chat-bd .bub { font-size: 13px; }
.chat-ft { padding: 12px 14px; border-top: 1px solid var(--border); display: flex; gap: 8px; }
.chat-ft input { flex: 1; height: 38px; border: 1px solid var(--border); border-radius: 8px; padding: 0 12px; font-family: inherit; font-size: 13px; outline: none; }
.chat-ft input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.chat-ft button { width: 38px; height: 38px; border-radius: 8px; border: none; background: var(--accent); color: #fff; display: grid; place-items: center; flex: none; }

/* ============================================================
   SOLUTION — différenciants (feat-num, metric)
   ============================================================ */
.feat-num {
  display: inline-block; font-family: var(--font-mono); font-size: 15px; font-weight: 600;
  color: var(--zinc-500); border: 1px solid var(--border); border-radius: 8px;
  padding: 4px 12px; margin-bottom: 16px; background: #fff;
}
.feat-tag .sq { width: 8px; height: 8px; background: var(--accent); border-radius: 2px; display: inline-block; flex: none; }
.feat-metric { margin-top: 28px; display: flex; align-items: center; gap: 16px; padding-top: 22px; border-top: 1px solid var(--border); }
.fm-big { font-size: 34px; font-weight: 600; letter-spacing: -0.025em; color: var(--zinc-950); white-space: nowrap; }
.fm-l { font-size: 13px; color: var(--zinc-500); line-height: 1.32; }

/* ---------- Dropzone demo ---------- */
.dz-visual { background: #fff; }
.dz-visual [hidden] { display: none !important; }
.dz-stage { min-height: 360px; display: flex; align-items: center; justify-content: center; padding: 24px; }
.dz-zone {
  width: 100%; border: 2px dashed var(--zinc-300); border-radius: 12px;
  padding: 34px 20px; text-align: center; background: var(--bg-soft);
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  transition: border-color .2s ease, background .2s ease;
}
.dz-zone:hover { border-color: var(--accent); background: var(--accent-soft); }
.dz-ic { width: 48px; height: 48px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; margin-bottom: 6px; }
.dz-zone:hover .dz-ic { background: #fff; }
.dz-t { font-size: 15px; font-weight: 600; }
.dz-s { font-size: 12.5px; color: var(--zinc-500); }
/* ⭐ mobile : la fiche « annonce générée » passe en 1 colonne (photo en haut, détails dessous)
   au lieu de 2 colonnes écrasées qui débordaient (« s'affiche ultra mal »). */
@media (max-width: 640px) {
  .draft.draft-lg { grid-template-columns: 1fr !important; }
  .draft.draft-lg > div:first-child { border-right: none !important; border-bottom: 1px solid var(--border); }
  .dz-stage { padding: 16px; min-height: 0; }
  .draft-foot { flex-wrap: wrap; }
}
.dz-zone .btn { margin-top: 14px; }
.dz-note { font-size: 10.5px; color: var(--zinc-400); margin-top: 4px; }
.dz-analyze, .dz-result { width: 100%; }
.dz-a-t { font-size: 14px; font-weight: 600; margin-bottom: 14px; display: flex; align-items: center; }
.dots { display: inline-flex; gap: 3px; margin-left: 6px; }
.dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.dz-bar { height: 8px; border-radius: 4px; background: var(--zinc-100); overflow: hidden; }
.dz-bar i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 4px; }
.dz-pct { font-size: 11px; color: var(--zinc-500); margin-top: 6px; text-align: right; }
.dz-a-steps { display: flex; flex-direction: column; gap: 9px; margin-top: 18px; }
.dz-a-steps span { font-size: 12.5px; color: var(--zinc-400); display: flex; align-items: center; gap: 9px; transition: color .2s; }
.dz-a-steps span::before { content: ""; width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--zinc-300); flex: none; transition: background .2s, border-color .2s; }
.dz-a-steps span.done { color: var(--zinc-800); font-weight: 500; }
.dz-a-steps span.done::before { background: var(--success); border-color: var(--success); }
.dz-r-h { display: flex; justify-content: space-between; align-items: center; font-size: 14px; font-weight: 600; margin-bottom: 14px; }
.dz-r-h > span { white-space: nowrap; }
.dz-replay { background: none; border: none; color: var(--accent); font-size: 11px; cursor: pointer; }
.dz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.draft { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: #fff; }
.draft-img { height: 66px; position: relative; background-image: repeating-linear-gradient(45deg, var(--zinc-100), var(--zinc-100) 7px, var(--zinc-200) 7px, var(--zinc-200) 14px); }
.ph-tag { position: absolute; bottom: 5px; left: 5px; font-size: 8.5px; color: var(--zinc-500); background: rgba(255,255,255,.88); padding: 1px 5px; border-radius: 4px; white-space: nowrap; }
.draft-b { padding: 9px 10px; }
.draft-nm { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.draft-meta { display: flex; gap: 5px; margin: 7px 0; }
.draft-meta .badge { height: 18px; font-size: 9.5px; padding: 0 6px; }
.draft-foot { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.draft-pr { font-size: 13px; font-weight: 600; white-space: nowrap; }
.draft-pub { height: 26px; padding: 0 11px; border-radius: 6px; border: none; background: var(--accent); color: #fff; font-size: 11px; font-weight: 550; cursor: pointer; }
.draft-pub:hover { background: var(--accent-hover); }

/* ---------- Dropzone : essai réel (upload) ---------- */
.dz-zone { cursor: pointer; }
.dz-zone.drag { border-color: var(--accent); background: var(--accent-soft); }
.dz-zone .btn { margin-top: 14px; pointer-events: none; }
.dz-loaded { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.dz-l-h { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 600; }
.dz-clear { background: none; border: none; color: var(--zinc-500); font-size: 11px; cursor: pointer; }
.dz-clear:hover { color: var(--error); }
.dz-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.dz-thumbs .th { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); background: var(--zinc-100); }
.dz-thumbs .th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dz-thumbs .more { display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--zinc-500); background: var(--zinc-100); border: 1px solid var(--border); border-radius: 8px; aspect-ratio: 1; }
.draft-lg { max-width: 320px; margin: 0 auto; }
.draft-hero { height: 150px; position: relative; background-size: cover; background-position: center; background-color: var(--zinc-200); }
.draft-hero .ph-tag { background: rgba(9,9,11,.55); color: #fff; }
.draft-strip { display: flex; gap: 5px; padding: 7px; background: var(--zinc-50); border-bottom: 1px solid var(--border-soft); }
.draft-strip .s { width: 34px; height: 34px; border-radius: 6px; background-size: cover; background-position: center; border: 1px solid var(--border); flex: none; background-color: var(--zinc-200); }
.draft-pub { height: 30px; padding: 0 13px; font-size: 12px; white-space: nowrap; }
.dz-trial { text-align: center; font-size: 11px; color: var(--zinc-500); margin-top: 4px; }
.dz-trial a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Republication : panneau réel (réplique CRM) ---------- */
.repub-panel { padding: 0; display: flex; flex-direction: column; background: #fff; }
.rp-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--border); background: var(--zinc-50); }
.rp-title { font-size: 13px; font-weight: 600; white-space: nowrap; }
.rp-bar .badge { white-space: nowrap; }
.rp-body { padding: 16px; display: flex; flex-direction: column; gap: 11px; }
.rp-sec { font-size: 10.5px; font-weight: 600; color: var(--zinc-400); text-transform: uppercase; letter-spacing: .05em; margin-top: 4px; }
.rp-sec:first-child { margin-top: 0; }
.rp-label { font-size: 12.5px; font-weight: 550; color: var(--zinc-700); }
.rp-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; background: var(--zinc-100); padding: 4px; border-radius: 9px; }
.rp-seg button { height: 30px; border: none; background: transparent; border-radius: 6px; font-size: 11.5px; font-weight: 550; color: var(--zinc-600); cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; }
.rp-seg button.on { background: var(--zinc-950); color: #fff; box-shadow: var(--shadow-xs); }
.rp-toggles { display: flex; flex-direction: column; gap: 2px; }
.rp-tg { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px; font-size: 12.5px; color: var(--zinc-700); }
.rp-tg + .rp-tg { margin-top: 6px; }
.rp-model { font-size: 9px; font-weight: 600; color: #fff; background: var(--accent); padding: 1px 6px; border-radius: 4px; margin-left: 4px; letter-spacing: .02em; vertical-align: middle; }
.sw { width: 34px; height: 20px; border-radius: 11px; background: var(--zinc-300); position: relative; flex: none; cursor: pointer; transition: background .18s; }
.sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-xs); transition: transform .18s; }
.sw.on { background: var(--accent); }
.sw.on::after { transform: translateX(14px); }
.rp-delay { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--zinc-600); }
.rp-num { display: inline-grid; place-items: center; min-width: 42px; height: 30px; border: 1px solid var(--border); border-radius: 7px; font-size: 13px; font-weight: 600; color: var(--zinc-900); background: #fff; }
.rp-check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--zinc-700); cursor: pointer; }
.rp-reco { color: var(--zinc-400); font-size: 11px; }
.cb { width: 17px; height: 17px; border-radius: 5px; border: 1.5px solid var(--zinc-300); flex: none; position: relative; transition: background .15s, border-color .15s; }
.cb.on { background: var(--accent); border-color: var(--accent); }
.cb.on::after { content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.rp-hint { font-size: 11px; color: var(--zinc-400); line-height: 1.4; }
.rp-when { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 4px; }
.rp-radio { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--zinc-700); cursor: pointer; }
.rb { width: 17px; height: 17px; border-radius: 50%; border: 1.5px solid var(--zinc-300); flex: none; position: relative; transition: border-color .15s; }
.rb.on { border-color: var(--accent); }
.rb.on::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--accent); }
.repub-panel .btn { margin-top: 4px; }

/* ---------- Showcase : compare slider ---------- */
/* Le comparateur avant/après est suivi de la conversation de l'agent : même respiration. */
.showcase { margin-top: 230px; margin-bottom: 230px; }
.sc-head { max-width: 640px; margin: 0 auto 34px; text-align: center; }
.sc-head h3 { font-size: clamp(26px, 3.4vw, 36px); line-height: 1.08; margin-top: 12px; }
.sc-head p { margin-top: 14px; color: var(--text-soft); font-size: 16px; line-height: 1.55; text-wrap: pretty; }
.cmp {
  position: relative; max-width: 760px; margin: 0 auto; width: 100%;
  aspect-ratio: 16 / 10; border-radius: var(--r-card); overflow: hidden;
  border: 1px solid var(--border); box-shadow: var(--shadow-md); background: #fff;
  user-select: none; touch-action: none; cursor: ew-resize;
  --p: 50%;
}
.cmp-pane { position: absolute; inset: 0; }
.cmp-before { clip-path: inset(0 calc(100% - var(--p)) 0 0); z-index: 2; }
.cmp-scene { position: absolute; inset: 0; display: grid; place-items: center; }
.cmp-after .cmp-scene { background: radial-gradient(circle at 50% 36%, #ffffff, #eef0f2); }
.cmp-before .cmp-scene { background: repeating-linear-gradient(48deg, #d6d3ce, #d6d3ce 11px, #ccc8c2 11px, #ccc8c2 22px); filter: saturate(.55) brightness(.93); }
.cmp-prod { background: linear-gradient(135deg, var(--zinc-300), var(--zinc-100)); border-radius: 10px; }
.cmp-after .cmp-prod { box-shadow: 0 20px 44px rgba(9,9,11,.16); }
.cmp-before .cmp-prod { transform: rotate(-7deg); box-shadow: none; background: linear-gradient(135deg, #9b8f80, #7c726a); }
.cmp[data-ex="0"] .cmp-prod { width: 48%; height: 40%; border-radius: 8px; }
.cmp[data-ex="1"] .cmp-prod { width: 30%; height: 74%; border-radius: 16px 16px 34px 34px; }
.cmp[data-ex="1"] .cmp-after .cmp-prod { background: linear-gradient(180deg, #c7ccd4, #a9b0ba); }
.cmp[data-ex="2"] .cmp-prod { width: 52%; height: 30%; border-radius: 10px 10px 18px 18px; }
.cmp-cap { position: absolute; bottom: 12px; font-size: 10.5px; color: #fff; background: rgba(9,9,11,.72); padding: 4px 9px; border-radius: 6px; z-index: 3; }
.cmp-after .cmp-cap { right: 12px; }
.cmp-before .cmp-cap { left: 12px; }
.cmp-badge { position: absolute; top: 12px; font-size: 10.5px; font-weight: 600; padding: 4px 9px; border-radius: 6px; z-index: 4; white-space: nowrap; }
.cmp-badge.bl { left: 12px; background: rgba(255,255,255,.92); color: var(--zinc-700); border: 1px solid var(--border); }
.cmp-badge.br { right: 12px; background: var(--accent); color: #fff; }
.cmp-divider { position: absolute; top: 0; bottom: 0; left: var(--p); width: 2px; background: #fff; transform: translateX(-1px); z-index: 5; box-shadow: 0 0 0 1px rgba(9,9,11,.08); }
.cmp-knob {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 42px; height: 42px; border-radius: 50%; background: #fff; border: 1px solid var(--border);
  box-shadow: var(--shadow-md); color: var(--zinc-700); display: grid; place-items: center; cursor: ew-resize;
}
.cmp-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 760px; margin: 16px auto 0; }
.cmp-tabs button { text-align: left; padding: 11px 13px; border: 1px solid var(--border); border-radius: 10px; background: #fff; display: flex; flex-direction: column; gap: 2px; transition: border-color .15s, background .15s; }
.cmp-tabs button b { font-size: 13px; font-weight: 600; }
.cmp-tabs button span { font-size: 11px; color: var(--zinc-500); }
.cmp-tabs button.on { border-color: var(--accent); background: var(--accent-soft); }
.cmp-tabs button.on b { color: var(--accent); }
.cmp-note { text-align: center; margin-top: 14px; font-size: 11px; color: var(--zinc-400); }

/* ---------- Agent photos portées ---------- */
.portee-visual { padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.bub-img { padding: 5px; }
.portee-img { width: 150px; height: 172px; border-radius: 9px; position: relative; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.20), rgba(255,255,255,.20) 8px, rgba(255,255,255,.08) 8px, rgba(255,255,255,.08) 16px); }
.portee-img .ph-tag { background: rgba(9,9,11,.35); color: #fff; }

/* ---------- Scaler band (le reste) ---------- */
.scaler-band { margin-top: 100px; border-top: 1px solid var(--border); padding-top: 56px; }
.scaler-head { text-align: center; max-width: 560px; margin: 0 auto 36px; }
.scaler-head h3 { font-size: 24px; }
.scaler-head p { margin-top: 10px; color: var(--text-soft); font-size: 15px; line-height: 1.5; }
.scaler-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.mcard { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 20px; transition: border-color .2s, box-shadow .2s; }
.mcard:hover { border-color: var(--zinc-300); box-shadow: var(--shadow-sm); }
.mcard-ic { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--border); display: grid; place-items: center; color: var(--zinc-600); margin-bottom: 14px; }
.mcard h4 { font-size: 15px; font-family: var(--font-display); }
.mcard p { font-size: 13px; color: var(--text-soft); line-height: 1.45; margin-top: 7px; }

/* ---------- Pricing : lignes différenciantes étoilées ---------- */
.plan-feats li.star { background: var(--accent-soft); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; align-items: center; gap: 8px; }
.plan-feats li.star .st { width: 13px; height: 13px; fill: var(--accent); flex: none; }
.plan-feats li.star .sf { font-weight: 550; color: var(--zinc-800); }
.plan-feats li.star .sq { margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--accent); white-space: nowrap; font-family: var(--font-mono); }
.plan-feats li.star.off { background: var(--zinc-50); border-color: var(--border); }
.plan-feats li.star.off .st { fill: var(--zinc-300); }
.plan-feats li.star.off .sf, .plan-feats li.star.off .sq { color: var(--zinc-400); }
/* Cartes de prix — alignement parfait rangée par rangée (index + tarifs) */
.plan .pprice { flex-wrap: nowrap; min-height: 48px; gap: 3px; }   /* prix sur 1 ligne partout → boutons alignés, pas de débordement */
.plan .pprice .per { white-space: nowrap; }
.plan .pprice .amt { font-size: 40px; }
.plan .pprice .amt-old { font-size: 18px; margin-right: 5px; }
.plan-feats li.star { min-height: 50px; }                     /* toutes les puces = même hauteur → rangées alignées */
.plan-feats li.star .sf { font-size: 12.5px; line-height: 1.25; }
.plan-feats li.star .sq { font-family: inherit; font-size: 11px; }  /* badge compact → plus de place au texte, moins de retours à la ligne */
/* ⭐ 16/07 : les fonctions absentes RESTENT à leur ligne (même fonction = même ligne sur les 4 cartes),
   distinguées par la COULEUR grise (.star.off) — surtout PAS déplacées en bas (sinon « Agent IA » et
   « Republication automatique » se décalaient d'une carte à l'autre). Ordre DOM uniforme = alignement
   horizontal parfait par fonction, absentes grisées en place. */
.plan-feats li:not(.star) { min-height: 42px; align-items: center; }  /* les "check" restent en bas (ordre DOM naturel) */
.plans-note { display: flex; align-items: flex-start; gap: 8px; max-width: 660px; margin: 28px auto 0; font-size: 12.5px; color: var(--zinc-500); line-height: 1.45; }
.plans-note .st { width: 14px; height: 14px; fill: var(--accent); flex: none; margin-top: 2px; }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal { will-change: transform; }
.reveal.in { animation: revealUp .6s cubic-bezier(.16,1,.3,1) both; }
@keyframes revealUp {
  from { transform: translateY(16px); }
  to   { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { transform: none; }
  .reveal.in { animation: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
.mobile-menu { display: none; }

@media (max-width: 920px) {
  .feat, .roi, .prob-grid, .steps, .test-grid, .plans { grid-template-columns: 1fr; }
  .ba-grid { grid-template-columns: 1fr; }
  .feat { gap: 32px; }
  .feat + .feat { margin-top: 64px; }
  .feat.rev .feat-text { order: 0; }
  .showcase { margin-top: 64px; }
  .scaler-band { margin-top: 64px; }
  .scaler-grid { grid-template-columns: 1fr 1fr; }
  .roi-in { border-right: none; border-bottom: 1px solid var(--border); }
  .test-grid, .plans { gap: 14px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-brand { grid-column: 1 / -1; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .section { padding: 64px 0; }
  .nav-links, .nav-cta .btn-ghost, .nav-cta .btn-primary { display: none; }
  .nav-burger {
    display: grid; place-items: center; margin-left: auto;
    width: 42px; height: 42px; border-radius: 9px; border: 1px solid var(--border); background: #fff;
    color: var(--zinc-950);   /* ⭐ icône burger NOIRE (l'SVG utilise currentColor — était bleu hérité) */
  }
  .nav-cta { margin-left: auto; gap: 0; }
  .app-side { display: none; }
  .anno { display: none; }
  .hero-shot { padding: 0 12px; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .tbl-row { grid-template-columns: 1.6fr 0.7fr 0.8fr; }
  .tbl-row .hide-sm { display: none; }
  .cta-final { padding: 44px 24px; }
  .roi-out .big { font-size: 42px; }
  .scaler-grid { grid-template-columns: 1fr; }
  .cmp-tabs { grid-template-columns: 1fr; }
  .cmp-tabs button { flex-direction: row; align-items: baseline; gap: 8px; }
  .feat-metric { flex-wrap: wrap; gap: 10px; }

  .mobile-menu {
    position: fixed; inset: 0; z-index: 70; background: #fff;
    display: flex; flex-direction: column; padding: 80px 24px 24px;
    transform: translateX(100%); transition: transform .3s cubic-bezier(.16,1,.3,1);
  }
  .mobile-menu.open { transform: none; }
  .mobile-menu a { font-size: 19px; font-weight: 500; padding: 14px 0; border-bottom: 1px solid var(--border-soft); color: var(--zinc-800); }
  .mobile-menu .btn { margin-top: 20px; }
  .mm-close { position: absolute; top: 18px; right: 20px; width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 8px; background: #fff; display: grid; place-items: center; }
}

/* 🔴 14/08 (Adam : « sur mon téléphone, quand j'écris mon e-mail ça zoome à fond ») —
   COMPORTEMENT iOS, PAS UN BUG DU SITE. Safari sur iPhone zoome automatiquement sur tout champ
   dont la police fait MOINS DE 16 px, pour le rendre lisible. Nos champs étaient à 13, 14 et
   14,5 px selon les pages : le zoom se déclenchait donc à chaque fois, et l'utilisateur devait
   dézoomer à la main après chaque saisie — sur la page de connexion, autant dire un client perdu.
   La parade propre est de passer les champs à 16 px sur petit écran. L'autre méthode répandue
   (maximum-scale=1 dans le viewport) désactive le zoom pour TOUTE la page, y compris pour les
   personnes malvoyantes qui en ont besoin : on ne la retient pas.
   Le !important est nécessaire : plusieurs champs portent leur taille en style en ligne. */
@media (max-width: 820px) {
  input, select, textarea, .inp, .search { font-size: 16px !important; }
}


/* ══════════════════════════════════════════════════════════════════════════════════════════════
   31/08 — EN-TETE MOBILE DES PAGES SECONDAIRES. Sous 720 px, la regle plus haut masque
   .nav-links, .btn-ghost ET .btn-primary pour les remplacer par .nav-burger. Or le burger
   n'existe QUE dans index.html : sur les 255 autres pages — dont les 247 pages SEO qui recoivent
   le trafic Google — l'en-tete mobile ne contenait plus que le logo. Aucun bouton, aucun chemin
   d'inscription. Un visiteur arrivant de Google sur son telephone ne pouvait pas creer de compte.
   Ces pages portent desormais .nav-simple : on y garde le bouton principal visible et compact,
   plutot que d'y greffer un menu burger page par page. */
@media (max-width: 720px) {
  .nav-simple .nav-cta { margin-left: auto; gap: 8px; }
  .nav-simple .nav-cta .btn-primary {
    display: inline-flex; align-items: center;
    font-size: 13.5px; padding: 9px 14px; white-space: nowrap;
  }
}
@media (max-width: 400px) {
  .nav-simple .logo-word { display: none; }   /* 375 px : on cede le mot au bouton */
  .nav-simple .nav-cta .btn-primary { font-size: 13px; padding: 9px 12px; }
}

/* ════════════════════════════════════════════════════════════════════════
   🔴 12/09 (Adam) — REFONTE DE QUATRE BLOCS DE LA PAGE D'ACCUEIL
   1. Connecteurs Vinted + Whatnot mis en évidence (section Analyse)
   2. Republication : panneau de réglages → animation d'annonce recyclée
   3. Dépôt photos → annonces prêtes → publication en chaîne (feature nº1)
   4. Chapitres de la VSL dans la barre de lecture, façon YouTube
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1 · CONNECTEURS ─────────────────────────────────────────────────── */
.ck-conn{border:1px solid var(--border);border-radius:12px;background:var(--bg-soft);padding:12px;margin-bottom:14px}
.ck-conn-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ck-conn-p{
  display:flex;align-items:center;gap:11px;
  background:#fff;border:1px solid var(--border);border-radius:10px;padding:11px 13px;
}
.ck-conn-t{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.ck-conn-t b{font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--zinc-900)}
.ck-conn-t span{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--zinc-500);margin-top:2px}
.ck-dot{
  width:6px;height:6px;border-radius:50%;background:var(--success);flex:none;
  box-shadow:0 0 0 0 rgba(21,128,61,.45);animation:ckPulse 2.4s ease-out infinite;
}
@keyframes ckPulse{0%{box-shadow:0 0 0 0 rgba(21,128,61,.45)}70%{box-shadow:0 0 0 6px rgba(21,128,61,0)}100%{box-shadow:0 0 0 0 rgba(21,128,61,0)}}
.ck-conn-note{
  margin-top:10px;padding-top:10px;border-top:1px solid var(--border);
  font-size:12px;color:var(--zinc-500);text-align:center;line-height:1.45;
}
@media (max-width:560px){
  .ck-conn-grid{grid-template-columns:1fr}
  .ck-conn-note{font-size:11.5px}
}

/* ── 2 · REPUBLICATION : le dressing tourne autour de Cockpit ─────────── */
.rcy{display:flex;flex-direction:column;gap:18px;border:0;background:transparent;box-shadow:none;
     overflow:visible;min-height:0}

/* 🔴 12/09 (Adam : « pendant l'animation 1 on voit déjà l'animation 2 ») — L'ORBITE EST
   FIGÉE TANT QU'ON N'Y EST PAS. Elle était en CSS pur, donc elle tournait en permanence :
   sur un grand écran on voyait la fin de l'animation 1 ET le cercle s'agiter en bas, les deux
   se disputaient le regard. `paused` par défaut, `running` seulement quand le bloc occupe
   vraiment l'écran (55 %). Bonus : plus aucun calcul GPU tant qu'on n'y est pas. */
.orb{position:relative;width:min(340px,92%);margin:0 auto;aspect-ratio:1}
/* (les règles de mise en pause sont en fin de fichier : placées ici, elles étaient
   réinitialisées par les raccourcis `animation:` déclarés juste en dessous.) */

/* Le rail et la flèche : ils donnent le SENS de la rotation. */
.orb-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.orb-track{fill:none;stroke:var(--zinc-200);stroke-width:1.5;stroke-dasharray:3 7;stroke-linecap:round}
.orb-arrow{fill:none;stroke:var(--zinc-400);stroke-width:1.8;stroke-linecap:round}

/* Le porte-articles tourne ; chaque article est contre-tourné pour rester droit. */
.orb-spin{position:absolute;inset:0;animation:orbSpin 26s linear infinite}
/* 🔴 12/09 (Adam : « quand elle passe vers la flèche, un booster de vitesse ») — ROTATION
   NON LINÉAIRE. Une rotation linéaire ne peut pas accélérer pour UN article en particulier :
   c'est le porte-articles entier qui tourne. Mais avec cinq articles régulièrement espacés, il
   y en a exactement un devant la flèche tous les 72°. On découpe donc le tour en cinq cycles
   identiques : 26° avalés en 6 % du temps (le coup d'accélérateur, pile au passage), puis 46°
   étalés sur les 14 % suivants. Chaque article reçoit son boost à son tour.
   La contre-rotation reproduit EXACTEMENT le même profil en négatif, sinon les vignettes
   se mettraient à pencher pendant l'accélération. */
@keyframes orbSpin{
  0%{transform:rotate(0deg)}      6%{transform:rotate(26deg)}    20%{transform:rotate(72deg)}
  26%{transform:rotate(98deg)}   40%{transform:rotate(144deg)}   46%{transform:rotate(170deg)}
  60%{transform:rotate(216deg)}  66%{transform:rotate(242deg)}   80%{transform:rotate(288deg)}
  86%{transform:rotate(314deg)} 100%{transform:rotate(360deg)}
}
@keyframes orbSpinRev{
  0%{transform:rotate(0deg)}      6%{transform:rotate(-26deg)}    20%{transform:rotate(-72deg)}
  26%{transform:rotate(-98deg)}  40%{transform:rotate(-144deg)}   46%{transform:rotate(-170deg)}
  60%{transform:rotate(-216deg)} 66%{transform:rotate(-242deg)}   80%{transform:rotate(-288deg)}
  86%{transform:rotate(-314deg)}100%{transform:rotate(-360deg)}
}

.orb-item{
  position:absolute;left:50%;top:50%;width:0;height:0;
  transform:rotate(var(--a)) translateY(-118px);
}
.orb-unrot{transform:rotate(calc(-1 * var(--a)))}
.orb-fix{animation:orbSpinRev 26s linear infinite}

.orb-card{
  position:relative;width:62px;height:62px;margin:-31px 0 0 -31px;
  border-radius:13px;overflow:hidden;background:var(--zinc-100);
  border:2.5px solid var(--zinc-200);box-shadow:0 4px 14px rgba(9,9,11,.18);
  animation:orbPop 26s linear infinite, orbCadre 26s linear infinite;
}
/* 🔴 12/09 (Adam : « un cadre autour de l'annonce, au début vert puis ça se grise ») —
   Le cadre dit l'âge de l'annonce sans qu'on ait à lire le compteur : vert franc juste après
   la republication, vert pâle, puis gris quand elle s'est enfoncée dans le fil. */
@keyframes orbCadre{
  0%   {border-color:#15803d}
  14%  {border-color:#22c55e}   /* le vert TIENT pendant tout le boost */
  32%  {border-color:#86efac}
  56%  {border-color:#d4d4d8}
  100% {border-color:#e4e4e7}   /* valeur littérale : une var() s'interpole mal en keyframe */
}
/* 🔴 12/09 — l'article VIEILLIT visuellement : vif juste après le boost, décoloré et éteint
   quand il a fini de s'enfoncer dans le fil. Avant, seul le cadre changeait. */
.orb-card img{width:100%;height:100%;object-fit:cover;display:block;
  animation:orbAge 26s linear infinite}
@keyframes orbAge{
  0%   {filter:saturate(1.1) brightness(1.04)}
  16%  {filter:saturate(1.05) brightness(1.02)}
  60%  {filter:grayscale(.55) brightness(.98)}
  100% {filter:grayscale(.8) brightness(.94)}
}

/* Le halo vert : l'article vient de repasser en tête du fil. */
.orb-flash{
  position:absolute;inset:0;border-radius:11px;pointer-events:none;
  box-shadow:0 0 0 0 rgba(21,128,61,0);
  animation:orbHalo 26s linear infinite;
}

/* Chaque carte éclate au moment PRÉCIS où elle passe en haut du cercle.
   Décalage = (période × angle) / 360, en négatif pour démarrer déjà engagé. */
/* nth-child(1) n'a pas besoin de décalage : il passe en haut à t=0. */
/* 🔴 12/09 (Adam : « les vues continuent à descendre pendant le boost ») — DÉCALAGES FAUX.
   Ils étaient de 4,8 s, calés sur un tour de 24 s ; le tour fait 26 s, donc 26/5 = 5,2 s.
   L'écart s'accumulait jusqu'à 1,6 s : la carte grossissait pendant que le compteur, lui,
   continuait de descendre. Une seule valeur fausse, et les deux signaux se contredisaient. */
.orb-item:nth-child(2) .orb-card,.orb-item:nth-child(2) .orb-flash{animation-delay:-5.2s,-5.2s}
.orb-item:nth-child(2) .orb-card img{animation-delay:-5.2s}
.orb-item:nth-child(3) .orb-card,.orb-item:nth-child(3) .orb-flash{animation-delay:-10.4s,-10.4s}
.orb-item:nth-child(3) .orb-card img{animation-delay:-10.4s}
.orb-item:nth-child(4) .orb-card,.orb-item:nth-child(4) .orb-flash{animation-delay:-15.6s,-15.6s}
.orb-item:nth-child(4) .orb-card img{animation-delay:-15.6s}
.orb-item:nth-child(5) .orb-card,.orb-item:nth-child(5) .orb-flash{animation-delay:-20.8s,-20.8s}
.orb-item:nth-child(5) .orb-card img{animation-delay:-20.8s}

/* 🔴 12/09 (Adam : « au passage du booster, la photo grossit, devient verte, et le boost de
   vues est beaucoup plus fort ») — Le pop passait de 1,24 à 1 en 6 % du tour : trop court et
   trop discret pour qu'on comprenne qu'il se passe quelque chose. Il monte maintenant à 1,48,
   TIENT pendant 10 % du tour, puis redescend lentement pendant que l'article vieillit. */
@keyframes orbPop{
  /* Pas de montée : la carte est DÉJÀ à sa taille maximale à 0 % — le boost est un événement,
     pas une accélération. Adam : « faut que ça fasse direct ». */
  0%   {transform:scale(1.48);box-shadow:0 12px 34px rgba(21,128,61,.34)}
  10%  {transform:scale(1.42);box-shadow:0 10px 30px rgba(21,128,61,.26)}
  26%  {transform:scale(1.06);box-shadow:0 5px 16px rgba(9,9,11,.2)}
  100% {transform:scale(1);box-shadow:0 4px 14px rgba(9,9,11,.16)}
}
@keyframes orbHalo{
  0%  {box-shadow:0 0 0 0 rgba(21,128,61,.55)}
  9%  {box-shadow:0 0 0 13px rgba(21,128,61,0)}
  100%{box-shadow:0 0 0 0 rgba(21,128,61,0)}
}

/* Le moyeu : ce autour de quoi tout tourne. */
.orb-hub{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:134px;height:134px;border-radius:50%;
  background:#fff;border:1px solid var(--border);box-shadow:var(--shadow-md);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  text-align:center;padding:10px;
}
.orb-hub-n{font-size:27px;font-weight:700;letter-spacing:-.03em;color:var(--zinc-950);line-height:1}
.orb-hub-l{font-size:10.5px;color:var(--zinc-500);line-height:1.32}

/* Les vues, sur chaque article : elles fondent pendant la descente, et repartent au passage
   de la flèche. C'est ce que la republication fait réellement — remonter l'article dans le fil. */
.orb-v{
  position:absolute;left:50%;bottom:-11px;transform:translateX(-50%);
  display:flex;align-items:center;gap:3px;white-space:nowrap;
  font-family:var(--font-mono);font-size:9.5px;font-weight:500;line-height:1;
  background:#fff;border:1px solid var(--border);border-radius:999px;padding:3px 6px;
  color:var(--zinc-500);box-shadow:0 1px 3px rgba(9,9,11,.1);
  transition:color .25s ease,border-color .25s ease,background .25s ease;
}
.orb-v svg{width:9px;height:9px;flex:none;opacity:.55}
.orb-v.chute{color:var(--zinc-400)}
.orb-v.boost{color:var(--success);border-color:#bbf7d0;background:var(--success-bg)}
.orb-v.boost svg{opacity:1}

@media (max-width:560px){
  .orb{width:min(278px,94%)}
  .orb-item{transform:rotate(var(--a)) translateY(-96px)}
  .orb-card{width:52px;height:52px;margin:-26px 0 0 -26px}
  .orb-hub{width:112px;height:112px}
  .orb-hub-n{font-size:23px}
}
/* Mouvement réduit : le cercle se fige, mais la composition reste lisible. */
@media (prefers-reduced-motion:reduce){
  .orb-spin,.orb-fix,.orb-card,.orb-flash{animation:none}
}

/* ── 3 · DÉPÔT PHOTOS → ANNONCES → PUBLICATION EN CHAÎNE (feature nº1) ── */
/* 🔴 12/09 — hauteur PLANCHER commune aux trois étapes. Sans elle, le bloc grandissait en
   passant du dossier (court) à la liste d'annonces (haute) : tout ce qui suit sursautait sous
   les yeux du visiteur au milieu de l'animation. `position:relative` pour l'étiquette démo. */
.fd{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:min(74vh,600px)}
.fd-tag{
  position:absolute;top:0;right:0;z-index:2;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--zinc-400);
  border:1px solid var(--border);border-radius:999px;padding:3px 9px;background:#fff;
}
.fd-step{display:flex;flex-direction:column;gap:14px;animation:fdIn .45s cubic-bezier(.33,1,.68,1) both}
/* 🔴 12/09 — BUG VU EN PRODUCTION : les trois étapes s'affichaient EN MÊME TEMPS. `display:flex`
   sur une classe (spécificité 0-1-0) l'emporte sur `[hidden]{display:none}` de la feuille de
   style du navigateur (0-0-1) : poser l'attribut `hidden` ne masquait donc rien.
   Un audit du fichier a trouvé QUATRE éléments dans ce cas (.fd-step, .fd-done, .fd-svg,
   .rcy-ring). Les corriger un par un aurait laissé le cinquième arriver au prochain ajout :
   la règle ci-dessous ferme la classe de bug entière, une fois pour toutes. */
[hidden]{display:none !important}
@keyframes fdIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ① dossier macOS : les photos tombent ENTRE le dos et la face avant */
.fd-folder{position:relative;width:236px;margin:118px auto 0;aspect-ratio:132/104}
.fd-svg{position:relative;width:100%;height:100%;display:block;
  filter:drop-shadow(0 10px 22px rgba(9,9,11,.16));z-index:1}
.fd-svg .fd-front{transition:transform .45s cubic-bezier(.33,1,.68,1);transform-origin:50% 100%}
.fd-folder.open .fd-svg .fd-front{transform:rotateX(34deg) translateY(4px)}
/* 🔴 12/09 (Adam : « qu'elles viennent de partout, plus grosses, un truc plus circulaire
   comme les republications ») — LES PHOTOS CONVERGENT EN SPIRALE. Avant, elles tombaient
   verticalement, une par une : une file d'attente, pas un vrac. Maintenant chaque photo naît
   à un angle tiré au hasard sur un grand cercle et rentre vers le dossier en courbe, par
   dizaines en même temps. Les coordonnées sont calculées en JS (le CSS ne sait pas faire de
   trigonométrie) et passées en variables ; l'animation reste du CSS composité par le GPU. */
.fd-photos{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:visible}
.fd-photos img{
  position:absolute;left:50%;top:50%;
  width:56px;height:56px;margin:-28px 0 0 -28px;
  object-fit:cover;border-radius:9px;
  border:2px solid #fff;box-shadow:0 6px 18px rgba(9,9,11,.22);
  opacity:0;will-change:transform,opacity;
}
@keyframes fdAspire{
  0%   {opacity:0; transform:translate(var(--x0),var(--y0)) rotate(var(--r0)) scale(1)}
  14%  {opacity:1}
  58%  {opacity:1; transform:translate(var(--xm),var(--ym)) rotate(calc(var(--r0) * .4)) scale(.82)}
  100% {opacity:0; transform:translate(0,0) rotate(0deg) scale(.18)}
}

.fd-count{
  position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);z-index:3;
  background:var(--zinc-950);color:#fff;font-size:11px;line-height:1;
  padding:5px 10px;border-radius:999px;white-space:nowrap;
  box-shadow:0 2px 8px rgba(9,9,11,.25);
}
.fd-cap{text-align:center;font-size:13.5px;color:var(--text-soft);line-height:1.5;margin:12px auto 0;max-width:38ch}
.fd-note{text-align:center;font-size:11px;color:var(--zinc-400)}

/* ③ LES ANNONCES EN GRILLE — une vignette carrée par article, comme un profil Vinted.
   🔴 12/09 : avant, trois lignes larges empilées. Une ligne pleine largeur par article, c'est
   la forme d'un tableau de gestion ; un dressing se regarde en grille. */
.fd-out-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.fd-out-t{font-size:14px;color:var(--zinc-700)}
.fd-out-t b{font-size:16px;font-weight:700;color:var(--zinc-950)}
.fd-prog{height:3px;border-radius:999px;background:var(--zinc-200);overflow:hidden;margin:-6px 0 0}
.fd-prog i{display:block;height:100%;width:0;background:var(--success);border-radius:999px;transition:width .35s ease}

/* 🔴 12/09 — le bloc prend désormais toute la largeur : en 3 colonnes, chaque vignette faisait
   361px de côté et la grille 1042px de haut, soit un mur d'images. `auto-fill` avec un minimum
   de 168px donne six vignettes sur une rangée en grand écran, et se replie tout seul ensuite. */
/* 🔴 12/09 (Adam : « pourquoi il y a une annonce toute seule, remets-la à côté ») —
   `auto-fill` calculait 5 colonnes à cette largeur : la sixième tombait seule à la ligne, et
   l'arc n'avait plus de sens. Six colonnes imposées, puis repli franc aux petites largeurs. */
.fd-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:13px}
@media (max-width:900px){ .fd-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:560px){ .fd-grid{grid-template-columns:repeat(2,1fr)} }
.fd-card{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--border);border-radius:14px;overflow:hidden;
  opacity:0;
  animation:fdRow .46s cubic-bezier(.33,1,.68,1) forwards;
  transition:border-color .3s,box-shadow .3s,transform .3s;
}
/* N'anime QUE l'opacité : toucher au transform écraserait la rotation posée par nth-child. */
@keyframes fdRow{to{opacity:1}}
.fd-card:hover{box-shadow:var(--shadow-md)}

.fd-card-ph{position:relative;aspect-ratio:1;background:var(--zinc-100);overflow:hidden}
.fd-card-ph img{width:100%;height:100%;object-fit:cover;display:block}

/* Le voile vert + la coche : la publication se voit SUR la carte. */
.fd-card-veil{
  position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(21,128,61,.72);color:#fff;
  opacity:0;transform:scale(.9);transition:opacity .3s ease,transform .3s ease;
}
.fd-card-veil svg{width:34px;height:34px;stroke-dasharray:26;stroke-dashoffset:26}
.fd-card.posted .fd-card-veil{opacity:1;transform:scale(1)}
.fd-card.posted .fd-card-veil svg{animation:fdCheck .45s .1s cubic-bezier(.33,1,.68,1) forwards}
@keyframes fdCheck{to{stroke-dashoffset:0}}

.fd-card-b{display:flex;flex-direction:column;gap:5px;padding:11px 12px 12px;flex:1}
.fd-card-t{
  font-family:var(--font-text);font-size:12.5px;font-weight:600;line-height:1.33;margin:0;
  color:var(--zinc-900);letter-spacing:-.005em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.fd-card-d{
  font-size:11px;line-height:1.42;color:var(--zinc-500);margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.fd-card-f{display:flex;align-items:baseline;gap:7px;margin-top:auto;padding-top:6px}
.fd-card-p{font-family:var(--font-mono);font-size:15px;font-weight:600;letter-spacing:-.02em;color:var(--zinc-950)}
.fd-card-sku{font-size:10.5px;color:var(--zinc-400);margin-left:auto}

.fd-st{
  display:inline-flex;align-items:center;gap:5px;align-self:flex-start;
  font-size:10.5px;font-weight:600;padding:2px 7px;border-radius:999px;white-space:nowrap;
  border:1px solid var(--border);background:var(--zinc-50);color:var(--zinc-500);
}
.fd-st i{width:5px;height:5px;border-radius:50%;background:var(--zinc-400);flex:none}
.fd-card.posting{border-color:var(--ai);box-shadow:0 0 0 3px var(--ai-soft)}
.fd-card.posting .fd-st{background:var(--ai-soft);color:var(--ai);border-color:#dbeafe}
.fd-card.posting .fd-st i{background:var(--ai);animation:ckPulse 1s ease-out infinite}
.fd-card.posted{border-color:#bbf7d0}
.fd-card.posted .fd-st{background:var(--success-bg);color:var(--success);border-color:#bbf7d0}
.fd-card.posted .fd-st i{background:var(--success)}

@media (max-width:440px){ .fd-card-t{font-size:11.5px} .fd-card-d{display:none} }

.fd-done{
  display:flex;align-items:center;gap:9px;
  background:var(--success-bg);border:1px solid #bbf7d0;border-radius:10px;
  padding:11px 13px;font-size:12.5px;line-height:1.45;color:var(--success);
}
.fd-done svg{flex:none;stroke:var(--success)}
.fd-done b{font-weight:700}

@media (max-width:560px){
  .fd{min-height:0}
  .fd-folder{width:172px}
  .fd-row{grid-template-columns:46px 1fr auto;gap:9px;padding:9px 10px}
  .fd-row img{width:46px;height:46px}
  .fd-row-t{font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .fd-step,.fd-row{animation:none;opacity:1;transform:none}
  .fd-photos img{animation:none!important}
  .fd-post.armed{animation:none}
}

/* ── 4 · LECTEUR VSL : chapitres DANS la barre, façon YouTube ─────────── */
.vp-bar{
  position:absolute;left:0;right:0;bottom:0;z-index:4;
  padding:26px 12px 9px;
  background:linear-gradient(to top,rgba(0,0,0,.78) 0%,rgba(0,0,0,.42) 55%,transparent 100%);
  opacity:1;transition:opacity .25s ease;
}
/* Pendant la lecture, la barre s'efface — et revient au survol, comme sur YouTube.
   `pointer-events:none` quand elle est invisible : sans ça, une barre à opacité 0 continue
   d'intercepter les clics sur le bas de la vidéo, et le visiteur croit que ça ne répond pas. */
.app:hover .vp-bar,.vp-bar:focus-within{opacity:1}
.vp-bar.playing{opacity:0;pointer-events:none}
.app:hover .vp-bar.playing,.vp-bar.playing:focus-within{opacity:1;pointer-events:auto}
/* Tactile : il n'y a pas de survol, donc la barre ne reviendrait jamais. On la laisse visible. */
@media (hover:none){
  .vp-bar.playing{opacity:1;pointer-events:auto}
}

.vp-scrub{position:relative;padding:7px 0;cursor:pointer;touch-action:none}
.vp-scrub:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:3px}
.vp-segs{display:flex;gap:2px;height:3px;transition:height .12s ease}
.vp-scrub:hover .vp-segs,.vp-scrub:focus-visible .vp-segs{height:5px}
.vp-seg{
  position:relative;flex:1 1 0;min-width:2px;height:100%;
  background:rgba(255,255,255,.28);border-radius:2px;overflow:hidden;
  transition:background .12s ease;
}
.vp-scrub:hover .vp-seg{background:rgba(255,255,255,.36)}
.vp-seg i{
  display:block;height:100%;width:0;border-radius:2px;
  background:#fff;transition:width .15s linear;
}
.vp-head{
  position:absolute;top:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;
  background:#fff;transform:translateY(-50%) scale(0);transform-origin:50% 50%;
  transition:transform .14s ease;box-shadow:0 1px 4px rgba(0,0,0,.5);pointer-events:none;
}
.vp-scrub:hover .vp-head,.vp-scrub:focus-visible .vp-head{transform:translateY(-50%) scale(1)}
.vp-tip{
  position:absolute;bottom:26px;transform:translateX(-50%);
  background:rgba(9,9,11,.94);color:#fff;white-space:nowrap;pointer-events:none;
  font-size:11.5px;font-weight:550;padding:5px 9px;border-radius:6px;
  box-shadow:0 4px 14px rgba(0,0,0,.4);
}

.vp-row{display:flex;align-items:center;gap:12px;margin-top:2px}
.vp-b{
  display:grid;place-items:center;width:30px;height:30px;flex:none;
  border:0;background:transparent;color:#fff;cursor:pointer;border-radius:6px;
  transition:background .14s ease;padding:0;
}
.vp-b:hover{background:rgba(255,255,255,.16)}
.vp-b:focus-visible{outline:2px solid #fff;outline-offset:2px}
.vp-b svg{width:19px;height:19px;display:block}
.vp-time{font-size:12px;color:#fff;letter-spacing:.01em;white-space:nowrap;flex:none}
.vp-time b{font-weight:500}
.vp-chap{
  font-size:12px;font-weight:600;color:#fff;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
  padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.16);
}
.vp-fs{margin-left:auto}

@media (max-width:560px){
  .vp-bar{padding:22px 9px 7px}
  .vp-chap{display:none}
  .vp-row{gap:9px}
}
@media (prefers-reduced-motion:reduce){
  .vp-bar,.vp-segs,.vp-seg,.vp-seg i,.vp-head{transition:none}
  .vp-bar.playing{opacity:1}
}


/* ── 🔴 12/09 (Adam : « pourquoi tu mets forcément l'animation dans un rectangle ? il faut
   qu'elle soit vraiment DANS le site ») — LE CADRE SAUTE POUR LA FEATURE Nº1.
   `.feat-visual` pose une bordure, un fond gris, une ombre et un `overflow:hidden` : ça
   transforme la démonstration en capture d'écran encadrée, posée à côté du texte. Sans cadre,
   l'animation se déroule sur le fond de la page — elle fait partie du site au lieu d'être une
   illustration de celui-ci. `overflow:visible` laisse les photos déborder pendant la chute. */
/* 🔴 12/09 — `min-height:0` posé ici (spécificité 0-2-0) écrasait silencieusement la hauteur
   déclarée sur `.fd` plus haut (0-1-0) : le bloc restait à 439px au lieu de 600, et le cercle
   de la section suivante remontait dans l'écran pendant que l'animation 1 jouait.
   La hauteur se déclare donc ICI, au même niveau de spécificité que la remise à zéro. */
.feat-visual.fd{
  border:0;background:transparent;box-shadow:none;overflow:visible;
  min-height:min(74vh,600px);padding:0;
}
/* 🔴 12/09 (Adam : « je veux que le numéro soit à côté de la phrase ») — le numéro et le
   libellé sur UNE ligne. Empilés, le « 01 » flottait seul au-dessus du vide. */
.fd-lead{display:flex;flex-direction:row;align-items:center;gap:14px;flex-wrap:wrap}
.fd-lead .feat-num{margin:0}
.fd-lead .feat-tag{margin:0}
.fd .fd-tag{top:-34px}
@media (max-width:720px){ .fd .fd-tag{top:-28px} }


/* ── SQUELETTE : la vignette arrive vide puis se remplit ─────────────────
   🔴 12/09 — remplace l'écran d'analyse. Le visiteur voit le contenu APPARAÎTRE, ce qui dit
   « l'IA vient d'écrire ça » bien mieux qu'une barre de progression ne le disait. */
.fd-card-t,.fd-card-d,.fd-card-f,.fd-card .fd-st{transition:opacity .34s ease}
.fd-card.remplissage .fd-card-t,
.fd-card.remplissage .fd-card-d,
.fd-card.remplissage .fd-card-f,
.fd-card.remplissage .fd-st{opacity:0}
.fd-card.remplissage .fd-card-b{position:relative}
.fd-card.remplissage .fd-card-b::before{
  content:"";position:absolute;left:12px;right:12px;top:13px;height:9px;border-radius:4px;
  background:linear-gradient(90deg,var(--zinc-100) 25%,var(--zinc-200) 50%,var(--zinc-100) 75%);
  background-size:220% 100%;animation:fdShine 1.15s linear infinite;
  box-shadow:0 16px 0 -1px var(--zinc-100),0 34px 0 -2px var(--zinc-100);
}
@keyframes fdShine{to{background-position:-220% 0}}

/* ── L'ENVOL VERS LE BADGE VINTED ────────────────────────────────────────
   🔴 12/09 (Adam : « je veux qu'elles s'envolent vers le petit logo Vinted ») — la vignette
   clonée part de la carte et rétrécit jusqu'au badge. C'est un clone en `position:fixed` :
   la grille ne bouge pas pendant le vol, et rien ne pousse la mise en page. */
.fd-fly{
  position:fixed;z-index:90;border-radius:12px;object-fit:cover;pointer-events:none;
  box-shadow:0 12px 34px rgba(9,9,11,.30);
  transition:transform .74s cubic-bezier(.5,0,.32,1), opacity .74s cubic-bezier(.6,0,.9,1);
  will-change:transform,opacity;
}
.fd-vinted{
  display:flex;align-items:center;gap:9px;justify-content:center;
  font-size:12px;color:var(--zinc-500);
}
.fd-vinted-badge{
  display:inline-flex;align-items:center;gap:7px;
  background:#fff;border:1px solid var(--border);border-radius:999px;padding:5px 11px 5px 6px;
  box-shadow:var(--shadow-xs);transition:transform .2s cubic-bezier(.33,1,.68,1);
}
.fd-vinted-badge img{border-radius:6px;display:block}
.fd-vinted-badge b{font-size:14px;font-weight:600;color:var(--zinc-950);min-width:10px;text-align:center}
.fd-vinted-badge.recu{animation:fdRecu .5s cubic-bezier(.33,1,.68,1)}
@keyframes fdRecu{
  0%  {transform:scale(1)}
  38% {transform:scale(1.16);box-shadow:0 0 0 7px rgba(0,119,130,.16)}
  100%{transform:scale(1)}
}
@media (prefers-reduced-motion:reduce){
  .fd-fly{display:none}
  .fd-card.remplissage .fd-card-b::before{animation:none}
  .fd-vinted-badge.recu{animation:none}
}

/* ── PHASE D'ANALYSE : les photos se rassemblent en grappes ──────────────
   🔴 12/09 — remplace définitivement la barre de progression. Six piles de photos, une par
   article : c'est le regroupement que fait l'IA, montré tel quel. */
.fd-scan-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.fd-scan-h b{font-size:14.5px;font-weight:600;color:var(--zinc-900)}
.fd-scan-h .mono{font-size:12px;color:var(--zinc-500);font-variant-numeric:tabular-nums}

/* ── LE SCAN : une barre traverse TOUTE la rangée d'articles ──────────────
   🔴 12/09 (Adam : « pas de zoom sur deux articles, une barre qui passe dessus, 1 à 2 s ») —
   Le panneau qui détaillait un article à la fois montrait 2 articles sur 6 et immobilisait la
   séquence 4 s. Ici un seul passage de 1,6 s sur les six, puis on enchaîne. Le rai est en teal
   pour qu'on l'identifie comme l'action de la machine, et pas comme un simple reflet. */
.fd-scan{position:relative}
.fd-scan::after{
  content:"";position:absolute;left:-4%;top:52px;width:26%;bottom:-4px;z-index:4;pointer-events:none;
  background:linear-gradient(100deg,
    transparent 0%, rgba(0,119,130,.10) 38%, rgba(0,119,130,.30) 48%,
    rgba(0,119,130,.92) 50%, rgba(0,119,130,.30) 52%, rgba(0,119,130,.10) 62%, transparent 100%);
  filter:blur(.4px);
  animation:fdScanBarre 1.6s cubic-bezier(.45,0,.3,1) .15s 2 both;
}
@keyframes fdScanBarre{
  0%  {left:-26%;opacity:0}
  12% {opacity:1}
  88% {opacity:1}
  100%{left:104%;opacity:0}
}
/* Les points de « scanne… » dans le titre de l'étape. */
#fdScanT{display:inline-flex;align-items:baseline;gap:3px}
#fdScanT i{
  width:4px;height:4px;border-radius:50%;background:var(--zinc-400);align-self:center;
  animation:fdDot 1.05s infinite;
}
#fdScanT i:nth-of-type(2){animation-delay:.16s}
#fdScanT i:nth-of-type(3){animation-delay:.32s}

/*(grille des grappes)*/
.fd-clusters{
  /* 🔴 12/09 — `1fr` créait huit colonnes pour six grappes : deux pistes vides et des piles
     étirées. Largeur bornée + centrage : six grappes calibrées, quelle que soit la largeur. */
  display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,148px));
  justify-content:center;gap:22px 16px;margin-top:24px;
}
.fd-cl{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  opacity:0;transform:translateY(14px) scale(.9);
  animation:fdClIn .55s cubic-bezier(.33,1,.68,1) forwards;
}
@keyframes fdClIn{to{opacity:1;transform:none}}

/* La pile : trois photos en éventail derrière la couverture. */
.fd-cl-pile{position:relative;width:92px;height:92px}
/* 🔴 12/09 (Adam : « quand les photos sont triées, fais une animation sympa ») — LES PHOTOS
   SE RANGENT. Chaque vignette de la pile arrive de loin, en désordre, puis se cale dans
   l'éventail : on voit le rangement se faire, au lieu de découvrir une pile déjà formée. */
.fd-cl-pile img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  border-radius:11px;border:2px solid #fff;box-shadow:0 3px 10px rgba(9,9,11,.16);
  animation:fdRange .62s cubic-bezier(.33,1,.68,1) both;
  animation-delay:calc(var(--k) * .09s);
}
@keyframes fdRange{
  0%  {opacity:0; transform:translate(calc((var(--k) - 1) * 46px), -34px) rotate(calc((var(--k) - 1) * 26deg)) scale(.8)}
  100%{opacity:1; transform:rotate(calc((var(--k) - 1) * 7deg)) translateY(calc(var(--k) * -2px))}
}
/* La couverture se pose en dernier, par-dessus la pile rangée. */
.fd-cl-top{animation:fdPose .5s .34s cubic-bezier(.33,1,.68,1) both}
@keyframes fdPose{
  0%  {opacity:0; transform:translateY(-22px) scale(1.14)}
  100%{opacity:1; transform:none}
}
/* Un balayage vert parcourt la grappe au moment où elle est constituée. */
.fd-cl-pile::after{
  content:"";position:absolute;inset:-3px;border-radius:13px;pointer-events:none;z-index:5;
  box-shadow:0 0 0 0 rgba(21,128,61,.5);
  animation:fdScanHalo .9s .78s ease-out both;
}
@keyframes fdScanHalo{
  0%  {box-shadow:0 0 0 0 rgba(21,128,61,.5)}
  100%{box-shadow:0 0 0 12px rgba(21,128,61,0)}
}
.fd-cl-top{
  position:absolute;inset:0;z-index:4;
  box-shadow:0 6px 18px rgba(9,9,11,.22)!important;
}
.fd-cl-l{
  display:flex;flex-direction:column;align-items:center;gap:1px;
  font-size:11.5px;font-weight:600;color:var(--zinc-800);text-align:center;line-height:1.3;
}
.fd-cl-l em{font-style:normal;font-family:var(--font-mono);font-size:10px;font-weight:400;color:var(--zinc-500)}

/* ── GRILLE EN ARC ────────────────────────────────────────────────────────
   🔴 12/09 (Adam, 3e passage : « c'est trop linéaire, un truc plus circulaire ») — les décalages
   irréguliers restaient une ligne brisée. Ici les six vignettes suivent une COURBE : creuse au
   centre, relevée aux extrémités, et chaque carte s'incline dans le sens de la tangente — comme
   des cartes posées en éventail. C'est le même vocabulaire circulaire que la republication. */
.fd-grid .fd-card{transform-origin:50% 120%}
.fd-grid .fd-card:nth-child(1){margin-top:52px;transform:rotate(-3.2deg)}
.fd-grid .fd-card:nth-child(2){margin-top:22px;transform:rotate(-1.8deg)}
.fd-grid .fd-card:nth-child(3){margin-top:3px; transform:rotate(-0.6deg)}
.fd-grid .fd-card:nth-child(4){margin-top:3px; transform:rotate(0.6deg)}
.fd-grid .fd-card:nth-child(5){margin-top:22px;transform:rotate(1.8deg)}
.fd-grid .fd-card:nth-child(6){margin-top:52px;transform:rotate(3.2deg)}
/* Au survol, la carte se redresse et sort de l'éventail. */
.fd-grid .fd-card:hover{transform:rotate(0deg) translateY(-7px);z-index:3}
@media (max-width:560px){
  .fd-grid .fd-card:nth-child(n){margin-top:0;transform:none}
}

@media (prefers-reduced-motion:reduce){
  .fd-scan::after{animation:none;opacity:0}
  .fd-cl{animation:none;opacity:1;transform:none}
  .fd-cl-pile img,.fd-cl-top,.fd-cl-pile::after{animation:none;opacity:1}
}

/* ── AGENT IA : la conversation se joue ─────────────────────────────────── */
.cv{display:flex;flex-direction:column;gap:12px;padding:16px;min-height:420px}
.cv-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-bottom:12px;border-bottom:1px solid var(--border)}
.cv-h-l{font-size:11.5px;color:var(--zinc-500)}
.cv-flux{
  display:flex;flex-direction:column;gap:10px;flex:1;
  overflow-y:auto;scroll-behavior:smooth;padding:2px;
}
.cv-b{
  max-width:84%;display:flex;flex-direction:column;gap:3px;
  padding:9px 12px;border-radius:14px;font-size:12.5px;line-height:1.45;
  animation:cvIn .34s cubic-bezier(.33,1,.68,1) both;
}
@keyframes cvIn{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
.cv-b.lui{align-self:flex-start;background:var(--zinc-100);color:var(--zinc-800);border-bottom-left-radius:5px}
.cv-b.moi{align-self:flex-end;background:var(--zinc-950);color:#fff;border-bottom-right-radius:5px}
.cv-qui{font-size:10px;font-weight:600;letter-spacing:.03em;opacity:.62;text-transform:uppercase}
.cv-t{display:block}

/* La contre-offre chiffrée : c'est l'acte commercial, il doit se détacher du texte. */
.cv-offre{
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
  border-radius:9px;padding:6px 10px;
}
.cv-offre span{font-size:10.5px;opacity:.8;letter-spacing:.02em}
.cv-offre b{font-size:15px;font-weight:600;letter-spacing:-.02em}
.cv-note{
  margin-top:5px;font-size:10px;opacity:.55;letter-spacing:.02em;font-style:italic;
}

/* Les points de saisie : le battement qui rend la scène crédible. */
.cv-saisie{flex-direction:row;gap:4px;padding:11px 13px;align-items:center}
.cv-saisie i{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.35;animation:cvPt 1.05s infinite}
.cv-saisie i:nth-child(2){animation-delay:.16s}
.cv-saisie i:nth-child(3){animation-delay:.32s}
.cv-saisie.moi i{background:#fff}
@keyframes cvPt{0%,62%,100%{opacity:.28;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.cv-fin{
  display:flex;align-items:center;gap:8px;
  background:var(--success-bg);border:1px solid #bbf7d0;border-radius:10px;
  padding:10px 12px;font-size:12.5px;color:var(--success);
}
.cv-fin svg{flex:none;stroke:var(--success)}
.cv-fin b{font-weight:700}

@media (max-width:560px){ .cv{min-height:380px} .cv-b{max-width:92%} }
@media (prefers-reduced-motion:reduce){ .cv-b{animation:none} .cv-saisie i{animation:none} }

/* Libellé « L'IA analyse les photos » pendant le remplissage des vignettes. */
.fd-analyse{display:inline-flex;align-items:baseline;gap:3px;font-size:16px;font-weight:700;color:var(--zinc-950)}
.fd-analyse i{width:4px;height:4px;border-radius:50%;background:var(--zinc-400);animation:fdDot 1.1s infinite;align-self:center}
.fd-analyse i:nth-of-type(2){animation-delay:.16s}
.fd-analyse i:nth-of-type(3){animation-delay:.32s}
@keyframes fdDot{0%,60%,100%{opacity:.25}30%{opacity:1}}


/* ── MISE EN PAUSE DE L'ORBITE — EN FIN DE FICHIER, VOLONTAIREMENT ───────────
   🔴 12/09 — Ces deux règles doivent venir APRÈS toutes les déclarations `animation:` en
   raccourci : le raccourci réinitialise `animation-play-state` à `running`, donc placées plus
   haut elles n'avaient aucun effet (constaté à la mesure : `running` alors que le bloc était
   au repos). Règle générale : une propriété longue se met toujours après son raccourci. */
.orb-spin,.orb-fix,.orb-card,.orb-flash,.orb-card img{animation-play-state:paused}
.rcy.actif .orb-spin,
.rcy.actif .orb-fix,
.rcy.actif .orb-card,
.rcy.actif .orb-flash,
.rcy.actif .orb-card img{animation-play-state:running}

/* ── AGENT : photo portée envoyée dans la conversation, et pastille de vente ──
   🔴 12/09 — La section s'intitule « le seul agent qui répond avec des photos portées » :
   il fallait qu'on voie la photo partir dans le fil, sinon la promesse n'était pas démontrée. */
.cv-photo{display:block;margin-top:8px;position:relative;border-radius:10px;overflow:hidden;max-width:190px}
.cv-photo img{display:block;width:100%;aspect-ratio:1;object-fit:cover;background:var(--zinc-800)}
.cv-photo em{
  position:absolute;left:6px;bottom:6px;font-style:normal;
  font-family:var(--font-mono);font-size:9.5px;line-height:1;
  background:rgba(9,9,11,.78);color:#fff;padding:4px 6px;border-radius:5px;
}
.cv-achat{
  display:inline-flex;align-items:center;gap:6px;margin-top:7px;align-self:flex-start;
  background:var(--success);color:#fff;font-size:11px;font-weight:700;letter-spacing:.01em;
  padding:4px 10px;border-radius:999px;
}
.cv-achat::before{content:"✓";font-weight:700}
/* Le fil s'allonge : on le borne et on le laisse défiler, sinon le bloc pousse la page. */
.cv-flux{max-height:430px}