/* Matériau « verre ».
   Le Liquid Glass d'iOS 26 n'est pas accessible à une web app : la propriété d'Apple
   (-apple-visual-effect) est privée, et Safari n'affiche pas la réfraction par filtre SVG.
   On reproduit donc ce que Safari sait faire : flou + saturation du fond, teinte légère,
   liseré spéculaire et ombre portée. Si Apple ouvre un jour sa propriété, elle prend le relais. */

:root {
  color-scheme: dark light;
  --fond: #0b0b0f;
  --fond-2: #16161c;
  --texte: #f5f5f7;
  --texte-2: rgba(235, 235, 245, .62);
  --trait: rgba(255, 255, 255, .1);
  --accent: #0a84ff;
  --alerte: #ff453a;

  --verre-teinte: rgba(120, 120, 130, .18);
  --verre-bord: rgba(255, 255, 255, .2);
  --verre-reflet: rgba(255, 255, 255, .38);
  --verre-reflet-bas: rgba(255, 255, 255, .07);
  --verre-ombre: 0 10px 34px rgba(0, 0, 0, .38);
  --verre-flou: blur(22px) saturate(190%) brightness(1.08);

  --rayon: 22px;
  --marge: 16px;
  --haut: env(safe-area-inset-top, 0px);
  --bas: env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: light) {
  :root {
    --fond: #f2f2f7;
    --fond-2: #ffffff;
    --texte: #111114;
    --texte-2: rgba(60, 60, 67, .68);
    --trait: rgba(0, 0, 0, .09);
    --accent: #007aff;
    --alerte: #ff3b30;
    --verre-teinte: rgba(255, 255, 255, .42);
    --verre-bord: rgba(255, 255, 255, .7);
    --verre-reflet: rgba(255, 255, 255, .95);
    --verre-reflet-bas: rgba(0, 0, 0, .05);
    --verre-ombre: 0 10px 30px rgba(0, 0, 0, .14);
    --verre-flou: blur(22px) saturate(180%);
  }
}

.verre {
  position: relative;
  isolation: isolate;
  background: var(--verre-teinte);
  -webkit-backdrop-filter: var(--verre-flou);
  backdrop-filter: var(--verre-flou);
  border-radius: var(--rayon);
  box-shadow:
    inset 0 1px 0 var(--verre-reflet),
    inset 0 -1px 0 var(--verre-reflet-bas),
    inset 0 0 0 .5px var(--verre-bord),
    var(--verre-ombre);
}

/* Reflet diagonal : la lumière accroche le haut gauche et le bas droit du bord. */
.verre::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--verre-reflet), transparent 32%, transparent 68%, var(--verre-bord));
  -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);
  opacity: .55;
  pointer-events: none;
  z-index: -1;
}

@supports (-apple-visual-effect: -apple-system-glass-material) {
  .verre {
    -apple-visual-effect: -apple-system-glass-material;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

.capsule { border-radius: 999px; }

/* Les éléments de verre réagissent au toucher : léger gonflement, comme le matériau d'origine. */
.touche {
  transition: transform .28s cubic-bezier(.2, .9, .3, 1.3), filter .2s;
  -webkit-tap-highlight-color: transparent;
}
.touche:active { transform: scale(1.07); filter: brightness(1.25); }

@media (prefers-reduced-motion: reduce) {
  .touche { transition: none; }
  .touche:active { transform: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .verre {
    background: var(--fond-2);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}