/* Effet « verre poli » : fond coloré flou, cartes translucides, boutons en dégradé.
   Pour revenir au style simple : retirer la ligne glass.css dans templates/base.html. */

:root {
  --glass-bg: rgb(255 255 255 / .32);
  --glass-border: rgb(255 255 255 / .7);
  --glass-shadow: 0 8px 32px rgb(60 40 80 / .12), inset 0 1px 0 rgb(255 255 255 / .8);
  --blob-1: #ffb48c;
  --blob-2: #ffbfdc;
  --blob-3: #a9d4ff;
}
.theme-lou  { --blob-1: #ffa877; --blob-2: #ffd27a; --blob-3: #ffb3c1; }
.theme-lily { --blob-1: #c3a3ff; --blob-2: #ffaed6; --blob-3: #a6d6ff; }

/* Fond coloré flou : sans lui, le verre n'a rien à « dépolir » */
body { background: var(--bg); }
body::before {
  content: "";
  position: fixed; inset: -10%;
  z-index: -1;
  background:
    radial-gradient(45% 40% at 10% 15%, var(--blob-1), transparent 75%),
    radial-gradient(40% 45% at 90% 35%, var(--blob-2), transparent 75%),
    radial-gradient(50% 45% at 40% 95%, var(--blob-3), transparent 75%),
    radial-gradient(30% 30% at 60% 55%, var(--blob-2), transparent 75%);
  filter: blur(30px);
}

.card, .choice, table, .modal {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}
.modal { background: rgb(255 255 255 / .72); }
.modal::backdrop { background: rgb(43 36 32 / .25); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }

/* Zone photo : fond blanc plein, bord à bord en haut de la carte */
.card-img {
  background: #fff;
  border-bottom: 1px solid rgb(255 255 255 / .7);
}
.choice:hover { border-color: var(--accent); }
.btn-ghost { background: rgb(255 255 255 / .35); }
th { background: rgb(255 255 255 / .35); }
th, td { border-bottom-color: rgb(255 255 255 / .6); }
.field input, .mode { background: rgb(255 255 255 / .6); }
.mode:has(input:checked) { background: color-mix(in srgb, var(--accent-soft) 80%, transparent); }

/* Boutons principaux : dégradé + reflet qui passe au survol */
:root       { --accent-2: #e0825f; }
.theme-lou  { --accent-2: #f0a63a; }
.theme-lily { --accent-2: #e063b2; }

.btn:not(.btn-ghost) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  box-shadow:
    0 6px 18px -6px color-mix(in srgb, var(--accent) 70%, transparent),
    inset 0 1px 0 rgb(255 255 255 / .35);
  text-shadow: 0 1px 1px rgb(0 0 0 / .12);
  transition: transform .15s, box-shadow .2s, filter .2s;
}
.btn:not(.btn-ghost)::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .45) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .6s ease;
}
.btn:not(.btn-ghost):hover {
  filter: saturate(1.1);
  transform: translateY(-1px);
  box-shadow:
    0 10px 24px -8px color-mix(in srgb, var(--accent) 80%, transparent),
    inset 0 1px 0 rgb(255 255 255 / .4);
}
.btn:not(.btn-ghost):hover::after { transform: translateX(120%); }
.btn:not(.btn-ghost):active { transform: translateY(0) scale(.98); }
@media (prefers-reduced-motion: reduce) {
  .btn:not(.btn-ghost)::after { display: none; }
}