:root {
	--tas-search-btn-bg: #e22c3f;
	--tas-search-btn-bg-hover: #a01830;
	--tas-sidebar-width: 400px;
	--tas-collapse-icon-expanded: 0deg;
	--tas-collapse-icon-collapsed: 180deg;
	--tas-collapse-icon-color: #e22c3f;

	--tas-search-input-icon-size: 25px;

	/* Loading spinners — match ILR red. */
	--typesense-search-spinner-color: #e22c3f;
	--tas-spinner-color: #e22c3f;

	--ilrew-card-documents: var(--ilrew-beige-40);
}

/* Post-type + sector badges sit in a row above the title (the plugin now
   renders them there in markup, so no CSS reorder is needed). */
.tas__suggestions .tas__suggestion-type {
	background-color: var(--ilrew-gold);
	color: var(--ilrew-white);
	text-wrap: nowrap;
	padding: 4px 10px;
	font-size: 11px;
	font-weight: 600;
	line-height: 14px;
	border-radius: 0;
	text-transform: none;
}

.tas__suggestions .tas__suggestion-secteur {
	font-size: 11px;
	line-height: 15px;
	color: var(--ilrew-noir-100);
}

.tas__suggestions .tas__suggestion-item--selected {
	background: var(--ilrew-noir-10);
	outline-offset: -3px;
	outline-width: 3px;
	outline-style: solid;
	outline-color: var(--ilrew-outline-default);
}

.tas__suggestions .tas__suggestion-item .tas__suggestion-badges {
	margin-bottom: 16px;
}

.tas__suggestions .tas__suggestion-document {
	color: var(--ilrew-black-100);
	margin-top: 12px;
	padding-top: 8px;
}

.tas__search-input-wrapper--icon-left .tas__search-input {
	padding-left: calc(15px + var(--tas-search-input-icon-size, 20px) + 18px);
}

.tas__search-input-wrapper--icon-left .tas__search-input-icon {
	left: 15px;
}

.tas__active-filters {
	padding: 8px 30px 40px;
	margin: 0;
}

.tas__active-filters-title {
	font-size: 16px;
	font-weight: 600;
	text-wrap: nowrap;
	color: var(--tas-text-color);
	margin: 0;
}

/* Active filter chips — ILR design system. */
.tas__chip,
.tas__chip--query {
	border-radius: 0;
}

.tas__chip,
.tas__chip--query {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	background: var(--ilrew-beige-60);
	color: var(--ilrew-noir-100);
	font-size: 11px;
	padding: 4px 10px;
	border: none;
	font-style: normal;
}

.tas__chip button,
.tas__chip--query button {
	font-family: "Open Sans", Sans-serif;
	color: var(--e-global-color-text);
	border-radius: 50px;
	padding: 0;
	width: auto;
	height: auto;
}

.tas__active-filters {
	gap: 16px;
}

/* Scoped under .tas__active-filters to out-specify Elementor's
   `.elementor-kit-N button` rule (0,1,1) without hardcoding the kit id. */
.tas__active-filters .tas__clear-all {
	display: inline-flex;
	flex-shrink: 0;
	position: relative;
	background: none;
	border: none;
	border-radius: 0;
	cursor: pointer;
	padding: 0;
	outline-color: var(--ilrew-outline-color);
	background-position: 100% 100%;
	background-repeat: no-repeat;
	background-image: linear-gradient(var(--ilrew-red-100), var(--ilrew-red-100));
	transition: color 0.15s ease-in-out, background-size 0.3s ease-in-out;
	background-size: var(--ilrew-link-line-width);
}

.tas__active-filters .tas__clear-all:hover,
.tas__active-filters .tas__clear-all:focus,
.tas__active-filters .tas__clear-all:active {
	outline-color: var(--ilrew-outline-default);
	color: var(--ilrew-red-100);
	--ilrew-link-line-width: 0% 2px;
}

body {
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	color: #282525;
}

/* Search bar wrapper */
.tas__search-bar-wrapper {
	display: flex;
	flex-direction: column;
	gap: 18px;
	background-color: #f4f2ef;
	padding: 24px 30px 40px;
	margin-bottom: 24px;
}

.tas__search-bar {
	margin-bottom: 0;
}

.tas__search-bar-label {
	display: inline-block;
	font-family: var(--ilrew-font-family);
	color: var(--ilrew-gold);
	margin: 0;
	font-size: 24px;
	font-weight: 400;
	line-height: 32px;
}

.tas__search-bar .tas__search-input-wrapper.tas__search-input-wrapper--with-button {
	gap: 24px;
}

/* ── Bar-only widget (home page / landing pages) ──────────────
   A standalone field + suggestions that hands off to the full
   search page, with the "Recherche avancée" link under the field. */
/* The widget renders bare here — no band of its own. The beige panel and
   its padding are set on the Elementor container that wraps the widget,
   so each placement can size and colour the band independently. The base
   rule's flex column + 18px gap is kept: that is internal rhythm between
   the label and the field, not layout the container should own.

   Qualified with the widget's own root class (0,3,0) so it outranks the
   later `.tas--mobile .tas__search-bar-wrapper` padding (0,2,0): the JS
   adds `tas--mobile` to this root too below 1024px, and that rule is for
   the advanced search toolbar, not the standalone bar. Winning on
   specificity rather than source order keeps this correct wherever the
   block sits in the file. */
.elementor-typesense-search-bar.tas--bar-only .tas__search-bar-wrapper {
	margin-bottom: 0;
	padding: 0;
	background-color: transparent;
}

/* The label reads as an H2 here. The base rule above already matches the
   mobile H2 (24px/32px, --ilrew-gold is the same #696054 as the Elementor
   "Gold" global), so only the ≥768px step needs adding — see
   ilr-elementor-widgets/assets/css/font-size.css .ilrew-font-size-h2. */
@media (min-width: 768px) {
	.tas--bar-only .tas__search-bar-label {
		font-size: 33px;
		line-height: 45px;
	}
}

/* Heavier on phones only, matching the theme's own headings (font-size.css
   bumps h1–h3 to 500 on small screens). Paired with the 768px size step
   above so weight and size change together; the base rule keeps 400 from
   768px up. Written as a media query rather than keyed on `.tas--mobile`,
   which JS only adds after hydration — a class would repaint the weight
   on load. */
@media (max-width: 767px) {
	.tas--bar-only .tas__search-bar-label {
		font-weight: 500;
	}
}

/* The field and the external button share a two-column grid so the
   "Recherche avancée" link can sit in the field's own column and align
   to its right edge, excluding the button. Placement is explicit so
   hiding the button (below 1024px) can't pull the link into its cell. */
.tas--bar-only .tas__search-bar .tas__search-input-wrapper.tas__search-input-wrapper--with-button,
.tas--bar-only .tas__search-bar .tas__search-input-wrapper.tas__search-input-wrapper--with-internal-button {
	display: grid;
	column-gap: 24px;
	row-gap: 10px;
	align-items: center;
}

.tas--bar-only .tas__search-bar .tas__search-input-wrapper.tas__search-input-wrapper--with-button {
	grid-template-columns: 1fr auto;
}

/* Below the mobile breakpoint the plugin hides the external button and the
   compact in-field disc takes over, so the second track has nothing left
   in it. An empty `auto` track is 0px wide but the 24px column-gap is
   still reserved between the two tracks, which pulled both the field and
   the "Recherche avancée" link 24px short of the right edge. Collapse to a
   single column instead. Keyed on `.tas--mobile` — the same class the
   plugin uses to hide the button — so the two can never disagree at the
   boundary. */
.tas--bar-only.tas--mobile .tas__search-bar .tas__search-input-wrapper.tas__search-input-wrapper--with-button {
	grid-template-columns: 1fr;
}

.tas--bar-only .tas__search-bar .tas__search-input-wrapper.tas__search-input-wrapper--with-internal-button {
	grid-template-columns: 1fr;
}

.tas--bar-only .tas__search-input-wrapper > .tas__search-input-container {
	grid-column: 1;
	grid-row: 1;
}

.tas--bar-only .tas__search-input-wrapper > .tas__search-button:not(.tas__search-button--compact) {
	grid-column: 2;
	grid-row: 1;
}

.tas--bar-only .tas__search-bar-footer {
	grid-column: 1;
	grid-row: 2;
	display: flex;
	justify-content: flex-end;
}

/* Same animated underline as the "Réinitialiser" control: the red rule
   retracts on hover/focus. */
.tas--bar-only .tas__advanced-search-link {
	font-family: var(--ilrew-font-family, inherit);
	font-size: 16px;
	line-height: 20px;
	font-weight: 400;
	color: var(--ilrew-noir-100, #282525);
	text-decoration: none;
	padding-bottom: 2px;
	border-radius: 0;
	outline-color: var(--ilrew-outline-color);
	background-position: 100% 100%;
	background-repeat: no-repeat;
	background-image: linear-gradient(var(--ilrew-red-100, #e22c3f), var(--ilrew-red-100, #e22c3f));
	background-size: 100% 2px;
	transition: color 0.15s ease-in-out, background-size 0.3s ease-in-out;
}

.tas--bar-only .tas__advanced-search-link:hover,
.tas--bar-only .tas__advanced-search-link:focus {
	color: var(--ilrew-red-100, #e22c3f);
	background-size: 0% 2px;
}

.tas--bar-only .tas__advanced-search-link:focus {
	outline-color: var(--ilrew-outline-default);
}

/* Internal-button variant: a compact red disc inside the field, matching
   the inline (horizontal) search bar rather than the external pill.
   Desktop only — below the mobile breakpoint the plugin hides every
   non-compact button and the compact disc takes over, so both variants
   converge on the same in-field control. */
.tas--bar-only .tas__search-input-container {
	position: relative;
}

.tas--bar-only:not(.tas--mobile) .tas__search-bar .tas__search-button--internal {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
	width: 26px;
	height: 26px;
	min-width: 0;
	padding: 0;
	gap: 0;
	border: 0;
	border-radius: 50%;
	background: var(--ilrew-red-100, #e22c3f);
	color: var(--ilrew-white, #fff);
	z-index: 2;
	cursor: pointer;
}

.tas--bar-only:not(.tas--mobile) .tas__search-bar .tas__search-button--internal .tas__search-button-icon {
	opacity: 1;
	margin: 0;
}

.tas--bar-only:not(.tas--mobile) .tas__search-bar .tas__search-button--internal .tas__search-button-icon svg {
	width: 14px;
	height: 14px;
}

.tas--bar-only:not(.tas--mobile) .tas__search-input-wrapper--with-internal-button .tas__search-input {
	padding-right: 50px;
}

.tas__search-input {
	border: none;
	border-radius: 0;
}

/* Search input icon — use the site body text colour (currentColor).
   z-index keeps it above the input, which Elementor lifts to z-index:1
   on focus (its white background would otherwise cover the icon). */
.tas__search-input-icon {
	color: var(--ilrew-noir-100);
	z-index: 2;
}

/* Search button — replicate the ILR primary "RECHERCHER" button.
   Scoped under .tas__search-bar to out-specify `.elementor-kit-N button` (0,1,1). */
.tas__search-bar .tas__search-button {
	margin-left: 0;
	background: var(--ilrew-red-100);
	color: var(--ilrew-white);
	border: 2px solid transparent;
	border-radius: 50px;
	padding: 16px 40px;
	font-size: 12px;
	font-weight: 700;
	line-height: 13px;
	text-transform: uppercase;
	font-family: "Open Sans", sans-serif;
	gap: 5px;
}

/* Arrow hidden by default, slides in on hover/focus/active (like the
   ILR primary button's icon reveal). */
.tas__search-bar .tas__search-button .tas__search-button-icon {
	opacity: 0;
	transition: all 0.3s ease;
	margin-left: -15px;
	margin-right: 0;
}

.tas__search-bar .tas__search-button:hover .tas__search-button-icon,
.tas__search-bar .tas__search-button:focus .tas__search-button-icon,
.tas__search-bar .tas__search-button:active .tas__search-button-icon {
	opacity: 1;
	margin-left: 8px;
	margin-right: -11.5px;
}

.tas__search-bar .tas__search-button .tas__search-button-text {
	transition: all 0.3s ease;
	margin-left: 0;
}

.tas__search-bar .tas__search-button:hover .tas__search-button-text,
.tas__search-bar .tas__search-button:focus .tas__search-button-text,
.tas__search-bar .tas__search-button:active .tas__search-button-text {
	margin-left: -11.5px;
}

/* Results count "(N)" — sized independently from the heading. */
.tas__results-title .tas__results-count {
	font-size: 24px;
	color: var(--ilrew-gold);
}

/* Result card layout */
.tas__result-card {
	--ilrew-card-bg-color: var(--ilrew-beige-20);
	--ilrew-card-border-color: var(--ilrew-beige-20);
	/* Base value (0) so the CTA's translateY(var()) has a defined start
	   to transition from on card hover (which sets it to -100%). */
	--ilrew-btn-icon-hover-translation: 0%;
	position: relative;
	/* Flex column so the footer can be pinned to the bottom of the card
	   (cards in a row stretch to equal height; without this a shorter
	   card leaves empty space below its footer). */
	display: flex;
	flex-direction: column;
	border-radius: 0;
	box-shadow: none;
	padding: 30px 30px 15px;
	background: var(--ilrew-card-bg-color);
	border: 1px solid var(--ilrew-card-border-color);
	transition: all 0.5s ease;
}

/* <1024px (compact/mobile mode): uniform 15px card padding. */
.tas--mobile .tas__result-card {
	padding: 15px;
}

/* Only cards that are actually clickable (they carry a .card-link-cover
   overlay link) get the hover affordance. Types whose primary action is
   an in-card control instead — Formulaire (Options), FAQ/Glossaire
   (Voir plus) — have no cover and so stay static on hover. */
.tas__result-card:has(.card-link-cover):hover {
	--ilrew-card-bg-color: var(--ilrew-white);
	--ilrew-card-border-color: var(--ilrew-gold);
	--ilrew-card-link-width: 100%;
	--ilrew-card-link-line-width: 100% 2px;
	--ilrew-btn-icon-hover-translation: -100%;
	--ilrew-card-documents: var(--ilrew-beige-60);
}

/* Results loading: shimmer skeletons instead of the spinner overlay
   (injected by scripts.js when .tas__results gets --loading). */
.tas__results--loading {
	opacity: 1; /* override the plugin's 0.5 dim */
}

.tas__results--loading .tas__loading-overlay,
.tas__results--loading .tas__result-card {
	display: none;
}

.tas__skeletons {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.tas__skeleton-card {
	padding: 30px 30px 36px;
	background: #f9f9f7;
}

.tas__skeleton-line {
	display: block;
	border-radius: 3px;
	background-color: var(--ilrew-beige-100);
	background-image: linear-gradient(
		90deg,
		var(--ilrew-beige-100) 0%,
		#f1eee8 50%,
		var(--ilrew-beige-100) 100%
	);
	background-size: 200% 100%;
	animation: tas-skeleton-shimmer 1.4s ease-in-out infinite;
}

.tas__skeleton-badge {
	width: 90px;
	height: 20px;
}

.tas__skeleton-title {
	width: 65%;
	height: 24px;
	margin-top: 20px;
}

.tas__skeleton-text {
	width: 100%;
	height: 14px;
	margin-top: 16px;
}

.tas__skeleton-text--short {
	width: 45%;
}

@keyframes tas-skeleton-shimmer {
	0% {
		background-position: 100% 0;
	}
	100% {
		background-position: -100% 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tas__skeleton-line {
		animation: none;
	}
}

/* ===== Pagination: compact pager with circular arrow buttons ===== */
.tas__pagination {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 16px;
	margin-top: 32px;
	padding-right: 30px;
}

/* Hide the numbered buttons + ellipsis — we use a "N sur M" indicator. */
.tas__pagination .tas__page-num,
.tas__pagination .tas__page-ellipsis {
	display: none;
}

/* Circular arrow buttons (scoped to out-specify .elementor-kit-N button). */
.tas__pagination .tas__page-prev,
.tas__pagination .tas__page-next {
	position: relative;
	overflow: hidden;
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	padding: 0;
	border: none;
	border-radius: 50%;
	font-size: 0; /* hide the "Previous"/"Next" text */
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.tas__pagination .tas__page-prev,
.tas__pagination .tas__page-next {
	background: var(--ilrew-red-100);
	color: #fff;
}

/* No background change on hover — only the arrow animates. */

/* Grey only when disabled (no page to go to). */
.tas__pagination .tas__page-prev[disabled],
.tas__pagination .tas__page-next[disabled] {
	background: var(--ilrew-beige-100);
	color: #b3aea4;
	cursor: not-allowed;
}

/* Card "EN SAVOIR PLUS" arrow (real inline SVG injected by scripts.js),
   duplicated and stacked so it slides up on hover: the visible one exits
   the top and the duplicate takes its place. */
.tas__pagination .tas__page-arrow {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.tas__pagination .tas__page-arrow svg {
	width: 15px;
	height: 12px;
}

/* Prev points left — flip the (right-pointing) arrow. */
.tas__pagination .tas__page-prev {
	transform: scaleX(-1);
}

.tas__pagination .tas__page-arrow--lead {
	transform: translateY(0);
}

.tas__pagination .tas__page-arrow--follow {
	transform: translateY(100%);
}

.tas__pagination .tas__page-prev:not([disabled]):hover .tas__page-arrow--lead,
.tas__pagination .tas__page-next:not([disabled]):hover .tas__page-arrow--lead {
	transform: translateY(-100%);
}

.tas__pagination .tas__page-prev:not([disabled]):hover .tas__page-arrow--follow,
.tas__pagination .tas__page-next:not([disabled]):hover .tas__page-arrow--follow {
	transform: translateY(0);
}

/* "[input] sur N" indicator (injected by scripts.js). */
.tas__page-indicator {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: #282525;
}

.tas__pagination .tas__page-input {
	width: 44px;
	height: 40px;
	padding: 0 4px;
	text-align: center;
	border: 1px solid var(--ilrew-beige-100);
	border-radius: 4px;
	background: #fff;
	font-family: "Open Sans", sans-serif;
	font-size: 14px;
	color: #282525;
}

.tas__pagination .tas__page-input:focus {
	outline: none;
	border-color: var(--ilrew-red-100);
}

/* Card header */
.tas__card-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 24px;
}

.tas__card-header-left {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.tas__card-badge--type {
	background-color: var(--ilrew-gold);
	color: var(--ilrew-white);
	text-wrap: nowrap;
	padding: 4px 10px;
	font-size: 11px;
	font-weight: 600;
	line-height: 14px;
}

.tas__card-types {
	font-size: 11px;
	font-style: italic;
	line-height: 14px;
}

.tas__card-header-right {
	flex-shrink: 0;
}

.tas__card-secteur {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 500;
}

.tas__field-icon {
	color: #e22c3f;
	margin: 0;
}

.tas__field-icon svg {
	width: 25px;
	height: auto;
}

.tas__field-icon svg path {
	vector-effect: non-scaling-stroke;
	stroke-width: 1.25px;
}

/* Multi-sector "ILR" tooltip trigger — a button that looks like the
   plain secteur label. Scoped under .tas__result-card to beat
   Elementor's button reset; kept above the card-cover link (z-index)
   so it stays clickable. */
.tas__result-card .tas__secteur-tip {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0;
	background: none;
	border: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.tas__result-card .tas__secteur-tip:focus {
	outline: none;
}

.tas__result-card .tas__secteur-tip:focus-visible {
	outline: 2px solid -webkit-focus-ring-color;
	outline-offset: 2px;
}

/* "+N" pill — signals there are more sectors to reveal on hover. */
.tas__secteur-more-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 7px;
	border-radius: 50px;
	background: var(--ilrew-beige-60);
	color: var(--ilrew-noir-100);
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
}

/* Secteur list inside the shared .tas__dropdown-tooltip bubble. */
.tas__secteur-tooltip-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-style: normal;
}

.tas__secteur-tooltip-item {
	display: flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
}

.tas__dropdown-tooltip .tas__field-icon {
	display: inline-flex;
	flex-shrink: 0;
}

.tas__dropdown-tooltip .tas__field-icon svg {
	width: 18px;
	height: 18px;
	vertical-align: middle;
}

/* Field tooltip trigger: 20x20 info icon (SVG injected by scripts.js)
   instead of the plugin's "ⓘ" glyph. The SVG has its own circle, so
   the plugin's CSS border circle is removed. */
.tas__field-tooltip {
	width: 20px;
	height: 20px;
	border: none;
	color: inherit;
}

.tas__field-tooltip-glyph {
	display: inline-flex;
}

.tas__field-tooltip-glyph svg {
	display: block;
	width: 20px;
	height: 20px;
}

/* Date */
.tas__result-card .tas__card-date {
	color: var(--ilrew-gold);
	font-size: 14px;
	font-weight: 600;
	line-height: 24px;
	margin-bottom: 24px;
}

/* Title */
.tas__result-card .tas__card-title {
	font-size: 18px;
	font-weight: 400;
	margin: 0 0 16px;
	line-height: 1.4rem;
	color: var(--ilrew-noir-100);
}

.tas__result-card .tas__card-title a {
	text-decoration: none;
	line-height: inherit;
	font-weight: 400;

	background-image: linear-gradient(currentColor, currentColor);
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: var(--ilrew-card-link-line-width);
	transition: background-size .3s ease-in-out;
}

/* Some titles are authored with block markup baked into the field
   (e.g. `titre_entier` wrapped in its own <h3>), which the sanitizer
   legitimately preserves. Neutralise any such nested block so it
   inherits the title's own typography and stays on the same line
   instead of resetting the size/weight or forcing a break. */
.tas__result-card .tas__card-title :is(h1, h2, h3, h4, h5, h6, p, div),
.tas__suggestion-title :is(h1, h2, h3, h4, h5, h6, p, div) {
	display: inline;
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	margin: 0;
	padding: 0;
}

.tas__result-card .tas__result-snippet {
	font-size: 13px;
	color: inherit;
}

/* Service card: a full-width footer below the image + content. Scoped
   via :has() since the card has no post-type modifier class. The card
   is a query container so the body restacks based on the card's own
   width, not the viewport (the sidebar skews the viewport relationship
   to card width).

   Base (narrow) layout: image stacked below the content, full width.
   Wider cards switch to image-left / content-right below. */
.tas__result-card:has(.tas__card-service-body) {
	container-type: inline-size;
}

.tas__card-service-body {
	display: flex;
	flex-direction: column-reverse;
	align-items: stretch;
	gap: 24px;
}

.tas__card-image {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 359 / 236;
	background-color: var(--ilrew-beige-80);
}

/* Size to the image's natural dimensions, capped to the box, so it is
   centred without ever stretching the box past its aspect-ratio
   (a 100% width/height img upscales and breaks the ratio). */
.tas__card-image img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
}

/* Actualité images (news photos / the ILR placeholder) fill the box.
   The image is absolutely positioned so it can't stretch the box past
   its aspect-ratio. */
.tas__card-image--cover {
	position: relative;
	overflow: hidden;
}

.tas__card-image--cover img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: cover;
}

/* Publication fallback when no featured image is set: the document icon
   centred in the beige aspect-ratio box. */
.tas__card-image--placeholder {
	color: var(--ilrew-gold);
}

.tas__card-image--placeholder svg {
	width: auto;
	height: 45%;
	max-height: 90px;
}

.tas__card-main {
	flex: 1;
	min-width: 0;
}

.tas__result-card .tas__card-footer--service {
	justify-content: flex-end;
}

/* Service secondary link (footer, left) — uppercase label with the ILR
   red underline that retracts to the right on hover. margin-right:auto
   pushes the primary link to the right; z-index keeps it above the card
   cover. The underline is a ::after bar rather than a background-image
   gradient because Elementor forces background-image:none on these
   content links (the title link escapes it by being inside a heading). */
.tas__card-secondary-link {
	position: relative;
	z-index: 2;
	margin-right: auto;
	color: #282525;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	text-decoration: none;
}

.tas__card-secondary-link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 2px;
	background: var(--ilrew-red-100, #e22c3f);
	transform: scaleX(1);
	transform-origin: right center;
	transition: transform 0.3s ease-in-out;
}

.tas__card-secondary-link:hover::after,
.tas__card-secondary-link:focus-visible::after {
	transform: scaleX(0);
}

/* Formulaire "En savoir plus" (ACF lien_interne) rendered inline in the
   card body — sentence case, hugging its text on the left, under the
   content. Reuses the secondary-link's retracting red underline. */
.tas__card-secondary-link--form {
	align-self: flex-start;
	margin-top: 8px;
	margin-right: 0;
	font-size: 14px;
	text-transform: none;
}

/* Stacked cards (<= 600px), e.g. publications / statistiques in the
   3-column grid: let the image fill the leftover vertical space so cards
   in a row line up. The content keeps its natural height; the image
   grows into whatever is left between it and the footer. */
@container (width <= 600px) {
	.tas__card-service-body {
		flex-grow: 1;
	}

	.tas__card-main {
		flex-grow: 0;
	}

	.tas__card-image {
		flex-grow: 1;
	}
}

/* Wider cards (> 600px): image on the left, content on the right. */
@container (width > 600px) {
	.tas__card-service-body {
		flex-direction: row;
		align-items: flex-start;
	}

	.tas__card-image {
		flex-shrink: 0;
		width: 198px;
		aspect-ratio: 198 / 195;
	}

	/* Actualité images get a wider landscape box. */
	.tas__card-image--cover {
		width: 40%;
		max-width: 400px;
		height: 190px;
	}
}

/* Glossaire: the definition is shown cropped (JS truncates to N chars +
   "…") in a white box, expanded via the "Voir plus" toggle. */
.tas__glossaire-content {
	margin-top: 12px;
	background: #fff;
	padding: 20px;
}

.tas__glossaire-content a {
	z-index: 2;
	text-transform: uppercase;
	background-position: 100% 100%;
	background-repeat: no-repeat;
	background-image: linear-gradient(var(--ilrew-red-100), var(--ilrew-red-100));
	background-size: 100% 2px;
	margin-right: auto;
	font-weight: 600;
	transition: background-size .3s ease-in-out;
	position: relative;
}

.tas__glossaire-content a:hover,
.tas__glossaire-content a:focus {
	background-size: 0 2px;
}

.tas__glossaire-content ul li::marker {
	color: var(--ilrew-red-100);
}

.tas__result-card .tas__card-footer--glossaire {
	justify-content: flex-end;
}

/* Scoped under .tas__result-card to out-specify Elementor's
   `.elementor-kit-N button` rule (0,1,1) and reset its padding. */
.tas__result-card .tas__glossaire-toggle {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
}

/* Show the plus icon when collapsed, the minus icon when expanded. */
.tas__glossaire-toggle .tas__toggle-icon--minus {
	display: none;
}

.tas__glossaire-toggle[aria-expanded="true"] .tas__toggle-icon--plus {
	display: none;
}

.tas__glossaire-toggle[aria-expanded="true"] .tas__toggle-icon--minus {
	display: block;
}

/* Footer */
.tas__card-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	/* Pin to the bottom of the (stretched) card while keeping at least a
	   16px gap above the divider when the card isn't stretched. */
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid #e5e3dc;
}

/* The block immediately before the footer keeps the 16px separation the
   footer's auto top-margin can't guarantee in a non-stretched card. */
.tas__result-card > :has(+ .tas__card-footer) {
	margin-bottom: 16px;
}

/* Footer info - empty state stays right-aligned */
.tas__card-footer-info:empty {
	display: none;
}

/* Card status indicator */
.tas__card-status {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 500;
}

.tas__card-status-dot {
	width: 5px;
	height: 5px;
	display: block;
	border-radius: 100%;
	flex-shrink: 0;
}

/* En cours status - green */
.tas__card-status--en-cours .tas__card-status-dot {
	background-color:var(--ilrew-gris-green-100);
}

/* Clôturé status - grey */

.tas__card-status--cloture .tas__card-status-dot {
	background-color: var(--ilrew-red-100);
}

/* Main document button (footer left) */
.tas__card-doc {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	font-weight: 600;
	color: #282525;
	text-decoration: none;
	position: relative;
	z-index: 2;
}

/* Red circle (design system), shared by the download and external
   buttons. It also clips the duplicated icon for the slide effect. */
.tas__card-doc-icon {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	background: var(--ilrew-red-100, #e22c3f);
	color: #ffffff;
	border-radius: 99999px;
	width: 28px;
	height: 28px;
}

.tas__card-doc-icon svg {
	width: 14px;
	height: auto;
}

/* Icon is duplicated and stacked; on hover and keyboard focus the
   visible one slides out the top while the duplicate takes its place —
   same microinteraction as the pager arrows. Only the icon animates. */
.tas__card-doc-arrow {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.tas__card-doc-arrow svg {
	width: auto;
	height: 15px;
}

.tas__card-doc-arrow--lead {
	transform: translateY(0);
}

.tas__card-doc-arrow--follow {
	transform: translateY(100%);
}

.tas__card-doc:hover .tas__card-doc-arrow--lead,
.tas__card-doc:focus-visible .tas__card-doc-arrow--lead {
	transform: translateY(-100%);
}

.tas__card-doc:hover .tas__card-doc-arrow--follow,
.tas__card-doc:focus-visible .tas__card-doc-arrow--follow {
	transform: translateY(0);
}

/* Label: uppercase title over an optional file-info line. The whole
   label is duplicated and slides up on hover / keyboard focus — same
   vertical animation as the icon and the "En savoir plus" button. The
   text colour never changes; only the position animates. */
.tas__card-doc-label {
	position: relative;
	overflow: hidden;
	display: inline-block;
}

.tas__card-doc-label-lead,
.tas__card-doc-label-follow {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
	transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.tas__card-doc-label-lead {
	transform: translateY(0);
}

.tas__card-doc-label-follow {
	position: absolute;
	inset: 0;
	transform: translateY(100%);
}

.tas__card-doc:hover .tas__card-doc-label-lead,
.tas__card-doc:focus-visible .tas__card-doc-label-lead {
	transform: translateY(-100%);
}

.tas__card-doc:hover .tas__card-doc-label-follow,
.tas__card-doc:focus-visible .tas__card-doc-label-follow {
	transform: translateY(0);
}

.tas__card-doc-title {
	text-transform: uppercase;
}

.tas__card-doc-size {
	font-weight: 400;
	font-style: italic;
	font-size: 11px;
	color: var(--ilrew-btn-subtext-color);
}

.tas__card-link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #282525;
	text-decoration: none;
	position: relative;
	z-index: 2;
}

/* "En savoir plus" label: duplicated and stacked, sliding up on hover
   just like the arrow. The text colour intentionally stays the same —
   only the position animates. */
.tas__card-link-text {
	position: relative;
	display: inline-block;
	overflow: hidden;
}

.tas__card-link-text--lead,
.tas__card-link-text--follow {
	display: block;
	transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.tas__card-link-text--lead {
	transform: translateY(0);
}

.tas__card-link-text--follow {
	position: absolute;
	inset: 0;
	transform: translateY(100%);
}

.tas__card-link:hover .tas__card-link-text--lead,
.tas__card-link:focus-visible .tas__card-link-text--lead {
	transform: translateY(-100%);
}

.tas__card-link:hover .tas__card-link-text--follow,
.tas__card-link:focus-visible .tas__card-link-text--follow {
	transform: translateY(0);
}

.tas__card-link-icon {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	background: #e22c3f;
	color: #ffffff;
	border-radius: 99999px;
	width: 32px;
	height: 32px;
}

.tas__card-link-icon svg {
	width: 15px;
	height: auto;
}

/* "En savoir plus" arrow: duplicated and stacked, sliding up on hover —
   same vertical animation as the pager / download buttons. */
.tas__card-link-arrow {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.tas__card-link-arrow--lead {
	transform: translateY(0);
}

.tas__card-link-arrow--follow {
	transform: translateY(100%);
}

.tas__card-link:hover .tas__card-link-arrow--lead,
.tas__card-link:focus-visible .tas__card-link-arrow--lead {
	transform: translateY(-100%);
}

.tas__card-link:hover .tas__card-link-arrow--follow,
.tas__card-link:focus-visible .tas__card-link-arrow--follow {
	transform: translateY(0);
}

/* Decorative footer CTA ("En savoir plus" / "Accédez au service"): looks
   like a link but isn't — the card title is the real link. pointer-events
   none lets clicks fall through to the card cover, and the slide is driven
   by the card's hover (--tas-cta-*-y) instead of the element's own :hover. */
.tas__card-cta {
	pointer-events: none;
}

/* The slide is driven by the CARD's hover via the shared
   --ilrew-btn-icon-hover-translation variable (0 → -100%), matching the
   original ilr-elementor-widgets buttons. The lead copy moves with the
   variable; the follow copy sits one line lower (calc(100% + var)) and
   moves with it too. */
.tas__card-cta .tas__card-link-text--lead,
.tas__card-cta .tas__card-link-arrow--lead,
.tas__card-cta .tas__card-doc-label-lead,
.tas__card-cta .tas__card-doc-arrow--lead {
	transform: translateY(var(--ilrew-btn-icon-hover-translation, 0%));
}

.tas__card-cta .tas__card-link-text--follow,
.tas__card-cta .tas__card-link-arrow--follow,
.tas__card-cta .tas__card-doc-label-follow,
.tas__card-cta .tas__card-doc-arrow--follow {
	transform: translateY(calc(100% + var(--ilrew-btn-icon-hover-translation, 0%)));
}

/* Hide default badges since we're using custom layout */
.tas__result-meta {
	display: none;
}

/* Excerpt styling (matches snippet) */
.tas__result-excerpt {
	font-size: 13px;
    		line-height: 18px;
	margin: 0 0 16px;
}

/* Grouped PDF matches: one document per group, with the other pages
   it was found on listed beneath the best match. Kept compact. */
.tas__result-documents {
	margin-top: 16px;
	background-color: #fff;
	padding: 20px;
	border: 1px solid var(--ilrew-card-documents);
}

.ilrew-doc-group {
	min-width: 0;
}

/* White PDF icon inside a red circle, matching the site's icon buttons. */
.ilrew-doc-group .tas__result-document-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--ilrew-red-100, #e22c3f);
	color: var(--ilrew-white, #fff);
}

.ilrew-doc-group .tas__result-document-icon svg {
	width: auto;
	height: 12px;
}

/* Dividers live on the group itself; drop the per-row border the
   plugin adds so there's no double line. */
.ilrew-doc-group .tas__result-document {
	padding: 2px 0;
	border-top: none;
}

.ilrew-doc-group a.tas__result-document {
	position: relative;
	z-index: 2;
}

.ilrew-doc-group .tas__result-document-page {
	background-color: var(--ilrew-noir-80);
	color: #ffffff;
}

/* Divider between different PDFs: equal 4px space above and below
   the line. */
.ilrew-doc-group + .ilrew-doc-group {
	border-top: 1px dashed #cdc6b6;
	margin-top: 4px;
	padding-top: 4px;
}

/* Stronger solid divider above the first PDF to separate the document
   list from the card content. */
.ilrew-doc-pages {
	padding: 0 0 2px 24px;
	font-size: 12px;
	line-height: 1.5;
	color: #888;
}

.ilrew-doc-pages__label {
	font-style: italic;
}

.ilrew-doc-pages__page {
	color: #777;
	text-decoration: none;
	white-space: nowrap;
}

a.ilrew-doc-pages__page:hover {
	color: #0073aa;
	text-decoration: underline;
}

.ilrew-docs-hidden[hidden] {
	display: none;
}

.ilrew-docs-toggle-wrapper {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--ilrew-beige-40);
	display: flex;
	justify-content: center;
}

.ilrew-docs-toggle-wrapper .ilrew-docs-toggle {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 0;
	font-size: 13px;
	font-family: inherit;
	cursor: pointer;

	border: 0;
	border-radius: 0;
	background-color: transparent;
	background-position: 100% 100%;
	background-repeat: no-repeat;
	background-image: linear-gradient(var(--ilrew-red-100), var(--ilrew-red-100));
	transition: background-size 0.3s ease-in-out;
	background-size: 100% 2px;
}

.ilrew-docs-toggle:hover {
	background-size: 0% 2px;
}

/* The excerpt may carry inline markup from the source content
   (lists, links, emphasis). Keep it compact inside the card. */
.tas__result-excerpt p {
	margin: 0 0 8px;
}

.tas__result-excerpt p:last-child {
	margin-bottom: 0;
}

.tas__result-excerpt ul,
.tas__result-excerpt ol {
	margin: 4px 0;
	padding-left: 20px;
}

.tas__result-excerpt li {
	margin: 2px 0;
}

.tas__result-excerpt a {
	color: inherit;
	text-decoration: underline;
}

/* Desktop: let the sidebar and its (beige) content fill the results row height. */
.wp-block-typesense-advanced-search:not(.tas--mobile) .tas__filters,
.wp-block-typesense-advanced-search:not(.tas--mobile) .tas__filters-content {
	height: 100%;
}

/* Secteur filter grid layout */
.tas__body--vertical .tas__filters-content {
	background: var(--ilrew-beige-40);
	padding: 28px 30px 30px;
	border-radius: 0;
}

.tas__body--vertical .tas__filters-content .tas__filters-title {
	font-size: 24px;
	line-height: 32px;
	font-weight: 400;
	margin: 0;
}

/* Sidebar filter groups: one uniformly-bordered list like the reference —
   a divider above each group and a closing border under the last. */
.tas__filter-group.tas__filter-group--group {
	margin: 22px 0 0;
	padding: 11px 0;
	border-top: 1px solid var(--ilrew-beige-100);
}

.tas__facet-filters .tas__filter-group {
	margin: 0;
	padding: 11px 0;
	border-top: 1px solid var(--ilrew-beige-100);
}

.tas__facet-filters {
	border-bottom: 1px solid var(--ilrew-beige-100);
	font-size: 16px;
}

.tas__filter-group .tas__filter-group-header {
	padding: 0;
	margin: 0;
	border-radius: 0;
}

.tas__filter-group .tas__filter-label {
	font-size: 16px;
	font-weight: 600;
	text-transform: none;
	color: #282525;
}

.tas__filter-group .tas__filter-group-content {
	margin-top: 24px;
}

.tas__filter-group[data-field="date_range"] .tas__field-group-field--checkbox {
	margin-top: 4px;
}

.tas__filter-group .tas__filter-group-content .tas__field-checkbox {
	margin-top: 0;
}

.tas__filter-group .tas__filter-group-content .tas__field-checkbox-label {
	font-size: inherit;
	color: inherit;
}

.tas__filter-group[data-field="secteur"] .tas__filter-options {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

.tas__filter-group[data-field="secteur"] .tas__filter-option {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: start;
	padding: 15px;
	background: #f9f9f7;
	cursor: pointer;
	transition: all 0.2s ease;
}

/* Make the whole card clickable: a transparent overlay inside the label
   (which wraps the checkbox) stretched over the position:relative card.
   Pseudo-element equivalent of a `<span class="card-hover">`. */
.tas__filter-group[data-field="secteur"] .tas__filter-option label::after {
	content: "";
	position: absolute;
	inset: 0;
	display: block;
}

.tas__filter-group[data-field="secteur"] .tas__filter-option:hover {
	background: #eeece6;
}

.tas__filter-group[data-field="secteur"] .tas__filter-option:has(input:checked) {
	background: #e3dfd6;
}

.tas__filter-group[data-field="secteur"] .tas__filter-option input[type="checkbox"] {
	position: absolute;
	top: 15px;
	right: 15px;

	-ms-appearance: none;
	appearance: none;
	print-color-adjust: exact;
	vertical-align: middle;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	width: 1rem;
	height: 1rem;
	color: #e22c3f;
	border-color: #282525;
	background-color: transparent;
	background-origin: border-box;
	border-style: solid;
	border-width: 1px;
	border-radius: 3px;
	flex-shrink: 0;
	margin: 4px 0 0;
	padding: 0;
	display: inline-block;
}

.tas__filter-group[data-field="secteur"] .tas__filter-option input[type="checkbox"]:checked {
	border-color: #282525;
	background-color: currentColor;
	background-position: 50%;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e")
}

.tas__filter-group .tas__filter-option label {
	font-size: 16px;
	gap: 8px;
}

.tas__filter-group[data-field="secteur"] .tas__filter-option label {
	display: flex;
	flex-grow: 1;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	font-size: inherit;
	color: inherit;
}

.tas__filter-group[data-field="secteur"] .tas__filter-term-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-bottom: 8px;
	color: #e22c3f;
	transition: color 0.2s ease;
}

.tas__filter-group[data-field="secteur"] .tas__filter-term-icon svg {
	width: 32px;
	height: 32px;
}

.tas__filter-group[data-field="secteur"] .tas__filter-term-icon svg path {
	vector-effect: non-scaling-stroke;
	stroke-width: 1.25px;
}

.tas__filter-group[data-field="secteur"] .tas__filter-term-label {
	display: inline-flex;
	gap: 4px;
	-webkit-font-smoothing: antialiased;
}

.tas__filter-group[data-field="secteur"] .tas__filter-option:has(input:checked) .tas__filter-term-label {
	font-weight: 600;
	-webkit-font-smoothing: antialiased;
}

.tas__filter-group .tas__field-group-field .tas__field-label,
.tas__filter-group .tas__field-group-field .tas__field-input {
	font-size: inherit;
}

/* Meta test display */
.tas__card-meta-test {
	background: #e8f5e9;
	border: 1px solid #81c784;
	border-radius: 4px;
	padding: 8px 12px;
	margin-bottom: 16px;
	font-size: 13px;
	color: #2e7d32;
}

/* Related links from meta */
.tas__card-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
	padding: 12px;
	background: #f0f0f0;
	border-radius: 4px;
}

.tas__card-links-label {
	font-size: 12px;
	font-weight: 600;
	color: #666;
	margin-right: 4px;
}

.tas__card-link-item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 12px;
	color: #333;
	text-decoration: none;
	transition: all 0.2s ease;
}

.tas__card-link-item:hover {
	background: #e22c3f;
	border-color: #e22c3f;
	color: #fff;
}

.tas__card-link-item--document {
	border-color: #1976d2;
}

.tas__card-link-lang {
	font-size: 10px;
	color: #999;
	margin-left: 2px;
}

.tas__card-link-item:hover .tas__card-link-lang {
	color: rgba(255, 255, 255, 0.7);
}

/* ==========================================================================
	   Dropdown Component (Formulaire Options)
	   ========================================================================== */

.tas__dropdown {
	position: relative;
	display: inline-flex;
}

/* Ensure containers don't clip dropdown */
.tas__results:has(.tas__dropdown[data-dropdown="open"]),
.tas__result-card:has(.tas__dropdown[data-dropdown="open"]),
.tas__card-footer:has(.tas__dropdown[data-dropdown="open"]) {
	overflow: visible;
}

/* Trigger button — scoped under .tas__result-card to out-specify
   Elementor's `.elementor-kit-N button` (0,1,1) reset. */
.tas__result-card .tas__dropdown-trigger {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
	background: var(--ilrew-beige-20);
	border: 1px solid var(--ilrew-gold);
	border-radius: 0;
	padding: 18px 15px;
	color: #282525;
	font-weight: 600;
	transition: background-color 0.2s ease;
}

.tas__result-card .tas__dropdown-trigger:hover,
.tas__result-card .tas__dropdown-trigger:focus {
	background-color: var(--ilrew-beige-100);
	outline: none;
}

.tas__result-card .tas__dropdown-trigger:focus-visible {
	box-shadow: 0 0 0 2px rgba(196, 188, 168, 0.6);
}

/* In the multi-column inline layout the formulaire "Options" button spans
   the full card width (a small right-aligned button reads as cramped on
   the narrow cards). The dropdown is formulaire-only, so :has() targets
   just those footers. */
/* The footer's empty left/center slots would otherwise eat 2x the footer
   gap; zero it so the Options button reaches the card edges. */
.tas--layout-horizontal:not(.tas--mobile) .tas__card-footer:has(.tas__dropdown) {
	gap: 0;
}

.tas--layout-horizontal:not(.tas--mobile) .tas__card-footer-right:has(.tas__dropdown) {
	flex: 1;
}

.tas--layout-horizontal:not(.tas--mobile) .tas__dropdown {
	display: flex;
	width: 100%;
}

.tas--layout-horizontal:not(.tas--mobile) .tas__result-card .tas__dropdown-trigger {
	width: 100%;
	justify-content: center;
}

.tas__dropdown-trigger-text {
	color: inherit;
	font-size: 16px;
}

.tas__dropdown-trigger-icon {
	display: inline-flex;
	transition: transform 0.2s ease;
}

.tas__dropdown-trigger-icon svg {
	width: 12px;
	height: auto;
}

/* Rotate chevron 180deg whenever the dropdown is open, regardless of
   whether it flips above or below the trigger. */
.tas__dropdown[data-dropdown="open"] .tas__dropdown-trigger-icon {
	transform: rotate(180deg);
}

/* Dropdown menu - positioned by floating-ui */
.tas__dropdown-menu {
	position: absolute;
	z-index: 1000;
	min-width: 380px;
	max-width: 500px;
	background: #fff;
	border: 1px solid #e5e5e5;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
	padding: 8px 0;
	margin: 0;
	list-style: none;
	/* Fallback positioning if floating-ui not available */
	top: calc(100% + 8px);
	right: 0;
}

/* Dropdown item row: the title (with its info button) on the left and
   the action button on the right. The whole row highlights on hover or
   keyboard focus, and drives the action button's slide animation. */
.tas__dropdown-item-row {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 20px;
	border-bottom: 1px solid #f0f0f0;
	transition: background-color 0.15s ease;
}

.tas__dropdown-item-row:last-child {
	border-bottom: none;
}

.tas__dropdown-item-row:hover,
.tas__dropdown-item-row:focus-within {
	background-color: #f9f9f9;
}

/* Item left section: flag + title link + info button */
.tas__dropdown-item-left {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1;
	min-width: 0;
}

/* Language flag — WPML flag image (same source the
   ilr-elementor-widgets dropdown uses). 20px wide, natural ratio. */
.tas__dropdown-item-flag {
	flex-shrink: 0;
	flex-grow: 0;
	width: 20px;
	height: auto;
	display: block;
}

/* Title link */
.tas__dropdown-item-text {
	font-size: 15px;
	font-weight: 500;
	color: #333;
	text-decoration: none;
}

/* No underline on hover/focus — the action button's slide animation is
   the affordance, and the whole row is outlined on focus (below). */
.tas__dropdown-item-text:focus-visible {
	outline: none;
}

.tas__dropdown-item-row:has(.tas__dropdown-item-text:focus-visible) {
	outline: 2px solid Highlight;
	outline: 2px solid -webkit-focus-ring-color;
	outline-offset: -2px;
}

/* Accessible info trigger — a real button that toggles a readable
   tooltip on hover, focus, click and touch. Scoped under
   .tas__result-card to out-specify Elementor's button reset. */
.tas__result-card .tas__dropdown-info {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	padding: 0;
	background: none;
	border: none;
	border-radius: 50%;
	color: #888;
	cursor: pointer;
	transition: color 0.15s ease;
}

/* Native (default) focus ring — circular thanks to border-radius. */
.tas__result-card .tas__dropdown-info:focus-visible {
	outline-offset: 2px;
}

.tas__dropdown-info svg {
	display: block;
	width: 18px;
	height: 18px;
}

/* Hover/focus: gold disc with a white glyph. The circle has no fill
   attribute so it inherits `fill`; the glyph path keeps fill=currentColor
   so `color` controls it. */
.tas__result-card .tas__dropdown-info:hover svg,
.tas__result-card .tas__dropdown-info:focus-visible svg {
	fill: var(--ilrew-gold);
	color: var(--ilrew-white);
}

/* Floating tooltip bubble for the info triggers (appended to <body>
   so the dropdown menu's bounds never clip it). position: fixed pairs
   with floating-ui's strategy:"fixed" — avoids the WP admin-bar
   html{margin-top:32px} corrupting absolute coordinates. */
.tas__dropdown-tooltip {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99999;
	display: inline-block;
	width: max-content;
	max-width: 90vw;
	padding: 20px;
	background: var(--ilrew-beige-100);
	border-radius: 10px;
	box-shadow: 4px 4px 13px rgba(0, 0, 0, 0.3);
	font-size: 13px;
	font-style: italic;
	line-height: 22px;
	color: #282525;
}

@media (min-width: 1024px) {
	.tas__dropdown-tooltip {
		max-width: 400px;
	}
}

.tas__dropdown-tooltip[hidden] {
	display: none;
}

/* Action link (Télécharger / Visiter le site) */
.tas__dropdown-item-action {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
	text-decoration: none;
	color: inherit;
}

/* The Télécharger / Visiter le site button (reused .tas__card-doc)
   slides when the row is hovered or holds keyboard focus — the
   classic vertical translate. */
.tas__dropdown-item-row:hover .tas__card-doc-label-lead,
.tas__dropdown-item-row:focus-within .tas__card-doc-label-lead,
.tas__dropdown-item-row:hover .tas__card-doc-arrow--lead,
.tas__dropdown-item-row:focus-within .tas__card-doc-arrow--lead {
	transform: translateY(-100%);
}

.tas__dropdown-item-row:hover .tas__card-doc-label-follow,
.tas__dropdown-item-row:focus-within .tas__card-doc-label-follow,
.tas__dropdown-item-row:hover .tas__card-doc-arrow--follow,
.tas__dropdown-item-row:focus-within .tas__card-doc-arrow--follow {
	transform: translateY(0);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

	.tas__dropdown-trigger-icon,
	.tas__dropdown-item-row {
		transition: none;
	}
}

/* ==========================================================
   Header filter — "Affiner" button + sous-type dropdown
   (Cadre légal). Visuals match the ilr-elementor-widgets
   design; behaviour/markup come from the plugin.
   ========================================================== */
.tas__header-filters .tas__header-filter-btn {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	border: 1px solid var(--ilrew-noir-100, #282525);
	border-radius: 0;
	background: var(--ilrew-white, #fff);
	padding: 16px 30px;
	font-family: var(--ilrew-font-family, inherit);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.02em;
	color: var(--ilrew-noir-100, #282525);
	text-transform: uppercase;
	cursor: pointer;
	max-width: none;
	transition: all 150ms ease-in-out;
}

.tas__header-filter-btn:hover {
	background: var(--ilrew-white, #fff);
	border-color: var(--ilrew-noir-100, #282525);
	color: var(--ilrew-red-100, #e22c3f);
	box-shadow: none;
}

.tas__header-filter-btn[aria-expanded="true"] {
	border-color: var(--ilrew-noir-100, #282525);
	box-shadow: none;
}

/* Status dot: grey by default, red when a sous-type is selected */
.tas__header-filter-dot {
	color: var(--ilrew-noir-40, #a5a5a4);
}

.tas__header-filter--active .tas__header-filter-dot {
	color: var(--ilrew-red-100, #e22c3f);
}

.tas__header-filter-icon svg {
	width: 15px;
	height: auto;
}

/* Disabled: Cadre légal selected but the chosen type has no sous-type */
.tas__header-filter--disabled .tas__header-filter-btn {
	opacity: 0.45;
	cursor: not-allowed;
	color: var(--ilrew-noir-100, #282525);
}

.tas__header-filter--disabled .tas__header-filter-btn:hover {
	color: var(--ilrew-noir-100, #282525);
	border-color: var(--ilrew-noir-100, #282525);
}

/* Dropdown panel */
.tas__header-filter-dropdown {
	position: absolute;
	z-index: 999;
	top: 100%;
	right: 0;
	width: 320px;
	max-width: none;
	max-height: none;
	overflow: visible;
	margin-top: 10px;
	padding: 30px;
	background: var(--ilrew-white, #fff);
	border: 0;
	border-radius: 0;
	box-shadow: 4px 4px 13px 0 var(--ilrew-noir-10, #e8e8e8);
}

.tas__header-filter-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 0;
}

.tas__header-filter-item label {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0;
	font-size: 16px;
	font-weight: 400;
	color: var(--ilrew-noir-100, #282525);
}

.tas__header-filter-item label:hover {
	background: transparent;
}

.tas__header-filter-item label:has(input:checked) span {
	font-weight: 700;
}

/* ==========================================================
   Inline filters — horizontal / CPT-locked layout (desktop).
   The sidebar filters are relocated (scripts.js) inline with the
   search input and styled as Affiner-like dropdown buttons.
   ========================================================== */

/* Search row: input grows, filter dropdowns to the right. */
.tas--layout-horizontal:not(.tas--mobile) .tas__search-bar {
	display: flex;
	align-items: stretch;
	gap: 12px;
}

.tas--layout-horizontal:not(.tas--mobile) .tas__search-bar > .tas__search-input-wrapper {
	flex: 1 1 auto;
	min-width: 0;
}

/* Compact red search button inside the input; hide the external one. */
.tas--layout-horizontal:not(.tas--mobile) .tas__search-bar .tas__search-button:not(.tas__search-button--compact) {
	display: none;
}

.tas--layout-horizontal:not(.tas--mobile) .tas__search-input-container {
	position: relative;
}

.tas--layout-horizontal:not(.tas--mobile) .tas__search-bar .tas__search-button--compact {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
	width: 26px;
	height: 26px;
	min-width: 0;
	padding: 0;
	gap: 0;
	border: 0;
	border-radius: 50%;
	background: var(--ilrew-red-100, #e22c3f);
	color: var(--ilrew-white, #fff);
	z-index: 2;
	cursor: pointer;
}

.tas--layout-horizontal:not(.tas--mobile) .tas__search-bar .tas__search-button--compact .tas__search-button-icon {
	opacity: 1;
	margin: 0;
}

.tas--layout-horizontal:not(.tas--mobile) .tas__search-button--compact .tas__search-button-icon svg {
	width: 14px;
	height: 14px;
}

.tas--layout-horizontal:not(.tas--mobile) .tas__search-input {
	padding-right: 50px;
}

/* Relocated aside → a horizontal row of dropdown buttons. */
.tas--layout-horizontal:not(.tas--mobile) .tas__filters {
	display: flex;
	align-items: stretch;
	gap: 12px;
	flex: 0 0 auto;
	width: auto;
	margin: 0;
	padding: 0;
	background: none;
}

.tas--layout-horizontal:not(.tas--mobile) .tas__filters-content {
	display: flex;
	align-items: stretch;
	gap: 12px;
	padding: 0;
	background: none;
}

/* Facet filters (Secteur, Type) share one row and sit before the Date group. */
.tas--layout-horizontal:not(.tas--mobile) .tas__facet-filters {
	display: flex;
	align-items: stretch;
	gap: 12px;
	order: 1;
	border: 0;
}

.tas--layout-horizontal:not(.tas--mobile) .tas__filter-group--group {
	order: 2;
}

.tas--layout-horizontal .tas__filters-title {
	display: none;
}

/* Each filter group = an Affiner-style dropdown button. */
.tas--layout-horizontal:not(.tas--mobile) .tas__filter-group {
	position: relative;
	margin: 0;
	padding: 0;
	border: 0;
}

.tas--layout-horizontal:not(.tas--mobile) .tas__filter-group-header {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 46px;
	height: 100%;
	padding: 0 15px;
	background: var(--ilrew-white, #fff);
	/* No visible border, matching the legacy filter buttons (a transparent
	   2px border keeps sizing stable for any focus/active state). */
	border: 2px solid transparent;
	border-radius: 0;
	cursor: pointer;
	white-space: nowrap;
}

/* Status dot (grey; red when the filter has a selection). It darkens a
   step when the button is hovered or focused — see below. */
.tas--layout-horizontal:not(.tas--mobile) .tas__filter-group-header::before {
	content: '';
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ilrew-noir-20);
}

/* Checkbox groups reflect their state purely in CSS; the date group has
   no checked input, so JS adds `--active` when a date is set (see
   scripts.js). Both turn the status dot red.
   An empty value is the "no preference" option (the "Tous" radio), which
   is checked by default and is not an applied filter — so it must not
   light the dot. */
.tas--layout-horizontal:not(.tas--mobile) .tas__filter-group:has(input:checked:not([value=''])) .tas__filter-group-header::before,
.tas--layout-horizontal:not(.tas--mobile) .tas__filter-group--active .tas__filter-group-header::before {
	background: var(--ilrew-red-100, #e22c3f);
}

/* Hover / keyboard focus: the button picks up the beige fill. */
.tas--layout-horizontal:not(.tas--mobile) .tas__filter-group-header:hover,
.tas--layout-horizontal:not(.tas--mobile) .tas__filter-group-header:focus-visible {
	background: var(--ilrew-beige-100);
}

/* The dot darkens a step against that fill… */
.tas--layout-horizontal:not(.tas--mobile) .tas__filter-group-header:hover::before,
.tas--layout-horizontal:not(.tas--mobile) .tas__filter-group-header:focus-visible::before {
	background: var(--ilrew-noir-40, #a5a5a4);
}

/* …but an active filter keeps its red dot on hover/focus — only inactive
   dots darken. Needs to out-specify the generic hover rule above. */
.tas--layout-horizontal:not(.tas--mobile) .tas__filter-group:has(input:checked:not([value=''])) .tas__filter-group-header:hover::before,
.tas--layout-horizontal:not(.tas--mobile) .tas__filter-group:has(input:checked:not([value=''])) .tas__filter-group-header:focus-visible::before,
.tas--layout-horizontal:not(.tas--mobile) .tas__filter-group--active .tas__filter-group-header:hover::before,
.tas--layout-horizontal:not(.tas--mobile) .tas__filter-group--active .tas__filter-group-header:focus-visible::before {
	background: var(--ilrew-red-100, #e22c3f);
}

.tas--layout-horizontal:not(.tas--mobile) .tas__filter-group-header .tas__filter-label {
	font-size: 16px;
	font-weight: 600;
	color: var(--ilrew-noir-100, #282525);
	text-transform: none;
	margin: 0;
}

/* Tighten the option rows inside the inline dropdown panels: drop the
   base per-option margin and label padding so rows sit flush. */
.tas--layout-horizontal:not(.tas--mobile) .tas__filter-option {
	margin-bottom: 0;
}

.tas--layout-horizontal:not(.tas--mobile) .tas__filter-option label {
	padding: 0;
}

.tas--layout-horizontal:not(.tas--mobile) .tas__filter-collapse-icon {
	margin-left: 6px;
}

/* Dropdown panel: right-aligned to the button, fixed 340px wide (matches
   the legacy filter dropdowns). */
.tas--layout-horizontal:not(.tas--mobile) .tas__filter-group-content {
	position: absolute;
	top: calc(100% + 6px);
	left: auto;
	right: 0;
	z-index: 999;
	width: 340px;
	min-width: 100%;
	margin-top: 0;
	padding: 30px;
	background: var(--ilrew-white, #fff);
	box-shadow: 4px 4px 13px 0 var(--ilrew-noir-10, #e8e8e8);
}

.tas--layout-horizontal:not(.tas--mobile) .tas__filter-group-content--collapsed {
	display: none;
}

/* Options list: flush vertical list (matches the legacy ul/li). */
.tas--layout-horizontal:not(.tas--mobile) .tas__filter-options {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Secteur inside an inline dropdown: a plain vertical checkbox list
   (names only) instead of the generic icon card grid. */
.tas--layout-horizontal:not(.tas--mobile) .tas__filter-group[data-field="secteur"] .tas__filter-options {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.tas--layout-horizontal:not(.tas--mobile) .tas__filter-group[data-field="secteur"] .tas__filter-option,
.tas--layout-horizontal:not(.tas--mobile) .tas__filter-group[data-field="secteur"] .tas__filter-option:hover,
.tas--layout-horizontal:not(.tas--mobile) .tas__filter-group[data-field="secteur"] .tas__filter-option:has(input:checked) {
	flex-direction: row;
	align-items: center;
	padding: 0;
	background: none;
}

.tas--layout-horizontal:not(.tas--mobile) .tas__filter-group[data-field="secteur"] .tas__filter-option input[type="checkbox"] {
	position: static;
	top: auto;
	right: auto;
	margin: 0 8px 0 0;
}

.tas--layout-horizontal:not(.tas--mobile) .tas__filter-group[data-field="secteur"] .tas__filter-option label {
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	flex-grow: 0;
}

.tas--layout-horizontal:not(.tas--mobile) .tas__filter-group[data-field="secteur"] .tas__filter-option label::after {
	display: none;
}

.tas--layout-horizontal:not(.tas--mobile) .tas__filter-group[data-field="secteur"] .tas__filter-term-icon {
	display: none;
}

/* Date dropdown: wider than the facet dropdowns so the two date
   columns have room to breathe. */
.tas--layout-horizontal:not(.tas--mobile) .tas__filter-group[data-field="date_range"] .tas__filter-group-content {
	width: 500px;
}

/* "Date de publication" title + divider, matching the legacy dropdown.
   The trigger button already names the filter ("Date"), so this heading
   is purely visual (a CSS-generated label). */
.tas--layout-horizontal:not(.tas--mobile) .tas__filter-group[data-field="date_range"] .tas__filter-group-content::before {
	content: 'Date de publication';
	display: block;
	padding-bottom: 8px;
	margin-bottom: 10px;
	border-bottom: 1px solid #f4f2ef;
	font-size: 18px;
	font-weight: 500;
	color: var(--ilrew-noir-100, #282525);
}

/* Date dropdown: "Du :" / "Au :" columns with beige input boxes,
   matching the legacy /cadre-legal date filter. */
/* Two columns for Du/Au; a full-width field (the "couverture" checkbox on
   the consultation lock) spans both via its own grid-column: 1 / -1. */
.tas--layout-horizontal:not(.tas--mobile) .tas__filter-group[data-field="date_range"] .tas__field-group {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 20px;
	row-gap: 14px;
	width: auto;
}

.tas--layout-horizontal:not(.tas--mobile) .tas__filter-group[data-field="date_range"] .tas__field-group-field {
	min-width: 0;
}

.tas--layout-horizontal:not(.tas--mobile) .tas__filter-group[data-field="date_range"] .tas__field-label {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 16px;
	font-weight: 400;
	color: var(--ilrew-noir-100, #282525);
}

.tas--layout-horizontal:not(.tas--mobile) .tas__filter-group[data-field="date_range"] .tas__field-input--date {
	box-sizing: border-box;
	width: 100%;
	height: 40px;
	padding: 0 16px;
	background: #e3dfd6;
	color: #000;
	border: 1px solid #fff;
	border-radius: 0;
	font-size: 16px;
	font-weight: 400;
}

.tas--layout-horizontal:not(.tas--mobile) .tas__results-title {
	padding-left: 30px;
	padding-right: 30px;
}

/* Results as two columns (cards + loading skeletons). */
.tas--layout-horizontal:not(.tas--mobile) .tas__results {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.tas--layout-horizontal:not(.tas--mobile) .tas__skeletons {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	grid-column: 1 / -1;
}

/* Publications, statistiques and formulaires use a denser 3-column grid. */
.tas--cpt-publication.tas--layout-horizontal:not(.tas--mobile) .tas__results,
.tas--cpt-publication.tas--layout-horizontal:not(.tas--mobile) .tas__skeletons,
.tas--cpt-statistiques.tas--layout-horizontal:not(.tas--mobile) .tas__results,
.tas--cpt-statistiques.tas--layout-horizontal:not(.tas--mobile) .tas__skeletons,
.tas--cpt-formulaire.tas--layout-horizontal:not(.tas--mobile) .tas__results,
.tas--cpt-formulaire.tas--layout-horizontal:not(.tas--mobile) .tas__skeletons {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Actualités show a single card per row. */
.tas--cpt-actualite.tas--layout-horizontal:not(.tas--mobile) .tas__results,
.tas--cpt-actualite.tas--layout-horizontal:not(.tas--mobile) .tas__skeletons {
	grid-template-columns: minmax(0, 1fr);
}

/* ==========================================================
   Responsive (tablet / mobile, < 1024px). The plugin toggles
   the `.tas--mobile` class and provides the modal / sheet
   mechanics; the ILR visual design lives here.
   ========================================================== */

/* --- Search field as a flex row (icon + input + button) ---
   The wrapper owns the white background + padding, so the input needs no
   "safe" internal padding. Mirrors the original ILR search field. */
.tas--mobile .tas__search-bar .tas__search-input-container {
	align-items: center;
	gap: 18px;
	padding: 12px 15px;
	background: var(--ilrew-white, #fff);
}

/* Left magnifier: a relative flex item instead of absolutely positioned.
   `top`/`transform` must be cleared alongside `left`: the plugin centres
   the icon with the absolute `top: 50% + translateY(-50%)` pair, which
   under `position: relative` stops being a centring idiom and becomes a
   raw offset (half the container's content box down, half the icon's own
   height up) — it sat 12.5px high. As a flex item it is centred by
   `align-self` instead. */
.tas--mobile .tas__search-input-wrapper--icon-left .tas__search-input-icon {
	position: relative;
	left: auto;
	top: auto;
	transform: none;
	align-self: center;
	flex: none;
	display: inline-flex;
	align-items: center;
}

/* Input fills the row; no internal background / padding / border. */
.tas--mobile .tas__search-input-wrapper--icon-left .tas__search-input,
.tas--mobile .tas__search-input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0;
	height: auto;
	border: 0;
	background: transparent;
	box-shadow: none;
}

/* Focus ring on the whole field wrapper, not the input. */
.tas--mobile .tas__search-input:focus {
	outline: none;
	box-shadow: none;
}

.tas--mobile .tas__search-bar .tas__search-input-container:has(input:focus) {
	outline-offset: 3px;
	outline-width: 3px;
	outline-style: solid;
	outline-color: var(--ilrew-outline-default);
}

/* Compact search button: static flex item at the end of the row. */
.tas--mobile .tas__search-bar .tas__search-button--compact {
	position: static;
	top: auto;
	right: auto;
	transform: none;
	flex: none;
	width: 26px;
	height: 26px;
	min-width: 0;
	padding: 0;
	gap: 0;
	border: 0;
	border-radius: 50%;
	background: var(--ilrew-red-100, #e22c3f);
	color: var(--ilrew-white, #fff);
}

.tas--mobile .tas__search-bar .tas__search-button--compact:hover {
	background: var(--ilrew-red-120, #a01830);
}

/* The ILR button hides its icon until hover; keep the compact icon shown. */
.tas--mobile .tas__search-bar .tas__search-button--compact .tas__search-button-icon {
	opacity: 1;
	margin: 0;
}

.tas--mobile .tas__search-button--compact .tas__search-button-icon svg {
	width: 14px;
	height: 14px;
}

/* --- Mobile toolbar: "Filtres" (left) + "Affiner" (right) ---
   The bar sits INSIDE the beige search block (continuous with the search
   input), matching the old search. Merge the search wrapper into the bar
   by removing the gap between them. Mobile-only (desktop untouched). */
.tas--mobile .tas__search-bar-wrapper {
	margin-bottom: 0;
	padding: 24px 35px 0;
}

.tas--mobile .tas__mobile-bar {
	background: var(--ilrew-beige-40, #f4f2ef);
	padding: 22px 35px;
}

/* Results area: lateral (left/right) insets on mobile. */
.tas--mobile .tas__main {
	padding-left: 20px;
	padding-right: 20px;
}

.tas--mobile .tas__results-header {
	padding-left: 15px;
	padding-right: 15px;
}

.tas--mobile .tas__active-filters {
	padding-top: 20px;
	padding-left: 35px;
	padding-right: 35px;
	/* The gap before the results belongs to the results, not to this
	   row — the base rule's 40px bottom padding disappeared along with
	   the row whenever no filter was active, leaving the heading flush
	   against the search band. Moved to .tas__body below, which is
	   always there. */
	padding-bottom: 0;
}

/* Mobile only: on desktop the search band keeps its own 24px margin. */
.tas--mobile .tas__body {
	padding-top: 40px;
}

/* Filtres / Affiner: plain title-case text (not the desktop bordered,
   uppercase button), regular weight, dark, icon to the right. */
.tas--mobile .tas__filters-modal-trigger,
.tas--mobile .tas__mobile-bar__affiner .tas__header-filter-btn {
	position: relative;
	overflow: visible;
	gap: 10px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	color: var(--ilrew-noir-100, #282525);
}

.tas--mobile .tas__mobile-bar__affiner .tas__header-filter-btn:hover {
	color: var(--ilrew-red-100, #e22c3f);
	border: 0;
	background: none;
}

.tas--mobile .tas__filters-modal-trigger-icon svg,
.tas--mobile .tas__mobile-bar__affiner .tas__header-filter-icon svg {
	width: 16px;
	height: auto;
}

/* The Affiner status dot is redundant in the compact bar. */
.tas--mobile .tas__mobile-bar__affiner .tas__header-filter-dot {
	display: none;
}

.tas--mobile .tas__mobile-bar__affiner .tas__header-filter--disabled .tas__header-filter-btn {
	opacity: 0.4;
}

/* Active state: a small red dot at the top-right of the button (Filtres +
   Affiner), instead of colouring the label red. */
.tas--mobile .tas__filters-modal-trigger--active::after,
.tas--mobile .tas__mobile-bar__affiner .tas__header-filter--active .tas__header-filter-btn::after {
	content: '';
	position: absolute;
	top: -4px;
	right: -9px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ilrew-red-100, #e22c3f);
}

/* --- Filters modal (full-screen). Opens with a fade-in (plugin base);
   no slide, per design. --- */
.tas--mobile .tas__filters-modal__backdrop {
	background: rgba(40, 37, 37, 0.4);
}

.tas--mobile .tas__filters-modal__dialog {
	background: var(--ilrew-beige-40, #f5f3ee);
}

.tas--mobile .tas__filters-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 24px 35px;
	border-bottom: 1px solid var(--ilrew-beige-100, #e3ddd0);
}

.tas--mobile .tas__filters-modal__title {
	text-align: center;
	font-family: var(--ilrew-font-family, inherit);
	font-size: 22px;
	font-weight: 400;
	color: var(--ilrew-noir-100, #282525);
}

.tas--mobile .tas__filters-modal-close {
	display: inline-flex;
	padding: 4px;
	border: 0;
	background: none;
	color: var(--ilrew-red-100, #e22c3f);
}

.tas--mobile .tas__filters-modal-close svg {
	width: 21px;
	height: 21px;
}

.tas--mobile .tas__filters-reset {
	padding: 0;
	border: 0;
	font-family: var(--ilrew-font-family, inherit);
	font-size: 14px;
	line-height: 16px;
	font-weight: 600;
	color: var(--ilrew-noir-100, #282525);
	outline-color: var(--ilrew-outline-color);
	background-position: 100% 100%;
	background-repeat: no-repeat;
	background-image: linear-gradient(var(--ilrew-red-100, #e22c3f), var(--ilrew-red-100, #e22c3f));
	transition: color 0.15s ease-in-out, background-size 0.3s ease-in-out;
	background-size: 100% 2px;
	border-radius: 0;
}

.tas--mobile .tas__filters-reset:hover {
	background-size: 0% 2px;
}

.tas--mobile .tas__filters-reset:focus {
	outline-color: var(--ilrew-outline-default);
	color: var(--ilrew-red-100, #e22c3f);
	background-size: 0% 2px;
}

.tas--mobile .tas__filters-reset span {
	position: relative;
	display: inline-block;
	padding: 4px 0;
}

.tas--mobile .tas__filters-modal__body {
	padding: 30px;
}

/* The modal already carries its own "Filtres" heading. */
.tas--mobile .tas__filters-modal__body .tas__filters-title {
	display: none;
}

/* Divider above every toggle item except the first — in both the
   horizontal and vertical mobile modal. The groups sit at mixed nesting
   levels and in a layout-dependent order (horizontal: facets first, then
   Date; vertical: Date first, then facets), so we can't rely on a single
   :first-child. First clear the generic sidebar dividers, then add one
   divider above each non-first toggle:
     • non-first groups inside the facet container,
     • the first facet group when the facet container is not itself first
       (i.e. a preceding Date group in the vertical layout),
     • a Date group that follows the facet container (horizontal layout). */
.tas--mobile .tas__filters-modal__body .tas__facet-filters {
	border-bottom: 0;
}

.tas--mobile .tas__filters-modal__body .tas__facet-filters .tas__filter-group,
.tas--mobile .tas__filters-modal__body .tas__filter-group--group {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.tas--mobile .tas__filters-modal__body .tas__facet-filters .tas__filter-group:not(:first-child),
.tas--mobile .tas__filters-modal__body .tas__facet-filters:not(:first-child) .tas__filter-group:first-child,
.tas--mobile .tas__filters-modal__body .tas__facet-filters ~ .tas__filter-group--group {
	margin-top: 24px;
	padding-top: 32px;
	border-top: 1px solid var(--ilrew-beige-100, #e3ddd0);
}

.tas--mobile .tas__filters-modal__footer {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px 0;
	background: var(--ilrew-white, #fff);
	box-shadow: 4px -4px 13px 0 var(--ilrew-noir-10, #e8e8e8);
}

/* --- Red pill "apply / show results" buttons (modal + sheet) --- */
.tas--mobile .tas__apply-filters,
.tas--mobile .tas__sheet-apply {
	width: auto;
	min-width: 260px;
	padding: 16px 34px;
	border: 0;
	border-radius: 40px;
	background: var(--ilrew-red-100, #e22c3f);
	color: var(--ilrew-white, #fff);
	font-family: var(--ilrew-font-family, inherit);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.tas--mobile .tas__apply-filters {
	padding: 24px 40px;
}

.tas--mobile .tas__apply-filters:hover,
.tas--mobile .tas__sheet-apply:hover {
	background: var(--ilrew-red-120, #a01830);
}

/* --- "Affiner" refine bottom-sheet --- */
.tas--mobile .tas__sheet-backdrop {
	background: rgba(40, 37, 37, 0.4);
}

.tas--mobile .tas__mobile-bar__affiner .tas__header-filter-dropdown {
	width: auto;
	margin: 0;
	padding: 28px 30px calc(28px + env(safe-area-inset-bottom, 0px));
	background: var(--ilrew-white, #fff);
	border-radius: 0;
	box-shadow: 0 -6px 24px rgba(40, 37, 37, 0.18);
}

/* Sheet title ("Sous-type de cadre légal"). */
.tas--mobile .tas__sheet-title {
	margin: 0 0 20px;
	font-family: var(--ilrew-font-family, inherit);
	font-size: 16px;
	font-weight: 700;
	color: var(--ilrew-noir-100, #282525);
}

/* Full-bleed divider between the sub-type list and the apply button. */
.tas--mobile .tas__mobile-bar__affiner .tas__header-filter-list {
	margin: 0 -30px;
	padding: 0 30px 22px;
	border-bottom: 1px solid var(--ilrew-noir-10, #e8e8e8);
}

.tas--mobile .tas__sheet-apply {
	display: block;
	margin: 22px auto 0;
}

/* ══════════════════════════════════════════════════════════
   Search disc icon roll
   The circular red magnifier buttons — the compact button (the
   advanced search's vertical and horizontal layouts, plus the
   search bar widget below 1024px) and the search bar widget's
   internal button — play a vertical roll on hover: the visible
   magnifier travels up and out while an identical copy rises
   into its place. Same technique as the "En savoir plus" card
   CTA. The two copies are supplied by the compact-icon filter.
   ══════════════════════════════════════════════════════════ */
.tas__search-button--compact,
.tas__search-button--internal {
	position: relative;
	overflow: hidden;
}

/* The mobile compact button is laid out statically; make it a
   containing block so the stacked icons position against it.
   (The inline and bar-only variants are already absolute.) */
.tas--mobile .tas__search-bar .tas__search-button--compact {
	position: relative;
}

/* The icon slot becomes the clipping window for the two copies. */
.tas__search-button--compact .tas__search-button-icon,
.tas__search-button--internal .tas__search-button-icon {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.tas__search-icon-roll {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.tas__search-icon-roll--lead {
	transform: translateY(0);
}

.tas__search-icon-roll--follow {
	transform: translateY(100%);
}

.tas__search-button--compact:hover .tas__search-icon-roll--lead,
.tas__search-button--compact:focus-visible .tas__search-icon-roll--lead,
.tas__search-button--internal:hover .tas__search-icon-roll--lead,
.tas__search-button--internal:focus-visible .tas__search-icon-roll--lead {
	transform: translateY(-100%);
}

.tas__search-button--compact:hover .tas__search-icon-roll--follow,
.tas__search-button--compact:focus-visible .tas__search-icon-roll--follow,
.tas__search-button--internal:hover .tas__search-icon-roll--follow,
.tas__search-button--internal:focus-visible .tas__search-icon-roll--follow {
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.tas__search-icon-roll {
		transition: none;
	}
}

/* ══════════════════════════════════════════════════════════
   Header search modal (plugin widget "Typesense Search Modal")

   The plugin ships the behaviour and a bare structural baseline;
   everything that makes it look like the ILR header lives here.
   Ported from ilrew's header-search.css so the Typesense version
   is indistinguishable from the widget it replaces.

   Two affordances close the modal and the breakpoint picks one:
   below 1025px the overlay starts under the sticky header, so the
   trigger stays visible and becomes the ✕ ; from 1025px up the
   overlay covers the header, so the dialog's own close button is
   the only way out. Both are always in the markup — this only
   decides which one is shown.

   Every rule is qualified with the widget root: Elementor can print
   a widget's stylesheet after this inline block, so matching the
   plugin's single-class baseline would lose the tie on load order.
   ══════════════════════════════════════════════════════════ */
.tas__search-modal-widget {
	/* Where the overlay starts. The header is 85px tall and stays
	   put, so the panel hangs off its bottom edge on mobile. The
	   admin bar is not counted here — the plugin measures it and
	   adds it on top, so adding --ilrew-admin-bar-gap as well
	   would push the panel down twice. */
	--tas-search-modal-top: 85px;
	position: relative;
	z-index: 1000;
}

/* ── Trigger: header cell (mobile) ───────────────────────── */
.tas__search-modal-widget .tas__search-modal-trigger {
	justify-content: center;
	width: 75px;
	height: 85px;
	padding: 0;
	background-color: var(--ilrew-white);
	/* The Elementor kit rounds every button; these two are square in
	   both header states. The red disc behind the desktop icon keeps
	   its own 50% — that is on the icon, not the button. */
	border-radius: 0;
	border-left: 1px solid var(--ilrew-noir-100);
	font-size: 10px;
	line-height: 10px;
	transition: .3s all;
}

/* Markup order is label → icon (the desktop reading order), so the
   stacked mobile version reverses rather than reorders. */
.tas__search-modal-widget .tas__search-modal-trigger__state {
	flex-direction: column-reverse;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
}

.tas__search-modal-widget .tas__search-modal-trigger-icon svg {
	width: 20px;
	height: 20px;
}

.tas__search-modal-widget .tas__search-modal-trigger:hover,
.tas__search-modal-widget .tas__search-modal-trigger[aria-expanded="true"] {
	background-color: var(--ilrew-beige-60);
	border-color: transparent;
}

/* Touch devices keep :hover applied after the tap, which would leave
   the closed trigger looking active. */
@media (hover: none) {
	.tas__search-modal-widget .tas__search-modal-trigger[aria-expanded="false"]:hover {
		background-color: var(--ilrew-white);
		border-color: var(--ilrew-noir-100);
	}
}

@media screen and (min-width: 375px) {
	.tas__search-modal-widget .tas__search-modal-trigger {
		width: 95px;
		font-size: 12px;
		line-height: 17px;
	}

	.tas__search-modal-widget .tas__search-modal-trigger-icon svg {
		width: 27px;
		height: 27px;
	}
}

/* ── Overlay ─────────────────────────────────────────────── */
/* The panel itself carries the beige, so the plugin's backdrop and
   white dialog are both dropped. */
.tas__search-modal-widget .tas__search-modal {
	background-color: var(--ilrew-beige-60);
}

.tas__search-modal-widget .tas__search-modal__backdrop {
	display: none;
}

.tas__search-modal-widget .tas__search-modal__dialog {
	width: var(--content-width);
	max-width: 100%;
	height: 100%;
	margin: 0 auto;
	padding: 30px 20px;
	background: transparent;
}

.tas__search-modal-widget .tas__search-modal__header {
	padding: 0 15px;
}

.tas__search-modal-widget .tas__search-modal__body {
	padding: 0 15px;
}

/* The trigger doubles as the close control here. */
.tas__search-modal-widget .tas__search-modal-close {
	display: none;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 0;
	border-radius: 0;
	font-size: 12px;
	line-height: 17px;
}

.tas__search-modal-widget .tas__search-modal-close:focus {
	position: relative;
	z-index: 1;
	outline-style: solid;
	outline-width: 3px;
	outline-offset: 3px;
	outline-color: var(--ilrew-outline-default);
}

/* ── Desktop ─────────────────────────────────────────────── */
@media screen and (min-width: 1025px) {
	/* The overlay covers the header here, so it starts at the top of
	   the page — under the admin bar, which the plugin adds itself. */
	.tas__search-modal-widget {
		--tas-search-modal-top: 0px;
	}

	/* Back to a plain inline control: label + red disc. */
	.tas__search-modal-widget .tas__search-modal-trigger {
		width: auto;
		height: auto;
		background-color: transparent;
		border: 0;
	}

	.tas__search-modal-widget .tas__search-modal-trigger:hover {
		background-color: transparent;
	}

	.tas__search-modal-widget .tas__search-modal-trigger__state {
		flex-direction: row;
	}

	.tas__search-modal-widget .tas__search-modal-trigger-label {
		font-weight: 600;
		font-size: 12px;
		line-height: 24px;
		text-transform: uppercase;
		background-position: 0 100%;
		background-repeat: no-repeat;
		background-image: linear-gradient(var(--ilrew-red-100), var(--ilrew-red-100));
		background-size: 0 2px;
		transition: background-size .3s ease-in-out;
	}

	.tas__search-modal-widget .tas__search-modal-trigger:hover .tas__search-modal-trigger-label {
		background-size: 100% 2px;
	}

	.tas__search-modal-widget .tas__search-modal-trigger-icon {
		width: 32px;
		height: 32px;
		padding: 8px;
		background-color: var(--ilrew-red-100);
		color: var(--ilrew-white);
		border-radius: 50%;
		transition: .3s all;
	}

	.tas__search-modal-widget .tas__search-modal-trigger:hover .tas__search-modal-trigger-icon {
		background-color: var(--ilrew-gold);
	}

	.tas__search-modal-widget .tas__search-modal-trigger-icon svg {
		width: 16px;
		height: 16px;
	}

	/* The overlay covers the header from here up, so the trigger's
	   close state is unreachable — the dialog's button takes over.
	   The trigger keeps rendering its normal state while open rather
	   than swapping to it: hiding both would collapse the button to
	   0×0 and reflow the rest of the header behind the overlay, for
	   no gain, since none of it is visible while the panel is up. */
	.tas__search-modal-widget .tas__search-modal-trigger[aria-expanded="true"] .tas__search-modal-trigger__state--open {
		display: inline-flex;
	}

	.tas__search-modal-widget .tas__search-modal-trigger[aria-expanded="true"] .tas__search-modal-trigger__state--close {
		display: none;
	}

	.tas__search-modal-widget .tas__search-modal-close {
		display: inline-flex;
	}

	/* The dialog keeps its 30px top padding here: the overlay starts
	   at the very top of the viewport on desktop, so without it the
	   close button sits flush against the admin bar (or the screen
	   edge). ilrew zeroed the padding one level further in, on the
	   inner wrapper, which is why the ✕ still had air below the bar. */

	/* Field roughly centred in the panel rather than sitting under
	   the close button. */
	.tas__search-modal-widget .tas__search-modal__body {
		margin-block: auto;
		padding-bottom: 145px;
	}
}

/* ══════════════════════════════════════════════════════════
   Full-width search bar (widget option "Search Bar Width")
   The beige band spans the viewport while its content stays
   aligned to the page container. The negative inline margins
   break the band out of Elementor's contained column; the
   matching padding puts the content back exactly where it
   was, so the label, input and filter buttons keep their
   alignment with the results below.
   Declared last so it wins over the mobile padding shorthand.
   ══════════════════════════════════════════════════════════ */
.tas--full-width-bar .tas__search-bar-wrapper {
	--tas-band-inset: 30px;
	margin-inline: calc(50% - 50vw);
	padding-inline: calc(50vw - 50% + var(--tas-band-inset));
}

.tas--full-width-bar.tas--mobile .tas__search-bar-wrapper {
	--tas-band-inset: 35px;
}

/* 100vw counts the scrollbar, so the breakout can overhang by its
   width. `clip` (not `hidden`) creates no scroll container, so
   sticky positioning and anchor jumps keep working. Scoped with
   :has() so only pages using the option are affected. */
body:has(.tas--full-width-bar) {
	overflow-x: clip;
}