/* show/hide */
.ro-modal[hidden]{ display:none; }

/* overlay plein écran pour capter clic + ESC */
.ro-modal{
  position: fixed;
  inset: 0;
  z-index: 900;
}


/* backdrop léger (tu peux le rendre transparent si tu veux juste fermer au clic dehors) */
.ro-modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.15);
}

/* PANEL = ta “carte” bas-gauche */
.ro-modal__panel{
  position: absolute;
  left: 100px;
  bottom: 50px;

  width: 340px;
  height: 430px;

  background: #fff;
  border-radius: 24px;
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 20px 60px rgba(0,0,0,.18);

  z-index: 2;
  outline: none;
  overflow: hidden; /* ou auto si tu veux scroller dedans */

  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* HEADER */
.ro-modal__header{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ro-modal__close{
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
}

/* LIENS EN LIGNE */
.ro-modal__links{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ro-modal__links a{
  text-decoration: none;
  font-weight: 600;
  color: var(--ro-dolphing-700);
}

/* FOOTER en bas */
.ro-modal__footer{
  margin-top: auto;
  font-size: 14px;
  opacity: .7;
}


/* si la fenêtre est trop petite, on garde un padding safe */
@media (max-width: 520px){
  .ro-modal__panel{
    left: 16px;
    right: 16px;
    width: auto;
    bottom: 16px;
    height: min(430px, calc(100vh - 32px));
  }
}