/* displayhome — support de pitch.
   Jetons repris de display-home-v0/design-system/tokens.css (branche Demo-EN).

   Le corail est LA VOIX DE LA MACHINE : points qui pulsent, curseur de lecture,
   point voyageur, lavage de sélection. Jamais un bouton, jamais du texte courant.
   Sur clair, s'il doit s'écrire, il passe en --acc-ink (4,5:1).

   Mise à l'échelle : la scène est un plan fixe de 1920×1080 mis à l'échelle par
   transform (var --s, calculée par engine.js). Toutes les valeurs sont donc en px
   du plan de référence — ce qui rend le deck fidèle au PDF à n'importe quelle
   taille d'écran, sans clamp() ni vw partout.

   Deux familles d'animation cohabitent, et c'est délibéré :
   - les TRACÉS (filets qui se dessinent, pastilles qui apparaissent, lavages)
     passent par une classe + une transition CSS. Idempotents par construction :
     la classe est là ou elle ne l'est pas, la navigation arrière ne peut pas
     laisser un état à moitié joué.
   - les DÉPLACEMENTS mesurés au DOM (les points corail qui parcourent un fil)
     passent par GSAP, parce qu'ils ont besoin de lire une position réelle. */

:root{
  /* Clair */
  --canvas:#FFFCFA; --field:#FFFDFB; --panel:#FBEFE7;
  --hair:#F3E3D8; --hair-strong:#D9C4B4; --rule:#F5E9E0; --thread:#EBDDD2;
  /* Encre */
  --ink:#2B211B; --body:#57534E; --muted:#7A6A5E; --fine:#9A8B80;
  /* Sombre */
  --dark:#10100F; --on-dark:#FFF7F2; --on-dark-soft:#C9BDB3; --hair-dark:#3D3129;
  /* La planche de projection : un noir NEUTRE, plus froid et plus profond que le
     brun de la marque. C'est le fond du film — il ne doit rien colorer lui-même,
     c'est le halo tiré de la vidéo qui s'en charge. */
  --screen:#08080A;
  /* Accent */
  --acc:#FF6A45; --acc-ink:#B3401C; --acc-wash:#FFF0E9; --acc-hair:#FFC9B4;
  --green:#2E7D5B;
  /* Typo */
  --display:"Cormorant Garamond",Georgia,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,sans-serif;
  --dm:"DM Sans","Inter",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
  --pad:84px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:#0A0908;font-family:var(--sans);color:var(--body);overflow:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* ── Plan fixe mis à l'échelle ─────────────────────────────────────────── */
.deck{position:fixed;inset:0;display:flex;align-items:center;justify-content:center}
.stage{position:relative;width:1920px;height:1080px;flex:0 0 auto;
  transform:scale(var(--s,1));transform-origin:center center}

.scene{position:absolute;inset:0;padding:var(--pad);opacity:0;visibility:hidden;overflow:hidden}
.scene--light{background:var(--canvas);color:var(--body)}
.scene--dark{background:var(--dark);color:var(--on-dark-soft)}
/* La scène 8 bascule clair → planche de projection quand le film prend le cadre. */
.scene--swing{transition:background-color .7s var(--ease)}
.scene--swing.is-dark{background:var(--screen)}
.scene--swing.is-dark .mark img{filter:invert(1)}
.scene--swing.is-dark .wordmark{color:var(--on-dark)}
.scene--swing.is-dark .kicker{color:var(--on-dark-soft)}

/* Anti-FOUC : tout ce que l'engine ou un hook révèle reste caché avant que GSAP
   prenne la main. Les titres sont masqués par un clip, pas par l'opacité : c'est
   ce clip que l'entrée de scène ouvre par le bas. */
.js [data-step]{opacity:0;visibility:hidden}
.js .kicker--fixed,.js .mark--fixed{opacity:0}
.js .title{clip-path:inset(0 0 105% 0)}

/* ── Mobilier de planche ───────────────────────────────────────────────── */
.kicker{font-family:var(--mono);font-weight:400;font-size:19px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.kicker--fixed{position:absolute;top:64px;left:var(--pad)}
.kicker--dark{color:var(--on-dark-soft)}
.mark{display:flex;align-items:center;gap:11px}
.mark--fixed{position:absolute;top:58px;right:var(--pad)}
.mark img{width:27px;height:27px;display:block}
.mark--dark img{filter:invert(1)}
/* Les trois marques du rendez-vous — le studio, le produit, le client — dans le
   bandeau, maintenant que la cover qui les réunissait a sauté. Le trio suit
   partout : c'est lui qui dit à qui on parle, sur chaque planche. */
.mark img.mark__air{width:auto;height:20px;object-fit:contain;mix-blend-mode:multiply}
/* invert(1) sur le bleu marine du logo donne un doré : on le passe en blanc
   franc, qui est le rendu voulu sur la planche sombre. */
.mark--dark img.mark__air,.scene--swing.is-dark .mark img.mark__air{
  mix-blend-mode:normal;filter:brightness(0) invert(1)}
.mark__join{width:1px;height:26px;background:var(--hair-strong);margin:0 4px}
.mark__x{font-size:19px;color:var(--fine);margin:0 4px}
/* Le client passe en tête et prend du corps : c'est SA marque qui ouvre le
   bandeau, la nôtre suit. Le carré est le seul aplat de la ligne, il porte donc
   la hauteur du bloc. */
.mark__client{width:52px;height:52px;border-radius:13px;background:var(--dark);
  display:flex;align-items:center;justify-content:center;overflow:hidden;flex:0 0 auto}
/* Sur fond sombre le carré du client s'inverse, sinon il disparaît dans la
   planche — c'est le seul aplat du bandeau, il doit rester lisible des deux
   côtés de la bascule. */
.mark--dark .mark__client,.scene--swing.is-dark .mark__client{background:var(--on-dark)}
.mark--dark .mark__initials,.scene--swing.is-dark .mark__initials{color:var(--dark)}
.mark img.mark__clientlogo{width:100%;height:100%;object-fit:cover;display:none}
.mark--dark img.mark__clientlogo,.scene--swing.is-dark .mark img.mark__clientlogo{filter:none}
.mark img.mark__clientlogo.is-on{display:block}
.mark__clientlogo.is-on+.mark__initials{display:none}
.mark__initials{font-family:var(--display);font-weight:400;font-size:29px;
  color:var(--canvas);letter-spacing:.02em;line-height:1}
.wordmark{font-family:var(--dm);font-weight:400;font-size:26px;letter-spacing:-.5px;color:var(--ink)}
.wordmark b{font-weight:700}
.wordmark--lg{font-size:38px}
.wordmark--xl{font-size:58px}
.mark--dark .wordmark,.scene--dark .wordmark{color:var(--on-dark)}

.title{font-family:var(--display);font-weight:300;font-size:76px;line-height:1.06;
  color:var(--ink);letter-spacing:-.01em;position:absolute;top:130px;left:var(--pad);
  right:var(--pad);max-width:1500px}
.title--sm{font-size:64px}
.mono{font-family:var(--mono);font-size:19px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.fine{font-size:20px;color:var(--fine)}

/* Le point d'activité : la seule animation permanente du deck. */
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--acc);
  margin-right:11px;vertical-align:middle;animation:pulse 1.6s var(--ease) infinite}
.dot--green{background:var(--green);animation:none}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}

.foot{position:absolute;left:var(--pad);right:var(--pad);bottom:64px;font-size:22px;
  color:var(--muted);display:flex;align-items:center;gap:18px;
  border-top:1px solid var(--rule);padding-top:26px}
.foot__rule{width:36px;height:1px;background:var(--hair-strong);flex:0 0 auto}
.foot--pills{gap:28px}

.pills{display:inline-flex;gap:14px}
.pills span{font-family:var(--mono);font-size:18px;letter-spacing:.1em;color:var(--muted);
  border:1px solid var(--hair-strong);border-radius:999px;padding:9px 22px}

/* ═══ 1 · Cover ═════════════════════════════════════════════════════════ */

/* ═══ 7 · The listing ═══════════════════════════════════════════════════ */
.listing{position:absolute;top:282px;left:var(--pad);right:var(--pad);
  display:flex;gap:60px;align-items:flex-start}

.browser{width:640px;flex:0 0 auto;background:var(--field);border:1px solid var(--hair);
  border-radius:16px;overflow:hidden}
.browser__bar{display:flex;align-items:center;gap:16px;padding:16px 20px;
  border-bottom:1px solid var(--hair);background:var(--panel)}
.browser__dots{display:flex;gap:7px}
.browser__dots i{width:10px;height:10px;border-radius:50%;background:var(--hair-strong)}
.browser__url{position:relative;flex:1;background:var(--field);border:1px solid var(--hair);
  border-radius:999px;padding:9px 18px;font-family:var(--mono);font-size:16px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Le curseur de lecture : le corail qui balaie l'URL = l'agent lit l'offre. */
.browser__cursor{position:absolute;top:0;bottom:0;left:0;width:3px;background:var(--acc);
  opacity:0;transform:translateX(0)}
.browser__read{font-family:var(--mono);font-size:15px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--acc-ink);opacity:0;white-space:nowrap}
.browser__read .dot{margin:0 0 0 9px}
.browser__page{padding:22px}
.browser__hero{height:336px;border-radius:10px;background:var(--panel);overflow:hidden}
.browser__hero img{width:100%;height:100%;object-fit:cover;display:block}
.browser__meta{padding-top:20px}
.browser__name{font-family:var(--display);font-size:34px;font-weight:300;color:var(--ink)}
.browser__price{font-family:var(--mono);font-size:18px;color:var(--muted);margin-top:8px}
.browser__lines{display:block;margin-top:20px}
.browser__lines i{display:block;height:8px;border-radius:4px;background:var(--rule);margin-bottom:10px}
.browser__lines i:nth-child(1){width:88%}
.browser__lines i:nth-child(2){width:74%}
.browser__lines i:nth-child(3){width:52%}

/* La planche-contact. Les cellules sont posées par scene-hooks (une par photo). */
.sheet{display:grid;grid-template-columns:repeat(7,1fr);gap:9px;flex:1;align-content:start}
.sheet .cell{position:relative;aspect-ratio:3/2;border-radius:5px;overflow:hidden;
  background:var(--panel);border:1px solid var(--hair)}
.sheet .cell img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.sheet .cell .after{opacity:0}

.listing__caption{position:absolute;left:var(--pad);bottom:120px;font-family:var(--display);
  font-weight:300;font-size:46px;color:var(--ink)}

/* ═══ 8 · Photos → clips → film ═════════════════════════════════════════ */
.work__title .work__swap{font-style:italic;color:var(--muted)}
.work{position:absolute;top:276px;bottom:128px;left:var(--pad);right:var(--pad);
  display:flex;align-items:center}
.sheet--work{grid-template-columns:repeat(7,1fr);gap:11px;width:100%;transform-origin:50% 0}
/* Le remastering ne fait pas que nettoyer l'image : il RECADRE en 9:16. La
   planche se réorganise donc pour de bon — 7 colonnes de 3:2 deviennent 14
   colonnes de 9:16. C'est le geste qui dit le reformatage ; le recadrer dans
   des cases horizontales revenait à cacher la moitié de l'argument. */
.sheet--work.is-vertical{grid-template-columns:repeat(14,1fr);gap:10px}
.sheet--work.is-vertical .cell{aspect-ratio:9/16}
.work__label{position:absolute;left:var(--pad);bottom:76px}

/* La bande de clips : ce que l'agent tire des photos. */
.clipband{position:absolute;left:0;right:0;bottom:0;display:flex;gap:10px;
  justify-content:center;opacity:0}
.clipband video{width:112px;aspect-ratio:9/16;object-fit:cover;border-radius:8px;
  border:1px solid var(--hair);background:var(--panel);display:block}

/* Le film prend le cadre. Trois couches : le halo (le film lui-même, agrandi et
   flouté — c'est LUI qui donne sa couleur au fond), la vignette qui referme les
   bords, puis l'écran et le texte au-dessus. */
.film{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  gap:104px;opacity:0;visibility:hidden;padding:var(--pad)}
.film__halo{position:absolute;left:640px;top:540px;width:1020px;height:1020px;
  transform:translate(-50%,-50%);object-fit:cover;pointer-events:none;
  filter:blur(96px) saturate(1.6) brightness(.72);opacity:.62}
.film::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 78% at 33% 50%,rgba(8,8,10,0) 0%,rgba(8,8,10,.62) 58%,rgba(8,8,10,.94) 100%)}
.film__screen,.film__side{position:relative;z-index:2}
.film__screen{border-radius:26px;padding:7px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.11)}
.film__video{width:452px;aspect-ratio:9/16;max-height:816px;object-fit:cover;border-radius:20px;
  background:#000;display:block}
.film__side{width:540px}
.film__line{font-family:var(--display);font-weight:300;font-size:56px;line-height:1.12;
  color:var(--on-dark);margin-top:22px}
.film__fine{font-size:22px;color:var(--on-dark-soft);margin-top:26px}
.film__meta{display:flex;align-items:center;gap:16px;margin-top:44px;
  font-family:var(--mono);font-size:17px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--on-dark-soft);opacity:.75}
.film__meta i{width:4px;height:4px;border-radius:50%;background:currentColor;flex:0 0 auto}

/* ═══ 2 · From studio to product ════════════════════════════════════════ */
/* Plaques BASSES, pas des cartes. Le logo airmindcreation est un bandeau 8:1 :
   dans un carré de 318 px il flottait au milieu du vide. Le gabarit bas se lit
   comme une enseigne — et les 186 px rendus sont exactement la place où les
   secteurs et les marques viennent se déplier. */
.shift{position:absolute;top:266px;left:var(--pad);right:var(--pad);height:132px;
  display:flex;align-items:center;justify-content:space-between}
.shift__card{width:600px;height:132px;border-radius:16px;display:flex;align-items:center;
  justify-content:center;overflow:hidden}
.shift__card--studio{background:var(--field);border:1px solid var(--hair)}
.shift__card--studio img{width:74%;object-fit:contain;mix-blend-mode:multiply}
.shift__applogo{display:flex;align-items:center;gap:16px}
.shift__applogo img{width:46px;height:46px;filter:invert(1)}
.product__card .wordmark{color:var(--on-dark)}

/* Les deux colonnes tombent des deux plaques et s'étirent à la même hauteur.
   L'asymétrie est l'argument : cinq secteurs, quatre marques et cinq mois de
   montage à la main d'un côté, une seule ligne de l'autre. C'est le volume de
   travail qui se replie dans un produit — l'aligner aurait dit l'inverse. */
.shift__legend{position:absolute;top:452px;left:var(--pad);right:var(--pad);
  display:flex;justify-content:space-between;align-items:stretch;gap:120px}
.shift__col{display:flex;flex-direction:column}
.shift__col--studio{width:520px}
.shift__cap{margin-bottom:14px}
.shift__txt{font-size:24px;line-height:1.5;color:var(--body)}
.shift__txt--turn{margin-top:30px;color:var(--muted)}
/* ── La rangée des apps ────────────────────────────────────────────────
   Reprise de la tuile de l'écran Apps de display-home-v0
   (agent/agents/AgentCard.tsx + agent/ui/glyphs.tsx, branche
   demo-jamesedition). Le deck tient ses jetons du design system de l'app :
   --field = ds-surface-soft, --hair = ds-hairline, --acc-wash/-hair/-ink =
   les jetons d'accent. La tuile n'est donc pas RESSEMBLANTE, c'est la même,
   remise à l'échelle du plan de 1920 (facteur 1,19 sur le 74 px de l'app). */
.apps{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin-top:20px;
  padding-right:11px}
.app{display:flex;flex-direction:column;align-items:center;gap:16px}
.app__tile{position:relative;width:150px;height:150px;border-radius:44px;
  display:flex;align-items:center;justify-content:center;
  background:var(--field);border:1px solid var(--hair);color:var(--body);
  box-shadow:0 5px 14px rgba(43,33,27,.05)}
.app__glyph{width:78px;height:78px;display:block}
.app__name{font-size:19px;line-height:1.25;font-weight:500;color:var(--ink);text-align:center}
/* L'app principale porte le lavage corail — la même grammaire que la sélection
   d'outputs de la scène 4. Le corail ne décrit pas, il désigne. */
.app--lead .app__tile{background:var(--acc-wash);border-color:var(--acc-hair)}
.apps__lead{margin-top:34px;max-width:820px}
.apps__lead b{color:var(--ink);font-weight:600}

/* Un ours de générique : une ligne par secteur, un tiret de marge, rien d'autre.
   Aucun corail ici — c'est du travail humain, pas la voix de la machine. */
.sectors{list-style:none;margin-top:10px}
.sectors li{position:relative;padding:7px 0 7px 44px;
  font-family:var(--display);font-weight:300;font-size:40px;line-height:1.2;
  color:var(--ink);letter-spacing:.01em}
.sectors li::before{content:"";position:absolute;left:0;top:calc(50% - 1px);
  width:26px;height:1px;background:var(--hair-strong)}

.band{position:absolute;left:var(--pad);right:var(--pad);bottom:72px;
  padding-top:44px;display:flex;justify-content:space-between;align-items:flex-end;gap:70px}
.band__line{position:absolute;left:0;right:0;top:0;height:1px;background:var(--rule);
  transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease)}
.band.is-drawn .band__line{transform:scaleX(1)}
.band__kicker{margin-bottom:24px}
/* Les noms se lisent comme un ours de générique : filets verticaux, pas de gap mou. */
.clients{list-style:none;display:flex;align-items:baseline}
.clients{align-items:center}
.clients li{display:flex;align-items:center;justify-content:center;min-height:56px;
  font-family:var(--display);font-weight:400;font-size:32px;color:var(--ink);
  letter-spacing:.02em;white-space:nowrap;padding:2px 34px;
  font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1;
  border-left:1px solid var(--rule)}
.clients li:first-child{padding-left:0;border-left:0}
/* 52 px, pas 38 : un logo déposé porte sa marge dans le fichier, alors qu'un nom
   composé remplit sa boîte. À hauteur égale le logo paraît deux fois plus petit
   que le nom d'à côté — l'équilibre optique se règle ici et dans le canevas des
   fichiers (voir scripts/prepare-logos.py). */
.clients img{height:52px;width:auto;max-width:220px;object-fit:contain;display:block;
  mix-blend-mode:multiply}
/* Yves Saint Laurent monte seul : sa marque est un lettrage fin, qui se lit deux
   crans plus bas que le bloc plein de TF1 à hauteur de boîte égale. */
.clients li[data-logo="ysl"] img{height:72px;max-width:280px}

/* Sans le chiffre à sa gauche, la ligne n'a plus de raison de se replier sur
   940 px : elle tient sur un seul jet, et une conclusion se lit mieux d'une
   traite. */
.band__right{display:flex;align-items:flex-start;gap:28px;max-width:1400px}
.stat__txt{font-size:24px;line-height:1.5;color:var(--body)}
.stat__txt b{color:var(--ink);font-weight:600}

/* ═══ 3 · The core offering ═════════════════════════════════════════════ */
/* Emprunte .col / .col__head / .col__body / .arrow à la planche « One stable
   endpoint » ci-dessous : c'est la même grammaire — une colonne d'entrée, un
   tracé, une colonne de sortie — donc la salle n'a rien de neuf à apprendre
   quand elle y revient deux planches plus loin. */
.offer{position:absolute;top:266px;left:var(--pad);right:var(--pad);bottom:272px;
  display:flex;align-items:stretch;gap:56px}
.col--photos{width:620px}
.col--offers{flex:1 1 auto;min-width:0}

/* Les vraies photos de l'annonce, en petit. Douze suffisent à dire « des photos,
   rien d'autre » — la planche entière, c'est l'affaire de la scène 7. */
.offer__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.offer__grid .cell{position:relative;aspect-ratio:3/2;border-radius:5px;overflow:hidden;
  background:var(--panel);border:1px solid var(--hair)}
.offer__grid img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.offer__note{margin-top:28px;font-size:23px;line-height:1.5;color:var(--body)}
.offer__note b{color:var(--ink);font-weight:600}

/* Les deux sorties ne sont pas décrites, elles TOURNENT : la vignette de gauche
   est le clip réel, pas une capture. C'est ce qui sépare une promesse d'une
   démonstration, et ça ne coûte qu'un fichier déjà présent dans le dépôt. */
.offer__card{display:flex;align-items:center;gap:30px;padding:18px 0;
  border-top:1px solid var(--rule)}
.offer__card:first-child{border-top:0;padding-top:0}
.offer__card:last-child{padding-bottom:0}
.offer__video{width:116px;aspect-ratio:9/16;object-fit:cover;border-radius:8px;
  border:1px solid var(--hair);background:var(--panel);display:block;flex:0 0 auto}
.offer__n{font-family:var(--mono);font-size:17px;letter-spacing:.14em;color:var(--fine);
  margin-bottom:9px}
.offer__t{font-family:var(--display);font-weight:300;font-size:46px;line-height:1.04;
  color:var(--ink);letter-spacing:-.01em}
.offer__d{font-size:21px;line-height:1.5;color:var(--body);margin-top:12px;max-width:560px}

/* ═══ 4 · One stable endpoint ═══════════════════════════════════════════ */
.endpoint{position:absolute;top:266px;left:var(--pad);right:var(--pad);bottom:176px;
  display:flex;align-items:stretch;gap:30px}
.col{flex:0 0 auto;display:flex;flex-direction:column}
.col__body{flex:1;display:flex;flex-direction:column;justify-content:center}
.col--in{width:440px}
.col--agent{width:456px;position:relative}
.col--out{width:620px;position:relative}
.col__head{border-bottom:1px solid var(--hair-strong);padding-bottom:14px;margin-bottom:0;
  display:flex;align-items:center;justify-content:space-between;flex:0 0 auto}
.col__head--start{justify-content:flex-start}
.col__head .dot{width:8px;height:8px}
.col__head--acc{color:var(--acc-ink);font-weight:400}

/* Les flèches sont des tracés, pas des glyphes : elles se dessinent au moment où
   la donnée passe d'une colonne à l'autre. */
.arrow{position:relative;width:88px;height:10px;flex:0 0 auto;align-self:center}
.arrow__pulse{position:absolute;left:0;top:1px;width:7px;height:7px;border-radius:50%;
  background:var(--acc);opacity:0}
.arrow i{position:absolute;left:0;top:4px;height:1px;width:100%;background:var(--thread);
  display:block;transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.arrow::after{content:"";position:absolute;right:0;top:0;
  border-left:8px solid var(--thread);border-top:4px solid transparent;border-bottom:4px solid transparent;
  opacity:0;transition:opacity .3s .5s var(--ease)}
.arrow.is-drawn i{transform:scaleX(1)}
.arrow.is-drawn::after{opacity:1}

.incard{display:flex;gap:20px;align-items:flex-start;background:var(--field);
  border:1px solid var(--hair);border-radius:16px;padding:30px 30px}
.incard--dashed{border-style:dashed;background:transparent}
.incard__icon{width:30px;height:30px;flex:0 0 auto;color:var(--muted);margin-top:3px}
.incard__t{font-size:29px;font-weight:600;color:var(--ink)}
.incard__d{font-size:21px;color:var(--muted);margin-top:6px;line-height:1.4}
.incard__or{position:relative;text-align:center;margin:26px 0;
  font-family:var(--mono);font-size:16px;letter-spacing:.14em;text-transform:uppercase;color:var(--fine)}
.incard__or::before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:var(--rule)}
.incard__or span{position:relative;background:var(--canvas);padding:0 16px}

.agent{background:var(--dark);border-radius:20px;padding:36px 38px 40px;color:var(--on-dark-soft)}
.agent__name{margin:0 0 16px;color:var(--on-dark)}
.agent__d{font-size:22px;line-height:1.45;color:var(--on-dark-soft)}
.col--agent .pills{margin-top:26px;justify-content:center;width:100%}

.out__group{font-size:17px;margin:0 0 12px}
.col--out .out__group:first-of-type{margin-top:0}
.out{list-style:none;margin-bottom:26px}
.out__row{display:flex;align-items:center;gap:18px;font-size:26px;color:var(--ink);
  padding:15px 18px;border-radius:12px;border:1px solid transparent;
  border-bottom:1px solid var(--rule);transition:background-color .5s var(--ease),border-color .5s var(--ease)}
.out__n{font-family:var(--mono);font-size:19px;color:var(--fine)}
/* Le lavage de sélection : les services retenus pour ce client. Corail = signal. */
.out__row.is-pick{background:var(--acc-wash);border-color:var(--acc-hair);border-bottom-color:var(--acc-hair)}
.out__foot{font-size:20px;color:var(--muted);margin-top:8px}

/* ═══ 2 · L'argument de marché ══════════════════════════════════════════
   Le studio s'efface, « Real estate » monte de la liste des secteurs et
   devient le titre de ce qui suit : quatre constats qui disent pourquoi la
   vidéo manque là où on la réclame le plus. Le bloc vit au-dessus de la
   légende du studio — les deux ne sont jamais visibles en même temps, c'est
   le hook qui tient l'alternance. */
.market{position:absolute;top:286px;left:var(--pad);right:var(--pad)}
.market__anchor{position:relative;padding-left:44px;
  font-family:var(--display);font-weight:300;font-size:56px;line-height:1.1;
  color:var(--ink);letter-spacing:.01em}
/* Le tiret des secteurs le suit : c'est le MÊME repère, passé en corail parce
   que c'est de ce marché-là que la machine va parler. */
.market__anchor::before{content:"";position:absolute;left:0;top:calc(50% - 1px);
  width:26px;height:1px;background:var(--acc)}

.beats{list-style:none;margin-top:46px}
.beat{display:grid;grid-template-columns:64px 1fr;align-items:center;gap:30px;
  padding:34px 0;border-top:1px solid var(--rule)}
.beat__n{color:var(--fine)}
.beat__t{font-family:var(--display);font-weight:300;font-size:44px;line-height:1.14;
  color:var(--ink);letter-spacing:.01em}
.beat__t b{font-weight:400;color:var(--acc-ink)}
.beat__d{font-family:var(--mono);font-size:16px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fine);margin-top:12px}
/* Le mur : pas de courbe, parce que ce n'est pas une tendance. Il prend la
   largeur laissée par le graphique et pèse un cran de plus que les trois
   constats qui l'amènent. */
/* Seul le troisième constat garde un graphique : la jauge réserve donc sa
   colonne, les autres lignes prennent toute la largeur. */
.beat--meter{grid-template-columns:64px 1fr 300px}
.beat--wall{border-top-width:2px;border-top-color:var(--hair-strong)}
.beat--wall .beat__t{font-size:52px;font-weight:400}

/* La jauge EST la phrase en image : la part corail vaut les 80 à 90 % de photo.
   Elle pousse depuis la gauche, comme on lit la proportion. */
.gauge{position:relative;justify-self:end;width:300px;height:14px;border-radius:7px;
  background:var(--panel);overflow:hidden}
.gauge i{position:absolute;left:0;top:0;bottom:0;width:88%;background:var(--acc);
  transform:scaleX(0);transform-origin:left;transition:transform .8s .15s var(--ease)}
.beat.is-on .gauge i{transform:scaleX(1)}

/* ═══ 3 · Le produit ════════════════════════════════════════════════════
   La plaque et les cinq tuiles de l'ancienne planche Background, à
   l'identique — mais centrées : elles ne partagent plus le plan avec
   l'enseigne du studio, donc plus de bord sur lequel se caler. */
.title--center{text-align:center;left:var(--pad);right:var(--pad);max-width:none}
.product{position:absolute;top:296px;left:var(--pad);right:var(--pad);
  display:flex;flex-direction:column;align-items:center}
.product__card{width:600px;height:132px;border-radius:16px;background:var(--dark);
  display:flex;align-items:center;justify-content:center}
/* Deux établis séparés par un filet plein hauteur. Le départage se lit à la
   PLACE — un groupe, un vide, un groupe — et non à une étiquette posée sur le
   coin de chaque tuile : cinq pastilles alternées en rang se comptaient une à
   une, deux blocs se saisissent d'un coup. */
.kits{display:flex;align-items:stretch;justify-content:center;gap:64px;margin-top:88px}
.kits__split{width:1px;background:var(--hair);align-self:stretch}
.kit{display:flex;flex-direction:column}
.kit__head{border-bottom:1px solid var(--hair-strong);padding-bottom:14px;margin-bottom:34px}
.product .apps{display:flex;gap:44px;width:auto;margin-top:0;padding-right:0}
.product .apps__lead{margin-top:88px;max-width:1000px;text-align:center;font-size:26px}

/* ═══ 5 · Availability ══════════════════════════════════════════════════ */
.tl{position:absolute;top:400px;left:var(--pad);right:var(--pad)}
.tl__rail{display:block;position:relative;height:1px;background:var(--thread)}
.tl__fill{position:absolute;left:0;top:0;height:1px;width:100%;
  background:linear-gradient(90deg,var(--ink),var(--acc));
  transform:scaleX(var(--p,0));transform-origin:left;transition:transform .95s var(--ease)}
.tl__dot{position:absolute;top:-5px;left:0;width:11px;height:11px;border-radius:50%;
  background:var(--acc);opacity:0}
.tl__row{display:flex;gap:70px}
.tl__step{flex:1;position:relative;padding-top:44px}
/* Le jalon qui compte porte son propre fond : fin août est le message. */
.tl__wash{position:absolute;left:-30px;right:-30px;top:16px;bottom:-30px;border-radius:18px;
  background:var(--acc-wash);border:1px solid var(--acc-hair);opacity:0;
  transition:opacity .7s var(--ease)}
.tl__step--now.is-on .tl__wash{opacity:1}
.tl__step>p{position:relative;z-index:1}
.tl__pin{position:absolute;top:-6px;left:0;width:13px;height:13px;border-radius:50%;z-index:2;
  background:var(--canvas);border:2px solid var(--hair-strong);
  transform:scale(0);transition:transform .45s var(--ease)}
.tl__step.is-on .tl__pin{transform:scale(1)}
.tl__step:first-child .tl__pin{background:var(--ink);border-color:var(--ink)}
.tl__step--now .tl__pin{background:var(--acc);border-color:var(--acc)}
.tl__when{margin-bottom:18px}
.tl__step--now .tl__when{color:var(--acc-ink)}
.tl__what{font-size:38px;font-weight:600;color:var(--ink);line-height:1.16;margin-bottom:18px}
.tl__d{font-size:22px;line-height:1.55;color:var(--body)}

/* ═══ 6 · Trust ═════════════════════════════════════════════════════════ */
/* Trois garanties, donc trois colonnes : à deux colonnes la dernière carte
   restait seule sur sa rangée, à demi-largeur, et ce trou se lisait comme un
   oubli plutôt que comme une composition. */
.trust{position:absolute;top:300px;left:var(--pad);right:var(--pad);bottom:132px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:36px;align-content:center}
.trust__card{position:relative;border:1px solid var(--hair);border-radius:18px;
  padding:38px 40px 40px;background:var(--field);min-height:330px;overflow:hidden}
/* Un filet corail court en haut de la carte au moment où elle se pose. */
.trust__card::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--acc-hair);transform:scaleX(0);transform-origin:left;
  transition:transform .8s var(--ease)}
.trust__card.is-on::before{transform:scaleX(1)}
.trust__icon{width:36px;height:36px;color:var(--muted);display:block;margin-bottom:24px}
.trust__k{margin-bottom:16px}
.trust__t{font-size:34px;font-weight:600;color:var(--ink);margin-bottom:16px}
.trust__d{font-size:22px;line-height:1.55;color:var(--body)}

/* ═══ 9 · Demo ══════════════════════════════════════════════════════════ */
.demo{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:12px}
.demo__mark{display:flex;align-items:center;gap:18px}
.demo__mark .wordmark{color:var(--on-dark)}
.demo__mark img{width:62px;height:62px;filter:invert(1)}
.demo__title{position:static;font-size:132px;color:var(--on-dark);margin:20px 0 34px;text-align:center}
.demo__live{font-size:22px}
.livepill{display:inline-flex;align-items:center;border:1px solid var(--hair-dark);
  border-radius:999px;padding:12px 26px;font-family:var(--mono);font-size:18px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-soft)}

/* ── Progression ───────────────────────────────────────────────────────── */
.progress{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);display:flex;gap:10px;z-index:50}
.progress__dot{width:7px;height:7px;border-radius:50%;border:0;cursor:pointer;padding:0;
  background:rgba(122,106,94,.3);transition:transform .3s var(--ease),background .3s}
.progress__dot.is-active{background:var(--acc);transform:scale(1.5)}
.progress.is-dark .progress__dot{background:rgba(201,189,179,.3)}
.progress.is-dark .progress__dot.is-active{background:var(--acc)}

@media (prefers-reduced-motion:reduce){
  .dot{animation:none}
  .scene--swing,.band__line,
  .arrow i,.arrow::after,.tl__fill,.tl__pin,.tl__wash,.trust__card::before{transition:none}
}