/* Verre sur fond 3D : une image fixe derrière tout le dashboard (version claire / sombre),
   des blocs presque pleins avec une arête lumineuse, et des panneaux qui flottent.
   Rien ici ne s'applique à la page Banque (data-brand="rivabank"), qui garde son univers. */

:root:not([data-brand="rivabank"]) {
  --backdrop: image-set(url("../assets/bg/glass-light-1920.avif") 1x type("image/avif"), url("../assets/bg/glass-light-3200.avif") 2x type("image/avif"), url("../assets/bg/glass-light-1920.webp") 1x type("image/webp"), url("../assets/bg/glass-light-3200.webp") 2x type("image/webp"));
  /* Voile qui calme l'image derrière le contenu, plus léger en haut à gauche pour laisser respirer le fond. */
  --backdrop-veil: linear-gradient(115deg, rgba(246, 248, 252, 0.18) 0%, rgba(246, 248, 252, 0.42) 55%, rgba(246, 248, 252, 0.5) 100%);
  --grain-opacity: 0.05;

  /* Blocs presque pleins : le fond se voit autour, jamais derrière le texte. */
  --panel: rgba(255, 255, 255, 0.86);
  --header-bg: rgba(255, 255, 255, 0.86);
  --card: rgba(255, 255, 255, 0.9);
  --card-hover: rgba(255, 255, 255, 0.96);
  --line: rgba(15, 23, 42, 0.07);
  --line-strong: rgba(15, 23, 42, 0.12);
  --edge-top: rgba(255, 255, 255, 0.95);
  --highlight: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.05), 0 18px 40px -22px rgba(15, 23, 42, 0.3);
  --blur: blur(26px) saturate(170%);
  --float-gap: 12px;
}

:root[data-theme="dark"]:not([data-brand="rivabank"]) {
  --backdrop: image-set(url("../assets/bg/glass-dark-1920.avif") 1x type("image/avif"), url("../assets/bg/glass-dark-3200.avif") 2x type("image/avif"), url("../assets/bg/glass-dark-1920.webp") 1x type("image/webp"), url("../assets/bg/glass-dark-3200.webp") 2x type("image/webp"));
  --backdrop-veil: linear-gradient(115deg, rgba(5, 6, 9, 0.2) 0%, rgba(5, 6, 9, 0.46) 55%, rgba(5, 6, 9, 0.56) 100%);
  --grain-opacity: 0.07;
  --bg: #07080b;

  /* Graphite neutre (plus de teinte marine) : le bleu reste réservé à l'accent. */
  --panel: rgba(17, 19, 24, 0.86);
  --header-bg: rgba(14, 16, 20, 0.84);
  --card: rgba(20, 22, 28, 0.88);
  --card-hover: rgba(26, 29, 36, 0.93);
  --well: rgba(255, 255, 255, 0.03);
  --hover: rgba(255, 255, 255, 0.06);
  --chip: rgba(255, 255, 255, 0.08);
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);
  --edge-top: rgba(255, 255, 255, 0.2);
  --highlight: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35), 0 24px 48px -28px rgba(0, 0, 0, 0.8);
  --shadow-pop: 0 30px 70px -20px rgba(0, 0, 0, 0.85);
  --blur: blur(28px) saturate(150%);
  --select-bg: #121419;
  --chart-surface: #14161b;
  --tip-bg: rgba(16, 18, 23, 0.94);
  --panel-solid: #121419;
}

/* ---------- Fond : image fixe + voile + grain fin (remplace lueurs, taches et trame de points) ---------- */
:root:not([data-brand="rivabank"]) .aurora {
  background: var(--backdrop-veil), url("../assets/bg/glass-light-1920.webp") center / cover no-repeat, var(--bg);
}
:root[data-theme="dark"]:not([data-brand="rivabank"]) .aurora {
  background: var(--backdrop-veil), url("../assets/bg/glass-dark-1920.webp") center / cover no-repeat, var(--bg);
}
/* Navigateurs récents : AVIF/WebP et version 2x choisis automatiquement. */
@supports (background-image: image-set(url("x.avif") 1x type("image/avif"))) {
  :root:not([data-brand="rivabank"]) .aurora,
  :root[data-theme="dark"]:not([data-brand="rivabank"]) .aurora {
    background: var(--backdrop-veil), var(--backdrop) center / cover no-repeat, var(--bg);
  }
}
:root:not([data-brand="rivabank"]) .aurora__blob { display: none; }
:root:not([data-brand="rivabank"]) .aurora::after {
  mask-image: none; opacity: var(--grain-opacity); background-size: 180px 180px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* L'entrée de page (view-in) ne doit pas rester « active » une fois finie : sinon Chrome isole le
   conteneur et le flou des cartes ne voit plus l'image de fond (on verrait les arêtes nettes au travers). */
:root:not([data-brand="rivabank"]) :is(.view, .jstep) { animation-fill-mode: backwards; }

/* ---------- Titres posés directement sur le fond : halo discret pour rester lisibles sur une arête claire ---------- */
:root:not([data-brand="rivabank"]) :is(.page-head, .welcome) :is(h1, p) {
  text-shadow: 0 0 2px rgba(246, 248, 252, 0.9), 0 0 14px rgba(246, 248, 252, 0.95), 0 0 28px rgba(246, 248, 252, 0.8);
}
:root:not([data-brand="rivabank"]) :is(.page-head, .welcome) p { color: var(--ink-2); }
:root[data-theme="dark"]:not([data-brand="rivabank"]) :is(.page-head, .welcome) :is(h1, p) {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 14px rgba(0, 0, 0, 0.75), 0 0 28px rgba(0, 0, 0, 0.6);
}
/* Le halo seul ne suffit pas sur une arête très claire : une ombre douce derrière le bloc titre. */
:root:not([data-brand="rivabank"]) :is(.page-head, .welcome) > div:first-child { position: relative; }
:root:not([data-brand="rivabank"]) :is(.page-head, .welcome) > div:first-child::before {
  content: ""; position: absolute; inset: -18px -36px -18px -28px; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(246, 248, 252, 0.85), rgba(246, 248, 252, 0.5) 60%, transparent);
}
:root[data-theme="dark"]:not([data-brand="rivabank"]) :is(.page-head, .welcome) > div:first-child::before {
  background: radial-gradient(closest-side, rgba(5, 6, 9, 0.82), rgba(5, 6, 9, 0.5) 60%, transparent);
}
/* Mobile : le halo s'arrête au bord de l'écran (gouttière de 16 px), sinon la page glisse sur le côté. */
@media (max-width: 860px) {
  :root:not([data-brand="rivabank"]) :is(.page-head, .welcome) > div:first-child::before { inset: -18px -16px; }
}
/* Intertitres de la barre latérale : --faint passait sous 3:1 sur le nouveau verre. */
:root:not([data-brand="rivabank"]) .nav__label { color: var(--muted); }

/* ---------- Arête lumineuse en haut des surfaces de verre ---------- */
:root:not([data-brand="rivabank"]) :is(.card, .side, .header, .tabbar, .strip, .shx-hero, .shx-card, .cbanner) {
  border-top-color: var(--edge-top);
}

/* ---------- Panneaux flottants (ordinateur) ---------- */
@media (min-width: 861px) {
  :root:not([data-brand="rivabank"]) .side {
    top: var(--float-gap); height: calc(100dvh - var(--float-gap) * 2); margin: var(--float-gap) 0 var(--float-gap) var(--float-gap);
    border: 1px solid var(--line-strong); border-top-color: var(--edge-top); border-radius: 20px;
    box-shadow: var(--highlight), var(--shadow-card);
  }
  :root:not([data-brand="rivabank"]) .header {
    top: var(--float-gap); margin: var(--float-gap) var(--float-gap) 0;
    border: 1px solid var(--line); border-top-color: var(--edge-top); border-radius: 16px;
    box-shadow: var(--highlight), var(--shadow-card);
  }
}