/* Menus déroulants modernes (voir assets/js/select.js). Sans JavaScript, le <select> natif reste affiché. */
.cfs { position: relative; display: block; width: 100%; max-width: 100%; --cfs-c0: #029FEC; --cfs-c1: #F2B544; --cfs-c2: #E96A53; --cfs-c3: #7B3F9D; --cfs-c4: #1B9488; --cfs-c5: #5B9A3A; }
.cfs select.cfs__natif { position: absolute !important; left: 0; bottom: 0; width: 100% !important; height: 1px !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; opacity: 0; pointer-events: none; }
.cfs__btn { display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 48px; padding: .55rem .9rem; margin: 0; font: inherit; font-size: 1rem; line-height: 1.3; color: var(--cf-texte, #1B2B3A); text-align: left; background: #fff; border: 1.5px solid #8CA3B5; border-radius: 12px; cursor: pointer; transition: border-color .15s, box-shadow .15s, background-color .15s; }
.cfs__btn:hover { border-color: var(--cf-brand, #029FEC); background: var(--cf-ciel, #F4F9FD); }
.cfs__btn:focus-visible, .cfs.est-ouvert .cfs__btn { outline: none; border-color: var(--cf-brand, #029FEC); box-shadow: 0 0 0 4px rgba(2, 159, 236, .22); background: #fff; }
.cfs__btn:disabled { opacity: .6; cursor: not-allowed; }
.cfs__btn.est-invalide { border-color: #C2382A; background: #FFF8F7; }
.cfs__val { display: flex; align-items: center; gap: .6rem; flex: 1; min-width: 0; }
.cfs__valtxt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.cfs__valtxt--vide { color: #5B6B7A; font-weight: 400; }
.cfs__fleche { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--cf-ciel-moyen, #E3F3FD); position: relative; transition: transform .2s, background-color .2s; }
.cfs__fleche::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -6px 0 0 -4px; border-right: 2.5px solid var(--cf-action, #0A67A8); border-bottom: 2.5px solid var(--cf-action, #0A67A8); transform: rotate(45deg); }
.cfs.est-ouvert .cfs__fleche { transform: rotate(180deg); background: var(--cf-brand, #029FEC); }
.cfs.est-ouvert .cfs__fleche::after { border-color: #fff; }
.cfs__point { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--cfs-pt, #029FEC); box-shadow: 0 0 0 3px var(--cfs-ton, #E3F3FD); }
.cfs__c0 { --cfs-pt: #029FEC; --cfs-ton: #E3F3FD; } .cfs__c1 { --cfs-pt: #F2B544; --cfs-ton: #FDF2DC; } .cfs__c2 { --cfs-pt: #E96A53; --cfs-ton: #FDE9E5; }
.cfs__c3 { --cfs-pt: #7B3F9D; --cfs-ton: #F1E6F7; } .cfs__c4 { --cfs-pt: #1B9488; --cfs-ton: #DDF3F0; } .cfs__c5 { --cfs-pt: #5B9A3A; --cfs-ton: #E5F2DC; }
.cfs__drap { flex: none; width: 28px; height: 21px; border-radius: 4px; object-fit: cover; box-shadow: 0 0 0 1px rgba(15, 53, 87, .18); background: #E3F3FD; }
.cfs__drap--vide { display: inline-flex; align-items: center; justify-content: center; font-size: 15px; box-shadow: none; background: transparent; }
.cfs__panneau { position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 6px); max-height: 340px; display: flex; flex-direction: column; background: #fff; border: 1px solid #D7E3EC; border-radius: 16px; box-shadow: 0 18px 44px rgba(15, 53, 87, .22), 0 2px 6px rgba(15, 53, 87, .08); overflow: hidden; animation: cfs-entree .16s ease-out; }
.cfs__panneau[hidden], .cfs__fond[hidden], .cfs__aucun[hidden], .cfs__item[hidden] { display: none; }
.cfs--haut .cfs__panneau { top: auto; bottom: calc(100% + 6px); }
.cfs--compact .cfs__panneau { right: auto; width: max(100%, 300px); max-width: 92vw; }
.cfs__recherche { flex: none; margin: 10px 10px 4px; width: calc(100% - 20px); min-height: 44px; padding: .5rem .9rem .5rem 2.4rem; font: inherit; font-size: .98rem; color: #1B2B3A; background: #F4F9FD url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%230A67A8' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat .8rem center; border: 1.5px solid #D7E3EC; border-radius: 999px; box-sizing: border-box; }
.cfs__recherche:focus { outline: none; border-color: #029FEC; box-shadow: 0 0 0 3px rgba(2, 159, 236, .2); background-color: #fff; }
.cfs__liste { list-style: none; margin: 0; padding: 6px; overflow-y: auto; overscroll-behavior: contain; flex: 1; -webkit-overflow-scrolling: touch; }
.cfs__item { display: flex; align-items: center; gap: .7rem; min-height: 46px; margin: 0; padding: .5rem .7rem; border-radius: 10px; cursor: pointer; color: #1B2B3A; font-size: .98rem; line-height: 1.3; transition: background-color .1s; }
.cfs__item::marker { content: none; }
.cfs__txt { flex: 1; min-width: 0; }
.cfs__code { flex: none; font-size: .88rem; font-weight: 600; color: #4F6070; }
.cfs__item--vide { color: #5B6B7A; }
.cfs__item.est-actif { background: var(--cfs-ton, #E3F3FD); }
.cfs__item[aria-selected="true"] { background: var(--cfs-ton, #E3F3FD); color: #084F82; font-weight: 600; box-shadow: inset 3px 0 0 var(--cfs-pt, #029FEC); }
.cfs__item[aria-selected="true"].est-actif { background: var(--cfs-ton, #D2ECFB); filter: brightness(.97); }
.cfs__item.est-desactive { opacity: .45; cursor: not-allowed; }
.cfs__coche { flex: none; width: 20px; height: 20px; border-radius: 50%; position: relative; opacity: 0; background: #029FEC; }
.cfs__coche::after { content: ""; position: absolute; left: 6.5px; top: 3.5px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2.2px 2.2px 0; transform: rotate(45deg); }
.cfs__item[aria-selected="true"] .cfs__coche { opacity: 1; }
.cfs__aucun { margin: 0; padding: 1rem; text-align: center; color: #4F6070; }
.cfs__fond { display: none; }
@keyframes cfs-entree { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cfs__panneau { animation: none; } .cfs__fleche { transition: none; } }
@media (max-width: 640px) {
	/* Sur téléphone, la liste s'ouvre en bas de l'écran, avec de grandes zones tactiles. */
	.cfs__fond { display: block; position: fixed; inset: 0; z-index: 9998; background: rgba(15, 53, 87, .5); }
	.cfs__panneau, .cfs--compact .cfs__panneau, .cfs--haut .cfs__panneau { position: fixed; z-index: 9999; left: 0; right: 0; top: auto; bottom: 0; width: 100%; max-width: none; max-height: 78vh; max-height: 78dvh; border: 0; border-radius: 22px 22px 0 0; animation: cfs-feuille .22s ease-out; padding-bottom: env(safe-area-inset-bottom); }
	.cfs__panneau::before { content: ""; flex: none; width: 44px; height: 5px; margin: 9px auto 0; border-radius: 3px; background: #C9D7E2; }
	.cfs__item { min-height: 52px; font-size: 1.02rem; }
	.cfs__recherche { font-size: 16px; }
}
@keyframes cfs-feuille { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
html.cfs-bloque { overflow: hidden; }
@media (forced-colors: active) { .cfs__btn, .cfs__panneau { border: 1px solid CanvasText; } .cfs__item[aria-selected="true"] { outline: 2px solid Highlight; } }
.cfs .cfs__recherche:focus-visible, .cfs .cfs__btn:focus-visible { outline: none; }
.cfs, .cfs__btn { min-width: 0; box-sizing: border-box; } .cf-form__ligne > *, .cftp-champ { min-width: 0; }
