/* ───────────────────────────────────────────────────────────────────────────── * amo-select — habillage des listes déroulantes Amosphère. * * Le s'affiche avec le style du gabarit, comme avant. * ───────────────────────────────────────────────────────────────────────────── */ .amo-sel { --amo-sel-navy: #0e295c; --amo-sel-terra: #e1622b; --amo-sel-bord: #DDE3EE; --amo-sel-bord-h: #BCC6DA; --amo-sel-muted: #596475; --amo-sel-light: #66727F; --amo-sel-surv: #FDF0EA; position: relative; display: block; font-family: 'Outfit', sans-serif; /* Pas de width:100% ici : en contexte bloc (.field) l'enveloppe s'étire déjà seule, et l'imposer casserait les barres de filtres, où les reste rendu (opacité nulle) et non display:none : sinon le navigateur refuse de lui donner le focus pour afficher le message de validation d'un champ `required`, et l'envoi du formulaire échoue en silence. pointer-events:none laisse tous les clics au bouton. */ .amo-sel > select.amo-sel-natif { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; border: 0; padding: 0; margin: 0; appearance: none; -webkit-appearance: none; } /* ── Bouton (état fermé) ─────────────────────────────────────────────────── */ .amo-sel-btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; background: #fff; border: 1.5px solid var(--amo-sel-bord); border-radius: 10px; padding: 11px 14px; font-family: inherit; font-size: 14px; font-weight: 500; line-height: 1.35; color: var(--amo-sel-navy); text-align: left; cursor: pointer; transition: border-color .18s, box-shadow .18s; } .amo-sel-btn:hover { border-color: var(--amo-sel-bord-h); } .amo-sel-btn:focus-visible, .amo-sel-btn[aria-expanded="true"] { outline: none; border-color: var(--amo-sel-terra); box-shadow: 0 0 0 3px rgba(225, 98, 43, .14); } .amo-sel-btn .amo-sel-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Placeholder : l'option vide du