/* ============================================================
   Benny's - DA "Glass" (maquette Benny Dashboard 5)
   Fichier partage par la page de connexion (index.html) et
   l'accueil (accueil/accueil.php) de la nouvelle DA.

   - Fond degrade bleu + formes 3D flottantes (tubes / bulles)
   - Theme clair / sombre : <html data-theme="dark"> (bouton
     .bdv2-theme-toggle, gere par src/bdv2_glass.js, memorise
     dans le navigateur).
   ============================================================ */

:root {
    --glass-font: 'Outfit', system-ui, sans-serif;

    /* ---- Palette par defaut : Bleu (clair = --gl-*, sombre = --gd-*) ----
       Les autres palettes (Parametres > Couleur du theme) redefinissent
       ces memes variables via <html data-glass-palette="...">. */
    --gl-g1a: #cfe8ff;
    --gl-g1b: #5aa9ff;
    --gl-g1c: #0c56d0;
    --gl-g2a: #a9d4ff;
    --gl-g2b: #2f86f5;
    --gl-g2c: #0846b8;
    --gl-g3a: #e4f2ff;
    --gl-g3b: #79bbff;
    --gl-g3c: #1e6fe6;
    --gd-g1a: #8fc4ff;
    --gd-g1b: #2563d9;
    --gd-g1c: #0a1f5c;
    --gd-g2a: #6aa8f5;
    --gd-g2b: #1a4fb8;
    --gd-g2c: #071640;
    --gd-g3a: #b4d6ff;
    --gd-g3b: #3b7ae6;
    --gd-g3c: #0e2a72;
    --gl-tube-shine: rgba(255, 255, 255, .45);
    --gl-tube-shadow: rgba(2, 30, 100, 0.35);
    --gd-tube-shine: rgba(200, 225, 255, 0.28);
    --gd-tube-shadow: rgba(0, 0, 0, .55);
    --gl-blob: radial-gradient(circle at 32% 28%, #d6ecff 0%, #6fb6ff 30%, #1f77ee 65%, #0b4fc4 100%);
    --gd-blob: radial-gradient(circle at 32% 28%, #a9cfff 0%, #3a78e0 30%, #14409e 65%, #08183f 100%);
    --glass-bg-light: radial-gradient(ellipse 60% 55% at 55% 40%, #2f8cff 0%, rgba(47, 140, 255, 0) 70%), radial-gradient(ellipse 50% 50% at 90% 5%, #4ea8ff, rgba(78, 168, 255, 0) 70%), linear-gradient(160deg, #0a63e0 0%, #0756d1 50%, #0444b0 100%);
    --glass-edge-light: linear-gradient(180deg, color-mix(in srgb, #4ea8ff 70%, #0a63e0) 0%, #0756d1 45%, #0444b0 100%);
    --glass-bg-light-center: radial-gradient(ellipse 60% 55% at 50% 45%, #2f8cff 0%, rgba(47, 140, 255, 0) 70%), radial-gradient(ellipse 50% 50% at 85% 10%, #4ea8ff, rgba(78, 168, 255, 0) 70%), linear-gradient(160deg, #0a63e0 0%, #0756d1 50%, #0444b0 100%);
    --glass-bg-dark: radial-gradient(ellipse 55% 50% at 55% 40%, rgba(26, 95, 210, 0.35) 0%, rgba(26, 95, 210, 0) 70%), radial-gradient(ellipse 45% 45% at 90% 5%, rgba(63, 140, 245, 0.22), rgba(63, 140, 245, 0) 70%), radial-gradient(ellipse 50% 45% at 10% 95%, rgba(90, 60, 220, 0.18), rgba(90, 60, 220, 0) 70%), linear-gradient(160deg, #071533 0%, #040c22 55%, #02060f 100%);
    --glass-edge-dark: linear-gradient(180deg, #071533 0%, #040c22 50%, #02060f 100%);
    --glass-body-light: #0756d1;
    --glass-body-dark: #040c22;
    --glass-navy: #0a2a5e;
    --glass-navy-hover: #0d3678;
    --fx-band-light: #8cc6ff;
    --fx-band-dark: #2f63c9;
    --fx-glow-dark: rgba(127, 184, 255, 0.3);

    /* Variables effectives (theme clair) */
    --g1a: var(--gl-g1a); --g1b: var(--gl-g1b); --g1c: var(--gl-g1c);
    --g2a: var(--gl-g2a); --g2b: var(--gl-g2b); --g2c: var(--gl-g2c);
    --g3a: var(--gl-g3a); --g3b: var(--gl-g3b); --g3c: var(--gl-g3c);
    --tube-shine: var(--gl-tube-shine);
    --tube-shadow: var(--gl-tube-shadow);
    --blob-bg: var(--gl-blob);
    --blob-bg-dark: var(--gd-blob);
    --blob-dark: 0;
    --glass-body: var(--glass-body-light);
    --fx-band: var(--fx-band-light);
    --fx-glow: rgba(255, 255, 255, .35);
}

:root[data-theme="dark"] {
    --g1a: var(--gd-g1a); --g1b: var(--gd-g1b); --g1c: var(--gd-g1c);
    --g2a: var(--gd-g2a); --g2b: var(--gd-g2b); --g2c: var(--gd-g2c);
    --g3a: var(--gd-g3a); --g3b: var(--gd-g3b); --g3c: var(--gd-g3c);
    --tube-shine: var(--gd-tube-shine);
    --tube-shadow: var(--gd-tube-shadow);
    --blob-dark: 1;
    --glass-body: var(--glass-body-dark);
    --fx-band: var(--fx-band-dark);
    --fx-glow: var(--fx-glow-dark);
}

/* ---- Palettes de couleur (formes + fond), chacune en clair et en sombre ---- */
:root[data-glass-palette="pink"] {
    --gl-g1a: #ffcfed;
    --gl-g1b: #ff5abb;
    --gl-g1c: #d00c6b;
    --gl-g2a: #ffa9dd;
    --gl-g2b: #f52f9c;
    --gl-g2c: #b80859;
    --gl-g3a: #ffe4f5;
    --gl-g3b: #ff79ca;
    --gl-g3c: #e61e85;
    --gd-g1a: #ff8fd0;
    --gd-g1b: #d92577;
    --gd-g1c: #5c0a28;
    --gd-g2a: #f56ab7;
    --gd-g2b: #b81a60;
    --gd-g2c: #40071c;
    --gd-g3a: #ffb4de;
    --gd-g3b: #e63b8d;
    --gd-g3c: #720e35;
    --gl-tube-shine: rgba(255, 255, 255, .45);
    --gl-tube-shadow: rgba(100, 2, 41, 0.35);
    --gd-tube-shine: rgba(255, 200, 231, 0.28);
    --gd-tube-shadow: rgba(0, 0, 0, .55);
    --gl-blob: radial-gradient(circle at 32% 28%, #ffd6f0 0%, #ff6fc6 30%, #ee1f8e 65%, #c40b63 100%);
    --gd-blob: radial-gradient(circle at 32% 28%, #ffa9d8 0%, #e03a8a 30%, #9e144f 65%, #3f081e 100%);
    --glass-bg-light: radial-gradient(ellipse 60% 55% at 55% 40%, #ff2fa3 0%, rgba(255, 47, 163, 0) 70%), radial-gradient(ellipse 50% 50% at 90% 5%, #ff4ebb, rgba(255, 78, 187, 0) 70%), linear-gradient(160deg, #e00a7a 0%, #d1076c 50%, #b00457 100%);
    --glass-edge-light: linear-gradient(180deg, color-mix(in srgb, #ff4ebb 70%, #e00a7a) 0%, #d1076c 45%, #b00457 100%);
    --glass-bg-light-center: radial-gradient(ellipse 60% 55% at 50% 45%, #ff2fa3 0%, rgba(255, 47, 163, 0) 70%), radial-gradient(ellipse 50% 50% at 85% 10%, #ff4ebb, rgba(255, 78, 187, 0) 70%), linear-gradient(160deg, #e00a7a 0%, #d1076c 50%, #b00457 100%);
    --glass-bg-dark: radial-gradient(ellipse 55% 50% at 55% 40%, rgba(210, 26, 115, 0.35) 0%, rgba(210, 26, 115, 0) 70%), radial-gradient(ellipse 45% 45% at 90% 5%, rgba(245, 63, 160, 0.22), rgba(245, 63, 160, 0) 70%), radial-gradient(ellipse 50% 45% at 10% 95%, rgba(220, 73, 60, 0.18), rgba(220, 73, 60, 0) 70%), linear-gradient(160deg, #33071a 0%, #22040f 55%, #0f0207 100%);
    --glass-edge-dark: linear-gradient(180deg, #33071a 0%, #22040f 50%, #0f0207 100%);
    --glass-body-light: #d1076c;
    --glass-body-dark: #22040f;
    --glass-navy: #5e0a33;
    --glass-navy-hover: #780d42;
    --fx-band-light: #ff8cd3;
    --fx-band-dark: #c92f74;
    --fx-glow-dark: rgba(255, 127, 198, 0.3);
}

:root[data-glass-palette="violet"] {
    --gl-g1a: #e0d0fe;
    --gl-g1b: #9a5efb;
    --gl-g1c: #6a11cb;
    --gl-g2a: #c8abfd;
    --gl-g2b: #8334f0;
    --gl-g2c: #610cb4;
    --gl-g3a: #ede5fe;
    --gl-g3b: #ab7cfc;
    --gl-g3c: #7923e1;
    --gd-g1a: #bb92fc;
    --gd-g1b: #812ad4;
    --gd-g1c: #3b0c5a;
    --gd-g2a: #a46df2;
    --gd-g2b: #6c1eb4;
    --gd-g2c: #29083f;
    --gd-g3a: #d3b6fd;
    --gd-g3b: #8f3fe2;
    --gd-g3c: #471070;
    --gl-tube-shine: rgba(255, 255, 255, .45);
    --gl-tube-shadow: rgba(58, 4, 98, 0.35);
    --gd-tube-shine: rgba(222, 201, 254, 0.28);
    --gd-tube-shadow: rgba(0, 0, 0, .55);
    --gl-blob: radial-gradient(circle at 32% 28%, #e4d7fe 0%, #a473fb 30%, #7924e9 65%, #6610bf 100%);
    --gd-blob: radial-gradient(circle at 32% 28%, #cdabfd 0%, #8b3edc 30%, #5e179b 65%, #27093e 100%);
    --glass-bg-light: radial-gradient(ellipse 60% 55% at 55% 40%, #8534fa 0%, rgba(133, 52, 250, 0) 70%), radial-gradient(ellipse 50% 50% at 90% 5%, #8d52fb, rgba(141, 82, 251, 0) 70%), linear-gradient(160deg, #690fdb 0%, #660ccc 50%, #5808ac 100%);
    --glass-edge-light: linear-gradient(180deg, color-mix(in srgb, #8d52fb 70%, #690fdb) 0%, #660ccc 45%, #5808ac 100%);
    --glass-bg-light-center: radial-gradient(ellipse 60% 55% at 50% 45%, #8534fa 0%, rgba(133, 52, 250, 0) 70%), radial-gradient(ellipse 50% 50% at 85% 10%, #8d52fb, rgba(141, 82, 251, 0) 70%), linear-gradient(160deg, #690fdb 0%, #660ccc 50%, #5808ac 100%);
    --glass-bg-dark: radial-gradient(ellipse 55% 50% at 55% 40%, rgba(115, 31, 205, 0.35) 0%, rgba(115, 31, 205, 0) 70%), radial-gradient(ellipse 45% 45% at 90% 5%, rgba(143, 68, 240, 0.22), rgba(143, 68, 240, 0) 70%), radial-gradient(ellipse 50% 45% at 10% 95%, rgba(216, 64, 209, 0.18), rgba(216, 64, 209, 0) 70%), linear-gradient(160deg, #1f0832 0%, #160521 55%, #09020f 100%);
    --glass-edge-dark: linear-gradient(180deg, #1f0832 0%, #160521 50%, #09020f 100%);
    --glass-body-light: #660ccc;
    --glass-body-dark: #160521;
    --glass-navy: #320c5c;
    --glass-navy-hover: #401075;
    --fx-band-light: #b58ffc;
    --fx-band-dark: #7f33c5;
    --fx-glow-dark: rgba(180, 130, 252, 0.3);
}

:root[data-glass-palette="green"] {
    --gl-g1a: #aefbcd;
    --gl-g1b: #48f595;
    --gl-g1c: #14b66d;
    --gl-g2a: #8df9bb;
    --gl-g2b: #24e983;
    --gl-g2c: #0fa163;
    --gl-g3a: #c1fcd9;
    --gl-g3b: #63f7a3;
    --gl-g3c: #21ce7b;
    --gd-g1a: #76f8b1;
    --gd-g1b: #2abf81;
    --gd-g1c: #0d513a;
    --gd-g2a: #58eb9e;
    --gd-g2b: #1fa26c;
    --gd-g2c: #093828;
    --gd-g3a: #97fac5;
    --gd-g3b: #30da8e;
    --gd-g3c: #116447;
    --gl-tube-shine: rgba(255, 255, 255, .45);
    --gl-tube-shadow: rgba(6, 87, 58, 0.35);
    --gd-tube-shine: rgba(168, 250, 207, 0.28);
    --gd-tube-shadow: rgba(0, 0, 0, .55);
    --gl-blob: radial-gradient(circle at 32% 28%, #b4fbd0 0%, #5af69e 30%, #1cdb7c 65%, #13ac68 100%);
    --gd-blob: radial-gradient(circle at 32% 28%, #8df9c1 0%, #30d48a 30%, #198b5e 65%, #0a3727 100%);
    --glass-bg-light: radial-gradient(ellipse 60% 55% at 55% 40%, #22f386 0%, rgba(34, 243, 134, 0) 70%), radial-gradient(ellipse 50% 50% at 90% 5%, #3ef58a, rgba(62, 245, 138, 0) 70%), linear-gradient(160deg, #13c46d 0%, #10b769 50%, #0c9a5a 100%);
    --glass-edge-light: linear-gradient(180deg, color-mix(in srgb, #3ef58a 70%, #13c46d) 0%, #10b769 45%, #0c9a5a 100%);
    --glass-bg-light-center: radial-gradient(ellipse 60% 55% at 50% 45%, #22f386 0%, rgba(34, 243, 134, 0) 70%), radial-gradient(ellipse 50% 50% at 85% 10%, #3ef58a, rgba(62, 245, 138, 0) 70%), linear-gradient(160deg, #13c46d 0%, #10b769 50%, #0c9a5a 100%);
    --glass-bg-dark: radial-gradient(ellipse 55% 50% at 55% 40%, rgba(32, 185, 116, 0.35) 0%, rgba(32, 185, 116, 0) 70%), radial-gradient(ellipse 45% 45% at 90% 5%, rgba(50, 234, 142, 0.22), rgba(50, 234, 142, 0) 70%), radial-gradient(ellipse 50% 45% at 10% 95%, rgba(50, 190, 208, 0.18), rgba(50, 190, 208, 0) 70%), linear-gradient(160deg, #082d1f 0%, #051e15 55%, #020d09 100%);
    --glass-edge-dark: linear-gradient(180deg, #082d1f 0%, #051e15 50%, #020d09 100%);
    --glass-body-light: #10b769;
    --glass-body-dark: #051e15;
    --glass-navy: #0d5333;
    --glass-navy-hover: #116941;
    --fx-band-light: #74f8ab;
    --fx-band-dark: #32b27d;
    --fx-glow-dark: rgba(104, 247, 173, 0.3);
}

:root[data-glass-palette="red"] {
    --gl-g1a: #fdbecb;
    --gl-g1b: #fb516b;
    --gl-g1c: #c3101a;
    --gl-g2a: #fc9bac;
    --gl-g2b: #ef2940;
    --gl-g2c: #ac0c10;
    --gl-g3a: #fed2da;
    --gl-g3b: #fb6e85;
    --gl-g3c: #dc1e2d;
    --gd-g1a: #fc8294;
    --gd-g1b: #cc282b;
    --gd-g1c: #56110c;
    --gd-g2a: #f06172;
    --gd-g2b: #ad1d1e;
    --gd-g2c: #3c0b08;
    --gd-g3a: #fda5b0;
    --gd-g3b: #e0353d;
    --gd-g3c: #6b1410;
    --gl-tube-shine: rgba(255, 255, 255, .45);
    --gl-tube-shadow: rgba(94, 8, 4, 0.35);
    --gd-tube-shine: rgba(253, 184, 193, 0.28);
    --gd-tube-shadow: rgba(0, 0, 0, .55);
    --gl-blob: radial-gradient(circle at 32% 28%, #fec5d1 0%, #fb647e 30%, #e81a2f 65%, #b80f16 100%);
    --gd-blob: radial-gradient(circle at 32% 28%, #fc9ba6 0%, #da353d 30%, #941717 65%, #3b0b09 100%);
    --glass-bg-light: radial-gradient(ellipse 60% 55% at 55% 40%, #f92842 0%, rgba(249, 40, 66, 0) 70%), radial-gradient(ellipse 50% 50% at 90% 5%, #fa4567, rgba(250, 69, 103, 0) 70%), linear-gradient(160deg, #d20f21 0%, #c40c18 50%, #a5080f 100%);
    --glass-edge-light: linear-gradient(180deg, color-mix(in srgb, #fa4567 70%, #d20f21) 0%, #c40c18 45%, #a5080f 100%);
    --glass-bg-light-center: radial-gradient(ellipse 60% 55% at 50% 45%, #f92842 0%, rgba(249, 40, 66, 0) 70%), radial-gradient(ellipse 50% 50% at 85% 10%, #fa4567, rgba(250, 69, 103, 0) 70%), linear-gradient(160deg, #d20f21 0%, #c40c18 50%, #a5080f 100%);
    --glass-bg-dark: radial-gradient(ellipse 55% 50% at 55% 40%, rgba(197, 29, 38, 0.35) 0%, rgba(197, 29, 38, 0) 70%), radial-gradient(ellipse 45% 45% at 90% 5%, rgba(240, 56, 74, 0.22), rgba(240, 56, 74, 0) 70%), radial-gradient(ellipse 50% 45% at 10% 95%, rgba(214, 136, 55, 0.18), rgba(214, 136, 55, 0) 70%), linear-gradient(160deg, #300808 0%, #200605 55%, #0e0202 100%);
    --glass-edge-dark: linear-gradient(180deg, #300808 0%, #200605 50%, #0e0202 100%);
    --glass-body-light: #c40c18;
    --glass-body-dark: #200605;
    --glass-navy: #580c10;
    --glass-navy-hover: #710f15;
    --fx-band-light: #fc7f96;
    --fx-band-dark: #bd3133;
    --fx-glow-dark: rgba(251, 115, 132, 0.3);
}

:root[data-glass-palette="gold"] {
    --gl-g1a: #ffc898;
    --gl-g1b: #ff9a31;
    --gl-g1c: #b7740b;
    --gl-g2a: #ffb976;
    --gl-g2b: #f38c0e;
    --gl-g2c: #a26a07;
    --gl-g3a: #ffd2aa;
    --gl-g3b: #ffa54c;
    --gl-g3c: #ce8217;
    --gd-g1a: #ffb25f;
    --gd-g1b: #bf8721;
    --gd-g1c: #513e09;
    --gd-g2a: #f2a243;
    --gd-g2b: #a27217;
    --gd-g2c: #382b06;
    --gd-g3a: #ffc480;
    --gd-g3b: #e2971d;
    --gd-g3c: #644b0c;
    --gl-tube-shine: rgba(255, 255, 255, .45);
    --gl-tube-shadow: rgba(88, 63, 2, 0.35);
    --gd-tube-shine: rgba(255, 204, 145, 0.28);
    --gd-tube-shadow: rgba(0, 0, 0, .55);
    --gl-blob: radial-gradient(circle at 32% 28%, #ffca9e 0%, #ffa143 30%, #dc8411 65%, #ac6f0a 100%);
    --gd-blob: radial-gradient(circle at 32% 28%, #ffc176 0%, #d69122 30%, #8b6312 65%, #372907 100%);
    --glass-bg-light: radial-gradient(ellipse 60% 55% at 55% 40%, #ff900b 0%, rgba(255, 144, 11, 0) 70%), radial-gradient(ellipse 50% 50% at 90% 5%, #ff8f26, rgba(255, 143, 38, 0) 70%), linear-gradient(160deg, #c57509 0%, #b87106 50%, #9b6104 100%);
    --glass-edge-light: linear-gradient(180deg, color-mix(in srgb, #ff8f26 70%, #c57509) 0%, #b87106 45%, #9b6104 100%);
    --glass-bg-light-center: radial-gradient(ellipse 60% 55% at 50% 45%, #ff900b 0%, rgba(255, 144, 11, 0) 70%), radial-gradient(ellipse 50% 50% at 85% 10%, #ff8f26, rgba(255, 143, 38, 0) 70%), linear-gradient(160deg, #c57509 0%, #b87106 50%, #9b6104 100%);
    --glass-bg-dark: radial-gradient(ellipse 55% 50% at 55% 40%, rgba(185, 123, 23, 0.35) 0%, rgba(185, 123, 23, 0) 70%), radial-gradient(ellipse 45% 45% at 90% 5%, rgba(243, 150, 28, 0.22), rgba(243, 150, 28, 0) 70%), radial-gradient(ellipse 50% 45% at 10% 95%, rgba(178, 209, 37, 0.18), rgba(178, 209, 37, 0) 70%), linear-gradient(160deg, #2d2006 0%, #1e1704 55%, #0d0a02 100%);
    --glass-edge-dark: linear-gradient(180deg, #2d2006 0%, #1e1704 50%, #0d0a02 100%);
    --glass-body-light: #b87106;
    --glass-body-dark: #1e1704;
    --glass-navy: #533609;
    --glass-navy-hover: #6a450b;
    --fx-band-light: #ffac5d;
    --fx-band-dark: #b18229;
    --fx-glow-dark: rgba(255, 176, 81, 0.3);
}

@keyframes v3Float {
    0%, 100% { transform: translate(0, 0) rotate(var(--r, 0deg)); }
    50% { transform: translate(0, -18px) rotate(calc(var(--r, 0deg) + 4deg)); }
}

/* ---------- Fond ---------- */
.glass-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background: var(--glass-bg-light);
}

.glass-bg--center { background: var(--glass-bg-light-center); }

.glass-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .35s ease;
    background: var(--glass-bg-dark);
}

/* Pendant la vague, le fond de base bascule instantanement (il est
   revele progressivement par la vague, pas par un fondu). */
.theme-fx .glass-bg::before { transition: none; }

:root[data-theme="dark"] .glass-bg::before { opacity: 1; }

/* Photo de fond choisie dans Parametres : couvre toute la page (derriere
   la navbar aussi), par-dessus le degrade et les formes. */
.glass-photo {
    position: absolute;
    inset: 0;
    z-index: 3;
    background-size: cover;
    background-position: center;
}

.glass-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(7, 13, 24, .35) 0%, rgba(7, 13, 24, .6) 25%, rgba(7, 13, 24, .78) 45%, rgba(7, 13, 24, .85) 100%);
}

.glass-shapes {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.glass-tube {
    position: absolute;
    overflow: visible;
    filter: drop-shadow(0 18px 24px var(--tube-shadow));
    animation: v3Float var(--dur, 7s) ease-in-out infinite;
}


.glass-tube.is-blur-2 { filter: drop-shadow(0 18px 24px var(--tube-shadow)) blur(2px); }
.glass-tube.is-blur-3 { filter: drop-shadow(0 18px 24px var(--tube-shadow)) blur(3px); }
.glass-tube .tube-shine { stroke: var(--tube-shine); }

.glass-blob {
    position: absolute;
    border-radius: 50%;
    background: var(--blob-bg);
    box-shadow: 0 24px 40px var(--tube-shadow);
    animation: v3Float var(--dur, 6s) ease-in-out infinite;
}

.glass-blob::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--blob-bg-dark);
    opacity: var(--blob-dark);
}

/* ---------- Animation de changement de theme (vague) ----------
   Le nouveau theme est applique tout de suite en dessous ; une copie de
   l'ancien fond le recouvre puis se retire derriere une vague diagonale.
   La vague est decoupee une seule fois (clip-path fixe) et seule sa
   position est animee (transform, sur le GPU) : aucune repeinture par
   frame, donc aucune micro-saccade. Voir runThemeTransition() dans
   src/bdv2_glass.js. */
.glass-fx {
    position: absolute;
    inset: 0;
    z-index: 2; /* au-dessus des formes : elles changent de couleur AVEC la vague */
    pointer-events: none;
    contain: strict;
}

.glass-fx-move {
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 1px;
    overflow: visible;
    will-change: transform;
    backface-visibility: hidden;
}

.glass-fx-fill {
    position: absolute;
    will-change: auto;
}

.glass-fx-old {
    position: absolute;
    left: 0;
    top: 0;
    will-change: transform;
    backface-visibility: hidden;
}

.glass-fx-band > .glass-fx-fill { background: var(--fx-band); }
.glass-fx-glow > .glass-fx-fill { background: var(--fx-glow); }
/* Le fond et les couleurs de l'ancienne copie sont figes en inline par
   src/bdv2_glass.js (valeurs calculees juste avant le changement). */

@media (prefers-reduced-motion: reduce) {
    .glass-tube, .glass-blob { animation: none; }
}

/* Option "Formes en mouvement" desactivee (Parametres) */
:root[data-glass-static="1"] .glass-tube,
:root[data-glass-static="1"] .glass-blob { animation: none; }

/* Pendant la vague, chaque bouton change de couleur au passage de la vague
   (voir swapControls() dans src/bdv2_glass.js). */
.glass-fx-swap {
    transition: background-color .22s ease, border-color .22s ease, color .22s ease, box-shadow .22s ease !important;
}

/* Champs / boutons de la connexion : suivent la vague en douceur */
.theme-fx .glass-login input,
.theme-fx .glass-login-submit,
.theme-fx .glass-login-pwd button {
    transition: background .9s ease, border-color .9s ease, color .9s ease;
}

/* ---------- Bouton theme ---------- */
.bdv2-theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .35);
    background: linear-gradient(145deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .05));
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    box-shadow: 0 10px 24px rgba(2, 30, 90, .18), inset 0 1.5px 0 rgba(255, 255, 255, .7);
    color: #fff;
    font: 600 13px var(--glass-font);
    white-space: nowrap;
    cursor: pointer;
    transition: background .2s ease;
}

.bdv2-theme-toggle:hover {
    background: linear-gradient(145deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .1));
}

.bdv2-theme-toggle svg { width: 16px; height: 16px; flex-shrink: 0; }
.bdv2-theme-toggle .when-dark { display: none; }
:root[data-theme="dark"] .bdv2-theme-toggle .when-dark { display: inline; }
:root[data-theme="dark"] .bdv2-theme-toggle .when-light { display: none; }

/* ---------- Bouton theme (icone seule, a gauche de la photo de profil) ---------- */
.bdv2-theme-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    color: #c9d4e3;
    cursor: pointer;
    transition: color .2s ease, transform .2s ease;
}

.bdv2-theme-icon:hover { color: #fff; transform: rotate(-12deg); }
.bdv2-theme-icon svg { width: 20px; height: 20px; }
.bdv2-theme-icon .when-dark { display: none; }
:root[data-theme="dark"] .bdv2-theme-icon .when-dark { display: block; }
:root[data-theme="dark"] .bdv2-theme-icon .when-light { display: none; }
body.bdv2-glass .bdv2-theme-icon { color: #fff; }

/* ============================================================
   En-tete partage (navbar/header.php) sur les pages "Glass"
   (body.bdv2-glass : accueil, parametres)
   ============================================================ */
/* ---------- Header ---------- */
body.bdv2-glass .bdv2-header-actions { gap: 14px; }

body.bdv2-glass .bdv2-header-actions > span:not(.bdv2-duty-pill) {
    color: rgba(255, 255, 255, .85) !important;
    text-shadow: 0 1px 8px rgba(2, 30, 90, .35);
}

body.bdv2-glass .bdv2-duty-pill,
body.bdv2-glass .bdv2-duty-pill.is-on,
body.bdv2-glass .bdv2-duty-pill.is-off {
    padding: 9px 18px;
    border: 1px solid rgba(255, 255, 255, .35);
    background: linear-gradient(145deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .05));
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    box-shadow: 0 10px 24px rgba(2, 30, 90, .18), inset 0 1.5px 0 rgba(255, 255, 255, .7), inset 1px 0 0 rgba(255, 255, 255, .3), inset 0 -8px 14px -8px rgba(255, 255, 255, .25);
    color: #fff;
    font: 600 13px var(--glass-font);
    transition: background .2s, opacity .2s;
}

body.bdv2-glass .bdv2-duty-pill.is-dim { opacity: .55; }
body.bdv2-glass .bdv2-duty-pill.is-dim:hover {
    opacity: .85;
    background: linear-gradient(145deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .1));
}

body.bdv2-glass .bdv2-duty-dot,
body.bdv2-glass .bdv2-duty-diamond {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    transform: none;
}

body.bdv2-glass .bdv2-duty-dot {
    background: #4ade80;
    box-shadow: 0 0 10px #4ade80, 0 0 0 3px rgba(74, 222, 128, .25);
}

body.bdv2-glass .bdv2-duty-diamond {
    background: #f87171;
    box-shadow: 0 0 10px #f87171, 0 0 0 3px rgba(248, 113, 113, .25);
}

body.bdv2-glass .bdv2-clock-time { color: #fff; }
body.bdv2-glass .bdv2-clock-date { color: rgba(255, 255, 255, .8); }

body.bdv2-glass .notifications-trigger,
body.bdv2-glass .vip-recap-trigger,
body.bdv2-glass .bdv2-header-actions > a[href*="logout"] {
    color: #fff !important;
}

body.bdv2-glass .notifications-badge {
    background: #e53935 !important;
    color: #fff !important;
    border: 0 !important;
    font-weight: 700;
}

body.bdv2-glass .bdv2-avatar {
    background: rgba(255, 255, 255, .2);
    border: 2px solid rgba(255, 255, 255, .6);
    color: #fff;
}

/* ============================================================
   Barres de defilement - UNE seule definition pour toutes les pages
   de la nouvelle DA (accueil, compta, catalogue, parametres...).
   - Barre de la page : piste = degrade du bord du fond, pilule blanche.
   - Barres internes (tableaux, cases, menus) : piste transparente,
     meme pilule, un peu plus fine.
   Les anciennes feuilles (bennys-theme.css, accueil.css, compta...)
   imposent leurs propres couleurs : on les neutralise ici.
   ============================================================ */

/* Chrome / Edge / Safari : style "pilule" via les pseudo-elements.
   scrollbar-color doit rester sur "auto", sinon Chrome ignore ce style. */
@supports selector(::-webkit-scrollbar) {
    html:root,
    html:root > body,
    html:root > body * {
        scrollbar-color: auto !important;
        scrollbar-width: auto !important;
    }
}

/* La barre de la page vient de <html> ou de <body> selon la page
   (quand <body> a un overflow, c'est lui qui la porte) : on style les deux. */
html::-webkit-scrollbar,
html:root > body::-webkit-scrollbar { width: 12px; height: 12px; }

html::-webkit-scrollbar-track,
html:root > body::-webkit-scrollbar-track { background: var(--glass-edge-light); border: 0; border-radius: 0; }

:root[data-theme="dark"]::-webkit-scrollbar-track,
:root[data-theme="dark"] > body::-webkit-scrollbar-track { background: var(--glass-edge-dark); }

html:root > body *::-webkit-scrollbar { width: 10px !important; height: 10px !important; }
html:root > body *::-webkit-scrollbar-track { background: transparent !important; border: 0 !important; box-shadow: none !important; }
/* La piste ne touche plus les bords : la barre reste dans les coins arrondis des cartes */
html:root > body *::-webkit-scrollbar-track:vertical { margin-block: 22px !important; }
html:root > body *::-webkit-scrollbar-track:horizontal { margin-inline: 22px !important; }

html::-webkit-scrollbar-thumb,
html:root > body::-webkit-scrollbar-thumb,
html:root > body *::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .5) !important;
    border: 3px solid transparent !important;
    border-radius: 999px !important;
    background-clip: padding-box !important;
    box-shadow: none !important;
    min-height: 40px;
}

html::-webkit-scrollbar-thumb:hover,
html:root > body::-webkit-scrollbar-thumb:hover,
html:root > body *::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .72) !important; background-clip: padding-box !important; }

:root[data-theme="dark"]::-webkit-scrollbar-thumb,
:root[data-theme="dark"] > body::-webkit-scrollbar-thumb,
:root[data-theme="dark"] > body *::-webkit-scrollbar-thumb { background: rgba(160, 195, 255, .38) !important; background-clip: padding-box !important; }

:root[data-theme="dark"]::-webkit-scrollbar-thumb:hover,
:root[data-theme="dark"] > body::-webkit-scrollbar-thumb:hover,
:root[data-theme="dark"] > body *::-webkit-scrollbar-thumb:hover { background: rgba(175, 208, 255, .58) !important; background-clip: padding-box !important; }

html::-webkit-scrollbar-corner,
html:root > body::-webkit-scrollbar-corner,
html:root > body *::-webkit-scrollbar-corner { background: transparent !important; }

html::-webkit-scrollbar-button,
html:root > body::-webkit-scrollbar-button,
html:root > body *::-webkit-scrollbar-button { display: none; width: 0; height: 0; }

/* Firefox (pas de pseudo-elements) : memes couleurs, barre fine */
@supports not selector(::-webkit-scrollbar) {
    html:root,
    html:root > body,
    html:root > body * {
        scrollbar-width: thin !important;
        scrollbar-color: rgba(255, 255, 255, .5) transparent !important;
    }
    html:root[data-theme="dark"],
    html:root[data-theme="dark"] > body,
    html:root[data-theme="dark"] > body * {
        scrollbar-color: rgba(160, 195, 255, .38) transparent !important;
    }
}

/* ============================================================
   Animations de connexion / deconnexion (DA des formes)
   - Scene centrale : diamant + anneaux-tubes 3D qui se dessinent
     autour + bulles qui popent + "BENNY'S".
   - Transition : un tube 3D geant traverse l'ecran en diagonale
     (animation de transform uniquement => fluide) et le recouvre ;
     sur la page suivante il continue sa course et la revele.
   Moteur : playIntro() / playOutro() dans src/bdv2_glass.js.
   ============================================================ */
:root {
    /* Diagonale de l'ecran et angle de la diagonale (repli si hypot/atan2 non geres) */
    --gsD: 142vmax;
    --gsD: hypot(100vw, 100vh);
    --gsA: 32deg;
    --gsA: atan2(100vh, 100vw);
    --gs-tube-main:
        linear-gradient(to bottom, transparent 12%, rgba(255, 255, 255, .42) 15%, rgba(255, 255, 255, .14) 20%, transparent 24%),
        linear-gradient(to bottom, var(--g3a) 0%, var(--g1b) 36%, var(--g2b) 64%, var(--g1c) 100%);
    --gs-tube-accent:
        linear-gradient(to bottom, transparent 14%, rgba(255, 255, 255, .5) 20%, transparent 32%),
        linear-gradient(to bottom, var(--g1a) 0%, var(--g3b) 45%, var(--g2c) 100%);
}

@keyframes gsCover {
    from { transform: translate(-50%, -50%) rotate(var(--gsA)) translateX(calc(var(--gsD) * -2.3)); }
    to { transform: translate(-50%, -50%) rotate(var(--gsA)) translateX(0); }
}
@keyframes gsReveal {
    from { transform: translate(-50%, -50%) rotate(var(--gsA)) translateX(0); }
    to { transform: translate(-50%, -50%) rotate(var(--gsA)) translateX(calc(var(--gsD) * 2.3)); }
}
@keyframes gsCoverAccent {
    from { transform: translate(-50%, -50%) rotate(var(--gsA)) translate(calc(var(--gsD) * -2), calc(var(--gsD) * -.58)); }
    to { transform: translate(-50%, -50%) rotate(var(--gsA)) translate(calc(var(--gsD) * .35), calc(var(--gsD) * -.58)); }
}
@keyframes gsRevealAccent {
    from { transform: translate(-50%, -50%) rotate(var(--gsA)) translate(calc(var(--gsD) * -.4), calc(var(--gsD) * .58)); }
    to { transform: translate(-50%, -50%) rotate(var(--gsA)) translate(calc(var(--gsD) * 2.5), calc(var(--gsD) * .58)); }
}

/* Tube geant (element .gs-tube, ou pseudo-elements de <html> a l'arrivee) */
.gs-tube,
html.glass-reveal::after {
    content: "";
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 10000;
    width: calc(var(--gsD) * 3);
    height: calc(var(--gsD) * 1.2);
    border-radius: calc(var(--gsD) * .6);
    background: var(--gs-tube-main);
    box-shadow: 0 0 80px rgba(0, 10, 40, .35);
    transform: translate(-50%, -50%) rotate(var(--gsA)) translateX(0);
    pointer-events: none;
    will-change: transform;
    backface-visibility: hidden;
}

.gs-tube--accent {
    z-index: 9999;
    height: calc(var(--gsD) * .3);
    border-radius: calc(var(--gsD) * .15);
    background: var(--gs-tube-accent);
}

.gs-tube { transform: translate(-50%, -50%) rotate(var(--gsA)) translateX(calc(var(--gsD) * -2.3)); }
.gs-tube.is-go { animation: gsCover 1s cubic-bezier(.65, 0, .35, 1) forwards; }
.gs-tube--accent { transform: translate(-50%, -50%) rotate(var(--gsA)) translate(calc(var(--gsD) * -2), calc(var(--gsD) * -.58)); }
.gs-tube--accent.is-go { animation: gsCoverAccent 1s cubic-bezier(.65, 0, .35, 1) -.06s forwards; }

/* Arrivee : le tube couvre la page des le premier affichage, puis repart */
/* Le diamant reste a l'ecran pendant le chargement de la page suivante,
   par-dessus le tube, puis s'envole quand le tube repart. */
html.glass-reveal::before {
    content: "";
    position: fixed;
    left: 50%;
    top: 44%;
    z-index: 10001;
    width: 140px;
    height: 140px;
    background: url("diamond.webp") center / contain no-repeat;
    filter: drop-shadow(0 0 30px rgba(255, 255, 255, .55)) drop-shadow(0 18px 30px rgba(0, 20, 70, .45));
    transform: translate(-50%, -50%);
    pointer-events: none;
    will-change: transform, opacity;
}
@keyframes gsLogoAway {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1.9) rotate(18deg); opacity: 0; }
}
@media (max-width: 600px), (max-height: 700px) {
    html.glass-reveal::before { width: 98px; height: 98px; }
}
html.glass-reveal.glass-reveal-go::after { animation: gsReveal 1.15s cubic-bezier(.65, 0, .35, 1) .05s forwards; }
html.glass-reveal.glass-reveal-go::before { animation: gsLogoAway .8s cubic-bezier(.4, 0, .2, 1) .15s forwards; }

/* Arrivee directe : la page d'arrivee est chargee, la scene se joue par-dessus,
   puis le tube traverse l'ecran d'un seul trait et la page apparait. */
@keyframes gsSweep {
    from { transform: translate(-50%, -50%) rotate(var(--gsA)) translateX(calc(var(--gsD) * -2.3)); }
    to { transform: translate(-50%, -50%) rotate(var(--gsA)) translateX(calc(var(--gsD) * 2.3)); }
}
@keyframes gsSweepAccent {
    from { transform: translate(-50%, -50%) rotate(var(--gsA)) translate(calc(var(--gsD) * -2), calc(var(--gsD) * -.58)); }
    to { transform: translate(-50%, -50%) rotate(var(--gsA)) translate(calc(var(--gsD) * 2.6), calc(var(--gsD) * -.58)); }
}
@keyframes gsVeilOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes gsPendingFail { to { opacity: 0; visibility: hidden; } }
@keyframes gsPendingShow { to { opacity: 1; } }


/* Avant que le script ne construise la scene : meme voile, contenu masque. */
/* ---------- Rideau "vague" (connexion / deconnexion) ----------
   Meme vague que le changement de theme : elle traverse l'ecran du coin
   haut-gauche au coin bas-droit avec le fond de la DA (degrade + formes).
   html.glass-scene-pending::before = ecran deja couvert au premier rendu
   de la page d'arrivee, en attendant que le script lance la vague. */
.gs-wave {
    position: fixed;
    inset: 0;
    z-index: 9995;
    overflow: hidden;
    pointer-events: all;
    contain: strict;
}

.gs-wave-bg,
.gs-leave,
.gs-leave-bg,
html.glass-scene-pending::before {
    background: var(--glass-bg-light);
}

:root[data-theme="dark"] .gs-wave-bg,
:root[data-theme="dark"] .gs-leave,
:root[data-theme="dark"] .gs-leave-bg,
:root[data-theme="dark"].glass-scene-pending::before {
    background: var(--glass-bg-dark);
}

/* Depart : le fond apparait en fondu avant le changement de page */
.gs-leave {
    position: fixed;
    inset: 0;
    z-index: 9996;
    opacity: 0;
    pointer-events: all;
    transition: opacity .4s cubic-bezier(.4, 0, .2, 1);
}
.gs-leave.is-on { opacity: 1; }

/* Depart avec le fond de la page : seul le degrade change (fondu), les
   formes restent ; le contenu et les formes propres a la page s'effacent. */
.gs-leave-bg {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .4s cubic-bezier(.4, 0, .2, 1);
}
.gs-leave-bg.is-on { opacity: 1; }

html.gs-leaving .bdv2-sidebar,
html.gs-leaving .bdv2-main,
html.gs-leaving .glass-photo,
html.gs-leaving .glass-shape-extra,
html.gs-leaving .glass-login-stage,
html.gs-leaving .glass-login-theme,
html.gs-leaving .glass-login-copyright {
    opacity: 0 !important;
    transition: opacity .35s ease !important;
    pointer-events: none;
}

/* Fond de la vague : formes au-dessus du degrade */
.gs-wave-bg > .glass-shapes { z-index: 1; }

.gs-wave-bg { overflow: hidden; }

/* Scene (diamant + anneaux) posee DANS le fond de la vague : la vague
   l'emporte en decouvrant la page. */
.gs-fx.gs-fx--in-wave { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.gs-fx--in-wave .gs-veil { display: none; }

html.glass-scene-pending::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9995;
    pointer-events: all;
    /* Securite : si le script ne se lance pas, la couverture s'efface. */
    animation: gsPendingFail .4s ease 6s forwards;
}
html.glass-scene-pending .bdv2-sidebar,
html.glass-scene-hold .bdv2-sidebar,
html.glass-scene-pending .bdv2-header,
html.glass-scene-hold .bdv2-header,
html.glass-scene-pending .bdv2-hero,
html.glass-scene-hold .bdv2-hero,
html.glass-scene-pending .compta-hero,
html.glass-scene-hold .compta-hero,
html.glass-scene-pending .bdv2-widget,
html.glass-scene-hold .bdv2-widget,
html.glass-scene-pending .compta-main-table,
html.glass-scene-hold .compta-main-table,
html.glass-scene-pending .glass-login-card,
html.glass-scene-hold .glass-login-card,
html.glass-scene-pending .glass-login-theme,
html.glass-scene-hold .glass-login-theme,
html.glass-scene-pending .glass-login-copyright,
html.glass-scene-hold .glass-login-copyright {
    opacity: 0;
    animation: gsPendingShow .3s ease 6s forwards;
}

/* ---------- Scene centrale ---------- */
@keyframes gsVeil { from { opacity: 0; } to { opacity: 1; } }
@keyframes gsLogo {
    0% { transform: translate(-50%, -50%) scale(.2) rotate(-120deg); opacity: 0; }
    45% { transform: translate(-50%, -50%) scale(1.12) rotate(8deg); opacity: 1; }
    70%, 100% { transform: translate(-50%, -50%) scale(1) rotate(0); opacity: 1; }
}
@keyframes gsFloat { 0%, 100% { margin-top: 0; } 50% { margin-top: -8px; } }
@keyframes gsDraw { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } }
@keyframes gsSpin { from { transform: rotate(var(--r0, 0deg)); } to { transform: rotate(calc(var(--r0, 0deg) + 360deg)); } }
@keyframes gsPop {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    60% { transform: translate(-50%, -50%) scale(1.18); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
@keyframes gsTitle {
    from { opacity: 0; letter-spacing: .9em; filter: blur(8px); }
    to { opacity: 1; letter-spacing: .32em; filter: blur(0); }
}
@keyframes gsUp { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes gsStageOut { to { opacity: 0; transform: translate(-50%, -50%) scale(1.25); filter: blur(4px); } }

.gs-fx {
    position: fixed;
    inset: 0;
    z-index: 9990;
    pointer-events: all;
    overflow: hidden;
    color: #fff;
    font-family: var(--glass-font);
}

.gs-veil {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 46%, rgba(255, 255, 255, .12), rgba(0, 12, 45, .34) 72%);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    animation: gsVeil .5s ease both;
}

.gs-stage {
    position: absolute;
    left: 50%;
    top: 44%;
    width: 560px;
    height: 560px;
    transform: translate(-50%, -50%);
}

.gs-fx.is-charging .gs-stage { animation: gsCharge .6s cubic-bezier(.3, .7, .3, 1) forwards; }
.gs-fx.is-leaving .gs-stage { animation: gsStageOut .55s cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes gsCharge { 0% { transform: translate(-50%, -50%) scale(1); } 60% { transform: translate(-50%, -50%) scale(.94); } 100% { transform: translate(-50%, -50%) scale(1.04); filter: drop-shadow(0 0 30px rgba(255, 255, 255, .35)); } }
.gs-fx.is-leaving .gs-text { transition: opacity .3s ease; opacity: 0; }

.gs-orbit {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.gs-ring { transform-box: view-box; transform-origin: 0 0; animation: gsSpin var(--spin, 6s) linear infinite; }

.gs-ring path {
    fill: none;
    stroke-linecap: round;
    stroke-dasharray: var(--len) 100;
    stroke-dashoffset: var(--len);
    animation: gsDraw 1.3s cubic-bezier(.3, .7, .3, 1) var(--d, 0s) forwards;
}

.gs-ring .gs-shine { stroke: rgba(255, 255, 255, .45); }
:root[data-theme="dark"] .gs-ring .gs-shine { stroke: rgba(200, 225, 255, .3); }

.gs-blob {
    position: absolute;
    border-radius: 50%;
    background: var(--blob-bg);
    box-shadow: 0 18px 30px var(--tube-shadow);
    opacity: 0;
    animation: gsPop .6s cubic-bezier(.3, 1.4, .5, 1) var(--d, .5s) both;
}

.gs-blob::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--blob-bg-dark);
    opacity: var(--blob-dark);
}

.gs-logo {
    position: absolute;
    left: 50%;
    top: 44%;
    z-index: 10001;
    width: 140px;
    height: 140px;
    object-fit: contain;
    filter: drop-shadow(0 0 30px rgba(255, 255, 255, .55)) drop-shadow(0 18px 30px rgba(0, 20, 70, .45));
    animation: gsLogo 1.4s cubic-bezier(.3, .7, .3, 1) .2s both, gsFloat 2.4s ease-in-out 1.6s infinite;
}

.gs-text { position: absolute; left: 0; right: 0; top: calc(44% + 250px); text-align: center; }

.gs-title {
    font-size: 54px;
    font-weight: 800;
    padding-left: .32em;
    text-shadow: 0 6px 30px rgba(0, 20, 70, .45);
    animation: gsTitle 1.3s cubic-bezier(.2, .7, .3, 1) .75s both;
}

.gs-sub,
.gs-hello {
    position: relative;
    left: 50%;
    display: inline-block;
    white-space: nowrap;
    text-shadow: 0 4px 16px rgba(0, 20, 70, .4);
}

.gs-sub {
    display: block;
    width: max-content;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .38em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .85);
    animation: gsUp .8s ease 1.1s both;
}

.gs-hello {
    display: block;
    width: max-content;
    margin-top: 14px;
    font-size: 17px;
    color: rgba(255, 255, 255, .92);
    animation: gsUp .8s ease 1.35s both;
}

.gs-hello strong { font-weight: 800; color: #fff; }

@media (max-width: 600px), (max-height: 700px) {
    .gs-stage { transform: translate(-50%, -50%) scale(.7); }
    .gs-logo { width: 98px; height: 98px; }
    .gs-text { top: calc(44% + 180px); }
    .gs-title { font-size: 38px; }
}

/* ---------- Contenu de la page d'arrivee (apres le tube) ---------- */
@keyframes giInFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes giInSide { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
@keyframes giInDown { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }
@keyframes giInUp { from { opacity: 0; transform: translateY(28px) scale(.98); } to { opacity: 1; transform: none; } }

html.glass-intro .bdv2-sidebar { animation: giInSide .9s cubic-bezier(.2, .8, .2, 1) .5s both; }
html.glass-intro .bdv2-header { animation: giInDown .8s cubic-bezier(.2, .8, .2, 1) .65s both; }
html.glass-intro .bdv2-hero,
html.glass-intro .compta-hero { animation: giInUp .9s cubic-bezier(.2, .8, .2, 1) .7s both; }
html.glass-intro .bdv2-widget,
html.glass-intro .compta-main-table { animation: giInUp .9s cubic-bezier(.2, .8, .2, 1) .8s both; }
html.glass-intro .bdv2-widget:nth-child(2) { animation-delay: .9s; }
html.glass-intro .bdv2-widget:nth-child(3) { animation-delay: 1s; }
html.glass-intro .bdv2-widget:nth-child(4) { animation-delay: 1.1s; }
html.glass-intro .bdv2-widget:nth-child(5) { animation-delay: 1.2s; }
html.glass-intro .bdv2-widget:nth-child(6) { animation-delay: 1.3s; }

@media (prefers-reduced-motion: reduce) {
    html.glass-intro *, .gs-fx * { animation: none !important; }
    html.glass-reveal::before, html.glass-reveal::after { display: none; }
}

/* ============================================================
   Popup des notifications (cloche du header) - design Glass
   ============================================================ */
html body.bdv2-glass .notifications-dropdown {
    top: calc(100% + 14px);
    right: -8px;
    width: min(360px, calc(100vw - 24px));
    padding: 0 !important;
    overflow: hidden;
    color: #fff;
    border-radius: 22px !important;
    border: 1px solid rgba(255, 255, 255, .32) !important;
    background: linear-gradient(150deg, rgba(40, 110, 230, .95), rgba(12, 60, 170, .97)) !important;
    box-shadow: 0 26px 60px rgba(2, 20, 60, .45), inset 0 1.5px 0 rgba(255, 255, 255, .45) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    transform: translateY(-6px) scale(.98);
    transition: opacity .18s ease, transform .18s cubic-bezier(.2, .8, .2, 1);
    z-index: 9999;
}
html body.bdv2-glass .notifications-menu.is-open .notifications-dropdown { transform: none; }
:root[data-theme="dark"] body.bdv2-glass .notifications-dropdown {
    background: linear-gradient(150deg, rgba(22, 32, 58, .97), rgba(12, 18, 36, .98)) !important;
    border-color: rgba(255, 255, 255, .16) !important;
}
/* petite fleche vers la cloche */
html body.bdv2-glass .notifications-dropdown::before {
    content: "";
    position: absolute;
    top: -6px;
    right: 18px;
    width: 12px;
    height: 12px;
    transform: rotate(45deg);
    background: rgba(40, 110, 230, .95);
    border-left: 1px solid rgba(255, 255, 255, .32);
    border-top: 1px solid rgba(255, 255, 255, .32);
}
:root[data-theme="dark"] body.bdv2-glass .notifications-dropdown::before { background: rgba(22, 32, 58, .97); border-color: rgba(255, 255, 255, .16); }

html body.bdv2-glass .notifications-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 16px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
}
html body.bdv2-glass .notifications-head > div { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
html body.bdv2-glass .notifications-head strong { font-size: 15px; font-weight: 800; }
html body.bdv2-glass .notifications-head span:not(.notifications-total):not(.notifications-head-ico) { font-size: 12px; color: rgba(255, 255, 255, .75); }
html body.bdv2-glass .notifications-head-ico {
    width: 34px; height: 34px; flex: none; border-radius: 11px;
    display: grid; place-items: center;
    background: rgba(255, 255, 255, .16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}
html body.bdv2-glass .notifications-head-ico svg { width: 16px; height: 16px; }
html body.bdv2-glass .notifications-total {
    min-width: 28px; height: 24px; padding: 0 8px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; background: #e53935; color: #fff;
    font-size: 12px; font-weight: 800;
}

html body.bdv2-glass .notifications-summary-row {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 10px 16px 0;
}
html body.bdv2-glass .notifications-summary-row[hidden] { display: none; }
html body.bdv2-glass .notifications-summary-row span {
    padding: 4px 10px; border-radius: 999px;
    background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2);
    font-size: 11.5px; color: rgba(255, 255, 255, .85);
}
html body.bdv2-glass .notifications-summary-row strong { color: #fff; font-weight: 800; }

html body.bdv2-glass .notifications-list {
    display: flex; flex-direction: column; gap: 6px;
    max-height: min(360px, 60vh);
    padding: 12px 12px 14px;
}

html body.bdv2-glass .notification-item {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto 14px;
    align-items: center;
    gap: 10px;
    padding: 9px 10px !important;
    color: #fff;
    text-decoration: none;
    border-radius: 14px !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    background: rgba(255, 255, 255, .08) !important;
    transform: none !important;
    transition: background .15s, border-color .15s;
}
html body.bdv2-glass .notification-item:hover {
    background: rgba(255, 255, 255, .16) !important;
    border-color: rgba(255, 255, 255, .32) !important;
}
html body.bdv2-glass .notification-icon {
    width: 36px; height: 36px; border-radius: 11px;
    display: grid; place-items: center;
    color: #fff !important;
    background: rgba(255, 255, 255, .2) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}
html body.bdv2-glass .notification-icon svg { width: 17px; height: 17px; }
html body.bdv2-glass .notification-absence .notification-icon { background: #f59e0b !important; }
html body.bdv2-glass .notification-quota .notification-icon { background: #10b981 !important; }
html body.bdv2-glass .notification-remontee .notification-icon { background: #a855f7 !important; }
html body.bdv2-glass .notification-vip .notification-icon { background: #ec4899 !important; }
html body.bdv2-glass .notification-chat .notification-icon { background: #f43f5e !important; }
html body.bdv2-glass .notification-copy strong { color: #fff; font-size: 13.5px; font-weight: 800; }
html body.bdv2-glass .notification-copy em { color: rgba(255, 255, 255, .72); font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body.bdv2-glass .notification-count {
    min-width: 26px; height: 22px; padding: 0 7px;
    border-radius: 999px;
    background: #fff !important; color: var(--glass-navy, #0a2a5e) !important;
    font-size: 12px; font-weight: 800;
}
html body.bdv2-glass .notification-go { width: 14px; height: 14px; color: rgba(255, 255, 255, .5); transition: transform .15s, color .15s; }
html body.bdv2-glass .notification-item:hover .notification-go { color: #fff; transform: translateX(2px); }

html body.bdv2-glass .notifications-empty {
    display: flex !important; flex-direction: column; align-items: center; gap: 4px;
    padding: 22px 12px !important; text-align: center;
    border: 1px dashed rgba(255, 255, 255, .25) !important;
    background: rgba(255, 255, 255, .05) !important;
    border-radius: 16px !important;
    color: rgba(255, 255, 255, .75); font-size: 12.5px; font-weight: 600;
}
html body.bdv2-glass .notifications-empty strong { color: #fff; font-size: 14px; font-weight: 800; }
html body.bdv2-glass .notifications-empty-ico {
    width: 40px; height: 40px; margin-bottom: 4px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(16, 185, 129, .85); color: #fff;
}
html body.bdv2-glass .notifications-empty-ico svg { width: 20px; height: 20px; }

/* Le header (notifications, raccourcis, recap VIP) passe toujours au-dessus
   du contenu de la page : les widgets de l'accueil ont leur propre z-index. */
body.bdv2-glass .bdv2-header { position: relative; z-index: 500; }