/* Accueil AstraOS : ce qui n'appartient qu'a cette page. Les jetons et les
   composants (boutons, nav, cases, hachures, chiffres, carrousel, "Two
   ways", temoignage, appel, pied de page) sont dans design-system/, charge
   avant cette feuille ; DESIGN.md en donne les regles. Ici : le hero de la
   machine, le manifeste en defilement guide et sa regle graduee, et les
   retraits propres a chaque section de la page. Les valeurs sont celles de
   la maquette a 1600px de large (Figma Astra Home 5, 3356:3176). */

/* ---- hero -------------------------------------------------------------
   Figma Astra Home 5 (3430:3165, 02/10/2026). Sous la nav, deux cases de la
   largeur de la colonne, a 12 l'une de l'autre, de la nav et de la colonne :
   d'abord le titre, en capitales sur trois lignes, et a droite le
   sous-titre et les deux boutons, alignes sur le bord ; puis la boucle de
   la machine, en 1264 x 634. Dans les interstices, les hachures, un peu plus
   marquees que celles des marges (--hatch-mid), calees sur la meme trame.
   Les cotes suivent la largeur de la colonne (--u). La nuit, la boucle de
   nuit prend la place de celle du jour. */
.hero{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:var(--s-12);margin-top:var(--s-12)}
.hero::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:calc(-1 * var(--s-12));bottom:calc(-1 * var(--s-12));
  background:var(--hatch-mid) calc(-1 * var(--L)) calc(-1 * var(--nav-h)) / 8px 8px var(--page)}
.hero-card{display:flex;align-items:center;justify-content:space-between;gap:var(--s-16);
  padding:max(24px, 32 * var(--u)) max(20px, 44 * var(--u));background:var(--sec);border:var(--bw) solid var(--line)}
/* le hero apparait des le premier rendu (CSS seul), sans attendre astra.js */
.js .hero [data-in]{opacity:1;transform:none;animation:hero-in .8s var(--ease-reveal) both}
@keyframes hero-in{from{opacity:0;transform:translateY(18px)}}
.hero-t{max-width:calc(560 * var(--u));font-weight:400;font-size:var(--t-hero);line-height:1.31;letter-spacing:var(--tr-display);
  text-transform:uppercase;color:var(--ink);text-shadow:var(--title-shadow);text-wrap:pretty}
.hero-side{display:flex;flex-direction:column;align-items:flex-end;gap:var(--s-16)}
.hero-sub{width:400px;max-width:100%;font-size:var(--t-sub);line-height:1.4;letter-spacing:var(--tr-ui);color:var(--ink);
  text-align:right;text-wrap:balance}   /* cale a droite comme la pastille et les boutons, en deux lignes egales (Elio, 05/10/2026) */
.hero-side .btns{justify-content:flex-end}
/* de 1000 a 1099 px, See the work a sa largeur de texte : les trois boutons
   retiennent une ligne des 1050 px malgre "Free design check" */
@media (min-width:1000px) and (max-width:1099px){.hero-see{width:auto}}
.hero-visual{position:relative;height:calc(634 * var(--u));overflow:hidden;background:var(--sec);border:var(--bw) solid var(--line)}
.hero-visual>video,.hero-visual>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
/* le filigrane : au survol, un carre elastique montre la meme image en traits
   (home.js, 1b). Le dessin se fait dans ce canevas, par-dessus la video. */
.hero-lens{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero-visual.is-lens{cursor:none}
.hero+.column{margin-top:var(--s-12)}

/* ---- rythme des sections (Elio, 04/10/2026) ----------------------------
   164 au-dessus de chaque section, 0 dessous ; le titre garde ses 56 a
   l'interieur. Sous 1000 px, le rythme mobile d'astra.css. */
@media (min-width:1000px){
  .work,.do,.quotes,.manifesto,.hiw,.how,.team{padding-top:164px}
}

/* ---- selected work : la section ----------------------------------------
   Figma 3356:3728 : 160 au-dessus, 12 de chaque cote (.sec-open, astra.css) ;
   le carrousel lui-meme (titre, fleches, piste, cartes) est un composant du
   design system. */

/* ---- manifeste : le probleme, a lire -----------------------------------------
   D'apres reboot.studio (05/10/2026), a la taille du manifeste en une phrase.
   Le texte gris passe a l'encre mot a mot au fil du defilement (home.js 4) ;
   sans script ou en mouvement reduit, tout est a l'encre et les objets
   sont poses. Objets dans la phrase (.man-obj), bulle noire au survol
   (.man-tip). */
.man-note{padding:96px var(--s-48) 104px}
.man-read{display:flex;flex-direction:column;gap:.62em;max-width:24em;font-size:clamp(28px,3.1vw,44px);line-height:1.32;letter-spacing:var(--tr-display);color:var(--ink-2)}
.man-p{margin:0;padding:0;font:inherit;letter-spacing:inherit;color:inherit;text-wrap:pretty}
.man-read.is-reading .mw{color:var(--warm);transition:color .35s ease-out}
.man-read.is-reading .mw.is-on{color:var(--ink-2)}
.man-obj{position:relative;display:inline-flex;vertical-align:-.2em;margin:0 .06em}
/* la bulle : noire, au-dessus de l'objet, en texte d'interface */
.man-tip{position:absolute;left:50%;bottom:calc(100% + 10px);z-index:5;display:flex;gap:6px;padding:9px 14px;border-radius:999px;background:#111;color:#fff;font:500 14px/1 var(--f);letter-spacing:0;white-space:nowrap;pointer-events:none;opacity:0;transform:translate(-50%,6px);transition:opacity .2s ease-out,transform .45s cubic-bezier(.19,1,.22,1)}
.man-tip i{font-style:normal;opacity:.55}
.man-ico:hover>.man-tip,.man-face:hover>.man-tip,.man-ring:hover>.man-tip,.man-tipw:hover>.man-tip{opacity:1;transform:translate(-50%,0)}
.man-tipw{position:relative;cursor:default}
/* outils : icones d'app */
.man-ico{width:1.1em;height:1.1em;transition:transform .45s cubic-bezier(.34,1.56,.64,1),opacity .3s ease-out}
.man-chip{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:.26em;background:#fff;color:#0d0d0d;box-shadow:0 0 0 .5px rgba(0,0,0,.14),0 1px 2px rgba(0,0,0,.1),0 4px 10px -4px rgba(0,0,0,.2);transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.man-chip svg{width:.6em;height:.6em;display:block;fill:currentColor}
.man-ico:hover>.man-chip{transform:translateY(-.1em) rotate(-6deg)}
/* deck : trois diapositives qui se feuillettent */
.man-deck{width:1.6em;height:1em;margin:0 .14em}
.man-deck img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:.1em;box-shadow:0 0 0 .5px rgba(0,0,0,.12),0 4px 10px -4px rgba(0,0,0,.3)}
.man-deck img:nth-child(1){z-index:3;transform:rotate(-3deg)}
.man-deck img:nth-child(2){z-index:2;transform:translateY(-.08em) rotate(3deg) scale(.92)}
.man-deck img:nth-child(3){z-index:1;transform:translateY(-.16em) rotate(7deg) scale(.84)}
@media (prefers-reduced-motion:no-preference){
  .man-deck img{animation:man-deck 6.6s cubic-bezier(.65,0,.35,1) infinite}
  .man-deck img:nth-child(2){animation-delay:-4.4s}
  .man-deck img:nth-child(3){animation-delay:-2.2s}
  .man-read.is-reading .man-deck:not(.is-on) img,.man-deck:hover img{animation-play-state:paused}
}
@keyframes man-deck{
  0%,27%{z-index:3;opacity:1;transform:rotate(-3deg)}
  33%{z-index:3;opacity:0;transform:translateX(.9em) translateY(-.1em) rotate(16deg)}
  33.4%{z-index:1;opacity:0;transform:translateY(-.16em) rotate(7deg) scale(.84)}
  40%,60%{z-index:1;opacity:1;transform:translateY(-.16em) rotate(7deg) scale(.84)}
  66.6%,93%{z-index:2;opacity:1;transform:translateY(-.08em) rotate(3deg) scale(.92)}
  100%{z-index:3;opacity:1;transform:rotate(-3deg)}
}
/* les cinq pieces de la marque : elles derivent a « drifts », se realignent a « steer » */
.man-dw{display:inline-block;transition:transform .7s cubic-bezier(.34,1.56,.64,1),color .35s ease-out,letter-spacing .5s ease-out,margin .5s ease-out}
.man-read.is-drift:not(.is-steer) .man-dw.d1{font-family:Georgia,'Times New Roman',serif;font-style:italic;transform:translateY(-.1em) rotate(-4deg)}
.man-read.is-drift:not(.is-steer) .man-dw.d2{font-family:ui-monospace,Menlo,monospace;font-size:.78em;text-transform:uppercase;transform:translateY(.04em)}
.man-read.is-drift:not(.is-steer) .man-dw.d3{color:var(--accent);transform:translateY(-.06em) rotate(5deg)}
.man-read.is-drift:not(.is-steer) .man-dw.d4{font-weight:300;letter-spacing:.08em;margin-right:-.08em;transform:translateY(.12em)}
.man-read.is-drift:not(.is-steer) .man-dw.d5{font-family:'Instrument Sans',var(--f);transform:translateY(.06em) rotate(-6deg)}
/* l'equipe : quatre visages qui sortent l'un apres l'autre */
.man-faces{margin:0 .1em 0 .04em}
.man-face{position:relative;display:block;width:1.12em;height:1.12em;margin-left:-.3em;border-radius:50%;box-shadow:0 0 0 .07em var(--sec);transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.man-face:first-child{margin-left:0}
.man-face img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}
.man-face:hover{z-index:2;transform:translateY(-.12em)}
.man-read.is-reading .man-faces:not(.is-on) .man-face{transform:scale(0)}
.man-face:nth-child(2){transition-delay:.06s}.man-face:nth-child(3){transition-delay:.12s}.man-face:nth-child(4){transition-delay:.18s}
.man-face:hover{transition-delay:0s}
/* on brand : l'anneau se remplit, la coche se trace */
.man-ring{width:1em;height:1em;margin-left:.12em}
.man-ring svg{width:100%;height:100%;display:block;overflow:visible;transform:rotate(-90deg)}
.man-ring circle{fill:none;stroke-width:3}
.man-ring-t{stroke:var(--line)}
.man-ring-f{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:0;transition:stroke-dashoffset 1.2s cubic-bezier(.65,0,.35,1)}
.man-ring-c{fill:none;stroke:var(--ink-2);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;transform:rotate(90deg);transform-origin:18px 18px;transition:stroke-dashoffset .45s ease-out 1s}
.man-read.is-reading .man-ring:not(.is-on) .man-ring-f{stroke-dashoffset:100}
.man-read.is-reading .man-ring:not(.is-on) .man-ring-c{stroke-dashoffset:1}
/* en lecture, les objets arrivent quand le texte les atteint */
.man-read.is-reading .man-ico:not(.is-on),.man-read.is-reading .man-deck:not(.is-on){opacity:.35;transform:scale(.72) rotate(-8deg)}
.man-read.is-reading .man-deck{transition:transform .5s cubic-bezier(.34,1.56,.64,1),opacity .3s ease-out}

/* ---- here's how it works : defilement guide -----------------------------
   L'ancien defilement du manifeste, sur six temps (.guided) : chaque temps a
   son libelle (quote), sa phrase en lead, la premiere voix en ink-2 et la
   seconde en quote (le warm du manifeste est sous AA), et la rangee des
   outils ou il se passe, en monochrome. */
.man-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 32px;flex-wrap:wrap}
/* La section tient dans une case collee au milieu de l'ecran sous la nav,
   a la hauteur de la regle (--rh), pendant tout le defilement de la piste
   (.man-scroll). A gauche, les temps defilent dans la case : chacun y monte,
   s'arrete au milieu un moment, puis repart (home.js) ; a droite, le
   panneau de la machine, separe par un trait. */
.guided{--rh:min(calc(100vh - var(--nav-top) - var(--nav-h) - 48px), 867px);
  --rt:calc(var(--nav-top) + var(--nav-h) + (100vh - var(--nav-top) - var(--nav-h) - var(--rh)) / 2)}
.man-scroll{position:relative;height:calc(var(--rh) + 240vh)}
.man-box{position:sticky;top:var(--rt);height:var(--rh);display:grid;grid-template-columns:minmax(0,622fr) minmax(0,617fr)}
.man-text{position:relative;overflow:hidden;
  -webkit-mask:linear-gradient(transparent,#000 14%,#000 86%,transparent);
  mask:linear-gradient(transparent,#000 14%,#000 86%,transparent)}
.man-steps{list-style:none;margin:0;padding:0;will-change:transform}
/* Figma : 24 / 31, Geist regular, a 32 de la regle (elle-meme de 32) */
.man-step{height:var(--rh);display:flex;align-items:center;padding:0 32px 0 64px;
  font-weight:400;font-size:var(--t-lead);line-height:1.29;letter-spacing:var(--tr-display);color:var(--warm);
  opacity:.4;transition:opacity .45s ease}
.man-step.is-on{opacity:1}
.man-step-in{display:flex;flex-direction:column;gap:24px}
.man-step b{font-weight:400;color:var(--ink-2)}
.man-step p{max-width:22em}
.man-step-copy{display:flex;flex-direction:column;gap:var(--s-12)}
.nw{white-space:nowrap}
.hiw .man-step{color:var(--quote)}
.hiw .man-step p{text-wrap:pretty}
.man-eyebrow{font-size:var(--t-body);line-height:1.3;letter-spacing:var(--tr-ui);color:var(--quote)}
.man-tools{display:flex;flex-wrap:wrap;gap:var(--s-16);margin-top:var(--s-8);color:var(--ink-2)}
/* les logos dans leurs couleurs (Elio, 04/10/2026), posees dans les symboles ;
   X et OpenAI, marques noires, a l'encre */
.man-tool{display:block;width:22px;height:22px;fill:currentColor}
/* six temps : la piste s'allonge pour qu'ils gardent le meme pas */
.hiw .man-scroll{height:calc(var(--rh) + 420vh)}
.man-step-img{display:none}
/* la boucle, collee au milieu de l'ecran sous la nav, change en fondu */
.man-stage{position:relative;overflow:hidden;border-left:var(--bw) solid var(--line);background:var(--cell)}
.man-frame{position:absolute;inset:0;margin:0}
/* La scene est une toile de 1792 x 1400 (celle des rendus de la chaine,
   qui la traversent d'un bord a l'autre), un peu plus large que le panneau
   et centree dedans. Les boucles de 1392 x 960 y sont posees chacune a sa
   place (--l, --t : le sujet au centre de la toile). Sous chaque boucle,
   son trace au sol (.hiw-sol), calcule sur la geometrie de la scene :
   couloir, cases, place vide. Il change en fondu avec le temps. */
.hiw .hiw-v{position:relative;aspect-ratio:1792/1400}
.man-frame .hiw-v{position:absolute;left:50%;top:50%;width:120%;transform:translate(-50%,-50%)}
.hiw .man-loop{left:var(--l);top:var(--t);width:77.68%;height:68.571%}
/* la chaine (Production, Quality) : rendue sur toute la toile */
.hiw .man-loop.is-grand{width:100%;height:100%}
.hiw-sol{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;opacity:0;transition:opacity .15s ease}
.hiw-sol.is-on{opacity:1;transition:opacity .45s ease .2s}
.sol-l{fill:none;stroke:var(--ink-2);stroke-opacity:.34;stroke-width:2.2;stroke-dasharray:9 8}
.sol-f{stroke-opacity:.2}
.sol-s{fill:none;stroke:var(--ink-2);stroke-opacity:.5;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.sol-m{fill:var(--ink-2);fill-opacity:.55}
/* Changement de temps : la machine sortante rentre dans le sol, la
   suivante en sort. Pendant le mouvement, la boucle n'est
   visible qu'au-dessus du contour du bas de sa machine au repos (socle,
   rampe, pieces au sol : media/man-*-mask.png et sil.py du pack) ; une
   fois sortie (.is-up), la decoupe s'ouvre sur toute la boucle en meme
   temps que les cercles se redeploient. */
.man-fig{transition:clip-path .15s cubic-bezier(.55,0,.8,.2)}
.man-fig.is-up{transition:clip-path .2s var(--ease)}
/* pendant le mouvement, la video est aussi masquee a la silhouette de la
   machine (union de ses images, sans l'ombre) : l'ombre reste a la surface,
   elle s'efface avant que la machine ne rentre et reapparait en fondu une
   fois la suivante en place (--sh) */
@property --sh{syntax:'<number>';inherits:true;initial-value:1}
.man-fig video{--sh:0;--shm:linear-gradient(rgb(0 0 0 / var(--sh)),rgb(0 0 0 / var(--sh)));
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;transition:--sh .07s linear}
.man-fig.is-up video{--sh:1;transition:--sh .2s ease}
.fig-create{clip-path:polygon(3.62% -6.00%,97.18% -6.00%,97.18% 95.92%,95.70% 95.92%,94.21% 95.92%,92.73% 95.92%,91.24% 95.92%,89.76% 95.92%,88.27% 95.92%,86.79% 95.92%,85.30% 95.92%,83.82% 95.92%,82.33% 95.92%,80.85% 95.92%,79.36% 95.92%,77.88% 95.92%,76.39% 90.00%,74.91% 84.92%,73.42% 78.42%,71.94% 78.42%,70.45% 78.42%,68.97% 73.50%,67.48% 72.00%,66.00% 71.08%,64.51% 72.42%,63.03% 73.58%,61.54% 74.67%,60.06% 75.58%,58.57% 76.42%,57.09% 77.17%,55.60% 77.83%,54.12% 78.42%,52.63% 78.92%,51.14% 79.42%,49.66% 79.75%,48.17% 80.08%,46.69% 80.33%,45.20% 80.58%,43.72% 80.75%,42.23% 80.83%,40.75% 80.92%,39.26% 80.92%,37.78% 80.92%,36.29% 80.92%,34.81% 80.92%,33.32% 80.83%,31.84% 80.67%,30.35% 80.50%,28.87% 80.25%,27.38% 80.00%,25.90% 79.67%,24.41% 79.25%,22.93% 78.75%,21.44% 78.25%,19.96% 77.58%,18.47% 76.92%,16.99% 76.17%,15.50% 75.33%,14.02% 74.33%,12.53% 74.17%,11.05% 72.00%,9.56% 70.58%,8.08% 69.00%,6.59% 67.17%,5.11% 64.92%,3.62% 64.92%)}
.fig-create.is-up{clip-path:polygon(0.00% -6.00%,100.00% -6.00%,100.00% 100.00%,95.70% 100.00%,94.21% 100.00%,92.73% 100.00%,91.24% 100.00%,89.76% 100.00%,88.27% 100.00%,86.79% 100.00%,85.30% 100.00%,83.82% 100.00%,82.33% 100.00%,80.85% 100.00%,79.36% 100.00%,77.88% 100.00%,76.39% 100.00%,74.91% 100.00%,73.42% 100.00%,71.94% 100.00%,70.45% 100.00%,68.97% 100.00%,67.48% 100.00%,66.00% 100.00%,64.51% 100.00%,63.03% 100.00%,61.54% 100.00%,60.06% 100.00%,58.57% 100.00%,57.09% 100.00%,55.60% 100.00%,54.12% 100.00%,52.63% 100.00%,51.14% 100.00%,49.66% 100.00%,48.17% 100.00%,46.69% 100.00%,45.20% 100.00%,43.72% 100.00%,42.23% 100.00%,40.75% 100.00%,39.26% 100.00%,37.78% 100.00%,36.29% 100.00%,34.81% 100.00%,33.32% 100.00%,31.84% 100.00%,30.35% 100.00%,28.87% 100.00%,27.38% 100.00%,25.90% 100.00%,24.41% 100.00%,22.93% 100.00%,21.44% 100.00%,19.96% 100.00%,18.47% 100.00%,16.99% 100.00%,15.50% 100.00%,14.02% 100.00%,12.53% 100.00%,11.05% 100.00%,9.56% 100.00%,8.08% 100.00%,6.59% 100.00%,5.11% 100.00%,0.00% 100.00%)}
.fig-create video{-webkit-mask-image:url(media/man-create-mask.png),var(--shm);mask-image:url(media/man-create-mask.png),var(--shm)}
.fig-drift{clip-path:polygon(3.62% -6.00%,94.89% -6.00%,94.89% 92.00%,93.44% 92.00%,91.99% 92.42%,90.54% 92.75%,89.09% 92.75%,87.64% 92.75%,86.19% 92.58%,84.74% 86.25%,83.30% 85.58%,81.85% 85.58%,80.40% 95.92%,78.95% 95.92%,77.50% 95.92%,76.05% 95.92%,74.60% 95.92%,73.16% 92.83%,71.71% 92.83%,70.26% 92.67%,68.81% 73.25%,67.36% 71.83%,65.91% 71.08%,64.46% 72.50%,63.01% 73.58%,61.57% 74.67%,60.12% 75.50%,58.67% 76.33%,57.22% 77.08%,55.77% 77.75%,54.32% 78.33%,52.87% 78.83%,51.43% 79.33%,49.98% 79.67%,48.53% 80.00%,47.08% 80.33%,45.63% 80.50%,44.18% 80.67%,42.73% 80.83%,41.29% 80.83%,39.84% 80.92%,38.39% 80.92%,36.94% 80.92%,35.49% 80.92%,34.04% 80.83%,32.59% 80.75%,31.14% 80.58%,29.70% 80.42%,28.25% 80.17%,26.80% 79.83%,25.35% 79.50%,23.90% 79.08%,22.45% 78.58%,21.00% 78.08%,19.56% 77.42%,18.11% 76.75%,16.66% 75.92%,15.21% 75.08%,13.76% 74.17%,12.31% 74.17%,10.86% 71.83%,9.42% 70.42%,7.97% 68.92%,6.52% 67.00%,5.07% 64.75%,3.62% 64.75%)}
.fig-drift.is-up{clip-path:polygon(0.00% -6.00%,100.00% -6.00%,100.00% 100.00%,93.44% 100.00%,91.99% 100.00%,90.54% 100.00%,89.09% 100.00%,87.64% 100.00%,86.19% 100.00%,84.74% 100.00%,83.30% 100.00%,81.85% 100.00%,80.40% 100.00%,78.95% 100.00%,77.50% 100.00%,76.05% 100.00%,74.60% 100.00%,73.16% 100.00%,71.71% 100.00%,70.26% 100.00%,68.81% 100.00%,67.36% 100.00%,65.91% 100.00%,64.46% 100.00%,63.01% 100.00%,61.57% 100.00%,60.12% 100.00%,58.67% 100.00%,57.22% 100.00%,55.77% 100.00%,54.32% 100.00%,52.87% 100.00%,51.43% 100.00%,49.98% 100.00%,48.53% 100.00%,47.08% 100.00%,45.63% 100.00%,44.18% 100.00%,42.73% 100.00%,41.29% 100.00%,39.84% 100.00%,38.39% 100.00%,36.94% 100.00%,35.49% 100.00%,34.04% 100.00%,32.59% 100.00%,31.14% 100.00%,29.70% 100.00%,28.25% 100.00%,26.80% 100.00%,25.35% 100.00%,23.90% 100.00%,22.45% 100.00%,21.00% 100.00%,19.56% 100.00%,18.11% 100.00%,16.66% 100.00%,15.21% 100.00%,13.76% 100.00%,12.31% 100.00%,10.86% 100.00%,9.42% 100.00%,7.97% 100.00%,6.52% 100.00%,5.07% 100.00%,0.00% 100.00%)}
.fig-drift video{-webkit-mask-image:url(media/man-drift-mask.png),var(--shm);mask-image:url(media/man-drift-mask.png),var(--shm)}
.fig-signal{clip-path:polygon(3.62% -6.00%,97.18% -6.00%,97.18% 95.92%,95.70% 95.92%,94.21% 95.92%,92.73% 95.92%,91.24% 95.92%,89.76% 95.67%,88.27% 94.50%,86.79% 93.58%,85.30% 92.67%,83.82% 91.58%,82.33% 90.42%,80.85% 89.42%,79.36% 88.50%,77.88% 87.58%,76.39% 86.58%,74.91% 85.58%,73.42% 84.33%,71.94% 82.00%,70.45% 82.00%,68.97% 81.50%,67.48% 81.25%,66.00% 78.50%,64.51% 77.08%,63.03% 75.58%,61.54% 74.67%,60.06% 75.58%,58.57% 76.42%,57.09% 77.17%,55.60% 77.83%,54.12% 78.42%,52.63% 78.92%,51.14% 79.42%,49.66% 79.75%,48.17% 80.08%,46.69% 80.33%,45.20% 80.58%,43.72% 80.75%,42.23% 80.83%,40.75% 80.92%,39.26% 80.92%,37.78% 80.92%,36.29% 80.92%,34.81% 80.92%,33.32% 80.83%,31.84% 80.67%,30.35% 80.50%,28.87% 80.25%,27.38% 80.00%,25.90% 79.67%,24.41% 79.25%,22.93% 78.75%,21.44% 78.25%,19.96% 77.67%,18.47% 76.92%,16.99% 76.17%,15.50% 75.92%,14.02% 75.92%,12.53% 75.92%,11.05% 75.92%,9.56% 74.83%,8.08% 71.33%,6.59% 67.25%,5.11% 64.92%,3.62% 64.92%)}
.fig-signal.is-up{clip-path:polygon(0.00% -6.00%,100.00% -6.00%,100.00% 100.00%,95.70% 100.00%,94.21% 100.00%,92.73% 100.00%,91.24% 100.00%,89.76% 100.00%,88.27% 100.00%,86.79% 100.00%,85.30% 100.00%,83.82% 100.00%,82.33% 100.00%,80.85% 100.00%,79.36% 100.00%,77.88% 100.00%,76.39% 100.00%,74.91% 100.00%,73.42% 100.00%,71.94% 100.00%,70.45% 100.00%,68.97% 100.00%,67.48% 100.00%,66.00% 100.00%,64.51% 100.00%,63.03% 100.00%,61.54% 100.00%,60.06% 100.00%,58.57% 100.00%,57.09% 100.00%,55.60% 100.00%,54.12% 100.00%,52.63% 100.00%,51.14% 100.00%,49.66% 100.00%,48.17% 100.00%,46.69% 100.00%,45.20% 100.00%,43.72% 100.00%,42.23% 100.00%,40.75% 100.00%,39.26% 100.00%,37.78% 100.00%,36.29% 100.00%,34.81% 100.00%,33.32% 100.00%,31.84% 100.00%,30.35% 100.00%,28.87% 100.00%,27.38% 100.00%,25.90% 100.00%,24.41% 100.00%,22.93% 100.00%,21.44% 100.00%,19.96% 100.00%,18.47% 100.00%,16.99% 100.00%,15.50% 100.00%,14.02% 100.00%,12.53% 100.00%,11.05% 100.00%,9.56% 100.00%,8.08% 100.00%,6.59% 100.00%,5.11% 100.00%,0.00% 100.00%)}
.fig-signal video{-webkit-mask-image:url(media/man-signal-mask.png),var(--shm);mask-image:url(media/man-signal-mask.png),var(--shm)}
/* les six temps de Here's how it works (boucles how-*, 04/10/2026) : la decoupe au sol de
   chaque boucle au repos, et son masque (union de ses images) */
.fig-communication{clip-path:polygon(13.13% -6.00%,69.98% -6.00%,69.98% 48.50%,69.08% 49.23%,68.18% 49.96%,67.28% 50.69%,66.37% 51.42%,65.47% 52.15%,64.57% 52.88%,63.67% 53.60%,62.76% 54.33%,61.86% 55.06%,60.96% 55.69%,60.06% 56.52%,59.16% 57.25%,58.25% 57.98%,57.35% 58.71%,56.45% 59.44%,55.55% 60.17%,54.64% 60.90%,53.74% 61.62%,52.84% 61.83%,51.94% 61.42%,51.03% 60.58%,50.13% 59.96%,49.23% 59.13%,48.33% 58.40%,47.42% 57.67%,46.52% 67.46%,45.62% 68.19%,44.72% 68.92%,43.81% 69.65%,42.91% 70.38%,42.01% 71.10%,41.11% 71.94%,40.21% 72.56%,39.30% 73.40%,38.40% 74.02%,37.50% 74.85%,36.60% 75.48%,35.69% 76.31%,34.79% 77.04%,33.89% 77.77%,32.99% 78.50%,32.08% 79.23%,31.18% 79.96%,30.28% 80.27%,29.38% 80.17%,28.47% 79.33%,27.57% 78.71%,26.67% 77.98%,25.77% 77.15%,24.86% 76.42%,23.96% 75.69%,23.06% 74.96%,22.16% 74.23%,21.26% 73.60%,20.35% 72.77%,19.45% 72.04%,18.55% 71.31%,17.65% 70.58%,16.74% 69.85%,15.84% 69.12%,14.94% 68.40%,14.04% 67.67%,13.13% 66.94%)}
.fig-communication.is-up{clip-path:polygon(0.00% -6.00%,100.00% -6.00%,100.00% 100.00%,69.08% 100.00%,68.18% 100.00%,67.28% 100.00%,66.37% 100.00%,65.47% 100.00%,64.57% 100.00%,63.67% 100.00%,62.76% 100.00%,61.86% 100.00%,60.96% 100.00%,60.06% 100.00%,59.16% 100.00%,58.25% 100.00%,57.35% 100.00%,56.45% 100.00%,55.55% 100.00%,54.64% 100.00%,53.74% 100.00%,52.84% 100.00%,51.94% 100.00%,51.03% 100.00%,50.13% 100.00%,49.23% 100.00%,48.33% 100.00%,47.42% 100.00%,46.52% 100.00%,45.62% 100.00%,44.72% 100.00%,43.81% 100.00%,42.91% 100.00%,42.01% 100.00%,41.11% 100.00%,40.21% 100.00%,39.30% 100.00%,38.40% 100.00%,37.50% 100.00%,36.60% 100.00%,35.69% 100.00%,34.79% 100.00%,33.89% 100.00%,32.99% 100.00%,32.08% 100.00%,31.18% 100.00%,30.28% 100.00%,29.38% 100.00%,28.47% 100.00%,27.57% 100.00%,26.67% 100.00%,25.77% 100.00%,24.86% 100.00%,23.96% 100.00%,23.06% 100.00%,22.16% 100.00%,21.26% 100.00%,20.35% 100.00%,19.45% 100.00%,18.55% 100.00%,17.65% 100.00%,16.74% 100.00%,15.84% 100.00%,14.94% 100.00%,14.04% 100.00%,0.00% 100.00%)}
.fig-communication video{-webkit-mask-image:url(media/how-communication-mask.png),var(--shm);mask-image:url(media/how-communication-mask.png),var(--shm)}
.fig-strategy{clip-path:polygon(4.59% -6.00%,81.26% -6.00%,81.26% 57.88%,80.05% 58.81%,78.83% 59.85%,77.61% 60.79%,76.39% 61.83%,75.18% 62.77%,73.96% 63.71%,72.74% 64.75%,71.53% 65.69%,70.31% 66.73%,69.09% 67.67%,67.87% 68.71%,66.66% 69.65%,65.44% 70.69%,64.22% 71.62%,63.01% 72.67%,61.79% 73.60%,60.57% 74.65%,59.35% 75.58%,58.14% 76.62%,56.92% 77.56%,55.70% 78.60%,54.49% 79.54%,53.27% 80.48%,52.05% 81.52%,50.84% 82.46%,49.62% 83.50%,48.40% 84.44%,47.18% 85.38%,45.97% 86.42%,44.75% 87.46%,43.53% 88.40%,42.32% 89.44%,41.10% 89.44%,39.88% 88.60%,38.66% 87.67%,37.45% 86.62%,36.23% 85.69%,35.01% 84.65%,33.80% 83.71%,32.58% 82.67%,31.36% 81.73%,30.14% 80.79%,28.93% 79.75%,27.71% 78.81%,26.49% 77.77%,25.28% 76.83%,24.06% 75.79%,22.84% 74.85%,21.62% 73.81%,20.41% 72.88%,19.19% 71.83%,17.97% 70.79%,16.76% 69.85%,15.54% 68.81%,14.32% 67.88%,13.10% 66.83%,11.89% 65.90%,10.67% 64.96%,9.45% 63.92%,8.24% 62.98%,7.02% 61.94%,5.80% 61.00%,4.59% 60.06%)}
.fig-strategy.is-up{clip-path:polygon(0.00% -6.00%,100.00% -6.00%,100.00% 100.00%,80.05% 100.00%,78.83% 100.00%,77.61% 100.00%,76.39% 100.00%,75.18% 100.00%,73.96% 100.00%,72.74% 100.00%,71.53% 100.00%,70.31% 100.00%,69.09% 100.00%,67.87% 100.00%,66.66% 100.00%,65.44% 100.00%,64.22% 100.00%,63.01% 100.00%,61.79% 100.00%,60.57% 100.00%,59.35% 100.00%,58.14% 100.00%,56.92% 100.00%,55.70% 100.00%,54.49% 100.00%,53.27% 100.00%,52.05% 100.00%,50.84% 100.00%,49.62% 100.00%,48.40% 100.00%,47.18% 100.00%,45.97% 100.00%,44.75% 100.00%,43.53% 100.00%,42.32% 100.00%,41.10% 100.00%,39.88% 100.00%,38.66% 100.00%,37.45% 100.00%,36.23% 100.00%,35.01% 100.00%,33.80% 100.00%,32.58% 100.00%,31.36% 100.00%,30.14% 100.00%,28.93% 100.00%,27.71% 100.00%,26.49% 100.00%,25.28% 100.00%,24.06% 100.00%,22.84% 100.00%,21.62% 100.00%,20.41% 100.00%,19.19% 100.00%,17.97% 100.00%,16.76% 100.00%,15.54% 100.00%,14.32% 100.00%,13.10% 100.00%,11.89% 100.00%,10.67% 100.00%,9.45% 100.00%,8.24% 100.00%,7.02% 100.00%,5.80% 100.00%,0.00% 100.00%)}
.fig-strategy video{-webkit-mask-image:url(media/how-strategy-mask.png),var(--shm);mask-image:url(media/how-strategy-mask.png),var(--shm)}
.fig-production{clip-path:polygon(0.00% -6.00%,100.00% -6.00%,100.00% 94.79%,98.41% 94.79%,96.83% 94.79%,95.24% 94.79%,93.65% 94.79%,92.06% 94.79%,90.48% 94.79%,88.89% 94.79%,87.30% 94.79%,85.71% 94.21%,84.13% 93.07%,82.54% 91.93%,80.95% 90.79%,79.37% 89.64%,77.78% 88.57%,76.19% 87.36%,74.60% 86.29%,73.02% 85.07%,71.43% 84.00%,69.84% 82.86%,68.25% 81.71%,66.67% 80.57%,65.08% 79.43%,63.49% 78.29%,61.90% 77.14%,60.32% 76.07%,58.73% 74.86%,57.14% 73.79%,55.56% 72.57%,53.97% 71.50%,52.38% 70.36%,50.79% 69.21%,49.21% 68.07%,47.62% 66.93%,46.03% 65.79%,44.44% 64.64%,42.86% 63.57%,41.27% 62.36%,39.68% 61.29%,38.10% 60.93%,36.51% 60.64%,34.92% 59.50%,33.33% 58.36%,31.75% 55.57%,30.16% 54.43%,28.57% 53.29%,26.98% 52.14%,25.40% 51.07%,23.81% 49.86%,22.22% 48.71%,20.63% 47.64%,19.05% 46.50%,17.46% 45.36%,15.87% 44.21%,14.29% 43.07%,12.70% 41.93%,11.11% 40.79%,9.52% 39.64%,7.94% 38.50%,6.35% 37.43%,4.76% 36.29%,3.17% 35.14%,1.59% 34.00%,0.00% 32.86%)}
.fig-production.is-up{clip-path:polygon(0.00% -6.00%,100.00% -6.00%,100.00% 100.00%,98.41% 100.00%,96.83% 100.00%,95.24% 100.00%,93.65% 100.00%,92.06% 100.00%,90.48% 100.00%,88.89% 100.00%,87.30% 100.00%,85.71% 100.00%,84.13% 100.00%,82.54% 100.00%,80.95% 100.00%,79.37% 100.00%,77.78% 100.00%,76.19% 100.00%,74.60% 100.00%,73.02% 100.00%,71.43% 100.00%,69.84% 100.00%,68.25% 100.00%,66.67% 100.00%,65.08% 100.00%,63.49% 100.00%,61.90% 100.00%,60.32% 100.00%,58.73% 100.00%,57.14% 100.00%,55.56% 100.00%,53.97% 100.00%,52.38% 100.00%,50.79% 100.00%,49.21% 100.00%,47.62% 100.00%,46.03% 100.00%,44.44% 100.00%,42.86% 100.00%,41.27% 100.00%,39.68% 100.00%,38.10% 100.00%,36.51% 100.00%,34.92% 100.00%,33.33% 100.00%,31.75% 100.00%,30.16% 100.00%,28.57% 100.00%,26.98% 100.00%,25.40% 100.00%,23.81% 100.00%,22.22% 100.00%,20.63% 100.00%,19.05% 100.00%,17.46% 100.00%,15.87% 100.00%,14.29% 100.00%,12.70% 100.00%,11.11% 100.00%,9.52% 100.00%,7.94% 100.00%,6.35% 100.00%,4.76% 100.00%,3.17% 100.00%,1.59% 100.00%,0.00% 100.00%)}
.fig-production video{-webkit-mask-image:url(media/how-production-mask.png),var(--shm);mask-image:url(media/how-production-mask.png),var(--shm)}
.fig-autonomy{clip-path:polygon(4.59% -6.00%,79.68% -6.00%,79.68% 70.79%,78.49% 71.73%,77.30% 72.67%,76.11% 73.60%,74.91% 74.65%,73.72% 75.58%,72.53% 76.52%,71.34% 77.56%,70.15% 78.50%,68.95% 79.44%,67.76% 80.48%,66.57% 81.42%,65.38% 82.35%,64.19% 83.29%,62.99% 83.60%,61.80% 82.98%,60.61% 82.04%,59.42% 81.10%,58.23% 80.06%,57.03% 79.12%,55.84% 78.19%,54.65% 77.25%,53.46% 76.21%,52.27% 75.27%,51.07% 74.33%,49.88% 73.29%,48.69% 72.46%,47.50% 71.42%,46.31% 70.48%,45.11% 69.54%,43.92% 68.50%,42.73% 67.56%,41.54% 55.79%,40.35% 55.58%,39.15% 54.65%,37.96% 53.60%,36.77% 60.06%,35.58% 61.10%,34.39% 62.04%,33.19% 62.98%,32.00% 63.92%,30.81% 64.96%,29.62% 65.90%,28.43% 66.83%,27.23% 67.88%,26.04% 68.81%,24.85% 69.75%,23.66% 70.69%,22.47% 71.73%,21.27% 72.67%,20.08% 72.88%,18.89% 72.25%,17.70% 71.21%,16.51% 70.27%,15.31% 69.33%,14.12% 68.29%,12.93% 67.35%,11.74% 66.42%,10.55% 65.48%,9.35% 64.44%,8.16% 63.50%,6.97% 62.56%,5.78% 61.52%,4.59% 60.69%)}
.fig-autonomy.is-up{clip-path:polygon(0.00% -6.00%,100.00% -6.00%,100.00% 100.00%,78.49% 100.00%,77.30% 100.00%,76.11% 100.00%,74.91% 100.00%,73.72% 100.00%,72.53% 100.00%,71.34% 100.00%,70.15% 100.00%,68.95% 100.00%,67.76% 100.00%,66.57% 100.00%,65.38% 100.00%,64.19% 100.00%,62.99% 100.00%,61.80% 100.00%,60.61% 100.00%,59.42% 100.00%,58.23% 100.00%,57.03% 100.00%,55.84% 100.00%,54.65% 100.00%,53.46% 100.00%,52.27% 100.00%,51.07% 100.00%,49.88% 100.00%,48.69% 100.00%,47.50% 100.00%,46.31% 100.00%,45.11% 100.00%,43.92% 100.00%,42.73% 100.00%,41.54% 100.00%,40.35% 100.00%,39.15% 100.00%,37.96% 100.00%,36.77% 100.00%,35.58% 100.00%,34.39% 100.00%,33.19% 100.00%,32.00% 100.00%,30.81% 100.00%,29.62% 100.00%,28.43% 100.00%,27.23% 100.00%,26.04% 100.00%,24.85% 100.00%,23.66% 100.00%,22.47% 100.00%,21.27% 100.00%,20.08% 100.00%,18.89% 100.00%,17.70% 100.00%,16.51% 100.00%,15.31% 100.00%,14.12% 100.00%,12.93% 100.00%,11.74% 100.00%,10.55% 100.00%,9.35% 100.00%,8.16% 100.00%,6.97% 100.00%,5.78% 100.00%,0.00% 100.00%)}
.fig-autonomy video{-webkit-mask-image:url(media/how-autonomy-mask.png),var(--shm);mask-image:url(media/how-autonomy-mask.png),var(--shm)}
.fig-quality{clip-path:polygon(0.00% -6.00%,90.65% -6.00%,90.65% 32.79%,89.21% 78.43%,87.77% 79.43%,86.33% 80.43%,84.89% 81.50%,83.45% 82.50%,82.01% 83.57%,80.57% 84.64%,79.14% 85.64%,77.70% 86.64%,76.26% 87.71%,74.82% 88.71%,73.38% 89.64%,71.94% 89.57%,70.50% 88.57%,69.06% 87.57%,67.62% 86.50%,66.19% 85.43%,64.75% 84.43%,63.31% 83.43%,61.87% 82.43%,60.43% 81.36%,58.99% 80.36%,57.55% 79.36%,56.11% 78.29%,54.68% 77.21%,53.24% 77.14%,51.80% 78.14%,50.36% 79.14%,48.92% 80.21%,47.48% 81.29%,46.04% 82.29%,44.60% 83.29%,43.16% 84.29%,41.73% 85.36%,40.29% 86.36%,38.85% 87.43%,37.41% 87.86%,35.97% 87.36%,34.53% 86.36%,33.09% 85.29%,31.65% 84.29%,30.22% 83.29%,28.78% 82.21%,27.34% 81.21%,25.90% 80.14%,24.46% 79.14%,23.02% 78.14%,21.58% 77.07%,20.14% 52.50%,18.70% 51.50%,17.27% 50.50%,15.83% 49.43%,14.39% 48.43%,12.95% 47.36%,11.51% 46.36%,10.07% 45.36%,8.63% 44.29%,7.19% 43.21%,5.76% 42.21%,4.32% 41.21%,2.88% 40.21%,1.44% 39.14%,0.00% 38.07%)}
.fig-quality.is-up{clip-path:polygon(0.00% -6.00%,100.00% -6.00%,100.00% 100.00%,89.21% 100.00%,87.77% 100.00%,86.33% 100.00%,84.89% 100.00%,83.45% 100.00%,82.01% 100.00%,80.57% 100.00%,79.14% 100.00%,77.70% 100.00%,76.26% 100.00%,74.82% 100.00%,73.38% 100.00%,71.94% 100.00%,70.50% 100.00%,69.06% 100.00%,67.62% 100.00%,66.19% 100.00%,64.75% 100.00%,63.31% 100.00%,61.87% 100.00%,60.43% 100.00%,58.99% 100.00%,57.55% 100.00%,56.11% 100.00%,54.68% 100.00%,53.24% 100.00%,51.80% 100.00%,50.36% 100.00%,48.92% 100.00%,47.48% 100.00%,46.04% 100.00%,44.60% 100.00%,43.16% 100.00%,41.73% 100.00%,40.29% 100.00%,38.85% 100.00%,37.41% 100.00%,35.97% 100.00%,34.53% 100.00%,33.09% 100.00%,31.65% 100.00%,30.22% 100.00%,28.78% 100.00%,27.34% 100.00%,25.90% 100.00%,24.46% 100.00%,23.02% 100.00%,21.58% 100.00%,20.14% 100.00%,18.70% 100.00%,17.27% 100.00%,15.83% 100.00%,14.39% 100.00%,12.95% 100.00%,11.51% 100.00%,10.07% 100.00%,8.63% 100.00%,7.19% 100.00%,5.76% 100.00%,4.32% 100.00%,2.88% 100.00%,1.44% 100.00%,0.00% 100.00%)}
.fig-quality video{-webkit-mask-image:url(media/how-quality-mask.png),var(--shm);mask-image:url(media/how-quality-mask.png),var(--shm)}
.fig-organization{clip-path:polygon(5.88% -6.00%,64.38% -6.00%,64.38% 42.67%,63.45% 43.50%,62.52% 44.23%,61.59% 44.96%,60.67% 45.69%,59.74% 46.42%,58.81% 47.25%,57.88% 47.98%,56.95% 48.71%,56.02% 49.44%,55.09% 50.27%,54.17% 51.00%,53.24% 51.73%,52.31% 52.46%,51.38% 53.29%,50.45% 54.02%,49.52% 54.75%,48.59% 55.58%,47.67% 56.21%,46.74% 56.62%,45.81% 56.21%,44.88% 55.37%,43.95% 54.65%,43.02% 53.92%,42.09% 53.19%,41.17% 61.52%,40.24% 62.25%,39.31% 63.08%,38.38% 63.81%,37.45% 64.54%,36.52% 65.27%,35.59% 66.10%,34.67% 66.73%,33.74% 67.56%,32.81% 68.29%,31.88% 69.02%,30.95% 69.75%,30.02% 70.58%,29.09% 71.31%,28.16% 72.04%,27.24% 72.88%,26.31% 73.60%,25.38% 74.33%,24.45% 75.06%,23.52% 75.48%,22.59% 75.06%,21.66% 74.33%,20.74% 73.60%,19.81% 72.88%,18.88% 72.04%,17.95% 71.31%,17.02% 70.58%,16.09% 69.85%,15.16% 69.02%,14.24% 68.29%,13.31% 67.56%,12.38% 66.73%,11.45% 66.00%,10.52% 65.27%,9.59% 64.54%,8.66% 63.81%,7.74% 63.08%,6.81% 62.25%,5.88% 61.21%)}
.fig-organization.is-up{clip-path:polygon(0.00% -6.00%,100.00% -6.00%,100.00% 100.00%,63.45% 100.00%,62.52% 100.00%,61.59% 100.00%,60.67% 100.00%,59.74% 100.00%,58.81% 100.00%,57.88% 100.00%,56.95% 100.00%,56.02% 100.00%,55.09% 100.00%,54.17% 100.00%,53.24% 100.00%,52.31% 100.00%,51.38% 100.00%,50.45% 100.00%,49.52% 100.00%,48.59% 100.00%,47.67% 100.00%,46.74% 100.00%,45.81% 100.00%,44.88% 100.00%,43.95% 100.00%,43.02% 100.00%,42.09% 100.00%,41.17% 100.00%,40.24% 100.00%,39.31% 100.00%,38.38% 100.00%,37.45% 100.00%,36.52% 100.00%,35.59% 100.00%,34.67% 100.00%,33.74% 100.00%,32.81% 100.00%,31.88% 100.00%,30.95% 100.00%,30.02% 100.00%,29.09% 100.00%,28.16% 100.00%,27.24% 100.00%,26.31% 100.00%,25.38% 100.00%,24.45% 100.00%,23.52% 100.00%,22.59% 100.00%,21.66% 100.00%,20.74% 100.00%,19.81% 100.00%,18.88% 100.00%,17.95% 100.00%,17.02% 100.00%,16.09% 100.00%,15.16% 100.00%,14.24% 100.00%,13.31% 100.00%,12.38% 100.00%,11.45% 100.00%,10.52% 100.00%,9.59% 100.00%,8.66% 100.00%,7.74% 100.00%,6.81% 100.00%,0.00% 100.00%)}
.fig-organization video{-webkit-mask-image:url(media/how-organization-mask.png),var(--shm);mask-image:url(media/how-organization-mask.png),var(--shm)}
/* Les mouvements sont des animations qui partent de la ou en est la machine
   (--from, pose par home.js) : la sortante rentre dans le sol, la suivante
   en sort d'un coup sec, depasse a peine sa place et s'y cale aussitot,
   comme une piece qui s'enclenche. Revenue avant d'etre rentree,
   elle reprend simplement sa place (.is-snap). */
.man-fig video{transform:translateY(96%)}
.man-fig.is-down video{animation:man-sink .18s .07s cubic-bezier(.55,0,.8,.2) both}
.man-fig.is-on video{transform:none;animation:man-rise .3s .12s both}
.man-fig.is-on.is-snap video{animation:man-snap .18s var(--ease) both}
@keyframes man-sink{from{transform:translateY(var(--from, 0%))}to{transform:translateY(96%)}}
@keyframes man-snap{from{transform:translateY(var(--from, 0%))}to{transform:none}}
@keyframes man-rise{
  0%{transform:translateY(96%);animation-timing-function:cubic-bezier(.5,0,.25,1)}
  72%{transform:translateY(-1.6%);animation-timing-function:cubic-bezier(.3,0,.4,1)}
  100%{transform:none}}

/* La regle graduee, logee entre la marge hachuree et la case : un trait
   sur le bord des hachures, une petite graduation tous les 9 px sur la
   moitie de l'espace, une grande tous les 288 px qui fait le pont jusqu'a
   la case. Elle reste collee
   pendant la section et ses graduations defilent avec la page (--ro, pose
   par home.js) ; la bande noire reste au milieu et se fond dans le gris. */
/* couleurs : --rule et --rule-ink, roles de tokens.css */
/* Figma Astra Home 5 : la regle est dans la case, sur ses 32 premiers px */
.man-rail{position:absolute;z-index:2;top:0;bottom:0;left:0;width:32px;pointer-events:none}
.man-ruler{position:sticky;top:var(--rt);height:var(--rh)}
.man-ticks{position:absolute;inset:0;color:var(--rule);--ro:0px;
  background:
    linear-gradient(currentColor,currentColor) 0 0/.5px 100% no-repeat,
    linear-gradient(currentColor .5px,transparent .5px) 0 var(--ro)/50% 9px repeat-y,
    linear-gradient(currentColor .5px,transparent .5px) 0 calc(var(--ro) + 153px)/100% 288px repeat-y}
.man-ticks.is-ink{color:var(--rule-ink);
  -webkit-mask:linear-gradient(transparent calc(50% - 230px),#000 calc(50% - 70px),#000 calc(50% + 70px),transparent calc(50% + 230px));
  mask:linear-gradient(transparent calc(50% - 230px),#000 calc(50% - 70px),#000 calc(50% + 70px),transparent calc(50% + 230px))}

/* ---- what we do ---------------------------------------------------------
   Figma Brand Update (3704:1421, 04/10/2026) : une case. En haut le reel, au
   cadre du Figma (1236 x 462), l'affiche jusqu'a ce que la video joue
   (astra.js 15) ; dessous, sous un filet, les trois metiers cote a cote,
   chacun a 24 32 de ses bords, alignes en haut : le numero sur la ligne de
   base du titre (--t-lead, la taille de "Trusted by teams..."), le texte au
   petit corps des cases (--t-body). */
.wwd{display:flex;flex-direction:column}
/* Figma (Elio, 04/10/2026) : les trois lignes d'abord, le reel dessous */
.wwd-reel{position:relative;aspect-ratio:1236/462;overflow:hidden;background:var(--cell);border-top:var(--bw) solid var(--line)}
.wwd-reel img,.wwd-reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wwd-reel video{opacity:0;transition:opacity .3s ease}
.wwd-reel.is-playing video{opacity:1}
.wwd-reel.is-playing img{visibility:hidden}
/* les trois metiers, des cases cernees comme les logos sous la hero (12
   entre elles et du bord, le gris --cell) ; meme hauteur, textes sur deux
   lignes equilibrees (Elio, 04/10/2026) */
.wwd-rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-12);padding:var(--s-12)}
.wwd-rows>li{display:grid;grid-template-columns:32px minmax(0,1fr);align-items:baseline;align-content:start;gap:var(--s-16);min-height:154px;padding:var(--s-24) var(--s-32);background-color:var(--cell)}
.wwd-rows small{font-size:var(--t-body);line-height:1;letter-spacing:var(--tr-ui);color:var(--quote)}
.wwd-rows div{display:flex;flex-direction:column;gap:var(--s-8)}
.wwd-rows .cell-t{font-size:var(--t-lead);line-height:1.29;letter-spacing:var(--tr-display)}
.wwd-rows .cell-p{max-width:26em;font-size:var(--t-body);line-height:1.625;text-wrap:balance}
/* les lignes suivent le reel (home.js 3) : une fois qu'il joue, la ligne du
   chapitre en cours s'allume (--lit), les deux autres s'effacent, et un filet
   d'encre court sous elle au rythme du chapitre (--p, de 0 a 1). La ligne
   entiere est un bouton qui amene a son chapitre. */
.wwd-rows>li>small,.wwd-rows>li>div{position:relative;z-index:1;transition:opacity .4s ease}
/* l'allumage reprend les hachures du survol (astra.css 4) : elles balaient la
   ligne depuis le coin haut gauche, puis le fond clair les remplace */
.wwd-rows>li::before{content:"";position:absolute;inset:0;pointer-events:none;background:var(--hatch-lines) 0 0/8px 8px;clip-path:polygon(0 0,0 0,0 0)}
.wwd.is-synced .wwd-rows>li.is-on::before{clip-path:polygon(0 0,200% 0,0 200%);opacity:0;transition:clip-path var(--d-sweep) var(--ease),opacity .2s ease var(--d-sweep)}
.wwd.is-synced .wwd-rows>li.is-on{background-color:var(--lit);transition:background-color .2s ease var(--d-sweep)}
.wwd.is-synced .wwd-rows>li:not(.is-on)>small,.wwd.is-synced .wwd-rows>li:not(.is-on)>div{opacity:.42}
.wwd-rows>li::after{content:"";position:absolute;left:0;bottom:0;width:calc(var(--p,0) * 100%);height:2px;background:var(--accent);opacity:0;pointer-events:none}
/* la barre du chapitre en cours, orange (Elio, 17/10/2026) */
.wwd.is-synced .wwd-rows>li.is-on::after{opacity:1}
.wwd-go{position:absolute;inset:0;z-index:2;margin:0;padding:0;border:0;background:none;cursor:pointer}
.wwd-go:focus-visible{outline:2px solid var(--ink-2);outline-offset:-2px}
@media (hover:hover){ .wwd.is-synced .wwd-rows>li:not(.is-on):hover>small,.wwd.is-synced .wwd-rows>li:not(.is-on):hover>div{opacity:.75} }

/* ---- how it works -----------------------------------------------------
   Figma Astra Home 5 (3356:3821, 02/10/2026) : 12 de chaque cote, les deux
   cases font chacune 616 de large a 1600. */
/* .sec-cells (astra.css) : 8 sous « Here's how it works », 12 des bords ; le titre et,
   a sa droite, le lien vers How it works forment un .sec-head ; sous les
   deux cases, la phrase sur le CMO, dans une case de toute la largeur */
.how-note{margin-top:var(--s-8);padding:var(--s-24) var(--s-32);background-color:var(--cell)}
.how-note .cell-p{max-width:44em}

/* ---- temoignages : le carrousel est un composant du design system ------- */

/* ---- appel (Figma 3356:3878, 02/10/2026) : la case pleine, a 12 des bords */
/* .sec-band (astra.css) : 20 au-dessus, 12 des bords, 32 dessous */

/* ---- paliers ---------------------------------------------------------- */
@media (max-width:999px){
  .hero-card{flex-direction:column;align-items:flex-start;padding:24px 20px 32px}
  .hero-t{max-width:none;font-size:clamp(26px, 5.2vw, 40px);text-wrap:balance}   /* "companies" restait seul */
  .hero-side{align-items:flex-start}
  .hero-side .btns{justify-content:flex-start}
  .hero-sub{width:auto;max-width:30em;text-align:left}
  /* le reel en 4:3, les trois metiers l'un sous l'autre */
  .wwd-reel{aspect-ratio:4/3}
  .wwd-rows{grid-template-columns:minmax(0,1fr);gap:var(--s-8);padding:var(--s-8)}
  .wwd-rows>li{min-height:0;padding:var(--s-20)}
  .how-note{padding:var(--s-20)}
  .hero-visual{height:auto;aspect-ratio:1264/634}
  .man-scroll{height:auto;margin-bottom:24px}
  .man-box{position:static;height:auto;display:block;padding:8px var(--pad)}
  .man-text{overflow:visible;-webkit-mask:none;mask:none}
  .man-steps{transform:none!important}
  .man-head{align-items:flex-start;gap:0}
  .man-rail,.man-stage{display:none}
  .man-step{height:auto;opacity:1;padding:24px 0}
  .man-step-in{gap:20px}
  .man-step-img{display:block;width:100%;max-width:560px}
  /* sur mobile, la toile pleine largeur, rognee en haut et en bas */
  .hiw .man-step-img{margin:-6.98% 0;clip-path:inset(8.93% 0)}
}
@media (max-width:999px){
  .man-note{padding:56px var(--s-24) 64px}
  .man-tip{display:none}
}

@media (max-width:599px){
  .hero .btns .btn{flex:1;padding:0 var(--s-12)}
  /* sur telephone, deux boutons sur une ligne des 345 px environ, deux rangs
     en dessous (Case studies reste au menu) */
  .hero-see{display:none}
}

@media (prefers-reduced-motion:reduce){
  .man-fig,.man-fig video,.man-step{transition:none}
  .man-fig video{animation:none!important}
  .man-frame *{transition:none!important}
}
@media (prefers-reduced-motion:reduce){.js .hero [data-in]{animation:none}}