/* Accueil, section 02 · Le studio (#manifesto) : taille plein écran, la télé et
   sa vidéo. Chargé après home.css ; tout est limité à .home #manifesto et à
   html:not(.calage) (?calage garde l'écran fixe d'origine : about.css et
   home.css).
   La télé est celle d'avant la vague 3 (demande de Yann, 01/10 : « c'était
   mieux avant ») : un écran plat incliné, cadre noir fin, liseré, lueur rouge,
   reflet et lignes de balayage, dans la pièce sombre du studio. Son
   inclinaison suit le défilement (data-scrub="tilt" : scrollfx.js écrit
   --tilt, de -48° quand la section arrive à -24° quand elle part), la pièce a
   sa parallaxe (data-depth, parallax.js). Elle est simplement plus grande, à
   l'échelle de la section plein écran (--u), avec les mêmes proportions
   (perspective = 2,13 × sa largeur, pivot sur l'arête basse gauche).
   Sur l'écran, une vidéo muette en boucle (quatre chaînes, la 4 par défaut :
   les réalisations), posée par home/about.js, qui met .has-video sur l'écran
   dès que l'affiche ou la vidéo est prête : les mots et le logo d'origine
   s'effacent, le voile s'allège (la vidéo est le sujet). Sous l'écran, les
   touches de chaîne (1 bis), la neige du zapping et l'affichage « CH n »
   (1 ter), posés seulement quand about.js les a branchés (.has-dial).
   Arrivée : contrat commun pour les textes (home.css : titres, .rv) ; le
   décor n'est pas caché pendant le glissé (la télé entre avec la section en
   se redressant, comme avant) ; départ : le bloc titre recule (--lv),
   l'écran finit de se redresser.
   Contrat (SPEC-VITRINE) : html.yn-fx (effets actifs), .st-in (T0 de
   l'arrivée), --lv (départ) publié par sections.js. Sans yn-fx : état final,
   immobile. */

/* ---------------------------------------------------------------------------
   0. Jetons de repli : mêmes valeurs que home.css, sans spécificité, donc
      inactifs dès que home.css les déclare. Servent si ce fichier est seul.
   --------------------------------------------------------------------------- */
@property --s2-a{syntax:'<angle>';inherits:false;initial-value:0deg}
:where(:root){
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.65,0,.35,1);
}
:where(html:not(.calage) main.home){
  --u:min(calc((100vw - var(--sbw,0px)) / 1920),calc(100vh / 1080));
  --u:min(calc((100vw - var(--sbw,0px)) / 1920),calc(100svh / 1080));
  --fx:max(0px,calc((100vw - var(--sbw,0px) - 2240 * var(--u)) / 2));
  --pl:calc(var(--fx) + max(170 * var(--u),97 * var(--m)));
  --pr:calc(var(--fx) + max(120 * var(--u),96px));
  --xtra:max(0px,calc(100svh - 1080 * var(--u)));
  --t-body:max(16px,calc(20 * var(--u)));
  --t-mono:max(10.5px,calc(13 * var(--u)));
}
@media (max-width:1023px){
  :where(html:not(.calage) main.home){--u:min(calc(100vw / 390),calc(100svh / 844));--fx:0px;--pl:24px;--pr:24px;--xtra:0px;--t-body:16px;--t-mono:10.5px}
}
@media (max-width:1023px) and (max-height:760px){:where(html:not(.calage) main.home){--t-body:15px}}
:where(html.yn-fx main.home > section){--lv:clamp(0,calc(var(--rel,0) * -1),1)}

/* ---------------------------------------------------------------------------
   1. La télé, à toutes les tailles hors ?calage. --mw : largeur de l'écran
      (posée en 2. et 3.), --mh : sa hauteur (300 × 194, celle d'avant). Les
      mesures d'avant (exprimées en --m pour un écran de 300 --m) sont
      reprises en fractions de --mw : l'écran grandit sans changer d'allure.
   --------------------------------------------------------------------------- */
html:not(.calage) main.home #manifesto{--mh:calc(var(--mw) * .6467)}
html:not(.calage) main.home #manifesto .monitor{width:var(--mw);height:var(--mh);aspect-ratio:auto;transform-origin:0 100%;
  transform:perspective(calc(var(--mw) * 2.1333)) rotateY(var(--tilt,-38deg));transition:transform .1s linear}
html:not(.calage) main.home #manifesto .monitor__frame{border-radius:calc(var(--mw) * .01);padding:calc(var(--mw) * .0133);
  box-shadow:0 0 0 1px rgba(255,255,255,.12),0 0 calc(var(--mw) * .1333) calc(var(--mw) * .0133) rgba(246,43,62,.2),calc(var(--mw) * -.06) calc(var(--mw) * .0733) calc(var(--mw) * .1667) rgba(0,0,0,.8)}
html:not(.calage) main.home #manifesto .monitor__screen{border-radius:calc(var(--mw) * .005)}
html:not(.calage) main.home #manifesto .monitor__words{font-size:calc(var(--mw) * .09)}

/* la vidéo : sous le voile (::after de l'écran) et le reflet ; cachée tant que
   home/about.js n'a rien posé (?calage compris, éditeur, fichiers absents) */
main.home #manifesto .monitor__video{display:none}
html:not(.calage) main.home #manifesto .monitor__screen.has-video .monitor__video{display:block;position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;background:#070708}
html:not(.calage) main.home #manifesto .monitor__screen.has-video :is(.monitor__words,.monitor__brand){display:none}
html:not(.calage) main.home #manifesto .monitor__screen.has-video::before{content:none}
/* voile léger : le côté lointain (à gauche) à peine plus sombre, les bords
   assombris comme sous une vitre bombée, et les lignes de balayage d'avant */
html:not(.calage) main.home #manifesto .monitor__screen.has-video::after{background:
  linear-gradient(100deg,rgba(6,6,7,.26) 0,rgba(6,6,7,.1) 42%,rgba(6,6,7,0) 78%),
  radial-gradient(130% 125% at 54% 48%,transparent 62%,rgba(4,2,3,.38) 100%),
  repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px)}

/* ---------------------------------------------------------------------------
   1 bis. Les touches de chaîne (.monitor__dial, branchées par home/about.js :
      .has-dial sur .monitor). Comme sur un vieux téléviseur, le bas du cadre
      s'allonge d'un bandeau (--chin) qui porte quatre petites touches
      numérotées, chacune avec son voyant (rouge sur la chaîne en cours).
      Elles sont dans .monitor : elles s'inclinent avec l'écran. L'écran garde
      sa taille (le cadre descend de --chin, son retrait du bas grandit
      d'autant). Zone de clic : toute la case (--kw × --chin, prolongée par
      ::after), le dessin est plus petit. Le bloc de textes (z-index 3) couvre
      toute la largeur de la section : il laisse passer les clics, ses
      enfants les reprennent.
   --------------------------------------------------------------------------- */
html:not(.calage) main.home #manifesto .about__grid{pointer-events:none}
html:not(.calage) main.home #manifesto .about__grid > *{pointer-events:auto}
html:not(.calage) main.home #manifesto .monitor.has-dial{
  --chin:max(30px,calc(var(--mw) * .066));   /* hauteur du bandeau */
  --kw:max(32px,calc(var(--mw) * .05));      /* largeur d'une case de touche */
  --kx:0px;                                  /* zone de clic prolongée en haut et en bas */
  --led:max(3px,calc(var(--mw) * .0056));
  --kf:max(8.5px,calc(var(--mw) * .0152))}
html:not(.calage) main.home #manifesto .monitor.has-dial .monitor__frame{bottom:calc(-1 * var(--chin));padding-bottom:calc(var(--mw) * .0133 + var(--chin))}
html:not(.calage) main.home #manifesto .monitor__dial{position:absolute;left:0;right:0;top:100%;height:var(--chin);display:flex;justify-content:flex-end;padding:0 calc(var(--mw) * .034) 0 0;pointer-events:none;
  border-radius:0 0 calc(var(--mw) * .01) calc(var(--mw) * .01);background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,0) 55%)}
/* filet entre l'écran et le bandeau */
html:not(.calage) main.home #manifesto .monitor__dial::before{content:"";position:absolute;left:calc(var(--mw) * .0133);right:calc(var(--mw) * .0133);top:0;height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.07) 12%,rgba(255,255,255,.07) 88%,rgba(255,255,255,0))}
html:not(.calage) main.home #manifesto .monitor__key{position:relative;flex:none;width:var(--kw);height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--chin) * .13);
  pointer-events:auto;touch-action:manipulation;-webkit-tap-highlight-color:transparent;font-family:var(--f-mono);font-weight:500;line-height:1}
html:not(.calage) main.home #manifesto .monitor__key::after{content:"";position:absolute;left:0;right:0;top:calc(-1 * var(--kx));bottom:calc(-1 * var(--kx))}
html:not(.calage) main.home #manifesto .monitor__led{display:block;flex:none;width:var(--led);height:var(--led);border-radius:50%;background:#2b0c11;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.7);
  transition:background-color var(--d-hover,.24s) var(--ease),box-shadow var(--d-hover,.24s) var(--ease)}
html:not(.calage) main.home #manifesto .monitor__cap{display:grid;place-items:center;flex:none;width:calc(var(--kw) * .68);height:calc(var(--chin) * .38);border:1px solid rgba(255,255,255,.13);border-radius:2px;
  background:linear-gradient(180deg,#19191c,#0e0e10);box-shadow:0 1px 0 rgba(0,0,0,.75);color:var(--ink-3);font-size:var(--kf);letter-spacing:0;
  transition:color var(--d-hover,.24s) var(--ease),border-color var(--d-hover,.24s) var(--ease),box-shadow var(--d-hover,.24s) var(--ease)}
/* chaîne en cours : voyant rouge allumé, touche enfoncée */
html:not(.calage) main.home #manifesto .monitor__key[aria-pressed="true"] .monitor__led{background:#f62b3e;box-shadow:0 0 calc(var(--led) * 1.1) rgba(246,43,62,.95),0 0 calc(var(--led) * 3) rgba(246,43,62,.5)}
html:not(.calage) main.home #manifesto .monitor__key[aria-pressed="true"] .monitor__cap{color:var(--ink);border-color:rgba(255,255,255,.22);background:linear-gradient(180deg,#0b0b0d,#151518);box-shadow:inset 0 1px 2px rgba(0,0,0,.85)}
/* survol et focus : la touche s'éclaire */
@media (hover:hover){
  html:not(.calage) main.home #manifesto .monitor__key:hover .monitor__cap{color:var(--ink);border-color:rgba(255,255,255,.42)}
  html:not(.calage) main.home #manifesto .monitor__key:hover:not([aria-pressed="true"]) .monitor__led{background:#6d1720;box-shadow:0 0 calc(var(--led) * 1.5) rgba(246,43,62,.35)}
}
html:not(.calage) main.home #manifesto .monitor__key:focus-visible{outline:none}
html:not(.calage) main.home #manifesto .monitor__key:focus-visible .monitor__cap{color:var(--ink);border-color:var(--red-hi);box-shadow:0 0 0 1px var(--red-hi),0 0 10px rgba(246,43,62,.45)}
html:not(.calage) main.home #manifesto .monitor__key:active .monitor__cap{translate:0 1px}

/* ---------------------------------------------------------------------------
   1 ter. Zapping et affichage de chaîne (éléments créés par home/about.js).
      Neige (.monitor__snow, sous le voile et les lignes de balayage) : trame
      de bruit --snow qui saute d'une position à l'autre (::before), bande
      claire qui roule de haut en bas (::after), et une brève coupure au noir
      au début. Seulement transform et opacity (compositeur).
      Affichage « CH n » + nom, en haut à droite de l'écran, sur une ligne
      (au-dessus du logo qui ouvre deux chaînes), blanc un peu lumineux ; il
      apparaît d'un coup et s'efface.
   --------------------------------------------------------------------------- */
html:not(.calage) main.home #manifesto .monitor__snow{position:absolute;inset:0;overflow:hidden;background:#08080a;visibility:hidden;pointer-events:none}
html:not(.calage) main.home #manifesto .monitor__snow::before{content:"";position:absolute;inset:-40%;background:var(--snow,none) 0 0/calc(var(--mw) * .46) auto repeat;opacity:0}
html:not(.calage) main.home #manifesto .monitor__snow::after{content:"";position:absolute;left:0;right:0;top:-30%;height:30%;
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.07) 30%,rgba(255,255,255,.15) 52%,rgba(0,0,0,.3) 66%,rgba(0,0,0,0))}
html:not(.calage) main.home #manifesto .is-zap .monitor__snow{visibility:visible}
html:not(.calage) main.home #manifesto .is-zap .monitor__snow::before{animation:s2-grain .2s steps(1,end) infinite,s2-snow .32s linear both}
html:not(.calage) main.home #manifesto .is-zap .monitor__snow::after{animation:s2-roll .52s linear infinite}
/* fin du zapping : l'image accroche (petit flottement horizontal) */
html:not(.calage) main.home #manifesto .is-tune .monitor__video{animation:s2-tune .28s steps(1,end) both}
@keyframes s2-grain{
  0%{transform:translate3d(0,0,0)}16.66%{transform:translate3d(-13%,7%,0)}33.33%{transform:translate3d(9%,-11%,0)}
  50%{transform:translate3d(-5%,-15%,0)}66.66%{transform:translate3d(15%,4%,0)}83.33%{transform:translate3d(-9%,12%,0)}100%{transform:translate3d(4%,-6%,0)}}
@keyframes s2-snow{0%,16%{opacity:0}36%{opacity:.9}50%{opacity:.66}64%{opacity:.84}100%{opacity:.76}}
@keyframes s2-roll{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,433%,0)}}
@keyframes s2-tune{0%{transform:translate3d(2.6%,0,0)}20%{transform:translate3d(-1.6%,0,0)}40%{transform:translate3d(.8%,0,0)}60%{transform:translate3d(-.3%,0,0)}80%,100%{transform:none}}

/* une seule ligne tout en haut, le nom à gauche de « CH n » : elle finit
   au-dessus du logo qui ouvre les réalisations et le film (haut du logo à
   16 % de la hauteur de l'écran, côté droit) */
html:not(.calage) main.home #manifesto .monitor__osd{position:absolute;z-index:2;top:3.6%;right:5.5%;margin:0;display:flex;flex-direction:row-reverse;align-items:baseline;gap:calc(var(--mw) * .028);
  font-family:var(--f-mono);font-weight:500;line-height:1;color:#fff;text-align:right;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .5s var(--ease)}
html:not(.calage) main.home #manifesto .monitor__osd.is-on{opacity:1;transition:none}
/* halo sombre très doux derrière : lisible même sur une image claire */
html:not(.calage) main.home #manifesto .monitor__osd::before{content:"";position:absolute;z-index:-1;inset:-34% -9% -46% -14%;background:radial-gradient(closest-side,rgba(5,5,7,.6),rgba(5,5,7,.32) 60%,rgba(5,5,7,0))}
html:not(.calage) main.home #manifesto .monitor__osd b{font-weight:500;font-size:max(12px,calc(var(--mw) * .062));letter-spacing:.02em;
  text-shadow:0 0 .06em #fff,0 0 .3em rgba(255,255,255,.5),0 .04em .4em rgba(0,0,0,.75)}
html:not(.calage) main.home #manifesto .monitor__osd span{font-size:max(9.5px,calc(var(--mw) * .0205));letter-spacing:.2em;text-transform:uppercase;
  text-shadow:0 0 .5em rgba(255,255,255,.5),0 .1em .5em rgba(0,0,0,.85)}
html:not(.calage) main.home #manifesto .monitor__osd-short{display:none}
/* petit écran (téléphone, tablette) : le nom abrégé (data-short, « Réalisations ») */
@media (max-width:1023px){
  html:not(.calage) main.home #manifesto .monitor__osd{gap:calc(var(--mw) * .034)}
  html:not(.calage) main.home #manifesto .monitor__osd span{font-size:9px;letter-spacing:.12em}
  html:not(.calage) main.home #manifesto .monitor__osd-long{display:none}
  html:not(.calage) main.home #manifesto .monitor__osd-short{display:block}
}
@media (prefers-reduced-motion:reduce){
  html:not(.calage) main.home #manifesto .monitor__osd{transition:none}
}

/* annotations « Stratégie, Création, Production, Diffusion » : masquées à toutes
   les tailles (une seule idée par écran, vague 3) ; l'élément reste dans le
   HTML pour ?calage */
html:not(.calage) main.home #manifesto .about__notes{display:none}

/* ---------------------------------------------------------------------------
   2. Ordinateur (planche 1920 × 1080, 1 u = 1 px) : titre et textes en grand
      à gauche, la télé à droite, centrée sur la hauteur utile.
   --------------------------------------------------------------------------- */
@media (min-width:1024px){
  html:not(.calage) main.home #manifesto{
    /* --xt : surplus vertical (écrans 16:10) donné aux écarts et à la télé,
       plafonné ; --xw : surplus horizontal des écrans plus larges que 16:9
       (la planche est posée en « contain »), donné à la télé qui grandit et
       glisse vers la droite. Télé : 660 u de large, jamais dans la réserve de
       l'index (largeur projetée de l'écran incliné ≤ 1,14 × sa largeur, de
       -48° à -24°). */
    --xt:min(var(--xtra),calc(120 * var(--u)));
    --xw:clamp(0px,calc(100vw - var(--sbw,0px) - 1920 * var(--u) - 2 * var(--fx)),calc(320 * var(--u)));
    --mx:calc(var(--fx) + 1040 * var(--u) + .3 * var(--xw));
    --mw:min(calc(660 * var(--u) + .5 * var(--xt) + .55 * var(--xw)),calc((100vw - var(--sbw,0px) - var(--pr) - var(--mx)) / 1.14));
    /* arête basse de l'écran : la télé inclinée (son arête droite, plus
       proche, est 1,3 fois plus haute) est centrée sur la hauteur utile */
    --myb:calc((100% + var(--fs-top) - var(--fs-gap)) / 2 + .62 * var(--mh));
  }
  html:not(.calage) main.home #manifesto .about__grid{grid-template-columns:minmax(0,calc(940 * var(--u)));padding:0 0 0 var(--pl)}
  html:not(.calage) main.home #manifesto .about__title{font-size:calc(120 * var(--u));margin-top:calc(30 * var(--u) + .15 * var(--xt))}
  html:not(.calage) main.home #manifesto .about__text{max-width:max(calc(700 * var(--u)),420px);padding-top:calc(50 * var(--u) + .35 * var(--xt))}
  html:not(.calage) main.home #manifesto .about__text .txt{font-size:var(--t-body);line-height:1.6}
  html:not(.calage) main.home #manifesto .about__text .txt + .txt{margin-top:calc(18 * var(--u))}
  html:not(.calage) main.home #manifesto .about__text .btn{margin-top:calc(46 * var(--u) + .3 * var(--xt))}

  /* la pièce : de 44 % de la largeur au bord droit, fondue à gauche, en haut
     et en bas (masques d'avant, home.css) */
  html:not(.calage) main.home #manifesto .about__visual{left:0}
  html:not(.calage) main.home #manifesto .about__room{left:44%}
  html:not(.calage) main.home #manifesto .monitor{left:var(--mx);top:calc(var(--myb) - var(--mh))}
}

/* ---------------------------------------------------------------------------
   3. Téléphone et tablette (< 1024 px) : titre plus grand, la télé dans la
      bande visuelle qui prend la hauteur restant sous le texte (la section
      tient toujours dans l'écran). La télé se règle sur la hauteur de la
      bande (unités cqh : .about__visual est un conteneur de taille).
   --------------------------------------------------------------------------- */
@media (max-width:1023px){
  html:not(.calage) main.home #manifesto{--mw:min(66vw,520px,98cqh)}
  html:not(.calage) main.home #manifesto .about__title{font-size:clamp(32px,calc(46 * var(--u)),60px)}
  html:not(.calage) main.home #manifesto .about__visual{flex:1 1 0;height:auto;min-height:clamp(118px,16svh,160px);max-height:min(340px,34svh);container-type:size}
  html:not(.calage) main.home #manifesto .monitor{left:calc(50% - .565 * var(--mw));top:auto;bottom:7%}

  /* touches de chaîne au doigt : chaque case fait au moins 44 px une fois
     inclinée (largeur et hauteur à l'écran). Bande d'au moins 200 px : un
     bandeau mince (--chin) sous l'écran, la zone de clic déborde de --kx en
     haut et en bas ; l'écran rapetisse juste assez pour que le bandeau tienne
     (son coin droit, plus proche, descend 1,32 fois plus bas). Cases plus
     larges du côté lointain (à gauche) : inclinées, elles font la même
     largeur à l'écran. */
  html:not(.calage) main.home #manifesto .monitor.has-dial{--mw:min(66vw,520px,calc(117cqh - 49px));--mh:calc(var(--mw) * .6467);
    --chin:24px;--kx:10px;--led:3px;--kf:9.5px;--kg:min(calc(var(--mw) * .93),200px);bottom:calc(4px + 1.32 * var(--chin))}
  html:not(.calage) main.home #manifesto .monitor__dial{padding-right:calc(var(--mw) * .03)}
  html:not(.calage) main.home #manifesto .monitor__key{width:calc(var(--kg) * .299);gap:3px}
  html:not(.calage) main.home #manifesto .monitor__key:nth-child(2){width:calc(var(--kg) * .264)}
  html:not(.calage) main.home #manifesto .monitor__key:nth-child(3){width:calc(var(--kg) * .232)}
  html:not(.calage) main.home #manifesto .monitor__key:nth-child(4){width:calc(var(--kg) * .205)}
  html:not(.calage) main.home #manifesto .monitor__cap{width:22px;height:13px}

  /* bande basse (moins de 200 px : 360 × 740, 375 × 667) : sous l'écran, la
     télé serait trop petite pour quatre cases de 44 px. Le cadre s'élargit
     alors à droite (le côté proche) d'un panneau (--side) qui porte les
     touches en carré 2 × 2, comme sur les téléviseurs à commandes
     latérales ; il n'ajoute aucune hauteur (l'arête basse reste droite). */
  @container (max-height:199.98px){
    html:not(.calage) main.home #manifesto .monitor.has-dial{--mw:min(66vw,520px,86cqh);--side:58px;--kh:33px;--chin:0px;--kx:0px;
      bottom:7%;left:calc(50% - .565 * var(--mw) - 54px)}
    html:not(.calage) main.home #manifesto .monitor.has-dial .monitor__frame{right:calc(-1 * var(--side));padding-right:calc(var(--mw) * .0133 + var(--side))}
    html:not(.calage) main.home #manifesto .monitor__dial{top:0;bottom:0;left:100%;right:auto;width:var(--side);height:auto;padding:0;
      display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(2,var(--kh));align-content:end;
      border-radius:0 calc(var(--mw) * .01) calc(var(--mw) * .01) 0;
      background:repeating-linear-gradient(180deg,rgba(255,255,255,.06) 0 1px,rgba(255,255,255,0) 1px 4px) 50% 10px/52% max(0px,calc(100% - 2 * var(--kh) - 18px)) no-repeat}
    html:not(.calage) main.home #manifesto .monitor__dial::before{left:0;right:auto;top:calc(var(--mw) * .0133);bottom:calc(var(--mw) * .0133);width:1px;height:auto;
      background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.07) 14%,rgba(255,255,255,.07) 86%,rgba(255,255,255,0))}
    html:not(.calage) main.home #manifesto .monitor__key,
    html:not(.calage) main.home #manifesto .monitor__key:nth-child(n){width:auto;height:auto}
    html:not(.calage) main.home #manifesto .monitor__cap{width:18px;height:11px}
    html:not(.calage) main.home #manifesto .monitor__osd b{font-size:10px}
  }
  /* écran de moins de 130 px de large (375 × 667) : « CH n » seul, plus petit,
     tout en haut ; le nom n'y tiendrait pas sans couvrir le logo */
  @container (max-height:150px){
    html:not(.calage) main.home #manifesto .monitor__osd{top:3%}
    html:not(.calage) main.home #manifesto .monitor__osd b{font-size:9px}
    html:not(.calage) main.home #manifesto .monitor__osd span{display:none}
  }
}
/* ordinateur au doigt (tablette en paysage) : cases de 44 px au moins */
@media (min-width:1024px) and (pointer:coarse){
  html:not(.calage) main.home #manifesto .monitor.has-dial{--chin:max(40px,calc(var(--mw) * .066));--kw:max(44px,calc(var(--mw) * .05))}
}

/* ===========================================================================
   ANIMATIONS : seulement sous html.yn-fx (jamais en ?calage, dans l'éditeur ni
   en animations réduites). Durées et décalages × --tk (0,6 au 2e passage).
   L'arrivée des textes est celle de toutes les sections (home.css) : les
   lignes du titre se relèvent, les textes montent à T0 (.st-in).
   =========================================================================== */

/* ---------------------------------------------------------------------------
   4. Arrivée du décor, comme avant la vague 3 : il n'est pas caché pendant le
      glissé (pas de dévoilement .rv-clip) ; la télé entre avec la section et
      se redresse en même temps (--tilt), puis la pièce se resserre à T0
      (1,08 → 1, home.css).
   --------------------------------------------------------------------------- */
html.yn-fx main.home #manifesto .about__visual{clip-path:none;transition:none}

/* ---------------------------------------------------------------------------
   5. Départ (moteur, piloté par --lv, réversible ; au repos tout est neutre) :
      le bloc titre recule et pâlit ; l'écran, lui, finit de se redresser
      (--tilt) et la pièce glisse (parallaxe).
   --------------------------------------------------------------------------- */
html.yn-fx.yn-engine main.home #manifesto .about__grid{transform-origin:0 50%;scale:calc(1 - .074 * var(--lv,0));opacity:calc(1 - .5 * var(--lv,0))}
/* pendant un glissé seulement : le bloc titre a son calque (pas de repeinte du texte à chaque image) */
html.yn-fx.yn-engine.yn-moving main.home #manifesto .about__grid{will-change:transform}

/* ---------------------------------------------------------------------------
   6. Survol du bouton (pointeur fin) : un trait de lumière fait le tour de sa
      bordure, une fois
   --------------------------------------------------------------------------- */
@media (hover:hover) and (pointer:fine){
  html.yn-fx main.home #manifesto .about__text .btn::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;padding:1.5px;
    background:conic-gradient(from var(--s2-a),transparent 0 72%,rgba(246,43,62,.9) 84%,#ffe3e6 92%,#fff 94%,transparent 95%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
  html.yn-fx main.home #manifesto .about__text .btn:is(:hover,:focus-visible)::after{animation:s2-trace .6s var(--e-io) both}
  @keyframes s2-trace{0%{--s2-a:0deg;opacity:0}12%{opacity:1}80%{opacity:1}100%{--s2-a:360deg;opacity:0}}
}