/* =====================================================================
   Pages catégories (u_prodlist.asp) : filtres, navigation des rubriques,
   barre tri / pages - même présentation que les résultats de recherche
   (cf. recherche.css). Tout est préfixé #main pour passer devant les
   anciens styles de la page.
   ===================================================================== */
#main { --marine:#033e66; --bleu:#006599; --orange:#e8590c; --fond:#f6f8fa; --bord:#c8d1da; --doux:#5b6875; }
#main *, #main *::before, #main *::after { box-sizing:border-box; }

/* ---------- Mise en page : colonne gauche + liste */
@media (min-width: 901px) {
	#main { display:grid; grid-template-columns:270px minmax(0,1fr); gap:24px; align-items:start; margin:0; padding:16px 16px 0; }
	#main #colg { width:auto; min-width:0; padding:0; }
	#main #cold { padding:0; border:0; min-width:0; }
}

/* ---------- Bloc filtres */
#main #filtresmain { margin:0 0 16px; background:#fff; border:1px solid var(--bord); border-radius:10px; overflow:hidden; }
#main #ouvrirfiltres { display:none; }
#main #filtres { background:#fff; margin:0; }
#main #filtres01 { display:flex; align-items:center; justify-content:space-between; background:none; padding:16px 18px 6px; text-align:left; }
#main #filtres01 span { display:flex; align-items:center; gap:10px; font-size:18px; font-weight:700; color:var(--marine); }
#main #filtres01 span::before, #main #ouvrirfiltres::before { content:""; width:18px; height:18px; flex:none; background:var(--bleu);
	-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 6h10M18 6h2M4 12h4M12 12h8M4 18h12M20 18h0'/%3E%3Ccircle cx='16' cy='6' r='2'/%3E%3Ccircle cx='10' cy='12' r='2'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3C/svg%3E") center/contain no-repeat;
	mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 6h10M18 6h2M4 12h4M12 12h8M4 18h12M20 18h0'/%3E%3Ccircle cx='16' cy='6' r='2'/%3E%3Ccircle cx='10' cy='12' r='2'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3C/svg%3E") center/contain no-repeat; }
#main #filtres01 div { position:static; font-size:0; font-weight:600; color:var(--doux); cursor:pointer; }
#main #filtres01 div::after { content:"Réinitialiser"; font-size:13px; }
#main #filtres01 div:hover { color:#c92a2a; }
#main #filtres02 { padding:4px 18px 18px; }
#main .filtre_elem { margin:14px 0 0; font-size:14px; }
#main .filtre_elem > div, #main .filtre_nom { display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--doux); margin-bottom:6px; }
#main .filtre_elem img { width:15px; height:15px; vertical-align:middle; opacity:.85; }
#main .filtre_elem select { width:100%; border:1px solid var(--bord); border-radius:8px; padding:8px 10px; font-family:inherit; font-size:14px; background:#fff; color:#222; }
#main .filtre_elem select:focus { outline:none; border-color:var(--bleu); box-shadow:0 0 0 3px rgba(0,101,153,.12); }
#main .filtre_elem select[name^="sup"], #main .filtre_elem select[name^="inf"] { width:auto; min-width:70px; }
#main #formfiltres button { display:block; width:100%; margin:20px 0 0; padding:11px; border:0; border-radius:8px; background:var(--orange); color:#fff; font-size:15px; font-weight:600; font-family:inherit; box-shadow:0 3px 10px rgba(232,89,12,.3); cursor:pointer; }
#main #formfiltres button:hover { background:#cf4f0a; color:#fff; }
/* curseur de prix */
#main #nekslider { margin:10px 0 4px; }
#main #nekslider01 { padding:0 6px; }
#main #nekslider02, #main #nekslider03 { font-size:13px; color:var(--doux); padding:0; }
#main #nekslider02 span, #main #nekslider03 span { color:var(--marine); }
#main .rs-container .rs-selected { background-color:var(--bleu); border-color:var(--bleu); }
#main .rs-container .rs-bg { background-color:#e3e9ef !important; border-color:#e3e9ef; }
#main .rs-container .rs-pointer { border-color:var(--bleu); border-radius:50%; width:20px; left:-10px; }
#main .rs-container .rs-pointer::before, #main .rs-container .rs-pointer::after { display:none; }

/* ---------- Navigation dans les rubriques (colonne gauche) */
#main #colg-liens { background:#fff; border:1px solid var(--bord); border-radius:10px; padding:14px 8px 10px; }
#main #colg-liens::before { content:"Rubriques"; display:block; padding:0 10px 8px; font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--doux); }
#main #colg-liens a { display:block; padding:6px 10px; margin:0 0 1px; border-radius:6px; font-size:14px; line-height:1.3; text-decoration:none; }
#main #colg-liens a:hover { background:var(--fond); text-decoration:none; }
#main #colg-liens a.pere, #main #colg-liens a.rubrique { color:var(--marine); font-weight:700; }
#main #colg-liens a.courant { color:var(--bleu); font-weight:700; background:#e8f1f8; box-shadow:inset 3px 0 0 var(--orange); }
#main #colg-liens a.fils { color:#24323f; font-weight:400; }
#main #colg-liens a.frere { color:var(--doux); font-weight:400; }

/* ---------- Barre tri / pages */
#main .navigation { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; background:#fff; border:1px solid var(--bord); border-radius:10px; padding:10px 14px; margin:0 0 14px; text-align:left; }
#main .navigation_tri { margin:0; border:0; display:flex; align-items:center; gap:8px; font-size:14px; color:var(--doux); }
#main .navigation_tri::before { content:"Trier par"; white-space:nowrap; }
#main .navigation_tri select { border:1px solid var(--bord); border-radius:8px; padding:7px 10px; font-family:inherit; font-size:14px; background:#fff; color:#222; text-transform:lowercase; }
#main .navigation_paging { margin:0; display:flex; align-items:center; gap:4px; flex-wrap:wrap; color:var(--doux); }
#main .navigation_paging a:link, #main .navigation_paging a:visited, #main .navigation_paging a:hover, #main .navigation_paging a:active, #main .navigation_paging a.page_courante { min-width:36px; width:auto; height:36px; padding:0 6px; margin:0; border-radius:18px; border:1px solid var(--bord); display:inline-flex; align-items:center; justify-content:center; background:#fff; color:var(--marine); font-weight:600; font-size:14px; text-decoration:none; }
#main .navigation_paging a:hover { border-color:var(--bleu); }
#main .navigation_paging a.page_courante { background:var(--marine); border-color:var(--marine); color:#fff; }
#main #f1prev, #main #f1next, #main #f2prev, #main #f2next { vertical-align:middle; }
#main #f1prev img, #main #f1next img, #main #f2prev img, #main #f2next img { width:14px; height:auto; opacity:.7; }

/* ---------- Pagination des rubriques non terminales (.pplus) */
#main .pplus { display:flex; align-items:center; gap:4px; flex-wrap:wrap; background:#fff; border:1px solid var(--bord); border-radius:10px; padding:10px 14px; margin:14px 0; }
#main .pplus .nbrec { margin:0 12px 0 0; padding:0; color:var(--doux); font-weight:600; font-size:14px; }
#main .pplus .page, #main .pplus .pagex { min-width:36px; width:auto; height:36px; padding:0 6px; margin:0; border-radius:18px; border:1px solid var(--bord); display:inline-flex; align-items:center; justify-content:center; background:#fff; color:var(--marine); font-weight:600; font-size:14px; text-decoration:none; }
#main .pplus .page:hover { border-color:var(--bleu); }
#main .pplus .pagex { background:var(--marine); border-color:var(--marine); color:#fff; }
#main .pplus .fleche { margin:0; width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; }
#main .pplus .fleche img { width:24px; height:24px; opacity:.75; }
#main .pplus .more { margin:0 2px; font-size:18px; width:auto; height:auto; color:var(--doux); }

/* ---------- Mobile / appli */
@media (max-width: 900px) {
	#main { display:block; margin:0; padding:0; }
	#main #colg { width:100%; padding:0; margin:0 0 12px; }
	#main #cold { margin:10px; padding:0; border:0; }
	#main #filtresmain { border-radius:0; border-left:0; border-right:0; margin:0; }
	#main #ouvrirfiltres { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin:0; background:#fff; color:var(--marine); border:0; padding:12px; font-size:15px; font-weight:600; font-family:inherit; border-radius:0; cursor:pointer; }
	#main #ouvrirfiltres img { display:none; }
	#main #filtres { max-height:0; overflow:hidden; }
	#main #filtres01 { display:none; }
	#main #filtres02 { border-top:1px solid var(--bord); }
	#main .navigation { justify-content:center; }
}
@media (min-width: 901px) {
	#main #filtres { max-height:none !important; overflow:visible; }
}