/* Vigie : matériaux standard (couche de contenu) et Liquid Glass (couche fonctionnelle). */

.material-thick,
.material-regular,
.material-thin,
.material-ultrathin {
  -webkit-backdrop-filter: blur(var(--material-blur));
  backdrop-filter: blur(var(--material-blur));
}

.material-thick { background: var(--material-thick); }
.material-regular { background: var(--material-regular); }
.material-thin { background: var(--material-thin); }
.material-ultrathin { background: var(--material-ultrathin); }

/* Verre standard (« regular ») : la forme (rayon) vient toujours du composant */
.glass {
  position: relative;
  isolation: isolate;
  background-color: rgb(var(--glass-rgb) / var(--glass-alpha));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  box-shadow: var(--glass-shadow), inset 0 -1px 0 0 var(--glass-edge-shade);
}

.glass::before,
.glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;  /* derrière le contenu, devant le fond du verre (isolation) */
}

/* Liseré lumineux de 1 px : reflet spéculaire sur le pourtour */
.glass::before {
  padding: 1px;
  background: linear-gradient(135deg, var(--glass-rim), var(--glass-rim-soft) 40%, var(--glass-rim-soft) 60%,
    color-mix(in srgb, var(--glass-rim) 45%, transparent));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box exclude, linear-gradient(#fff 0 0);
}

/* Reflet dynamique : halo centré sur le doigt ou la souris (--mx, --my posés par glass-ui.js) */
.glass::after {
  background: radial-gradient(140px circle at var(--mx, 30%) var(--my, 0%), rgb(255 255 255 / 0.22), transparent 70%);
  opacity: 0;
  transition: opacity var(--d-morph);
}

@media (hover: hover) {
  .glass:hover::after {
    opacity: 0.55;
  }
}

.glass:active::after {
  opacity: 0.55;
}

/* Verre clair : au-dessus d'une photo seulement, avec .dim dessous */
.glass--clear {
  --glass-alpha: calc((0.18 + var(--glass-tint) * 0.62) / 3);
  --glass-blur: 6px;
}

/* Verre teinté accent : action principale (couleur sur le fond, pas sur le texte) */
.glass--prominent {
  color: var(--on-accent);
  background-color: color-mix(in srgb, var(--accent) 88%, transparent);
}

.dim {
  position: absolute;
  inset: 0;
  background: var(--dim-layer);
  pointer-events: none;
}

/* Effet de bord de défilement : le contenu qui passe sous une barre est flouté et estompé */
.scroll-edge {
  position: fixed;
  left: 0;
  right: 0;
  z-index: var(--z-edge);
  pointer-events: none;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  background-color: color-mix(in srgb, var(--bg) 35%, transparent);
  transition: opacity var(--d-morph);
}

.scroll-edge--top {
  top: 0;
  height: calc(env(safe-area-inset-top) + 88px);
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent);
  mask-image: linear-gradient(to bottom, #000 30%, transparent);
  opacity: 0;  /* au repos, rien ne passe sous la barre d'outils */
}

body.is-scrolled .scroll-edge--top {
  opacity: 1;
}

.scroll-edge--bottom {
  bottom: 0;
  height: calc(env(safe-area-inset-bottom) + 110px);
  -webkit-mask-image: linear-gradient(to top, #000 30%, transparent);
  mask-image: linear-gradient(to top, #000 30%, transparent);
}

@media (min-width: 1024px) {
  .scroll-edge--bottom {
    display: none;
  }
}

/* Transparence réduite (système ou Réglages) et navigateurs sans flou : verre opaque */
html[data-transparency="reduced"] .glass {
  background-color: var(--glass-solid);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html[data-transparency="reduced"] .glass--prominent {
  background-color: var(--accent);
}

html[data-transparency="reduced"] .glass::before {
  padding: 0;
  border: 1px solid var(--separator);
  background: none;
  -webkit-mask: none;
  mask: none;
}

html[data-transparency="reduced"] .glass::after,
html[data-transparency="reduced"] .scroll-edge {
  display: none;
}

@media (prefers-reduced-transparency: reduce) {
  .glass {
    background-color: var(--glass-solid);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .glass--prominent {
    background-color: var(--accent);
  }

  .glass::before {
    padding: 0;
    border: 1px solid var(--separator);
    background: none;
    -webkit-mask: none;
    mask: none;
  }

  .glass::after,
  .scroll-edge {
    display: none;
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass {
    background-color: var(--glass-solid);
  }

  .glass--prominent {
    background-color: var(--accent);
  }

  .glass::before {
    padding: 0;
    border: 1px solid var(--separator);
    background: none;
    -webkit-mask: none;
    mask: none;
  }

  .glass::after,
  .scroll-edge {
    display: none;
  }
}

/* Mouvement réduit : pas de reflet qui suit le pointeur */
html[data-motion="reduced"] .glass::after {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .glass::after {
    display: none;
  }
}