/* ============================================================
   Domivae — .dv-date : sélecteur de date conforme à la DA
   Remplace l'apparence du <input type="date"> natif (dont le
   calendrier OS est inatteignable en CSS) par un trigger + un
   calendrier custom (sélection canard, point corail = aujourd'hui,
   jours hors plage min/max désactivés, raccourcis).

   L'<input type="date"> natif reste dans le DOM (overlay invisible)
   = source de vérité (valeur, event change/input, FormData,
   validation required). Enhancement progressif : sans JS,
   l'input natif s'affiche normalement.

   Construit par public/assets/js/dv-date.js
   Maquette : « Domivae — Calendrier conforme »
   ============================================================ */

.dv-date,
.dvd-cal {
  --dvd-white:          #FBFBFB;
  --dvd-navy:           var(--color-marine, #011D2D);
  --dvd-teal:           var(--color-canard, #007E85);
  --dvd-coral:          var(--color-apricot, #F5945D);
  --dvd-offwhite:       #F2F2F2;
  --dvd-sky:            var(--color-blue-pastel, #E3F5F5);
  --dvd-gray-500:       #717171;
  --dvd-gray-300:       #D6D6D6;
  --dvd-border-subtle:  #EAEAEA;
  --dvd-border-default: #D6D6D6;
  --dvd-border-strong:  #1E1E1E;
  --dvd-radius-sm:      10px;
  --dvd-radius-md:      14px;
  --dvd-radius-lg:      20px;
  --dvd-shadow-sm:      0 1px 2px rgba(1, 29, 45, 0.06), 0 1px 1px rgba(1, 29, 45, 0.04);
  --dvd-shadow-lg:      0 18px 40px rgba(1, 29, 45, 0.10), 0 4px 8px rgba(1, 29, 45, 0.05);
  --dvd-shadow-focus:   0 0 0 3px rgba(0, 126, 133, 0.28);
  --dvd-font:           var(--font-body, 'Urbanist', 'Helvetica Neue', system-ui, sans-serif);
  --dvd-font-display:   var(--font-display, 'Quicksand', system-ui, sans-serif);
  --dvd-ease:           cubic-bezier(0.2, 0.8, 0.2, 1);
  --dvd-ease-emph:      cubic-bezier(0.16, 1, 0.3, 1);
  --dvd-fast:           120ms;
  --dvd-base:           200ms;
}

/* wrapper : prend la place de l'input (largeur fluide par défaut) */
.dv-date { position: relative; display: block; width: 100%; max-width: 100%; }

/* input natif : overlay invisible MAIS focusable (≠ display:none, pour que
   la validation `required` puisse cibler/scroller le champ au submit) */
.dv-date > .dvd-native {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0; opacity: 0; pointer-events: none;
  -webkit-appearance: none; appearance: none;
}

/* ---------- trigger ---------- */
.dvd-trigger {
  display: flex; align-items: center; gap: 11px; width: 100%; min-height: 50px;
  padding: 11px 14px; border: 1.5px solid var(--dvd-border-default);
  border-radius: var(--dvd-radius-md); background: var(--dvd-white);
  cursor: pointer; font-family: var(--dvd-font); text-align: left;
  transition: border-color var(--dvd-fast) var(--dvd-ease), box-shadow var(--dvd-fast) var(--dvd-ease);
}
.dvd-trigger:hover { border-color: var(--dvd-gray-500); }
.dv-date.is-filled .dvd-trigger { border-color: var(--dvd-border-strong); }
.dvd-trigger:focus-visible,
.dv-date.is-open .dvd-trigger {
  outline: none; border-color: var(--dvd-teal); box-shadow: var(--dvd-shadow-focus);
}
.dvd-trigger > .dvd-ico { width: 18px; height: 18px; flex-shrink: 0; stroke: var(--dvd-teal); stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.dvd-trigger .dvd-val { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 600; color: var(--dvd-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dvd-trigger.is-placeholder .dvd-val { color: var(--dvd-gray-500); font-weight: 500; }
.dvd-trigger .dvd-chev { width: 16px; height: 16px; flex-shrink: 0; stroke: var(--dvd-gray-500); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dvd-base) var(--dvd-ease); }
.dv-date.is-open .dvd-trigger .dvd-chev { transform: rotate(180deg); }

.dv-date.is-disabled { opacity: 0.6; }
.dv-date.is-disabled .dvd-trigger { cursor: not-allowed; background: var(--dvd-offwhite); }

/* compact (form-control-sm) */
.dv-date.compact .dvd-trigger { min-height: 44px; padding: 9px 12px; font-size: 14px; gap: 9px; }

/* ---------- calendrier (porté dans body, position: fixed) ---------- */
.dvd-cal {
  position: fixed; z-index: 1080; width: 312px;
  background: var(--dvd-white); border: 1px solid var(--dvd-border-subtle);
  border-radius: var(--dvd-radius-lg); padding: 16px; box-shadow: var(--dvd-shadow-lg);
  font-family: var(--dvd-font);
  opacity: 0; transform: translateY(-6px) scale(0.98); pointer-events: none;
  transition: opacity var(--dvd-base) var(--dvd-ease), transform var(--dvd-base) var(--dvd-ease-emph);
}
.dvd-cal.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

.dvd-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.dvd-title {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--dvd-font-display); font-size: 15px; font-weight: 600; color: var(--dvd-navy);
  border: none; background: transparent; cursor: pointer; padding: 4px 10px 4px 12px; border-radius: 999px;
  transition: background var(--dvd-fast), color var(--dvd-fast);
}
/* petit chevron : signale que le titre est cliquable (saut mois → année) */
.dvd-title::after {
  content: ""; width: 0; height: 0; margin-top: 1px;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor; opacity: 0.5;
  transition: opacity var(--dvd-fast);
}
.dvd-title:hover { background: var(--dvd-sky); color: var(--dvd-teal); }
.dvd-title:hover::after { opacity: 1; }
.dvd-title:focus-visible { outline: none; box-shadow: var(--dvd-shadow-focus); }

/* grille mois / années (12 cellules en 3 colonnes) */
.dvd-cal.mode-months .dvd-grid,
.dvd-cal.mode-years  .dvd-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
.dvd-cell {
  border: none; background: transparent; border-radius: var(--dvd-radius-sm);
  cursor: pointer; font-family: var(--dvd-font); font-size: 13.5px; font-weight: 600; color: var(--dvd-navy);
  padding: 12px 6px; text-align: center;
  transition: background var(--dvd-fast), color var(--dvd-fast);
}
.dvd-cell:hover:not(.disabled) { background: var(--dvd-sky); color: var(--dvd-teal); }
.dvd-cell.disabled { color: var(--dvd-gray-300); cursor: not-allowed; }
.dvd-cell.today { font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--dvd-coral); }
.dvd-cell.sel { background: var(--dvd-teal); color: #fff; font-weight: 700; }
.dvd-nav { width: 32px; height: 32px; border-radius: 999px; border: 1px solid var(--dvd-border-default); background: var(--dvd-white); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--dvd-fast), border-color var(--dvd-fast); }
.dvd-nav:hover { background: var(--dvd-sky); border-color: var(--dvd-teal); }
.dvd-nav svg { width: 16px; height: 16px; stroke: var(--dvd-navy); stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }

.dvd-dow { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; margin-bottom: 6px; }
.dvd-dow span { text-align: center; font-size: 11px; font-weight: 700; color: var(--dvd-gray-500); text-transform: uppercase; letter-spacing: 0.04em; }
.dvd-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 3px; }

.dvd-day {
  aspect-ratio: 1; border: none; background: transparent; border-radius: var(--dvd-radius-sm);
  cursor: pointer; font-family: var(--dvd-font); font-size: 13.5px; font-weight: 500; color: var(--dvd-navy);
  display: inline-flex; align-items: center; justify-content: center; position: relative;
  transition: background var(--dvd-fast), color var(--dvd-fast);
}
.dvd-day:hover:not(.empty):not(.disabled) { background: var(--dvd-sky); }
.dvd-day.empty { cursor: default; }
.dvd-day.disabled { color: var(--dvd-gray-300); cursor: not-allowed; }
.dvd-day.today { font-weight: 700; }
.dvd-day.today::after { content: ""; position: absolute; bottom: 5px; width: 4px; height: 4px; border-radius: 999px; background: var(--dvd-coral); }
.dvd-day.sel { background: var(--dvd-teal); color: #fff; font-weight: 700; }
.dvd-day.sel::after { background: #fff; }

.dvd-foot { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--dvd-border-subtle); }
.dvd-quick { flex: 1; padding: 9px; border-radius: var(--dvd-radius-sm); border: 1px solid var(--dvd-border-default); background: var(--dvd-white); font-family: var(--dvd-font); font-size: 12.5px; font-weight: 600; color: var(--dvd-navy); cursor: pointer; transition: background var(--dvd-fast), border-color var(--dvd-fast), color var(--dvd-fast); }
.dvd-quick:hover:not(:disabled) { background: var(--dvd-sky); border-color: var(--dvd-teal); color: var(--dvd-teal); }
.dvd-quick:disabled { opacity: 0.4; cursor: not-allowed; }

@media (prefers-reduced-motion: reduce) {
  .dvd-trigger, .dvd-trigger .dvd-chev, .dvd-cal, .dvd-day, .dvd-quick { transition: none; }
}

/* ============================================================
   Inputs natifs frères : <input type="time"> et "datetime-local".
   Pas de picker custom (saisie d'heure native conservée), mais on
   aligne leur APPARENCE sur le trigger .dv-date pour l'harmonie.
   (date est géré par le composant ; ici on ne touche qu'aux autres.)
   ============================================================ */
input[type="time"]:not(.no-dv-date):not([hidden]),
input[type="datetime-local"]:not(.no-dv-date):not([hidden]) {
  min-height: 50px;
  border: 1.5px solid var(--color-border-strong, #D6D6D6);
  border-radius: var(--radius, 14px);
  padding: 11px 14px;
  background: var(--color-bg, #fff);
  font-family: var(--font-body, 'Urbanist', system-ui, sans-serif);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--color-marine, #011D2D);
  accent-color: var(--color-canard, #007E85);
  transition: border-color 120ms cubic-bezier(0.2,0.8,0.2,1), box-shadow 120ms cubic-bezier(0.2,0.8,0.2,1);
}
input[type="time"]:not(.no-dv-date):hover,
input[type="datetime-local"]:not(.no-dv-date):hover { border-color: var(--color-text-muted, #717171); }
input[type="time"]:not(.no-dv-date):focus,
input[type="datetime-local"]:not(.no-dv-date):focus {
  outline: none;
  border-color: var(--color-canard, #007E85);
  box-shadow: 0 0 0 3px rgba(0, 126, 133, 0.28);
}
input[type="time"].form-control-sm,
input[type="datetime-local"].form-control-sm { min-height: 44px; padding: 9px 12px; font-size: 14px; }
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.7; }
input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }