/* ═══════════════════════════════════════════════════════════
   OVERLAY LOGO — 1920×1080, fond transparent
   ═══════════════════════════════════════════════════════════ */

:root{
  /* ─────────────────────────────────────────────────────────
     POSITION DU LOGO

     Ces quatre valeurs sont EXACTEMENT les marges que tu m'as
     données depuis ta scène OBS. Ce sont des distances par
     rapport aux bords du canvas 1920×1080.

     Le logo est centré et redimensionné automatiquement dans
     la zone que ces quatre valeurs délimitent, en conservant
     ses proportions. Tu peux donc les modifier librement sans
     jamais avoir à recalculer une largeur ou une hauteur.
     ───────────────────────────────────────────────────────── */
  --logoTop:    167px;
  --logoLeft:   682px;
  --logoBottom:  36px;
  --logoRight:  361px;

  /* Opacité globale — 1 = opaque, .5 = à moitié transparent */
  --logoOpacity: 1;

  /* Ombre portée. Mets  none  pour la retirer. */
  --logoShadow: drop-shadow(0 12px 40px rgba(0,0,0,.45));
}

html, body{
  margin: 0;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  background: transparent;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.root{
  position: absolute;
  inset: 0;
  background: transparent;
}

.logoBox{
  position: absolute;
  top:    var(--logoTop);
  left:   var(--logoLeft);
  bottom: var(--logoBottom);
  right:  var(--logoRight);

  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.logoBox img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;

  opacity: var(--logoOpacity);
  filter: var(--logoShadow);
}

/* Pas d'icône "image cassée" si le fichier est absent */
.logoBox img:not([src]),
.logoBox img[src=""]{ opacity: 0; }