﻿/* Listes déroulantes « jolies » (script/liste-jolie.js) : style du menu de visibilité du fil */
.lj-cache { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; overflow: hidden !important; padding: 0 !important; border: 0 !important; }
.lj-bouton { display: flex; align-items: center; gap: 10px; width: 100%; height: 100%; min-height: 44px; padding: 0 14px 0 16px; border: 0; font: inherit; font-size: 14px; font-weight: 400; text-align: left; cursor: pointer; box-sizing: border-box; }
.lj-bouton .lj-texte { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lj-bouton.lj-vide .lj-texte { opacity: .62; }
.lj-bouton .lj-chevron { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; opacity: .75; transition: transform .2s; margin-left: auto; }
.lj-bouton.ouvert .lj-chevron { transform: rotate(180deg); }
.lj-bouton:focus-visible { outline: 2px solid #8fc3d4; outline-offset: 2px; }
.lj-bouton .lj-ico-b { display: inline-flex; flex-shrink: 0; }
.lj-menu { position: fixed; z-index: 9600; background: #fff; border-radius: 16px; padding: 8px 0; box-shadow: 0 8px 28px rgba(0,0,0,.22); overflow-y: auto; overscroll-behavior: contain; font-family: inherit; animation: lj-ouvre .12s ease-out; box-sizing: border-box; }
@keyframes lj-ouvre { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.lj-titre { padding: 6px 18px 8px; font-size: 12.5px; color: #8a9aa0; font-weight: 400; }
.lj-option { display: flex; align-items: center; gap: 14px; width: 100%; border: 0; background: transparent; padding: 11px 18px; font: inherit; font-size: 15px; font-weight: 400; color: #444; cursor: pointer; text-align: left; }
.lj-option:hover, .lj-option:focus { background: #eef5f8; outline: none; }
.lj-option.actif { color: #417487; font-weight: 600; }
.lj-option .lj-ico { display: inline-flex; align-items: center; justify-content: center; width: 26px; flex-shrink: 0; }
.lj-option .lj-nom { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lj-option .lj-detail { color: #8a9aa0; font-size: 13.5px; font-weight: 400; font-variant-numeric: tabular-nums; }
.lj-option .lj-coche-place { width: 20px; display: inline-flex; justify-content: flex-end; flex-shrink: 0; }
.lj-option .lj-coche { width: 20px; height: 20px; fill: none; stroke: #417487; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.lj-sexe { width: 24px; height: 24px; fill: none; stroke: #417487; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lj-bouton .lj-sexe { stroke: currentColor; width: 20px; height: 20px; }
.lj-drapeau { width: 26px; height: 17px; border-radius: 3px; display: block; box-shadow: 0 0 0 1px rgba(0,0,0,.12); flex-shrink: 0; }
.lj-code { font-variant-numeric: tabular-nums; }
