/* =====================================================
   SAVON PETIT PARIS — BOUTON COMPTE GLOBAL
   Chargé sur toutes les pages du site.
===================================================== */
.vvv-spp-account-button,
.vvv-spp-account-button *{
  box-sizing:border-box;
}

.vvv-spp-account-button{
  --vvv-spp-account-button-rose:#fbc7b7;
  --vvv-spp-account-button-rose-deep:#ebbaa9;
  position:relative;
  isolation:isolate;
  display:inline-flex;
  align-items:center;
  gap:12px;
  width:auto;
  max-width:100%;
  min-height:56px;
  padding:7px 14px 7px 8px;
  border:1px solid rgba(17,17,17,.10);
  border-radius:999px;
  background:linear-gradient(135deg,#fffdfb 0%,#fff2ed 100%);
  color:#171210!important;
  text-decoration:none!important;
  font-family:'Mulish',sans-serif;
  line-height:1;
  box-shadow:0 14px 38px rgba(62,34,25,.12),inset 0 1px 0 rgba(255,255,255,.92);
  overflow:hidden;
  transform:translateZ(0);
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease,background .35s ease;
}

.vvv-spp-account-button::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(115deg,transparent 22%,rgba(255,255,255,.84) 45%,transparent 68%);
  transform:translateX(-120%);
  transition:transform .8s ease;
}

.vvv-spp-account-button__glow{
  position:absolute;
  width:95px;
  height:95px;
  right:-42px;
  top:-54px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(251,199,183,.92),transparent 68%);
  filter:blur(10px);
  opacity:.62;
  pointer-events:none;
  transition:transform .45s ease,opacity .45s ease;
}

.vvv-spp-account-button__icon{
  position:relative;
  z-index:2;
  width:42px;
  height:42px;
  flex:0 0 42px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#111;
  color:#fff;
  box-shadow:0 10px 24px rgba(0,0,0,.20);
  transition:transform .35s ease,background .35s ease,color .35s ease;
}

.vvv-spp-account-button__icon svg{
  display:block!important;
  width:22px!important;
  height:22px!important;
  min-width:22px!important;
  max-width:22px!important;
  min-height:22px!important;
  max-height:22px!important;
  margin:0!important;
  padding:0!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.65!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

.vvv-spp-account-button__content{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-width:0;
  line-height:1.08;
}

.vvv-spp-account-button__eyebrow{
  margin-bottom:4px;
  color:#a27364;
  font-size:8px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  white-space:nowrap;
}

.vvv-spp-account-button__label{
  max-width:120px;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#171210;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}

.vvv-spp-account-button__arrow{
  position:relative;
  z-index:2;
  margin-left:2px;
  color:#171210;
  font-size:17px;
  line-height:1;
  transition:transform .35s ease;
}

.vvv-spp-account-button.is-connected .vvv-spp-account-button__icon{
  background:var(--vvv-spp-account-button-rose-deep);
  color:#111;
}

.vvv-spp-account-button:hover{
  transform:translateY(-4px);
  border-color:rgba(235,186,169,.78);
  background:#fff;
  box-shadow:0 22px 52px rgba(62,34,25,.18),0 0 0 5px rgba(251,199,183,.16);
}

.vvv-spp-account-button:hover::before{
  transform:translateX(120%);
}

.vvv-spp-account-button:hover .vvv-spp-account-button__icon{
  transform:rotate(-6deg) scale(1.08);
  background:var(--vvv-spp-account-button-rose);
  color:#111;
}

.vvv-spp-account-button:hover .vvv-spp-account-button__arrow{
  transform:translateX(5px);
}

.vvv-spp-account-button:hover .vvv-spp-account-button__glow{
  transform:scale(1.35);
  opacity:.9;
}

.vvv-spp-account-button:focus-visible{
  outline:0;
  box-shadow:0 0 0 4px rgba(251,199,183,.52),0 20px 48px rgba(62,34,25,.16);
}

@media(max-width:767px){
  .vvv-spp-account-button{
    width:48px;
    min-width:48px;
    max-width:48px;
    height:48px;
    min-height:48px;
    padding:3px;
    gap:0;
    justify-content:center;
  }

  .vvv-spp-account-button__icon{
    width:42px;
    height:42px;
    flex-basis:42px;
  }

  .vvv-spp-account-button__content,
  .vvv-spp-account-button__arrow,
  .vvv-spp-account-button__glow{
    display:none!important;
  }

  .vvv-spp-account-button:hover{
    transform:translateY(-2px) scale(1.03);
  }
}