/* ===========================================================
   MODALE / POPOVER "EN SAVOIR PLUS"
   Mobile = bottom sheet
   Desktop = popover bas gauche
=========================================================== */

:root{
  --ro-more-z: 1300;

  /* largeur sidebar connues */
  --ro-sidebar-w-closed: 74px;
  --ro-sidebar-w-open: 170px;

  /* version safe desktop : toujours visible même sidebar ouverte */
  --ro-more-desktop-left: calc(var(--ro-sidebar-w-open) + 16px);
  --ro-more-desktop-bottom: 16px;
  --ro-more-desktop-width: 380px;
  --ro-more-desktop-max-h: min(72vh, 560px);
}

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

/* container */
.ro-modal{
  position: fixed;
  inset: 0;
  z-index: var(--ro-more-z);
}

/* backdrop */
.ro-modal__backdrop{
  position: absolute;
  inset: 0;
  transition: opacity 220ms ease;
  background: color-mix(in srgb, var(--ro-dolphing-600) 50%, transparent);
}

/* panel : base mobile */
.ro-modal__panel{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  background: var(--ro-bg-0);
  border: 1px solid var(--ro--border-infos);
  border-radius: var(--ro-radius-16) var(--ro-radius-16) 0 0;

  padding:
    var(--ro-space-12)
    var(--ro-space-12)
    calc(var(--ro-space-12) + var(--ro-tabbar-h, var(--ro-size-80)));

  height: min(88vh, 46rem);
  overflow: auto;

  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.18);
  outline: none;

  transform: translateY(110%);
  transition: transform 360ms cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}

.ro-modal:not([hidden]) .ro-modal__panel{
  transform: translateY(0);
}

/* header */
.ro-modal__header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ro-space-10);
}

.ro-modal__header h2{
  margin: 0;
  font-size: var(--ro-font-size-md);
  font-family: var(--ro-font-heading);
  color: var(--ro-text-900);
}

/* close */
.ro-modal__close{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--ro-size-40, 40px);
  block-size: var(--ro-size-40, 40px);

  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ro-text-900);
  cursor: pointer;
}

.ro-modal__close:hover{
  background: var(--ro-neutral-10);
}

/* body */
.ro-modal__links{
  display: grid;
  gap: var(--ro-space-8);
  margin-top: var(--ro-space-12);
}

/* items */
.ro-modal__links a{
  display: flex;
  align-items: center;
  gap: var(--ro-space-10);
  width: 100%;

  padding: var(--ro-space-12);
  border-radius: var(--ro-radius-12);

  background: var(--ro-bg-0);
  border: 1px solid var(--ro--border-dolphing);

  color: var(--ro-text-900);
  text-decoration: none;
  font-weight: 500;
  transition:
    background-color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

.ro-modal__links a:hover{
  background: color-mix(in srgb, var(--ro-dolphing-100) 78%, white);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ro-dolphing-400) 28%, transparent);
}

.ro-modal__links a:focus-visible{
  outline: 2px solid var(--ro-focus-ring-color);
  outline-offset: 2px;
  background: color-mix(in srgb, var(--ro-dolphing-100) 82%, white);
}

.ro-modal__links a:active{
  transform: translateY(1px);
}

/* footer */
.ro-modal__footer{
  margin-top: var(--ro-space-12);
  padding-top: var(--ro-space-8);
  padding-bottom: var(--ro-space-32);

  font-size: var(--ro-font-size-sm, 0.875rem);
  color: var(--ro-text-700);
  opacity: 0.85;
}

/* ===========================================================
   DESKTOP
=========================================================== */
@media (min-width: 900px){

  /* on ne veut pas d'overlay plein écran en desktop */
  .ro-modal{
    inset: auto;
    pointer-events: none;
  }

  .ro-modal__backdrop{
    display: none;
  }

  .ro-modal__panel{
    position: fixed;
    left: var(--ro-more-desktop-left);
    bottom: var(--ro-more-desktop-bottom);
    right: auto;

    width: min(var(--ro-more-desktop-width), calc(100vw - var(--ro-more-desktop-left) - 16px));
    height: auto;
    max-height: var(--ro-more-desktop-max-h);
    overflow: auto;

    padding: var(--ro-space-12);
    border-radius: var(--ro-radius-16);

    box-shadow:
      0 12px 30px rgba(0,0,0,.10),
      0 2px 8px rgba(0,0,0,.06);

    transform: translateY(8px) scale(.98);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
      opacity .18s ease,
      transform .18s ease,
      visibility 0s linear .18s;
  }

  .ro-modal:not([hidden]) .ro-modal__panel{
    transform: translateY(0) scale(1);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
      opacity .18s ease,
      transform .18s ease,
      visibility 0s;
  }

  /* petite flèche */
  .ro-modal__panel::before{
    content: "";
    position: absolute;
    left: 18px;
    bottom: -7px;
    width: 14px;
    height: 14px;
    background: var(--ro-bg-0);
    border-right: 1px solid var(--ro--border-infos);
    border-bottom: 1px solid var(--ro--border-infos);
    transform: rotate(45deg);
  }

  .ro-modal__footer{
    padding-bottom: 0;
  }
}