#observatoire-invite, #obs-ouvrir, #obs-reglages {
  color:var(--cream,#f3ead3); background:var(--petrol,#101f29); border:1px solid #597379;
  border-radius:2px; font:1rem/1.4 system-ui,sans-serif; touch-action:manipulation;
}
#observatoire-invite[hidden], #obs-ouvrir[hidden], #obs-reglages [hidden] { display:none !important }
#observatoire-invite, #obs-ouvrir {
  position:fixed; z-index:3; right:max(.55rem,env(safe-area-inset-right)); top:max(.55rem,env(safe-area-inset-top));
}
#observatoire-invite { width:min(25rem,48vw); max-height:45vh; overflow:auto; padding:.7rem .9rem; border-top:3px solid var(--brass,#c9b48a) }
#observatoire-invite p { font-size:.9rem; margin:0 0 .5rem }
#observatoire-invite .obs-heading { font:700 1.2rem/1.08 var(--display,system-ui); color:var(--cream,#f3ead3) }
#obs-ouvrir { min-height:44px; padding:.4rem .7rem; cursor:pointer; font:600 .9rem/1.2 var(--display,system-ui) }
#obs-ouvrir small, #obs-details small { color:var(--brass,#c9b48a); font:.7rem var(--mono,monospace) }
#obs-reglages { box-sizing:border-box; width:min(32rem,calc(100vw - 1rem)); max-width:calc(100vw - 1rem);
  max-height:calc(100dvh - 1rem); margin:auto; padding:clamp(1rem,4vw,1.6rem); overflow:auto; border-top:3px solid var(--brass,#c9b48a) }
#obs-reglages::backdrop { background:#08141bd9 }
#obs-reglages h2 { margin:0 0 .75rem; font:700 clamp(1.6rem,5vw,2.15rem)/1.1 var(--display,system-ui) }
#obs-reglages h2:focus { outline:none }
#obs-reglages p { margin:.6rem 0; color:var(--body,#e2dccb) }
#obs-reglages #obs-etat { margin:.9rem 0; padding-left:.65rem; border-left:2px solid var(--brass,#c9b48a); color:var(--cream,#f3ead3) }
.obs-actions { display:flex; gap:.4rem; flex-wrap:wrap }
.obs-actions button { box-sizing:border-box; min-height:44px; min-width:5.1rem; padding:.45rem .75rem; cursor:pointer;
  color:var(--cream,#f3ead3); background:#20363f; border:1px solid #72888b; border-radius:2px;
  font:650 1rem/1.15 var(--display,system-ui) }
#obs-details, #obs-fermer { background:transparent }
.obs-actions button:focus-visible, #obs-ouvrir:focus-visible { outline:3px solid var(--cream,#f3ead3); outline-offset:2px }
@media (orientation:portrait) {
  #observatoire-invite { width:calc(100vw - 1.1rem); max-width:27rem; max-height:34dvh }
}
@media (max-height:450px) {
  #observatoire-invite { padding:.45rem .65rem; max-height:51dvh }
  #observatoire-invite p { font-size:.8rem; margin-bottom:.3rem }
  #obs-reglages { padding:.65rem .85rem }
}