.hp{max-width:1250px;margin:24px auto;color:#172b4d}.hp .hp-card{background:#fff;border:1px solid #dce4ed;border-radius:12px;padding:22px;margin:18px 0}.hp .hp-filters{display:flex;flex-wrap:wrap;align-items:end;gap:14px}.hp label{display:block;font-weight:600}.hp input,.hp select,.hp textarea{display:block;box-sizing:border-box;max-width:100%;padding:8px;border:1px solid #b8c5d5;border-radius:5px;background:white;color:#172b4d}.hp textarea{width:100%;min-height:70px;margin:8px 0}.hp button{cursor:pointer;padding:8px 16px}.hp .hp-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.hp-kpis strong{font-size:28px;color:#175e9b}.hp .hp-bar{display:grid;grid-template-columns:minmax(120px,1fr) 2fr 90px;align-items:center;gap:14px;margin:14px 0}.hp meter{width:100%;height:24px;accent-color:#247ba0}.hp .hp-scroll{overflow-x:auto}.hp table{width:100%;border-collapse:collapse;background:#fff}.hp th,.hp td{padding:12px;text-align:left;border-bottom:1px solid #e5eaf0;vertical-align:top}.hp td form{min-width:150px}.hp td input{width:100%}@media(max-width:600px){.hp .hp-kpis{grid-template-columns:1fr}.hp .hp-bar{grid-template-columns:1fr}.hp .hp-card{padding:14px}}

/* Hourvia Premium 1.0.7 — congés : vraie mise en page mobile */
@media (max-width: 700px) {
  .hp {
    width: 100%;
    max-width: 100%;
    margin: 14px auto;
    box-sizing: border-box;
  }

  .hp h1,
  .hp h2 {
    line-height: 1.2;
    overflow-wrap: normal;
    word-break: normal;
  }

  .hp .hp-card {
    padding: 14px;
    margin: 14px 0 18px;
    border-radius: 12px;
  }

  /* Formulaire salarié : dates + demi-journées en 2 colonnes propres. */
  #hourvia-leaves .hp-card .hp-filters {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
    gap: 14px 12px;
    align-items: end;
    width: 100%;
  }

  #hourvia-leaves .hp-card .hp-filters > label {
    min-width: 0;
    width: 100%;
    margin: 0;
  }

  #hourvia-leaves .hp-card .hp-filters > label:nth-child(5) {
    grid-column: 1 / -1;
  }

  .hp input,
  .hp select,
  .hp textarea {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 16px;
  }

  .hp input,
  .hp select {
    min-height: 46px;
  }

  .hp textarea {
    min-height: 92px;
    resize: vertical;
  }

  #hourvia-leaves .hp-card > label {
    margin-top: 14px;
    line-height: 1.35;
  }

  #hourvia-leaves .hp-card > button {
    width: 100%;
    min-height: 46px;
    margin-top: 2px;
    font-weight: 700;
  }

  /* Le tableau devient une liste de cartes lisible sur téléphone. */
  .hp .hp-scroll {
    overflow: visible;
    width: 100%;
  }

  .hp .hp-table {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
  }

  .hp .hp-table thead {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .hp .hp-table tbody,
  .hp .hp-table tr,
  .hp .hp-table td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  .hp .hp-table .hp-leave-row {
    margin: 0 0 14px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #dce4ed;
    border-radius: 12px;
  }

  .hp .hp-table .hp-leave-row td {
    display: grid;
    grid-template-columns: minmax(105px, 38%) minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 9px 0;
    border: 0;
    border-bottom: 1px solid #edf1f5;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .hp .hp-table .hp-leave-row td:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }

  .hp .hp-table .hp-leave-row td::before {
    content: attr(data-label);
    font-weight: 700;
    color: #172b4d;
    line-height: 1.35;
  }

  .hp .hp-table--employee .hp-leave-row td[data-label="Salarié"] {
    display: none;
  }

  .hp .hp-table td form {
    min-width: 0;
    width: 100%;
  }

  .hp .hp-table td form button,
  .hp .hp-table td form .button {
    width: 100%;
    margin-top: 6px;
  }

  .hp .hp-empty-row {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
  }

  .hp .hp-empty-row td {
    display: block;
    width: 100%;
    padding: 14px;
    background: #fff;
    border: 1px solid #dce4ed;
    border-radius: 12px;
    line-height: 1.4;
  }
}

@media (max-width: 360px) {
  #hourvia-leaves .hp-card .hp-filters {
    grid-template-columns: 1fr;
  }

  #hourvia-leaves .hp-card .hp-filters > label:nth-child(5) {
    grid-column: auto;
  }

  .hp .hp-table .hp-leave-row td {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* Hourvia Premium 1.0.8 — listes déroulantes des congés sur mobile */
.hp .hp-mobile-select {
  display: none;
}

@media (max-width: 700px) {
  #hourvia-leaves .hp-native-select--mobile-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  #hourvia-leaves .hp-mobile-select {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
  }

  #hourvia-leaves .hp-mobile-select__button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 10px 42px 10px 12px;
    border: 1px solid #b8c5d5;
    border-radius: 8px;
    background: #fff;
    color: #172b4d;
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
    text-align: left;
    box-sizing: border-box;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  #hourvia-leaves .hp-mobile-select__button::after {
    content: '';
    position: absolute;
    right: 15px;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -6px;
    border-right: 2px solid #52677f;
    border-bottom: 2px solid #52677f;
    transform: rotate(45deg);
    transition: transform .15s ease, margin-top .15s ease;
    pointer-events: none;
  }

  #hourvia-leaves .hp-mobile-select.is-open .hp-mobile-select__button {
    border-color: #247ba0;
    box-shadow: 0 0 0 3px rgba(36, 123, 160, .15);
  }

  #hourvia-leaves .hp-mobile-select.is-open .hp-mobile-select__button::after {
    margin-top: -2px;
    transform: rotate(225deg);
  }

  #hourvia-leaves .hp-mobile-select__list {
    display: none;
    position: absolute;
    z-index: 99999;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    width: 100%;
    max-height: min(280px, 45vh);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px;
    border: 1px solid #c7d2df;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(23, 43, 77, .2);
    box-sizing: border-box;
  }

  #hourvia-leaves .hp-mobile-select.is-open .hp-mobile-select__list {
    display: block;
  }

  #hourvia-leaves .hp-mobile-select.is-up .hp-mobile-select__list {
    top: auto;
    bottom: calc(100% + 6px);
  }

  #hourvia-leaves .hp-mobile-select__option {
    display: block;
    width: 100%;
    min-height: 46px;
    margin: 0;
    padding: 11px 12px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #172b4d;
    font: inherit;
    font-size: 16px;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
  }

  #hourvia-leaves .hp-mobile-select__option + .hp-mobile-select__option {
    margin-top: 2px;
  }

  #hourvia-leaves .hp-mobile-select__option.is-selected {
    background: #edf6fb;
    color: #145d86;
    font-weight: 700;
  }

  #hourvia-leaves .hp-mobile-select__option:focus-visible,
  #hourvia-leaves .hp-mobile-select__button:focus-visible {
    outline: 3px solid rgba(36, 123, 160, .28);
    outline-offset: 1px;
  }

  /* Le champ Type garde une vraie largeur de téléphone. */
  #hourvia-leaves .hp-card .hp-filters > label:nth-child(5) .hp-mobile-select {
    width: 100%;
  }
}