/**
 * VivaWeb — Catégories produits : styles des shortcodes.
 *
 * Trois blocs indépendants : .vw-fl (filtres), .vw-nav (navigation) et les
 * variantes .vw-cs--menu du slider partagé avec le bloc Gutenberg.
 *
 * Les couleurs s'alignent sur la palette Kadence si elle est présente, avec
 * repli sur currentColor : aucune couleur en dur qui jurerait avec le thème.
 */

.vw-fl,
.vw-nav {
	--vw-accent: var( --global-palette1, currentColor );
	--vw-border: color-mix( in srgb, currentColor 18%, transparent );
	--vw-muted: color-mix( in srgb, currentColor 62%, transparent );
	--vw-surface: color-mix( in srgb, currentColor 5%, transparent );
	--vw-radius: 0.5rem;
}

.vw-fl[aria-busy="true"],
.vw-nav[aria-busy="true"] {
	opacity: 0.55;
	transition: opacity 0.2s ease;
	pointer-events: none;
}

.vw-cs-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	border: 0;
	clip-path: inset( 50% );
	white-space: nowrap;
}

/* =========================================================================
 *  Filtres
 * ====================================================================== */

.vw-fl {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.vw-fl__title {
	margin: 0;
	font-size: 1.1em;
}

.vw-fl__total {
	margin: 0.25em 0 0;
	color: var( --vw-muted );
	font-size: 0.9em;
}

/* Filtres actifs ---------------------------------------------------------- */

.vw-fl__active {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.vw-fl__active-label {
	color: var( --vw-muted );
	font-size: 0.85em;
}

.vw-fl__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vw-fl__chip-item {
	margin: 0;
}

.vw-fl__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.25em 0.6em;
	border: 1px solid var( --vw-accent );
	border-radius: 999px;
	background: color-mix( in srgb, var( --vw-accent ) 10%, transparent );
	color: inherit;
	font-size: 0.85em;
	line-height: 1.4;
	text-decoration: none;
}

.vw-fl__chip:hover,
.vw-fl__chip:focus-visible {
	background: color-mix( in srgb, var( --vw-accent ) 20%, transparent );
	color: inherit;
}

.vw-fl__chip-remove {
	font-size: 1.15em;
	line-height: 1;
}

.vw-fl__clear {
	color: var( --vw-muted );
	font-size: 0.85em;
	text-decoration: underline;
}

/* Groupes ----------------------------------------------------------------- */

.vw-fl__groups {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.vw-fl__group-title {
	margin: 0 0 0.5rem;
	font-size: 0.95em;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.vw-fl__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5em;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-transform: inherit;
	letter-spacing: inherit;
	cursor: pointer;
}

.vw-fl__chevron {
	flex: 0 0 auto;
	transition: transform 0.2s ease;
}

.vw-fl__toggle[aria-expanded="false"] .vw-fl__chevron {
	transform: rotate( -90deg );
}

.vw-fl__list {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vw-fl__list[hidden] {
	display: none;
}

.vw-fl__item {
	margin: 0;
	padding-inline-start: calc( var( --vw-fl-depth, 0 ) * 1.15rem );
}

.vw-fl__option {
	display: flex;
	align-items: center;
	gap: 0.55em;
	padding: 0.2em 0;
	color: inherit;
	line-height: 1.35;
	text-decoration: none;
}

.vw-fl__option:hover,
.vw-fl__option:focus-visible {
	color: var( --vw-accent );
}

.vw-fl__marker {
	position: relative;
	flex: 0 0 auto;
	width: 1.05em;
	height: 1.05em;
	border: 1px solid var( --vw-border );
	border-radius: 0.25em;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.vw-fl__option:hover .vw-fl__marker {
	border-color: var( --vw-accent );
}

.vw-fl__option.is-active .vw-fl__marker {
	border-color: var( --vw-accent );
	background: var( --vw-accent );
}

.vw-fl__option.is-active .vw-fl__marker::after {
	content: "";
	position: absolute;
	inset-inline-start: 50%;
	top: 45%;
	width: 0.28em;
	height: 0.55em;
	transform: translate( -50%, -50% ) rotate( 45deg );
	border: solid var( --vw-check, #fff );
	border-width: 0 2px 2px 0;
}

.vw-fl__option.is-active {
	font-weight: 600;
}

.vw-fl__name {
	min-width: 0;
}

.vw-fl__count {
	margin-inline-start: auto;
	color: var( --vw-muted );
	font-size: 0.85em;
	font-weight: 400;
}

.vw-fl__option.is-empty {
	opacity: 0.45;
	cursor: default;
}

/* Disposition en ligne ---------------------------------------------------- */

.vw-fl--ligne .vw-fl__groups {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 1.5rem;
}

.vw-fl--ligne .vw-fl__group {
	flex: 1 1 12rem;
	min-width: 0;
}

.vw-fl--ligne .vw-fl__list {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.vw-fl--ligne .vw-fl__item {
	padding-inline-start: 0;
}

.vw-fl--ligne .vw-fl__option {
	padding: 0.35em 0.8em;
	border: 1px solid var( --vw-border );
	border-radius: 999px;
}

.vw-fl--ligne .vw-fl__option.is-active {
	border-color: var( --vw-accent );
	background: color-mix( in srgb, var( --vw-accent ) 12%, transparent );
}

.vw-fl--ligne .vw-fl__marker {
	display: none;
}

.vw-fl--ligne .vw-fl__count {
	margin-inline-start: 0;
}

/* Décalage visuel des niveaux dans la disposition en liste. */
.vw-fl--liste .vw-fl__item--depth-1 > .vw-fl__option,
.vw-fl--liste .vw-fl__item--depth-2 > .vw-fl__option,
.vw-fl--liste .vw-fl__item--depth-3 > .vw-fl__option {
	font-size: 0.95em;
}

/* =========================================================================
 *  Navigation dans les catégories
 * ====================================================================== */

.vw-nav {
	display: block;
}

.vw-nav__title {
	margin: 0 0 0.75rem;
	font-size: 1.1em;
}

.vw-nav__breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35em;
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
	font-size: 0.9em;
}

.vw-nav__crumb {
	display: flex;
	align-items: center;
	gap: 0.35em;
	margin: 0;
}

.vw-nav__crumb + .vw-nav__crumb::before {
	content: "›";
	color: var( --vw-muted );
}

.vw-nav__crumb a {
	color: inherit;
	text-decoration: none;
}

.vw-nav__crumb a:hover,
.vw-nav__crumb a:focus-visible {
	color: var( --vw-accent );
	text-decoration: underline;
}

.vw-nav__crumb.is-current {
	color: var( --vw-muted );
}

.vw-nav__note {
	margin: 0 0 0.5rem;
	color: var( --vw-muted );
	font-size: 0.9em;
}

.vw-nav__grid {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {

	.vw-nav__grid {
		grid-template-columns: repeat( min( var( --vw-nav-columns, 4 ), 3 ), minmax( 0, 1fr ) );
	}
}

@media (min-width: 1024px) {

	.vw-nav__grid {
		grid-template-columns: repeat( var( --vw-nav-columns, 4 ), minmax( 0, 1fr ) );
	}
}

.vw-nav__item {
	margin: 0;
}

.vw-nav__card {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	height: 100%;
	padding: 0.75rem;
	border: 1px solid var( --vw-border );
	border-radius: var( --vw-radius );
	background: var( --vw-surface );
	color: inherit;
	text-align: center;
	text-decoration: none;
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.vw-nav__card:hover,
.vw-nav__card:focus-visible {
	border-color: var( --vw-accent );
	color: inherit;
	transform: translateY( -2px );
}

.vw-nav__card.is-current {
	border-color: var( --vw-accent );
	background: color-mix( in srgb, var( --vw-accent ) 10%, transparent );
}

.vw-nav__figure {
	display: block;
	overflow: hidden;
	border-radius: calc( var( --vw-radius ) - 2px );
	aspect-ratio: var( --vw-nav-ratio, 1 );
}

.vw-nav__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vw-nav__label {
	display: flex;
	flex-direction: column;
	gap: 0.15em;
}

.vw-nav__name {
	font-weight: 600;
	line-height: 1.25;
}

.vw-nav__count {
	color: var( --vw-muted );
	font-size: 0.85em;
}

/* Mode arbre -------------------------------------------------------------- */

.vw-nav__tree,
.vw-nav__sublist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vw-nav__sublist {
	margin-inline-start: 0.6rem;
	padding-inline-start: 0.6rem;
	border-inline-start: 1px solid var( --vw-border );
}

.vw-nav__sublist[hidden] {
	display: none;
}

.vw-nav__branch {
	position: relative;
	display: grid;
	grid-template-columns: 1.4em 1fr;
	align-items: center;
	margin: 0;
}

.vw-nav__branch > .vw-nav__link {
	grid-column: 2;
}

.vw-nav__branch > .vw-nav__sublist {
	grid-column: 1 / -1;
}

.vw-nav__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.4em;
	height: 1.4em;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var( --vw-muted );
	cursor: pointer;
}

.vw-nav__toggle[aria-expanded="true"] svg {
	transform: rotate( 90deg );
}

.vw-nav__toggle svg {
	transition: transform 0.2s ease;
}

.vw-nav__link {
	display: flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.3em 0;
	color: inherit;
	text-decoration: none;
}

.vw-nav__link:hover,
.vw-nav__link:focus-visible {
	color: var( --vw-accent );
}

.vw-nav__link.is-current {
	color: var( --vw-accent );
	font-weight: 600;
}

/* =========================================================================
 *  Menu de catégories (variantes du slider)
 * ====================================================================== */

.vw-cs--menu {
	--vw-cs-gap: 0.6rem;
	--vw-cs-arrow-size: 1.9rem;
}

.vw-cs--menu .vw-cs__tag {
	align-items: center;
	color: inherit;
}

.vw-cs--menu .vw-cs__label {
	font-size: var( --vw-cs-menu-label-size, 0.95em );
	white-space: nowrap;
}

.vw-cs--menu .vw-cs__tag.is-current {
	font-weight: 700;
}

/* Largeur libre : chaque entrée fait la largeur de son contenu, le slider ne
   s'active que si l'ensemble dépasse. */
.vw-cs--auto .vw-cs__item {
	flex: 0 0 auto;
	scroll-snap-align: start;
}

.vw-cs--center .vw-cs__track {
	justify-content: safe center;
}

/* Disposition en ligne : vignette et libellé côte à côte. */
.vw-cs--row .vw-cs__tag {
	flex-direction: row;
	gap: 0.55em;
	text-align: start;
}

.vw-cs--row .vw-cs__figure {
	flex: 0 0 auto;
	width: var( --vw-cs-menu-height, 2.75rem );
	height: var( --vw-cs-menu-height, 2.75rem );
	aspect-ratio: auto;
}

.vw-cs--row .vw-cs__label {
	display: block;
	-webkit-line-clamp: none;
	line-clamp: none;
	overflow: visible;
}

/* Hauteur maximale imposée en disposition colonne. */
.vw-cs--col.vw-cs--capped .vw-cs__figure {
	height: var( --vw-cs-menu-height );
	aspect-ratio: auto;
}

.vw-cs--round .vw-cs__figure {
	border-radius: 50%;
}

.vw-cs--no-figure.vw-cs--row .vw-cs__tag {
	padding: 0.35em 0.2em;
}

.vw-cs--menu .vw-cs__count {
	opacity: 0.55;
}

@media (prefers-reduced-motion: reduce) {

	.vw-nav__card,
	.vw-nav__toggle svg,
	.vw-fl__chevron,
	.vw-fl__marker {
		transition: none;
	}

	.vw-nav__card:hover,
	.vw-nav__card:focus-visible {
		transform: none;
	}
}

/* Terme imposé par la page consultée (archive de catégorie). */
.vw-fl__option.is-current {
	font-weight: 600;
	cursor: default;
}

.vw-fl__option.is-current .vw-fl__marker {
	border-color: var( --vw-accent );
	background: color-mix( in srgb, var( --vw-accent ) 30%, transparent );
}

/* =========================================================================
 *  Bouton déroulant
 * ====================================================================== */

.vw-drop {
	--vw-accent: var( --global-palette1, currentColor );
	--vw-border: color-mix( in srgb, currentColor 18%, transparent );
	--vw-muted: color-mix( in srgb, currentColor 62%, transparent );
	--vw-radius: 0.5rem;

	position: relative;
	display: inline-block;
}

.vw-drop__button {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin: 0;
	padding: 0.6em 1.1em;
	border: 1px solid transparent;
	border-radius: var( --vw-drop-radius, 999px );
	font: inherit;
	line-height: 1.2;
	cursor: pointer;
}

.vw-drop--plein .vw-drop__button {
	background: var( --vw-accent );
	color: var( --vw-drop-button-color, #fff );
}

.vw-drop--contour .vw-drop__button {
	border-color: var( --vw-border );
	background: transparent;
	color: inherit;
}

.vw-drop--texte .vw-drop__button {
	padding-inline: 0.2em;
	background: transparent;
	color: inherit;
}

.vw-drop--contour .vw-drop__button:hover,
.vw-drop--contour .vw-drop__button:focus-visible,
.vw-drop--texte .vw-drop__button:hover,
.vw-drop--texte .vw-drop__button:focus-visible {
	border-color: var( --vw-accent );
	color: var( --vw-accent );
}

.vw-drop__chevron {
	flex: 0 0 auto;
	transition: transform 0.2s ease;
}

.vw-drop[data-trigger="survol"]:hover:not( .is-suppressed ) .vw-drop__chevron,
.vw-drop:focus-within:not( .is-suppressed ) .vw-drop__chevron,
.vw-drop.is-open .vw-drop__chevron {
	transform: rotate( 180deg );
}

/* Panneau ----------------------------------------------------------------- */

.vw-drop__panel {
	position: absolute;
	top: calc( 100% + 0.5rem );
	z-index: 60;
	width: max-content;
	max-width: min( 92vw, 46rem );
	padding: 0.9rem;
	visibility: hidden;
	opacity: 0;
	transform: translateY( -0.35rem );
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
	border: 1px solid var( --vw-border );
	border-radius: var( --vw-radius );
	background: var( --vw-drop-panel-bg, #fff );
	box-shadow: 0 12px 32px rgba( 0, 0, 0, 0.14 );
}

.vw-drop--gauche .vw-drop__panel {
	inset-inline-start: 0;
}

.vw-drop--droite .vw-drop__panel {
	inset-inline-end: 0;
}

.vw-drop--centre .vw-drop__panel {
	inset-inline-start: 50%;
	transform: translate( -50%, -0.35rem );
}

/*
 * Ouverture en CSS pur : le survol et le focus clavier suffisent, le script
 * n'ajoute que le clic et la fermeture par Échap.
 */
.vw-drop[data-trigger="survol"]:hover:not( .is-suppressed ) > .vw-drop__panel,
.vw-drop:focus-within:not( .is-suppressed ) > .vw-drop__panel,
.vw-drop.is-open > .vw-drop__panel {
	visibility: visible;
	opacity: 1;
	transform: translateY( 0 );
}

.vw-drop--centre[data-trigger="survol"]:hover:not( .is-suppressed ) > .vw-drop__panel,
.vw-drop--centre:focus-within:not( .is-suppressed ) > .vw-drop__panel,
.vw-drop--centre.is-open > .vw-drop__panel {
	transform: translate( -50%, 0 );
}

/*
 * Fermeture explicite au clic : sans cela, le panneau resterait ouvert tant
 * que le pointeur survole le bouton.
 */
.vw-drop.is-suppressed > .vw-drop__panel {
	visibility: hidden;
	opacity: 0;
}

/* Zone tampon : le pointeur peut traverser l'espace bouton / panneau. */
.vw-drop__panel::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: -0.5rem;
	height: 0.5rem;
}

.vw-drop__list {
	display: grid;
	grid-template-columns: repeat( var( --vw-drop-columns, 3 ), minmax( 0, 1fr ) );
	gap: 0.25rem 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 600px) {

	.vw-drop__list {
		grid-template-columns: minmax( 0, 1fr );
	}

	.vw-drop__panel {
		max-width: min( 92vw, 22rem );
	}
}

.vw-drop__item {
	margin: 0;
	min-width: 0;
}

.vw-drop__link {
	display: flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.4em 0.5em;
	border-radius: calc( var( --vw-radius ) - 2px );
	color: inherit;
	text-decoration: none;
}

.vw-drop__link:hover,
.vw-drop__link:focus-visible {
	background: color-mix( in srgb, var( --vw-accent ) 10%, transparent );
	color: inherit;
}

.vw-drop__link.is-current {
	font-weight: 700;
}

.vw-drop__figure {
	display: block;
	flex: 0 0 auto;
	width: var( --vw-drop-image, 2.5rem );
	height: var( --vw-drop-image, 2.5rem );
	overflow: hidden;
	border-radius: var( --vw-drop-image-radius, 0.4rem );
	background: color-mix( in srgb, currentColor 6%, transparent );
}

.vw-drop__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vw-drop__text {
	display: flex;
	align-items: baseline;
	gap: 0.4em;
	min-width: 0;
}

.vw-drop__name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vw-drop__count {
	color: var( --vw-muted );
	font-size: 0.85em;
}

.vw-drop__sublist {
	margin: 0 0 0.5em;
	padding-inline-start: calc( var( --vw-drop-image, 2.5rem ) + 1.1em );
	list-style: none;
}

.vw-drop__sublink {
	display: block;
	padding: 0.15em 0;
	color: var( --vw-muted );
	font-size: 0.9em;
	text-decoration: none;
}

.vw-drop__sublink:hover,
.vw-drop__sublink:focus-visible {
	color: var( --vw-accent );
}

.vw-drop__all {
	display: inline-block;
	margin-top: 0.75rem;
	padding-top: 0.6rem;
	border-top: 1px solid var( --vw-border );
	width: 100%;
	color: var( --vw-accent );
	font-size: 0.9em;
	text-decoration: none;
}

.vw-drop__all:hover,
.vw-drop__all:focus-visible {
	text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {

	.vw-drop__panel,
	.vw-drop__chevron {
		transition: none;
	}
}

/* =========================================================================
 *  Sous-menus du menu de catégories
 * ====================================================================== */

.vw-cs--submenus .vw-cs__item.has-children {
	display: flex;
	align-items: center;
	gap: 0.1em;
}

.vw-cs--submenus .vw-cs__item.has-children > .vw-cs__tag {
	width: auto;
	flex: 1 1 auto;
	min-width: 0;
}

/* En colonne, la flèche se pose dans le coin de la vignette. */
.vw-cs--col.vw-cs--submenus .vw-cs__item.has-children {
	position: relative;
	display: block;
}

.vw-cs--col.vw-cs--submenus .vw-cs__subtoggle--root {
	position: absolute;
	top: 0.3rem;
	inset-inline-end: 0.3rem;
	border-radius: 50%;
	background: var( --vw-cs-submenu-bg, #fff );
	box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.18 );
}

.vw-cs__subtoggle {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 1.7em;
	height: 1.7em;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

.vw-cs__subtoggle svg {
	transition: transform 0.2s ease;
}

.vw-cs__item.is-open > .vw-cs__subtoggle svg {
	transform: rotate( 180deg );
}

.vw-cs__subitem.is-open > .vw-cs__subtoggle svg {
	transform: rotate( 90deg );
}

/*
 * Panneau positionné en `fixed` : la piste du slider a un `overflow-x`, qui
 * rognerait un panneau en `absolute`. Les coordonnées sont posées par le JS.
 */
.vw-cs__submenu {
	position: fixed;
	top: 0;
	inset-inline-start: 0;
	z-index: 90;
	min-width: 11rem;
	max-width: min( 90vw, 20rem );
	max-height: min( 70vh, 30rem );
	padding: 0.4rem;
	overflow-y: auto;
	border: 1px solid color-mix( in srgb, currentColor 15%, transparent );
	border-radius: var( --vw-cs-submenu-radius, 0.5rem );
	background: var( --vw-cs-submenu-bg, #fff );
	box-shadow: 0 12px 32px rgba( 0, 0, 0, 0.16 );
	text-align: start;
}

.vw-cs__submenu[hidden] {
	display: none;
}

.vw-cs__sublist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vw-cs__subitem {
	display: flex;
	align-items: center;
	gap: 0.1em;
	margin: 0;
}

.vw-cs__sublink {
	display: flex;
	flex: 1 1 auto;
	align-items: baseline;
	gap: 0.4em;
	min-width: 0;
	padding: 0.45em 0.6em;
	border-radius: calc( var( --vw-cs-submenu-radius, 0.5rem ) - 2px );
	color: inherit;
	line-height: 1.3;
	text-decoration: none;
}

.vw-cs__sublink:hover,
.vw-cs__sublink:focus-visible,
.vw-cs__subtoggle:hover,
.vw-cs__subtoggle:focus-visible {
	background: color-mix( in srgb, var( --global-palette1, currentColor ) 12%, transparent );
	color: inherit;
}

.vw-cs__sublink.is-current {
	font-weight: 700;
}

.vw-cs__subcount {
	flex: 0 0 auto;
	opacity: 0.55;
	font-size: 0.85em;
}

@media (prefers-reduced-motion: reduce) {

	.vw-cs__subtoggle svg {
		transition: none;
	}
}

/* =========================================================================
 *  Habillage du menu de catégories
 * ====================================================================== */

/*
 * Les sélecteurs doublent volontairement la classe (.vw-cs.vw-cs--menu) :
 * le CSS du bloc, chargé après celui-ci, poserait sinon le fond transparent
 * du mode texte par-dessus.
 */

.vw-cs--menu {
	--vw-cs-menu-bg: var( --global-palette3, #1f2933 );
	--vw-cs-menu-color: #fff;
	--vw-cs-menu-bg-hover: color-mix( in srgb, var( --vw-cs-menu-bg ) 82%, #fff );
	--vw-cs-menu-radius: 0.5rem;

	/*
	 * Les pastilles de catégorie et le panneau de sous-catégories partagent le
	 * même arrondi : régler --vw-cs-menu-radius les change tous les deux d'un
	 * coup, et les sous-liens suivent (panneau moins 2 px).
	 */
	--vw-cs-submenu-radius: var( --vw-cs-menu-radius );
}

/* Un menu ne se souligne pas, quel que soit le contexte du thème. */
.vw-cs.vw-cs--menu .vw-cs__tag,
.vw-cs.vw-cs--menu .vw-cs__tag:hover,
.vw-cs.vw-cs--menu .vw-cs__tag:focus,
.vw-cs.vw-cs--menu .vw-cs__tag:focus-visible,
.vw-cs.vw-cs--menu .vw-cs__tag:active,
.vw-cs--menu .vw-cs__sublink,
.vw-cs--menu .vw-cs__sublink:hover,
.vw-cs--menu .vw-cs__sublink:focus,
.vw-cs--menu .vw-cs__sublink:focus-visible {
	text-decoration: none;
}

.vw-cs.vw-cs--menu .vw-cs__tag {
	border-color: transparent;
	background: var( --vw-cs-menu-bg );
	color: var( --vw-cs-menu-color );
	transition: background-color 0.2s ease;
}

.vw-cs.vw-cs--menu .vw-cs__tag:hover,
.vw-cs.vw-cs--menu .vw-cs__tag:focus-visible,
.vw-cs.vw-cs--menu .vw-cs__tag.is-current {
	border-color: transparent;
	background: var( --vw-cs-menu-bg-hover );
	color: var( --vw-cs-menu-color );
}

/* En mode vignette, le fond devient une carte : il lui faut un peu d'air. */
.vw-cs.vw-cs--menu.vw-cs--image .vw-cs__tag {
	padding: var( --vw-cs-menu-padding, 0.45em );
	border-radius: var( --vw-cs-menu-radius );
}

.vw-cs--menu .vw-cs__subtoggle {
	color: var( --vw-cs-menu-color );
}

.vw-cs--menu.vw-cs--row .vw-cs__item.has-children {
	padding-inline-end: 0.4em;

	/*
	 * Même arrondi que le panneau de sous-catégories. Le repli valait 999px :
	 * la catégorie ouverte était une capsule posée au-dessus d'un panneau à
	 * angles doux, et les deux formes juraient.
	 */
	border-radius: var( --vw-cs-radius, var( --vw-cs-menu-radius ) );
	background: var( --vw-cs-menu-bg );
	transition: background-color 0.2s ease;
}

.vw-cs--menu.vw-cs--row .vw-cs__item.has-children:hover,
.vw-cs--menu.vw-cs--row .vw-cs__item.has-children:focus-within {
	background: var( --vw-cs-menu-bg-hover );
}

/*
 * Le fond est alors porté par l'entrée entière (lien + flèche) : sans cela,
 * seul le lien changerait de teinte au survol et la pastille paraîtrait
 * coupée en deux.
 */
.vw-cs--menu.vw-cs--row .vw-cs__item.has-children > .vw-cs__tag,
.vw-cs--menu.vw-cs--row .vw-cs__item.has-children > .vw-cs__tag:hover,
.vw-cs--menu.vw-cs--row .vw-cs__item.has-children > .vw-cs__tag:focus-visible {
	background: transparent;
}

/* Les panneaux reprennent la même teinte, sinon la flèche mènerait à une
   surface blanche sans rapport avec le menu. */
.vw-cs--menu .vw-cs__submenu {
	border-color: color-mix( in srgb, var( --vw-cs-menu-color ) 22%, transparent );
	background: var( --vw-cs-submenu-bg, var( --vw-cs-menu-bg ) );
	color: var( --vw-cs-menu-color );
}

.vw-cs--menu .vw-cs__sublink {
	color: var( --vw-cs-menu-color );
}

.vw-cs--menu .vw-cs__sublink:hover,
.vw-cs--menu .vw-cs__sublink:focus-visible,
.vw-cs--menu .vw-cs__subtoggle:hover,
.vw-cs--menu .vw-cs__subtoggle:focus-visible {
	background: color-mix( in srgb, var( --vw-cs-menu-color ) 16%, transparent );
	color: var( --vw-cs-menu-color );
}

@media (prefers-reduced-motion: reduce) {

	.vw-cs.vw-cs--menu .vw-cs__tag,
	.vw-cs--menu.vw-cs--row .vw-cs__item.has-children {
		transition: none;
	}
}

/* =========================================================================
 *  Aucun soulignement sur les liens de navigation du plugin
 * ====================================================================== */

/*
 * Les sélecteurs sont volontairement plus spécifiques que nécessaire : les
 * thèmes soulignent les liens de contenu avec des règles du type
 * `.inner-link-style-normal a:not(.button)` (Kadence), soit 0-2-1. Une règle
 * à 0-2-0 perdrait. Trois classes suffisent à passer devant, sans recourir à
 * !important, qui rendrait l'ensemble impossible à surcharger proprement.
 */

.vw-cs.vw-cs--menu .vw-cs__tag,
.vw-cs.vw-cs--menu .vw-cs__tag:hover,
.vw-cs.vw-cs--menu .vw-cs__tag:focus,
.vw-cs.vw-cs--menu .vw-cs__tag:focus-visible,
.vw-cs.vw-cs--menu .vw-cs__tag:active,
.vw-cs.vw-cs--menu .vw-cs__submenu .vw-cs__sublink,
.vw-cs.vw-cs--menu .vw-cs__submenu .vw-cs__sublink:hover,
.vw-cs.vw-cs--menu .vw-cs__submenu .vw-cs__sublink:focus,
.vw-cs.vw-cs--menu .vw-cs__submenu .vw-cs__sublink:focus-visible,
.vw-cs.vw-cs--menu .vw-cs__submenu .vw-cs__sublink:active,
.vw-fl .vw-fl__group .vw-fl__option,
.vw-fl .vw-fl__group .vw-fl__option:hover,
.vw-fl .vw-fl__group .vw-fl__option:focus,
.vw-fl .vw-fl__group .vw-fl__option:focus-visible,
.vw-fl .vw-fl__active .vw-fl__chip,
.vw-fl .vw-fl__active .vw-fl__chip:hover,
.vw-fl .vw-fl__active .vw-fl__chip:focus-visible,
.vw-nav .vw-nav__grid .vw-nav__card,
.vw-nav .vw-nav__grid .vw-nav__card:hover,
.vw-nav .vw-nav__grid .vw-nav__card:focus-visible,
.vw-nav .vw-nav__tree .vw-nav__link,
.vw-nav .vw-nav__tree .vw-nav__link:hover,
.vw-nav .vw-nav__tree .vw-nav__link:focus-visible,
.vw-nav .vw-nav__breadcrumb .vw-nav__crumb a,
.vw-drop .vw-drop__panel .vw-drop__link,
.vw-drop .vw-drop__panel .vw-drop__link:hover,
.vw-drop .vw-drop__panel .vw-drop__link:focus-visible,
.vw-drop .vw-drop__panel .vw-drop__sublink,
.vw-drop .vw-drop__panel .vw-drop__sublink:hover,
.vw-drop .vw-drop__panel .vw-drop__sublink:focus-visible {
	text-decoration: none;
}

/* Les seuls liens volontairement soulignés : « Tout effacer » et le fil
   d'Ariane au survol, qui doivent se lire comme des actions. */
.vw-nav .vw-nav__breadcrumb .vw-nav__crumb a:hover,
.vw-nav .vw-nav__breadcrumb .vw-nav__crumb a:focus-visible,
.vw-fl .vw-fl__active .vw-fl__clear {
	text-decoration: underline;
}


/* =========================================================================
 *  CORRECTIFS DU MENU DE CATÉGORIES  (2026-08-21)
 * ====================================================================== */

/*
 * DÉFILEMENT TACTILE QUAND LE MENU REMPLIT LA LARGEUR DISPONIBLE.
 *
 * Le menu est le plus souvent posé dans un élément HTML de l'en-tête Kadence.
 * Cette chaîne de boîtes ne descend pas sous la largeur de son contenu : au
 * lieu de contraindre le menu et de laisser la piste déborder d'elle-même,
 * elle s'élargissait avec lui. `scrollWidth` restait donc égal à
 * `clientWidth` — rien à faire glisser, ni au doigt ni à la souris, et les
 * flèches restaient masquées. On rend la chaîne rétractable.
 */
[class*="header-html"]:has( .vw-cs--menu ),
.site-header-item:has( .vw-cs--menu ) {
	min-width: 0;
	max-width: 100%;
}

.vw-cs--menu {
	min-width: 0;
	max-width: 100%;
}

/*
 * ARRONDI DES PASTILLES.
 *
 * Le slider pose 999px, ce qui donne des bouts complètement ronds. Trop pour
 * un menu, et surtout incohérent avec le panneau de sous-catégories : on
 * dérive du même --vw-cs-menu-radius que lui. La variable d'échappement reste
 * `--vw-cs-radius`, déjà documentée. Le sélecteur porte deux classes de racine
 * pour battre celle du slider (`.vw-cs--text .vw-cs__tag`).
 *
 * À noter : sur une catégorie qui a des sous-catégories, le fond visible n'est
 * pas porté par ce lien mais par `.vw-cs__item.has-children`, plus haut — les
 * deux doivent donc rester d'accord.
 */
.vw-cs--menu.vw-cs--text .vw-cs__tag {
	border-radius: var( --vw-cs-radius, var( --vw-cs-menu-radius ) );
}


/* =========================================================================
 *  Navigation, mode « accordéon »  (2026-08-21)
 * ======================================================================
 *  Sections repliables pensées pour un panneau mobile : intitulé, sous-titre
 *  facultatif (description de la catégorie), compteur à droite, et une
 *  bascule +/− en pastille. Les bascules sont des .vw-nav__toggle, front.js
 *  les gère déjà.
 * ====================================================================== */

/*
 * Kadence souligne tous les liens de contenu avec
 * `.inner-link-style-normal a:not(.button)` — deux classes et un élément. Il
 * faut trois classes pour passer devant, sinon le menu sort tout souligné.
 */
.vw-nav--accordeon .vw-nav__accordion .vw-nav__section-link,
.vw-nav--accordeon .vw-nav__accordion .vw-nav__section-link:hover,
.vw-nav--accordeon .vw-nav__accordion .vw-nav__section-link:focus,
.vw-nav--accordeon .vw-nav__accordion .vw-nav__group-title,
.vw-nav--accordeon .vw-nav__accordion .vw-nav__group-title:hover,
.vw-nav--accordeon .vw-nav__accordion .vw-nav__group-title:focus,
.vw-nav--accordeon .vw-nav__accordion .vw-nav__leaf,
.vw-nav--accordeon .vw-nav__accordion .vw-nav__leaf:hover,
.vw-nav--accordeon .vw-nav__accordion .vw-nav__leaf:focus,
.vw-nav.vw-nav--accordeon .vw-nav__cta,
.vw-nav.vw-nav--accordeon .vw-nav__cta:hover {
	text-decoration: none;
}

.vw-nav__accordion {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vw-nav__section + .vw-nav__section {
	border-top: 1px solid var( --vw-border );
}

.vw-nav__head {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	border-radius: var( --vw-radius ) var( --vw-radius ) 0 0;
	transition: background-color 0.2s ease;
}

/* Section dépliée : sa tête passe sur un fond gris et coiffe le panneau
   qu'elle ouvre. `:has()` évite une classe de plus en JS — le bouton porte
   déjà l'état dans `aria-expanded`. */
.vw-nav--accordeon .vw-nav__head:has( .vw-nav__toggle[aria-expanded="true"] ) {
	background: var( --vw-nav-open-bg, color-mix( in srgb, currentColor 9%, transparent ) );
}

/* Le lien porte le nom, le sous-titre et le compteur ; la bascule est à côté,
   pour que les deux cibles tactiles restent distinctes. */
.vw-nav__section-link {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	gap: 1rem;
	min-width: 0;
	padding: 0.85em 0;
	color: inherit;
}

.vw-nav__label {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0.15em;
	min-width: 0;
}

.vw-nav__section-link .vw-nav__name {
	font-size: 1.02em;
	font-weight: 700;
}

/* Reprend la description de la catégorie. Absente presque partout : la ligne
   disparaît alors, elle n'est jamais rendue vide. */
.vw-nav__desc {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	font-size: 0.84em;
	font-weight: 400;
	line-height: 1.35;
	opacity: 0.62;
}

.vw-nav__accordion .vw-nav__count {
	flex: 0 0 auto;
	font-size: 0.85em;
	font-weight: 700;
	opacity: 0.5;
}

/* Pastille de bascule, sur le modèle des chevrons de la maquette. */
.vw-nav__toggle--plus {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 0;
	border-radius: 0.6rem;
	background: var( --vw-nav-chip-bg, rgba( 0, 0, 0, 0.055 ) );
	color: inherit;
	cursor: pointer;
}

.vw-nav__toggle--plus:hover,
.vw-nav__toggle--plus:focus-visible {
	background: var( --vw-nav-chip-bg-hover, rgba( 0, 0, 0, 0.1 ) );
}

.vw-nav__plus-bar {
	transition: opacity 0.2s ease;
}

.vw-nav__toggle--plus[aria-expanded="true"] .vw-nav__plus-bar {
	opacity: 0;
}

/* La règle générique fait pivoter le chevron du mode arbre : un plus qui
   tourne n'aurait aucun sens. */
.vw-nav--accordeon .vw-nav__toggle[aria-expanded="true"] svg {
	transform: none;
}

/* Tout le bloc des sous-catégories repose sur un gris très léger : il détache
   le panneau déplié du reste du menu sans ajouter la moindre bordure. */
.vw-nav__panel {
	padding: 0.4em 0 0.8em;
	border-radius: 0 0 var( --vw-radius ) var( --vw-radius );
	background: var( --vw-nav-panel-bg, color-mix( in srgb, currentColor 5%, transparent ) );
}

/* Les listes prennent le retrait des intertitres ; seule la bande de ces
   derniers touche les bords du panneau. */
.vw-nav__panel > .vw-nav__leaves,
.vw-nav__group > .vw-nav__leaves {
	padding-inline: 0.9em;
}

.vw-nav__panel[hidden] {
	display: none;
}

.vw-nav__group + .vw-nav__group {
	margin-top: 1.2em;
}

/*
 * Deuxième niveau : une bande surlignée, en capitales, qui court sur toute la
 * largeur du panneau. C'est le repère de lecture du menu — sous l'intitulé de
 * section, au-dessus des sous-catégories qu'elle regroupe.
 */
.vw-nav__group-title {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.35em;
	padding: 0.6em 0.9em;
	background: var( --vw-nav-group-bg, color-mix( in srgb, currentColor 14%, transparent ) );
	color: inherit;
	font-size: 0.84em;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.vw-nav__leaves {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vw-nav__leaf-item + .vw-nav__leaf-item {
	border-top: 1px solid var( --vw-border );
}

.vw-nav__leaf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.6em 0;
	color: inherit;
}

.vw-nav__leaf .vw-nav__name {
	font-weight: 600;
}

/* Au-delà de la première rangée de sous-catégories, le nom revient en graisse
   normale : seul le niveau directement sous l'intertitre reste appuyé. */
.vw-nav__leaves--deep .vw-nav__name {
	font-weight: 400;
}

.vw-nav__leaf:hover .vw-nav__name,
.vw-nav__leaf:focus-visible .vw-nav__name,
.vw-nav__section-link:hover .vw-nav__name,
.vw-nav__group-title:hover {
	color: var( --vw-accent );
}

.vw-nav__leaf.is-current .vw-nav__name,
.vw-nav__group-title.is-current,
.vw-nav__section-link.is-current .vw-nav__name {
	color: var( --vw-accent );
}

/* Au-delà du troisième niveau on ne crée pas de nouvel accordéon : on décale. */
.vw-nav__leaves--deep {
	margin-inline-start: 0.8em;
	padding-inline-start: 0.7em;
	border-inline-start: 1px solid var( --vw-border );
}

/* Bouton de bas de panneau. `sticky` le garde visible quand la liste défile
   dans un tiroir ; s'il n'y a pas de conteneur défilant, il se comporte comme
   un bouton ordinaire en fin de liste. */
.vw-nav.vw-nav--accordeon .vw-nav__cta {
	position: sticky;
	bottom: 0;
	display: block;
	margin-top: 1.1rem;
	padding: 0.95em 1.2em;
	border-radius: 0.6rem;
	background: var( --vw-nav-cta-bg, var( --global-palette-btn-bg, #0f766e ) );
	color: var( --vw-nav-cta-color, var( --global-palette-btn, #fff ) );
	font-weight: 700;
	text-align: center;
}