/* ============================================================
   AUREA — ambiance.css (passe 10, V4 1.1)
   Bouton discret du lecteur de musique d'ambiance, dans le header, à droite
   près du menu. Injecté par scripts/ambiance.js (seulement si la piste existe).
   ============================================================ */
.ambiance-btn{
  margin-left:auto;              /* pousse le bouton + le menu vers la droite */
  flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;padding:7px;
  background:none;border:0;border-radius:50%;cursor:pointer;
  color:inherit;line-height:0;
  -webkit-tap-highlight-color:transparent;
  transition:color .35s var(--ease-cine), opacity .35s var(--ease-cine);
}
.ambiance-btn svg{
  width:22px;height:22px;display:block;
  fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
.ambiance-btn .amb-spk{fill:currentColor;stroke:none}
.ambiance-btn .amb-waves,.ambiance-btn .amb-x{transition:opacity .3s var(--ease-cine)}
.ambiance-btn.is-on  .amb-waves{opacity:1}
.ambiance-btn.is-on  .amb-x{opacity:0}
.ambiance-btn.is-off .amb-waves{opacity:0}
.ambiance-btn.is-off .amb-x{opacity:1}
.ambiance-btn:hover{color:var(--bronze)}
.ambiance-btn:focus{outline:none}
.ambiance-btn:focus-visible{outline:1px solid currentColor;outline-offset:3px}

/* Sur la hero (header transparent, au-dessus d'images sombres) : ombre portée
   légère pour garder l'icône lisible sur fond clair comme sombre. */
.site-header.at-top .ambiance-btn{filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
.site-header.solid .ambiance-btn{filter:none}

/* Repli si aucun header (pages légales minimales) : pastille flottante discrète. */
.ambiance-btn--float{
  position:fixed;top:14px;right:16px;z-index:130;
  background:rgba(253,251,247,.82);backdrop-filter:blur(6px);
  box-shadow:0 2px 10px rgba(20,15,10,.14);color:var(--encre);
}

@media (max-width:1023px){
  .ambiance-btn{width:34px;height:34px}
  .ambiance-btn svg{width:20px;height:20px}
}
@media (prefers-reduced-motion:reduce){
  .ambiance-btn,.ambiance-btn *{transition:none}
}

/* ============================================================
   Passe 11 (M.a) : invitation « Activer le son » sur l'accueil.
   En bas a GAUCHE, visible des l'ecran de chargement et pendant toute l'ouverture
   (au-dessus du loader). Meme famille que le medaillon : capitales Poppins espacees
   comme « Faites defiler », fond translucide, filet ivoire ; filet bronze a l'etat
   actif. Icone : quatre barres verticales (egaliseur), immobiles et basses quand le
   son est coupe, animees quand ca joue. Cablee par scripts/ambiance.js.
   ============================================================ */
.son-invite{
  position:fixed;z-index:10001;
  left:clamp(18px,2.3vw,40px);
  bottom:max(clamp(20px,2.3vw,38px), calc(env(safe-area-inset-bottom) + 14px));
  display:inline-flex;align-items:center;gap:11px;
  padding:10px 16px;border-radius:999px;cursor:pointer;
  background:rgba(20,15,10,.34);border:1px solid rgba(253,251,247,.5);
  color:var(--blanc);-webkit-tap-highlight-color:transparent;
  opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity .6s var(--ease-cine),transform .6s var(--ease-cine),
             border-color .5s var(--ease-cine),background-color .5s var(--ease-cine)}
.son-invite.is-shown{opacity:1;transform:none;pointer-events:auto}
.son-invite .si-txt{
  font-family:var(--font-body);font-weight:500;font-size:clamp(11px,.92vw,13px);line-height:1;
  letter-spacing:.3em;text-transform:uppercase;
  text-shadow:0 1px 2px rgba(0,0,0,.72),0 0 10px rgba(0,0,0,.5)}
/* egaliseur : 4 barres fines */
.son-invite .si-eq{display:inline-flex;align-items:flex-end;gap:2.5px;height:14px}
.son-invite .si-eq i{display:block;width:2px;height:4px;border-radius:1px;
  background:var(--blanc);transform-origin:50% 100%;
  box-shadow:0 1px 2px rgba(0,0,0,.6);transition:height .3s var(--ease-cine)}
/* etat actif : filet bronze, barres animees comme un egaliseur discret */
.son-invite.is-on{border-color:var(--bronze)}
.son-invite.is-on .si-eq i{background:var(--bronze);animation:si-eq 1.1s ease-in-out infinite}
.son-invite.is-on .si-eq i:nth-child(1){animation-delay:0s;height:7px}
.son-invite.is-on .si-eq i:nth-child(2){animation-delay:.18s;height:12px}
.son-invite.is-on .si-eq i:nth-child(3){animation-delay:.36s;height:6px}
.son-invite.is-on .si-eq i:nth-child(4){animation-delay:.54s;height:10px}
@keyframes si-eq{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
@media (hover:hover){.son-invite:hover{background:rgba(20,15,10,.5)}}
.son-invite:focus{outline:none}
.son-invite:focus-visible{outline:1px solid rgba(253,251,247,.9);outline-offset:4px}
@media (max-width:480px){
  .son-invite{left:14px;padding:9px 13px;gap:9px}
  .son-invite .si-txt{font-size:10.5px;letter-spacing:.24em}
}
/* reduced-motion : aucune animation des barres (hauteur fixe lisible). */
@media (prefers-reduced-motion:reduce){
  .son-invite,.son-invite *{transition:none}
  .son-invite.is-on .si-eq i{animation:none}
}