@layer components{ /* ─────────────────────────────────────────────────────────────────────── Sélecteur maison « DHSelect » - remplace le rendu des reste dans le DOM (source de vérité : valeur, soumission de formulaire, onchange inline) mais est masqué ; un déclencheur + un panneau d'options stylés le pilotent (assets/js/46-select.js). Look moderne minimaliste, calé sur les tokens (clair/sombre/Kids/Ado). Densité : tout est piloté par des variables --dhs-* posées sur :root et surchargées par [data-density="compact|aere"] (sur ) - le panneau, porté dans , en hérite aussi. (S'ajoute au zoom global de 17-settings.) ─────────────────────────────────────────────────────────────────────── */ :root{ --dhs-py:7px; --dhs-px:10px; --dhs-fs:13.5px; --dhs-gap:7px; --dhs-opt-py:6px; --dhs-opt-px:9px; --dhs-pad:4px; --dhs-caret:14px; } [data-density="compact"]{ --dhs-py:5px; --dhs-px:9px; --dhs-fs:13px; --dhs-gap:6px; --dhs-opt-py:5px; --dhs-opt-px:9px; --dhs-pad:3px; --dhs-caret:13px; } [data-density="aere"]{ --dhs-py:9px; --dhs-px:12px; --dhs-fs:14px; --dhs-gap:8px; --dhs-opt-py:8px; --dhs-opt-px:11px; --dhs-pad:5px; --dhs-caret:15px; } /* Enveloppe : neutralise les styles hérités (padding/bordure/fond des règles input,select), garde la largeur/flex venant des classes copiées (.set-select…). */ .dhsel{ position:relative; display:block; width:100%; padding:0!important; border:0!important; background:none!important; min-height:0!important; box-shadow:none!important; height:auto!important; font:inherit; color:inherit; } /* ). */ .dhsel.set-select{ width:auto } .dhsel.set-select .dhsel-trigger{ --dhs-py:5px; --dhs-px:9px; --dhs-fs:13px } /* État désactivé. */ .dhsel.is-disabled{ opacity:.55; pointer-events:none } /* Panneau d'options - porté dans (position:fixed) pour échapper aux overflow:hidden / modals. Coordonnées posées en JS. */ .dhsel-panel{ position:fixed; z-index:9999; box-sizing:border-box; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:var(--shadow); padding:var(--dhs-pad); margin:0; max-height:270px; overflow-y:auto; overscroll-behavior:contain; opacity:0; transform:translateY(-4px); transition:opacity .12s ease, transform .12s ease; -webkit-overflow-scrolling:touch; } .dhsel-panel.in{ opacity:1; transform:none } .dhsel-panel.flip{ transform-origin:bottom } .dhsel-panel.flip:not(.in){ transform:translateY(4px) } /* Champ de recherche (apparaît quand beaucoup d'options). */ .dhsel-search{ position:sticky; top:calc(var(--dhs-pad) * -1); z-index:1; margin:calc(var(--dhs-pad) * -1) calc(var(--dhs-pad) * -1) var(--dhs-pad); width:calc(100% + var(--dhs-pad) * 2); padding:var(--sp-6) var(--sp-8); background:var(--card); border:0; border-bottom:1px solid var(--line2); color:var(--txt); font:inherit; font-size:var(--dhs-fs); outline:none; } .dhsel-search::placeholder{ color:var(--mut2) } .dhsel-opt{ display:flex; align-items:center; gap:var(--dhs-gap); padding:var(--dhs-opt-py) var(--dhs-opt-px); border-radius:var(--radius-sm); font-size:var(--dhs-fs); color:var(--txt); cursor:pointer; user-select:none; white-space:nowrap; } .dhsel-opt:hover, .dhsel-opt.active{ background:var(--card2) } .dhsel-opt.sel{ color:var(--accent); font-weight:var(--fw-medium) } .dhsel-opt[aria-disabled="true"]{ opacity:.4; cursor:default; background:none } .dhsel-opt .dhsel-oicon{ flex:none; width:17px; height:17px; color:var(--mut) } .dhsel-opt.sel .dhsel-oicon,.dhsel-opt:hover .dhsel-oicon,.dhsel-opt.active .dhsel-oicon{ color:var(--accent) } .dhsel-opt .dhsel-otxt{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis } .dhsel-opt .dhsel-ok{ flex:none; width:14px; height:14px; opacity:0; color:var(--accent) } .dhsel-opt.sel .dhsel-ok{ opacity:1 } /* Libellé de . */ .dhsel-group{ padding:7px var(--dhs-opt-px) 3px; font-size:var(--fs-2xs); font-weight:var(--fw-bold); letter-spacing:.04em; text-transform:uppercase; color:var(--mut2); } .dhsel-group:first-child{ padding-top:var(--sp-2)} .dhsel-empty{ padding:var(--sp-10) var(--sp-10); font-size:var(--dhs-fs); color:var(--mut2); text-align:center } @media (prefers-reduced-motion:reduce){ .dhsel-caret,.dhsel-panel{ transition:none } } }