:root{
  color-scheme: light dark;
  --bg:#fbf6e9; --bg2:#f3ead2; --fg:#3c2f1d; --muted:#7c6a51;
  --line:#e2d6b8; --accent:#b8860b; --accent-ink:#4a3410;
  --card:#fffdf6; --shadow:rgba(90,70,30,.14);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#191510; --bg2:#221c14; --fg:#f0e7d4; --muted:#a7967c;
    --line:#3a3125; --accent:#f2b705; --accent-ink:#f7e2a8;
    --card:#221c14; --shadow:rgba(0,0,0,.45);
  }
}

*{box-sizing:border-box}
body{
  margin:0; min-height:100vh; color:var(--fg);
  background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%);
  font:16px/1.55 ui-rounded,"Segoe UI",system-ui,sans-serif;
}

/* prairie décorative : quelques tiges qui ondulent en fond */
.meadow{
  position:fixed; inset:auto 0 0 0; height:22vh; pointer-events:none; z-index:0;
  background:
    radial-gradient(circle at 12% 100%, rgba(95,143,67,.30) 0 2px, transparent 3px),
    radial-gradient(circle at 34% 100%, rgba(95,143,67,.22) 0 2px, transparent 3px),
    radial-gradient(circle at 61% 100%, rgba(95,143,67,.26) 0 2px, transparent 3px),
    radial-gradient(circle at 86% 100%, rgba(95,143,67,.20) 0 2px, transparent 3px),
    linear-gradient(0deg, rgba(95,143,67,.16), transparent 70%);
}

main{position:relative; z-index:1; max-width:60rem; margin:0 auto; padding:clamp(1.5rem,4vw,3.5rem) 1.25rem 5rem}

.intro{text-align:center; margin-bottom:clamp(1.5rem,4vw,2.75rem)}
h1{
  margin:0 0 .35rem; font-size:clamp(1.9rem,5vw,2.9rem); font-weight:700;
  letter-spacing:-.015em; color:var(--accent-ink);
}
@media (prefers-color-scheme: dark){ h1{color:var(--accent-ink)} }
.lede{margin:0; color:var(--muted); font-size:1.05rem}

.block{
  border:1px solid var(--line); border-radius:1.1rem; background:var(--card);
  margin:0 0 1.5rem; padding:1.1rem 1.25rem 1.5rem;
  box-shadow:0 2px 14px var(--shadow);
}
.block legend{
  padding:0 .5rem; font-weight:650; font-size:1.05rem; color:var(--accent-ink);
}
@media (prefers-color-scheme: dark){ .block legend{color:var(--accent)} }

.flowers{
  position:relative;                 /* cadre de jeu de la fleur fuyante */
  display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center;
  min-height:10.5rem; padding-top:.5rem;
}
.slot{flex:0 0 auto; width:7.5rem}
.slot.elusive{
  position:relative; z-index:5; will-change:transform;
  /* Le curseur ne peut ni le survoler ni le cliquer : il traverse. */
  pointer-events:none; user-select:none;
}
.slot.elusive .face{
  display:flex; flex-direction:column; align-items:center; gap:.45rem;
  padding:.6rem .35rem; border:2px solid transparent;
}

.slot input{position:absolute; opacity:0; width:1px; height:1px; pointer-events:none}

.slot label{
  display:flex; flex-direction:column; align-items:center; gap:.45rem;
  padding:.6rem .35rem; border-radius:.85rem; cursor:pointer;
  border:2px solid transparent; transition:border-color .18s, background .18s, transform .18s;
}
.slot label:hover{background:rgba(184,134,11,.09)}
.slot input:focus-visible + label{outline:3px solid var(--accent); outline-offset:2px}

.bloom{
  display:block; width:4.25rem; height:4.25rem;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), filter .25s;
  filter:saturate(.72) opacity(.88);
}
.slot label:hover .bloom{transform:scale(1.07) rotate(-4deg); filter:saturate(1) opacity(1)}

.slot input:checked + label{
  border-color:var(--accent); background:rgba(184,134,11,.13);
}
.slot input:checked + label .bloom{
  transform:scale(1.14) rotate(6deg); filter:saturate(1.25) opacity(1)
    drop-shadow(0 3px 7px var(--shadow));
  animation:bloom-pulse 2.6s ease-in-out infinite;
}
@keyframes bloom-pulse{ 0%,100%{transform:scale(1.14) rotate(6deg)} 50%{transform:scale(1.19) rotate(3deg)} }

.name{font-size:.86rem; text-align:center; line-height:1.3; color:var(--muted)}
.slot input:checked + label .name{color:var(--fg); font-weight:600}

.actions{display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:center; gap:.9rem; margin-top:2rem}
button, .btn{
  font:inherit; font-weight:650; padding:.8rem 1.9rem; border-radius:999px; cursor:pointer;
  border:none; background:var(--accent); color:#2a1d07; text-decoration:none;
  transition:transform .15s, box-shadow .15s, opacity .15s;
  box-shadow:0 3px 12px var(--shadow);
}
button:hover:not(:disabled), .btn:hover{transform:translateY(-2px); box-shadow:0 6px 18px var(--shadow)}
button:disabled{opacity:.42; cursor:not-allowed; box-shadow:none}
.btn.ghost{background:transparent; color:var(--muted); border:1px solid var(--line); box-shadow:none}

.result[hidden]{display:none}
.result{
  display:block; margin:2rem auto 0; max-width:34rem; padding:1.25rem 1.5rem;
  border:1px solid var(--line); border-left:5px solid var(--accent); border-radius:.9rem;
  background:var(--card); text-align:center; box-shadow:0 2px 14px var(--shadow);
}
.result h2{margin:0; font-size:1.15rem; color:var(--accent-ink)}

footer{
  margin-top:3rem; text-align:center; font-size:.82rem; color:var(--muted);
  display:flex; flex-direction:column; gap:.4rem;
}
footer a{color:var(--accent); text-decoration:none}
footer a:hover{text-decoration:underline}
.notice{opacity:.75}

/* page QR */
.qr-page main{max-width:42rem; text-align:center}
.qr{width:min(100%,32rem); height:auto; border-radius:1rem; box-shadow:0 4px 20px var(--shadow)}
.qr-page .actions{flex-direction:row; flex-wrap:wrap; justify-content:center; gap:.7rem}
code{background:rgba(127,127,127,.14); padding:.1rem .4rem; border-radius:.3rem; font-size:.92em}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition-duration:.01ms !important}
}
@media (max-width:520px){
  .slot{width:5.9rem}
  .bloom{width:3.4rem; height:3.4rem}
}

/* --- musique --- */
#music-toggle{
  position:fixed; right:1rem; bottom:1rem; z-index:20;
  width:3rem; height:3rem; padding:0; border-radius:50%;
  display:grid; place-items:center;
  background:var(--card); border:1px solid var(--line);
  box-shadow:0 3px 12px var(--shadow); cursor:pointer;
}
#music-toggle .note{
  width:1.4rem; height:1.4rem; display:block;
  background:var(--accent);
  /* double croche */
  -webkit-mask:var(--note-mask) center/contain no-repeat;
          mask:var(--note-mask) center/contain no-repeat;
  --note-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 18V5l12-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='16' r='3'/%3E%3C/svg%3E");
}
/* barré quand la musique est coupée */
#music-toggle[aria-pressed="false"] .note{opacity:.45}
#music-toggle[aria-pressed="false"]::after{
  content:""; position:absolute; width:1.9rem; height:2px; border-radius:2px;
  background:var(--muted); transform:rotate(-45deg);
}
#music-toggle:hover{transform:translateY(-2px)}
@media (max-width:520px){ #music-toggle{width:2.6rem; height:2.6rem; right:.7rem; bottom:.7rem} }

/* --- le bouton qu'on n'atteindra pas --- */
.actions{position:relative; min-height:9rem}
.decline{
  display:inline-block; position:relative; z-index:6;
  font:inherit; font-weight:650; padding:.8rem 1.9rem; border-radius:999px;
  background:#9a3412; color:#ffe9d6; box-shadow:0 3px 12px var(--shadow);
  white-space:nowrap; will-change:transform;
  /* le curseur le traverse : ni survol, ni clic possible */
  pointer-events:none; user-select:none;
}
@media (prefers-color-scheme: dark){ .decline{background:#b4441a; color:#fff1e4} }