/* ============================================================
   Domivae — .dv-select : menu déroulant conforme à la DA
   Remplace l'apparence du <select> natif (dont la popup OS est
   inatteignable en CSS) par un trigger + popup listbox custom.

   Le <select> natif reste dans le DOM (masqué) = source de vérité
   (valeur, event `change`, FormData). Enhancement progressif :
   sans JS, le <select> natif s'affiche normalement.

   Construit par public/assets/js/dv-select.js
   Maquette : « Domivae — Menu déroulant conforme »
   ============================================================ */

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

/* wrapper : prend la place du <select> (largeur fluide par défaut) */
.dv-select { position: relative; display: block; width: 100%; max-width: 100%; }

/* le <select> natif masqué (source de vérité) */
.dv-select > .dv-native { display: none !important; }

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

/* désactivé */
.dv-select.is-disabled { opacity: 0.6; }
.dv-select.is-disabled .dv-trigger { cursor: not-allowed; background: var(--dv-offwhite); }

/* variante compacte (filtres, form-control-sm) */
.dv-select.compact .dv-trigger { min-height: 44px; padding: 9px 12px 9px 14px; font-size: 14px; gap: 9px; }

/* ---------- popup (portée dans <body>, positionnée en fixed par le JS) ---------- */
.dv-menu {
  position: fixed; z-index: 1080;
  background: var(--dv-white);
  border: 1px solid var(--dv-border-subtle);
  border-radius: var(--dv-radius-lg);
  box-shadow: var(--dv-shadow-lg);
  overflow: hidden; transform-origin: top center;
  font-family: var(--dv-font);
  opacity: 0; transform: translateY(-6px) scale(0.985); pointer-events: none;
  transition: opacity var(--dv-base) var(--dv-ease-emph), transform var(--dv-base) var(--dv-ease-emph);
}
.dv-menu.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

.dv-menu-head,
.dv-group-head {
  padding: 12px 18px 10px; border-bottom: 1px solid var(--dv-border-subtle);
  font-size: 11px; font-weight: 700; color: var(--dv-gray-500);
  letter-spacing: 0.09em; text-transform: uppercase;
}
.dv-group-head:not(:first-child) { border-top: 1px solid var(--dv-border-subtle); }

.dv-list { max-height: 340px; overflow-y: auto; padding: 7px; }
.dv-list::-webkit-scrollbar { width: 9px; }
.dv-list::-webkit-scrollbar-thumb { background: rgba(1, 29, 45, 0.14); border-radius: 999px; }
.dv-list::-webkit-scrollbar-track { background: transparent; }

.dv-opt {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 11px 12px; border: none; background: transparent; cursor: pointer;
  border-radius: var(--dv-radius-md); text-align: left; font-family: var(--dv-font);
  transition: background var(--dv-fast) var(--dv-ease);
}
.dv-opt + .dv-opt { margin-top: 2px; }
.dv-opt:hover, .dv-opt.is-active { background: var(--dv-offwhite); outline: none; }
.dv-opt .o-label { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 500; color: var(--dv-navy); line-height: 1.35; }
.dv-opt .o-check { flex-shrink: 0; width: 20px; display: flex; align-items: center; justify-content: center; }
.dv-opt .o-check .lu { stroke: var(--dv-teal); stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity var(--dv-fast); }

/* option désactivée */
.dv-opt:disabled, .dv-opt.is-disabled { opacity: 0.45; cursor: not-allowed; }
.dv-opt:disabled:hover, .dv-opt.is-disabled:hover { background: transparent; }

/* ligne reset / placeholder (option value="") */
.dv-opt.reset .o-label { color: var(--dv-gray-500); font-weight: 600; }

/* option sélectionnée */
.dv-opt[aria-selected="true"] { background: var(--dv-sky); }
.dv-opt[aria-selected="true"]:hover, .dv-opt[aria-selected="true"].is-active { background: var(--dv-sky); }
.dv-opt[aria-selected="true"] .o-label { color: var(--dv-navy); font-weight: 700; }
.dv-opt[aria-selected="true"] .o-check .lu { opacity: 1; }

.dv-select.compact ~ .dv-menu .dv-opt .o-label,
.dv-menu.compact .dv-opt .o-label { font-size: 14px; }

@media (prefers-reduced-motion: reduce) {
  .dv-trigger .t-chev, .dv-menu, .dv-opt, .dv-opt .o-check .lu { transition: none; }
}
