/* ============================================================
   Accès espace client — bouton flottant
   ============================================================ */
.fab{
  position:fixed; right:20px; bottom:20px; z-index:80;
  display:inline-flex; align-items:center; gap:0;
  height:56px; padding:0 16px; border-radius:100px;
  background:linear-gradient(160deg,var(--indigo),var(--accent));
  color:#fff; text-decoration:none; font-weight:600; font-size:15px;
  box-shadow:0 10px 28px rgba(46,39,96,.34), 0 2px 6px rgba(29,33,68,.18);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), gap .25s var(--ease), padding .25s var(--ease);
  overflow:hidden;
}
.fab svg{width:24px;height:24px;flex:none}
.fab span{
  max-width:0; opacity:0; white-space:nowrap;
  transition:max-width .3s var(--ease), opacity .2s var(--ease);
}
.fab:hover,.fab:focus-visible{
  gap:10px; padding:0 22px;
  transform:translateY(-2px);
  box-shadow:0 16px 38px rgba(46,39,96,.42), 0 3px 8px rgba(29,33,68,.2);
}
.fab:hover span,.fab:focus-visible span{max-width:160px;opacity:1}
.fab:focus-visible{outline:3px solid var(--lilac);outline-offset:3px}
.fab:active{transform:translateY(0)}

/* Sur petit écran le libellé reste visible : pas de survol au doigt */
@media (max-width:720px){
  .fab{right:14px; bottom:14px; height:50px; padding:0 18px; gap:9px; font-size:14px}
  .fab span{max-width:160px;opacity:1}
  .fab svg{width:21px;height:21px}
}
@media (prefers-reduced-motion:reduce){
  .fab,.fab span{transition:none}
  .fab:hover,.fab:focus-visible{transform:none}
}

/* ============================================================
   Sous l'Écorce — entrée discrète vers le jeu, au pied de page
   ============================================================ */
.egg{
  display:inline-flex; vertical-align:middle;
  padding:8px; margin:-8px 2px -8px -8px;
  color:inherit; opacity:.5;
  transition:opacity .25s, color .25s, transform .25s;
}
.egg svg{width:16px;height:16px}
.egg:hover,.egg:focus-visible{opacity:1; color:#ffc24a; transform:translateY(-2px) rotate(-8deg)}
.egg:focus-visible{outline:2px solid #ffc24a; outline-offset:-4px; border-radius:8px}
@media (prefers-reduced-motion:reduce){
  .egg{transition:none}
  .egg:hover,.egg:focus-visible{transform:none}
}