/* ============================================================
   Modèle « liste filtrable » de l'espace Réseau (harmonisation UX/UI, 2026-09-30,
   docs/plans/2026-09-30-reseau-harmonisation-plan.md) : filtres en haut, groupés en rubriques (fieldset + legend,
   3 au plus) ; menus déroulants multi-sélection (bouton + badge du nombre coché + panneau de cases, « Tout cocher /
   Tout décocher ») ; résumé (compteur + réinitialiser) ; liste en lignes (titre en lien ou texte, méta, annexes).
   Composants DOM : js/reseau/liste-filtrable.js. Référence : écran « Missions ouvertes » (#/missions), qui migre
   sur ces mêmes classes `rl-*`. Tokens seuls ; aucun emoji. Chaque écran harmonisé porte la classe `rl-page` sur sa
   racine (en plus de sa classe propre) : override [hidden] commun, sous la navigation basse mobile (z-index 40).
   ============================================================ */
.rl-page [hidden] { display: none !important; }
.rl-chapo { color: var(--texte-2); max-width: 70ch; margin: .2rem 0 1.1rem; text-wrap: pretty; }
.rl-filtres { display: grid; grid-template-columns: 1fr; gap: .8rem; margin: 0 0 1rem; padding: 0 0 1rem; border-bottom: 1px solid var(--ligne); }
.rl-rubrique { min-width: 0; margin: 0; padding: .7rem .9rem .8rem; border: 1px solid var(--ligne); border-radius: 2px; }
.rl-rubrique-titre { padding: 0 .35rem; font-family: var(--serif); font-size: 1.05rem; }
.rl-rubrique > * + * { margin-top: .55rem; }
.rl-champ { display: grid; gap: .2rem; min-width: 0; }
.rl-champ-nom { font-size: .8rem; color: var(--texte-2); }
.rl-champ input { width: 100%; min-width: 0; min-height: 44px; padding: .45em .65em; font: inherit; font-size: 1rem; color: var(--texte); background: var(--bg-0); border: 1px solid var(--ligne-2); border-radius: 2px; }
.rl-champ input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--texte); }
.rl-menu { position: relative; }
.rl-menu-bouton { display: flex; align-items: center; gap: .55rem; width: 100%; min-height: 44px; padding: .45em .75em; font: inherit; font-size: .92rem; color: var(--texte); text-align: left; background: var(--bg-0); border: 1px solid var(--ligne-2); border-radius: 2px; cursor: pointer; }
.rl-menu-bouton:hover { border-color: var(--texte); }
.rl-menu-bouton[aria-expanded="true"] { border-color: var(--texte); }
.rl-menu-bouton:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.rl-menu-lib { flex: 1 1 auto; min-width: 0; }
.rl-menu-compte { display: inline-flex; align-items: center; justify-content: center; min-width: 1.45em; height: 1.45em; padding: 0 .35em; border-radius: 2px; font-size: .75rem; font-weight: 600; color: var(--bg-0); background: var(--texte); }
.rl-menu-chevron { flex: none; width: .5em; height: .5em; margin-top: -.2em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 150ms var(--ease, ease-out); }
.rl-menu-bouton[aria-expanded="true"] .rl-menu-chevron { transform: rotate(-135deg); margin-top: .2em; }
.rl-menu-panneau { position: absolute; z-index: 30; top: calc(100% + .25rem); left: 0; right: 0; display: flex; flex-direction: column; padding: .45rem .75rem .6rem; max-height: min(70vh, 27rem); overflow-y: auto; background: var(--bg-0); border: 1px solid var(--texte); border-radius: 2px; box-shadow: var(--shadow-elevated); }
.rl-case { display: flex; align-items: center; gap: .55rem; min-height: 40px; font-size: .9rem; cursor: pointer; }
.rl-case input { flex: none; width: 18px; height: 18px; accent-color: var(--texte); }
.rl-menu-actions { display: flex; gap: 1.2rem; margin-top: .35rem; padding-top: .35rem; border-top: 1px solid var(--ligne); }
.rl-menu-action, .rl-reinit { display: inline-flex; align-items: center; min-height: 40px; padding: 0; border: 0; background: none; color: var(--texte-2); font: inherit; font-size: .84rem; text-decoration: underline; text-decoration-color: var(--ligne-2); text-underline-offset: 4px; cursor: pointer; }
.rl-menu-action:hover, .rl-reinit:hover { color: var(--texte); text-decoration-color: currentColor; }
.rl-resume { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .2rem 1rem; }
.rl-compte { margin: 0; font-weight: 600; }
.rl-etat { color: var(--texte-2); margin: 0 0 .6rem; }
.rl-etat:empty { display: none; }
.rl-liste { list-style: none; margin: 0; padding: 0; }
.rl-ligne { min-width: 0; padding: .85rem 0 .95rem; border-bottom: 1px solid var(--ligne); }
.rl-titre { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 1.35rem; line-height: 1.15; overflow-wrap: anywhere; }
.rl-lien { color: var(--texte); text-decoration: underline; text-decoration-color: var(--ligne-2); text-underline-offset: 5px; }
.rl-lien:hover { text-decoration-color: currentColor; }
.rl-meta { margin: .3rem 0 0; font-size: .88rem; color: var(--texte-2); overflow-wrap: anywhere; }
.rl-annexe { margin: .2rem 0 0; font-size: .84rem; color: var(--texte); }
.rl-pastilles { display: flex; flex-wrap: wrap; gap: .35rem .5rem; margin: .35rem 0 0; }
@media (min-width: 760px) {
  .rl-filtres { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
  .rl-resume { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: no-preference) {
  .rl-menu-panneau:not([hidden]) { animation: rl-apparait 120ms ease-out; }
}
@keyframes rl-apparait { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }