/* Chardon FX v1.4.0-lab — styles des effets. Les couleurs se règlent via les variables ci-dessous. */
:root{
  --fx-bg:#0b0a0a;          /* fond des sections */
  --fx-fg:#f2eee9;          /* texte */
  --fx-muted:#8d8580;       /* texte secondaire */
  --fx-accent:#e0412c;      /* barre de progression */
  --fx-line:#2a2624;        /* filets */
  --fx-radius:6px;          /* arrondi des cartes */
}

/* ---------- 1 · Shader lines ---------- */
.fx-shader{position:relative;overflow:hidden;background:var(--fx-bg);isolation:isolate}
.fx-shader-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:-1}
.fx-shader--fallback{background:repeating-linear-gradient(90deg,var(--fx-bg) 0 6px,var(--fx-line) 6px 7px)}

/* ---------- 2 · Motion layer ---------- */
.fx-layer{position:relative;background:var(--fx-bg);color:var(--fx-fg)}
.fx-layer__sticky{position:sticky;top:0;height:100svh;overflow:hidden}
.fx-layer__head{position:absolute;top:0;left:0;right:0;z-index:3;
  padding:22px max(16px,env(safe-area-inset-left,0px)) 0 max(16px,env(safe-area-inset-left,0px))}
.fx-layer__stage{position:absolute;inset:0;perspective:1300px;perspective-origin:50% 45%}
.fx-layer__deck{position:absolute;left:50%;top:54%;width:0;height:0;transform-style:preserve-3d}
.fx-layer__card{position:absolute;width:var(--fx-cw);height:var(--fx-ch);
  left:calc(var(--fx-cw) / -2);top:calc(var(--fx-ch) / -2);
  border-radius:var(--fx-radius);overflow:hidden;background:#222;
  will-change:transform,opacity;backface-visibility:hidden;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.7)}
.fx-layer__card > img,.fx-layer__card > picture,.fx-layer__card > figure{width:100%;height:100%;margin:0;display:block}
.fx-layer__card img{width:100%;height:100%;object-fit:cover;display:block}
.fx-layer__card::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,var(--fx-shade,0)),rgba(0,0,0,0))}
.fx-layer__foot{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:flex-end;gap:16px;
  padding:0 max(16px,env(safe-area-inset-right,0px)) 20px max(16px,env(safe-area-inset-left,0px))}
.fx-layer__cap{flex:1;min-width:0;font-weight:700;font-size:clamp(17px,2.2vw,24px);min-height:1.3em}
.fx-layer__count{font:500 12px/1 ui-monospace,Menlo,monospace;color:var(--fx-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.fx-layer__count b{color:var(--fx-fg);font-weight:500}
.fx-layer__bar{flex:0 1 200px;height:2px;background:var(--fx-line);position:relative;align-self:center}
.fx-layer__bar i{position:absolute;inset:0 auto 0 0;width:0;background:var(--fx-accent)}
@media (max-width:640px){.fx-layer__bar{display:none}}

/* Sans JavaScript : les images restent visibles en grille */
[data-fx="motion-layer"]:not(.fx-layer){display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;padding:16px}
[data-fx="motion-layer"]:not(.fx-layer) img{width:100%;aspect-ratio:4/5;object-fit:cover}

/* ---------- 3 · Infinite canvas ---------- */
.fx-canvas{position:relative;height:var(--fx-canvas-h,88svh);min-height:420px;overflow:hidden;background:var(--fx-bg);color:var(--fx-fg);
  cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;outline:none}
.fx-canvas:focus-visible{box-shadow:inset 0 0 0 2px var(--fx-accent)}
.fx-canvas.is-dragging{cursor:grabbing}
.fx-canvas__world{position:absolute;inset:0}
.fx-canvas__item{position:absolute;left:0;top:0;will-change:transform;border-radius:calc(var(--fx-radius) * .6);overflow:hidden;
  box-shadow:0 14px 30px -14px rgba(0,0,0,.6);transition:filter .3s}
.fx-canvas__item img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.fx-canvas__item:hover{filter:brightness(1.12)}
.fx-canvas__head{position:absolute;top:0;left:0;right:0;z-index:2;pointer-events:none;
  padding:22px max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px))}
.fx-canvas__tip{position:absolute;left:max(16px,env(safe-area-inset-left,0px));bottom:18px;z-index:2;pointer-events:none;
  font-weight:700;font-size:clamp(16px,2vw,22px);min-height:1.3em;text-shadow:0 2px 12px rgba(0,0,0,.7)}
[data-fx="infinite-canvas"]:not(.fx-canvas){display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;padding:16px}
[data-fx="infinite-canvas"]:not(.fx-canvas) img{width:100%;aspect-ratio:4/5;object-fit:cover}

/* ---------- 4 · Rotating image ---------- */
.fx-rotate{position:relative;background:var(--fx-bg);color:var(--fx-fg)}
.fx-rotate__sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:28px;
  padding:0 max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px))}
.fx-rotate__head{text-align:center}
.fx-rotate__row{display:flex;justify-content:center;gap:clamp(10px,1.6vw,24px);perspective:1100px}
.fx-rotate__card{flex:0 0 var(--fx-cw,clamp(130px,17vw,280px));aspect-ratio:var(--fx-ratio,3 / 5);max-height:64svh}
.fx-rotate__inner{width:100%;height:100%;position:relative;transform-style:preserve-3d;will-change:transform;
  border-radius:var(--fx-radius);overflow:hidden;background:#1a1a1a}
.fx-rotate__inner > img,.fx-rotate__inner > picture,.fx-rotate__inner > figure{width:100%;height:100%;margin:0;display:block}
.fx-rotate__inner img{width:100%;height:100%;object-fit:cover;display:block}
.fx-rotate__inner figcaption{display:none}
.fx-rotate__inner::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,var(--fx-shade,0));pointer-events:none}
@media (max-width:640px){ .fx-rotate__card{flex-basis:38vw} }
[data-fx="rotating-image"]:not(.fx-rotate){display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;padding:16px}
[data-fx="rotating-image"]:not(.fx-rotate) img{width:100%;aspect-ratio:3/5;object-fit:cover}

/* ---------- 5 · Mask reveal ---------- */
.fx-mask{position:relative;overflow:hidden;isolation:isolate;background:var(--fx-bg);color:var(--fx-fg);min-height:var(--fx-mask-h,100svh);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.fx-mask__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.fx-mask__video--inner{opacity:0;pointer-events:none}
.fx-mask__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;display:block}
.fx-mask [data-fx-title]{white-space:nowrap;margin:0}
.fx-mask--ready:not(.fx-mask--fallback) [data-fx-title]{color:transparent !important;-webkit-text-fill-color:transparent;text-shadow:none !important}
.fx-mask--fallback [data-fx-title]{color:#fff;mix-blend-mode:overlay}

/* Adaptation Lab : sorties lisibles, défilement natif et arrêts complets. */
.fx-static-gallery{display:none}
.fx-canvas{touch-action:pan-y}
.fx-mask__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3}
.fx-mask--fallback .fx-mask__canvas{display:none}
.fx-mask:not(.fx-mask--ready) [data-fx-title],.fx-mask--fallback [data-fx-title]{color:#fff;-webkit-text-fill-color:#fff;text-shadow:0 2px 26px #04304780;mix-blend-mode:normal}
.fx-shader--fallback .fx-shader-canvas{display:none}
.fx-rotate__row{justify-content:flex-start;overflow-x:auto;overflow-y:hidden;max-width:100%;padding:10px 0 24px;scroll-snap-type:x proximity;scrollbar-color:var(--fx-accent) var(--fx-bg)}
.fx-rotate__card{flex-basis:clamp(100px,calc((100vw - 80px)/var(--fx-n) - 24px),230px);scroll-snap-align:center}
.fx-rotate__row:focus-visible{outline:2px solid var(--fx-accent);outline-offset:4px}
@media(max-width:640px){.fx-rotate__card{flex-basis:38vw}.fx-canvas{--fx-canvas-h:70svh;min-height:320px}}
html[data-fx-motion="reduce"] .fx-shader{background:repeating-linear-gradient(90deg,var(--fx-bg) 0 6px,var(--fx-line) 6px 7px)}
html[data-fx-motion="reduce"] .fx-shader-canvas,html[data-fx-motion="reduce"] .fx-mask__canvas,html[data-fx-motion="reduce"] .fx-mask__video{display:none}
html[data-fx-motion="reduce"] .fx-mask [data-fx-title]{color:#fff!important;-webkit-text-fill-color:#fff!important;text-shadow:0 2px 24px #04304780!important}
html[data-fx-motion="reduce"] :is(.fx-layer,.fx-rotate,.fx-canvas){height:auto!important;min-height:0;cursor:auto;touch-action:auto;user-select:auto;padding:110px 20px 40px}
html[data-fx-motion="reduce"] :is(.fx-layer__sticky,.fx-rotate__sticky){position:static;height:auto;display:block;overflow:visible;padding:0}
html[data-fx-motion="reduce"] :is(.fx-layer__head,.fx-rotate__head,.fx-canvas__head){position:static;padding:0 0 26px;pointer-events:auto}
html[data-fx-motion="reduce"] :is(.fx-layer__stage,.fx-layer__foot,.fx-rotate__row,.fx-canvas__world,.fx-canvas__tip){display:none}
html[data-fx-motion="reduce"] .fx-static-gallery{display:grid;width:100%;min-width:0;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:18px;max-width:1200px;margin:auto}
html[data-fx-motion="reduce"] .fx-static-gallery>*{min-width:0}
html[data-fx-motion="reduce"] .fx-static-gallery :is(figure,picture){margin:0}
html[data-fx-motion="reduce"] .fx-static-gallery img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:6px}
html[data-fx-motion="reduce"] .fx-static-gallery figcaption{margin-top:8px;font-size:14px}
html[data-fx-motion="reduce"] :is(.fx-layer,.fx-rotate){display:flex;flex-direction:column}
html[data-fx-motion="reduce"] :is(.fx-layer__sticky,.fx-rotate__sticky){order:-1}
[data-fx="mask-reveal"]:not(.fx-mask){position:relative;isolation:isolate;overflow:hidden;min-height:100svh;display:flex;align-items:center;justify-content:center}
[data-fx="mask-reveal"]:not(.fx-mask) video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
[data-fx="mask-reveal"]:not(.fx-mask) [data-fx-title]{color:#fff;text-shadow:0 2px 24px #04304780}
[data-fx="shader-lines"]:not(.fx-shader){background:repeating-linear-gradient(90deg,#06061a 0 6px,#211c39 6px 7px)}

[data-fx="mask-reveal"]:not(.fx-mask) img[data-fx-image]{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
.fx-mask>img[data-inner]{opacity:0;pointer-events:none}

/* ---------- 6 · Tilt reveal ---------- */
.fx-tilt{position:relative;background:var(--fx-bg);color:var(--fx-fg);overflow-x:clip}
.fx-tilt__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;contain:paint}
.fx-tilt__card{position:absolute;left:50%;top:50%;overflow:hidden;background:#222;border-radius:var(--fx-radius);
  will-change:transform,width,height;box-shadow:0 40px 80px -30px rgba(0,0,0,.75)}
.fx-tilt__card img{width:100%;height:100%;object-fit:cover;display:block}
.fx-tilt__cap{position:absolute;left:0;right:0;bottom:0;z-index:2;opacity:0;
  padding:0 max(16px,env(safe-area-inset-right,0px)) 22px max(16px,env(safe-area-inset-left,0px));
  font-weight:700;font-size:clamp(17px,2.2vw,24px);text-shadow:0 2px 12px rgba(0,0,0,.7)}
.fx-tilt__head{position:absolute;top:0;left:0;right:0;z-index:3;padding:22px max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px))}
.fx-tilt--static .fx-tilt__stage{position:relative;height:100svh}
[data-fx="tilt-reveal"]:not(.fx-tilt) img{display:block;width:100%;height:auto}

/* ---------- 7 · Hover preview ---------- */
.fx-hover{display:flex;flex-direction:column;padding:0 max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px))}
.fx-hover a{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:.35em 0;
  border-bottom:1px solid var(--fx-line);color:var(--fx-fg);text-decoration:none;
  font-size:clamp(28px,6vw,72px);line-height:1.05;text-transform:uppercase;transition:color .2s ease}
.fx-hover a span{font:500 12px/1 ui-monospace,Menlo,monospace;color:var(--fx-muted)}
.fx-hover a:hover{color:var(--fx-accent)}
.fx-hover-thumb{position:fixed;left:0;top:0;width:var(--fx-hw,240px);height:0;pointer-events:none;z-index:60;
  opacity:0;transition:opacity .25s ease;will-change:transform}
.fx-hover-thumb.is-on{opacity:1}
.fx-hover-thumb__in{position:absolute;left:0;top:0;width:100%;aspect-ratio:4/5;border-radius:var(--fx-radius);
  overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.fx-hover-thumb__in img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- 8 · Scroll story ---------- */
.fx-story{position:relative;color:var(--fx-fg)}
.fx-story__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;
  justify-content:center;gap:.6em;max-width:1000px;margin:0 auto;
  padding:0 max(24px,env(safe-area-inset-right,0px)) 0 max(24px,env(safe-area-inset-left,0px))}
.fx-story__stage p{margin:0;font-size:clamp(26px,4.2vw,58px);line-height:1.12;font-weight:600;letter-spacing:-.01em}
.fx-story--static .fx-story__stage{position:relative;height:auto;min-height:100svh;padding-top:80px;padding-bottom:80px}