/* ===================================================================== Searchable Select — styles (ISAGE/KAHUZI-BIEGA) Palette : vert #166534 / vert foncé #0e2a17 / or #d4a017 ===================================================================== */ .ss-wrap { --ss-green: #166534; --ss-green-dark: #0e2a17; --ss-gold: #d4a017; --ss-line: #d7ded9; --ss-ink: #1f2a24; --ss-muted: #7a877f; --ss-tint: #eef4f0; position: relative; display: block; width: 100%; } /* Le select natif reste dans le DOM (soumis aux formulaires) mais masqué */ .ss-native { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; border: 0 !important; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* ---- Bouton de contrôle (mime un champ de formulaire) -------------- */ .ss-control { display: flex; align-items: center; justify-content: space-between; gap: .6rem; width: 100%; min-height: 44px; padding: .55rem .85rem; border: 1px solid var(--ss-line); border-radius: 10px; background: #fff; color: var(--ss-ink); font-size: .95rem; font-family: inherit; line-height: 1.3; text-align: left; cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease; } .ss-control:hover { border-color: var(--ss-green); } .ss-control:focus, .ss-open .ss-control { outline: none; border-color: var(--ss-green); box-shadow: 0 0 0 3px rgba(22, 101, 52, .14); } .ss-value { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .ss-value.ss-placeholder { color: var(--ss-muted); } .ss-arrow { display: inline-flex; color: var(--ss-muted); transition: transform .2s ease, color .2s ease; } .ss-open .ss-arrow { transform: rotate(180deg); color: var(--ss-green); } .ss-disabled { opacity: .6; } .ss-disabled .ss-control { cursor: not-allowed; background: #f4f6f5; } /* ---- Panneau déroulant -------------------------------------------- */ .ss-panel { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 1080; display: flex; flex-direction: column; max-height: 320px; padding: .5rem; border: 1px solid var(--ss-line); border-radius: 12px; background: #fff; box-shadow: 0 18px 44px rgba(14, 42, 23, .16); animation: ss-pop .14s ease; } /* Panneau porté dans le : au-dessus de TOUT composant */ .ss-panel.ss-portal { position: fixed; right: auto; z-index: 2147483000; box-shadow: 0 24px 60px rgba(14, 42, 23, .28); } .ss-drop-up .ss-panel { top: auto; bottom: calc(100% + 6px); } @keyframes ss-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* ---- Recherche ----------------------------------------------------- */ .ss-search { position: relative; margin-bottom: .4rem; } .ss-search-icon { position: absolute; top: 50%; left: .7rem; transform: translateY(-50%); color: var(--ss-muted); pointer-events: none; } .ss-search-input { width: 100%; padding: .55rem .7rem .55rem 2.1rem; border: 1px solid var(--ss-line); border-radius: 8px; background: var(--ss-tint); font-size: .9rem; color: var(--ss-ink); } .ss-search-input:focus { outline: none; border-color: var(--ss-green); background: #fff; box-shadow: 0 0 0 3px rgba(22, 101, 52, .1); } /* ---- Liste des options -------------------------------------------- */ .ss-options { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--ss-line) transparent; } .ss-options::-webkit-scrollbar { width: 8px; } .ss-options::-webkit-scrollbar-thumb { background: var(--ss-line); border-radius: 8px; } .ss-group { padding: .55rem .7rem .3rem; font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ss-gold); } .ss-option { padding: .58rem .7rem; border-radius: 8px; font-size: .92rem; color: var(--ss-ink); cursor: pointer; white-space: normal; transition: background-color .12s ease, color .12s ease; } .ss-option.ss-active { background: var(--ss-tint); color: var(--ss-green-dark); } .ss-option.ss-selected { font-weight: 600; color: var(--ss-green); background: rgba(22, 101, 52, .08); } .ss-option.ss-selected.ss-active { background: rgba(22, 101, 52, .14); } .ss-empty { padding: 1rem .7rem; text-align: center; font-size: .88rem; color: var(--ss-muted); } /* ---- Adaptation légère au thème admin ------------------------------ */ .admin-body .ss-control, .admin-wrapper .ss-control { min-height: 42px; }