/* =====================================================================
   How it works : seulement ce qui est propre a la page (v6, 04/10/2026).
   La grammaire (sections, en-tetes, cases de l'accueil, hero court) vient
   de pages.css et du design system ; chaque section reprend une mise en
   page de l'accueil ou de Mintlify (p6_how.py en donne la liste).
   ===================================================================== */

/* ---- ouverture : la hero du Figma (3644:3536, 04/10/2026) --------------
   Le texte a gauche sur le papier (sur-titre 14/20 au trait orange au bord
   de la hero, titre 44/48, phrase 16/24, boutons a 32), la machine en
   plongee derriere, ancree a droite, sans case ni filet : son fond est le
   papier. Sous 1000 px, le texte puis la machine, en 4:3. */
.hw-hero{position:relative;display:block;min-height:clamp(440px, 28.9vw, 520px);overflow:hidden;background:var(--sec);border-bottom:var(--bw) solid var(--line)}
.hw-hero-art{position:absolute;inset:0;margin:0;overflow:hidden;container-type:size}
/* la boucle carree, comme dans le prototype d'Elio (Figma 3763:1335,
   05/10/2026) : la video a 276,4 % de la hauteur de la hero (la moitie de
   sa taille a 1600 px), son haut 22,9 % au-dessus de la hero, ancree a
   droite (son bord gauche a 100 % - 183,9 % de la hauteur) : on voit le
   haut gauche de la machine, son coeur au ras du bas. Sur un ecran plus
   etroit, elle se decale a droite pour que son bord ne passe jamais sous
   le texte (le cercle exterieur reste a 500 px du bord au moins). Son bord
   gauche se fond dans le papier. La boucle se pose sur son affiche une fois
   lancee (pages.js). */
.hw-quarter{position:absolute;top:-22.88cqh;left:max(calc(100cqw - 183.9cqh), calc(500px - 19.2cqh));width:276.4cqh;height:276.4cqh;overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent,#000 14%);mask:linear-gradient(90deg,transparent,#000 14%)}
.hw-quarter>img,.hw-quarter>video{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.hw-quarter>video{opacity:0}
.hw-quarter>video.is-live{opacity:1}
.hw-hero .pg-hero-text{position:relative;z-index:1;min-height:inherit;max-width:720px;gap:0;padding:64px 32px}
.hw-hero .pg-h1{max-width:9em;font-size:clamp(34px, 2.75vw, 44px);line-height:1.09;letter-spacing:-.03em;color:var(--ink)}
.hw-hero .pg-lead{max-width:27em;margin-top:var(--s-16);font-size:var(--t-body);line-height:1.5;letter-spacing:0}
.hw-hero .btns{margin-top:var(--s-32)}

/* ---- rythme des sections (Elio, 04/10/2026, comme l'accueil) -------------
   164 au-dessus de chaque section apres la hero, 0 dessous ; a partir de
   1000 px (dessous, le rythme mobile de pages.css). */
@media (min-width:1000px){
  .hw-hero~.sec-cells{padding-top:164px}
}

/* ---- preuve : une session de Claude Code -----------------------------------
   La fenetre de l'onglet Code de l'app, anonymisee, dans sa case : barre de
   titre, sessions a gauche, conversation au milieu, apercu a droite. Ses
   couleurs sont celles de l'app (papier creme, accent corail), pas celles
   du site, pour qu'on la reconnaisse. Le deroule est dans how-it-works.js :
   .is-anim cache ce qui n'est pas encore arrive (.is-in). */
.cc{--cc-bg:#faf9f5;--cc-glass:rgba(250,249,245,.62);--cc-side:rgba(243,241,234,.4);--cc-new:rgba(250,249,245,.75);--cc-ink:#1f1e1d;--cc-mute:#76746d;--cc-faint:#a8a69f;--cc-line:rgba(31,30,29,.1);
  --cc-user:rgba(239,235,226,.8);--cc-code:rgba(31,30,29,.055);--cc-field:rgba(255,255,255,.75);--cc-view:rgba(239,237,230,.35);--cc-accent:#d97757;--cc-on:rgba(31,30,29,.07);
  padding:56px;background:var(--cell) url(media/home-gt-poster.jpg) 50% 50%/cover no-repeat}
:root[data-theme="night"] .cc{--cc-bg:#262624;--cc-glass:rgba(38,38,36,.66);--cc-side:rgba(31,30,29,.45);--cc-new:rgba(38,38,36,.75);--cc-ink:#f3f1ea;--cc-mute:#a6a49d;--cc-faint:#75736d;--cc-line:rgba(255,255,255,.09);
  --cc-user:rgba(53,52,49,.8);--cc-code:rgba(255,255,255,.07);--cc-field:rgba(48,48,46,.75);--cc-view:rgba(28,28,27,.35);--cc-on:rgba(255,255,255,.07);
  background-image:url(media/home-gt-nuit-poster.jpg)}
/* Figma (Elio, 04/10/2026) : la fenetre en verre depoli sur le rendu de la
   machine ; sans backdrop-filter, le verre reste presque opaque */
.cc-win{overflow:hidden;border:1px solid var(--cc-line);border-radius:12px;background:var(--cc-glass);color:var(--cc-ink);
  -webkit-backdrop-filter:blur(14px) saturate(1.05);backdrop-filter:blur(14px) saturate(1.05);
  font-family:var(--f);letter-spacing:-.005em;box-shadow:0 1px 2px rgba(26,23,20,.06),0 32px 64px -40px rgba(26,23,20,.4)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .cc-win{background:var(--cc-bg)} }
.cc .icon{width:15px;height:15px;flex:none}
.cc code{font-family:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;letter-spacing:0}
/* barre de titre */
.cc-bar{display:flex;align-items:center;gap:16px;height:44px;padding:0 14px;border-bottom:1px solid var(--cc-line);background:var(--cc-side);font-size:13px;color:var(--cc-mute)}
.cc-lights{display:flex;gap:8px}
.cc-lights i{width:12px;height:12px;border-radius:50%;background:#ff5f57;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.12)}
.cc-lights i:nth-child(2){background:#febc2e}
.cc-lights i:nth-child(3){background:#28c840}
.cc-crumb{display:flex;align-items:center;gap:6px;min-width:0;margin-left:8px;white-space:nowrap}
.cc-sep{color:var(--cc-faint)}
.cc-title{color:var(--cc-ink);overflow:hidden;text-overflow:ellipsis}
.cc-bar-r{display:flex;gap:14px;margin-left:auto}
/* les trois volets */
.cc-body{display:grid;grid-template-columns:208px minmax(0,1fr) minmax(0,1.2fr);height:clamp(560px,44vw,660px)}
.cc-side{display:flex;flex-direction:column;gap:2px;padding:12px 10px;border-right:1px solid var(--cc-line);background:var(--cc-side);font-size:13.5px}
.cc-new{display:flex;align-items:center;gap:8px;margin-bottom:10px;padding:8px 10px;border:1px solid var(--cc-line);border-radius:8px;background:var(--cc-new);color:var(--cc-ink)}
.cc-side-h{margin:12px 10px 4px;font-size:12px;color:var(--cc-faint)}
.cc-sessions{display:flex;flex-direction:column;gap:1px;margin:0;padding:0;list-style:none}
.cc-sess{display:flex;align-items:center;gap:8px;width:100%;padding:7px 10px;border:0;border-radius:7px;background:none;font:inherit;color:var(--cc-mute);text-align:left;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-past .cc-sess{cursor:default;color:var(--cc-faint)}
.cc-sess-dot{width:6px;height:6px;flex:none;border-radius:50%;background:var(--cc-faint)}
.cc-sess[aria-pressed="true"]{background:var(--cc-on);color:var(--cc-ink)}
.cc-sess[aria-pressed="true"] .cc-sess-dot{background:var(--cc-accent)}
.cc.is-busy .cc-sess[aria-pressed="true"] .cc-sess-dot{animation:cc-pulse 1s ease-in-out infinite}
@media (hover:hover){ button.cc-sess:hover{background:var(--cc-on);color:var(--cc-ink)} }
.cc-sess:focus-visible{outline:2px solid var(--cc-accent);outline-offset:-2px}
.cc-side-foot{display:flex;align-items:center;gap:8px;margin-top:auto;padding:8px 10px;font-size:13px;color:var(--cc-mute)}
.cc-avatar{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#cfc9bc,#a9a295)}
/* conversation */
.cc-chat{display:flex;flex-direction:column;min-width:0;min-height:0}
.cc-log{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;padding:24px 24px 8px}
.cc-run{display:none;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.cc-run.is-on{display:flex}
.cc-user{align-self:flex-end;max-width:86%;margin-bottom:8px;padding:10px 14px;border-radius:14px;background:var(--cc-user);font-size:15px;line-height:1.45}
.cc-tool{display:flex;align-items:center;gap:8px;min-width:0;font-size:13.5px;line-height:1.4;color:var(--cc-mute)}
.cc-tool b{font-weight:500;color:var(--cc-ink)}
.cc-tool code{overflow:hidden;padding:1px 6px;border-radius:5px;background:var(--cc-code);color:var(--cc-mute);white-space:nowrap;text-overflow:ellipsis}
.cc-say{margin-top:8px;font-size:15px;line-height:1.55}
.cc-spin{display:none;align-items:center;gap:8px;margin-top:12px;font-size:13.5px;color:var(--cc-accent)}
.cc.is-busy .cc-spin{display:flex}
.cc-glyph{display:inline-block;width:1em;text-align:center;font-size:15px}
.cc-spin-t::after{content:"\2026"}
/* champ de saisie */
.cc-input{margin:0 16px 16px;padding:12px 12px 10px 14px;border:1px solid var(--cc-line);border-radius:14px;background:var(--cc-field);box-shadow:0 1px 3px rgba(26,23,20,.05)}
.cc-field{position:relative;min-height:44px;font-size:15px;line-height:1.45}
.cc-ph{position:absolute;left:0;top:0;color:var(--cc-faint)}
.cc-typed:not(:empty)~.cc-ph{display:none}
.cc-caret{display:none;width:1.5px;height:1.15em;margin-left:1px;vertical-align:-.2em;background:var(--cc-ink);animation:cc-caret 1s steps(1) infinite}
.cc.is-typing .cc-caret{display:inline-block}
.cc-input-row{display:flex;align-items:center;gap:8px;margin-top:6px}
.cc-chip{display:flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:1px solid var(--cc-line);border-radius:8px;font-size:12.5px;color:var(--cc-mute)}
.cc-chip-i{width:28px;padding:0;justify-content:center}
.cc-send{display:grid;place-items:center;width:30px;height:30px;margin-left:auto;border-radius:8px;background:var(--cc-accent);color:#fff;opacity:.4;transition:opacity .2s ease,transform .12s ease}
.cc.is-ready .cc-send{opacity:1}
.cc.is-press .cc-send{transform:scale(.92)}
/* apercu */
.cc-pane{display:flex;flex-direction:column;min-width:0;border-left:1px solid var(--cc-line)}
.cc-tabs{display:flex;align-items:center;gap:12px;height:44px;padding:0 14px;border-bottom:1px solid var(--cc-line);font-size:13px;color:var(--cc-mute)}
.cc-tab{display:flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:7px;background:var(--cc-on);color:var(--cc-ink)}
.cc-file{overflow:hidden;font-family:"Geist Mono",ui-monospace,monospace;font-size:12.5px;white-space:nowrap;text-overflow:ellipsis;transition:opacity .3s ease}
.cc-tabs-r{display:flex;gap:14px;margin-left:auto}
.cc-view{position:relative;flex:1 1 auto;overflow:hidden;background:var(--cc-view)}
.cc-view::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s ease;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%) 0 0/250% 100%;animation:cc-sheen 1.4s linear infinite}
.cc.is-render .cc-view::before{opacity:1}
.cc-empty{position:absolute;inset:0;display:grid;place-items:center;margin:0;font-size:13px;color:var(--cc-faint);opacity:0;transition:opacity .3s ease}
.cc.is-blank .cc-empty{opacity:1}
.cc.is-blank .cc-file{opacity:0}
.cc-scene{position:absolute;inset:24px;display:flex;align-items:center;justify-content:center;margin:0;visibility:hidden;opacity:0;transform:translateY(8px) scale(.985)}
.cc-scene>img,.cc-scene>video{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;border-radius:4px;box-shadow:0 1px 2px rgba(26,23,20,.08),0 24px 48px -28px rgba(26,23,20,.45)}
.cc-scene.is-on{visibility:visible}
.cc-scene.is-shown{opacity:1;transform:none;transition:opacity .5s var(--ease-reveal),transform .6s var(--ease-reveal)}
/* le deroule : ce qui n'est pas encore arrive reste cache */
.cc.is-anim .cc-run>li{display:none}
.cc.is-anim .cc-run>li.is-in{display:flex;animation:cc-in .35s var(--ease-reveal) both}
.cc.is-anim .cc-run>li.cc-say.is-in{display:block}
.cc.is-anim .cc-run>li.cc-user.is-in{display:block}
@keyframes cc-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes cc-pulse{50%{opacity:.35}}
@keyframes cc-caret{50%{opacity:0}}
@keyframes cc-sheen{from{background-position:150% 0}to{background-position:-100% 0}}

/* ---- la frise : un seul texte et un seul objet a la fois (brief 5, puis
   Elio, 04/10/2026) ------------------------------------------------------------
   Le defilement guide de l'accueil (home.css, .guided) : la case reste
   collee au milieu de l'ecran sous la nav, a la hauteur de la regle (--rh),
   pendant que l'on parcourt la piste (.flow-scroll). A gauche, les six
   moments montent dans la case et s'arretent chacun au milieu ; a droite,
   l'objet du moment sort du sol et le precedent y rentre, comme les
   machines de l'accueil, chacun sur son trace au sol (how-it-works.js). */
.flow{--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)}
.flow-scroll{position:relative;height:calc(var(--rh) + 420vh)}
.flow-box{position:sticky;top:var(--rt);height:var(--rh);display:grid;grid-template-columns:minmax(0,622fr) minmax(0,617fr)}
.flow-text{position:relative;overflow:hidden;
  -webkit-mask:linear-gradient(transparent,#000 14%,#000 86%,transparent);
  mask:linear-gradient(transparent,#000 14%,#000 86%,transparent)}
.flow-steps{list-style:none;margin:0;padding:0;will-change:transform}
/* le moment : son temps en sur-titre, sa phrase en lead, le titre en ink-2 */
.flow-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(--quote)}
.flow-step-in{display:flex;flex-direction:column;gap:24px;width:100%;min-width:0}
.flow-copy{display:flex;flex-direction:column;gap:var(--s-12);opacity:.4;transition:opacity .45s ease}
.flow-step.is-on .flow-copy{opacity:1}
.flow-step b{font-weight:400;color:var(--ink-2)}
.flow-step p{max-width:22em;text-wrap:pretty}
.flow-eyebrow{font-size:var(--t-body);line-height:1.3;letter-spacing:var(--tr-ui);color:var(--quote)}
.flow-step-img{display:none}
/* la regle, dans la case, sur ses 32 premiers px (home.css, .man-rail) */
.flow-rail{position:absolute;z-index:2;top:0;bottom:0;left:0;width:32px;pointer-events:none}
.flow-ruler{position:sticky;top:var(--rt);height:var(--rh)}
.flow-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}
.flow-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))}
/* la scene : un panneau gris separe par un trait, la toile de l'accueil
   (1792 x 1400) un peu plus large que lui et centree dedans ; les objets de
   1392 x 960 y sont poses chacun a sa place (--l, --t), sur les lignes du sol */
.flow-stage{position:relative;overflow:hidden;border-left:var(--bw) solid var(--line);background:var(--cell)}
.flow-scene{position:absolute;inset:0}
.flow .hiw-v{position:relative;aspect-ratio:1792/1400}
.flow-stage .hiw-v{position:absolute;left:50%;top:50%;width:120%;transform:translate(-50%,-50%)}
.flow .man-loop{left:var(--l);top:var(--t);width:77.68%;height:68.571%}
/* une chaine (Every week) : rendue sur toute la toile, comme celle de l'accueil */
.flow .man-loop.is-grand{width:100%;height:100%}
.flow .hiw-sol{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.flow .sol-l{fill:none;stroke:var(--ink-2);stroke-opacity:.34;stroke-width:2.2;stroke-dasharray:9 8}
.flow .sol-f{stroke-opacity:.2}
.flow .sol-s{fill:none;stroke:var(--ink-2);stroke-opacity:.5;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.flow .sol-m{fill:var(--ink-2);fill-opacity:.55}
/* le moment, ecrit au sol (couche dans le plan du sol par sa matrice) */
.flow .sol-t{fill:var(--ink-2);fill-opacity:.5;font-family:"Geist Mono",ui-monospace,monospace;font-size:30px;letter-spacing:.12em}
/* dans la scene, le trace du moment change en fondu avec son objet */
.flow-stage .hiw-sol{opacity:0;transition:opacity .15s ease}
.flow-stage .hiw-sol.is-on{opacity:1;transition:opacity .45s ease .2s}
/* Sortir du sol (home.css, .man-fig) : l'objet sortant rentre dans le sol,
   le suivant en sort d'un coup sec, depasse a peine sa place et s'y cale.
   Pendant le mouvement, il n'est visible qu'au-dessus du contour du bas de
   l'objet au repos (calcule sur son image, sans l'ombre) ; une fois sorti
   (.is-up), la decoupe s'ouvre sur toute l'image, ombre comprise. */
.js .flow .man-fig{transition:clip-path .15s cubic-bezier(.55,0,.8,.2)}
.js .flow .man-fig.is-up{transition:clip-path .2s var(--ease)}
/* pendant le mouvement, la boucle est aussi masquee a la silhouette de
   l'objet (union de ses images, sans l'ombre : media/*-mask.png) ; l'ombre
   reapparait en fondu une fois l'objet en place (--sh, comme l'accueil) */
@property --sh{syntax:'<number>';inherits:true;initial-value:1}
.js .flow .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}
.js .flow .man-fig.is-up video{--sh:1;transition:--sh .2s ease}
.js .flow .man-fig video{transform:translateY(96%)}
.js .flow .man-fig.is-down video{animation:flow-sink .18s .07s cubic-bezier(.55,0,.8,.2) both}
.js .flow .man-fig.is-on video{transform:none;animation:flow-rise .3s .12s both}
.js .flow .man-fig.is-on.is-snap video{animation:flow-snap .18s var(--ease) both}
@keyframes flow-sink{from{transform:translateY(var(--from, 0%))}to{transform:translateY(96%)}}
@keyframes flow-snap{from{transform:translateY(var(--from, 0%))}to{transform:none}}
@keyframes flow-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}}
.fig-call{clip-path:polygon(13.22% -6.00%,69.83% -6.00%,69.83% 48.44%,68.87% 49.27%,67.91% 49.90%,66.95% 50.73%,65.99% 51.56%,65.03% 52.40%,64.07% 53.02%,63.11% 53.85%,62.15% 54.69%,61.19% 55.52%,60.23% 56.35%,59.27% 56.98%,58.31% 57.81%,57.35% 58.65%,56.39% 59.27%,55.44% 60.10%,54.48% 60.94%,53.52% 61.35%,52.56% 61.35%,51.60% 60.94%,50.64% 60.10%,49.68% 59.48%,48.72% 58.65%,47.76% 57.81%,46.80% 67.19%,45.84% 67.81%,44.88% 68.65%,43.92% 69.48%,42.96% 70.31%,42.00% 70.94%,41.04% 71.77%,40.08% 72.60%,39.12% 73.44%,38.16% 74.06%,37.21% 74.90%,36.25% 75.73%,35.29% 76.35%,34.33% 77.19%,33.37% 78.02%,32.41% 78.65%,31.45% 79.48%,30.49% 79.90%,29.53% 79.90%,28.57% 79.27%,27.61% 78.44%,26.65% 77.60%,25.69% 76.98%,24.73% 76.15%,23.77% 75.31%,22.81% 74.69%,21.85% 73.85%,20.89% 73.02%,19.93% 72.40%,18.98% 71.56%,18.02% 70.73%,17.06% 70.10%,16.10% 69.27%,15.14% 68.44%,14.18% 67.60%,13.22% 66.77%)}
.fig-call.is-up{clip-path:polygon(0.00% -6.00%,100.00% -6.00%,100.00% 100.00%,68.87% 100.00%,67.91% 100.00%,66.95% 100.00%,65.99% 100.00%,65.03% 100.00%,64.07% 100.00%,63.11% 100.00%,62.15% 100.00%,61.19% 100.00%,60.23% 100.00%,59.27% 100.00%,58.31% 100.00%,57.35% 100.00%,56.39% 100.00%,55.44% 100.00%,54.48% 100.00%,53.52% 100.00%,52.56% 100.00%,51.60% 100.00%,50.64% 100.00%,49.68% 100.00%,48.72% 100.00%,47.76% 100.00%,46.80% 100.00%,45.84% 100.00%,44.88% 100.00%,43.92% 100.00%,42.96% 100.00%,42.00% 100.00%,41.04% 100.00%,40.08% 100.00%,39.12% 100.00%,38.16% 100.00%,37.21% 100.00%,36.25% 100.00%,35.29% 100.00%,34.33% 100.00%,33.37% 100.00%,32.41% 100.00%,31.45% 100.00%,30.49% 100.00%,29.53% 100.00%,28.57% 100.00%,27.61% 100.00%,26.65% 100.00%,25.69% 100.00%,24.73% 100.00%,23.77% 100.00%,22.81% 100.00%,21.85% 100.00%,20.89% 100.00%,19.93% 100.00%,18.98% 100.00%,18.02% 100.00%,17.06% 100.00%,16.10% 100.00%,15.14% 100.00%,14.18% 100.00%,0.00% 100.00%)}
.fig-story{clip-path:polygon(10.63% -6.00%,73.56% -6.00%,73.56% 45.31%,72.50% 46.35%,71.43% 47.19%,70.36% 48.02%,69.30% 48.85%,68.23% 49.69%,67.16% 50.73%,66.10% 51.56%,65.03% 52.40%,63.96% 53.23%,62.90% 54.06%,61.83% 54.90%,60.76% 55.73%,59.70% 56.77%,58.63% 57.60%,57.56% 58.44%,56.50% 58.44%,55.43% 58.02%,54.36% 63.23%,53.30% 67.81%,52.23% 70.31%,51.16% 71.98%,50.10% 73.44%,49.03% 74.48%,47.96% 75.52%,46.90% 76.35%,45.83% 76.98%,44.76% 77.81%,43.70% 78.02%,42.63% 78.85%,41.56% 79.06%,40.50% 79.48%,39.43% 79.90%,38.36% 80.10%,37.30% 80.31%,36.23% 80.52%,35.16% 80.73%,34.10% 80.73%,33.03% 80.73%,31.96% 80.73%,30.90% 80.73%,29.83% 80.73%,28.76% 80.52%,27.70% 80.31%,26.63% 80.31%,25.56% 79.90%,24.50% 79.69%,23.43% 79.27%,22.37% 78.85%,21.30% 78.44%,20.23% 77.81%,19.17% 77.40%,18.10% 76.56%,17.03% 75.94%,15.97% 74.90%,14.90% 73.85%,13.83% 72.40%,12.77% 71.15%,11.70% 69.27%,10.63% 66.15%)}
.fig-story.is-up{clip-path:polygon(0.00% -6.00%,100.00% -6.00%,100.00% 100.00%,72.50% 100.00%,71.43% 100.00%,70.36% 100.00%,69.30% 100.00%,68.23% 100.00%,67.16% 100.00%,66.10% 100.00%,65.03% 100.00%,63.96% 100.00%,62.90% 100.00%,61.83% 100.00%,60.76% 100.00%,59.70% 100.00%,58.63% 100.00%,57.56% 100.00%,56.50% 100.00%,55.43% 100.00%,54.36% 100.00%,53.30% 100.00%,52.23% 100.00%,51.16% 100.00%,50.10% 100.00%,49.03% 100.00%,47.96% 100.00%,46.90% 100.00%,45.83% 100.00%,44.76% 100.00%,43.70% 100.00%,42.63% 100.00%,41.56% 100.00%,40.50% 100.00%,39.43% 100.00%,38.36% 100.00%,37.30% 100.00%,36.23% 100.00%,35.16% 100.00%,34.10% 100.00%,33.03% 100.00%,31.96% 100.00%,30.90% 100.00%,29.83% 100.00%,28.76% 100.00%,27.70% 100.00%,26.63% 100.00%,25.56% 100.00%,24.50% 100.00%,23.43% 100.00%,22.37% 100.00%,21.30% 100.00%,20.23% 100.00%,19.17% 100.00%,18.10% 100.00%,17.03% 100.00%,15.97% 100.00%,14.90% 100.00%,13.83% 100.00%,12.77% 100.00%,11.70% 100.00%,0.00% 100.00%)}
.fig-brand{clip-path:polygon(9.05% -6.00%,91.24% -6.00%,91.24% 57.81%,89.84% 58.85%,88.45% 60.10%,87.06% 61.15%,85.66% 62.19%,84.27% 63.44%,82.88% 64.69%,81.48% 65.73%,80.09% 66.77%,78.70% 68.02%,77.31% 69.06%,75.91% 70.10%,74.52% 71.35%,73.13% 72.40%,71.73% 73.65%,70.34% 74.69%,68.95% 75.73%,67.56% 76.98%,66.16% 78.02%,64.77% 79.27%,63.38% 80.31%,61.98% 81.56%,60.59% 82.60%,59.20% 83.65%,57.80% 84.90%,56.41% 85.94%,55.02% 86.98%,53.63% 88.23%,52.23% 89.48%,50.84% 90.10%,49.45% 90.10%,48.05% 89.27%,46.66% 88.02%,45.27% 86.98%,43.88% 85.94%,42.48% 84.69%,41.09% 83.65%,39.70% 82.60%,38.30% 81.35%,36.91% 80.10%,35.52% 79.06%,34.12% 78.02%,32.73% 76.77%,31.34% 75.73%,29.95% 74.69%,28.55% 73.44%,27.16% 72.19%,25.77% 71.15%,24.37% 70.10%,22.98% 68.85%,21.59% 67.81%,20.20% 66.77%,18.80% 65.52%,17.41% 64.48%,16.02% 63.23%,14.62% 62.19%,13.23% 60.94%,11.84% 59.90%,10.44% 58.85%,9.05% 57.60%)}
.fig-brand.is-up{clip-path:polygon(0.00% -6.00%,100.00% -6.00%,100.00% 100.00%,89.84% 100.00%,88.45% 100.00%,87.06% 100.00%,85.66% 100.00%,84.27% 100.00%,82.88% 100.00%,81.48% 100.00%,80.09% 100.00%,78.70% 100.00%,77.31% 100.00%,75.91% 100.00%,74.52% 100.00%,73.13% 100.00%,71.73% 100.00%,70.34% 100.00%,68.95% 100.00%,67.56% 100.00%,66.16% 100.00%,64.77% 100.00%,63.38% 100.00%,61.98% 100.00%,60.59% 100.00%,59.20% 100.00%,57.80% 100.00%,56.41% 100.00%,55.02% 100.00%,53.63% 100.00%,52.23% 100.00%,50.84% 100.00%,49.45% 100.00%,48.05% 100.00%,46.66% 100.00%,45.27% 100.00%,43.88% 100.00%,42.48% 100.00%,41.09% 100.00%,39.70% 100.00%,38.30% 100.00%,36.91% 100.00%,35.52% 100.00%,34.12% 100.00%,32.73% 100.00%,31.34% 100.00%,29.95% 100.00%,28.55% 100.00%,27.16% 100.00%,25.77% 100.00%,24.37% 100.00%,22.98% 100.00%,21.59% 100.00%,20.20% 100.00%,18.80% 100.00%,17.41% 100.00%,16.02% 100.00%,14.62% 100.00%,13.23% 100.00%,11.84% 100.00%,10.44% 100.00%,0.00% 100.00%)}
.fig-photon{clip-path:polygon(8.91% -6.00%,86.49% -6.00%,86.49% 70.73%,85.18% 71.77%,83.86% 72.81%,82.55% 74.06%,81.23% 75.10%,79.92% 76.15%,78.60% 77.19%,77.29% 78.23%,75.97% 79.27%,74.66% 80.31%,73.34% 81.56%,72.03% 82.60%,70.71% 83.23%,69.40% 83.23%,68.08% 82.40%,66.77% 81.35%,65.45% 80.10%,64.14% 79.06%,62.82% 78.02%,61.51% 76.98%,60.19% 75.94%,58.88% 74.90%,57.56% 73.85%,56.25% 72.81%,54.93% 71.56%,53.62% 70.52%,52.30% 69.48%,50.99% 68.44%,49.67% 67.40%,48.36% 65.94%,47.04% 63.85%,45.73% 61.56%,44.41% 61.98%,43.10% 61.98%,41.78% 61.56%,40.47% 62.60%,39.15% 63.85%,37.84% 64.90%,36.52% 65.94%,35.21% 66.98%,33.89% 68.02%,32.58% 69.06%,31.26% 70.10%,29.95% 71.15%,28.63% 72.19%,27.32% 72.40%,26.00% 72.19%,24.69% 71.15%,23.37% 70.10%,22.06% 69.06%,20.74% 67.81%,19.43% 66.77%,18.11% 65.73%,16.80% 64.69%,15.48% 63.65%,14.17% 62.60%,12.85% 61.56%,11.54% 60.31%,10.22% 59.27%,8.91% 49.27%)}
.fig-photon.is-up{clip-path:polygon(0.00% -6.00%,100.00% -6.00%,100.00% 100.00%,85.18% 100.00%,83.86% 100.00%,82.55% 100.00%,81.23% 100.00%,79.92% 100.00%,78.60% 100.00%,77.29% 100.00%,75.97% 100.00%,74.66% 100.00%,73.34% 100.00%,72.03% 100.00%,70.71% 100.00%,69.40% 100.00%,68.08% 100.00%,66.77% 100.00%,65.45% 100.00%,64.14% 100.00%,62.82% 100.00%,61.51% 100.00%,60.19% 100.00%,58.88% 100.00%,57.56% 100.00%,56.25% 100.00%,54.93% 100.00%,53.62% 100.00%,52.30% 100.00%,50.99% 100.00%,49.67% 100.00%,48.36% 100.00%,47.04% 100.00%,45.73% 100.00%,44.41% 100.00%,43.10% 100.00%,41.78% 100.00%,40.47% 100.00%,39.15% 100.00%,37.84% 100.00%,36.52% 100.00%,35.21% 100.00%,33.89% 100.00%,32.58% 100.00%,31.26% 100.00%,29.95% 100.00%,28.63% 100.00%,27.32% 100.00%,26.00% 100.00%,24.69% 100.00%,23.37% 100.00%,22.06% 100.00%,20.74% 100.00%,19.43% 100.00%,18.11% 100.00%,16.80% 100.00%,15.48% 100.00%,14.17% 100.00%,12.85% 100.00%,11.54% 100.00%,10.22% 100.00%,0.00% 100.00%)}
.fig-week{clip-path:polygon(0.00% -6.00%,80.25% -6.00%,80.25% 61.21%,78.89% 62.07%,77.53% 63.07%,76.17% 64.07%,74.81% 64.93%,73.45% 66.07%,72.08% 66.93%,70.72% 67.93%,69.36% 68.93%,68.00% 69.93%,66.64% 70.79%,65.28% 71.79%,63.92% 71.79%,62.56% 71.21%,61.20% 70.21%,59.84% 69.21%,58.48% 68.21%,57.12% 67.21%,55.76% 66.36%,54.40% 65.36%,53.04% 64.36%,51.68% 63.36%,50.32% 62.36%,48.96% 61.36%,47.60% 60.50%,46.24% 59.50%,44.88% 58.50%,43.52% 57.64%,42.16% 56.50%,40.80% 55.64%,39.44% 54.64%,38.08% 53.64%,36.72% 52.64%,35.36% 51.64%,34.00% 50.64%,32.64% 49.79%,31.28% 48.79%,29.92% 47.79%,28.56% 46.93%,27.20% 45.79%,25.84% 44.93%,24.48% 43.93%,23.12% 42.93%,21.76% 41.93%,20.40% 40.93%,19.04% 40.07%,17.68% 39.07%,16.32% 38.07%,14.96% 37.07%,13.60% 36.07%,12.24% 35.07%,10.88% 34.21%,9.52% 33.21%,8.16% 32.21%,6.80% 31.36%,5.44% 30.21%,4.08% 29.36%,2.72% 28.36%,1.36% 27.36%,0.00% 26.36%)}
.fig-week.is-up{clip-path:polygon(0.00% -6.00%,100.00% -6.00%,100.00% 100.00%,78.89% 100.00%,77.53% 100.00%,76.17% 100.00%,74.81% 100.00%,73.45% 100.00%,72.08% 100.00%,70.72% 100.00%,69.36% 100.00%,68.00% 100.00%,66.64% 100.00%,65.28% 100.00%,63.92% 100.00%,62.56% 100.00%,61.20% 100.00%,59.84% 100.00%,58.48% 100.00%,57.12% 100.00%,55.76% 100.00%,54.40% 100.00%,53.04% 100.00%,51.68% 100.00%,50.32% 100.00%,48.96% 100.00%,47.60% 100.00%,46.24% 100.00%,44.88% 100.00%,43.52% 100.00%,42.16% 100.00%,40.80% 100.00%,39.44% 100.00%,38.08% 100.00%,36.72% 100.00%,35.36% 100.00%,34.00% 100.00%,32.64% 100.00%,31.28% 100.00%,29.92% 100.00%,28.56% 100.00%,27.20% 100.00%,25.84% 100.00%,24.48% 100.00%,23.12% 100.00%,21.76% 100.00%,20.40% 100.00%,19.04% 100.00%,17.68% 100.00%,16.32% 100.00%,14.96% 100.00%,13.60% 100.00%,12.24% 100.00%,10.88% 100.00%,9.52% 100.00%,8.16% 100.00%,6.80% 100.00%,5.44% 100.00%,4.08% 100.00%,2.72% 100.00%,1.36% 100.00%,0.00% 100.00%)}
.fig-quarter{clip-path:polygon(17.53% -6.00%,65.66% -6.00%,65.66% 60.10%,64.85% 63.02%,64.03% 64.90%,63.21% 66.15%,62.40% 67.40%,61.58% 68.44%,60.77% 69.27%,59.95% 70.10%,59.13% 70.73%,58.32% 71.35%,57.50% 71.98%,56.69% 72.60%,55.87% 73.02%,55.06% 73.44%,54.24% 73.85%,53.42% 74.27%,52.61% 74.48%,51.79% 74.90%,50.98% 75.10%,50.16% 75.31%,49.34% 75.52%,48.53% 75.73%,47.71% 75.94%,46.90% 76.15%,46.08% 76.15%,45.27% 76.35%,44.45% 76.35%,43.63% 76.35%,42.82% 76.35%,42.00% 76.35%,41.19% 76.35%,40.37% 76.35%,39.56% 76.35%,38.74% 76.35%,37.92% 76.35%,37.11% 76.15%,36.29% 76.15%,35.48% 75.94%,34.66% 75.73%,33.84% 75.52%,33.03% 75.31%,32.21% 75.10%,31.40% 74.90%,30.58% 74.48%,29.77% 74.27%,28.95% 73.85%,28.13% 73.44%,27.32% 73.02%,26.50% 72.60%,25.69% 71.98%,24.87% 71.35%,24.06% 70.73%,23.24% 70.10%,22.42% 69.27%,21.61% 68.44%,20.79% 67.40%,19.98% 66.15%,19.16% 65.10%,18.34% 63.23%,17.53% 60.52%)}
.fig-quarter.is-up{clip-path:polygon(0.00% -6.00%,100.00% -6.00%,100.00% 100.00%,64.85% 100.00%,64.03% 100.00%,63.21% 100.00%,62.40% 100.00%,61.58% 100.00%,60.77% 100.00%,59.95% 100.00%,59.13% 100.00%,58.32% 100.00%,57.50% 100.00%,56.69% 100.00%,55.87% 100.00%,55.06% 100.00%,54.24% 100.00%,53.42% 100.00%,52.61% 100.00%,51.79% 100.00%,50.98% 100.00%,50.16% 100.00%,49.34% 100.00%,48.53% 100.00%,47.71% 100.00%,46.90% 100.00%,46.08% 100.00%,45.27% 100.00%,44.45% 100.00%,43.63% 100.00%,42.82% 100.00%,42.00% 100.00%,41.19% 100.00%,40.37% 100.00%,39.56% 100.00%,38.74% 100.00%,37.92% 100.00%,37.11% 100.00%,36.29% 100.00%,35.48% 100.00%,34.66% 100.00%,33.84% 100.00%,33.03% 100.00%,32.21% 100.00%,31.40% 100.00%,30.58% 100.00%,29.77% 100.00%,28.95% 100.00%,28.13% 100.00%,27.32% 100.00%,26.50% 100.00%,25.69% 100.00%,24.87% 100.00%,24.06% 100.00%,23.24% 100.00%,22.42% 100.00%,21.61% 100.00%,20.79% 100.00%,19.98% 100.00%,19.16% 100.00%,18.34% 100.00%,0.00% 100.00%)}
.fig-call video.day-only{-webkit-mask-image:url(media/how-communication-mask.png),var(--shm);mask-image:url(media/how-communication-mask.png),var(--shm)}
.fig-call video.night-only{-webkit-mask-image:url(media/how-communication-mask.png),var(--shm);mask-image:url(media/how-communication-mask.png),var(--shm)}
.fig-story video.day-only{-webkit-mask-image:url(media/frise-story-mask.png),var(--shm);mask-image:url(media/frise-story-mask.png),var(--shm)}
.fig-story video.night-only{-webkit-mask-image:url(media/frise-story-night-mask.png),var(--shm);mask-image:url(media/frise-story-night-mask.png),var(--shm)}
.fig-brand video.day-only{-webkit-mask-image:url(media/frise-brand-mask.png?v=13ed4d6),var(--shm);mask-image:url(media/frise-brand-mask.png?v=13ed4d6),var(--shm)}
.fig-brand video.night-only{-webkit-mask-image:url(media/frise-brand-night-mask.png?v=13ed4d6),var(--shm);mask-image:url(media/frise-brand-night-mask.png?v=13ed4d6),var(--shm)}
.fig-photon video.day-only{-webkit-mask-image:url(media/frise-photon-mask.png),var(--shm);mask-image:url(media/frise-photon-mask.png),var(--shm)}
.fig-photon video.night-only{-webkit-mask-image:url(media/frise-photon-night-mask.png),var(--shm);mask-image:url(media/frise-photon-night-mask.png),var(--shm)}
.fig-week video.day-only{-webkit-mask-image:url(media/frise-week-mask.png),var(--shm);mask-image:url(media/frise-week-mask.png),var(--shm)}
.fig-week video.night-only{-webkit-mask-image:url(media/frise-week-night-mask.png),var(--shm);mask-image:url(media/frise-week-night-mask.png),var(--shm)}
.fig-quarter video.day-only{-webkit-mask-image:url(media/frise-quarter-mask.png),var(--shm);mask-image:url(media/frise-quarter-mask.png),var(--shm)}
.fig-quarter video.night-only{-webkit-mask-image:url(media/frise-quarter-night-mask.png),var(--shm);mask-image:url(media/frise-quarter-night-mask.png),var(--shm)}
.flow-notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-8);margin-top:var(--s-8)}
.flow-notes>.how-note{margin-top:0;justify-content:center}
/* la meme phrase dans les trois cases : la question, puis la reponse ; dans
   la derniere, See pricing tout a droite (Elio, 17/10/2026) */
.flow-notes>.flow-price{flex-direction:row;align-items:center;justify-content:space-between;gap:var(--s-16)}
.flow-price .btn{flex:none}
/* de 1000 a 1399 px, trois colonnes serreraient la derniere case : les deux
   premieres cote a cote, la case des prix sur toute la largeur dessous */
@media (min-width:1000px) and (max-width:1399px){
  .flow-notes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flow-notes>.flow-price{grid-column:1/-1}
}
@media (max-width:699px){.flow-notes>.flow-price{flex-direction:column;align-items:stretch}}

/* ---- sous 1000 px ------------------------------------------------------------ */
@media (max-width:999px){
  .hw-hero{display:flex;flex-direction:column;min-height:0}
  .hw-hero-art{position:relative;inset:auto;order:2;aspect-ratio:4/3;border-top:var(--bw) solid var(--line)}
  .hw-quarter{left:calc(100cqw - 183.9cqh)}
  .hw-hero .pg-hero-text{max-width:none;padding:var(--s-48) var(--pad) 40px}
  .cc{padding:32px}
  .cc-body{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
  .cc-side{display:none}
  /* la frise devient une liste, dans les deux versions : chaque moment et
     son objet, deja sorti */
  .flow-scroll{height:auto}
  .flow-box{position:static;height:auto;display:block;padding:8px var(--pad)}
  .flow-text{overflow:visible;-webkit-mask:none;mask:none}
  .flow-steps{transform:none!important}
  .flow-rail,.flow-stage{display:none}
  .flow-step{height:auto;padding:24px 0}
  .flow-copy{opacity:1}
  .flow-step-in{gap:20px}
  /* la place de l'objet : le panneau gris de la scene, d'un bord a l'autre
     de la case, entre deux traits ; la toile a 120 %, centree et rognee
     comme dans la scene (le plateau d'Every week sort par le cadre) */
  .flow-step-img{display:block;position:relative;overflow:hidden;aspect-ratio:1792/1120;
    width:calc(100% + 2 * var(--pad));margin:0 calc(-1 * var(--pad));background:var(--cell);
    border-top:var(--bw) solid var(--line);border-bottom:var(--bw) solid var(--line)}
  .flow-step-img .hiw-v{position:absolute;left:50%;top:50%;width:120%;transform:translate(-50%,-50%)}
  .flow-notes{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:599px){
  .cc{padding:16px 12px}
  .cc-crumb>svg,.cc-crumb>.cc-sep,.cc-bar-r{display:none}
  .cc-body{display:flex;flex-direction:column;height:auto}
  .cc-log{flex:none;min-height:320px;padding:16px 16px 12px}
  .cc-input{margin:0 12px 12px}
  .cc-pane{border-left:0;border-top:1px solid var(--cc-line)}
  .cc-view{flex:none;aspect-ratio:1/1.05}
  .cc-scene{inset:16px}
}

@media (prefers-reduced-motion:reduce){
  .flow-copy,.flow .man-fig,.flow-stage .hiw-sol{transition:none!important}
  .flow .man-fig video{animation:none!important}
  .cc-caret,.cc-view::before,.cc-sess-dot{animation:none!important}
  .cc-scene.is-shown,.cc.is-anim .cc-run>li.is-in{transition:none;animation:none}
}