/* Caméléon v4 · the glass material.
   One token set drives four renderers: the WebGL stage (E1), live DOM glass (E2), the clone lens (E3) and the bubble (E4).
   The engine writes data-lens-on="gl|dom|clone|group|static|off" on every [data-lens] element. */

/* ---------- 1. tokens ---------- */
@property --rr{syntax:'<length>';inherits:false;initial-value:0px}
@property --lg-off{syntax:'<number>';inherits:false;initial-value:0}
@property --lg-kind{syntax:'*';inherits:false}
:root{--lg-angle:326deg;--lg-lx:-.55;--lg-ly:-.83;--lg-ior:1.5;--hdr-k:1;--hdr-k2:1;--edge-rgb:237 241 245}
html[data-mode="sobre"]{
  --lg-tint:246 249 252;--lg-clear-a:.08;--lg-regular-a:.60;--lg-primary:29 33 38;--lg-primary-a:.90;--lg-on-primary:#FFFFFF;
  --lg-bezel:36;--lg-thick:90;--lg-disp:.05;--lg-frost:1.1;--lg-spec:1.35;--lg-rim:.85;
  --lg-shadow:.24;--lg-halo:0;--lg-fresnel:.9;--lg-env-gain:.95;--lg-env-lift:.05;--lg-dark:0;--lg-merge:20;--lg-mag:1.55;
  --lg-caustic:.10;--lg-caustic-rgb:255 255 255;--lg-glint:.8;
  --lg-glow:255 255 255;--lg-shade:22 26 31;--lg-solid:250 251 252;
  --lg-dom-bezel:20;--lg-dom-thick:80;--lg-dom-frost:5;--lg-dom-disp:0;--lg-depth:.9;
  --lg-blur:16px;--lg-sat:1.4;--lg-bright:1.05;
  --lg-rim-hi:1;--lg-rim-lo:.28;--lg-bevel-hi:.99;--lg-bevel-lo:.45;--lg-inner:.35;--lg-sheen:.22;--lg-rim-caus:.7;--lg-bevel-shade:.12;--lg-edge:.14;
  --lg-spring:.55s / .15;--lg-r-tile:18px;
  --hdr-k2:var(--hdr-k);--edge-rgb:237 241 245;--vt-glow:255 255 255;
  --lg-e3-fres:255 255 255 / .95;--lg-rim-dk:.24;
}
html[data-mode="equilibre"]{
  --lg-tint:255 255 255;--lg-clear-a:.08;--lg-regular-a:.58;--lg-primary:17 91 205;--lg-primary-a:.92;--lg-on-primary:#FFFFFF;
  --lg-bezel:34;--lg-thick:86;--lg-disp:.07;--lg-frost:.8;--lg-spec:1.55;--lg-rim:.90;
  --lg-shadow:.22;--lg-halo:0;--lg-fresnel:1;--lg-env-gain:1;--lg-env-lift:.06;--lg-dark:0;--lg-merge:24;--lg-mag:1.65;
  --lg-caustic:.14;--lg-caustic-rgb:235 250 255;--lg-glint:1;
  --lg-glow:255 255 255;--lg-shade:15 32 58;--lg-solid:252 253 254;
  --lg-dom-bezel:18;--lg-dom-thick:80;--lg-dom-frost:4.5;--lg-dom-disp:.06;--lg-depth:1;
  --lg-blur:14px;--lg-sat:1.8;--lg-bright:1.06;
  --lg-rim-hi:1;--lg-rim-lo:.3;--lg-bevel-hi:1;--lg-bevel-lo:.5;--lg-inner:.4;--lg-sheen:.26;--lg-rim-caus:.7;--lg-bevel-shade:.12;--lg-edge:.14;
  --lg-spring:.5s / .3;--lg-r-tile:26px;
  --edge-rgb:243 247 250;--vt-glow:255 255 255;
  --lg-e3-fres:255 255 255 / .85;--lg-rim-dk:.2;
}
html[data-mode="audacieux"]{
  --lg-tint:12 15 20;--lg-clear-a:.10;--lg-regular-a:.66;--lg-primary:215 255 61;--lg-primary-a:.90;--lg-on-primary:#0B0F14;
  --lg-bezel:38;--lg-thick:100;--lg-disp:.09;--lg-frost:.6;--lg-spec:1.75;--lg-rim:1.10;
  --lg-shadow:0;--lg-halo:.08;--lg-fresnel:1.6;--lg-env-gain:1.35;--lg-env-lift:.07;--lg-dark:1;--lg-merge:26;--lg-mag:1.75;
  --lg-caustic:.22;--lg-caustic-rgb:155 239 247;--lg-glint:1.3;
  --lg-glow:155 239 247;--lg-shade:0 0 0;--lg-solid:20 23 28;
  --lg-dom-bezel:20;--lg-dom-thick:92;--lg-dom-frost:5;--lg-dom-disp:.07;--lg-depth:1.15;
  --lg-blur:18px;--lg-sat:1.6;--lg-bright:.96;
  --lg-rim-hi:.94;--lg-rim-lo:.18;--lg-bevel-hi:.55;--lg-bevel-lo:.25;--lg-inner:.1;--lg-sheen:.07;--lg-rim-caus:.22;--lg-bevel-shade:.5;--lg-edge:.6;
  --lg-spring:.45s / .4;--lg-r-tile:12px;
  --edge-rgb:10 11 14;--vt-glow:155 239 247;
  --lg-e3-fres:175 240 248 / .6;
}
/* dark tone: small chrome over dark content, like the system bars */
[data-lens][data-tone="dark"],.site-header[data-tone="dark"],html[data-mode="equilibre"] :is(#realisations,.s-realisations) [data-lens]{
  --lg-tint:13 21 34;--lg-regular-a:.62;--lg-rim-dk:0;--lg-shade:0 0 0;--lg-rim-hi:.85;--lg-rim-lo:.2;--lg-bevel-hi:.5;--lg-bevel-lo:.22;--lg-inner:.08;--lg-sheen:.08;--lg-rim-caus:.22;--lg-bevel-shade:.45;--lg-edge:.55;--lg-solid:20 28 40;
}

/* ---------- 2. kinds: radius and tint ---------- */
[data-lens]{--lg-radius:999px}
[data-lens="window"]{--lg-radius:36px}
[data-lens="panel"]{--lg-radius:30px}
[data-lens="tile"]{--lg-radius:var(--lg-r-tile)}
[data-lens="plate"]{--lg-radius:22px;--lg-a:.5}
[data-lens="round"],[data-lens="drop"]{--lg-radius:50%}
[data-lens="sheet"]{--lg-radius:30px;--lg-a:.78}
[data-lens="primary"]{--lg-a:var(--lg-primary-a)}
@media (max-width:767px){[data-lens="window"]{--lg-radius:30px}}
@media (min-width:1200px){#primary-nav{--lg-off:1}}
@media (max-width:1199px){.primary ul{--lg-off:1}}
html[data-mode="audacieux"] [data-lens="sheet"]{--lg-a:.80}

/* ---------- 3. renderers ---------- */
/* E1: the stage canvas draws the glass; the element only carries layout, text and events */
[data-stage]{position:relative;isolation:isolate}
[data-stage]>.stage-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none}
:where([data-stage])>:where(:not(.stage-canvas)){position:relative;z-index:1}
/* under the canvas (before WebGL is ready, or without WebGL2): the same art in CSS gradients, the glass as faux glass */
html[data-mode="sobre"] .hero{background:radial-gradient(40% 50% at 78% 38%,#BCD3E2,rgb(188 211 226/0) 70%),linear-gradient(112deg,rgb(255 255 255/0) 50%,rgb(255 255 255/.6) 58%,rgb(255 255 255/0) 66%),linear-gradient(160deg,#F2F5F8,#DCE5ED)}
html[data-mode="equilibre"] .hero{background:radial-gradient(34% 44% at 76% 46%,#7DE8F3,rgb(125 232 243/0) 70%),radial-gradient(26% 36% at 86% 62%,#51A7F4,rgb(81 167 244/0) 70%),repeating-linear-gradient(90deg,rgb(15 32 58/.06) 0 1px,transparent 1px 88px),linear-gradient(160deg,#F5F9FB,#E7F1F6)}
html[data-mode="audacieux"] .hero{background:radial-gradient(34% 44% at 72% 40%,rgb(32 183 200/.4),rgb(32 183 200/0) 70%),radial-gradient(30% 30% at 12% 92%,rgb(184 230 43/.18),transparent 70%),#0A0B0E}
html[data-mode="sobre"] .shop{background:linear-gradient(160deg,#F3F6F9,#E2E9EF)}
html[data-mode="equilibre"] .shop{background:radial-gradient(40% 50% at 15% 20%,#B9F0F5,transparent 70%),linear-gradient(160deg,#F5F9FB,#E6F0F6)}
html[data-mode="audacieux"] .shop{background:radial-gradient(40% 40% at 20% 15%,rgb(32 183 200/.2),transparent 70%),#0A0B0E}
[data-lens-on="gl"]{background:transparent!important;box-shadow:none!important;border-color:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-radius:var(--lg-radius)!important;-webkit-tap-highlight-color:transparent}
[data-lens-on="gl"][data-lens="primary"]{color:var(--lg-on-primary)!important}
/* E2, E3 and faux glass share one shell */
[data-lens-on="dom"],[data-lens-on="static"],[data-lens-on="clone"]{
  isolation:isolate;border-radius:var(--lg-radius)!important;border-color:transparent!important;
  background:var(--lg-bg,rgb(var(--lg-tint)/var(--lg-a,var(--lg-regular-a))))!important;
  box-shadow:0 0 0 .5px rgb(var(--lg-shade)/var(--lg-edge,.14)),0 16px 38px -12px rgb(var(--lg-shade)/.3),0 3px 8px -2px rgb(var(--lg-shade)/.12)!important;
  -webkit-backdrop-filter:var(--lg-wbf,none)!important;backdrop-filter:var(--lg-bf,none)!important;
}
[data-lens-on="dom"]{--lg-wbf:blur(var(--lg-blur)) saturate(var(--lg-sat)) brightness(var(--lg-bright));--lg-bf:var(--lg-wbf)}
/* Chromium: real refraction of whatever scrolls behind (text, images, the WebGL stage). Never a -webkit- line with url() */
html[data-refract] [data-lens-on="dom"]{--lg-bf:saturate(var(--lg-sat)) brightness(var(--lg-bright)) var(--lg-url,blur(var(--lg-blur)))}
/* faux glass: tint and rim kit, no backdrop-filter */
[data-lens-on="static"]{--lg-bg:rgb(var(--lg-tint)/max(var(--lg-a,var(--lg-regular-a)),.82))}
[data-lens-on="dom"]:is([data-lens="pill"],[data-lens="round"]){--lg-a:.74}
/* phones: the style switcher floats at the bottom over anything (the gallery's slate niche included): a denser tint keeps its labels AA */
@media (max-width:767px){.switcher[data-lens-on="dom"]{--lg-a:.84}}
/* WebKit and Gecko, big pieces: frosted centre plus a bevel ring that shows a sharper, brighter backdrop */
[data-lens-on="dom"][data-lens-ring]{--lg-bg:transparent;--lg-wbf:none;--lg-bf:none}
[data-lens-ring]>.lg-frost,[data-lens-ring]>.lg-ring{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-3;padding:9px}
[data-lens-ring]>.lg-frost{background:rgb(var(--lg-tint)/var(--lg-a,var(--lg-regular-a)));
  -webkit-backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat)) brightness(var(--lg-bright));backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat)) brightness(var(--lg-bright));
  -webkit-mask:linear-gradient(#000 0 0) content-box;mask:linear-gradient(#000 0 0) content-box}
[data-lens-ring]>.lg-ring{background:rgb(var(--lg-tint)/calc(var(--lg-a,var(--lg-regular-a)) * .3));
  -webkit-backdrop-filter:blur(1.5px) saturate(1.9) brightness(1.12) contrast(1.06);backdrop-filter:blur(1.5px) saturate(1.9) brightness(1.12) contrast(1.06);
  -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)}
/* E3: the clone of the section art, bent by an SVG filter, then the centre tint */
:where([data-lens-on="clone"],[data-lens-on="dom"],[data-lens-on="static"]){position:relative}
/* without the WebGL stage, the free drop would be an empty disc (the bubble, E4, works everywhere) */
html[data-tier="C"] :is(.hero-drop.is-drop,.glass-live),[data-stage][data-gl="off"] :is(.hero-drop.is-drop,.glass-live){display:none!important}
[data-lens-on="clone"]{--lg-bg:transparent;box-shadow:0 0 0 .5px rgb(var(--lg-shade)/var(--lg-edge,.14)),0 20px 44px -18px rgb(var(--lg-shade)/.34),0 2px 6px -2px rgb(var(--lg-shade)/.12)!important}
/* the clone paints a full rectangle (no rounded, half-transparent pixels for the dispersion passes to pick up),
   then clip-path rounds the filtered result: the corners stay clean */
.lg-clone{position:absolute;inset:0;border-radius:0;clip-path:inset(0 round var(--lg-r,var(--lg-radius)));overflow:hidden;z-index:-3;pointer-events:none;will-change:transform;
  background-image:var(--bd);background-size:var(--bd-size);background-repeat:var(--bd-repeat);background-position:calc(-1 * var(--lg-ox,0px)) calc(-1 * var(--lg-oy,0px))}
[data-lens-on]:not([data-lens-on="clone"])>.lg-clone,[data-lens-on]:not([data-lens-on="clone"])>.lg-tint,[data-clone="off"]>.lg-clone{display:none}
.lg-tint{position:absolute;inset:0;border-radius:inherit;z-index:-2;pointer-events:none;background:rgb(var(--lg-tint)/var(--lg-a,var(--lg-regular-a)));
  -webkit-mask:linear-gradient(90deg,transparent,#000 13px,#000 calc(100% - 13px),transparent),linear-gradient(transparent,#000 13px,#000 calc(100% - 13px),transparent);-webkit-mask-composite:source-in;
  mask:linear-gradient(90deg,transparent,#000 13px,#000 calc(100% - 13px),transparent),linear-gradient(transparent,#000 13px,#000 calc(100% - 13px),transparent);mask-composite:intersect}
[data-clone="off"]>.lg-tint{-webkit-mask:none;mask:none;background:rgb(var(--lg-tint)/max(var(--lg-a,var(--lg-regular-a)),.72))}
/* group pieces: the header layer draws their glass */
[data-lens-on="group"]{background:transparent!important;border-color:transparent!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;position:relative;z-index:2;border-radius:var(--lg-radius)!important}
[data-lens-on="group"]>.lg-rim{display:none}
/* before the engine runs: faux glass, so the first paint already reads as glass */
[data-lens]:not([data-lens-on]){border-radius:var(--lg-radius);background:rgb(var(--lg-tint)/max(var(--lg-regular-a),.66));box-shadow:inset 0 1px 0 rgb(255 255 255/.6),0 0 0 .5px rgb(var(--lg-shade)/.16),0 12px 30px -12px rgb(var(--lg-shade)/.3)}
[data-lens="primary"]:not([data-lens-on]),[data-lens-on="static"][data-lens="primary"],[data-lens-on="dom"][data-lens="primary"],[data-lens-on="clone"][data-lens="primary"]{--lg-bg:rgb(var(--lg-primary)/var(--lg-primary-a));background:rgb(var(--lg-primary)/var(--lg-primary-a));color:var(--lg-on-primary)!important}
html[data-mode="audacieux"] [data-lens]:not([data-lens-on]){box-shadow:inset 0 1px 0 rgb(255 255 255/.18),0 0 0 .5px rgb(255 255 255/.14)}

/* ---------- 4. the rim kit: two-lobe hairline that follows the light, bevel light, inner glow, sheen, press glow ---------- */
.lg-rim{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1}
.lg-rim::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;opacity:var(--lg-appear,1);
  background:conic-gradient(from var(--lg-angle),
    rgb(255 255 255/var(--lg-rim-hi)) 0deg,rgb(255 255 255/var(--lg-rim-lo)) 40deg,rgb(var(--lg-shade)/var(--lg-rim-dk,0)) 90deg,rgb(255 255 255/var(--lg-rim-lo)) 140deg,
    rgb(255 255 255/calc(var(--lg-rim-hi) * .66)) 180deg,rgb(255 255 255/var(--lg-rim-lo)) 220deg,rgb(var(--lg-shade)/var(--lg-rim-dk,0)) 270deg,rgb(255 255 255/var(--lg-rim-lo)) 320deg,rgb(255 255 255/var(--lg-rim-hi)) 360deg);
  -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)}
.lg-rim::after{
  content:"";position:absolute;inset:0;border-radius:inherit;opacity:var(--lg-appear,1);
  box-shadow:
    inset calc(var(--lg-lx) * -2.2px) calc(var(--lg-ly) * -2.2px) 1px -.5px rgb(255 255 255/var(--lg-bevel-hi)),
    inset calc(var(--lg-lx) * 1.6px) calc(var(--lg-ly) * 1.6px) 1px -.5px rgb(255 255 255/var(--lg-bevel-lo)),
    inset calc(var(--lg-lx) * 7px) calc(var(--lg-ly) * 7px) 12px -7px rgb(255 255 255/var(--lg-rim-caus)),
    inset calc(var(--lg-lx) * -8px) calc(var(--lg-ly) * -8px) 14px -9px rgb(var(--lg-shade)/var(--lg-bevel-shade)),
    inset 0 0 20px -6px rgb(255 255 255/var(--lg-inner));
  background:
    radial-gradient(closest-side circle at var(--px,50%) var(--py,50%),rgb(var(--lg-glow)/calc(var(--glow,0) * .6)),transparent),
    radial-gradient(130% 110% at var(--gx,22%) var(--gy,0%),rgb(255 255 255/var(--lg-sheen)),transparent 62%)}
/* one sweep of light (press release, settle) */
.lg-sweep{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:3}
.lg-sweep::before{content:"";position:absolute;inset:-10% -60%;background:linear-gradient(105deg,transparent 42%,rgb(255 255 255/.5) 50%,transparent 58%);animation:lg-sweep 380ms cubic-bezier(.3,.6,.3,1) both}
html[data-mode="audacieux"] .lg-sweep::before{background:linear-gradient(105deg,transparent 42%,rgb(155 239 247/.32) 50%,transparent 58%)}
@keyframes lg-sweep{from{transform:translateX(-60%)}to{transform:translateX(60%)}}
/* a small glass bead for flights between two surfaces */
.lg-bead{position:fixed;left:0;top:0;z-index:95;width:16px;height:16px;border-radius:50%;pointer-events:none;background:rgb(var(--lg-tint)/.3);
  -webkit-backdrop-filter:blur(2px) saturate(1.8) brightness(1.1);backdrop-filter:blur(2px) saturate(1.8) brightness(1.1);
  box-shadow:inset 1px 1px 1px rgb(255 255 255/.95),inset -1px -1px 2px rgb(var(--lg-shade)/.25),0 3px 8px -2px rgb(var(--lg-shade)/.3)}

/* ---------- 5. merged header ---------- */
.site-header[data-lens-group-on]::before{content:none!important;display:none!important}
.lg-group,.lg-group-ring{position:absolute;inset:0;z-index:0;pointer-events:none}
.lg-group{background:rgb(var(--lg-tint)/calc(.14 * var(--hdr-k2)));
  -webkit-backdrop-filter:blur(calc(var(--lg-blur) * var(--hdr-k2))) saturate(var(--lg-sat)) brightness(var(--lg-bright));
  backdrop-filter:blur(calc(var(--lg-blur) * var(--hdr-k2))) saturate(var(--lg-sat)) brightness(var(--lg-bright))}
html[data-refract] .lg-group{backdrop-filter:saturate(var(--lg-sat)) brightness(var(--lg-bright)) var(--lg-url,blur(var(--lg-blur)))}
.lg-group-ring{-webkit-backdrop-filter:blur(1.5px) saturate(1.9) brightness(1.12) contrast(1.06);backdrop-filter:blur(1.5px) saturate(1.9) brightness(1.12) contrast(1.06)}
.lg-group-art{position:absolute;left:0;top:0;z-index:1;pointer-events:none;overflow:visible}
.lg-group-art .g-fill{fill:rgb(var(--lg-tint)/calc(var(--lg-regular-a) * .37 * var(--hdr-k2)))}
.lg-group-art .g-pieces rect{fill:rgb(var(--lg-tint)/calc(var(--lg-regular-a) * .8 * var(--hdr-k2)))}
.lg-group-art .g-inner{fill:none;stroke:rgb(var(--lg-shade)/.12);stroke-width:1}
.lg-group-art .g-rim path{fill:none;stroke:#FFFFFF;stroke-width:1.25;stroke-linecap:round}
.lg-group-art .g-rim path[data-l="0"]{stroke-opacity:.1}.lg-group-art .g-rim path[data-l="1"]{stroke-opacity:.22}.lg-group-art .g-rim path[data-l="2"]{stroke-opacity:.38}
.lg-group-art .g-rim path[data-l="3"]{stroke-opacity:.56}.lg-group-art .g-rim path[data-l="4"]{stroke-opacity:.76}.lg-group-art .g-rim path[data-l="5"]{stroke-opacity:.95}
.site-header[data-tone="dark"] .lg-group-art .g-rim path{stroke:#DDF6FA}
/* the thick bevel: a soft band of light inside the lit arcs (wide stroke, blurred, clipped to the union) */
.lg-group-art .g-bevel path{fill:none;stroke:#FFFFFF;stroke-width:10;stroke-linecap:round;stroke-opacity:0}
.lg-group-art .g-bevel path[data-l="1"]{stroke-opacity:.06}.lg-group-art .g-bevel path[data-l="2"]{stroke-opacity:.2}.lg-group-art .g-bevel path[data-l="3"]{stroke-opacity:.4}
.lg-group-art .g-bevel path[data-l="4"]{stroke-opacity:.62}.lg-group-art .g-bevel path[data-l="5"]{stroke-opacity:.88}
.site-header[data-tone="dark"] .lg-group-art .g-bevel path{stroke:#9BEFF7}
.site-header[data-tone="dark"] .lg-group-art .g-bevel{opacity:.5}
.lg-group-art .g-inner{stroke-width:1.5}
.site-header[data-tone="dark"]{color:#EFF4FA}

/* ---------- 6. switcher droplet and the lens that rides on it ---------- */
.switcher .drop,.seg .drop{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:1;pointer-events:none}
.switcher label,.seg label{z-index:2}
.drop-fill{flood-color:#FFFFFF;flood-opacity:.92;transition:flood-opacity .3s}
.drop-rim{flood-color:#FFFFFF;flood-opacity:.9}
html[data-mode="sobre"] .switcher .drop-fill{flood-color:#1D2126}
html[data-mode="audacieux"] .switcher .drop-fill{flood-color:#D7FF3D;flood-opacity:.95}
html[data-mode="audacieux"] .seg .drop-fill{flood-color:#F2F5F8}
.is-moving .drop-fill{flood-opacity:.22!important}
html[data-refract] .is-moving .drop-fill{flood-opacity:.12!important}
.knob-lens{position:absolute;z-index:3;pointer-events:none;border-radius:999px;display:none;scale:1.12}
html[data-refract] .is-moving>.knob-lens{display:block;backdrop-filter:var(--lg-url,none)}
.switcher.is-moving label:has(input:checked){color:var(--text)!important}

/* ---------- 7. scroll edge: content softens under the header instead of a hard divider ---------- */
.scroll-edge{position:fixed;z-index:45;top:0;left:0;right:0;height:96px;pointer-events:none;opacity:0;transition:opacity .3s;
  background:linear-gradient(rgb(var(--edge-rgb)/.5),rgb(var(--edge-rgb)/0))}
html.is-scrolled .scroll-edge{opacity:1}
html[data-edge="dark"] .scroll-edge{--edge-rgb:10 12 16}
@media (pointer:fine) and (min-width:1024px){
  html[data-tier="A"][data-glass="clear"] .scroll-edge{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);-webkit-mask:linear-gradient(#000 35%,transparent);mask:linear-gradient(#000 35%,transparent)}
}

/* ---------- 8. the style switch: one drop wipe from the clicked label, a glass ring on its front ---------- */
html[data-vt-to="sobre"]{--vt-dur:700ms}
html[data-vt-to="equilibre"]{--vt-dur:780ms}
html[data-vt-to="audacieux"]{--vt-dur:820ms}
::view-transition-old(root){animation:none}
::view-transition-new(root){animation:vt-drop var(--vt-dur,780ms) cubic-bezier(.32,.72,.1,1) both}
@keyframes vt-drop{from{clip-path:circle(0 at var(--vt-x,50%) var(--vt-y,0))}to{clip-path:circle(var(--vt-r,150vmax) at var(--vt-x,50%) var(--vt-y,0))}}
.vt-ring{position:fixed;inset:0;z-index:2147483000;pointer-events:none;display:none;
  background:radial-gradient(circle at var(--vt-x,50%) var(--vt-y,0),transparent calc(var(--rr) - 22px),rgb(var(--vt-glow)/.55) calc(var(--rr) - 3px),rgb(0 0 0/.18) calc(var(--rr) - 1px),transparent var(--rr))}
html[data-vt] .vt-ring{display:block;animation:vt-ring var(--vt-dur,780ms) cubic-bezier(.32,.72,.1,1) both}
@keyframes vt-ring{from{--rr:0px}to{--rr:var(--vt-r,150vmax)}}

/* ---------- 9. sheets: cart drawer, menu sheet, toast ---------- */
.cart-drawer{--lg-dom-bezel:26;--lg-dom-thick:90;--lg-dom-frost:9;top:12px;right:12px;bottom:12px;width:min(420px,calc(100vw - 24px));overflow:hidden;
  transform:none!important;scale:.35;visibility:hidden;transform-origin:var(--ox,92%) var(--oy,0%);transition:scale .42s cubic-bezier(.5,0,.8,.4),visibility 0s linear .42s}
.cart-drawer.open{scale:1;visibility:visible;transition:scale .5s var(--sheet-spring),visibility 0s}
:root{--sheet-spring:linear(0,.06 3%,.24 8%,.52 15%,.8 23%,.98 30%,1.07 37%,1.09 43%,1.07 50%,1.03 60%,1.005 72%,.998 84%,1)}
@media (max-width:767px){
  .cart-drawer{top:auto;left:8px;right:8px;bottom:8px;width:auto;height:min(86vh,720px);transform-origin:50% 100%;--lg-radius:28px}
  .cart-drawer::before{content:"";position:absolute;top:8px;left:50%;translate:-50% 0;z-index:2;width:36px;height:5px;border-radius:999px;background:rgb(var(--lg-shade)/.25)}
  html[data-mode="audacieux"] .cart-drawer::before{background:rgb(255 255 255/.3)}
  .cart-drawer .drawer-head{padding-top:26px}
}
.cart-drawer .drawer-head{border-bottom-color:rgb(var(--lg-shade)/.1)}
html[data-mode="audacieux"] .cart-drawer .drawer-head,html[data-mode="audacieux"] .cart-drawer .drawer-foot{border-color:rgb(255 255 255/.1)}
@media (max-width:1199px){
  #primary-nav{--lg-dom-bezel:22;--lg-dom-thick:80;--lg-dom-frost:8;transform-origin:var(--ox,100%) 0}
  #primary-nav.open{animation:sheet-in .5s var(--sheet-spring) both}
}
@keyframes sheet-in{from{scale:.4}to{scale:1}}
.toast{--lg-a:.86;--lg-radius:24px}

/* ---------- 10. clone-lens backdrops (section art, painted behind the cards only) ---------- */
[data-backdrop]{position:relative;isolation:isolate}
.lg-backdrop{position:absolute;z-index:-1;pointer-events:none;background-image:var(--bd);background-size:var(--bd-size);background-repeat:var(--bd-repeat);background-position:0 0;
  -webkit-mask:linear-gradient(90deg,transparent,#000 80px,#000 calc(100% - 80px),transparent),linear-gradient(transparent,#000 80px,#000 calc(100% - 80px),transparent);-webkit-mask-composite:source-in;
  mask:linear-gradient(90deg,transparent,#000 80px,#000 calc(100% - 80px),transparent),linear-gradient(transparent,#000 80px,#000 calc(100% - 80px),transparent);mask-composite:intersect}
/* La Galerie: a mist pool (the hero's pearl and blue-grey) with caustic veins, so the planche's bevel has something to bend */
[data-bd="caustic"]{
  --bd:repeating-linear-gradient(90deg,rgb(22 26 31/.20) 0 1px,transparent 1px 33%),var(--bd-img,linear-gradient(transparent,transparent)),var(--bd-img,linear-gradient(transparent,transparent)),
    radial-gradient(34% 40% at 40% 46%,rgb(255 255 255/.9),rgb(255 255 255/0) 70%),radial-gradient(60% 70% at 66% 60%,rgb(146 178 204/.95),rgb(146 178 204/0) 72%),
    radial-gradient(40% 50% at 12% 20%,rgb(188 211 226/.9),rgb(188 211 226/0) 72%),linear-gradient(160deg,#E4EBF1,#D6E0E9);
  --bd-size:var(--bd-w) var(--bd-h),522px 522px,522px 522px,var(--bd-w) var(--bd-h),var(--bd-w) var(--bd-h),var(--bd-w) var(--bd-h),var(--bd-w) var(--bd-h);
  --bd-repeat:no-repeat,repeat,repeat,no-repeat,no-repeat,no-repeat,no-repeat}
[data-bd="lagoon"]{
  --bd:repeating-linear-gradient(90deg,rgb(15 32 58/.08) 0 1px,transparent 1px 88px),repeating-linear-gradient(0deg,rgb(15 32 58/.08) 0 1px,transparent 1px 88px),
    var(--bd-img,linear-gradient(transparent,transparent)),radial-gradient(60% 55% at 50% 50%,rgb(125 232 243/.4),rgb(125 232 243/0) 70%),linear-gradient(#F3F7FA,#F3F7FA);
  --bd-size:var(--bd-w) var(--bd-h);--bd-repeat:no-repeat}
[data-bd="grid"]{
  --bd:repeating-linear-gradient(90deg,rgb(15 32 58/.08) 0 1px,transparent 1px 88px),repeating-linear-gradient(0deg,rgb(15 32 58/.08) 0 1px,transparent 1px 88px),
    radial-gradient(40% 70% at 22% 40%,rgb(125 232 243/.75),rgb(125 232 243/0) 70%),radial-gradient(40% 70% at 78% 60%,rgb(81 167 244/.6),rgb(81 167 244/0) 70%),linear-gradient(#F3F7FA,#F3F7FA);
  --bd-size:var(--bd-w) var(--bd-h);--bd-repeat:no-repeat}
[data-bd="streaks"]{
  --bd:repeating-linear-gradient(115deg,rgb(133 226 237/.09) 0 1px,transparent 1px 38px),radial-gradient(50% 60% at 80% 20%,rgb(81 167 244/.35),transparent 70%),
    radial-gradient(40% 60% at 15% 90%,rgb(13 82 121/.9),transparent 70%),linear-gradient(#0A1421,#0A1421);
  --bd-size:var(--bd-w) var(--bd-h);--bd-repeat:no-repeat}
/* Audacieux: the giant outlined words plus two coloured light pools (glacier, citron), so the slabs have light to bend */
[data-bd="type"]{--bd:var(--bd-img,linear-gradient(transparent,transparent)),radial-gradient(46% 60% at 72% 28%,rgb(32 183 200/.3),transparent 70%),radial-gradient(34% 50% at 16% 84%,rgb(184 230 43/.13),transparent 70%),linear-gradient(#0A0B0E,#0A0B0E);--bd-size:var(--bd-w) var(--bd-h);--bd-repeat:no-repeat}
html[data-mode="audacieux"] :is(.service,.steps li,.contact-direct)[data-lens-on="clone"],html[data-mode="audacieux"] .case[data-lens-on="dom"]{--lg-a:.5}
/* Audacieux réalisations: the sticky case slabs are live DOM glass; give them coloured light and streaks to blur and bend */
html[data-mode="audacieux"] :is(#realisations,.s-realisations){background:
  radial-gradient(38% 22% at 86% 18%,rgb(32 183 200/.3),transparent 70%),radial-gradient(34% 18% at 8% 52%,rgb(184 230 43/.13),transparent 70%),
  radial-gradient(40% 22% at 78% 84%,rgb(155 239 247/.18),transparent 70%),repeating-linear-gradient(115deg,rgb(155 239 247/.07) 0 1px,transparent 1px 46px),#0A0B0E}
/* big slabs: the thickness shows as glacier light caught inside the edges (the same Fresnel band as the clone tiles) */
html[data-glass="clear"][data-mode="audacieux"] .case[data-lens-on="dom"]{box-shadow:0 0 0 .5px rgb(155 239 247/.34),inset 0 1px 0 rgb(255 255 255/.2),inset 0 0 0 1px rgb(155 239 247/.1),
  inset 0 0 38px -12px rgb(155 239 247/.3),0 28px 64px -28px rgb(0 0 0/.75)!important}

/* ---------- 10b. the bubble (E4): a clone of the page under it, magnified; a ring filter; a CSS kit; its shadow ---------- */
:root{--lp-hl:255 255 255;--lp-cau:255 255 255;--lp-sh:.28}
html[data-mode="audacieux"]{--lp-hl:155 239 247;--lp-cau:155 239 247;--lp-sh:.5}
dialog{--lp-sh:.5}
.lg-lp{border-radius:50%!important;overflow:hidden!important;isolation:isolate;contain:layout paint;
  background:transparent!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.lg-lp-view{position:absolute;overflow:hidden;pointer-events:none;z-index:0}
.lg-lp-px{position:absolute;inset:0;width:100%;height:100%;display:block}
.lg-lp-cb{position:absolute;left:0;top:0;transform-origin:0 0;pointer-events:none}
html[data-tier="A"] .lg-lp-cb{will-change:transform}   /* tier A: the magnified text is rastered once and only translated */
/* no glass inside the glass: the clone keeps its tints, never a second backdrop filter */
.lg-in-lp,.lg-in-lp *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.lg-in-lp [data-lens-on="dom"]{background:rgb(var(--lg-tint)/.9)!important}
.lg-lp-kit{position:absolute;inset:0;border-radius:50%;pointer-events:none;z-index:1;
  background:
    radial-gradient(circle at var(--px,50%) var(--py,50%),rgb(var(--lg-glow)/calc(.35 * var(--lp-press,0))),transparent 45%),
    radial-gradient(60% 38% at calc(50% + 34% * var(--lg-lx)) calc(50% + 34% * var(--lg-ly)),rgb(255 255 255/.55),transparent 70%),
    radial-gradient(45% 22% at calc(50% - 30% * var(--lg-lx)) calc(50% - 30% * var(--lg-ly)),rgb(255 255 255/.22),transparent 70%),
    radial-gradient(circle closest-side,transparent 78%,rgb(var(--lg-shade)/.16) 94%,transparent);
  box-shadow:inset 0 0 0 1px rgb(255 255 255/.35),inset 0 0 0 1.5px rgb(var(--lg-shade)/.12)}
/* the site's bubbles on the light stages (perle, lagoon): a smaller caustic crescent and a darker edge, so the lens reads
   as clear glass with a rim instead of a milky marble (the gate and La Scène keep the recipe above) */
html:not([data-mode="audacieux"]):not([data-glass="solid"]) .lg-lp:not(.gate-bubble) .lg-lp-kit{
  background:
    radial-gradient(circle at var(--px,50%) var(--py,50%),rgb(var(--lg-glow)/calc(.35 * var(--lp-press,0))),transparent 45%),
    radial-gradient(44% 22% at calc(50% + 40% * var(--lg-lx)) calc(50% + 40% * var(--lg-ly)),rgb(255 255 255/.4),transparent 70%),
    radial-gradient(40% 16% at calc(50% - 34% * var(--lg-lx)) calc(50% - 34% * var(--lg-ly)),rgb(255 255 255/.35),transparent 70%),
    radial-gradient(circle closest-side,transparent 68%,rgb(var(--lg-shade)/.10) 86%,rgb(var(--lg-shade)/.34) 97%,transparent);
  box-shadow:inset 0 0 0 1px rgb(255 255 255/.55),inset 0 0 0 1.5px rgb(var(--lg-shade)/.25)}
/* two-arc hairline that follows the light */
.lg-lp-kit::before{content:"";position:absolute;inset:0;border-radius:50%;padding:1.4px;
  background:conic-gradient(from var(--lg-angle),rgb(var(--lp-hl)/.95),rgb(var(--lp-hl)/.10) 25%,rgb(var(--lp-hl)/.60) 50%,rgb(var(--lp-hl)/.10) 75%,rgb(var(--lp-hl)/.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)}
/* a star glint on the rim at the light angle (.78 R): a 3 px core and two crossed 1 px streaks; it swells with speed and press */
.lg-lp-kit::after{content:"";position:absolute;width:24px;height:24px;left:calc(50% + 39% * var(--lg-lx) - 12px);top:calc(50% + 39% * var(--lg-ly) - 12px);
  background:radial-gradient(circle,#FFFFFF 0 1.5px,rgb(255 255 255/.55) 2.2px,transparent 4px),
    linear-gradient(90deg,transparent,rgb(255 255 255/.9) 50%,transparent) 50% 50%/100% 1px no-repeat,
    linear-gradient(0deg,transparent,rgb(255 255 255/.9) 50%,transparent) 50% 50%/1px 100% no-repeat;
  scale:calc(1 + .25 * var(--lp-glint,0));rotate:calc(var(--lg-angle) * .25)}
.lg-lp-shadow,.lg-lp-caustic{pointer-events:none;border-radius:50%;transform-origin:50% 50%;margin:0}
.lg-lp-shadow{background:radial-gradient(closest-side,rgb(0 0 0/var(--lp-sh)),rgb(0 0 0/calc(var(--lp-sh) * .55)) 55%,rgb(0 0 0/calc(var(--lp-sh) * .18)) 82%,transparent)}
.lg-lp-caustic{background:radial-gradient(circle closest-side,rgb(var(--lp-cau)/.45),rgb(var(--lp-cau)/.18) 16%,transparent 26%);mix-blend-mode:plus-lighter}
.lg-lp-shadow[hidden],.lg-lp-caustic[hidden]{display:none}

/* ---------- 11. solid glass: reduced transparency, more contrast, or the ◐ toggle ---------- */
html[data-glass="solid"] [data-lens-on="dom"],html[data-glass="solid"] [data-lens-on="static"],html[data-glass="solid"] [data-lens-on="clone"]{
  --lg-bg:rgb(var(--lg-solid)/.96);--lg-wbf:none;--lg-bf:none;box-shadow:0 0 0 1px rgb(var(--lg-shade)/.18),0 12px 30px -14px rgb(var(--lg-shade)/.3)!important}
html[data-glass="solid"] [data-lens-on="dom"][data-lens="primary"],html[data-glass="solid"] [data-lens-on="static"][data-lens="primary"],html[data-glass="solid"] [data-lens-on="clone"][data-lens="primary"]{--lg-bg:rgb(var(--lg-primary))}
html[data-glass="solid"] .lg-clone,html[data-glass="solid"] .lg-ring,html[data-glass="solid"] .lg-group-ring{display:none!important}
html[data-glass="solid"] .lg-frost{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgb(var(--lg-solid)/.96);-webkit-mask:none;mask:none;padding:0}
html[data-glass="solid"] .lg-tint{-webkit-mask:none;mask:none;background:rgb(var(--lg-solid)/.96)}
html[data-glass="solid"] .lg-rim::before{opacity:.35}
html[data-glass="solid"] .lg-rim::after{background:none;box-shadow:inset 0 1px 0 rgb(255 255 255/.4)}
html[data-glass="solid"] .lg-group{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:rgb(var(--lg-solid)/.96)}
html[data-glass="solid"] .lg-group-art .g-fill,html[data-glass="solid"] .lg-group-art .g-pieces rect{fill:rgb(var(--lg-solid)/.5)}
html[data-glass="solid"] .lg-group-art .g-inner{stroke:rgb(var(--lg-shade)/.18)}
html[data-glass="solid"] .lg-group-art .g-bevel{opacity:.3}
html[data-glass="solid"] .knob-lens{display:none!important}
/* the bubble stays a clear magnifier (magnification is not transparency) with a frosted rim band; no filter, fringe or glint */
html[data-glass="solid"] .lg-lp-view{filter:none!important}
html[data-glass="solid"] .lg-lp-kit{background:radial-gradient(circle closest-side,transparent 80%,rgb(var(--lg-solid)/.6) 81%,rgb(var(--lg-solid)/.6) 100%),
  radial-gradient(60% 38% at calc(50% + 34% * var(--lg-lx)) calc(50% + 34% * var(--lg-ly)),rgb(255 255 255/.3),transparent 70%)}
html[data-glass="solid"] .lg-lp-kit::after{display:none}
html[data-glass="solid"] .scroll-edge{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;-webkit-mask:none;mask:none}
@media (prefers-contrast:more){
  :root{--muted:var(--text)}
  [data-lens-on="dom"],[data-lens-on="static"],[data-lens-on="clone"]{box-shadow:inset 0 0 0 1.5px var(--text)!important}
  .lg-rim{display:none}
  .lg-group-art .g-inner{stroke:var(--text);stroke-width:1.5}
  .lg-group-art .g-rim,.lg-group-art .g-bevel{display:none}
}
@media (forced-colors:active){
  [data-lens-on],[data-lens]{background:Canvas!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important;border:1px solid CanvasText!important;forced-color-adjust:auto}
  .stage-canvas,.lg-group,.lg-group-ring,.lg-group-art,.lg-clone,.lg-tint,.lg-rim,.lg-frost,.lg-ring,.lg-backdrop,.vt-ring,.scroll-edge,.drop,.knob-lens,.lg-lp-kit,.lg-lp-view,.lg-lp-shadow,.lg-lp-caustic{display:none!important}
  .demo-poster{display:block!important}
}

/* ---------- 12. motion ---------- */
@media (prefers-reduced-motion:reduce){
  ::view-transition-new(root){animation:none}
  .vt-ring,.lg-sweep{display:none!important}
  .cart-drawer,.cart-drawer.open{transition:visibility 0s!important}
  #primary-nav.open{animation:none!important}
}
html[data-motion="reduce"] .vt-ring,html[data-motion="reduce"] .lg-sweep{display:none!important}
@media print{
  .stage-canvas,.lg-group,.lg-group-ring,.lg-group-art,.lg-clone,.lg-rim,.lg-frost,.lg-ring,.lg-backdrop,.vt-ring,.scroll-edge,.knob-lens,.hero-drop,.glass-live,.lg-lp-kit,.lg-lp-view,.lg-lp-shadow,.lg-lp-caustic{display:none!important}
  .demo-poster{display:block!important}
}