/* StudioBooking — menus déroulants dans la DA du site (27/09/2026)
   Remplace le menu gris du système par un panneau en verre fumé, coins arrondis,
   option choisie en vert StudioBooking. Navigateurs récents (Chrome, Edge…) :
   « appearance: base-select ». Les autres gardent leur menu natif, sans rien casser. */
@supports (appearance: base-select) {
  select, ::picker(select) { appearance: base-select; }

  select { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; }
  select::picker-icon { color: currentColor; opacity: .55; transition: rotate .2s ease, opacity .2s; }
  select:open::picker-icon { rotate: 180deg; opacity: .9; }

  ::picker(select) {
    margin-top: 6px; padding: 6px; min-width: anchor-size(width);
    border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px;
    background: rgba(28, 29, 32, .92); color: #fff;
    -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3);
    box-shadow: 0 24px 60px -14px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .06);
    opacity: 0; translate: 0 -4px;
    transition: opacity .16s ease, translate .16s ease, overlay .16s allow-discrete, display .16s allow-discrete;
  }
  ::picker(select):popover-open { opacity: 1; translate: 0 0; }
  @starting-style { ::picker(select):popover-open { opacity: 0; translate: 0 -4px; } }

  select option {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px;
    font-size: 14px; line-height: 1.3; color: rgba(255, 255, 255, .88); background: transparent; cursor: pointer;
    transition: background .12s, color .12s;
  }
  select option:hover, select option:focus-visible { background: rgba(62, 207, 142, .14); color: #fff; outline: none; }
  select option:checked { background: rgba(62, 207, 142, .22); color: #6EE7B7; font-weight: 500; }
  select option::checkmark { color: #3ECF8E; order: 1; margin-left: auto; }
  select option:disabled { opacity: .45; cursor: default; }
  select option[value=""] { color: rgba(255, 255, 255, .5); }

  /* Priorité sur les anciens réglages « option noire sur blanc » (page publique, thème clair) */
  html select option:not(#_):not(#__) { color: rgba(255, 255, 255, .88) !important; background: transparent !important; }
  html select option:is(:hover, :focus-visible):not(#_):not(#__) { color: #fff !important; background: rgba(62, 207, 142, .14) !important; }
  html select option:checked:not(#_):not(#__) { color: #6EE7B7 !important; background: rgba(62, 207, 142, .22) !important; }

  @media (prefers-reduced-motion: reduce) { ::picker(select) { transition: none; } }
}