:root{
  --fab-size: 56px;
  --fab-gap: 14px;

  /* Teinte par défaut, tu peux surcharger par app */
  --fab-core: rgba(255,255,255,0.10);
  --fab-border: rgba(255,255,255,0.16);
  --fab-text: var(--house-text, #f4f4ff);

  /* Anneau accent (Frigo: orange/violet) */
  --fab-ring-a: var(--accent, #f8b35a);
  --fab-ring-b: var(--accent2, #4a2c82);
}

.home-fab{
  position: fixed;
  right: max(var(--fab-gap), env(safe-area-inset-right));
  bottom: max(var(--fab-gap), env(safe-area-inset-bottom));
  width: var(--fab-size);
  height: var(--fab-size);
  border-radius: 999px;

  display: grid;
  place-items: center;

  text-decoration: none;
  color: var(--fab-text);
  z-index: 99999;

  background:
    linear-gradient(var(--fab-core), var(--fab-core)) padding-box,
    conic-gradient(from 210deg, var(--fab-ring-a), var(--fab-ring-b), var(--fab-ring-a)) border-box;
  border: 2px solid transparent;

  box-shadow: 0 14px 34px rgba(0,0,0,0.35);
  backdrop-filter: blur(10px);

  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.home-fab__icon{
  font-size: 22px;
  line-height: 1;
  transform: translateY(-1px);
}

/* petit feedback tactile */
.home-fab:active{ transform: translateY(1px) scale(0.98); }

/* Label desktop (optionnel) */
.home-fab__label{
  position: absolute;
  right: calc(var(--fab-size) + 10px);
  top: 50%;
  transform: translateY(-50%);
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.14);
  font-weight: 800;
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
}

@media (hover:hover){
  .home-fab:hover .home-fab__label{ opacity: 1; }
}

@media (max-width: 520px){
  :root{ --fab-size: 52px; }
  .home-fab__label{ display:none; }
}

.home-fab--tl{
  top: max(var(--fab-gap), env(safe-area-inset-top));
  left: max(var(--fab-gap), env(safe-area-inset-left));
  right: auto !important;
  bottom: auto !important;
}