/* ─── Bouton « EA » et boîte de dialogue avec Camille ───────
   Palette fixe, comme le menu : la nuit d'Expérience Audio quel que soit
   le thème de la page. Au-dessus du contenu et de l'en-tête (z 21), sous
   le menu (z 26). */
.ea-bulle-btn {
  position: fixed; z-index: 23;
  bottom: clamp(1.5rem, 3.6vh, 2.6rem);
  right: clamp(1.6rem, 4vw, 3.2rem);
  width: 2.15rem; height: 2.15rem;
  background: none; border: none; padding: 0; cursor: pointer;
  opacity: .85;
  transition: opacity 1.12s ease;
}
/* Petit glissement au défilement (camille-bulle.js) */
.ea-bulle-btn.bouge-bas  { animation: ea-bouge-bas .7s cubic-bezier(.22,.61,.36,1); }
.ea-bulle-btn.bouge-haut { animation: ea-bouge-haut .7s cubic-bezier(.22,.61,.36,1); }
@keyframes ea-bouge-bas  { 40% { transform: translateY(5px); }  100% { transform: none; } }
@keyframes ea-bouge-haut { 40% { transform: translateY(-5px); } 100% { transform: none; } }
.ea-bulle-btn:hover, .ea-bulle-btn:focus-visible, html.ea-bulle-ouverte .ea-bulle-btn { opacity: 1; }
.ea-bulle-btn img { width: 100%; height: 100%; display: block; }
html.ea-bulle-cachee:not(.ea-bulle-ouverte) .ea-bulle-btn { opacity: 0; pointer-events: none; }

.ea-bulle {
  position: fixed; z-index: 24;
  right: clamp(1.6rem, 4vw, 3.2rem);
  bottom: calc(clamp(1.5rem, 3.6vh, 2.6rem) + 3rem);
  width: min(25rem, calc(100vw - 2.4rem));
  height: min(40rem, calc(100dvh - 9rem));
  display: flex; flex-direction: column;
  background: #0C0B09; color: #ECE7DC;
  border: 1px solid color-mix(in oklab, #ECE7DC 14%, transparent);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
  font-family: 'Outfit', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .45s ease, transform .45s cubic-bezier(.22,.61,.36,1), visibility 0s linear .45s;
}
html.ea-bulle-ouverte .ea-bulle {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .45s ease, transform .45s cubic-bezier(.22,.61,.36,1), visibility 0s;
}

.ea-bulle-tete {
  display: flex; align-items: center; gap: .9rem;
  padding: .95rem 1.1rem .85rem 1.3rem;
  border-bottom: 1px solid color-mix(in oklab, #ECE7DC 10%, transparent);
}
.ea-bulle-tete p { flex: 1; margin: 0; display: flex; align-items: baseline; gap: .8rem; }
.ea-bulle-nom { font-size: 1.15rem; font-weight: 300; letter-spacing: .01em; }
.ea-bulle-role {
  font-size: .64rem; letter-spacing: .3em; text-transform: uppercase;
  color: color-mix(in oklab, #ECE7DC 62%, #0C0B09);
}
.ea-bulle-plein, .ea-bulle-x {
  background: none; border: none; cursor: pointer; padding: .2rem .3rem;
  color: #ECE7DC; opacity: .6; text-decoration: none; font: inherit; line-height: 1;
  transition: opacity .5s ease;
}
.ea-bulle-plein { font-size: .95rem; }
.ea-bulle-x { font-size: 1.5rem; }
.ea-bulle-plein:hover, .ea-bulle-x:hover, .ea-bulle-plein:focus-visible, .ea-bulle-x:focus-visible { opacity: 1; }

.ea-bulle-corps { flex: 1; min-height: 0; }
.ea-bulle-frame { width: 100%; height: 100%; border: 0; display: block; background: #0C0B09; }

.ea-bulle-pied {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .55rem;
  padding: .8rem 1.3rem .9rem;
  border-top: 1px solid color-mix(in oklab, #ECE7DC 10%, transparent);
  font-size: .76rem; color: color-mix(in oklab, #ECE7DC 62%, #0C0B09);
}
.ea-bulle-coord { display: inline-flex; align-items: center; gap: .55rem; font-size: .8rem; letter-spacing: .02em; }
.ea-bulle-coord span { color: #E20612; transition: transform .5s cubic-bezier(.22,.61,.36,1); }   /* flèche → : rouge de la maison */
.ea-bulle-coord:hover span { transform: translateX(4px); }
.ea-bulle-pied a { color: #ECE7DC; opacity: .8; text-decoration: none; transition: opacity .5s ease; }
.ea-bulle-pied a:hover { opacity: 1; }
.ea-bulle-reseaux { margin-left: auto; display: inline-flex; gap: .7rem; }
.ea-bulle-reseaux svg { display: block; stroke: currentColor; stroke-width: 1.3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ea-bulle-reseaux .ig-dot { fill: currentColor; stroke: none; }

/* Mobile : plein écran */
@media (max-width: 640px) {
  .ea-bulle-btn { bottom: 1.3rem; right: 1.2rem; width: 1.9rem; height: 1.9rem; }
  .ea-bulle { inset: 0; width: auto; height: auto; border: none; border-radius: 0; }
  html.ea-bulle-ouverte .ea-bulle-btn { opacity: 0; pointer-events: none; }
  /* Plein écran : le bouton Menu de la page ne recouvre pas l'en-tête de la boîte */
  html.ea-bulle-ouverte .ea-menu-btn { opacity: 0; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ea-bulle { transform: none; }
}