/* =========================================================
   HONFLEUR INSIDER
   NUMEROS UTILES
   ========================================================= */


/* CARTE */

.rdh-num-map-wrap {
  position: relative;

  margin: 18px 0;

  overflow: hidden;

  border-radius: 22px;

  background: #e9eef4;
}

.rdh-num-map {
  width: 100%;
  height: 300px;

  background: #e9eef4;
}


/* GEOLOCALISATION */

.rdh-num-locate {
  position: absolute;

  z-index: 800;

  left: 14px;
  right: 14px;
  bottom: 14px;

  min-height: 46px;

  border: 0;
  border-radius: 16px;

  background: rgba(255,255,255,.96);
  color: #17345c;

  font-size: 15px;
  font-weight: 800;

  box-shadow:
    0 5px 18px rgba(0,0,0,.17);
}


/* MARQUEURS CARTE */

.rdh-num-marker {
  width: 34px;
  height: 34px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  border: 3px solid #fff;

  background: #17345c;
  color: #fff;

  font-size: 13px;
  font-weight: 900;

  box-shadow:
    0 3px 9px rgba(0,0,0,.28);
}


/* POSITION UTILISATEUR */

.rdh-num-user-marker {
  width: 20px;
  height: 20px;

  border-radius: 50%;

  border: 4px solid #fff;

  background: #2478ff;

  box-shadow:
    0 0 0 3px rgba(36,120,255,.28),
    0 2px 8px rgba(0,0,0,.25);
}


/* FICHES DES LIEUX */

.rdh-num-place {
  display: grid;

  grid-template-columns:
    42px
    minmax(0,1fr);

  gap: 12px;

  align-items: center;

  position: relative;
}


/* NUMERO CORRESPONDANT A LA CARTE */

.rdh-num-list-marker {
  width: 38px;
  height: 38px;

  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 38px;

  border-radius: 50%;

  border: 3px solid #fff;

  background: #17345c;
  color: #fff;

  font-size: 14px;
  font-weight: 900;

  box-shadow:
    0 3px 9px rgba(0,0,0,.16);
}


/* INFOS */

.rdh-num-place-content {
  min-width: 0;
}

.rdh-num-place-content strong {
  display: block;

  color: #17345c;

  font-size: 16px;
  line-height: 1.2;
}

.rdh-num-place-content span {
  display: block;

  margin-top: 4px;

  color: #758199;

  font-size: 13px;
  line-height: 1.3;
}


/* DISTANCE */

.rdh-num-distance {
  margin-top: 5px !important;

  color: #17345c !important;

  font-weight: 800;
}


/* BOUTONS */

.rdh-num-actions {
  grid-column: 1 / -1;

  display: flex;

  gap: 8px;

  margin-top: 5px;
}

.rdh-num-call,
.rdh-num-guide {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-height: 38px;

  padding: 0 14px;

  border-radius: 12px;

  text-decoration: none;

  font-size: 13px;
  font-weight: 800;
}

.rdh-num-call {
  background: #eef3f8;
  color: #17345c;
}

.rdh-num-guide {
  margin-left: auto;

  background: #17345c;
  color: #fff;
}


/* LIEU SELECTIONNE */

.rdh-practical-item.rdh-num-selected {
  outline:
    2px solid rgba(23,52,92,.18);

  background: #f7faff;
}


@media (max-width: 700px) {

  .rdh-num-map {
    height: 280px;
  }

  .rdh-num-map-wrap {
    border-radius: 20px;
  }

  .rdh-num-list-marker {
    width: 36px;
    height: 36px;

    flex-basis: 36px;

    font-size: 13px;
  }

}


/* =========================================================
   NUMEROS UTILES - TELEPHONE TOUJOURS VISIBLE
   ========================================================= */

.rdh-num-phone-visible {
  margin-top: 7px !important;

  color: #17345c !important;

  font-size: 16px !important;
  font-weight: 900 !important;

  letter-spacing: .01em;
}


/* =========================================================
   NUMEROS UTILES - ALIGNEMENT DES NUMEROS COURTS
   ========================================================= */

.rdh-num-phone-card {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr)
    90px
    auto !important;

  column-gap: 18px;
  row-gap: 0;

  align-items: center !important;
}

.rdh-num-phone-card .rdh-practical-phone-text {
  grid-column: 1;
  align-self: center;
}

.rdh-num-phone-card .rdh-practical-phone-number {
  grid-column: 2;

  justify-self: center !important;
  align-self: center !important;

  margin: 0 !important;

  text-align: center;
}

.rdh-num-phone-card .rdh-num-phone-actions {
  grid-column: 3;

  align-self: center;
  justify-self: end;

  margin: 0 !important;
}


/* MOBILE */

@media (max-width: 700px) {

  .rdh-num-phone-card {
    grid-template-columns:
      minmax(0, 1fr)
      52px
      auto !important;

    column-gap: 9px;
  }

  .rdh-num-phone-card .rdh-practical-phone-number {
    font-size: 20px;
  }

}