/* Musique d'ambiance : bouton flottant pour couper / remettre le son.
   Le markup est injecte par audio.js. Place en bas a l'oppose de la capsule
   de contact : propriete logique, donc a gauche en anglais et a droite en
   arabe, ou la capsule passe a gauche. Les deux ne se croisent jamais. */

.snd{
  position:fixed;
  inset-inline-start:22px;
  bottom:22px;
  z-index:120;                 /* meme plan que la capsule de contact */
}

.snd-btn{
  position:relative;          /* ancre la pastille d'appel a l'action */
  display:inline-flex;
  align-items:center;
  height:46px;
  border-radius:100px;
  border:1px solid rgba(255,255,255,.14);
  background:var(--navy-deep);
  color:#fff;
  cursor:pointer;
  padding:0;
  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;
}
.snd-btn:hover,.snd-btn:focus-visible{
  background:#123a4d;
  transform:translateY(-2px);
  box-shadow:0 16px 38px rgba(11,29,43,.36);
}
.snd-btn:focus-visible{outline:2px solid var(--b3);outline-offset:3px}

.snd-btn .ico{
  flex:none;
  width:46px;height:46px;
  display:flex;align-items:center;justify-content:center;
}
.snd-btn .ico svg{width:20px;height:20px;display:block;fill:var(--b2)}

/* le libelle se deploie au survol, comme la capsule de contact */
.snd-lab{
  white-space:nowrap;
  font-size:13px;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);
}
.snd-btn:hover .snd-lab,
.snd-btn:focus-visible .snd-lab{max-width:170px;opacity:1;padding-inline-end:20px}

/* une seule des deux icones est visible selon l'etat */
.snd-btn .i-off{display:none}
.snd-btn .l-on{display:inline}
.snd-btn .l-off{display:none}
.snd-btn[aria-pressed="false"] .i-on{display:none}
.snd-btn[aria-pressed="false"] .i-off{display:block}
.snd-btn[aria-pressed="false"] .l-on{display:none}
.snd-btn[aria-pressed="false"] .l-off{display:inline}
.snd-btn[aria-pressed="false"] .ico svg{fill:rgba(255,255,255,.55)}

/* pastille d'appel a l'action tant que la musique n'a jamais ete lancee :
   sans elle, le bouton "son coupe" ressemble a un reglage deja choisi */
.snd-btn::after{
  content:"";
  position:absolute;
  inset-inline-start:34px;
  top:9px;
  width:8px;height:8px;
  border-radius:50%;
  background:var(--b3);
  opacity:0;
  transition:opacity .3s;
}
.snd.is-new .snd-btn::after{opacity:1;animation:sndPulse 2.4s ease-in-out infinite}
@keyframes sndPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.45}}

@media(max-width:560px){
  .snd{inset-inline-start:14px;bottom:14px}
  .snd-btn{height:44px}
  .snd-btn .ico{width:44px;height:44px}
  /* en mobile le libelle ne sert a rien : pas de survol, et la place manque */
  .snd-lab{display:none}
}

@media(prefers-reduced-motion:reduce){
  .snd-btn,.snd-lab{transition:none}
  .snd-btn:hover,.snd-btn:focus-visible{transform:none}
  .snd.is-new .snd-btn::after{animation:none}
}