/* Section « How it works » de l'accueil. Couleurs et polices : jetons de tokens.css, rien d'autre.
   Toutes les mesures de la scène passent par --u, l'unité de la scène : 1px à taille réelle. */
/* L'en-tête du site reste collé en haut de l'écran ; sa hauteur est --site-head, écrite dans site-pages.css. La version
   statique arrive sous lui. La scène, elle, arrive tout en haut de l'écran, comme avant : son cadre collé réserve
   lui-même la place de l'en-tête, et le déroulé de la scène ne change pas. */
.how{scroll-margin-top:var(--site-head,0px);--how-tint:color-mix(in srgb,var(--gigets-ember) 8%,var(--gigets-paper));--u:1px;position:relative;border-bottom:var(--gigets-hairline)}
/* Bouton « See how it works » du haut de page : aucun trait au repos. Au survol et au focus clavier,
   un filet Ink de 1 px sous les mots seulement. La flèche et le contour de focus du site restent. */
.home .action.how-jump::before{content:none}
.home .action.how-jump:hover span,.home .action.how-jump:focus-visible span{text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--gigets-ink);text-underline-offset:6px}
.how .how-count{font-family:var(--gigets-font-data);font-size:12px;line-height:1.45;letter-spacing:.14em;text-transform:uppercase;color:var(--gigets-mute);margin:0 0 10px}
.how .how-title,.how .how-step h3{font-family:var(--gigets-font-display);font-weight:400;font-size:clamp(30px,4.4vw,58px);line-height:1.05;letter-spacing:-.02em;color:var(--gigets-ink);margin:0 0 8px}
.how .how-sub{font-size:clamp(15px,1.3vw,18px);line-height:1.45;color:var(--gigets-body);max-width:560px;margin:0 auto}
.how .how-note,.how .how-disclosure{font-size:13px;line-height:1.45;color:var(--gigets-mute);margin:0}

/* Version statique : sans JavaScript, mouvement réduit ou écran trop bas. Les cinq moments à la suite. */
.how-static{max-width:1280px;margin:0 auto;padding:64px 40px;text-align:center}
.how-intro h2{font-family:var(--gigets-font-display);font-weight:400;font-size:clamp(30px,4vw,46px);line-height:var(--gigets-leading-title);letter-spacing:-.02em;color:var(--gigets-ink);margin:0 0 8px}
.how-steps{list-style:none;margin:56px 0 0;padding:0;display:grid;gap:72px}
.how-step{margin:0;padding:0}
.how-frame{container-type:inline-size;margin-top:28px}
.how-frame .how-world{--u:min(1px,calc(100cqw / 1100));margin:0 auto}
.how-frame .how-view,.how-frame .how-card{opacity:1}
.how-frame .how-ch,.how-frame .how-num{visibility:visible}
.how-frame [data-how="lookA"],.how-frame .how-rows{visibility:hidden}
.how-frame .how-price,.how-frame .how-settled,.how-frame .how-toast{display:none}
.how-at-4 .how-price,.how-at-5 .how-settled,.how-at-5 .how-toast{display:block;opacity:1}
.how-at-1 .how-sweep{display:none}
.how-at-2 .how-sweep,.how-at-3 .how-sweep{stroke-dashoffset:.55}
.how-at-4 .how-sweep{stroke-dashoffset:.3}
.how-at-5 .how-sweep{stroke-dashoffset:0}

/* Scène pilotée par le défilement. La section est haute, la scène reste collée, le défilement reste celui de la page. */
.how.how-on{height:720vh;border:0;scroll-margin-top:0}
.how.how-on .how-static{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.how.how-on .how-frame{display:none}
.how-live{height:100%}
.how-live[hidden]{display:none}
.how-sticky{position:sticky;top:0;height:100vh;height:100svh;padding-top:var(--site-head,0px);padding-bottom:var(--site-consent,0px);overflow:hidden;display:flex;flex-direction:column;background:var(--gigets-paper);border-bottom:var(--gigets-hairline)}
.how-cap{flex:none;display:grid;text-align:center;padding:28px 20px 6px}
.how-slide{grid-area:1/1;opacity:0;transform:translateY(12px);will-change:opacity,transform;transition:opacity .35s ease,transform .35s ease}
.how-slide.on{opacity:1;transform:translateY(0)}
.how-view-port{flex:1;position:relative;min-height:0}
.how-live .how-world{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.how-hint{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);font-family:var(--gigets-font-data);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gigets-mute);transition:opacity .3s;margin:0}
.how .how-note{flex:none;text-align:center;padding:6px 20px 12px}

/* La scène : deux téléphones, le G entre eux. Mesures de la maquette, en unités de scène.
   Les téléphones (30 octobre 2026) : un appareil générique d'aujourd'hui, le même à toutes les tailles. Coque Ink aux
   proportions d'un téléphone actuel (300 sur 625), tranche plus claire, léger reflet, trois touches, caméra ronde,
   barre d'état (heure, réseau, batterie), barre de geste, ombre douce. Aucune forme ni logo propre à une marque.
   L'ombre et le reflet sont l'exception de la charte limitée à ce dessin (accord d'Alexandre du 30 octobre 2026). */
.how-world{position:relative;width:calc(1100*var(--u));height:calc(680*var(--u));font-family:var(--gigets-font-ui);font-size:calc(17*var(--u));line-height:1.45;color:var(--gigets-ink);text-align:left;pointer-events:none;user-select:none}
.how-world p{margin:0;max-width:none}
.how-phone{position:absolute;top:calc(10*var(--u));width:calc(300*var(--u));height:calc(625*var(--u));background:var(--gigets-ink);border-radius:calc(46*var(--u));padding:calc(9*var(--u));box-shadow:inset 0 0 0 calc(1.5*var(--u)) color-mix(in srgb,var(--gigets-ink) 62%,var(--gigets-paper)),0 calc(30*var(--u)) calc(60*var(--u)) calc(-22*var(--u)) color-mix(in srgb,var(--gigets-ink) 38%,transparent),0 calc(8*var(--u)) calc(18*var(--u)) calc(-8*var(--u)) color-mix(in srgb,var(--gigets-ink) 26%,transparent)}
/* Le reflet : un voile Paper qui part du coin haut gauche de la coque ; l'écran passe par-dessus. */
.how-phone::before{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(140deg,color-mix(in srgb,var(--gigets-paper) 30%,transparent) 0%,transparent 32%,transparent 72%,color-mix(in srgb,var(--gigets-paper) 12%,transparent) 100%);pointer-events:none}
.how-key{position:absolute;width:calc(3*var(--u));background:color-mix(in srgb,var(--gigets-ink) 78%,var(--gigets-paper))}
.how-k1,.how-k2{left:calc(-3*var(--u));border-radius:calc(2*var(--u)) 0 0 calc(2*var(--u))}
.how-k1{top:calc(118*var(--u));height:calc(46*var(--u))}
.how-k2{top:calc(174*var(--u));height:calc(46*var(--u))}
.how-k3{right:calc(-3*var(--u));top:calc(148*var(--u));height:calc(72*var(--u));border-radius:0 calc(2*var(--u)) calc(2*var(--u)) 0}
.how-phone.how-l{left:0}
.how-phone.how-r{left:calc(800*var(--u))}
.how-screen{position:relative;width:100%;height:100%;background:var(--gigets-card);border-radius:calc(37*var(--u));overflow:hidden}
/* Barre d'état : l'heure en Geist Mono (la charte met les heures en mono), la caméra au centre, le réseau et la batterie. */
.how-status{position:absolute;left:0;right:0;top:0;height:calc(44*var(--u));display:flex;align-items:center;justify-content:space-between;padding:0 calc(26*var(--u)) 0 calc(30*var(--u));font:500 calc(13*var(--u))/1 var(--gigets-font-data);font-variant-numeric:tabular-nums;color:var(--gigets-ink);z-index:5}
.how-cam{position:absolute;left:50%;top:calc(15*var(--u));width:calc(12*var(--u));height:calc(12*var(--u));margin-left:calc(-6*var(--u));border-radius:var(--gigets-radius-avatar);background:var(--gigets-ink)}
.how-icons{display:flex;align-items:center;gap:calc(6*var(--u))}
.how-sig{display:flex;align-items:flex-end;gap:calc(1.5*var(--u));height:calc(10*var(--u))}
.how-sig i{width:calc(3*var(--u));background:currentColor;border-radius:calc(.5*var(--u))}
.how-sig i:nth-child(1){height:calc(4*var(--u))}
.how-sig i:nth-child(2){height:calc(6*var(--u))}
.how-sig i:nth-child(3){height:calc(8*var(--u))}
.how-sig i:nth-child(4){height:calc(10*var(--u))}
.how-bat{position:relative;width:calc(23*var(--u));height:calc(11*var(--u));border:calc(1.2*var(--u)) solid color-mix(in srgb,var(--gigets-ink) 45%,transparent);border-radius:calc(3*var(--u));margin-right:calc(3*var(--u))}
.how-bat::before{content:'';position:absolute;left:calc(1.3*var(--u));top:calc(1.3*var(--u));bottom:calc(1.3*var(--u));width:68%;background:currentColor;border-radius:calc(1.4*var(--u))}
.how-bat::after{content:'';position:absolute;right:calc(-4*var(--u));top:calc(2.6*var(--u));width:calc(1.8*var(--u));height:calc(3.4*var(--u));background:color-mix(in srgb,var(--gigets-ink) 45%,transparent);border-radius:0 calc(1*var(--u)) calc(1*var(--u)) 0}
.how-bar-home{position:absolute;left:50%;bottom:calc(8*var(--u));width:calc(110*var(--u));height:calc(4*var(--u));margin-left:calc(-55*var(--u));border-radius:calc(2*var(--u));background:color-mix(in srgb,var(--gigets-ink) 82%,transparent);z-index:5}
/* V2 : l'écran comme une vraie app. Fond Paper, cartes Card ; barre d'app sous la barre d'état ; marques d'état de
   quatre unités à gauche des cartes (demande en Magenta, offre en Ember, mise en relation en Ink, réglé en Verdigris) ;
   le clavier pendant la saisie et la zone de saisie des conversations, sans lettres. */
.how-screen{background:var(--gigets-paper)}
.how-app{display:flex;align-items:center;justify-content:space-between;height:calc(32*var(--u));margin:calc(-6*var(--u)) 0 calc(2*var(--u))}
.how-app-mark{width:calc(30*var(--u));height:calc(30*var(--u));display:block}
.how-app-me{width:calc(30*var(--u));height:calc(30*var(--u));border-radius:var(--gigets-radius-avatar);background:var(--gigets-sunken);display:grid;place-items:center;color:var(--gigets-mute)}
.how-app-me svg{width:calc(18*var(--u));height:calc(18*var(--u));fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.how-view .how-box{border-left:calc(4*var(--u)) solid var(--gigets-state-connected)}
[data-how="R2"] .how-box{border-left-color:var(--gigets-state-ask)}
[data-how="L5"] .how-box,[data-how="R5"] .how-box{border-left-color:var(--gigets-state-settled)}
.how-card{border-left:calc(4*var(--u)) solid var(--gigets-state-offer)}
.how-kbd{position:absolute;left:0;right:0;bottom:calc(22*var(--u));padding:calc(8*var(--u)) calc(6*var(--u));background:var(--gigets-sunken);display:grid;gap:calc(8*var(--u));z-index:-1}
.how-krow{display:flex;justify-content:center;gap:calc(5*var(--u))}
.how-krow i{width:calc(21*var(--u));height:calc(30*var(--u));border-radius:calc(5*var(--u));background:var(--gigets-card)}
.how-krow .how-kspace{width:calc(130*var(--u))}
.how-compose{position:absolute;left:calc(18*var(--u));right:calc(18*var(--u));bottom:calc(30*var(--u));height:calc(40*var(--u));border:var(--gigets-hairline);background:var(--gigets-card);z-index:-1}
.how-who{position:absolute;top:calc(650*var(--u));width:calc(300*var(--u));text-align:center;font-weight:600;font-size:calc(18*var(--u))}
.how-who.how-l{left:0}
.how-who.how-r{left:calc(800*var(--u))}
.how-view{position:absolute;inset:0;isolation:isolate;padding:calc(56*var(--u)) calc(18*var(--u)) calc(20*var(--u));display:flex;flex-direction:column;gap:calc(12*var(--u));opacity:0}
.how-lab{font-family:var(--gigets-font-data);font-size:calc(10.5*var(--u));letter-spacing:.1em;text-transform:uppercase;color:var(--gigets-mute)}
.how-h{font-family:var(--gigets-font-display);font-size:calc(25*var(--u));line-height:1.12}
.how-t{font-size:calc(14.5*var(--u));color:var(--gigets-body)}
.how-gap{margin-top:calc(8*var(--u))!important}
.how-gap-s{margin-top:calc(6*var(--u))!important}
.how-box{background:var(--gigets-card);border:var(--gigets-hairline);padding:calc(14*var(--u))}
.how-field{position:relative;background:var(--gigets-card);border:var(--gigets-hairline);padding:calc(14*var(--u));min-height:calc(118*var(--u));font-size:calc(17*var(--u));line-height:1.35}
/* La saisie : les lettres sont déjà en place, le script les montre une à une et déplace le curseur. Rien ne change de taille. */
.how-ch{visibility:hidden}
.how-ch.on{visibility:visible}
.how-caret{display:inline-block;width:calc(2*var(--u));height:1.05em;background:var(--gigets-ink);vertical-align:calc(-3*var(--u));margin-left:calc(1*var(--u))}
.how-live .how-caret{position:absolute;left:0;top:.15em;margin:0;will-change:transform}
.how-btn{margin-top:auto;padding:calc(14*var(--u));text-align:center;font-weight:700;font-size:calc(15.5*var(--u));background:var(--gigets-sunken);color:var(--gigets-mute);transition:background .2s,color .2s,transform .12s;transform:scale(1)}
.how-btn.how-ready{background:var(--gigets-gradient);color:var(--gigets-card)}
.how-btn.how-done{background:var(--gigets-ink);color:var(--gigets-paper)}
.how-btn.how-ghost{margin-top:0;background:transparent;border:var(--gigets-hairline);color:var(--gigets-body);font-weight:600}
.how-btn.how-press{transform:scale(.95)}
/* Les deux libellés occupent la même place : passer de l'un à l'autre ne change aucune taille. */
.how-btn.how-swap{display:grid;justify-items:center}
.how-s1,.how-s2{grid-area:1/1}
.how-s2,.how-done .how-s1{visibility:hidden}
.how-done .how-s2{visibility:visible}
.how-bub{background:var(--gigets-card);border:var(--gigets-hairline);padding:calc(10*var(--u)) calc(12*var(--u));font-size:calc(14.5*var(--u));max-width:88%;align-self:flex-start}
.how-bub.how-me{align-self:flex-end;background:var(--gigets-ink);border-color:var(--gigets-ink);color:var(--gigets-paper)}
.how-person{display:flex;align-items:center;gap:calc(10*var(--u))}
.how-person b{font-size:calc(17*var(--u));font-weight:600}
.how-av{width:calc(40*var(--u));height:calc(40*var(--u));border-radius:var(--gigets-radius-avatar);background:var(--how-tint);display:grid;place-items:center;font-family:var(--gigets-font-display);font-size:calc(19*var(--u));flex:none}
.how-look{display:grid}
.how-look .how-t{grid-area:1/1;isolation:isolate}
.how-look [data-how="lookB"]{opacity:0}
.how-frame .how-look [data-how="lookB"]{opacity:1}
.how-pick{position:relative}
.how-rows{isolation:isolate;display:flex;flex-direction:column;gap:calc(6*var(--u))}
.how-row{display:flex;align-items:center;gap:calc(10*var(--u));background:var(--gigets-card);border:var(--gigets-hairline);padding:calc(8*var(--u)) calc(10*var(--u));transition:border-color .15s}
.how-row.scan{border-color:var(--gigets-ink)}
.how-ic{width:calc(30*var(--u));height:calc(30*var(--u));border-radius:var(--gigets-radius-avatar);background:var(--gigets-sunken);display:grid;place-items:center;color:var(--gigets-mute);flex:none}
.how-ic svg{width:calc(18*var(--u));height:calc(18*var(--u));fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.how-bar{height:calc(10*var(--u));width:calc(88*var(--u));background:var(--gigets-sunken)}
.how-row:nth-child(2) .how-bar{width:calc(64*var(--u))}
.how-row:nth-child(3) .how-bar{width:calc(104*var(--u))}
.how-row:nth-child(4) .how-bar{width:calc(76*var(--u))}
.how-row:nth-child(5) .how-bar{width:calc(92*var(--u))}
.how-card{isolation:isolate;position:absolute;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;gap:calc(10*var(--u));background:var(--how-tint);border:1px solid var(--gigets-ink);padding:calc(12*var(--u));opacity:0}
.how-can{font-weight:600;font-size:calc(13*var(--u));color:var(--gigets-ink);white-space:nowrap}
.how-big{font-family:var(--gigets-font-data);font-variant-numeric:tabular-nums;font-size:calc(52*var(--u));line-height:1;contain:content}
.how-plus{display:inline-grid}
.how-num{grid-area:1/1;visibility:hidden}
.how-num.on{visibility:visible}
.how-big small{font-family:var(--gigets-font-data);font-size:calc(15*var(--u));margin-left:calc(8*var(--u))}
.how-fine{display:none;font-size:calc(12.5*var(--u));color:var(--gigets-mute);margin-top:calc(6*var(--u))!important}
.how-ok{font-weight:600;font-size:calc(15*var(--u));color:var(--gigets-ink)}
.how-tick{color:var(--gigets-ink)}
.how-tick.how-vd{color:var(--gigets-verdigris)}
.how-idle{background:var(--gigets-sunken);color:var(--gigets-body);align-items:center;justify-content:center;text-align:center}
.how-idle .how-av{width:calc(72*var(--u));height:calc(72*var(--u));font-size:calc(32*var(--u))}
.how-idle .how-t{color:var(--gigets-body)}
.how-toast{position:absolute;left:calc(12*var(--u));right:calc(12*var(--u));top:calc(44*var(--u));background:var(--gigets-ink);color:var(--gigets-paper);padding:calc(12*var(--u)) calc(14*var(--u));font-size:calc(14*var(--u));line-height:1.45;opacity:0;z-index:4}
.how-toast b{display:block;font-family:var(--gigets-font-data);font-size:calc(10*var(--u));letter-spacing:.1em;text-transform:uppercase;font-weight:400;color:var(--gigets-mute-on-ink);margin-bottom:calc(3*var(--u))}

/* Entre les deux téléphones */
.how-track{position:absolute;left:calc(300*var(--u));width:calc(500*var(--u));top:calc(255*var(--u));border-top:1px dashed var(--gigets-rule)}
.how-g{position:absolute;left:calc(465*var(--u));top:calc(170*var(--u));width:calc(170*var(--u));height:calc(170*var(--u));z-index:3}
.how-mark{width:100%;height:100%;display:block;overflow:visible}
.how-mark-base{fill:var(--gigets-rule)}
.how-sweep{fill:none;stroke:var(--gigets-card);stroke-width:46;stroke-linecap:round;stroke-dasharray:1 2;stroke-dashoffset:1}
.how-gbg{position:absolute;left:calc(455*var(--u));top:calc(160*var(--u));width:calc(190*var(--u));height:calc(190*var(--u));border-radius:var(--gigets-radius-avatar);background:var(--gigets-paper);z-index:2}
.how-chip{position:absolute;top:0;left:0;background:var(--gigets-card);border:1px solid var(--gigets-state-ask);padding:calc(10*var(--u)) calc(12*var(--u));font-size:calc(15*var(--u));line-height:1.25;font-weight:600;white-space:nowrap;opacity:0;z-index:1;transform-origin:center center}
.how-chip.how-reply{border-color:var(--gigets-state-offer)}
.how-price{isolation:isolate;position:absolute;left:calc(350*var(--u));width:calc(400*var(--u));top:calc(392*var(--u));text-align:center;opacity:0}
.how-n{font-family:var(--gigets-font-data);font-variant-numeric:tabular-nums;font-size:calc(96*var(--u));line-height:.95;display:block}
.how-u{font-family:var(--gigets-font-data);font-size:calc(20*var(--u));letter-spacing:.04em}
.how-price p{font-size:calc(14*var(--u));color:var(--gigets-mute);margin-top:calc(8*var(--u))}
.how-settled{isolation:isolate;position:absolute;left:calc(400*var(--u));width:calc(300*var(--u));top:calc(372*var(--u));text-align:center;font-family:var(--gigets-font-data);font-size:calc(15*var(--u));letter-spacing:.12em;text-transform:uppercase;color:var(--gigets-ink);opacity:0}
.how-coin{position:absolute;left:0;top:0;width:calc(22*var(--u));height:calc(22*var(--u));margin:calc(-11*var(--u)) 0 0 calc(-11*var(--u));border-radius:var(--gigets-radius-avatar);background:var(--gigets-crimson);opacity:0;z-index:4}

/* Écrans étroits : la scène suit un seul téléphone à la fois ; le montant illustratif se lit dans l'écran. */
@media (max-width:820px){
 .how-cap{padding-top:18px}
 .how .how-title,.how .how-step h3{font-size:30px}
 .how-fine{display:block}
 .how-static{padding:48px 20px}
 .how-steps{gap:56px;margin-top:40px}
 .how-frame .how-world{--u:min(1px,calc(100cqw / 320));width:calc(300*var(--u));height:calc(690*var(--u))}
 /* Lisible au téléphone (30 octobre 2026) : le texte de l'écran prend quelques unités de plus. La scène descend au plus
    vers 0,87 (360 px, en français, pour que l'étiquette sorte entière) : les étiquettes y restent à 12 px au moins,
    les phrases à 14 px au moins. */
 .how-lab,.how-status{font-size:calc(14*var(--u))}
 .how-t,.how-bub,.how-ok,.how-toast,.how-btn{font-size:calc(16.5*var(--u))}
 .how-fine,.how-can,.how-toast b{font-size:calc(14*var(--u))}
 /* Scène : le téléphone garde sa taille lisible et son bas peut sortir du cadre ; le nom passe au-dessus de l'appareil,
    le contenu de chaque écran se groupe en haut, et la liste balayée compte trois lignes. Quand la hauteur manque, l'écran
    défile comme une app (home-how.js). « Scroll ↓ » se pose sur une pastille Paper. */
 .how-live .how-view-port{overflow:hidden}
 /* Le bas du téléphone se fond dans le fond de la page juste au-dessus de la légende (choix d'Alexandre, 30 octobre
    2026) : l'appareil semble monter du bas de l'écran. Le texte de l'écran s'arrête toujours au-dessus du fondu
    (FADE_H, home-how.js) ; « Scroll ↓ » reste par-dessus. */
 .how-live .how-view-port::after{content:'';position:absolute;left:0;right:0;bottom:0;height:48px;background:linear-gradient(to bottom,color-mix(in srgb,var(--gigets-paper) 0%,transparent),var(--gigets-paper));pointer-events:none}
 .how-live .how-who{top:calc(-36*var(--u))}
 .how-live .how-view .how-btn{margin-top:0}
 .how-live .how-row:nth-child(n+4){display:none}
 .how-hint{background:var(--gigets-paper);padding:6px 10px;z-index:6}
 .how-frame[data-focus="l"] .how-world>:not(.how-l),.how-frame[data-focus="r"] .how-world>:not(.how-r),.how-frame[data-focus="g"] .how-world>:not(.how-c){display:none}
 .how-frame[data-focus="r"] .how-r{left:0}
 .how-frame[data-focus="g"] .how-world{height:calc(240*var(--u))}
 .how-frame[data-focus="g"] .how-track,.how-frame[data-focus="g"] .how-gbg,.how-frame[data-focus="g"] .how-price{display:none}
 .how-frame[data-focus="g"] .how-g{left:calc(65*var(--u));top:0}
 .how-frame[data-focus="g"] .how-settled{left:0;top:calc(196*var(--u))}
}
@media (max-height:700px){
 .how-cap{padding-top:12px}
 .how .how-live .how-count{margin-bottom:6px}
 .how .how-live .how-title{font-size:26px}
 .how .how-live .how-sub{font-size:14px}
}
/* Mouvement réduit : jamais de scène collante, même si le script s'exécute. */
@media (prefers-reduced-motion:reduce){
 .how-live{display:none}
 .how-slide{transition:none}
}
.how-defs{position:absolute}