/* Objets de la Boutique Towera : décorations d’avatar, bannières, effets de profil et plaques.
   Partagé par l’atelier et le site public. Les animations s’arrêtent si l’appareil demande moins de mouvement. */

/* Décorations d’avatar : un cadre posé autour de l’avatar (pseudo-éléments, aucun clic intercepté). */
.deco{position:relative;display:inline-grid;place-items:center;isolation:isolate;flex:0 0 auto;border-radius:50%}
.deco>.avatar,.deco>img{position:relative;z-index:1}
.deco::before,.deco::after{content:'';position:absolute;pointer-events:none;border-radius:50%;z-index:2}
.deco-ring-sage::before{inset:-12%;border:2px solid #a9c2a0;box-shadow:0 0 0 2px #fffefa,inset 0 0 0 1px #fffefa}
.deco-foliage::before{inset:-34%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%237fa77a'%3E%3Cellipse cx='50' cy='6' rx='7' ry='3.4'/%3E%3Cellipse cx='50' cy='94' rx='7' ry='3.4'/%3E%3Cellipse cx='6' cy='50' rx='3.4' ry='7'/%3E%3Cellipse cx='94' cy='50' rx='3.4' ry='7'/%3E%3C/g%3E%3Cg fill='%23a9c2a0'%3E%3Cellipse cx='19' cy='19' rx='7' ry='3.4' transform='rotate(-45 19 19)'/%3E%3Cellipse cx='81' cy='19' rx='7' ry='3.4' transform='rotate(45 81 19)'/%3E%3Cellipse cx='19' cy='81' rx='7' ry='3.4' transform='rotate(45 19 81)'/%3E%3Cellipse cx='81' cy='81' rx='7' ry='3.4' transform='rotate(-45 81 81)'/%3E%3C/g%3E%3Cg fill='%2310b673'%3E%3Ccircle cx='33' cy='9' r='2.2'/%3E%3Ccircle cx='91' cy='33' r='2.2'/%3E%3Ccircle cx='67' cy='91' r='2.2'/%3E%3Ccircle cx='9' cy='67' r='2.2'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;animation:cos-sway 6s ease-in-out infinite}
.deco-halo-sage::before{inset:-10%;box-shadow:0 0 0 3px #a9c2a080,0 0 16px 5px #9dffd2aa;animation:cos-breathe 3.2s ease-in-out infinite}
/* Couronne étoilée : GIF animé (image fixe si l’appareil demande moins de mouvement).
   Mesuré sur l’image : le trou de la couronne est centré à 50,7 % × 47,7 % et son rayon vaut 34 % de l’image ;
   à 150 % de l’avatar, le trou épouse la photo et l’anneau en recouvre juste le bord. */
.deco-wreath::before{inset:auto;left:50%;top:50%;width:150%;height:auto;aspect-ratio:1;transform:translate(-50.7%,-47.7%);background:url("shop/couronne-etoilee.gif") center/contain no-repeat;border-radius:0}
/* Le conteneur épouse exactement l’avatar (pas d’espace sous la ligne) pour que la couronne se cale sur la photo. */
.deco{line-height:0;vertical-align:middle}
.deco-orbit::before{inset:-14% -30%;border:1.5px solid #8fb0ffd9;transform:rotate(-24deg);animation:cos-orbit-a 7s linear infinite}
.deco-orbit::after{inset:-26% -10%;border:2px dotted #f2d27a;transform:rotate(30deg);animation:cos-orbit-b 9s linear infinite}

/* Bannières : fond de l’en-tête du profil. */
.cos-banner{position:relative;overflow:hidden;background:linear-gradient(135deg,#d9e4cf,#a9c2a0 60%,#7e9f7c)}
.banner-aurora{background:linear-gradient(120deg,#0b6e47,#10b673,#9dffd2,#17cdf0,#10b673,#0b6e47);background-size:400% 400%;animation:cos-aurora 14s ease-in-out infinite}
.banner-constellation{background:radial-gradient(1.5px 1.5px at 12% 30%,#fff,transparent),radial-gradient(1.5px 1.5px at 28% 68%,#fff,transparent),radial-gradient(2px 2px at 46% 22%,#f2d27a,transparent),radial-gradient(1.5px 1.5px at 63% 58%,#fff,transparent),radial-gradient(2px 2px at 81% 28%,#fff,transparent),radial-gradient(1.5px 1.5px at 91% 72%,#fff,transparent),radial-gradient(1px 1px at 36% 84%,#fff,transparent),radial-gradient(1px 1px at 72% 12%,#fff,transparent),linear-gradient(160deg,#0d1b3a,#1a2e5c 60%,#2a1f4f)}
.banner-constellation::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M12 30 L28 68 L46 22 L63 58 L81 28 L91 72' fill='none' stroke='%23ffffff' stroke-opacity='.35' stroke-width='.4' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center/100% 100% no-repeat;animation:cos-twinkle 4s ease-in-out infinite}

/* Effets de profil : animation par-dessus la bannière. */
.fx-stardust::after,.fx-bubbles::after{content:'';position:absolute;inset:0;pointer-events:none}
.fx-stardust::after{background-image:radial-gradient(2px 2px at 20px 30px,#fff,transparent),radial-gradient(2.5px 2.5px at 90px 80px,#f2d27a,transparent),radial-gradient(1.5px 1.5px at 150px 40px,#fff,transparent),radial-gradient(2px 2px at 60px 110px,#9dffd2,transparent),radial-gradient(1.5px 1.5px at 180px 100px,#fff,transparent);background-size:200px 130px;animation:cos-drift 9s linear infinite;opacity:.9}
.fx-bubbles::after{background-image:radial-gradient(circle at 30px 120px,transparent 5px,#ffffffaa 5.5px,transparent 6.5px),radial-gradient(circle at 110px 140px,transparent 8px,#ffffff88 8.5px,transparent 9.5px),radial-gradient(circle at 170px 100px,transparent 4px,#ffffffaa 4.5px,transparent 5.5px);background-size:200px 160px;animation:cos-rise 7s linear infinite}

/* Plaque de pseudo. */
.cos-plate{display:inline-flex;align-items:center;gap:6px;padding:3px 11px;border-radius:999px;background:linear-gradient(90deg,#1a2e5c,#2557e6,#7a5cff,#1a2e5c);background-size:300% 100%;color:#f6e3a8;font-size:12px;font-weight:700;letter-spacing:.2px;white-space:nowrap;box-shadow:0 0 0 1px #f2d27a66;animation:cos-shimmer 5s linear infinite;vertical-align:middle}
.cos-plate::before{content:'✦'}

@keyframes cos-sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes cos-breathe{0%,100%{opacity:.65;transform:scale(.97)}50%{opacity:1;transform:scale(1.04)}}
@keyframes cos-orbit-a{to{transform:rotate(336deg)}}
@keyframes cos-orbit-b{to{transform:rotate(-330deg)}}
@keyframes cos-aurora{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes cos-twinkle{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes cos-drift{from{background-position:0 0}to{background-position:200px -130px}}
@keyframes cos-rise{from{background-position:0 0}to{background-position:0 -160px}}
@keyframes cos-shimmer{from{background-position:0% 0}to{background-position:300% 0}}
@media(prefers-reduced-motion:reduce){.deco-wreath::before{background-image:url("shop/couronne-etoilee.png")}.deco::before,.deco::after,.cos-banner,.cos-banner::before,.cos-banner::after,.cos-plate{animation:none!important}}

/* Couronnes de niveau (GIF animés ; image fixe si moins de mouvement). Trous mesurés sur les images :
   flammes centré à 50,2 % × 49,3 % (rayon 30 %), givre à 51,4 % × 47,4 % (rayon 30,6 %). */
.deco-flame::before,.deco-frost::before,.deco-tide::before,.deco-moon::before{inset:auto;left:50%;top:50%;height:auto;aspect-ratio:1;border-radius:0;background:center/contain no-repeat}
.deco-flame::before{width:172%;transform:translate(-50.2%,-49.3%);background-image:url("shop/couronne-flammes.gif")}
.deco-frost::before{width:168%;transform:translate(-51.4%,-47.4%);background-image:url("shop/couronne-givre.gif")}
@media(prefers-reduced-motion:reduce){.deco-flame::before{background-image:url("shop/couronne-flammes.png")}.deco-frost::before{background-image:url("shop/couronne-givre.png")}}
.deco-tide::before{width:178%;transform:translate(-51.1%,-49.8%);background-image:url("shop/couronne-marees.gif")}
.deco-moon::before{width:154%;transform:translate(-51.2%,-48.4%);background-image:url("shop/couronne-lunaire.gif")}
@media(prefers-reduced-motion:reduce){.deco-tide::before{background-image:url("shop/couronne-marees.png")}.deco-moon::before{background-image:url("shop/couronne-lunaire.png")}}
.staff-badges{display:inline-flex;gap:4px;vertical-align:middle;margin-left:8px}.staff-badge img{width:.9em;height:.9em;object-fit:contain;display:block}
.banner-lycoris{background:url("shop/fond-lycoris.gif") center/cover no-repeat}
.banner-sakura{background:url("shop/fond-sakura.gif") center/cover no-repeat}
.thumb-banner.banner-lycoris{background-image:url("shop/fond-lycoris.png")}.thumb-banner.banner-sakura{background-image:url("shop/fond-sakura.png")}
@media(prefers-reduced-motion:reduce){.banner-lycoris{background-image:url("shop/fond-lycoris.png")}.banner-sakura{background-image:url("shop/fond-sakura.png")}}
.banner-lave{background:url("shop/fond-lave.gif") center/cover no-repeat}
.banner-ocean{background:url("shop/fond-ocean.gif") center/cover no-repeat}
.banner-nebuleuse{background:url("shop/fond-nebuleuse.webp") center/cover no-repeat}
.thumb-banner.banner-lave{background-image:url("shop/fond-lave.png")}.thumb-banner.banner-ocean{background-image:url("shop/fond-ocean.png")}
@media(prefers-reduced-motion:reduce){.banner-lave{background-image:url("shop/fond-lave.png")}.banner-ocean{background-image:url("shop/fond-ocean.png")}}

/* Images fixes : petits avatars (deco-still), effets désactivés (fx-off) et cartes hors écran (is-still). */
.deco-still.deco-wreath::before,.fx-off .deco-wreath::before,.is-fx-off .deco-wreath::before,.is-still .deco-wreath::before{background-image:url("shop/couronne-etoilee.png")}
.deco-still.deco-flame::before,.fx-off .deco-flame::before,.is-fx-off .deco-flame::before,.is-still .deco-flame::before{background-image:url("shop/couronne-flammes.png")}
.deco-still.deco-frost::before,.fx-off .deco-frost::before,.is-fx-off .deco-frost::before,.is-still .deco-frost::before{background-image:url("shop/couronne-givre.png")}
.deco-still.deco-tide::before,.fx-off .deco-tide::before,.is-fx-off .deco-tide::before,.is-still .deco-tide::before{background-image:url("shop/couronne-marees.png")}
.deco-still.deco-moon::before,.fx-off .deco-moon::before,.is-fx-off .deco-moon::before,.is-still .deco-moon::before{background-image:url("shop/couronne-lunaire.png")}
.fx-off .banner-lycoris,.is-fx-off .banner-lycoris,.is-still .banner-lycoris{background-image:url("shop/fond-lycoris.png")}
.fx-off .banner-sakura,.is-fx-off .banner-sakura,.is-still .banner-sakura{background-image:url("shop/fond-sakura.png")}
.fx-off .banner-lave,.is-fx-off .banner-lave,.is-still .banner-lave{background-image:url("shop/fond-lave.png")}
.fx-off .banner-ocean,.is-fx-off .banner-ocean,.is-still .banner-ocean{background-image:url("shop/fond-ocean.png")}
.fx-off .cos-banner,.fx-off .cos-banner::before,.fx-off .cos-banner::after,.fx-off .deco::before,.fx-off .deco::after,.fx-off .cos-plate,.is-fx-off .cos-banner,.is-fx-off .deco::before,.is-fx-off .deco::after,.is-fx-off .cos-plate{animation:none!important}
.is-still *,.is-still *::before,.is-still *::after{animation-play-state:paused!important}
.fx-off .pcard-fx,.is-fx-off .pcard-fx{display:none}
.pcard-banner.banner-lycoris,.pcard-banner.banner-sakura,.pcard-banner.banner-lave,.pcard-banner.banner-ocean,.pcard-banner.banner-nebuleuse{background-position:50% var(--banner-y,50%)}

/* Collection Halloween (rare). Trous mesurés : citrouilles centré à 48,6 % × 46 % (rayon 27,7 %), grimoire 49,6 % × 45,9 % (26,6 %), corbeau 49,2 % × 46,9 % (26,6 %). */
.deco-pumpkin::before,.deco-grimoire::before,.deco-raven::before{inset:auto;left:50%;top:50%;height:auto;aspect-ratio:1;border-radius:0;background:center/contain no-repeat}
.deco-pumpkin::before{width:177%;transform:translate(-48.7%,-46%);background-image:url("shop/couronne-citrouilles.gif?v=2")}
.deco-grimoire::before{width:179%;transform:translate(-54%,-48%);background-image:url("shop/couronne-grimoire.gif?v=2")}
.deco-raven::before{width:202%;transform:translate(-51.3%,-50.9%);background-image:url("shop/couronne-corbeau.gif?v=2")}
.deco-still.deco-pumpkin::before,.fx-off .deco-pumpkin::before,.is-fx-off .deco-pumpkin::before,.is-still .deco-pumpkin::before{background-image:url("shop/couronne-citrouilles.png?v=2")}
.deco-still.deco-grimoire::before,.fx-off .deco-grimoire::before,.is-fx-off .deco-grimoire::before,.is-still .deco-grimoire::before{background-image:url("shop/couronne-grimoire.png?v=2")}
.deco-still.deco-raven::before,.fx-off .deco-raven::before,.is-fx-off .deco-raven::before,.is-still .deco-raven::before{background-image:url("shop/couronne-corbeau.png?v=2")}
@media(prefers-reduced-motion:reduce){.deco-pumpkin::before{background-image:url("shop/couronne-citrouilles.png?v=2")}.deco-grimoire::before{background-image:url("shop/couronne-grimoire.png?v=2")}.deco-raven::before{background-image:url("shop/couronne-corbeau.png?v=2")}}
.banner-atelier-nuit{background:url("shop/fond-atelier-nuit.gif") center/cover no-repeat}
.banner-vallee-aube{background:url("shop/fond-vallee-aube.gif") center/cover no-repeat}
.pcard-banner.banner-atelier-nuit,.pcard-banner.banner-vallee-aube{background-position:50% var(--banner-y,50%)}