/* Accueil, section 06 · Réalisations (#works) : taille plein écran et animations.
   Chargé après home.css ; tout est limité à .home #works et à html:not(.calage).

   Le carrousel 3D « coverflow » du site en ligne, en plus grand : les 4 sites en
   éventail (l'actif au centre, ses voisins inclinés, le 4e au fond), en boucle
   continue, sur un sol qui les reflète, au-dessus d'un horizon incandescent qui
   prend la couleur du site présenté. Mécanique : assets/js/modules/home/works.js,
   qui pose .is-cf sur la section. Sans .is-cf (éditeur du back-office, ?calage) :
   l'ancienne rangée (home.css, projects.css).
   États cachés et animés : seulement sous html.yn-fx (contrat de la vague 3). */

/* Aucune propriété animée sur le compositeur à l'intérieur d'une carte (opacité,
   transform, will-change) : chaque calque dans une carte 3D oblige le navigateur à
   recomposer la carte entière à chaque image (mesuré : 6 ms → 30 ms par image).
   Le voile et le reflet passent donc par deux propriétés enregistrées (repeintes),
   et l'inclinaison au pointeur s'écrit sur la carte elle-même (works.js). */
@property --wsh{syntax:'<number>';inherits:true;initial-value:0}
@property --wga{syntax:'<number>';inherits:true;initial-value:0}

/* ---- jetons (mêmes valeurs que home.css : utiles si la section est testée seule) */
html:not(.calage) main.home #works{
  --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)));
  --avail:calc(100svh - var(--fs-top) - var(--fs-gap));
  --t-body:max(16px,calc(20 * var(--u)));
  --t-mono:max(10.5px,calc(13 * var(--u)));
  /* courbes communes (home.css), avec repli */
  --w-out:var(--e-out,cubic-bezier(.16,1,.3,1));
  --w-io:var(--e-io,cubic-bezier(.65,0,.35,1));
  --w-spring:var(--e-spring,cubic-bezier(.34,1.25,.64,1));
  --bar:calc(32 * var(--u));                       /* barre de navigateur au-dessus de la capture */
}
@media (max-width:1023px){
  html:not(.calage) main.home #works{--u:min(calc(100vw / 390),calc(100svh / 844));--fx:0px;--pl:24px;--pr:24px;--xtra:0px;--t-body:16px;--t-mono:10.5px;--bar:22px}
}
@media (max-width:1023px) and (max-height:760px){html:not(.calage) main.home #works{--t-body:15px}}

/* ---- tailles du texte (aussi dans l'éditeur : c'est la vraie mise en page) */
@media (min-width:1024px){
  html:not(.calage) main.home #works .works__title{font-size:calc(92 * var(--u))}
  html:not(.calage) main.home #works .works__intro .txt{font-size:var(--t-body);line-height:1.6}
}
@media (max-width:1023px){
  html:not(.calage) main.home #works .works__title{font-size:clamp(32px,calc(46 * var(--u)),60px)}
  html:not(.calage) main.home #works .works__intro .txt{font-size:var(--t-body);line-height:1.55}
}

/* « NE S'OUBLIENT PAS. » en rouge, comme le mot rouge des autres titres, mais sans
   balise ajoutée dans la clé works_title : c'est la 2e ligne découpée par lines.js
   (.ln > span). Même arrivée que les .red (contour, puis remplissage à --fill). */
html:not(.calage) main.home #works .works__title .ln:nth-child(2) > span{color:var(--red)}
html.yn-fx main.home #works .works__title .ln:nth-child(2) > span{--fill:-10%;color:transparent;-webkit-text-stroke:max(1.2px,.012em) var(--red);
  background:linear-gradient(90deg,var(--red) calc(var(--fill) - 10%),#ffd9dc var(--fill),transparent calc(var(--fill) + 3%));-webkit-background-clip:text;background-clip:text;
  transition:transform calc(900ms * var(--tk)) var(--e-out) calc((var(--t-title) + var(--i,0) * var(--st-line)) * var(--tk)),
    --fill calc(650ms * var(--tk)) var(--e-io) calc((var(--t-red) + var(--i,0) * var(--st-line)) * var(--tk))}
html.yn-fx main.home #works.st-in .works__title .ln:nth-child(2) > span{--fill:112%}

/* ==========================================================================
   COMPOSITION (.is-cf) : rangée 1 = titre à gauche, texte + bouton à droite,
   alignés sur le bas du titre ; rangée 2 = la scène, sur toute la largeur.
   ========================================================================== */
html:not(.calage) main.home #works.is-cf .works__grid{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);row-gap:calc(22 * var(--u) + .3 * var(--xtra));height:calc(var(--avail) - 1px);padding:0}
html:not(.calage) main.home #works.is-cf .works__intro{display:grid;grid-template-columns:minmax(0,1fr) min(max(calc(520 * var(--u)),400px),42%);grid-template-areas:"label label" "title txt" "title btn";column-gap:calc(64 * var(--u));align-items:end;padding:0 var(--pr) 0 var(--pl);
  /* devant la scène (même contexte d'empilement que .slider, qui vient après) :
     la lueur du site présenté passe derrière le titre au lieu de le délaver */
  position:relative;z-index:1}
html:not(.calage) main.home #works.is-cf .works__intro .sec__label{grid-area:label;margin:0 0 calc(26 * var(--u) + .1 * var(--xtra))}
html:not(.calage) main.home #works.is-cf .works__title{grid-area:title;align-self:end;margin:0}
html:not(.calage) main.home #works.is-cf .works__intro .txt{grid-area:txt;margin:0;max-width:none;text-wrap:pretty}
html:not(.calage) main.home #works.is-cf .works__intro .btn{grid-area:btn;justify-self:start;margin:calc(24 * var(--u)) 0 0}
/* l'ancien relief en bas à gauche : la scène a désormais son sol */
html:not(.calage) main.home #works.is-cf .works__rock{display:none}

/* ---- la scène : la liste porte la perspective, chaque carte est posée par JS */
html:not(.calage) main.home #works.is-cf .slider{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;margin:0;padding:0 0 calc(30 * var(--u))}
html:not(.calage) main.home #works.is-cf .slider.rv{opacity:1;transform:none;transition:none}
html:not(.calage) main.home #works.is-cf .slider__viewport{position:relative;flex:1 1 auto;min-height:0;margin:0;padding:0;overflow:visible;clip-path:none;-webkit-mask-image:none;mask-image:none;touch-action:pan-y;user-select:none;-webkit-user-select:none;
  /* départ : la scène s'incline et recule (réversible, pilotée par --lv) */
  transform:perspective(calc(1800 * var(--u))) rotateX(calc(var(--lv,0) * 12deg)) translateZ(calc(var(--lv,0) * -200 * var(--u)))}
html:not(.calage) main.home #works.is-cf .slider__track{position:absolute;inset:0;z-index:1;display:block;margin:0;padding:0;gap:0;transform:none;transition:none;will-change:auto;
  perspective:calc(1800 * var(--u));perspective-origin:var(--cx,50%) var(--cy,46%)}
html:not(.calage) main.home #works.is-cf .slider__more{display:none}

/* ---- une carte = une fenêtre de navigateur (barre + capture fixe du haut du site) */
html:not(.calage) main.home #works.is-cf .proj{position:absolute;left:calc(var(--cx,50%) - var(--cw,600px) / 2);top:calc(var(--cy,40%) - var(--chh,200px));width:var(--cw,600px);flex:none;margin:0;
  opacity:var(--op,1);transform-origin:50% 50%;
  transition:transform .75s var(--w-out),opacity .6s var(--w-out),translate .75s var(--w-out),rotate .75s var(--w-out),--wsh .6s var(--w-out),--wga .45s var(--w-out)}
/* inclinaison au pointeur : la carte suit en direct, puis revient en ressort */
html:not(.calage) main.home #works.is-cf .proj.is-tilting{transition:opacity .6s var(--w-out),--wsh .6s var(--w-out),--wga .45s var(--w-out)}
html:not(.calage) main.home #works.is-cf .proj.is-relax{transition:transform .42s var(--w-spring),opacity .6s var(--w-out),--wsh .6s var(--w-out),--wga .45s var(--w-out)}
html:not(.calage) main.home #works.is-cf .proj.is-lit{--wga:1}
/* ombre portée, statique (jamais animée) */
html:not(.calage) main.home #works.is-cf .proj::before{content:"";position:absolute;left:5%;right:5%;top:8%;bottom:2%;background:rgba(0,0,0,.5);box-shadow:0 calc(40 * var(--u)) calc(90 * var(--u)) calc(-10 * var(--u)) rgba(0,0,0,.85);pointer-events:none}
html:not(.calage) main.home #works.is-cf .proj__shot{position:relative;display:block;width:100%;height:auto;padding:var(--bar) 0 0;overflow:hidden;border:1px solid rgba(255,255,255,.12);border-radius:calc(6 * var(--u));background:#0b0b0c;box-shadow:none;
  transition:border-color .6s var(--w-out)}
/* sol réfléchissant, sur ordinateur seulement (Chrome, Safari ; ailleurs, pas de
   reflet ; Chrome refuse « none », d'où la requête média) */
@media (min-width:1024px){
  html:not(.calage) main.home #works.is-cf .proj__shot{-webkit-box-reflect:below calc(10 * var(--u)) linear-gradient(transparent 72%,rgba(0,0,0,.15))}
}
html:not(.calage) main.home #works.is-cf .proj__shot img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top center;filter:none;transform:none;transition:none}
/* barre : trois points (le premier rouge sur la carte active) + pastille d'adresse vide */
html:not(.calage) main.home #works.is-cf .proj__shot::before{content:"";position:absolute;left:0;right:0;top:0;height:var(--bar);z-index:1;border-bottom:1px solid rgba(255,255,255,.07);background:
  radial-gradient(circle at calc(var(--bar) * .62) 50%,var(--dot1,#3a3a3d) calc(var(--bar) * .13),transparent calc(var(--bar) * .13 + .6px)),
  radial-gradient(circle at calc(var(--bar) * 1.08) 50%,#3a3a3d calc(var(--bar) * .13),transparent calc(var(--bar) * .13 + .6px)),
  radial-gradient(circle at calc(var(--bar) * 1.54) 50%,#3a3a3d calc(var(--bar) * .13),transparent calc(var(--bar) * .13 + .6px)),
  linear-gradient(#0e0e10,#0e0e10) 50% 50% / calc(38% - 2px) calc(var(--bar) * .44 - 2px) no-repeat,
  linear-gradient(rgba(255,255,255,.1),rgba(255,255,255,.1)) 50% 50% / 38% calc(var(--bar) * .44) no-repeat,
  linear-gradient(#17171a,#121214)}
html:not(.calage) main.home #works.is-cf .proj.is-active .proj__shot::before{--dot1:var(--red)}
/* voile sombre des cartes de côté (calque, pas de filter) */
html:not(.calage) main.home #works.is-cf .proj__shot::after{inset:var(--bar) 0 0;z-index:1;background:rgba(6,6,6,var(--wsh));opacity:1;transition:none}
html:not(.calage) main.home #works.is-cf .proj.is-active .proj__shot{border-color:rgba(var(--tint),.6)}

/* reflet spéculaire (suit le pointeur) et balayage de lumière (à l'arrivée) */
html:not(.calage) main.home #works.is-cf .proj__fx{position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;
  background:radial-gradient(circle calc(var(--cw,600px) * .42) at calc(50% + var(--gx,0px)) calc(50% + var(--gy,0px)),rgba(255,255,255,calc(.15 * var(--wga))),rgba(255,255,255,calc(.05 * var(--wga))) 45%,transparent)}
html:not(.calage) main.home #works.is-cf .proj__fx::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.06) 44%,rgba(255,236,238,.34) 50%,rgba(255,255,255,.06) 56%,transparent 62%) 100% 0 / 300% 100% no-repeat}

/* légende sous la carte active : nom à gauche, type à droite (sortent d'un masque) */
html:not(.calage) main.home #works.is-cf :is(.proj__name,.proj__type){position:absolute;margin:0;white-space:nowrap;pointer-events:none;
  --cy0:calc(100% + 24 * var(--u));top:calc(var(--cy0) + 1.2em);clip-path:inset(0 0 calc(100% + 2px) 0);
  transition:top .2s var(--w-out),clip-path .2s var(--w-out)}
html:not(.calage) main.home #works.is-cf .proj__name{left:0;font-family:var(--f-text);font-weight:600;font-size:max(16px,calc(24 * var(--u)));letter-spacing:-.01em;line-height:1.25;color:var(--ink)}
html:not(.calage) main.home #works.is-cf .proj__type{right:0;font-size:var(--t-mono);letter-spacing:.2em;line-height:max(20px,calc(30 * var(--u)));color:var(--red-hi)}
html:not(.calage) main.home #works.is-cf .proj.is-active :is(.proj__name,.proj__type){top:var(--cy0);clip-path:inset(-2px -2px -6px -2px);
  transition:top .5s var(--w-out) .3s,clip-path .5s var(--w-out) .3s}
html:not(.calage) main.home #works.is-cf .proj.is-active .proj__type{transition-delay:.38s}

/* lueur d'ambiance : la capture du site actif réduite à 32 px puis agrandie (floue
   sans filter), derrière la carte active ; fondu enchaîné à chaque changement.
   Bornée à la scène (un peu plus haute que la carte) : elle colore l'éventail,
   pas tout l'écran, et ne remonte plus jusqu'au titre. */
html:not(.calage) main.home #works.is-cf .works__lume{position:absolute;z-index:0;left:var(--cx,50%);top:var(--cy,40%);width:calc(var(--cw,600px) * 2.1);height:calc(var(--cw,600px) * 1.08);transform:translate3d(-50%,-50%,0);pointer-events:none;
  -webkit-mask-image:radial-gradient(closest-side,#000 38%,transparent);mask-image:radial-gradient(closest-side,#000 38%,transparent)}
html:not(.calage) main.home #works.is-cf .works__lume canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .9s var(--w-out)}
html:not(.calage) main.home #works.is-cf .works__lume canvas.is-on{opacity:.5}

/* horizon incandescent au pied des cartes (sur .works__glow) : halo de 220 u et
   filet de 1 px qui respirent (13 s), teintés par le site présenté. Deux calques
   qui se relaient en fondu (jamais de dégradé animé). */
html:not(.calage) main.home #works.is-cf .works__glow{inset:auto;left:0;right:0;top:calc(var(--floor,70%) - 110 * var(--u));height:calc(220 * var(--u));z-index:0;background:none;transition:none;transform-origin:var(--cx,50%) 50%;opacity:calc(1 - var(--lv,0))}
html:not(.calage) main.home #works.is-cf .works__hz{position:absolute;inset:0;opacity:0;transition:opacity .9s var(--w-out)}
html:not(.calage) main.home #works.is-cf .works__hz.is-on{opacity:1}
html:not(.calage) main.home #works.is-cf .works__hz::before{content:"";position:absolute;inset:0;background:radial-gradient(calc(var(--cw,600px) * 1.1) 50% at var(--cx,50%) 50%,rgba(var(--hz,246,43,62),.26),rgba(246,43,62,.08) 55%,transparent 78%)}
html:not(.calage) main.home #works.is-cf .works__hz::after{content:"";position:absolute;left:6%;right:6%;top:50%;height:1px;background:linear-gradient(90deg,transparent,rgba(246,43,62,.45) 22%,rgba(var(--hz,246,43,62),.95) 50%,rgba(246,43,62,.45) 78%,transparent);opacity:.8}

/* ---- flèches (de part et d'autre de l'éventail, à mi-hauteur de l'écran actif) et points */
html:not(.calage) main.home #works.is-cf .slider__nav{position:absolute;inset:0;z-index:3;display:block;margin:0;padding:0;pointer-events:none}
html:not(.calage) main.home #works.is-cf .slider__nav .round{--d:max(44px,calc(64 * var(--u)));position:absolute;top:var(--cy,40%);left:calc(var(--cx,50%) - var(--ax,400px));transform:translate3d(-50%,-50%,0);pointer-events:auto}
html:not(.calage) main.home #works.is-cf .slider__nav [data-next]{left:calc(var(--cx,50%) + var(--ax,400px))}
html:not(.calage) main.home #works.is-cf .works__dots{--dg:max(12px,calc(12 * var(--u)));position:absolute;left:var(--cx,50%);bottom:0;z-index:3;display:flex;align-items:center;gap:var(--dg);height:calc(30 * var(--u));transform:translate3d(-50%,0,0)}
html:not(.calage) main.home #works.is-cf .works__dot{position:relative;width:max(8px,calc(8 * var(--u)));height:max(8px,calc(8 * var(--u)));margin:0;padding:0;border:0;border-radius:max(4px,calc(4 * var(--u)));background:rgba(255,255,255,.22);cursor:pointer;transition:width .35s var(--w-out),background-color .35s var(--w-out)}
/* zone d'appui : tout l'écart jusqu'aux points voisins, 36 px de haut (le dessin ne change pas) */
html:not(.calage) main.home #works.is-cf .works__dot::before{content:"";position:absolute;left:calc(var(--dg) / -2);right:calc(var(--dg) / -2);top:-14px;bottom:-14px}
html:not(.calage) main.home #works.is-cf .works__dot:hover{background:rgba(255,255,255,.45)}
html:not(.calage) main.home #works.is-cf .works__dot.is-on{width:max(26px,calc(26 * var(--u)));background:rgba(246,43,62,.32)}
/* la pilule active se remplit pendant le défilement automatique (4,8 s) ; sinon pleine */
html:not(.calage) main.home #works.is-cf .works__dot::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--red);transform:scaleX(0);transform-origin:0 50%}
html:not(.calage) main.home #works.is-cf .works__dot.is-on::after{transform:none}
html:not(.calage) main.home #works.is-cf .is-auto .works__dot.is-on::after{animation:worksPill 4.8s linear both}
html:not(.calage) main.home #works.is-cf .is-auto.is-hold .works__dot.is-on::after{animation-play-state:paused}
@keyframes worksPill{from{transform:scaleX(0)}to{transform:none}}
/* sonde de mesure (1000 u), lue par works.js */
html:not(.calage) main.home #works .works__u{position:absolute;left:0;top:0;width:calc(1000 * var(--u));height:0;visibility:hidden;pointer-events:none}

/* ---- glisser : aucune transition, la scène suit la souris ou le doigt ---- */
html:not(.calage) main.home #works.is-cf .slider__viewport{cursor:grab}
html:not(.calage) main.home #works.is-cf .slider__viewport.is-drag{cursor:grabbing}
html:not(.calage) main.home #works.is-cf :is(.is-drag,.is-still) .proj{transition:none}
html:not(.calage) main.home #works.is-cf :is(.is-drag,.is-still) .proj__shot::after{transition:none}

/* ==========================================================================
   ARRIVÉE (T0 = .st-in, posé par sections.js ; durées × --tk, 0,6 au 2e passage)
   0 horizon tracé depuis le centre · 120 titre (commun) · 250 l'éventail s'ouvre
   depuis le fond (works.js, Web Animations) · 500 texte, bouton (commun) ·
   700 flèches, points · 900 légende · 1200 balayage de lumière · 1300 lueur.
   ========================================================================== */
html.yn-fx main.home #works.is-cf:not(.st-in) .proj{opacity:0}
html.yn-fx main.home #works.is-cf.is-arriving .proj{transition:none}
html.yn-fx main.home #works.is-cf .works__glow{transform:scaleX(1);transition:transform calc(900ms * var(--tk,1)) var(--w-io)}
html.yn-fx main.home #works.is-cf:not(.st-in) .works__glow{transform:scaleX(0)}
html.yn-fx main.home #works.is-cf .slider__nav .round{transition:opacity calc(700ms * var(--tk,1)) var(--w-out) calc(700ms * var(--tk,1)),scale calc(700ms * var(--tk,1)) var(--w-out) calc(700ms * var(--tk,1)),border-color .35s var(--ease),box-shadow .35s var(--ease),background-color .35s var(--ease)}
html.yn-fx main.home #works.is-cf .works__dots{transition:opacity calc(700ms * var(--tk,1)) var(--w-out) calc(760ms * var(--tk,1)),scale calc(700ms * var(--tk,1)) var(--w-out) calc(760ms * var(--tk,1))}
html.yn-fx main.home #works.is-cf:not(.st-in) :is(.slider__nav .round,.works__dots){opacity:0;scale:.6}
html.yn-fx main.home #works.is-cf:not(.st-in) .proj :is(.proj__name,.proj__type){top:calc(var(--cy0) + 1.2em);clip-path:inset(0 0 calc(100% + 2px) 0)}
html.yn-fx main.home #works.is-cf.is-arriving .proj.is-active .proj__name{transition-delay:calc(900ms * var(--tk,1))}
html.yn-fx main.home #works.is-cf.is-arriving .proj.is-active .proj__type{transition-delay:calc(980ms * var(--tk,1))}
html.yn-fx main.home #works.is-cf.is-arriving .proj.is-active .proj__fx::after{animation:worksSweep calc(900ms * var(--tk,1)) var(--w-io) calc(1200ms * var(--tk,1)) both}
@keyframes worksSweep{from{background-position:100% 0}to{background-position:0 0}}
html.yn-fx main.home #works.is-cf .works__lume{transition:opacity calc(900ms * var(--tk,1)) var(--w-out) calc(1300ms * var(--tk,1)),transform calc(900ms * var(--tk,1)) var(--w-out) calc(1300ms * var(--tk,1))}
html.yn-fx main.home #works.is-cf:not(.st-in) .works__lume{opacity:0;transform:translate3d(-50%,-50%,0) scale(.7)}

/* ==========================================================================
   AMBIANCE (section active seulement) : l'horizon respire (13 s) ; la carte
   active flotte (7 s) quand le pointeur n'est pas sur la scène.
   ========================================================================== */
html.yn-fx main.home #works.is-cf .works__hz::before{animation:worksBreath 13s ease-in-out infinite paused}
html.yn-fx main.home #works.is-cf .works__hz::after{animation:worksLine 13s ease-in-out infinite paused}
html.yn-fx main.home #works.is-cf.is-current.st-in .works__hz::before,
html.yn-fx main.home #works.is-cf.is-current.st-in .works__hz::after{animation-play-state:running}
@keyframes worksBreath{0%,100%{opacity:.5;transform:scaleX(.94)}50%{opacity:1;transform:scaleX(1.04)}}
@keyframes worksLine{0%,100%{opacity:.4;transform:scaleX(.96)}50%{opacity:.85;transform:none}}
html.yn-fx main.home #works.is-cf.is-current.st-in:not(.is-arriving) .proj.is-active{animation:worksFloat 7s ease-in-out infinite}
html.yn-fx main.home #works.is-cf :is(.is-hover,.is-drag) .proj.is-active{animation-play-state:paused}
@keyframes worksFloat{0%,100%{translate:0 0;rotate:y 0deg}25%{translate:0 calc(-4 * var(--u));rotate:y 1.5deg}75%{translate:0 calc(4 * var(--u));rotate:y -1.5deg}}

/* ==========================================================================
   TABLETTE ET TÉLÉPHONE (moins de 1024 px) : même éventail, au doigt
   ========================================================================== */
@media (max-width:1023px){
  html:not(.calage) main.home #works.is-cf .works__grid{row-gap:18px}
  html:not(.calage) main.home #works.is-cf .works__intro{grid-template-columns:minmax(0,1fr);grid-template-areas:"label" "title" "txt" "btn";padding:0 var(--pr) 0 var(--pl)}
  html:not(.calage) main.home #works.is-cf .works__intro .sec__label{margin-bottom:16px}
  html:not(.calage) main.home #works.is-cf .works__intro .txt{margin-top:14px}
  html:not(.calage) main.home #works.is-cf .works__intro .btn{margin-top:18px}
  html:not(.calage) main.home #works.is-cf .slider{padding-bottom:30px}
  html:not(.calage) main.home #works.is-cf .slider__track{perspective:1100px}
  html:not(.calage) main.home #works.is-cf .slider__viewport{transform:perspective(1100px) rotateX(calc(var(--lv,0) * 12deg)) translateZ(calc(var(--lv,0) * -120px))}
  html:not(.calage) main.home #works.is-cf .proj__shot{border-radius:5px}
  html:not(.calage) main.home #works.is-cf .proj__name{--cy0:calc(100% + 10px)}
  html:not(.calage) main.home #works.is-cf .proj__name{font-size:16px}
  html:not(.calage) main.home #works.is-cf .proj__type{--cy0:calc(100% + 34px);left:0;right:auto;font-size:10.5px;line-height:1.4}
  html:not(.calage) main.home #works.is-cf .works__dots{--dg:16px;height:30px}
  html:not(.calage) main.home #works.is-cf .slider__nav .round{--d:40px;top:auto;bottom:-5px}
  html:not(.calage) main.home #works.is-cf .slider__nav [data-prev]{left:calc(var(--cx,50%) - 80px)}
  html:not(.calage) main.home #works.is-cf .slider__nav [data-next]{left:calc(var(--cx,50%) + 80px)}
  html:not(.calage) main.home #works.is-cf .works__glow{height:140px;top:calc(var(--floor,70%) - 70px)}
}
@media (max-width:599px){
  html:not(.calage) main.home #works.is-cf .slider__nav{display:none}
}
/* téléphones bas : un peu moins d'air */
@media (max-width:1023px) and (max-height:760px){
  html:not(.calage) main.home #works.is-cf .works__grid{row-gap:14px}
  html:not(.calage) main.home #works.is-cf .works__intro .sec__label{margin-bottom:12px}
  html:not(.calage) main.home #works.is-cf .works__intro .txt{margin-top:10px}
  html:not(.calage) main.home #works.is-cf .works__intro .btn{margin-top:14px}
}

/* ==========================================================================
   ANIMATIONS RÉDUITES : éventail fixe, changement instantané, rien ne bouge
   (flèches, points, clavier et glisser fonctionnent toujours)
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html:not(.calage) main.home #works.is-cf :is(.proj,.proj__shot,.works__lume,.works__lume canvas,.works__hz,.works__dot,.works__glow,.proj__name,.proj__type){transition:none!important;animation:none!important}
  html:not(.calage) main.home #works.is-cf .proj__shot::after,
  html:not(.calage) main.home #works.is-cf .proj__fx::after,
  html:not(.calage) main.home #works.is-cf .works__hz::before,
  html:not(.calage) main.home #works.is-cf .works__hz::after,
  html:not(.calage) main.home #works.is-cf .works__dot::after{transition:none!important;animation:none!important}
}