/**
 * Renov Recherche : filtres des listings.
 * Jetons repris de la coquille du catalogue (renov-parcours), avec repli.
 */

.rr-f,
.rr-b,
.rr-actifs,
.rr-vehicules,
.rr-vide-f,
.rr-erreur {
	--rr-encre: var(--rn-encre, #1A1D3E);
	--rr-encre-2: var(--rn-encre-2, #3A4059);
	--rr-doux: var(--rn-doux, #5B6178);
	--rr-trait: var(--rn-trait, #E3E6ED);
	--rr-trait-fort: var(--rn-trait-fort, #CBD1DC);
	--rr-fond: var(--rn-fond, #FFFFFF);
	--rr-fond-2: var(--rn-fond-2, #F5F5F7);
	--rr-fond-3: var(--rn-fond-3, #EEF0F4);
	--rr-corail: var(--rn-corail-500, #E45444);
	--rr-corail-t: var(--rn-corail-600, #CA4A3C);
	--rr-corail-f: var(--rn-corail-700, #B14135);
	--rr-corail-50: var(--rn-corail-50, #FFF1EE);
	--rr-police: var(--rn-texte, 'Fredoka', system-ui, -apple-system, sans-serif);
	font-family: var(--rr-police);
	color: var(--rr-encre);
}

.rr-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* =========================================================================
 * Panneau
 * ====================================================================== */

.rr-f {
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0;
	background: var(--rr-fond);
	border: 1px solid var(--rr-trait);
	border-radius: 14px;
}

.rr-f-tete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 18px 6px;
}

.rr-f-titre {
	margin: 0 !important;
	font: 600 16px/1.3 var(--rr-police) !important;
	color: var(--rr-encre) !important;
	letter-spacing: 0;
	text-transform: none !important;
}

.rr-f-fermer { display: none; }

.rr-f-corps {
	padding: 0 8px 10px;
}

.rr-f-err {
	margin: 0 16px 8px;
	padding: 8px 10px;
	border-radius: 8px;
	background: var(--rr-corail-50);
	color: var(--rr-corail-f);
	font-size: 13px;
}

.rr-f-pied { display: none; }

.rr-f-appliquer {
	width: calc(100% - 20px);
	margin: 12px 10px 4px;
	height: 42px;
	border: 0;
	border-radius: 10px;
	background: var(--rr-encre);
	color: #fff;
	font: 600 14px var(--rr-police);
	cursor: pointer;
}

/* Groupe */

.rr-g {
	padding: 4px 10px 10px;
	border-top: 1px solid var(--rr-trait);
}

.rr-f-corps > .rr-g:first-of-type { border-top: 0; }

.rr-g-t {
	margin: 0 !important;
	font-size: inherit !important;
	line-height: inherit !important;
	text-transform: none !important;
}

.rr-g-b {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	min-height: 40px;
	padding: 8px 2px !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	color: var(--rr-encre) !important;
	font: 600 14px/1.3 var(--rr-police) !important;
	text-align: left;
	text-transform: none !important;
	letter-spacing: 0 !important;
	cursor: pointer;
	border-radius: 6px;
}

.rr-g-b > span:first-child { flex: 1 1 auto; }

.rr-g-nb {
	display: inline-grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--rr-corail-t);
	color: #fff;
	font-size: 11.5px;
	font-weight: 600;
}

.rr-g-chev {
	flex: 0 0 auto;
	color: var(--rr-doux);
	transition: transform 160ms ease;
}

.rr-g-b[aria-expanded="false"] .rr-g-chev { transform: rotate(-90deg); }

.rr-g-c[hidden] { display: none; }

.rr-g-note {
	margin: 0 0 8px;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--rr-doux);
}

.rr-g-q {
	display: block;
	width: 100%;
	height: 36px;
	margin: 2px 0 8px;
	padding: 0 10px 0 32px;
	border: 1px solid var(--rr-trait-fort);
	border-radius: 8px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%235B6178' stroke-width='2.4' d='M10.5 3a7.5 7.5 0 1 0 0 15 7.5 7.5 0 0 0 0-15zm5.3 12.8L21 21'/%3E%3C/svg%3E") no-repeat 11px 50%;
	font: 14px var(--rr-police);
	color: var(--rr-encre);
	box-shadow: none;
}

.rr-g-f {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.rr-o-l {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

/* Option : case native redessinee, libelle a gauche, effectif a droite. */
.rr-o {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 !important;
	padding: 0 6px;
	border-radius: 8px;
	transition: background-color 120ms ease;
}

.rr-o:hover:not(.is-zero) { background: var(--rr-fond-2); }

.rr-o[hidden] { display: none; }

.rr-o-c {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	margin: 0;
	border: 1.5px solid var(--rr-trait-fort);
	border-radius: 5px;
	background: #fff;
	display: grid;
	place-content: center;
	cursor: pointer;
	transition: background-color 120ms ease, border-color 120ms ease;
}

.rr-o-c::before {
	content: "";
	width: 10px;
	height: 6px;
	margin-top: -2px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(-45deg) scale(0);
	transition: transform 120ms ease;
}

.rr-o-c:checked {
	background: var(--rr-corail-t);
	border-color: var(--rr-corail-t);
}

.rr-o-c:checked::before { transform: rotate(-45deg) scale(1); }

.rr-o-c:focus-visible,
.rr-g-b:focus-visible,
.rr-plus:focus-visible,
.rr-chip:focus-visible,
.rr-raz:focus-visible,
.rr-f-raz:focus-visible,
.rr-f-voir:focus-visible,
.rr-f-fermer:focus-visible,
.rr-b-filtrer:focus-visible,
.rr-px-ok:focus-visible,
.rr-vehicules a:focus-visible {
	outline: 2px solid var(--rr-corail-t);
	outline-offset: 2px;
}

.rr-o label {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 auto;
	min-width: 0;
	min-height: 36px;
	margin: 0 !important;
	padding: 6px 0;
	font: 14px/1.3 var(--rr-police);
	color: var(--rr-encre-2);
	cursor: pointer;
}

.rr-o-n { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }

.rr-o-c:checked + label .rr-o-n { font-weight: 600; color: var(--rr-encre); }

.rr-o-q {
	flex: 0 0 auto;
	font-size: 12.5px;
	font-variant-numeric: tabular-nums;
	color: var(--rr-doux);
}

.rr-o.is-zero { opacity: .45; }
.rr-o.is-zero label,
.rr-o.is-zero .rr-o-c { cursor: not-allowed; }

.rr-plus {
	margin: 4px 0 0 4px;
	padding: 6px 4px !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	color: var(--rr-corail-t) !important;
	font: 600 13px var(--rr-police) !important;
	text-transform: none !important;
	cursor: pointer;
	border-radius: 6px;
}

.rr-plus:hover { text-decoration: underline; }

/* Prix */

.rr-px {
	margin: 8px 0 0 !important;
	padding: 10px 6px 0 !important;
	border: 0 !important;
	border-top: 1px dashed var(--rr-trait) !important;
	min-width: 0;
}

.rr-px-t {
	padding: 0 !important;
	margin: 0 0 6px !important;
	font: 600 12.5px var(--rr-police) !important;
	color: var(--rr-doux) !important;
}

.rr-px-l {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
	gap: 8px;
	align-items: end;
}

.rr-px-c label {
	display: block;
	margin: 0 0 4px !important;
	font: 12px var(--rr-police);
	color: var(--rr-doux);
}

.rr-px-i {
	position: relative;
	display: flex;
	align-items: center;
	height: 38px;
	border: 1px solid var(--rr-trait-fort);
	border-radius: 8px;
	background: #fff;
}

.rr-px-i:focus-within {
	border-color: var(--rr-corail-t);
	box-shadow: 0 0 0 3px rgba(202, 74, 60, .15);
}

.rr-px-i input {
	width: 100%;
	min-width: 0;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 22px 0 10px !important;
	border: 0 !important;
	outline: 0;
	background: transparent !important;
	box-shadow: none !important;
	font: 14px var(--rr-police);
	color: var(--rr-encre);
	font-variant-numeric: tabular-nums;
}

.rr-px-i span {
	position: absolute;
	right: 10px;
	color: var(--rr-doux);
	font-size: 13px;
	pointer-events: none;
}

.rr-px-i:has(input[aria-invalid="true"]) { border-color: var(--rr-corail-f); }

.rr-px-ok {
	height: 38px;
	padding: 0 12px !important;
	border: 0 !important;
	border-radius: 8px !important;
	background: var(--rr-encre) !important;
	color: #fff !important;
	font: 600 13px var(--rr-police) !important;
	cursor: pointer;
}

.rr-px-err {
	margin: 8px 0 0;
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--rr-corail-f);
	font-weight: 500;
}

.rr-px-aide {
	margin: 8px 0 0;
	font-size: 12px;
	line-height: 1.45;
	color: var(--rr-doux);
}

/* =========================================================================
 * Barre au-dessus de la grille
 * ====================================================================== */

.rr-b {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 16px;
	margin: 0 0 12px;
}

.rr-b-g,
.rr-b-d {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.rr-b-filtrer {
	display: none;
	align-items: center;
	gap: 8px;
	height: 44px;
	padding: 0 16px !important;
	border: 1px solid var(--rr-trait-fort) !important;
	border-radius: 10px !important;
	background: #fff !important;
	color: var(--rr-encre) !important;
	font: 600 14px var(--rr-police) !important;
	text-transform: none !important;
	cursor: pointer;
}

.rr-b-badge {
	display: inline-grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--rr-corail-t);
	color: #fff;
	font-size: 12px;
}

.rr-b-total {
	margin: 0 !important;
	font: 14px var(--rr-police);
	color: var(--rr-doux);
	white-space: nowrap;
}

.rr-b-total strong {
	color: var(--rr-encre);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.rr-tri {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 !important;
}

.rr-tri label {
	margin: 0 !important;
	font: 13px var(--rr-police);
	color: var(--rr-doux);
	white-space: nowrap;
}

.rr-tri-s { position: relative; display: inline-flex; }

.rr-tri select {
	appearance: none;
	-webkit-appearance: none;
	height: 40px;
	padding: 0 36px 0 12px !important;
	border: 1px solid var(--rr-trait-fort) !important;
	border-radius: 10px !important;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%231A1D3E' stroke-width='1.8' d='m2 4.5 4 4 4-4'/%3E%3C/svg%3E") no-repeat right 12px center !important;
	font: 600 14px var(--rr-police) !important;
	color: var(--rr-encre) !important;
	cursor: pointer;
	box-shadow: none !important;
}

.rr-tri select:focus-visible {
	outline: 2px solid var(--rr-corail-t);
	outline-offset: 2px;
}

/* Pastilles */

.rr-actifs[hidden] { display: none; }

.rr-actifs-l {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px !important;
	padding: 0 !important;
	list-style: none !important;
}

.rr-actifs-l li { margin: 0 !important; }

.rr-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 32px;
	padding: 4px 10px 4px 12px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--rn-fond-3, #EEF0F4) !important;
	color: var(--rr-encre) !important;
	font: 500 13px/1.2 var(--rr-police);
	text-decoration: none !important;
	transition: border-color 120ms ease, background-color 120ms ease;
}

.rr-chip:hover { border-color: var(--rr-trait-fort); background: #fff !important; }
.rr-chip svg { flex: 0 0 auto; opacity: .7; }

.rr-raz {
	padding: 4px;
	color: var(--rr-corail-t) !important;
	font: 600 13px var(--rr-police);
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 3px;
}

.rr-raz:hover { text-decoration-color: currentColor; }

/* Chargement : les resultats precedents restent visibles. */
[data-rn-listing] { position: relative; }

[data-rn-listing].rr-charge #rn-grille,
[data-rn-listing].rr-charge .rn-pagination,
[data-rn-listing].rr-charge .rr-vide-f {
	opacity: .5;
	transition: opacity 150ms ease 120ms;
	pointer-events: none;
}

[data-rn-listing].rr-charge::before {
	content: "";
	position: absolute;
	z-index: 2;
	top: -6px;
	left: 0;
	right: 0;
	height: 3px;
	border-radius: 3px;
	background: linear-gradient(90deg, transparent, var(--rn-corail-500, #E45444), transparent);
	background-size: 40% 100%;
	background-repeat: no-repeat;
	animation: rr-progression 1.1s linear infinite;
}

@keyframes rr-progression {
	from { background-position: -40% 0; }
	to { background-position: 140% 0; }
}

/* Erreur reseau : jamais presentee comme une absence de produit. */
.rr-erreur {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 16px;
	padding: 14px 16px;
	border: 1px solid #F3C9C2;
	border-radius: 12px;
	background: #FFF6F4;
}

.rr-erreur p { margin: 0 !important; font-size: 14px; line-height: 1.45; }

.rr-erreur-b {
	height: 40px;
	padding: 0 16px !important;
	border: 0 !important;
	border-radius: 10px !important;
	background: var(--rr-encre) !important;
	color: #fff !important;
	font: 600 14px var(--rr-police) !important;
	cursor: pointer;
}

/* Aucun produit pour ces filtres */
.rr-vide-f {
	padding: 28px;
	border: 1px dashed var(--rr-trait-fort);
	border-radius: 14px;
	background: var(--rr-fond-2);
}

.rr-vide-f h2 {
	margin: 0 0 6px !important;
	font: 600 19px/1.3 var(--rr-police) !important;
	color: var(--rr-encre) !important;
}

.rr-vide-f p { margin: 0 0 12px !important; color: var(--rr-encre-2); font-size: 14px; }

.rr-vide-f-t { font-weight: 600; color: var(--rr-encre) !important; }

.rr-vide-f-l {
	margin: 0 0 18px !important;
	padding: 0 !important;
	list-style: none !important;
	display: grid;
	gap: 6px;
}

.rr-vide-f-l li { margin: 0 !important; font-size: 14px; }
.rr-vide-f-l a { color: var(--rr-corail-t) !important; font-weight: 600; }
.rr-vide-f-l span { color: var(--rr-doux); margin-left: 4px; }

.rr-vide-f-raz {
	display: inline-flex;
	align-items: center;
	height: 44px;
	padding: 0 18px;
	border-radius: 10px;
	background: var(--rn-corail-600, #CA4A3C) !important;
	color: #fff !important;
	opacity: 1 !important;
	font: 600 14px var(--rr-police);
	text-decoration: none !important;
}

/* Catalogue par vehicule */
.rr-vehicules {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
	margin: 6px 0 14px;
}

.rr-vehicules-t { font-size: 13px; color: var(--rr-doux); }

.rr-vehicules ul {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.rr-vehicules li { margin: 0 !important; }

.rr-vehicules a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 0 14px;
	border: 1px solid var(--rr-trait-fort);
	border-radius: 999px;
	background: #fff;
	color: var(--rr-encre) !important;
	font: 600 13px var(--rr-police);
	text-decoration: none !important;
}

.rr-vehicules a:hover { border-color: var(--rr-encre); }

.rr-vehicules a.is-on {
	background: var(--rr-encre);
	border-color: var(--rr-encre);
	color: #fff !important;
}

/* =========================================================================
 * Ordinateur : colonne fixe au defilement, jamais plus haute que l'ecran
 * ====================================================================== */

@media (min-width: 1024px) {

	.rr-f {
		position: sticky;
		top: 16px;
		max-height: calc(100vh - 32px);
		overflow: hidden;
	}

	.rr-f-corps {
		flex: 1 1 auto;
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
		scrollbar-color: var(--rr-trait-fort) transparent;
	}

	.rr-fond { display: none !important; }
}

/* =========================================================================
 * Mobile et tablette : panneau dedie
 * ====================================================================== */

@media (max-width: 1023px) {

	.rr-filtres-js .rr-b-filtrer { display: inline-flex; }

	.rr-filtres-js .rr-f {
		position: fixed;
		inset: 0;
		z-index: 100001;
		height: 100vh;
		height: 100dvh;
		border: 0;
		border-radius: 0;
		transform: translateY(100%);
		visibility: hidden;
		transition: transform 260ms cubic-bezier(.2, .8, .2, 1), visibility 260ms;
	}

	body.rr-panneau-ouvert .rr-f {
		transform: none;
		visibility: visible;
	}

	body.rr-panneau-ouvert {
		position: fixed;
		width: 100%;
		overflow: hidden;
	}

	.rr-fond {
		position: fixed;
		inset: 0;
		z-index: 100000;
		background: rgba(26, 29, 62, .45);
	}

	.rr-fond[hidden] { display: none; }

	.rr-filtres-js .rr-f-tete {
		flex: 0 0 auto;
		padding: 10px 12px 10px 18px;
		border-bottom: 1px solid var(--rr-trait);
	}

	.rr-filtres-js .rr-f-fermer {
		display: inline-grid;
		place-items: center;
		width: 44px;
		height: 44px;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 50% !important;
		background: var(--rr-fond-2) !important;
		color: var(--rr-encre) !important;
		cursor: pointer;
	}

	.rr-filtres-js .rr-f-corps {
		flex: 1 1 auto;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		padding: 4px 8px 24px;
	}

	.rr-filtres-js .rr-f-pied {
		flex: 0 0 auto;
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		gap: 10px;
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
		border-top: 1px solid var(--rr-trait);
		background: #fff;
		box-shadow: 0 -6px 16px rgba(26, 29, 62, .06);
	}

	.rr-f-raz {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		height: 48px;
		padding: 0 16px;
		border: 1px solid var(--rr-trait-fort);
		border-radius: 12px;
		color: var(--rr-encre) !important;
		font: 600 15px var(--rr-police);
		text-decoration: none !important;
	}

	.rr-f-voir {
		height: 48px;
		padding: 0 16px !important;
		border: 0 !important;
		border-radius: 12px !important;
		background: var(--rr-corail-t) !important;
		color: #fff !important;
		font: 700 15px var(--rr-police) !important;
		text-transform: none !important;
		cursor: pointer;
	}

	.rr-f-voir:disabled { background: var(--rr-trait-fort) !important; color: var(--rr-encre-2) !important; cursor: default; }
	.rr-f-voir[aria-busy="true"] { opacity: .75; }

	/* Cibles tactiles confortables. */
	.rr-o label { min-height: 44px; font-size: 15px; }
	.rr-o-c { flex-basis: 20px; width: 20px; height: 20px; }
	.rr-g-b { min-height: 48px; font-size: 15px !important; }
	.rr-px-i { height: 44px; }
	.rr-px-ok { height: 44px; }
	.rr-px-i input { font-size: 16px; } /* pas de zoom automatique sur iOS */
	.rr-g-q { height: 44px; font-size: 16px; }

	.rr-tri select { height: 44px; }

	/* La vue liste est reservee aux ecrans larges. */
	.rr-listing .rr-vues { display: none; }
}

@media (min-width: 600px) and (max-width: 1023px) {

	.rr-filtres-js .rr-f {
		inset: 0 0 0 auto;
		width: min(440px, 92vw);
		transform: translateX(100%);
		box-shadow: -12px 0 32px rgba(26, 29, 62, .18);
	}
}

@media (max-width: 539px) {

	.rr-b { gap: 10px; }
	.rr-b-g { width: 100%; justify-content: space-between; }
	.rr-b-d { width: 100%; }
	.rr-tri { width: 100%; }
	.rr-tri label { display: none; }
	.rr-tri-s, .rr-tri select { width: 100%; }
	.rr-vide-f { padding: 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.rr-f, .rr-g-chev, .rr-o, .rr-o-c, .rr-o-c::before { transition: none !important; }
	[data-rn-listing].rr-charge::before { animation: none; background-size: 100% 100%; opacity: .6; }
}