/* PRISME Aquarium. La scène est une illustration : elle reste SOMBRE aussi dans le thème clair (comme les scènes d'Outfit). Couleurs = charte. */
.prisme-aq { display: grid; gap: var(--prisme-e4, 24px); max-width: 1100px; margin: 0 auto; }
.prisme-aq-intro h2 { margin: 0 0 8px; }
.prisme-aq-etapes { margin: 16px 0; padding-left: 24px; display: grid; gap: 8px; }
.prisme-aq-aide { margin: 0; font-size: var(--prisme-t-xs, .875rem); opacity: .85; }

.prisme-aq-scene { position: relative; overflow: hidden; isolation: isolate; height: clamp(440px, 72vh, 660px); border-radius: var(--prisme-radius, 28px);
	border: 1px solid rgba(255, 255, 255, .18); box-shadow: 0 18px 44px rgba(0, 0, 0, .4), inset 0 0 70px rgba(0, 0, 0, .35);
	background: linear-gradient(180deg, #2a4a77 0%, #2a2a58 45%, #17171A 100%); color: #fff; }
.prisme-aq-scene::after { content: ""; position: absolute; inset: 0; z-index: 8; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, .12), transparent 16%); }
.prisme-aq-rayons { position: absolute; inset: -20% -10% 30% -10%; z-index: 0; pointer-events: none; opacity: .5;
	background: repeating-linear-gradient(105deg, transparent 0 70px, rgba(255, 255, 255, .10) 90px, transparent 130px 220px);
	-webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); mask-image: linear-gradient(180deg, #000, transparent 85%); }
.prisme-aq-bulles { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.prisme-aq-vegetaux { position: absolute; left: 0; bottom: 0; width: 100%; height: 170px; z-index: 2; pointer-events: none; }
.prisme-aq-sable { position: absolute; left: 0; bottom: 0; width: 100%; height: 120px; z-index: 2; pointer-events: none; }
.aq-algue { transform-box: fill-box; transform-origin: 50% 100%; }

/* PRISMO : un seul bouton (caresse), déplacé par le script */
.prisme-aq-prismo { position: absolute; left: 0; top: 0; z-index: 5; width: clamp(84px, 16%, 150px); padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; will-change: transform;
	filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .45)); --img: url("../img/prismo.png"); }
.prisme-aq-prismo:focus-visible, .prisme-aq-coffre:focus-visible, .prisme-aq-etoile:focus-visible { outline: 3px solid var(--prisme-or, #F5A623); outline-offset: 4px; }
.aq-rot, .aq-echelle { display: block; will-change: transform; }
.aq-pulse { display: block; position: relative; aspect-ratio: 433 / 480; }
.aq-corps, .aq-pieds { position: absolute; inset: 0; display: block; background: var(--img) center / 100% 100% no-repeat; }
.aq-corps { clip-path: inset(0 0 23.4% 0); transform-origin: 50% 76.6%; }
.aq-corps svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.aq-pieds { clip-path: inset(76.4% 0 0 0); transform-origin: 50% 76.4%; }
.aq-corps svg g { transform-box: fill-box; transform-origin: center; }

/* Coffre au trésor, posé sur le sable */
.prisme-aq-coffre-zone { position: absolute; z-index: 4; left: clamp(8px, 3%, 32px); bottom: 20px; }
.prisme-aq-coffre { position: relative; display: block; width: 120px; height: 96px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 20px; }
.prisme-aq-coffre svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .45)); transition: transform .25s ease; }
.prisme-aq-coffre:hover svg, .prisme-aq-coffre:focus-visible svg { transform: translateY(-4px) rotate(-3deg); }
.prisme-aq-coffre[disabled] { cursor: default; } .prisme-aq-coffre[disabled] svg { transform: none; }
.prisme-aq-coffre .aq-lueur { opacity: 0; transition: opacity .6s ease; } .prisme-aq-coffre.ouvert .aq-lueur { opacity: 1; }
.prisme-aq-coffre .aq-rabat { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .6s cubic-bezier(.3, 1.4, .5, 1); }
.prisme-aq-coffre.ouvert .aq-rabat { transform: rotate(-32deg) translate(-4px, -8px); }

/* Étoiles = passions */
.prisme-aq-ciel { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.prisme-aq-etoile { position: absolute; width: 48px; height: 48px; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; border-radius: 50%; }
.prisme-aq-etoile svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 4px 8px rgba(245, 166, 35, .55)); }
.prisme-aq-passion { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 2px; white-space: nowrap; padding: 2px 10px; border-radius: 999px; font-size: var(--prisme-t-xs, .875rem); font-weight: 600; color: #fff; background: rgba(23, 23, 26, .85); border: 1px solid rgba(245, 166, 35, .55); }
.prisme-aq-volante { position: absolute; z-index: 7; width: 48px; height: 48px; margin: -24px 0 0 -24px; pointer-events: none; }
.prisme-aq-volante svg { width: 100%; height: 100%; filter: drop-shadow(0 4px 10px rgba(245, 166, 35, .7)); }
.prisme-aq-bulle { position: absolute; z-index: 9; transform: translateX(-50%); padding: 6px 14px; border-radius: 999px; font-size: 1rem; font-weight: 600; color: #17171A; background: #F5A623; border: 2px solid #000; pointer-events: none; white-space: nowrap; }

/* État et jauge */
.prisme-aq-etat { display: grid; gap: var(--prisme-e3, 16px); justify-items: start; }
.prisme-aq-message { margin: 0; font-size: var(--prisme-t-m, 1.125rem); font-weight: 600; }
.prisme-aq-surtitre { margin: 0 0 8px; }
.prisme-aq-compte { display: flex; gap: 6px; flex-wrap: wrap; }
.prisme-aq-compte i { width: 22px; height: 22px; display: block; background: rgba(128, 128, 140, .35); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.prisme-aq-compte i.plein { background: #F5A623; }
.prisme-aq-liste { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.prisme-aq-liste li { padding: 4px 12px; border-radius: 999px; border: 1px solid var(--prisme-bordure, rgba(255, 255, 255, .25)); font-size: var(--prisme-t-xs, .875rem); }

@media (prefers-reduced-motion: no-preference) {
	.aq-algue { animation: aq-balance 4s ease-in-out infinite alternate; } .aq-algue:nth-child(2n) { animation-duration: 5.2s; animation-delay: -1.5s; } .aq-algue:nth-child(3n) { animation-duration: 6.3s; animation-delay: -3s; }
	@keyframes aq-balance { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
	.prisme-aq-rayons { animation: aq-rayons 14s ease-in-out infinite alternate; } @keyframes aq-rayons { from { transform: translateX(-3%) skewX(-2deg); } to { transform: translateX(3%) skewX(2deg); } }
	.prisme-aq-etoile { animation: aq-sortie .7s cubic-bezier(.2, .9, .3, 1.2) both, aq-flotte 4.5s ease-in-out .7s infinite alternate; animation-delay: var(--d, 0s), calc(.7s + var(--d, 0s)); }
	@keyframes aq-sortie { from { transform: translate(var(--dx), var(--dy)) scale(.2) rotate(-90deg); opacity: 0; } to { transform: none; opacity: 1; } }
	@keyframes aq-flotte { from { transform: translateY(-8px) rotate(-6deg); } to { transform: translateY(8px) rotate(6deg); } }
	.prisme-aq-bulle { animation: aq-monte 1.9s ease-out forwards; } @keyframes aq-monte { from { opacity: 0; margin-top: 10px; } 15% { opacity: 1; } to { opacity: 0; margin-top: -26px; } }
}
@media (max-width: 640px) {
	.prisme-aq-scene { height: clamp(520px, 80vh, 640px); }
	.prisme-aq-coffre-zone { bottom: 14px; } .prisme-aq-coffre { width: 96px; height: 77px; }
	.prisme-aq-passion { white-space: normal; width: 88px; text-align: center; padding: 2px 6px; line-height: 1.2; border-radius: 12px; }
}