/* Jardin : illustrations (img/fleurs, img/jardin, img/personnage, img/oslo), objectif, didacticiel. */
.goal { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 8px 12px; border-radius: 16px; background: var(--bg-2); border: 1px solid var(--line); }
.goal img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: 50% 8%; background: var(--card); flex: none; }
.goal p { margin: 0; font-weight: 700; font-size: .95rem; line-height: 1.3; }

.field { background: var(--bg-2); }
.field .decor { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; pointer-events: none; }
.field.nuit .main-flower img { filter: drop-shadow(0 0 14px rgba(255, 220, 240, .45)); }
.scenes { position: absolute; left: 0; right: 0; bottom: 34%; height: 86px; display: flex; justify-content: space-around; align-items: flex-end; padding: 0 8px; pointer-events: none; z-index: 1; }
.scenes img { height: 86px; width: auto; }
.garden-row { z-index: 1; max-height: 62%; gap: 0; padding: 0 6px; bottom: 4px; }
.garden-row img { width: 56px; height: 70px; flex: none; margin: 0 -3px -6px; object-fit: contain; object-position: 50% 100%; animation: sway 4s ease-in-out infinite; transform-origin: 50% 100%; }
.garden-row img:nth-child(3n) { animation-delay: -1.3s; } .garden-row img:nth-child(3n+1) { animation-delay: -2.6s; }
.garden-row img.pop, .scenes img.pop { animation: pop .5s ease-out; }
.main-flower img { width: 100%; height: auto; display: block; filter: drop-shadow(0 8px 10px rgba(180, 70, 110, .3)); animation: breathe 3.5s ease-in-out infinite; }
.main-flower { top: 40%; width: clamp(112px, 30vw, 150px); }
.field { min-height: 340px; }
.main-flower::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 3px solid var(--pink-deep); opacity: 0; pointer-events: none; }
body:not(.a-clique) .main-flower::after { animation: invite 1.8s ease-out infinite; }
@keyframes invite { 0% { transform: scale(.85); opacity: .7; } 100% { transform: scale(1.12); opacity: 0; } }

.jeannette, .oslo { position: absolute; bottom: 2px; z-index: 3; border: 0; background: none; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.jeannette { left: 4px; } .jeannette img { height: 118px; width: auto; display: block; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .2)); }
.oslo { right: 6px; } .oslo img { height: 78px; width: auto; display: block; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .2)); }
.oslo[hidden] { display: none; }
.jeannette.hop, .oslo.hop { animation: hop2 .5s ease-out; }
@keyframes hop2 { 40% { transform: translateY(-14px); } }

.petal-fx { position: absolute; z-index: 4; width: 18px; height: auto; pointer-events: none; animation: petal-fx .85s ease-out forwards; }
@keyframes petal-fx { to { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; } }
.float { z-index: 5; }

.visitor { font-size: 1rem; bottom: 14px; z-index: 6; }
.visitor span { position: relative; }
.visitor img { width: 84px; height: 84px; display: block; }
.visitor em { position: absolute; left: 50%; top: -14px; transform: translateX(-50%); font-style: normal; font-weight: 900; font-size: .75rem; white-space: nowrap; padding: 2px 8px; border-radius: 99px; background: var(--card); color: var(--pink-deep); border: 1px solid var(--pink-deep); box-shadow: 0 2px 6px rgba(0,0,0,.18); }

.buff { display: flex; flex-wrap: wrap; gap: 6px; }
.buff-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border-radius: 99px; background: var(--bg-2); border: 1px solid var(--pink-deep); font-size: .85rem; }
.buff-chip img { width: 26px; height: 26px; }
.progress.flash { animation: flash .9s ease-out; }
@keyframes flash { 30% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--pink-deep) 40%, transparent); } }

.item > img { width: 54px; height: 54px; object-fit: contain; }
.item .stages { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.item .stages i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.item .stages i.on { background: var(--green-deep); }
.item .stages em { font-style: normal; font-size: .75rem; color: var(--ink-soft); margin-left: 4px; }
.toast { display: flex; align-items: center; justify-content: center; gap: 10px; }
.toast-ico { width: 40px; height: 40px; flex: none; }
.ach-list .ach-ico { width: 44px; height: 44px; flex: none; }

/* mode sobre : mêmes illustrations, couleurs éteintes, sans pétales qui s'envolent ni bulles « Clique ! » colorées */
:root[data-mode="sobre"] .field .decor, :root[data-mode="sobre"] .garden-row img, :root[data-mode="sobre"] .scenes img,
:root[data-mode="sobre"] .main-flower img, :root[data-mode="sobre"] .item > img, :root[data-mode="sobre"] .ach-ico,
:root[data-mode="sobre"] .visitor img, :root[data-mode="sobre"] .buff-chip img, :root[data-mode="sobre"] .toast-ico { filter: saturate(.3); }
:root[data-mode="sobre"] .petal-fx, :root[data-mode="sobre"] .main-flower::after { display: none; }

/* didacticiel (js/tuto.js) */
.tuto-cible { outline: 3px solid var(--pink-deep); outline-offset: 4px; border-radius: 14px; position: relative; z-index: 3; animation: tuto-pulse 1.6s ease-in-out infinite; }
@keyframes tuto-pulse { 50% { outline-color: transparent; } }
.tuto { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 150; width: min(92vw, 440px); background: var(--card); color: var(--ink); border: 2px solid var(--pink-deep); border-radius: 20px; padding: 14px 16px; box-shadow: 0 14px 40px rgba(0,0,0,.3); }
.tuto-titre { display: block; font-size: 1.05rem; margin-bottom: 2px; }
.tuto-texte { margin: 0 0 10px; line-height: 1.4; }
.tuto-btns { display: flex; justify-content: space-between; gap: 10px; }
.tuto-pts { display: flex; gap: 5px; margin-bottom: 8px; }
.tuto-pts i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.tuto-pts i.fait { background: var(--green-deep); } .tuto-pts i.on { background: var(--pink-deep); width: 20px; border-radius: 99px; }
@media (max-width: 720px) { .tuto { bottom: calc(76px + env(safe-area-inset-bottom)); } .jeannette img { height: 104px; } .garden-row img { width: 50px; height: 63px; } }
@media (prefers-reduced-motion: reduce) { .petal-fx, .tuto-cible, .main-flower::after, .jeannette.hop, .oslo.hop { animation: none !important; } .garden-row img, .main-flower img { animation: none; } .petal-fx { display: none; } }