[data-tip]{ position:relative; }

.home-badge{
  position:fixed;
  top:12px;
  left:12px;
  width:40px;
  height:40px;
  border-radius:50%;
  background:#8B6F47;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,0.25);
  z-index:99999;
  transition:background 0.2s ease, transform 0.2s ease;
}
.home-badge:hover, .home-badge:active{
  background:#3A2E24;
  transform:scale(1.08);
}

/* --- Info-bulles personnalisees, en remplacement des bulles natives du
   navigateur (attribut title). Ajoutees le 22 aout pour harmoniser l'ensemble
   du site avec sa propre palette plutot que de dependre du systeme/navigateur
   de chaque visiteur. Technique 100% CSS (aucun JS necessaire) : le texte de
   la bulle vient de l'attribut data-tip, affiche via content:attr(). --- */
[data-tip]::after{
  content:attr(data-tip);
  position:absolute;
  bottom:calc(100% + 8px);
  left:50%;
  transform:translateX(-50%);
  background-color:#F3F0DE;
  background-image:url('../images/paper-texture.png');
  background-repeat:repeat;
  color:#3A2E24;
  border:1px solid #8B6F47;
  border-radius:4px;
  padding:5px 9px;
  font-family:'Work Sans', Arial, sans-serif;
  font-size:12px;
  font-weight:500;
  line-height:1.3;
  white-space:nowrap;
  box-shadow:0 3px 8px rgba(0,0,0,0.2);
  opacity:0;
  visibility:hidden;
  transition:opacity 0.18s ease 0.15s, visibility 0.18s ease 0.15s;
  pointer-events:none;
  z-index:100000;
}
[data-tip]::before{
  content:"";
  position:absolute;
  bottom:calc(100% + 3px);
  left:50%;
  transform:translateX(-50%);
  border:5px solid transparent;
  border-top-color:#8B6F47;
  opacity:0;
  visibility:hidden;
  transition:opacity 0.18s ease 0.15s, visibility 0.18s ease 0.15s;
  pointer-events:none;
  z-index:100000;
}
[data-tip]:hover::after, [data-tip]:hover::before,
[data-tip]:focus-visible::after, [data-tip]:focus-visible::before{
  opacity:1;
  visibility:visible;
}
/* Variante pour les bulles qui doivent s'ouvrir vers le bas plutot que vers le
   haut (element trop pres du bord superieur de l'ecran) */
[data-tip-below]::after{ bottom:auto; top:calc(100% + 8px); }
[data-tip-below]::before{ bottom:auto; top:calc(100% + 3px);
  border-top-color:transparent; border-bottom-color:#8B6F47; }