/* « Diapos » (sections/slides, slides.js; ShopSlides). Loaded with the section only.
   Text is ink / muted on paper (or surface), the page's own pair, swapped on the dark themes: the caption is a card
   of the page laid on the picture (ShopSlides::CONTRAST, tested). A packshot (.media .media__img) stays whole
   (frame.css: contain, the room in the colours of its edges); an ambience photo (.sl__img) fills its frame.
   Without script: a rail one swipes. With it (html.js): one slide at a time, the theme's transition (below), or a
   rail it scrolls (Marché, Fil). Transitions 0.6 to 1.2 s, never a flash; html.motion-low (reduced motion,
   « Discrètes », data saver): no transition at all, nothing turns by itself (slides.js). */
.sl{--sl-h:min(124vw,72svh);position:relative;padding:var(--s4) 0;color:var(--ink)}
@media (min-width:700px){.sl{--sl-h:clamp(380px,58vw,560px)}}
@media (min-width:1100px){.sl{--sl-h:clamp(460px,42vw,640px)}}
.sl__head{margin-bottom:var(--s2)}
.sl__stage{position:relative}
.sl__track{display:grid;grid-auto-flow:column;grid-auto-columns:88%;gap:12px;height:var(--sl-h);margin:0 var(--edge);padding:0 var(--gutter);list-style:none;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none}
.sl__track::-webkit-scrollbar{display:none}
@media (min-width:1000px){.sl__track{grid-auto-columns:72%}}
.sl__slide{position:relative;min-width:0;height:100%;scroll-snap-align:center}
.sl__link{position:relative;display:grid;grid-template-rows:minmax(0,1fr);height:100%;border-radius:var(--r-lg);overflow:hidden;color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;-webkit-user-drag:none;user-select:none}
.sl__link:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.sl__pic{position:relative;display:block;min-height:0;height:100%;overflow:hidden;background:var(--brand-soft)}
.sl__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none}
.sl__pic.media .media__img,.sl__pic.media .poster{position:absolute;inset:0;width:100%;height:100%}
/* A product: its whole picture, then its card (never over it). */
.sl__slide--product .sl__link{grid-template-rows:minmax(0,1fr) auto;background:var(--surface)}
@media (min-width:800px){.sl__slide--product .sl__link{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr)}}
/* The caption: a card of the page (paper / ink), on the picture of a scene, beside the packshot of a product. */
.sl__cap{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0;padding:14px 16px;background:var(--paper);color:var(--ink)}
.sl__slide--scene .sl__cap{position:absolute;left:12px;bottom:12px;max-width:min(30rem,calc(100% - 24px));border-radius:var(--r-md);background:color-mix(in srgb,var(--paper) 94%,transparent);box-shadow:0 10px 30px -12px rgb(0 0 0 / .45)}
@media (min-width:800px){.sl__slide--scene .sl__cap{left:24px;bottom:24px;padding:18px 22px}.sl__slide--product .sl__cap{justify-content:center;padding:var(--s3)}}
.sl__title{font-size:var(--t-lg);font-weight:800;line-height:1.15;letter-spacing:-.02em;overflow-wrap:anywhere}
@media (min-width:800px){.sl__slide--product .sl__title{font-size:var(--t-xl)}}
.sl__sub{color:var(--muted);font-size:var(--t-sm);line-height:1.45;overflow-wrap:anywhere}
.sl__buy{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:4px}
.sl__go{display:inline-flex;align-items:center;gap:.4em;min-height:44px;padding:0 18px;border-radius:var(--pill);background:var(--brand);color:var(--brand-ink);font-size:var(--t-sm);font-weight:800;white-space:nowrap}
.sl__go .ico{width:1em;height:1em;transition:transform var(--q)}
.sl__link:hover .sl__go .ico{transform:translateX(3px)}
/* Controls: arrows, dots, count, pause (44 px to touch). */
.sl__ui{display:flex;align-items:center;justify-content:center;gap:4px 8px;margin-top:12px}
.sl__btn{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);cursor:pointer}
.sl__btn--prev .ico{transform:scaleX(-1)}
.sl__btn:focus-visible,.sl__dot:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.sl__btn--pause .sl__ico-play,.sl.is-stopped .sl__ico-pause{display:none}
.sl.is-stopped .sl__ico-play{display:block}
.sl__dots{display:flex;flex-wrap:wrap;justify-content:center;min-width:0}
.sl__dot{position:relative;display:grid;place-items:center;width:28px;height:44px;padding:0;border:0;background:none;color:var(--ink);cursor:pointer}
.sl__dot::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.28;transition:opacity var(--q),width var(--m)}
.sl__dot[aria-current]::before{width:22px;border-radius:4px;opacity:1}
.sl__count{margin:0 4px;color:var(--muted);font-size:var(--t-sm);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
@media (min-width:700px){.sl__dots .sl__dot{width:32px}}
/* One slide at a time (html.js: before the script, the first slide only: nothing moves when it starts). */
.js .sl--stack .sl__track{display:block;position:relative;margin:0;padding:0;overflow:hidden;border-radius:var(--r-lg)}
.js .sl--stack .sl__slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease),clip-path .9s var(--ease),visibility 0s .9s}
.js .sl--stack:not(.is-on) .sl__slide:first-child,.js .sl--stack.is-on .sl__slide.is-active{opacity:1;visibility:visible;transition-delay:0s}
/* Only the slide shown and its neighbours are laid out (their pictures load, the others wait: lazy). */
.js .sl--stack.is-on .sl__slide:not(.is-active):not(.is-prev):not(.is-next){display:none}
.js .sl--stack .sl__slide.is-active{z-index:2}
/* Reduced motion, « Discrètes », data saver: no transition, no drift. */
html.motion-low .sl *,html.motion-low .sl *::before,html.motion-low .sl *::after,html.motion-low .sl.is-turning .sl__stage::after{transition:none!important;animation:none!important}
html.motion-low .sl .sl__img{transform:none!important;scale:none!important;translate:none!important}
#diapos{scroll-margin-top:var(--bar-h,64px)}

/* ——— The staging of each theme ——— */
/* Aurora: a luminous crossfade (the next picture comes out of a soft light). */
.sl--aurora.is-on .sl__slide{filter:brightness(1.12) saturate(1.06)}
.sl--aurora.is-on .sl__slide.is-active{filter:none}
.sl--aurora .sl__track{box-shadow:0 24px 60px -30px color-mix(in srgb,var(--brand) 70%,transparent)}
.sl--aurora .sl__cap{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
/* Sable: the picture drifts in like sand, the caption is a note laid slightly askew. */
.sl--sable.is-on .sl__slide{transform:translateX(5%)}
.sl--sable.is-on .sl__slide.is-active{transform:none}
.sl--sable.is-on[data-dir=prev] .sl__slide:not(.is-active){transform:translateX(-5%)}
.sl--sable .sl__slide--scene .sl__cap{rotate:-1.2deg}
/* Immersion: the whole screen, the photo breathes (slow zoom) and drifts with the scroll. */
.sl--immersion{--sl-h:86svh;padding:0 0 var(--im-sheet,0)}
@media (min-width:700px){.sl--immersion{--sl-h:min(100svh,880px)}}
.sl--immersion .sl__wrap{max-width:none;padding:0}
.sl--immersion .sl__head{position:absolute;z-index:3;top:var(--s3);left:var(--gutter);right:var(--gutter);margin:0;pointer-events:none}
.sl--immersion .sl__track,.js .sl--immersion.sl--stack .sl__track{margin:0;border-radius:0}
.sl--immersion .sl__link{border-radius:0}
.sl--immersion .sl__img{scale:1.14;translate:0 var(--sl-par,0px);transition:scale 7s linear}
.sl--immersion .is-active .sl__img{scale:1.06}
.sl--immersion.is-on .sl__slide{transition-duration:1.2s}
.sl--immersion .sl__slide--scene .sl__cap{left:0;right:0;bottom:0;max-width:none;padding:var(--s4) var(--gutter) var(--s3);border-radius:0;background:linear-gradient(to top,var(--paper) 30%,color-mix(in srgb,var(--paper) 88%,transparent) 62%,transparent);box-shadow:none}
.sl--immersion .sl__slide--scene .sl__title{max-width:18ch;font-size:calc(var(--t-3xl,2.6rem) * var(--display-scale,1) * .9);line-height:.95;letter-spacing:-.035em}
.sl--immersion .sl__ui{position:absolute;z-index:3;right:var(--gutter);bottom:var(--s2);margin:0;padding:4px;border-radius:var(--pill);background:var(--paper)}
@media (max-width:699px){.sl--immersion{padding-bottom:calc(var(--im-sheet,0px) + var(--s1))}.sl--immersion .sl__ui{position:relative;z-index:3;margin-top:8px;background:none}.sl--immersion .sl__slide--scene .sl__title{font-size:var(--t-2xl,2rem)}}
/* Marché: the stall that moves along: crates side by side, slightly askew, one more at each turn. */
.sl--marche .sl__track{grid-auto-columns:74%;scroll-behavior:smooth}
@media (min-width:800px){.sl--marche .sl__track{grid-auto-columns:calc((100% - 2 * var(--gutter) - 24px) / 2.4)}}
.sl--marche .sl__link{border:var(--mk-line,2px solid var(--ink));box-shadow:var(--mk-shadow,4px 4px 0 var(--ink));border-radius:var(--r-md);background:var(--surface)}
.sl--marche .sl__slide{padding:6px 4px 10px}
.sl--marche .sl__slide:nth-child(odd) .sl__link{rotate:-1deg}
.sl--marche .sl__slide:nth-child(even) .sl__link{rotate:.8deg}
.sl--marche .sl__slide--product .sl__link{grid-template-columns:none;grid-template-rows:minmax(0,1fr) auto}
.sl--marche .sl__slide--scene .sl__cap{left:8px;bottom:8px;rotate:-1.5deg}
/* Atelier: the turntable: the pictures turn around a point under the stage, like a record. */
.sl--atelier.is-on .sl__slide{transform-origin:50% 160%;transform:rotate(8deg);transition-duration:1.1s}
.sl--atelier.is-on .sl__slide.is-active{transform:none}
.sl--atelier.is-on[data-dir=prev] .sl__slide:not(.is-active){transform:rotate(-8deg)}
.js .sl--atelier.sl--stack .sl__track{border-radius:var(--r-sm);box-shadow:0 0 0 1px var(--at-line,var(--line))}
.sl--atelier :is(.sl__title){font-family:var(--serif);font-weight:300;letter-spacing:0}
/* Frais: speed: the next picture, at once. */
.sl--frais.is-on .sl__slide{transition-duration:.12s}
.sl--frais .sl__go{border-radius:var(--r-sm)}
/* Maison: the curtain: two panels of fabric close over the picture and open on the next one. */
.sl--maison.is-on .sl__slide{transition:opacity .2s linear .45s,visibility 0s .65s}
.sl--maison.is-on .sl__slide.is-active{transition:opacity .2s linear .45s}
.sl--maison .sl__stage::before,.sl--maison .sl__stage::after{content:"";position:absolute;z-index:4;top:0;bottom:0;width:51%;background:repeating-linear-gradient(90deg,color-mix(in oklab,var(--brand) 82%,#000) 0 14px,var(--brand) 14px 30px);transform:scaleX(0);pointer-events:none}
.sl--maison .sl__stage::before{left:0;transform-origin:left}
.sl--maison .sl__stage::after{right:0;transform-origin:right}
.sl--maison.is-turning .sl__stage::before,.sl--maison.is-turning .sl__stage::after{animation:sl-curtain 1.05s var(--ease) both}
@keyframes sl-curtain{0%{transform:scaleX(0)}42%,58%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.sl--maison .sl__title{font-family:var(--serif);font-weight:400}
/* Vestiaire: the lookbook: each picture is a page turned from the right. */
.sl--vestiaire .sl__track{perspective:1600px}
.sl--vestiaire.is-on .sl__slide{transform-origin:0 50%;transform:rotateY(-24deg) translateX(8%);transition-duration:1s}
.sl--vestiaire.is-on .sl__slide.is-active{transform:none}
.sl--vestiaire.is-on[data-dir=prev] .sl__slide:not(.is-active){transform:rotateY(18deg) translateX(-6%)}
.sl--vestiaire .sl__link,.js .sl--vestiaire.sl--stack .sl__track{border-radius:0}
.sl--vestiaire .sl__title{font-size:var(--t-md);font-weight:500;letter-spacing:.12em;text-transform:uppercase}
.sl--vestiaire .sl__slide--scene .sl__cap{border-radius:0}
/* Éclat: the mirror: a rosy light passes over the picture as it changes. */
.sl--eclat .sl__track,.sl--eclat .sl__link{border-radius:var(--r-xl)}
.sl--eclat .sl__track{box-shadow:var(--ec-glow,0 20px 50px -24px var(--brand))}
.sl--eclat .sl__stage::after{content:"";position:absolute;z-index:4;inset:0;border-radius:var(--r-xl);background:linear-gradient(105deg,transparent 30%,color-mix(in srgb,var(--brand-soft) 70%,#fff) 48%,transparent 66%);opacity:0;transform:translateX(-60%);pointer-events:none}
.sl--eclat.is-turning .sl__stage::after{animation:sl-shine 1.1s var(--ease) both}
@keyframes sl-shine{0%{opacity:0;transform:translateX(-60%)}30%{opacity:.4}100%{opacity:0;transform:translateX(60%)}}
.sl--eclat .sl__slide--scene .sl__cap{border-radius:var(--r-lg)}
/* Récolte: the picture rises like the sun. */
.sl--recolte.is-on .sl__slide{transform:translateY(7%);transition-duration:1s}
.sl--recolte.is-on .sl__slide.is-active{transform:none}
.sl--recolte .sl__track{border:var(--rc-line,1px solid var(--line))}
/* Rétro: in its window, the next picture is drawn line by line. */
.sl--retro.is-on .sl__slide{clip-path:inset(0 0 100% 0);transition:clip-path .6s steps(8),opacity 0s .6s,visibility 0s .6s}
.sl--retro.is-on .sl__slide.is-active{clip-path:inset(0);opacity:1;transition:clip-path .6s steps(8)}
.sl--retro{padding:0}
.sl--retro .sl__track,.js .sl--retro.sl--stack .sl__track,.sl--retro .sl__link,.sl--retro .sl__cap,.sl--retro .sl__go,.sl--retro .sl__btn{border-radius:0}
.sl--retro .sl__btn{box-shadow:inset -2px -2px 0 var(--rt-lo,var(--line)),inset 2px 2px 0 var(--rt-hi,var(--paper))}
/* Journal: the contact sheet: the frames numbered under the print, the one shown circled in pencil. */
.sl--journal .sl__track,.js .sl--journal.sl--stack .sl__track,.sl--journal .sl__link{border-radius:0}
.sl--journal .sl__track{border-top:var(--jn-rule,2px solid var(--ink));padding-top:0}
.sl--journal .sl__title{font-family:var(--serif);font-weight:700}
.sl--journal .sl__slide--scene .sl__cap{border-radius:0;box-shadow:none;border-left:4px solid var(--ink)}
.sl--journal .sl__ui{flex-wrap:wrap}
.sl--journal .sl__dots{order:-1;flex:1 0 100%;flex-wrap:nowrap;justify-content:flex-start;gap:6px;overflow-x:auto;padding:8px 2px;background:var(--ink);scrollbar-width:none}
.sl--journal .sl__dot{flex:none;display:flex;flex-direction:column;width:auto;height:auto;padding:4px;color:var(--paper)}
.sl--journal .sl__dot::before{display:none}
.sl--journal .sl__thumb{display:block;width:72px;height:54px;overflow:hidden;opacity:.65;filter:grayscale(.4)}
.sl--journal .sl__thumb img{display:block;width:100%;height:100%;object-fit:cover}
.sl--journal .sl__thumb--whole{background:var(--paper)}
.sl--journal .sl__thumb--none{background:var(--brand-soft)}
.sl--journal .sl__frame{font:600 12px/1.3 ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase}
.sl--journal .sl__dot[aria-current] .sl__thumb{opacity:1;filter:none;outline:3px solid var(--brand);outline-offset:1px;border-radius:40% 45% 38% 50%}
@media (min-width:700px){.sl--journal .sl__thumb{width:96px;height:72px}}
/* Néon: a line of light sweeps the stage and leaves the next picture behind it. */
.sl--neon.is-on .sl__slide{clip-path:inset(0 100% 0 0);transition:clip-path .85s var(--ease),opacity 0s .85s,visibility 0s .85s}
.sl--neon.is-on .sl__slide.is-active{clip-path:inset(0);opacity:1;transition:clip-path .85s var(--ease)}
.sl--neon .sl__track{box-shadow:0 0 0 1px var(--ne-dim,var(--line)),0 0 40px -10px var(--ne-glow,transparent)}
.sl--neon .sl__stage::after{content:"";position:absolute;z-index:4;top:0;bottom:0;left:0;width:3px;background:var(--ne-tube,var(--brand));box-shadow:0 0 14px 3px var(--ne-glow,transparent);opacity:0;pointer-events:none}
.sl--neon.is-turning .sl__stage::after{animation:sl-sweep .85s var(--ease) both}
@keyframes sl-sweep{0%{opacity:0;left:0}12%{opacity:.85}88%{opacity:.85}100%{opacity:0;left:calc(100% - 3px)}}
.sl--neon .sl__go{box-shadow:0 0 18px var(--ne-glow,transparent)}
/* Carnet: polaroids that slide on the page and stick askew, the previous one still under. */
.js .sl--carnet.sl--stack .sl__track{overflow:visible;border-radius:0}
.sl--carnet .sl__link{padding:10px 10px 0;border-radius:3px;background:var(--cr-cream,var(--surface));box-shadow:var(--cr-shadow,0 10px 22px -12px rgb(0 0 0 / .5));overflow:visible}
.sl--carnet .sl__pic{border-radius:2px}
.sl--carnet .sl__link::before{content:"";position:absolute;z-index:3;top:-10px;left:50%;width:90px;height:24px;margin-left:-45px;background:var(--cr-tape,rgb(255 250 235 / .7));rotate:-3deg}
.sl--carnet .sl__slide--scene .sl__link{grid-template-rows:minmax(0,1fr) auto}
.sl--carnet .sl__slide--scene .sl__cap{position:relative;left:auto;bottom:auto;max-width:none;background:none;box-shadow:none;padding:10px 6px 14px}
.sl--carnet .sl__title{font-family:var(--serif)}
.sl--carnet.is-on .sl__slide{transform:translateX(26%) rotate(5deg);transition-duration:.95s}
.sl--carnet.is-on .sl__slide.is-active{transform:rotate(-1deg)}
.sl--carnet.is-on .sl__slide.is-prev{opacity:1;visibility:visible;transform:translate(-2%,2%) rotate(-4.5deg) scale(.97);transition-delay:0s;z-index:1}
.sl--carnet .sl__stage{padding:22px 22px 18px;overflow:hidden}
/* Brut: the hard cut, the frame number in figures. */
.sl--brut.is-on .sl__slide{transition:none}
.sl--brut .sl__track,.js .sl--brut.sl--stack .sl__track{border:var(--br,3px solid var(--ink));border-radius:0}
.sl--brut .sl__link,.sl--brut .sl__cap,.sl--brut .sl__go,.sl--brut .sl__btn{border-radius:0}
.sl--brut .sl__btn{box-shadow:inset 0 0 0 2px var(--ink)}
.sl--brut .sl__count{font:700 var(--t-lg) ui-monospace,monospace;color:var(--ink)}
.sl--brut .sl__title{text-transform:uppercase;letter-spacing:-.01em}
.sl--brut .sl__slide--scene .sl__cap{box-shadow:6px 6px 0 var(--ink);border:2px solid var(--ink)}
/* Wax: the pattern of the cloth unfolds from the middle, and the next picture is under it. */
.sl--wax .sl__stage{padding:10px 0}
.sl--wax .sl__stage::before{content:"";position:absolute;left:0;right:0;top:0;bottom:0;background:var(--wx-b);border-radius:calc(var(--r-lg) + 4px)}
.sl--wax.is-on .sl__slide{clip-path:circle(0% at 50% 50%);transition:clip-path 1.05s var(--ease),opacity 0s 1.05s,visibility 0s 1.05s}
.sl--wax.is-on .sl__slide.is-active{clip-path:circle(75% at 50% 50%);opacity:1;transition:clip-path 1.05s var(--ease)}
.sl--wax.is-on:not([data-dir=prev]) .sl__slide.is-prev,.sl--wax.is-on[data-dir=prev] .sl__slide.is-next{opacity:1;visibility:visible;clip-path:circle(75% at 50% 50%);z-index:1;transition:none}
.sl--wax .sl__track{position:relative}
/* Fil: the rail, one screen at a time that clicks into place; the thread fills while one waits. */
.sl--fil .sl__track{grid-auto-columns:100%;gap:0;margin:0;padding:0;border-radius:var(--r-lg);scroll-padding-inline:0}
.sl--fil .sl__link{border-radius:0}
.sl__thread{position:absolute;z-index:3;left:12px;right:12px;top:12px;height:3px;border-radius:2px;background:color-mix(in srgb,var(--paper) 55%,transparent);overflow:hidden}
.sl__thread-fill{display:block;height:100%;background:var(--brand);transform:scaleX(0);transform-origin:left}
html.motion-low .sl__thread{display:none}
/* Univers: a zoom from one world to the next. */
.sl--univers.is-on .sl__slide{transform:scale(.72);transition-duration:1.1s}
.sl--univers.is-on .sl__slide.is-active{transform:none}
.sl--univers.is-on .sl__slide.is-prev:not(.is-active){transform:scale(1.3)}
.sl--univers .sl__track,.sl--univers .sl__link{border-radius:var(--r-xl)}
.sl--univers .sl__slide--scene .sl__cap{border-radius:var(--r-xl)}
/* Immersion: the picture bleeds to the screen's edges, the link (what a finger aims at) keeps the side margins. */
.sl--immersion .sl__link{margin:0 var(--gutter);overflow:visible}
.sl--immersion .sl__pic{margin:0 calc(var(--gutter) * -1)}
.sl--immersion .sl__slide--scene .sl__cap{left:calc(var(--gutter) * -1);right:calc(var(--gutter) * -1)}
/* Phones: the count instead of the dots (swipe and arrows stay); the contact sheet of Journal keeps its frames. */
@media (max-width:699px){.sl:not(.sl--journal) .sl__dots{display:none}.sl:not(.sl--journal) .sl__count{display:block}}