/* Une matière commune aux commandes. À charger après accueil.css/systeme.css.
   Le texte reste net ; seule la scène derrière le verre est réfractée.
   Le reflet de surface et le fin biseau restent lisibles sur le fond très clair. */
[data-glass]{
 --glass-light:0;--glass-press:0;--lx:28%;--ly:12%;--glass-angle:-48deg;
 border:0;border-radius:999px;
 font-family:"Inter Display",Arial,sans-serif;font-weight:500;
 background:rgb(255 255 255 / .12);
 -webkit-backdrop-filter:blur(7px) saturate(1.2);
 backdrop-filter:blur(7px) saturate(1.2);
 box-shadow:0 7px 20px -13px rgb(19 27 44 / .48),inset 0 .5px 1px rgb(255 255 255 / .94),inset 0 -1px 1.5px rgb(38 49 73 / .16);
 transition:background .24s ease,box-shadow .3s ease;
}
.has-liquide [data-glass]{isolation:auto;-webkit-backdrop-filter:none;backdrop-filter:none}
.zk-verre{
 position:absolute;inset:0;z-index:-2;border-radius:inherit;pointer-events:none;
 -webkit-backdrop-filter:blur(7px) saturate(1.2);
 backdrop-filter:blur(7px) saturate(1.2);
}
.has-liquide .zk-verre{
 -webkit-backdrop-filter:blur(3px) saturate(1.12);backdrop-filter:blur(3px) saturate(1.12);
}
.has-liquide .is-optically-active>.zk-verre{
 -webkit-backdrop-filter:var(--liquide) blur(.35px) saturate(1.18) brightness(1.025);
 backdrop-filter:var(--liquide) blur(.35px) saturate(1.18) brightness(1.025);
}
/* Une source large en haut, une caustique plus petite sous le pointeur, et un
   retour sombre en partie basse donnent une épaisseur, plutôt qu'un fond blanc. */
[data-glass]::before{
 content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
 background:
  radial-gradient(ellipse 44% 85% at var(--lx) var(--ly),rgb(255 255 255 / calc(.32 + var(--glass-light)*.38)),transparent 76%),
  radial-gradient(ellipse 65% 28% at 50% 108%,rgb(255 255 255 / .55),transparent 84%),
  linear-gradient(165deg,rgb(255 255 255 / .38),rgb(255 255 255 / .015) 35%,rgb(20 31 51 / .045) 70%,rgb(255 255 255 / .22));
 box-shadow:inset 0 1px .5px rgb(255 255 255 / .96),inset 0 -1px 1.5px rgb(255 255 255 / .55);
}
/* Réflexion sur le seul bord : dispersion douce et lumineuse, aucun grésillement.
   Les couleurs occupent un anneau de 1 px, pas les lettres ni tout le bouton. */
[data-glass]::after{
 content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;
 padding:1px;background:
  conic-gradient(from var(--glass-angle),rgb(255 255 255 / .95),rgb(255 255 255 / .14) 16%,rgb(157 194 224 / .25) 28%,rgb(255 255 255 / .7) 45%,rgb(225 178 206 / .22) 57%,rgb(255 255 255 / .14) 76%,rgb(255 255 255 / .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,linear-gradient(#000 0 0);mask-composite:exclude;
 opacity:.85;mix-blend-mode:normal;animation:none!important;
}
[data-glass]:hover::after,.has-liquide [data-glass]::after,.has-liquide [data-glass]:hover::after{opacity:.85;animation:none;mix-blend-mode:normal}
[data-glass]:hover{background:rgb(255 255 255 / .15)}
[data-glass].is-glitch{animation:none;translate:none;text-shadow:none}
[data-glass]:focus-visible{outline:2px solid currentColor;outline-offset:5px}
[data-glass]:disabled{pointer-events:none}
/* Un même vocabulaire : pilules pour les mots, disques pour les flèches.
   Les interfaces propres aux projets (PRISMA, etc.) gardent leur identité. */
.acc-continue[data-glass]{
 display:inline-flex;align-items:center;justify-content:center;min-height:46px;
 padding:12px 23px;border-radius:999px;
 font-family:"Inter Display",Arial,sans-serif;font-size:14px;font-weight:500;
 letter-spacing:0;text-transform:none;line-height:1.2;
}
.acc-continue span,.acc-continue:hover span,.acc-continue:focus-visible span{animation:none;color:inherit}
.menu-toggle[data-glass]{min-height:44px;padding:10px 17px;border-radius:999px;font-size:14px;line-height:1.2;font-weight:500}
.menu-toggle[data-glass] i{width:20px;height:7px}
body[data-page=project] .menu-toggle[data-glass]:hover{border-radius:999px;background:rgb(255 255 255 / .15);box-shadow:0 7px 20px -13px rgb(19 27 44 / .48),inset 0 .5px 1px rgb(255 255 255 / .94),inset 0 -1px 1.5px rgb(38 49 73 / .16)}
:is(.work-filters,.acc-filters,.acc-views).has-gouttes{border-radius:999px;gap:2px;padding:4px}
:is(.work-filters,.acc-filters,.acc-views).has-gouttes>button{
 min-height:36px;padding:9px 14px;border-radius:999px;font-family:"Inter Display",Arial,sans-serif;
 font-weight:500;font-size:13px;line-height:1.2;letter-spacing:0;
}
.has-gouttes>button[aria-pressed=true]{color:var(--ink)}
.acc-arrows button[data-glass]{width:50px;height:50px;border-radius:50%;font-family:"Inter Display",Arial,sans-serif;font-weight:500}
/* La sélection est un volume rose translucide, sa queue s'étire puis se résorbe.
   Les reflets sont portés par le groupe ; aucun faux grain sur les gouttes. */
.zk-gouttes{color:var(--pink);opacity:.31}
.acc-views .zk-gouttes{color:var(--pink);opacity:.25}
.zk-goutte-tete{transition:transform .36s cubic-bezier(.2,.8,.25,1),width .36s cubic-bezier(.2,.8,.25,1),height .36s ease}
.zk-goutte-queue{transition:transform .57s cubic-bezier(.45,0,.2,1),width .57s cubic-bezier(.45,0,.2,1),height .57s ease}
.zk-goutte-survol{transition:transform .36s cubic-bezier(.2,.8,.25,1),width .36s ease,height .36s ease,opacity .24s ease}
@media(max-width:760px){
 :is(.work-filters,.acc-filters,.acc-views).has-gouttes>button{min-height:44px;padding:10px 12px}
 .work-filters.has-gouttes{border-radius:24px}
}
@media(prefers-reduced-motion:reduce){
 [data-glass],[data-glass]::before,[data-glass]::after,.zk-gouttes>span{animation:none!important;transition:none!important}
}
body[data-motion=paused] :is([data-glass],[data-glass]::before,[data-glass]::after,.zk-gouttes>span){animation:none!important;transition:none!important}
/* La découpe et le fin liseré partagent la même courbe. Pendant le scroll,
   la lentille se plisse de quelques pixels et sépare légèrement le spectre ;
   aucune lettre ne rebondit et la cible tactile garde sa taille. */
[data-glass].has-liquid-rim{
 --glass-ripple:0;
 background:transparent;box-shadow:none;
}
.has-liquid-rim>.zk-verre{
 border-radius:0;clip-path:var(--glass-clip,inset(0 round 999px));
 background:rgb(255 255 255 / .1);
}
[data-glass].has-liquid-rim::before{
 border-radius:0;clip-path:var(--glass-clip,inset(0 round 999px));
 background:
  radial-gradient(ellipse 42% 110% at var(--lx) var(--ly),rgb(255 255 255 / calc(.38 + var(--glass-light)*.38)),transparent 73%),
  radial-gradient(ellipse 55% 30% at 50% 109%,rgb(175 213 249 / calc(.12 + var(--glass-ripple)*.3)),transparent 90%),
  linear-gradient(164deg,rgb(255 255 255 / .34),rgb(255 255 255 / .04) 35%,rgb(31 49 73 / .06) 72%,rgb(255 255 255 / .2));
 box-shadow:none;
}
[data-glass].has-liquid-rim::after{display:none}
.zk-glass-rim{position:absolute;inset:0;overflow:visible;z-index:3;pointer-events:none;filter:drop-shadow(0 2px 2px rgb(30 49 78 / .08))}
body[data-page=project] .menu-toggle[data-glass].has-liquid-rim:hover{box-shadow:none;background:transparent}
[data-glass].has-liquid-rim:hover{background:transparent}
/* Le verre des dialogues garde les mêmes détails sous une lumière plus rosée. */
.site-menu .has-liquid-rim>.zk-verre{background:rgb(255 255 255 / .13)}
@media(prefers-reduced-motion:reduce){.zk-glass-rim{filter:none}}