/* ================================================================
   Boutons flottants (WhatsApp + retour en haut) — widgets communs
   a TOUTES les pages.
   Fichier autonome : il est charge aussi bien par les pages du
   nouveau design (qui utilisent vtc.css) que par les pages
   historiques (Devis.html et les pages PHP de confirmation, qui
   tournent encore sous Bootstrap). Il ne contient volontairement
   aucune regle globale, pour ne rien casser sur ces pages.

   Repartition : WhatsApp en bas GAUCHE, retour en haut en bas
   DROITE. Les deux ne se croisent jamais.
   ================================================================ */

.wa-float{
  position:fixed;
  left:20px;
  bottom:20px;
  z-index:70;
  display:flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  border-radius:50%;
  background:#25D366;
  box-shadow:0 6px 20px rgba(17,18,20,.18);
  text-decoration:none;
  transition:transform .22s ease, box-shadow .22s ease;
}
.wa-float:hover,
.wa-float:focus{
  transform:translateY(-3px) scale(1.06);
  box-shadow:0 12px 28px rgba(37,211,102,.4);
  background:#25D366;
}
.wa-float:focus-visible{outline:3px solid #111214;outline-offset:3px}
.wa-float svg{display:block;width:30px;height:30px}

/* Ecrans etroits : legerement plus compact + zone sure iOS */
@media (max-width:600px){
  .wa-float{
    left:16px;
    bottom:calc(16px + env(safe-area-inset-bottom, 0px));
    width:52px;
    height:52px;
  }
  .wa-float svg{width:28px;height:28px}
}

@media (prefers-reduced-motion:reduce){
  .wa-float{transition:none}
  .wa-float:hover,.wa-float:focus{transform:none}
}

/* Ligne "WhatsApp : 06 11 24 37 80" dans la section Contact */
.wa-line{display:inline-flex;align-items:center;gap:9px}
.wa-line svg{flex:0 0 auto;width:18px;height:18px}

/* ================================================================
   Bouton "retour en haut" — bas DROITE (le WhatsApp occupe la
   gauche). Masque par defaut : c'est le script js/flottants.js qui
   ajoute la classe .show au-dela de 400px de defilement. Sans
   JavaScript le bouton reste donc invisible, ce qui est voulu.
   ================================================================ */

.up-float{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:65;
  display:flex;
  align-items:center;
  justify-content:center;
  width:50px;
  height:50px;
  padding:0;
  border:none;
  border-radius:50%;
  background:#111214;
  box-shadow:0 6px 20px rgba(17,18,20,.22);
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s, background .2s ease;
}
.up-float.show{opacity:1;visibility:visible;transform:translateY(0)}
.up-float.show:hover{background:#2b2c31;transform:translateY(-3px)}
.up-float:focus-visible{outline:3px solid #25D366;outline-offset:3px}
.up-float svg{display:block;width:22px;height:22px}

@media (max-width:600px){
  .up-float{
    right:16px;
    bottom:calc(16px + env(safe-area-inset-bottom, 0px));
    width:46px;
    height:46px;
  }
  .up-float svg{width:20px;height:20px}
}

@media (prefers-reduced-motion:reduce){
  .up-float{transition:opacity .25s ease, visibility .25s; transform:none}
  .up-float.show,.up-float.show:hover{transform:none}
}