/* Sélecteur de dates : 5 choix rapides à gauche, début/fin + 2 mois de calendrier à droite.
   Ordinateur : panneau posé sous le bouton (positionné par main.js). Mobile : feuille en bas d'écran, 1 mois. */
.picker-backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(8, 12, 22, 0.14); animation: pk-fade 180ms var(--ease) both; }
:root[data-theme="dark"] .picker-backdrop { background: rgba(0, 0, 0, 0.35); }

.picker {
  position: absolute; z-index: 51; display: grid; grid-template-columns: minmax(0, 1fr); width: 220px; max-width: calc(100vw - 24px);
  overflow: hidden; border-radius: 18px; background: var(--card-hover); border: 1px solid var(--line-strong); border-top-color: var(--edge-top, var(--line-strong));
  box-shadow: var(--highlight), var(--shadow-pop); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  animation: pk-in 220ms var(--ease) both;
}

/* Mode « Personnalisée » : la liste reste à sa place (à droite) et le calendrier s'ouvre à sa gauche. */
.picker.is-custom { grid-template-columns: auto 220px; width: max-content; }
.picker.is-custom .picker__main, .picker.is-custom .picker__foot { grid-column: 1; }

/* ---------- Liste des choix ---------- */
.picker__presets { display: flex; flex-direction: column; gap: 2px; padding: 6px; }
.picker.is-custom .picker__presets { grid-column: 2; grid-row: 1 / span 2; padding: 6px; background: var(--well); border-left: 1px solid var(--line); }
.picker__preset {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; padding: 0 12px; border: 0; border-radius: 10px;
  background: transparent; color: var(--ink-2); font-size: var(--t-sm); font-weight: 500; text-align: left; white-space: nowrap;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.picker__preset:hover { background: var(--hover); color: var(--ink); }
.picker__preset[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-ink); font-weight: 650; }
.picker__preset svg { width: 15px; height: 15px; color: var(--accent); }
.picker__preset:not([aria-pressed="true"]) svg { color: var(--muted); } /* chevron de « Personnalisée » */

/* ---------- Début / fin + calendrier ---------- */
.picker__main { padding: 16px 20px 0; }
.picker__inputs { display: flex; align-items: flex-end; gap: 10px; }
.picker__inputs .field { flex: 1; }
.picker__inputs .field label { font-size: var(--t-xs); }
.picker__inputs .input { width: 100%; height: 38px; font-variant-numeric: tabular-nums; }
.picker__arrow { display: grid; place-items: center; height: 38px; color: var(--faint); }
.picker__arrow svg { width: 16px; height: 16px; }

.picker__cals { position: relative; display: flex; gap: 28px; padding-top: 16px; }
.picker__nav { position: absolute; top: 12px; width: 32px; height: 32px; }
.picker__nav--prev { left: -4px; }
.picker__nav--next { right: -4px; }
.cal__title { margin: 4px 0 10px; color: var(--ink); font-size: var(--t-sm); font-weight: 650; text-align: center; text-transform: capitalize; }
.cal__grid { display: grid; grid-template-columns: repeat(7, 38px); row-gap: 3px; }
.cal__wd { display: grid; place-items: center; height: 26px; color: var(--muted); font-size: var(--t-2xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.cal__day {
  position: relative; height: 38px; padding: 0; border: 0; border-radius: 10px; background: transparent;
  color: var(--ink); font-size: var(--t-sm); font-variant-numeric: tabular-nums; transition: background var(--dur-fast), color var(--dur-fast);
}
.cal__day:hover:not(:disabled) { background: var(--hover); }
.cal__day:disabled { color: var(--faint); cursor: default; }
.cal__day.is-in { border-radius: 0; background: var(--accent-soft); color: var(--accent-ink); }
.cal__day.is-start, .cal__day.is-end { background: var(--accent); color: var(--on-accent); font-weight: 650; }
.cal__day.is-start { border-radius: 10px 0 0 10px; }
.cal__day.is-end { border-radius: 0 10px 10px 0; }
.cal__day.is-start.is-end { border-radius: 10px; }
.cal__day.is-today::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); translate: -50% 0; }
.cal__day.is-today.is-start::after, .cal__day.is-today.is-end::after { background: var(--on-accent); }

/* ---------- Pied : comparaison + boutons ---------- */
.picker__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; padding: 14px 20px; border-top: 1px solid var(--line); }
.picker__compare { color: var(--muted); font-size: var(--t-xs); }
.picker__compare strong { color: var(--ink-2); font-weight: 600; }
.picker__buttons { display: flex; gap: 8px; }

@keyframes pk-fade { from { opacity: 0; } }
@keyframes pk-in { from { opacity: 0; transform: translateY(-6px) scale(0.985); } }
@keyframes pk-up { from { opacity: 0; transform: translateY(24px); } }

/* ---------- Mobile : feuille en bas d'écran, choix en pastilles, un seul mois ---------- */
/* Tablette en portrait (761–860 px) : pas la place pour liste + 2 mois côte à côte, la liste passe au-dessus. */
@media (min-width: 761px) and (max-width: 860px) {
  .picker.is-custom { grid-template-columns: minmax(0, 1fr); }
  .picker.is-custom .picker__presets { grid-column: auto; grid-row: auto; order: -1; flex-direction: row; flex-wrap: wrap; gap: 6px; padding: 12px; border-left: 0; border-bottom: 1px solid var(--line); }
  .picker.is-custom .picker__main, .picker.is-custom .picker__foot { grid-column: auto; }
  .picker.is-custom .picker__preset { min-height: 38px; padding: 0 14px; border-radius: var(--r-pill); background: var(--card); box-shadow: inset 0 0 0 1px var(--line-strong); }
  .picker.is-custom .picker__preset[aria-pressed="true"] { background: var(--accent-soft); }
  .picker.is-custom .picker__preset svg { display: none; }
}

@media (max-width: 760px) {
  .picker, .picker.is-custom {
    position: fixed; inset: auto 8px calc(8px + env(safe-area-inset-bottom)) 8px; grid-template-columns: minmax(0, 1fr);
    width: auto; max-height: 88dvh; overflow-y: auto; border-radius: 22px; animation-name: pk-up;
  }
  /* Liste seule : grandes lignes faciles à toucher. */
  .picker__presets { padding: 8px; }
  .picker__preset { min-height: 52px; padding: 0 16px; border-radius: 14px; font-size: 16px; }
  /* Personnalisée : les 5 choix passent en pastilles (2 lignes au besoin) au-dessus du calendrier. */
  .picker.is-custom .picker__presets { grid-column: auto; grid-row: auto; order: -1; flex-direction: row; flex-wrap: wrap; gap: 6px; padding: 12px; border-left: 0; border-bottom: 1px solid var(--line); }
  .picker.is-custom .picker__main, .picker.is-custom .picker__foot { grid-column: auto; }
  .picker.is-custom .picker__preset { flex: none; min-height: 38px; padding: 0 14px; border-radius: var(--r-pill); font-size: var(--t-sm); background: var(--card); box-shadow: inset 0 0 0 1px var(--line-strong); }
  .picker.is-custom .picker__preset[aria-pressed="true"] { background: var(--accent-soft); }
  .picker.is-custom .picker__preset svg { display: none; }
  .picker__main { padding: 14px 16px 0; }
  .picker__inputs .input { font-size: 16px; } /* < 16 px : iOS zoome sur le champ */
  .picker__arrow { display: none; }
  .picker__inputs { gap: 8px; }
  .picker__inputs .field { min-width: 0; }
  .picker__nav { width: 40px; height: 40px; top: 8px; }
  .picker__cals > .cal:first-of-type { display: none; }
  .picker__cals .cal { flex: 1; }
  .cal__grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .cal__day { height: 42px; }
  .picker__foot { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 16px 16px; }
  .picker__compare { text-align: center; }
  .picker__buttons .btn { flex: 1; justify-content: center; height: 44px; }
}
@media (max-width: 359px) { .picker__inputs { flex-direction: column; align-items: stretch; } }