/* Capsule de contact flottante : appel + WhatsApp.
   Presente sur toutes les pages, le markup est injecte par fab.js.
   Reprend la D.A. du site : pastilles arrondies, navy profond et les
   teintes du logo (--b2 cyan pour l'appel, --b3 aqua pour WhatsApp). */

.fab{
  position:fixed;
  inset-inline-end:22px;
  bottom:22px;
  z-index:120;                 /* au-dessus de la barre de nav (100), sous les modales (200) */
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:12px;
}

.fab-btn{
  display:inline-flex;
  align-items:center;
  height:54px;
  border-radius:100px;
  color:#fff;
  box-shadow:0 12px 30px rgba(11,29,43,.30);
  overflow:hidden;
  transition:transform .25s cubic-bezier(.2,.7,.2,1),background .25s,box-shadow .25s;
}
.fab-btn .ico{
  flex:none;
  width:54px;height:54px;
  display:flex;align-items:center;justify-content:center;
}
.fab-btn .ico svg{width:23px;height:23px;display:block}

/* le libelle se deploie au survol : le bouton passe de la pastille ronde a la capsule */
.fab-lab{
  white-space:nowrap;
  font-size:14px;font-weight:500;
  max-width:0;opacity:0;overflow:hidden;
  transition:max-width .38s cubic-bezier(.2,.7,.2,1),opacity .24s,padding .38s cubic-bezier(.2,.7,.2,1);
}
.fab-btn:hover .fab-lab,
.fab-btn:focus-visible .fab-lab{max-width:180px;opacity:1;padding-inline-end:22px}

.fab-btn:hover,.fab-btn:focus-visible{transform:translateY(-2px);box-shadow:0 16px 38px rgba(11,29,43,.36)}
.fab-btn:focus-visible{outline:2px solid var(--b3);outline-offset:3px}

/* appel : navy du site, icone dans le cyan du logo */
.fab-call{background:var(--navy-deep)}
.fab-call:hover{background:#123a4d}
.fab-call .ico svg{fill:var(--b2)}

/* whatsapp : aqua du logo, texte sombre pour le contraste */
.fab-wa{background:var(--b3);color:#06251f}
.fab-wa:hover{background:#00e6c4}
.fab-wa .ico svg{fill:currentColor}

@media(max-width:560px){
  .fab{inset-inline-end:14px;bottom:14px;gap:10px}
  .fab-btn{height:48px}
  .fab-btn .ico{width:48px;height:48px}
  .fab-btn .ico svg{width:21px;height:21px}
}

@media(prefers-reduced-motion:reduce){
  .fab-btn,.fab-lab{transition:none}
  .fab-btn:hover,.fab-btn:focus-visible{transform:none}
}