/* ============================================================
   Portail de Section — Golf 7 Fontaines
   ============================================================ */

/* ── Hero ─────────────────────────────────────────────────── */
/* Trois hauteurs, réglées par section dans l'administration.
   « none » est le défaut : pas de bandeau du tout, la page démarre sur son
   titre — un aplat de couleur sur 380 px ne dit rien et coûte un écran. */
.vc-section-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
}

.vc-section-hero--cover {
	min-height: 380px;
}

.vc-section-hero--compact {
	min-height: 160px;
}

.vc-section-hero--none {
	min-height: 0;
	background: transparent;
	border-bottom: 1px solid var(--vc-color-border-soft);
}

.vc-section-hero--none .vc-section-hero-content {
	padding-top: var(--vc-space-8);
	padding-bottom: var(--vc-space-5);
}

/* Sans fond sombre, le texte reprend les couleurs du site. */
.vc-section-hero--none .vc-section-breadcrumb {
	color: var(--vc-color-text-muted);
}

.vc-section-hero--none .vc-section-breadcrumb a:hover {
	color: var(--vc-color-primary);
}

.vc-section-hero--none .vc-section-hero-title {
	color: var(--vc-color-text);
}

.vc-section-hero--none .vc-section-hero-email {
	color: var(--vc-color-text-muted);
}

.vc-section-hero--compact .vc-section-hero-content {
	padding-top: var(--vc-space-10);
	padding-bottom: var(--vc-space-6);
}
.vc-section-hero-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: transform .6s var(--vc-ease);
}
.vc-section-hero:hover .vc-section-hero-bg {
	transform: scale(1.02);
}
.vc-section-hero-bg--color {
	background: linear-gradient(135deg, var(--section-color, #2D5A27) 0%, color-mix(in srgb, var(--section-color, #2D5A27) 60%, #000) 100%);
}
.vc-section-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(13,13,11,.85) 0%, rgba(13,13,11,.3) 60%, transparent 100%);
}
.vc-section-hero-content {
	position: relative;
	z-index: 1;
	padding-bottom: var(--vc-space-12);
	padding-top: var(--vc-space-20);
	width: 100%;
}
.vc-section-breadcrumb {
	display: flex;
	gap: var(--vc-space-2);
	align-items: center;
	font-size: var(--vc-font-size-xs);
	color: rgba(251,249,245,.7);
	margin-bottom: var(--vc-space-4);
}
.vc-section-breadcrumb a { color: inherit; text-decoration: none; }
.vc-section-breadcrumb a:hover { color: var(--vc-color-accent); }
.vc-section-hero-badge {
	display: inline-block;
	padding: 3px 12px;
	border-radius: var(--vc-radius-full);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: var(--vc-space-3);
}
.vc-section-hero-title {
	font-family: var(--vc-font-heading);
	font-size: clamp(2.5rem, 6vw, 4.5rem);
	font-weight: 500;
	letter-spacing: var(--vc-tracking-display);
	color: var(--vc-color-white);
	margin: 0 0 var(--vc-space-4);
	line-height: 1.02;
}
.vc-section-hero-email {
	display: inline-block;
	color: rgba(251,249,245,.8);
	font-size: var(--vc-font-size-sm);
	text-decoration: none;
	transition: color var(--vc-duration-fast);
}
.vc-section-hero-email:hover { color: var(--vc-color-accent); }

/* ── Layout portail ──────────────────────────────────────── */
.vc-section-body {
	padding-top: var(--vc-space-10);
	padding-bottom: var(--vc-space-20);
}
/* Menu à gauche, contenu à droite — même gabarit que « Mon espace », pour que
   les deux portails du site se parcourent de la même façon. */
.vc-section-layout {
	display: grid;
	grid-template-columns: 256px 1fr;
	gap: var(--vc-space-8);
	align-items: start;
}

/* Un enfant de grille refuse de r�tr�cir sous la largeur de son contenu
   (min-width: auto) : une grille de cartes auto-fit, un long mot dans un titre
   d'article ou le tableau du widget i-Golf gonflaient la colonne au-del� de
   l'�cran, et toute la page d�bordait � le m�me pi�ge que sur Mon espace. */
.vc-section-menu,
.vc-section-content {
	min-width: 0;
}

@media (max-width: 900px) {
	.vc-section-layout {
		grid-template-columns: 1fr;
		gap: var(--vc-space-6);
	}
}

/* ── Menu de section ─────────────────────────────────────── */
.vc-section-menu {
	position: sticky;
	top: var(--vc-space-24);
	padding: var(--vc-space-3);
	background: var(--vc-color-surface);
	border: 1px solid var(--vc-color-border-soft);
	border-radius: var(--vc-radius-lg);
	box-shadow: var(--vc-shadow-card);
}

/* --- Retour a Mon espace --- */
.vc-section-menu-back {
	display: flex;
	align-items: center;
	gap: var(--vc-space-2);
	padding: var(--vc-space-2) var(--vc-space-4);
	margin-bottom: var(--vc-space-2);
	border-radius: var(--vc-radius-md);
	color: var(--vc-color-text-muted);
	font-size: var(--vc-font-size-xs);
	font-weight: 500;
	text-decoration: none;
	transition: background var(--vc-duration-fast) var(--vc-ease),
	            color var(--vc-duration-fast) var(--vc-ease);
}

.vc-section-menu-back:hover,
.vc-section-menu-back:focus-visible {
	background: var(--vc-color-bg-alt);
	color: var(--vc-color-text);
}

/* --- Bascule de section --- */
.vc-section-switcher {
	position: relative;
	margin-bottom: var(--vc-space-3);
	padding-bottom: var(--vc-space-3);
	border-bottom: 1px solid var(--vc-color-border-soft);
}

.vc-section-switcher-toggle {
	display: flex;
	align-items: center;
	gap: var(--vc-space-3);
	width: 100%;
	padding: var(--vc-space-2) var(--vc-space-4);
	border: none;
	border-radius: var(--vc-radius-md);
	background: transparent;
	font: inherit;
	font-size: var(--vc-font-size-sm);
	font-weight: 600;
	color: var(--vc-color-text);
	text-align: left;
	cursor: pointer;
	transition: background var(--vc-duration-fast) var(--vc-ease);
}

.vc-section-switcher-toggle:hover,
.vc-section-switcher-toggle:focus-visible {
	background: var(--vc-color-bg-alt);
}

.vc-section-switcher-toggle .vc-icon {
	flex: 0 0 auto;
	margin-left: auto;
	color: var(--vc-color-text-muted);
	transition: transform var(--vc-duration-base) var(--vc-ease);
}

.vc-section-switcher-toggle[aria-expanded="true"] .vc-icon {
	transform: rotate(180deg);
}

.vc-section-switcher-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vc-section-switcher-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	flex: 0 0 auto;
}

.vc-section-switcher-list {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 20;
	margin: 4px 0 0;
	padding: var(--vc-space-2);
	list-style: none;
	background: var(--vc-color-surface);
	border: 1px solid var(--vc-color-border-soft);
	border-radius: var(--vc-radius-md);
	box-shadow: var(--vc-shadow-lg);
}

.vc-section-switcher-list[hidden] {
	display: none;
}

.vc-section-switcher-list a {
	display: flex;
	align-items: center;
	gap: var(--vc-space-3);
	padding: var(--vc-space-2) var(--vc-space-3);
	border-radius: var(--vc-radius-sm);
	color: var(--vc-color-text);
	font-size: var(--vc-font-size-sm);
	text-decoration: none;
	transition: background var(--vc-duration-fast) var(--vc-ease);
}

.vc-section-switcher-list a:hover,
.vc-section-switcher-list a:focus-visible {
	background: var(--vc-color-bg-alt);
}

.vc-section-menu-list {
	display: flex;
	flex-direction: column;
	gap: var(--vc-space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vc-section-menu-link {
	display: flex;
	align-items: center;
	gap: var(--vc-space-3);
	width: 100%;
	padding: var(--vc-space-3) var(--vc-space-4);
	border: none;
	border-radius: var(--vc-radius-md);
	background: transparent;
	font: inherit;
	font-size: var(--vc-font-size-sm);
	font-weight: 500;
	color: var(--vc-color-text-muted);
	text-align: left;
	cursor: pointer;
	transition: background var(--vc-duration-fast) var(--vc-ease),
	            color var(--vc-duration-fast) var(--vc-ease);
}

.vc-section-menu-link:hover,
.vc-section-menu-link:focus-visible {
	background: var(--vc-color-bg-alt);
	color: var(--vc-color-text);
}

.vc-section-menu-link.active {
	background: var(--vc-color-primary);
	color: var(--vc-on-dark, #fff);
	font-weight: 600;
	box-shadow: var(--vc-shadow-sm);
}

.vc-section-menu-icon {
	font-size: 1rem;
	line-height: 1;
	flex: 0 0 auto;
	opacity: .65;
	transition: opacity var(--vc-duration-fast) var(--vc-ease);
}

.vc-section-menu-link:hover .vc-section-menu-icon,
.vc-section-menu-link:focus-visible .vc-section-menu-icon,
.vc-section-menu-link.active .vc-section-menu-icon {
	opacity: 1;
}

.vc-section-menu-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ── PWA : bouton Installer + note iOS ───────────────────── */
/* Caché par défaut ; le script PWA du plugin le révèle quand l'installation
   est réellement possible. */
.vc-section-menu .vc-pwa-install {
	margin-top: var(--vc-space-4);
	width: 100%;
}

.vc-section-menu .vc-pwa-ios-note {
	margin: var(--vc-space-2) 0 0;
	font-size: var(--vc-font-size-xs);
	line-height: var(--vc-line-height-snug);
	color: var(--vc-color-text-muted);
}

/* Le bouton n'apparaît qu'en dessous du point de bascule. Il affiche
   l'onglet courant (libellé et icône mis à jour en JS) : on sait où l'on
   est sans avoir à déplier le menu. */
.vc-section-menu-toggle {
	display: none;
	align-items: center;
	gap: var(--vc-space-3);
	width: 100%;
	padding: var(--vc-space-3) var(--vc-space-4);
	border: 1px solid var(--vc-color-border);
	border-radius: var(--vc-radius-lg);
	background: var(--vc-color-surface);
	box-shadow: var(--vc-shadow-sm);
	font: inherit;
	font-size: var(--vc-font-size-sm);
	font-weight: 500;
	color: var(--vc-color-text);
	text-align: left;
	cursor: pointer;
	transition: border-color var(--vc-duration-fast) var(--vc-ease),
	            box-shadow var(--vc-duration-fast) var(--vc-ease);
}

.vc-section-menu-toggle-icon {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--vc-color-primary);
}

.vc-section-menu-toggle-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vc-section-menu-toggle-chevron {
	display: inline-flex;
	flex: 0 0 auto;
	margin-left: auto;
	color: var(--vc-color-text-muted);
	transition: transform var(--vc-duration-base) var(--vc-ease);
}

.vc-section-menu.is-open .vc-section-menu-toggle {
	border-color: var(--vc-color-primary);
	box-shadow: var(--vc-shadow-md);
}

.vc-section-menu.is-open .vc-section-menu-toggle-chevron {
	transform: rotate(180deg);
}

@media (max-width: 900px) {
	/* Seuil align� sur celui qui fait passer `.vc-section-menu` en d�pliant
	   (plus bas dans ce fichier) � pas les 768px d'origine : en dessous, le
	   d�pliant restait visible sans la barre d'onglets pour le remplacer.

	   Pour un membre connecté, la barre d'onglets mobile (composant partagé
	   portal-tabbar) est la navigation de la section : le menu à dépliant
	   ferait doublon. Le visiteur, qui n'a pas de barre, garde le dépliant. */
	body.vc-app .vc-section-menu {
		display: none;
	}

	/* Le fil d'Ariane appartient au site ; dans l'app, la barre d'onglets et
	   son bouton Espace disent déjà d'où l'on vient. */
	body.vc-app .vc-section-breadcrumb {
		display: none;
	}

	/* Le bandeau se réduit à son titre : dans l'app, chaque écran commence
	   par son contenu, pas par un fronton. */
	body.vc-app .vc-section-hero--cover {
		min-height: 160px;
	}

	body.vc-app .vc-section-hero--compact {
		min-height: 0;
	}

	body.vc-app .vc-section-hero-content {
		padding-top: var(--vc-space-6);
		padding-bottom: var(--vc-space-4);
	}

	body.vc-app .vc-section-hero--none .vc-section-hero-content {
		padding-top: var(--vc-space-4);
		padding-bottom: var(--vc-space-3);
	}

	body.vc-app .vc-section-hero-title {
		font-size: var(--vc-font-size-xl);
		margin-bottom: var(--vc-space-1);
	}

	body.vc-app .vc-section-body {
		padding-top: var(--vc-space-4);
	}

	/* En colonne unique, la version collante n'a plus de sens : le menu
	   redevient un bloc du flux, seul le dépliant passe en surcouche. */
	.vc-section-menu {
		position: relative;
		top: auto;
		z-index: 40;
		padding: 0;
		background: none;
		border: none;
		box-shadow: none;
	}

	/* Retour et bascule de section restent au bureau : le visiteur mobile a
	   d�j� le fil d'Ariane, le membre en app la barre d'onglets. */
	.vc-section-menu-back,
	.vc-section-switcher {
		display: none;
	}

	.vc-section-menu-toggle {
		display: flex;
	}

	/* Replié par défaut : le menu se déplie en surcouche sous le bouton,
	   sans pousser le contenu — plus lisible qu'une rangée d'onglets qui
	   déborde de l'écran. */
	.vc-section-menu-list {
		display: none;
		position: absolute;
		top: calc(100% + var(--vc-space-2));
		left: 0;
		right: 0;
		padding: var(--vc-space-2);
		border: 1px solid var(--vc-color-border);
		border-radius: var(--vc-radius-lg);
		background: var(--vc-color-surface);
		box-shadow: var(--vc-shadow-lg);
	}

	.vc-section-menu.is-open .vc-section-menu-list {
		display: flex;
		animation: vc-menu-drop var(--vc-duration-base) var(--vc-ease-out);
	}
}

@keyframes vc-menu-drop {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: none; }
}

/* ── Loading spinner ─────────────────────────────────────── */
.vc-section-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: var(--vc-space-16);
	color: var(--vc-color-text-muted);
	gap: var(--vc-space-4);
}
.vc-spinner {
	width: 36px;
	height: 36px;
	border: 3px solid var(--vc-color-border);
	border-top-color: var(--vc-color-accent);
	border-radius: 50%;
	animation: vc-spin .7s linear infinite;
}

/* Chargement : deux arcs, deux vitesses, deux sens.
 *
 * Un anneau seul � vitesse constante se lit comme une image fig�e d�s que
 * l'attente d�passe deux secondes � on ne sait plus s'il tourne encore. Deux
 * arcs qui se croisent gardent un mouvement visible, sans agiter l'�cran.
 */
.vc-loader {
	position: relative;
	display: block;
	width: 42px;
	height: 42px;
}

.vc-loader i {
	position: absolute;
	inset: 0;
	border: 3px solid transparent;
	border-radius: 50%;
	animation: vc-spin 1.1s cubic-bezier(.6, .1, .4, .9) infinite;
}

.vc-loader i:first-child {
	border-top-color: var(--section-color, var(--vc-color-primary));
	border-right-color: var(--section-color, var(--vc-color-primary));
}

/* Le second arc est plus petit, plus lent et tourne � l'envers. */
.vc-loader i:last-child {
	inset: 8px;
	border-bottom-color: var(--vc-color-accent);
	border-left-color: var(--vc-color-accent);
	opacity: .75;
	animation-duration: 1.7s;
	animation-direction: reverse;
}

/* Une animation qui tourne sans fin d�range qui y est sensible : le disque
   reste alors immobile, et c'est le texte qui informe. */
@media (prefers-reduced-motion: reduce) {
	.vc-loader i {
		animation: none;
		border-color: var(--vc-color-border);
		border-top-color: var(--section-color, var(--vc-color-primary));
	}
}
@keyframes vc-spin { to { transform: rotate(360deg); } }

/* ── Articles grid ───────────────────────────────────────── */
.vc-articles-grid {
	display: grid;
	/* min(300px, 100%) : sous ~340 px de viewport le conteneur descend en
	   dessous de 300 px � sans le min(), les pistes garderaient leurs 300 px
	   et les cartes d�borderaient de l'�cran. */
	grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
	gap: var(--vc-space-6);
}
.vc-article-card {
	background: var(--vc-color-surface);
	border: 1px solid var(--vc-color-border-soft);
	border-radius: var(--vc-radius-lg);
	overflow: hidden;
	cursor: pointer;
	transition: transform var(--vc-duration-base) var(--vc-ease),
	            box-shadow var(--vc-duration-base) var(--vc-ease);
}
.vc-article-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--vc-shadow-lg);
	border-color: var(--vc-color-accent);
}
.vc-article-card-cover {
	aspect-ratio: 16/9;
	background: var(--vc-color-sand);
	overflow: hidden;
}
.vc-article-card-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--vc-duration-slow);
}
.vc-article-card:hover .vc-article-card-cover img {
	transform: scale(1.04);
}
.vc-article-card-cover--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 40px;
	opacity: .3;
}
.vc-article-card-body {
	padding: var(--vc-space-5);
}
.vc-article-card-meta {
	font-size: var(--vc-font-size-xs);
	color: var(--vc-color-text-muted);
	margin-bottom: var(--vc-space-2);
}
.vc-article-card-title {
	font-family: var(--vc-font-heading);
	font-size: var(--vc-font-size-lg);
	font-weight: 500;
	letter-spacing: var(--vc-tracking-tight);
	color: var(--vc-color-text);
	margin: 0 0 var(--vc-space-3);
	line-height: 1.25;
	/* Un mot plus large que la carte (une URL coll�e dans un titre) se coupe
	   au lieu d'�largir la carte � et la page avec elle. */
	overflow-wrap: anywhere;
}
.vc-article-card-excerpt {
	font-size: var(--vc-font-size-sm);
	color: var(--vc-color-text-muted);
	line-height: var(--vc-line-height-normal);
	margin: 0;
	overflow-wrap: anywhere;
}
.vc-article-card-footer {
	padding: var(--vc-space-3) var(--vc-space-5);
	border-top: 1px solid var(--vc-color-border);
	font-size: var(--vc-font-size-xs);
	color: var(--vc-color-accent);
	font-weight: 500;
}

/* ── Article detail ──────────────────────────────────────── */
.vc-article-detail {
	animation: vc-fade-in var(--vc-duration-base) ease;
}
@keyframes vc-fade-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.vc-article-back-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--vc-color-text-muted);
	font-size: var(--vc-font-size-sm);
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	margin-bottom: var(--vc-space-6);
	transition: color var(--vc-duration-fast);
}
.vc-article-back-btn:hover { color: var(--vc-color-accent); }
.vc-article-detail-cover {
	border-radius: var(--vc-radius-lg);
	overflow: hidden;
	margin-bottom: var(--vc-space-8);
	max-height: 420px;
}
.vc-article-detail-cover img {
	width: 100%;
	height: 420px;
	object-fit: cover;
	display: block;
}
/* La signature ferme l'article.
 *
 * En capitales et pos�e avant le titre, elle imposait une date et un nom avant
 * m�me qu'on sache de quoi il s'agit. En bas, elle r�pond � la question qu'on
 * se pose une fois la lecture faite. Un filet la s�pare du texte, sans quoi on
 * la lirait comme un dernier paragraphe.
 */
.vc-article-detail-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vc-space-2) var(--vc-space-5);
	max-width: 70ch;
	margin-top: var(--vc-space-8);
	padding-top: var(--vc-space-4);
	border-top: 1px solid var(--vc-color-border);
	font-size: var(--vc-font-size-sm);
	color: var(--vc-color-text-muted);
}

.vc-article-detail-meta span {
	display: inline-flex;
	align-items: center;
	gap: var(--vc-space-2);
}

.vc-article-detail-meta .vc-icon {
	flex: none;
	color: var(--section-color, var(--vc-color-primary));
	opacity: .65;
}
/* Le titre a sa propre mesure, plus courte que celle du texte : un titre �tal�
   sur toute la largeur se lit moins bien que le m�me sur trois lignes.
   `clamp()` le fait descendre sur les petits �crans, o� la taille de bureau
   mangeait quatre lignes.
   L'espace en dessous est serr� : le titre et son premier paragraphe forment
   un bloc, ils ne doivent pas se chercher. */
.vc-article-detail-title {
	max-width: 24ch;
	font-family: var(--vc-font-heading);
	font-size: clamp(1.75rem, 1.2rem + 2.2vw, var(--vc-font-size-3xl));
	font-weight: 500;
	letter-spacing: var(--vc-tracking-display);
	color: var(--vc-color-text);
	margin: 0 0 var(--vc-space-5);
	line-height: var(--vc-line-height-tight);
}
/* Le corps de l'article porte le texte principal, pas un commentaire : il �tait
   en couleur att�nu�e, ce qui passe sur trois lignes de r�sum� mais fatigue sur
   un article entier.

   `max-width` en `ch` fixe la longueur de ligne, pas la largeur de la bo�te :
   sur un �cran large, une ligne de cent vingt caract�res fait perdre le d�but
   de la suivante � chaque retour. Soixante-dix est la mesure habituelle. */
.vc-article-detail-content {
	max-width: 70ch;
	color: var(--vc-color-text);
	line-height: var(--vc-line-height-loose);
	font-size: var(--vc-font-size-md);
}
.vc-article-detail-content h2,
.vc-article-detail-content h3 {
	font-family: var(--vc-font-heading);
	color: var(--vc-color-text);
	margin-top: var(--vc-space-8);
}
.vc-article-detail-content p { margin-bottom: var(--vc-space-4); }
.vc-article-detail-content img { max-width: 100%; border-radius: var(--vc-radius-md); }
.vc-article-detail-content a { color: var(--vc-color-accent); }
.vc-article-detail-content blockquote {
	border-left: 3px solid var(--vc-color-accent);
	padding-left: var(--vc-space-5);
	margin: var(--vc-space-6) 0;
	color: var(--vc-color-text-muted);
	font-style: italic;
}

/* ── No articles ─────────────────────────────────────────── */
.vc-no-articles {
	text-align: center;
	padding: var(--vc-space-20) 0;
	color: var(--vc-color-text-muted);
}
.vc-no-articles-icon { font-size: 48px; margin-bottom: var(--vc-space-4); opacity: .4; }

/* ── Upcoming / placeholder tabs ─────────────────────────── */
.vc-tab-placeholder {
	text-align: center;
	padding: var(--vc-space-16);
	color: var(--vc-color-text-muted);
}
.vc-tab-placeholder-icon { font-size: 48px; margin-bottom: var(--vc-space-4); opacity: .3; }

/* ── Sidebar ─────────────────────────────────────────────── */
.vc-section-join-card {
	background: linear-gradient(135deg, var(--section-color, #2D5A27), color-mix(in srgb, var(--section-color, #2D5A27) 60%, #000));
	border-radius: var(--vc-radius-lg);
	padding: var(--vc-space-6);
	text-align: center;
}
.vc-join-text {
	color: rgba(251,249,245,.9);
	font-size: var(--vc-font-size-sm);
	margin-bottom: var(--vc-space-5);
}
.vc-join-text--member { color: rgba(251,249,245,.9); }
.vc-btn-join {
	background: #fff !important;
	color: var(--section-color, #2D5A27) !important;
	font-weight: 600;
	width: 100%;
	justify-content: center;
}
.vc-btn-leave {
	color: rgba(251,249,245,.75) !important;
	border-color: rgba(251,249,245,.35) !important;
	font-size: var(--vc-font-size-xs);
}

.vc-iban {
	font-size: var(--vc-font-size-sm);
	color: var(--vc-color-text);
	background: var(--vc-color-cream-2);
	padding: var(--vc-space-2) var(--vc-space-3);
	border-radius: var(--vc-radius-sm);
	display: inline-block;
}

/* ── Galerie ─────────────────────────────────────────────── */
.vc-gallery-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 220px, 1fr ) );
	gap: var(--vc-space-3);
}

.vc-gallery-item {
	position: relative;
	overflow: hidden;
	border-radius: var(--vc-radius-md);
	cursor: pointer;
	aspect-ratio: 4/3;
	background: var(--vc-color-sand);
}

.vc-gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}

.vc-gallery-item:hover img {
	transform: scale(1.06);
}

.vc-gallery-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient( to top, rgba(13,13,11,.75), transparent );
	color: #fff;
	font-size: var(--vc-font-size-sm);
	padding: var(--vc-space-3) var(--vc-space-3) var(--vc-space-2);
	opacity: 0;
	transition: opacity .25s ease;
}

.vc-gallery-item:hover .vc-gallery-caption {
	opacity: 1;
}

/* Vue liste (barre de vue de la galerie, 06/10/2026) : une ligne par photo —
   vignette, légende, dossier et date — comme la liste des actualités. */
.vc-gallery-grid--list {
	grid-template-columns: 1fr;
	gap: var(--vc-space-2);
}

.vc-gallery-grid--list .vc-gallery-item {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr) auto;
	grid-template-areas: "thumb caption actions" "thumb meta actions";
	align-items: center;
	gap: 2px var(--vc-space-3);
	aspect-ratio: auto;
	padding: var(--vc-space-2);
	border: 1px solid var(--vc-color-border-soft);
	background: var(--vc-color-surface);
}

.vc-gallery-grid--list .vc-gallery-item img {
	grid-area: thumb;
	height: 80px;
	border-radius: var(--vc-radius-sm, 4px);
}

.vc-gallery-grid--list .vc-gallery-item:hover img {
	transform: none;
}

.vc-gallery-grid--list .vc-gallery-caption {
	grid-area: caption;
	position: static;
	padding: 0;
	background: none;
	color: var(--vc-color-text);
	opacity: 1;
}

.vc-gallery-meta {
	grid-area: meta;
	display: flex;
	flex-wrap: wrap;
	gap: var(--vc-space-3);
	color: var(--vc-color-text-muted);
	font-size: var(--vc-font-size-xs);
}

.vc-gallery-meta span {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.vc-gallery-grid--list .vc-item-actions {
	grid-area: actions;
	position: static;
	opacity: 1;
}

@media (max-width: 600px) {
	.vc-gallery-grid--list .vc-gallery-item {
		grid-template-columns: 84px minmax(0, 1fr);
		grid-template-areas: "thumb caption" "thumb meta" "actions actions";
	}

	.vc-gallery-grid--list .vc-gallery-item img {
		height: 60px;
	}
}

/* Lightbox */
.vc-lightbox {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 9999;
}

.vc-lightbox.active {
	display: flex;
	align-items: center;
	justify-content: center;
}

.vc-lightbox-overlay {
	position: absolute;
	inset: 0;
	background: rgba(13,13,11,.94);
}

.vc-lightbox-inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: var(--vc-space-4);
	max-width: 90vw;
	max-height: 90vh;
}

.vc-lightbox-content {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.vc-lightbox-img {
	max-width: 80vw;
	max-height: 80vh;
	object-fit: contain;
	border-radius: var(--vc-radius-md);
}

.vc-lightbox-caption {
	color: rgba(251,249,245,.8);
	font-size: var(--vc-font-size-sm);
	margin-top: var(--vc-space-2);
	text-align: center;
}

.vc-lightbox-close,
.vc-lightbox-prev,
.vc-lightbox-next {
	background: none;
	border: none;
	color: #fff;
	cursor: pointer;
	font-size: 2rem;
	padding: var(--vc-space-2) var(--vc-space-4);
	line-height: 1;
	opacity: .7;
	transition: opacity .2s;
}

.vc-lightbox-close:hover,
.vc-lightbox-prev:hover,
.vc-lightbox-next:hover {
	opacity: 1;
}

.vc-lightbox-close {
	position: absolute;
	top: -44px;
	right: 0;
	font-size: 1.5rem;
}

/* ── Agenda ──────────────────────────────────────────────── */
.vc-events-list {
	display: flex;
	flex-direction: column;
	gap: var(--vc-space-4);
}

.vc-event-card {
	display: flex;
	gap: var(--vc-space-5);
	background: var(--vc-color-surface);
	border: 1px solid var(--vc-color-border-soft);
	border-radius: var(--vc-radius-lg);
	padding: var(--vc-space-5);
	align-items: flex-start;
}

.vc-event-date-badge {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 64px;
	min-height: 64px;
	background: var(--section-color, var(--vc-color-primary));
	border-radius: var(--vc-radius-md);
	color: #fff;
	padding: var(--vc-space-2);
}

.vc-event-day {
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1;
}

.vc-event-month {
	font-size: .65rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	opacity: .9;
}

.vc-event-info {
	flex: 1;
	min-width: 0;
}

.vc-event-title {
	font-size: var(--vc-font-size-lg);
	font-weight: 600;
	color: var(--vc-color-text);
	margin: 0 0 var(--vc-space-2);
}

.vc-event-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vc-space-3);
	font-size: var(--vc-font-size-sm);
	color: var(--vc-color-text-muted);
	margin-bottom: var(--vc-space-2);
}

.vc-event-desc {
	font-size: var(--vc-font-size-sm);
	color: var(--vc-color-text-muted);
	margin: 0;
}

/* ── Cotisation ──────────────────────────────────────────── */
.vc-cotisation-wrap {
	display: flex;
	flex-direction: column;
	gap: var(--vc-space-5);
	max-width: 560px;
}

.vc-cotisation-card {
	background: var(--vc-color-surface);
	border: 1px solid var(--vc-color-border-soft);
	border-radius: var(--vc-radius-lg);
	padding: var(--vc-space-6);
}

.vc-cotisation-card h3 {
	font-size: var(--vc-font-size-lg);
	font-weight: 600;
	margin: 0 0 var(--vc-space-4);
}

/* En-tête de carte avec le bouton « Modifier la grille » du membre admin. */
.vc-cotisation-card-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--vc-space-2);
	margin-bottom: var(--vc-space-4);
}

.vc-cotisation-card-head h3 {
	margin: 0;
}

/* Éditeur de la grille (portail, 13/10/2026). */
.vc-tarif-editor {
	max-width: 760px;
}

.vc-tarif-editor-hint {
	margin: 0;
	color: var(--vc-color-text-muted);
	font-size: var(--vc-font-size-sm);
}

.vc-tarif-editor-rows {
	display: grid;
	gap: var(--vc-space-2);
}

.vc-tarif-editor-row {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) 100px minmax(0, 1.4fr) minmax(170px, 1.2fr);
	align-items: end;
	gap: var(--vc-space-2);
	padding: var(--vc-space-3) var(--vc-space-6) var(--vc-space-3) var(--vc-space-3);
	border: 1px solid var(--vc-color-border-soft);
	border-radius: var(--vc-radius-md);
}

.vc-tarif-editor-field {
	display: grid;
	gap: 4px;
	font-size: var(--vc-font-size-xs);
	color: var(--vc-color-text-muted);
}

.vc-tarif-editor-field input,
.vc-tarif-editor-field select {
	width: 100%;
	min-width: 0;
}

.vc-widget-form-fields .vc-tarif-editor-default {
	grid-column: 1 / -1;
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	justify-self: start;
	gap: 6px;
	margin: 0;
	color: var(--vc-color-text);
	font-size: var(--vc-font-size-sm);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
}

.vc-widget-form-fields .vc-tarif-editor-default input {
	width: auto;
	margin: 0;
}

.vc-tarif-editor-row .vc-widget-form-contact-remove {
	position: absolute;
	top: 6px;
	right: 6px;
}

@media (max-width: 640px) {
	.vc-tarif-editor-row {
		grid-template-columns: minmax(0, 1fr) 100px;
	}

	.vc-tarif-editor-note,
	.vc-tarif-editor-audience {
		grid-column: 1 / -1;
	}
}

/* Montant de la cotisation : le chiffre est l'information, il porte la taille. */
.vc-cotisation-amount {
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.1;
	color: var(--section-color, var(--vc-color-primary));
	margin-bottom: var(--vc-space-2);
}

.vc-cotisation-iban-label {
	font-size: var(--vc-font-size-sm);
	color: var(--vc-color-text-muted);
	margin-bottom: var(--vc-space-2);
}

.vc-cotisation-iban {
	font-family: monospace;
	font-size: 1.15rem;
	font-weight: 600;
	letter-spacing: .05em;
	padding: var(--vc-space-3) var(--vc-space-4);
	background: var(--vc-color-cream-2);
	border: 1px solid var(--vc-color-border);
	border-radius: var(--vc-radius-md);
	margin-bottom: var(--vc-space-3);
}

.vc-btn-copy-iban {
	display: inline-flex;
	align-items: center;
	gap: var(--vc-space-2);
	background: var(--section-color, var(--vc-color-primary));
	color: #fff;
	border: none;
	border-radius: var(--vc-radius-md);
	padding: var(--vc-space-2) var(--vc-space-4);
	font-size: var(--vc-font-size-sm);
	font-weight: 500;
	cursor: pointer;
	transition: opacity .2s;
	margin-bottom: var(--vc-space-4);
}

.vc-btn-copy-iban:hover {
	opacity: .85;
}

.vc-cotisation-note {
	font-size: var(--vc-font-size-sm);
	color: var(--vc-color-text-muted);
	margin: 0;
}

/* Grille des cotisations — le tarif du membre est surligné. */
.vc-cotisation-mine {
	margin: 0 0 var(--vc-space-4);
	font-size: var(--vc-font-size-sm);
	color: var(--vc-color-text-muted);
}

.vc-tarif-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--vc-color-border-soft);
}

.vc-tarif-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--vc-space-4);
	padding: var(--vc-space-3) var(--vc-space-2);
	border-bottom: 1px solid var(--vc-color-border-soft);
}

.vc-tarif-row.is-mine {
	background: color-mix(in srgb, var(--section-color, var(--vc-color-primary)) 8%, transparent);
	border-radius: var(--vc-radius-sm);
}

.vc-tarif-row.is-mine .vc-tarif-name {
	font-weight: 600;
}

.vc-tarif-name em {
	display: block;
	font-style: normal;
	font-size: var(--vc-font-size-xs);
	color: var(--vc-color-text-muted);
}

.vc-tarif-price {
	font-weight: 600;
	white-space: nowrap;
}

/* QR de virement — sous l'IBAN, dans la même carte. */
.vc-cotisation-qr {
	display: flex;
	align-items: center;
	gap: var(--vc-space-5);
	flex-wrap: wrap;
	margin-top: var(--vc-space-5);
	padding-top: var(--vc-space-5);
	border-top: 1px solid var(--vc-color-border-soft);
}

/* Fond blanc et marge : la zone de silence dont le scan a besoin. */
.vc-cotisation-qr-code {
	background: #fff;
	border: 1px solid var(--vc-color-border);
	border-radius: var(--vc-radius-md);
	padding: 10px;
	line-height: 0;
	flex: 0 0 auto;
}

.vc-cotisation-qr-code svg {
	width: 150px;
	height: 150px;
	display: block;
}

.vc-cotisation-qr-text {
	flex: 1 1 200px;
}

.vc-cotisation-qr-text h4 {
	margin: 0 0 var(--vc-space-2);
	font-size: var(--vc-font-size-md);
	font-weight: 600;
}

/* ── Widget i-Golf (onglet Compétitions) ─────────────────── */
/* Le contenu vient de golf_plugin.js : on lui réserve la place (pas de saut
   de page au chargement) et on rhabille ses tableaux aux couleurs du site —
   les classes ca_* et searchcrit sont les siennes. */
/* Le tableau du widget a une largeur qu'on ne contr�le pas : il d�file dans
   son panneau plut�t que d'�largir la page enti�re. */
.vc-igolf-widget {
	overflow-x: auto;
}

.vc-igolf-widget #golf_plugin {
	margin-top: var(--vc-space-4);
	min-height: 420px;
}

.vc-igolf-widget #golf_plugin table {
	width: 100%;
	border: 1px solid var(--section-color, var(--vc-color-primary));
	border-collapse: collapse;
}

.vc-igolf-widget #golf_plugin table tr,
.vc-igolf-widget #golf_plugin table th,
.vc-igolf-widget #golf_plugin table td {
	border: 0;
}

.vc-igolf-widget #golf_plugin table th {
	background: var(--section-color, var(--vc-color-primary));
	color: #fff;
	padding: 10px 16px;
	text-align: left;
}

.vc-igolf-widget #golf_plugin table td {
	padding: 14px 16px;
}

.vc-igolf-widget #golf_plugin table tr:nth-child(odd) {
	background: var(--vc-color-bg-alt);
}

.vc-igolf-widget #golf_plugin table tr:hover {
	background: color-mix(in srgb, var(--section-color, var(--vc-color-primary)) 10%, transparent);
}

.vc-igolf-widget #golf_plugin .ca_name {
	font-weight: 600;
}

.vc-igolf-widget #golf_plugin .ca_golfclub {
	font-size: var(--vc-font-size-xs);
	color: var(--vc-color-text-muted);
}

.vc-igolf-widget #golf_plugin .ca_formule,
.vc-igolf-widget #golf_plugin .ca_player {
	display: none;
}

/* Type verrouillé par la section (`data-comp-type`) : le filtre de types du
   widget n'a plus de raison d'être — le membre est déjà au bon endroit. */
.vc-igolf-widget--locked #golf_plugin .searchcrit {
	display: none;
}

/* ── iGolf placeholder ───────────────────────────────────── */
.vc-igolf-placeholder h3 {
	margin: var(--vc-space-3) 0 var(--vc-space-2);
	font-size: var(--vc-font-size-xl);
}

.vc-igolf-note {
	font-size: var(--vc-font-size-sm);
	opacity: .7;
	margin-top: var(--vc-space-2);
}

/* ── Flash message ───────────────────────────────────────── */
.vc-section-flash {
	position: fixed;
	bottom: var(--vc-space-6);
	left: 50%;
	transform: translateX(-50%);
	background: var(--vc-color-primary);
	color: #fff;
	padding: var(--vc-space-3) var(--vc-space-6);
	border-radius: var(--vc-radius-full);
	font-size: var(--vc-font-size-sm);
	font-weight: 500;
	z-index: 1000;
	animation: vc-flash-in .3s ease, vc-flash-out .3s ease 2.5s forwards;
	pointer-events: none;
}
@keyframes vc-flash-in  { from { opacity:0; transform:translateX(-50%) translateY(20px); } to { opacity:1; transform:translateX(-50%) translateY(0); } }
@keyframes vc-flash-out { from { opacity:1; } to { opacity:0; } }

/* ============================================================
   Actions du membre admin
   Barre d'ajout en tête d'onglet + modale de saisie.
   Rendues uniquement si vcSection.canManage — voir section.js.
   ============================================================ */

.vc-manage-bar {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--vc-color-border, #e5e7eb);
}

/* Barre d'export � visible de tout membre, contrairement � .vc-manage-bar
   (r�serv�e au membre admin) : l�ger espace, pas de s�parateur, pour ne
   pas se confondre avec les actions de gestion. */
.vc-agenda-toolbar {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 12px;
}

.vc-manage-hint {
	/* Un enfant flex refuse par d�faut de r�tr�cir sous la largeur de son
	   texte (min-width: auto) : sur mobile, cette l�gende repoussait toute
	   la barre hors de l'�cran au lieu de passer � la ligne. */
	flex: 1 1 160px;
	min-width: 0;
	font-size: 0.875rem;
	color: var(--vc-color-text-muted, #6b7280);
}

/* ── Modale ─────────────────────────────────────────────────── */
.vc-manage-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.vc-manage-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, .55);
}

.vc-manage-modal-box {
	position: relative;
	width: 100%;
	max-width: 540px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
	animation: vc-manage-in .18s ease-out;
}

@keyframes vc-manage-in {
	from { opacity: 0; transform: translateY(8px) scale(.98); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.vc-manage-modal-box { animation: none; }
}

.vc-manage-modal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 20px;
	border-bottom: 1px solid var(--vc-color-border, #e5e7eb);
}

.vc-manage-modal-head h3 {
	margin: 0;
	font-size: 1.05rem;
}

.vc-manage-modal-close {
	background: none;
	border: none;
	font-size: 1.1rem;
	line-height: 1;
	padding: 4px;
	cursor: pointer;
	color: var(--vc-color-text-muted, #6b7280);
}

.vc-manage-modal-close:hover {
	color: var(--vc-color-text, #111827);
}

/* ── Formulaire ─────────────────────────────────────────────── */
.vc-manage-form {
	padding: 18px 20px 20px;
	display: grid;
	gap: 14px;
}

.vc-manage-field {
	display: grid;
	gap: 5px;
}

.vc-manage-field > label {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--vc-color-text, #111827);
}

/* Le `select` manquait à cette liste : il s'affichait donc au style natif du
   navigateur, plus haut et plus gris que tous les champs qui l'entourent. */
.vc-manage-field input[type="text"],
.vc-manage-field input[type="datetime-local"],
.vc-manage-field input[type="url"],
.vc-manage-field input[type="number"],
.vc-manage-field input[type="file"],
.vc-manage-field select,
.vc-manage-field textarea {
	width: 100%;
	padding: 9px 11px;
	border: 1px solid var(--vc-color-border, #e5e7eb);
	border-radius: 6px;
	font: inherit;
	font-size: 0.9375rem;
	background: #fff;
	color: inherit;
	box-sizing: border-box;
}

.vc-manage-field input:focus,
.vc-manage-field select:focus,
.vc-manage-field textarea:focus {
	outline: none;
	border-color: var(--vc-color-primary, #0a4240);
	box-shadow: 0 0 0 3px rgba(10, 66, 64, .12);
}

.vc-manage-field textarea {
	resize: vertical;
	min-height: 88px;
}

.vc-manage-field--check > label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 500;
	cursor: pointer;
}

.vc-manage-field--check input {
	width: 16px;
	height: 16px;
	margin: 0;
	flex-shrink: 0;
}

.vc-manage-field .vc-manage-hint {
	font-size: 0.8125rem;
	margin: 0;
}

.vc-manage-error {
	margin: 0;
	padding: 9px 12px;
	border-radius: 6px;
	background: #fdf0f0;
	color: #a4262c;
	font-size: 0.875rem;
}

.vc-manage-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 4px;
}

@media (max-width: 600px) {
	.vc-manage-modal {
		padding: 0;
		align-items: flex-end;
	}

	.vc-manage-modal-box {
		max-width: none;
		max-height: 92vh;
		border-radius: 12px 12px 0 0;
	}

	.vc-manage-actions {
		flex-direction: column-reverse;
	}

	.vc-manage-actions .vc-btn {
		width: 100%;
		justify-content: center;
	}
}


/* ============================================================
   Onglet Préférences
   Remplace l'ancienne colonne latérale : adhésion, communications
   et compte iGolf, sur toute la largeur de la page.
   ============================================================ */

/* Des colonnes, pas une grille : les trois cartes ont des hauteurs très
   différentes, et une grille aligne ses rangées sur la plus haute — la carte
   suivante partait tout en bas, laissant un grand vide sous la plus courte.
   En multi-colonnes, chaque colonne s'empile sans trou.

   min(300px, 100%) : sous 340 px de viewport le conteneur descend en dessous
   de 300 px — sans le min(), la colonne garderait ses 300 px et ferait
   déborder toutes les cartes de l'écran. */
.vc-prefs {
	columns: min(300px, 100%);
	column-gap: var(--vc-space-5);
}

.vc-prefs-card {
	background: var(--vc-color-bg-alt);
	border: 1px solid var(--vc-color-border);
	border-radius: var(--vc-radius-lg);
	padding: var(--vc-space-6);
	margin-bottom: var(--vc-space-5);
	/* Une carte ne se coupe jamais entre deux colonnes. */
	break-inside: avoid;
}

.vc-prefs-title {
	margin: 0 0 var(--vc-space-4);
	font-size: var(--vc-font-size-sm);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--vc-color-text-muted);
}

.vc-prefs-subtitle {
	margin: 0 0 var(--vc-space-1);
	font-size: var(--vc-font-size-sm);
	font-weight: 600;
}

.vc-prefs-state {
	margin: 0 0 var(--vc-space-4);
	color: var(--vc-color-text);
}

.vc-prefs-state--ok::before {
	content: '✅ ';
}

.vc-prefs-group {
	padding-top: var(--vc-space-4);
	margin-top: var(--vc-space-4);
	border-top: 1px solid var(--vc-color-border-soft);
}

.vc-prefs-group:first-of-type {
	padding-top: 0;
	margin-top: 0;
	border-top: none;
}

.vc-prefs-toggle {
	display: flex;
	align-items: center;
	gap: var(--vc-space-3);
	padding: var(--vc-space-2) 0;
	cursor: pointer;
}

.vc-prefs-toggle input {
	width: 18px;
	height: 18px;
	margin: 0;
	flex: 0 0 auto;
	accent-color: var(--vc-color-primary);
}

.vc-prefs-hint {
	margin: 0 0 var(--vc-space-3);
	font-size: var(--vc-font-size-xs);
	color: var(--vc-color-text-muted);
}

.vc-prefs-facts {
	margin: 0 0 var(--vc-space-4);
	display: grid;
	gap: var(--vc-space-2);
}

.vc-prefs-facts > div {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--vc-space-3);
	font-size: var(--vc-font-size-sm);
}

.vc-prefs-facts dt {
	color: var(--vc-color-text-muted);
}

.vc-prefs-facts dd {
	margin: 0;
	font-weight: 500;
	text-align: right;
}

.vc-prefs-link {
	margin: var(--vc-space-4) 0 0;
	font-size: var(--vc-font-size-sm);
}

/* Confirmation maison (remplace confirm() natif) */
.vc-manage-modal-box--confirm {
	max-width: 420px;
}

.vc-confirm-text {
	margin: 0 0 var(--vc-space-2);
	font-size: 1rem;
}

.vc-prefs-locked {
	margin: 0 0 var(--vc-space-5);
	padding: var(--vc-space-4);
	background: var(--vc-color-cream-2, #f5f1e8);
	border-radius: var(--vc-radius-md);
	font-size: var(--vc-font-size-sm);
}

/* ── Présentation : visiteur / non-membre d'une section réservée ──────────
   (section-preferences.js › renderPresentationTab)
   1. la porte d'entrée, en tête et bien visible ;
   2. une carte : bannière (couverture ou couleur de la section) et logo en
      médaillon à cheval sur son bord, puis le texte riche de l'admin ;
   3. la cotisation, si elle est ouverte aux non-membres. */
.vc-presentation {
	display: flex;
	flex-direction: column;
	gap: var(--vc-space-6);
	max-width: 820px;
}

/* 1. Accès */
.vc-presentation-access {
	display: flex;
	align-items: center;
	gap: var(--vc-space-4);
	padding: var(--vc-space-5) var(--vc-space-6);
	border-radius: var(--vc-radius-lg);
	background: var(--vc-color-primary);
	color: var(--vc-color-white);
	box-shadow: var(--vc-shadow-md);
}

.vc-presentation-access-icon {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
}

.vc-presentation-access-text {
	flex: 1 1 auto;
	min-width: 0;
}

.vc-presentation-access-text strong {
	display: block;
	color: var(--vc-color-white);
	font-size: var(--vc-font-size-base);
	font-weight: 600;
}

/* Le premier message de la bannière tient lieu de titre. */
.vc-presentation-access-text p:first-child {
	margin-top: 0;
	color: var(--vc-color-white);
	font-size: var(--vc-font-size-base);
	font-weight: 600;
}

/* « Cette section est réservée à ses membres » : en pied de page, discret. */
.vc-presentation-locked {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 0;
	color: var(--vc-color-text-muted);
	font-size: var(--vc-font-size-xs);
}

.vc-presentation-access-text p {
	margin: 2px 0 0;
	/* Le thème colore les paragraphes en foncé : sur ce fond, on force le clair. */
	color: rgba(255, 255, 255, .85);
	font-size: var(--vc-font-size-sm);
}

.vc-presentation-access-btn {
	flex: 0 0 auto;
	padding: 12px 26px;
	border: 0;
	border-radius: var(--vc-radius-full);
	background: var(--vc-color-white);
	color: var(--vc-color-primary);
	font-size: var(--vc-font-size-base);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: transform var(--vc-duration-fast) var(--vc-ease), box-shadow var(--vc-duration-fast) var(--vc-ease);
}

.vc-presentation-access-btn:hover,
.vc-presentation-access-btn:focus-visible {
	color: var(--vc-color-primary);
	box-shadow: 0 0 0 3px rgba(255, 255, 255, .35);
	transform: translateY(-1px);
	outline: none;
}

/* 3. La cotisation prend toute la largeur de la page (560 px dans son onglet). */
.vc-presentation .vc-cotisation-wrap {
	max-width: none;
}

/* 2. Carte : bannière + logo + texte */
.vc-presentation-card {
	overflow: hidden;
	border: 1px solid var(--vc-color-border-soft);
	border-radius: var(--vc-radius-lg);
	background: var(--vc-color-white);
}

.vc-presentation-banner {
	position: relative;
	aspect-ratio: 16 / 5;
	min-height: 140px;
	background: var(--vc-color-bg-alt);
}

.vc-presentation-banner img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Sans couverture : un aplat dégradé de la couleur de la section, moins haut. */
.vc-presentation-banner.is-plain {
	aspect-ratio: auto;
	min-height: 96px;
	background: linear-gradient(135deg,
		var(--vc-section-color, var(--vc-color-primary)),
		color-mix(in srgb, var(--vc-section-color, var(--vc-color-primary)) 55%, var(--vc-color-white)));
}

.vc-presentation-logo {
	position: absolute;
	left: var(--vc-space-6);
	bottom: -44px;
	display: grid;
	place-items: center;
	width: 96px;
	height: 96px;
	padding: 10px;
	border: 4px solid var(--vc-color-white);
	border-radius: 50%;
	background: var(--vc-color-white);
	box-shadow: var(--vc-shadow-md);
}

.vc-presentation-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.vc-presentation-body {
	padding: var(--vc-space-6);
}

/* Le médaillon déborde de la bannière : le texte lui laisse la place. */
.vc-presentation-card.has-logo .vc-presentation-body {
	padding-top: calc(44px + var(--vc-space-5));
}

/* Texte riche de l'éditeur (titres, listes, images, citations). */
.vc-rich-text {
	color: var(--vc-color-text);
	font-size: var(--vc-font-size-base);
	line-height: var(--vc-line-height-normal);
}

.vc-rich-text > :first-child { margin-top: 0; }
.vc-rich-text > :last-child { margin-bottom: 0; }

.vc-rich-text h2,
.vc-rich-text h3,
.vc-rich-text h4 {
	margin: 1.4em 0 .5em;
	font-family: var(--vc-font-heading);
	letter-spacing: var(--vc-tracking-tight);
	line-height: var(--vc-line-height-snug);
}

.vc-rich-text h2 { font-size: var(--vc-font-size-xl); }
.vc-rich-text h3 { font-size: var(--vc-font-size-lg); }

.vc-rich-text p,
.vc-rich-text ul,
.vc-rich-text ol {
	margin: 0 0 1em;
}

.vc-rich-text ul,
.vc-rich-text ol {
	padding-left: 1.3em;
}

.vc-rich-text a {
	color: var(--vc-color-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.vc-rich-text img {
	max-width: 100%;
	height: auto;
	border-radius: var(--vc-radius-md);
}

.vc-rich-text .alignleft  { float: left; margin: .3em 1.2em .8em 0; max-width: 45%; }
.vc-rich-text .alignright { float: right; margin: .3em 0 .8em 1.2em; max-width: 45%; }
.vc-rich-text .aligncenter { display: block; margin: 1em auto; }

.vc-rich-text blockquote {
	margin: 1.2em 0;
	padding: var(--vc-space-3) var(--vc-space-5);
	border-left: 3px solid var(--vc-color-primary);
	background: var(--vc-color-bg-alt);
	font-style: italic;
}

.vc-rich-text blockquote > :last-child {
	margin-bottom: 0;
}

.vc-rich-text hr {
	margin: 1.6em 0;
	border: 0;
	border-top: 1px solid var(--vc-color-border-soft);
}

.vc-rich-text::after {
	content: "";
	display: table;
	clear: both;
}

@media (max-width: 600px) {
	.vc-presentation-access {
		flex-wrap: wrap;
		padding: var(--vc-space-4);
	}

	.vc-presentation-access-btn {
		width: 100%;
		text-align: center;
	}

	.vc-presentation-logo {
		left: 50%;
		width: 80px;
		height: 80px;
		bottom: -36px;
		transform: translateX(-50%);
	}

	.vc-presentation-card.has-logo .vc-presentation-body {
		padding-top: calc(36px + var(--vc-space-4));
	}

	.vc-presentation-body {
		padding: var(--vc-space-4);
	}

	.vc-rich-text .alignleft,
	.vc-rich-text .alignright {
		float: none;
		max-width: 100%;
		margin: 1em 0;
	}
}

@media (max-width: 600px) {
	.vc-prefs {
		column-gap: var(--vc-space-4);
	}

	.vc-prefs-card {
		padding: var(--vc-space-5);
		margin-bottom: var(--vc-space-4);
	}

	/* Cible tactile : ~44 px de haut par ligne, la norme sur mobile. */
	.vc-prefs-toggle {
		padding: var(--vc-space-3) 0;
	}

	/* Adhérer, quitter, resynchroniser : pleine largeur, comme les actions
	   des modales — le pouce ne vise plus un petit bouton dans un coin. */
	.vc-prefs-card .vc-btn {
		width: 100%;
	}
}

/* ============================================================
   Galerie — collections, mots-clés, actions
   ============================================================ */

.vc-gallery-filters {
	display: flex;
	align-items: center;
	gap: var(--vc-space-4);
	flex-wrap: wrap;
	min-width: 0;
	margin-bottom: var(--vc-space-5);
}

.vc-gallery-filter-field {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--vc-space-2);
	min-width: 0;
	font-size: var(--vc-font-size-sm);
	color: var(--vc-color-text-muted);
}

.vc-gallery-filter-field select {
	min-width: 0;
	max-width: 100%;
	padding: 6px 10px;
	border: 1px solid var(--vc-color-border);
	border-radius: var(--vc-radius-sm);
	font: inherit;
	font-size: var(--vc-font-size-sm);
	background: #fff;
}

.vc-gallery-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.vc-gallery-tag {
	padding: 4px 10px;
	border: 1px solid var(--vc-color-border);
	border-radius: var(--vc-radius-full, 999px);
	background: transparent;
	font-size: var(--vc-font-size-xs);
	color: var(--vc-color-text-muted);
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
}

.vc-gallery-tag:hover {
	border-color: var(--vc-color-primary);
	color: var(--vc-color-primary);
}

.vc-gallery-tag.is-active {
	background: var(--vc-color-primary);
	border-color: var(--vc-color-primary);
	color: #fff;
}

.vc-gallery-item-tags {
	display: block;
	margin-top: 2px;
	font-size: var(--vc-font-size-xs);
	opacity: .8;
}

/* Actions posées sur une vignette ou une carte */
.vc-item-actions {
	position: absolute;
	top: 8px;
	right: 8px;
	display: flex;
	gap: 4px;
	opacity: 0;
	transition: opacity .15s;
}

/* Sur un �cran tactile il n'y a pas de survol : des actions qui n'apparaissent
   qu'au survol y sont tout simplement inatteignables. Un gestionnaire ne
   pouvait donc rien modifier depuis l'application mobile � ni un bloc, ni une
   photo, ni un article, puisque les trois partagent ce composant. */
/* La liste des boutons : en ligne à la souris. Le bouton « ⋯ » et les
   libellés ne servent qu'au doigt (feuille d'actions, section-ui.js). */
.vc-item-actions-list {
	display: flex;
	gap: 4px;
}

.vc-item-actions-toggle,
.vc-item-action-label {
	display: none;
}

@media (hover: none) {
	.vc-item-actions {
		opacity: 1;
	}

	/* Au doigt : un seul bouton « ⋯ » à la place des six pastilles. */
	.vc-item-actions > .vc-item-actions-list {
		display: none;
	}

	.vc-item-actions-toggle {
		display: grid;
		place-items: center;
		width: 34px;
		height: 34px;
		padding: 0;
		border: 1px solid var(--vc-color-border-soft);
		border-radius: 50%;
		background: rgba(255, 255, 255, .94);
		box-shadow: 0 1px 4px rgba(0, 0, 0, .16);
		color: var(--vc-color-text);
		cursor: pointer;
	}

	.vc-item-actions-toggle:active {
		transform: scale(.93);
	}

	/* La ligne d'actualité laisse la place du bouton : il ne mord plus sur le titre. */
	.vc-article-row:has(> .vc-item-actions) {
		padding-right: 52px;
	}
}

/* Feuille d'actions : fixée en bas d'écran, hors de la carte qui rogne. */
.vc-actions-sheet-backdrop {
	position: fixed;
	inset: 0;
	/* Au-dessus de tout, bulle de discussion DZ IA comprise
	   (--dz-chat-z: 2147483000) : la feuille est modale et brève. */
	z-index: 2147483100;
	background: rgba(15, 20, 18, .38);
	animation: vc-fade-in var(--vc-duration-fast) var(--vc-ease) both;
}

.vc-actions-sheet {
	position: fixed;
	left: 8px;
	right: 8px;
	bottom: calc(8px + env(safe-area-inset-bottom));
	z-index: 2147483101;
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-width: 520px;
	margin: 0 auto;
	padding: 8px;
	border-radius: 18px;
	background: var(--vc-color-white);
	box-shadow: var(--vc-shadow-lg);
	animation: vc-sheet-up var(--vc-duration-base) var(--vc-ease-out) both;
}

@keyframes vc-sheet-up {
	from { transform: translateY(24px); opacity: 0; }
	to   { transform: none; opacity: 1; }
}

@keyframes vc-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.vc-actions-sheet .vc-item-actions-list {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.vc-actions-sheet .vc-item-action {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	height: 50px;
	padding: 0 16px;
	border-radius: 12px;
	background: transparent;
	box-shadow: none;
	color: var(--vc-color-text);
	font: inherit;
	font-size: var(--vc-font-size-base);
	text-align: left;
}

.vc-actions-sheet .vc-item-action + .vc-item-action {
	border-top: 1px solid var(--vc-color-border-soft);
	border-radius: 0;
}

.vc-actions-sheet .vc-item-action-label {
	display: inline;
}

.vc-actions-sheet .vc-item-action--danger {
	color: var(--vc-color-accent);
}

.vc-actions-sheet .vc-item-action.is-active {
	color: var(--vc-color-primary);
	font-weight: 600;
}

.vc-actions-sheet-cancel {
	height: 50px;
	border: 0;
	border-radius: 12px;
	background: var(--vc-color-bg-alt);
	color: var(--vc-color-text);
	font: inherit;
	font-size: var(--vc-font-size-base);
	font-weight: 600;
	cursor: pointer;
}

.vc-gallery-item,
.vc-article-card {
	position: relative;
}

.vc-gallery-item:hover .vc-item-actions,
.vc-gallery-item:focus-within .vc-item-actions,
.vc-article-card:hover .vc-item-actions,
.vc-article-card:focus-within .vc-item-actions {
	opacity: 1;
}

.vc-item-action {
	width: 30px;
	height: 30px;
	display: grid;
	place-items: center;
	border: none;
	border-radius: var(--vc-radius-sm);
	background: rgba(255, 255, 255, .94);
	box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
}

.vc-item-action:hover {
	background: #fff;
}

.vc-item-action--danger:hover {
	background: #fdf0f0;
}

/* Ces pastilles sont les boutons les plus sollicit�s au doigt : sans �tat
   d'appui, elles ne r�pondent plus une fois le voile du navigateur retir�
   (voir base.css). */
.vc-item-action:active {
	background: var(--vc-color-sand);
	transform: scale(.93);
}

.vc-item-action--danger:active {
	background: color-mix(in srgb, var(--vc-color-accent) 16%, #fff);
}

.vc-article-card--draft {
	opacity: .72;
	outline: 1px dashed var(--vc-color-border);
}

/* Éditeur d'image (cropper.js) */
.vc-cropper {
	margin-top: var(--vc-space-3);
}

.vc-cropper-canvas {
	max-height: 340px;
	overflow: hidden;
	background: #1f2937;
	border-radius: var(--vc-radius-md);
}

.vc-cropper-canvas img {
	display: block;
	max-width: 100%;
}

.vc-cropper-tools {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: var(--vc-space-3);
}

.vc-cropper-tools button,
.vc-cropper-tools select {
	padding: 6px 10px;
	border: 1px solid var(--vc-color-border);
	border-radius: var(--vc-radius-sm);
	background: #fff;
	font: inherit;
	font-size: var(--vc-font-size-sm);
	cursor: pointer;
}

.vc-cropper-tools button:hover {
	border-color: var(--vc-color-primary);
	color: var(--vc-color-primary);
}

/* Le recadreur en fenêtre : posé au-dessus du formulaire qui l'a ouvert. */
.vc-cropper-popup .vc-cropper {
	margin: 0;
	padding: var(--vc-space-4) var(--vc-space-5) 0;
}

.vc-cropper-popup .vc-cropper-canvas {
	max-height: min(60vh, 520px);
}

.vc-cropper-popup .vc-manage-actions {
	padding: var(--vc-space-3) var(--vc-space-5) var(--vc-space-5);
	margin-top: 0;
}

/* Aperçu de l'image choisie, sous le champ fichier — la retouche se rouvre
   d'un clic, sans repasser par le sélecteur de fichier. */
.vc-image-preview {
	display: flex;
	align-items: center;
	gap: var(--vc-space-4);
	margin-top: var(--vc-space-2);
}

/* `display: flex` l'emportait sur l'attribut `hidden` : l'aperçu vide et son
   bouton « Recadrer » restaient affichés pour un PDF. */
.vc-image-preview[hidden] {
	display: none;
}

/* ── Champ fichier d'un document : zone de dépôt, puis carte du fichier ── */
.vc-dropzone-input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.vc-dropzone {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: var(--vc-space-6) var(--vc-space-4);
	border: 2px dashed var(--vc-color-border);
	border-radius: var(--vc-radius-lg);
	background: var(--vc-color-bg-alt);
	color: var(--vc-color-text-muted);
	font-size: var(--vc-font-size-sm);
	text-align: center;
	cursor: pointer;
	transition: border-color var(--vc-duration-fast) var(--vc-ease), background var(--vc-duration-fast) var(--vc-ease);
}

.vc-dropzone[hidden] {
	display: none;
}

.vc-dropzone:hover,
.vc-dropzone.is-over,
.vc-dropzone-input:focus-visible + .vc-dropzone {
	border-color: var(--vc-color-primary);
	background: color-mix(in srgb, var(--vc-color-primary) 6%, var(--vc-color-white));
}

.vc-dropzone-icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-bottom: 4px;
	border-radius: 50%;
	background: var(--vc-color-white);
	color: var(--vc-color-primary);
	box-shadow: var(--vc-shadow-md);
}

.vc-dropzone strong {
	color: var(--vc-color-text);
	font-size: var(--vc-font-size-base);
	font-weight: 600;
}

.vc-dropzone u {
	color: var(--vc-color-primary);
	text-underline-offset: 2px;
}

.vc-dropzone em {
	margin-top: 4px;
	font-size: var(--vc-font-size-xs);
	font-style: normal;
}

.vc-file-card {
	display: flex;
	align-items: center;
	gap: var(--vc-space-3);
	padding: var(--vc-space-3);
	border: 1px solid var(--vc-color-border);
	border-radius: var(--vc-radius-lg);
	background: var(--vc-color-white);
}

.vc-file-card[hidden] {
	display: none;
}

.vc-file-card-thumb,
.vc-file-card-badge {
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	border-radius: var(--vc-radius-md);
}

.vc-file-card-thumb {
	object-fit: cover;
	border: 1px solid var(--vc-color-border-soft);
}

/* Pastille de type : la couleur que chacun associe à son logiciel. */
.vc-file-card-badge {
	display: grid;
	place-items: center;
	background: var(--vc-color-bg-alt);
	color: var(--vc-color-text-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
}

.vc-file-card-badge--pdf   { background: #fdecea; color: #b3261e; }
.vc-file-card-badge--word  { background: #e8f0fe; color: #1a56c4; }
.vc-file-card-badge--excel { background: #e6f4ea; color: #1e7b34; }

.vc-file-card-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
}

.vc-file-card-body strong {
	overflow: hidden;
	font-size: var(--vc-font-size-sm);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vc-file-card-body em {
	white-space: nowrap;
	color: var(--vc-color-text-muted);
	font-size: var(--vc-font-size-xs);
	font-style: normal;
}

.vc-file-card-actions {
	display: flex;
	flex: 0 0 auto;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: var(--vc-space-2);
}

@media (max-width: 520px) {
	.vc-file-card {
		flex-wrap: wrap;
	}

	.vc-file-card-actions {
		width: 100%;
		justify-content: flex-start;
	}
}

/* ── Import d'un dossier de documents : revue avant envoi ────────────────
   Une ligne par fichier — case, nom et dossier de destination, état. Les
   doublons sont grisés (décochés d'office), un échec ressort en rouge. */
.vc-import-review {
	display: grid;
	gap: var(--vc-space-2);
}

.vc-import-summary {
	margin: 0;
	font-size: var(--vc-font-size-sm);
}

.vc-import-toggles {
	display: flex;
	gap: var(--vc-space-2);
	margin: 0;
}

.vc-import-table-wrap {
	max-height: 50vh;
	overflow: auto;
	border: 1px solid var(--vc-color-border);
	border-radius: var(--vc-radius-md);
}

.vc-import-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--vc-font-size-sm);
}

.vc-import-table td {
	padding: var(--vc-space-2);
	border-bottom: 1px solid var(--vc-color-border-soft);
	vertical-align: top;
}

.vc-import-table td:first-child {
	width: 28px;
}

.vc-import-file strong,
.vc-import-file em {
	display: block;
	overflow-wrap: anywhere;
}

.vc-import-file em {
	color: var(--vc-color-text-muted);
	font-size: var(--vc-font-size-xs);
	font-style: normal;
}

.vc-import-status {
	color: var(--vc-color-text-muted);
	font-size: var(--vc-font-size-xs);
}

.vc-import-row--new .vc-import-status,
.vc-import-row--done .vc-import-status {
	color: var(--vc-color-primary);
	font-weight: 600;
}

.vc-import-row--same_name .vc-import-status {
	color: var(--vc-color-accent);
	font-weight: 600;
}

.vc-import-row--identical,
.vc-import-row--batch,
.vc-import-row--done {
	opacity: .6;
}

.vc-import-row--failed .vc-import-status {
	color: var(--vc-color-danger);
	font-weight: 600;
}

.vc-import-ignored {
	font-size: var(--vc-font-size-xs);
	color: var(--vc-color-text-muted);
}

.vc-import-ignored ul {
	max-height: 20vh;
	margin: var(--vc-space-2) 0 0;
	overflow: auto;
}

.vc-import-progress {
	height: 8px;
	overflow: hidden;
	background: var(--vc-color-bg-alt);
	border-radius: 4px;
}

.vc-import-progress[hidden] {
	display: none;
}

.vc-import-progress-bar {
	width: 0;
	height: 100%;
	background: var(--vc-color-primary);
	transition: width .3s ease;
}

.vc-image-preview img {
	width: 84px;
	height: 84px;
	object-fit: cover;
	border-radius: var(--vc-radius-md);
	border: 1px solid var(--vc-color-border);
}

.vc-image-preview-meta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--vc-space-2);
}

.vc-image-preview-meta .vc-cropper-weight {
	margin: 0;
}

/* ============================================================
   Documents — dossiers et visionneuse
   ============================================================ */

.vc-folder-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: var(--vc-space-5);
}

.vc-folder-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 12px;
	border: 1px solid var(--vc-color-border);
	border-radius: var(--vc-radius-md);
	background: #fff;
	font: inherit;
	font-size: var(--vc-font-size-sm);
	cursor: pointer;
}

.vc-folder-chip em {
	font-style: normal;
	font-size: var(--vc-font-size-xs);
	color: var(--vc-color-text-muted);
}

.vc-folder-chip:hover {
	border-color: var(--vc-color-primary);
}

.vc-folder-chip.is-active {
	background: var(--vc-color-primary);
	border-color: var(--vc-color-primary);
	color: #fff;
}

.vc-folder-chip.is-active em {
	color: rgba(255, 255, 255, .8);
}

.vc-documents-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.vc-document-row {
	display: flex;
	align-items: center;
	gap: var(--vc-space-4);
	padding: 14px 16px;
	background: var(--vc-color-bg-alt);
	border: 1px solid var(--vc-color-border);
	border-radius: var(--vc-radius-md);
}

.vc-document-icon {
	font-size: 22px;
	flex: 0 0 auto;
}

.vc-document-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1 1 auto;
}

.vc-document-title {
	font-weight: 500;
	overflow-wrap: anywhere;
}

.vc-document-meta {
	font-size: var(--vc-font-size-xs);
	color: var(--vc-color-text-muted);
	display: flex;
	gap: 10px;
}

.vc-document-actions {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	/* Toutes les actions alignées sur la droite, quelle que soit la longueur du
	   titre : une colonne d'icônes se balaye du regard, des boutons qui flottent
	   au gré du texte se cherchent ligne par ligne. */
	margin-left: auto;
}

@media (max-width: 600px) {
	/* Les icônes tenant sur une seule ligne, la rangée n'a plus besoin de passer
	   à la ligne : le titre garde sa place et les actions restent à droite. */
	.vc-document-actions {
		gap: 2px;
	}
}

/* Visionneuse */
.vc-manage-modal-box--lg {
	max-width: 960px;
}

.vc-viewer .vc-manage-modal-box {
	display: flex;
	flex-direction: column;
	height: min(88vh, 900px);
}

.vc-viewer-head-actions {
	display: flex;
	gap: 8px;
	margin-left: auto;
	margin-right: 10px;
}

.vc-viewer-body {
	flex: 1 1 auto;
	overflow: auto;
	padding: var(--vc-space-5);
}

.vc-viewer-loading {
	color: var(--vc-color-text-muted);
	text-align: center;
	padding: var(--vc-space-8) 0;
}

.vc-viewer-frame {
	width: 100%;
	height: 100%;
	min-height: 60vh;
	border: none;
}

.vc-viewer-image {
	display: block;
	max-width: 100%;
	margin: 0 auto;
}

.vc-viewer-word {
	max-width: 46rem;
	margin: 0 auto;
	line-height: 1.65;
}

.vc-viewer-word img {
	max-width: 100%;
	height: auto;
}

.vc-viewer-word table {
	width: 100%;
	border-collapse: collapse;
	margin: var(--vc-space-4) 0;
}

.vc-viewer-word td,
.vc-viewer-word th {
	border: 1px solid var(--vc-color-border);
	padding: 6px 8px;
}

.vc-viewer-sheets {
	display: flex;
	gap: 4px;
	margin-bottom: var(--vc-space-4);
	flex-wrap: wrap;
}

.vc-viewer-sheets button {
	padding: 5px 12px;
	border: 1px solid var(--vc-color-border);
	border-bottom: none;
	border-radius: var(--vc-radius-sm) var(--vc-radius-sm) 0 0;
	background: var(--vc-color-bg-alt);
	font: inherit;
	font-size: var(--vc-font-size-sm);
	cursor: pointer;
}

.vc-viewer-sheets button.is-active {
	background: #fff;
	font-weight: 600;
}

.vc-viewer-sheet {
	overflow: auto;
}

.vc-viewer-sheet table {
	border-collapse: collapse;
	font-size: var(--vc-font-size-sm);
	background: #fff;
}

.vc-viewer-sheet td {
	border: 1px solid var(--vc-color-border);
	padding: 5px 9px;
	min-width: 80px;
	white-space: nowrap;
}

.vc-viewer-sheet td:focus {
	outline: 2px solid var(--vc-color-primary);
	outline-offset: -2px;
	background: #fffbe6;
}

.vc-viewer-note {
	margin: var(--vc-space-4) 0 0;
	padding: 10px 12px;
	background: var(--vc-color-bg-alt);
	border-radius: var(--vc-radius-sm);
	font-size: var(--vc-font-size-xs);
	color: var(--vc-color-text-muted);
}

/* ============================================================
   Agenda — calendrier du portail
   Même composant que l'administration, dans la langue du membre.
   ============================================================ */

.vc-section-calendar {
	--fc-border-color: var(--vc-color-border);
	--fc-today-bg-color: color-mix(in srgb, var(--vc-color-primary) 8%, #fff);
	--fc-page-bg-color: #fff;
	--fc-neutral-bg-color: var(--vc-color-bg-alt, #f5f1e8);
	min-height: 480px;
	padding: var(--vc-space-5, 20px);
	background: #fff;
	border: 1px solid var(--vc-color-border-soft, var(--vc-color-border));
	border-radius: var(--vc-radius-lg, 14px);
	box-shadow: var(--vc-shadow-card, 0 2px 10px rgba(20,20,15,.06));
	font-size: var(--vc-font-size-sm);
}

.vc-section-calendar .fc-toolbar-title {
	font-family: var(--vc-font-heading, inherit);
	font-size: 1.15rem;
	letter-spacing: var(--vc-tracking-tight, -0.02em);
}

.vc-section-calendar .fc-button {
	background: #fff;
	border-color: var(--vc-color-border);
	color: var(--vc-color-text);
	font-size: var(--vc-font-size-xs);
	text-transform: none;
	box-shadow: none;
}

.vc-section-calendar .fc-button:hover {
	background: var(--vc-color-bg-alt);
	border-color: var(--vc-color-primary);
}

.vc-section-calendar .fc-button-primary:not(:disabled).fc-button-active,
.vc-section-calendar .fc-button-primary:not(:disabled):active {
	background: var(--vc-color-primary);
	border-color: var(--vc-color-primary);
	color: #fff;
}

.vc-section-calendar .fc-event {
	cursor: pointer;
	border: none;
	border-radius: 4px;
	padding: 1px 4px;
}

.vc-section-calendar .fc-daygrid-day-number {
	color: var(--vc-color-text-muted);
}

.vc-section-calendar .fc-col-header-cell-cushion {
	color: var(--vc-color-text-muted);
	font-weight: 600;
	text-transform: uppercase;
	font-size: var(--vc-font-size-xs);
	letter-spacing: 0.04em;
}

/* La grille FullCalendar a une largeur de lecture minimale (colonnes de
   jour, texte des �v�nements) qu'elle ne c�de pas � comme un tableau, elle
   d�file plut�t que d'�craser son contenu ou de casser la mise en page. */
@media (max-width: 600px) {
	/* height:'auto' (section-agenda.js) place FullCalendar en mode o� LUI ne
	   g�re aucun d�filement interne : son .fc-scroller garde volontairement
	   overflow: visible en ligne, quoi qu'on tente sur .fc-view-harness ou
	   .fc-scrollgrid. La seule fronti�re fiable est donc la n�tre, �
	   l'ext�rieur de tout ce que FullCalendar g�re lui-m�me : ce conteneur
	   d�file en bloc plut�t que de pousser toute la page hors de l'�cran. */
	.vc-section-calendar {
		padding: var(--vc-space-4, 16px) var(--vc-space-3, 12px);
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Trois blocs (nav, titre, bascule de vue) pos�s c�te � c�te par d�faut �
	   sur mobile ils se disputaient la m�me ligne et se chevauchaient
	   (titre coup� en deux, boutons qui se recouvrent). Chacun devient sa
	   propre rang�e pleine largeur, le titre remont� en premier : c'est ce
	   qu'on veut voir en priorit� en ouvrant l'agenda. */
	.vc-section-calendar .fc-toolbar {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	.vc-section-calendar .fc-toolbar-chunk {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
	}

	/* Le titre est le 2? bloc du DOM (nav, titre, vue) � remont� visuellement
	   en t�te sans toucher au balisage que g�n�re FullCalendar. */
	.vc-section-calendar .fc-toolbar-chunk:nth-child(2) {
		order: -1;
	}

	.vc-section-calendar .fc-toolbar-title {
		font-size: 1.05rem;
		white-space: nowrap;
	}

	/* Mois / Semaine / Liste : un cran plus compact pour tenir sur la m�me
	   ligne, centr�e comme les deux autres � un flex: 1 1 0 forcerait les
	   trois boutons � la largeur du plus long libell� et prendrait plus de
	   place qu'une taille naturelle. */
	.vc-section-calendar .fc-toolbar-chunk:last-child .fc-button {
		padding-left: 6px;
		padding-right: 6px;
		font-size: 0.7rem;
	}
}

/* Fiche d'un rendez-vous en lecture seule */
.vc-event-when,
.vc-event-where {
	margin: 0 0 var(--vc-space-2);
	color: var(--vc-color-text-muted);
	font-size: var(--vc-font-size-sm);
}

/* Le bouton de suppression se démarque à gauche des actions de la modale */
.vc-manage-delete {
	margin-right: auto;
	color: #a4262c;
}

.vc-manage-delete:hover {
	background: #fdf0f0;
	border-color: #a4262c;
}

/* ============================================================
   Réordonnancement à la souris
   ============================================================ */

.vc-sortable {
	cursor: grab;
}

.vc-sortable--dragging {
	opacity: .45;
	cursor: grabbing;
}

.vc-sortable--over {
	outline: 2px dashed var(--vc-color-primary);
	outline-offset: 2px;
}

/* Aperçu de la couverture d'une actualité */
.vc-cover-preview {
	display: flex;
	align-items: center;
	gap: var(--vc-space-3);
	margin-top: var(--vc-space-3);
}

.vc-cover-preview img {
	width: 120px;
	height: 74px;
	object-fit: cover;
	border-radius: var(--vc-radius-sm);
	border: 1px solid var(--vc-color-border);
}

/* Le bouton de renommage se glisse à la suite des filtres */
.vc-gallery-filters .vc-item-action,
.vc-folder-bar .vc-item-action {
	position: static;
	opacity: 1;
	box-shadow: none;
	border: 1px solid var(--vc-color-border);
	background: #fff;
}

/* ============================================================
   Agenda — menu contextuel (portail)
   Posé sur <body> : l'overflow des cellules FullCalendar le rognerait.
   ============================================================ */

.vc-cal-menu {
	position: absolute;
	z-index: 9999;
	min-width: 240px;
	background: #fff;
	border: 1px solid var(--vc-color-border);
	border-radius: var(--vc-radius-md);
	box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
	overflow: hidden;
	opacity: 0;
	transform: translateY(4px) scale(.97);
	transition: opacity .15s, transform .15s;
}

.vc-cal-menu--visible {
	opacity: 1;
	transform: none;
}

.vc-cal-menu-header {
	display: flex;
	align-items: center;
	gap: var(--vc-space-2);
	padding: var(--vc-space-3) var(--vc-space-4);
	background: var(--vc-color-primary);
	color: var(--vc-on-dark, #fff);
	font-size: var(--vc-font-size-sm);
	font-weight: 600;
}

.vc-cal-menu-header span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vc-cal-menu-close {
	margin-left: auto;
	background: none;
	border: none;
	color: rgba(255, 255, 255, .75);
	font-size: 1.1rem;
	line-height: 1;
	padding: 0 2px;
	cursor: pointer;
}

.vc-cal-menu-close:hover {
	color: #fff;
}

.vc-cal-menu-item {
	display: flex;
	align-items: center;
	gap: var(--vc-space-3);
	width: 100%;
	padding: var(--vc-space-3) var(--vc-space-4);
	border: none;
	border-top: 1px solid var(--vc-color-border-soft);
	background: none;
	font: inherit;
	font-size: var(--vc-font-size-sm);
	text-align: left;
	cursor: pointer;
}

.vc-cal-menu-item:first-of-type {
	border-top: none;
}

.vc-cal-menu-item:hover,
.vc-cal-menu-item:focus {
	background: var(--vc-color-bg-alt);
	outline: none;
}

.vc-cal-menu-item--danger {
	color: #a4262c;
}

.vc-cal-menu-item--danger:hover,
.vc-cal-menu-item--danger:focus {
	background: #fdf0f0;
}

/* ============================================================
   Onglet Newsletter
   ============================================================ */

.vc-newsletter-golf-recipients {
	display: flex;
	align-items: baseline;
	gap: var(--vc-space-3);
	padding: var(--vc-space-4) var(--vc-space-5);
	background: var(--vc-color-bg-alt);
	border-radius: var(--vc-radius-md);
	margin-bottom: var(--vc-space-3);
}

.vc-newsletter-golf-count {
	font-size: 1.75rem;
	font-weight: 600;
	color: var(--vc-color-primary);
	line-height: 1;
}

.vc-newsletter-golf-form {
	padding: 0;
}

.vc-newsletter-golf-progress {
	margin-top: var(--vc-space-4);
}

.vc-newsletter-golf-bar {
	height: 8px;
	background: var(--vc-color-bg-alt);
	border-radius: 999px;
	overflow: hidden;
}

.vc-newsletter-golf-bar span {
	display: block;
	height: 100%;
	width: 0;
	background: var(--vc-color-primary);
	transition: width .25s ease;
}

.vc-newsletter-golf-history {
	margin-top: var(--vc-space-8);
	padding-top: var(--vc-space-5);
	border-top: 1px solid var(--vc-color-border-soft);
}

.vc-newsletter-golf-history h3 {
	margin: 0 0 var(--vc-space-3);
	font-size: var(--vc-font-size-sm);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--vc-color-text-muted);
}

.vc-newsletter-golf-history ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--vc-space-3);
}

.vc-newsletter-golf-history li {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.vc-newsletter-golf-history-subject {
	font-weight: 500;
}

.vc-newsletter-golf-history-meta {
	font-size: var(--vc-font-size-xs);
	color: var(--vc-color-text-muted);
}

/* ============================================================
   Choix de nature — cartes plutôt qu'une liste déroulante
   ============================================================ */

.vc-manage-field--choice {
	border: none;
	margin: 0;
	padding: 0;
}

.vc-manage-field--choice legend {
	padding: 0;
	margin-bottom: var(--vc-space-2);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--vc-color-text, #111827);
}

.vc-choice {
	display: grid;
	gap: 8px;
}

.vc-choice-option {
	display: block;
	cursor: pointer;
}

.vc-choice-option input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.vc-choice-body {
	display: flex;
	align-items: flex-start;
	gap: var(--vc-space-3);
	padding: 12px 14px;
	border: 1px solid var(--vc-color-border, #e5e7eb);
	border-radius: var(--vc-radius-md);
	background: #fff;
	transition: border-color .15s, background .15s, box-shadow .15s;
}

.vc-choice-option:hover .vc-choice-body {
	border-color: var(--vc-color-primary, #0a4240);
}

.vc-choice-option input:checked + .vc-choice-body {
	border-color: var(--vc-color-primary, #0a4240);
	background: var(--vc-color-bg-alt, #f7f7f5);
	box-shadow: inset 0 0 0 1px var(--vc-color-primary, #0a4240);
}

.vc-choice-option input:focus-visible + .vc-choice-body {
	outline: 2px solid var(--vc-color-primary, #0a4240);
	outline-offset: 2px;
}

.vc-choice-icon {
	font-size: 1.25rem;
	line-height: 1.2;
	flex: 0 0 auto;
}

.vc-choice-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.vc-choice-text strong {
	font-weight: 600;
	font-size: 0.9375rem;
}

.vc-choice-text em {
	font-style: normal;
	font-size: 0.8125rem;
	color: var(--vc-color-text-muted, #6b7280);
}

/* Champ masqué : l'attribut hidden ne suffit pas face à display:grid */
.vc-manage-field--hidden {
	display: none !important;
}

/* Éditeur de texte brut dans la visionneuse */
.vc-viewer-text {
	width: 100%;
	min-height: 55vh;
	padding: var(--vc-space-4);
	border: 1px solid var(--vc-color-border);
	border-radius: var(--vc-radius-sm);
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.875rem;
	line-height: 1.6;
	resize: vertical;
}

/* Éditeur de note Markdown (TUI Editor) */
.vc-note-editor {
	height: 100%;
	min-height: 55vh;
}

.vc-note-editor .toastui-editor-defaultUI {
	border-radius: var(--vc-radius-sm);
}

/* ─── Galerie : dossiers, mise en avant, pagination ──────────────────────── */

.vc-gallery-heading {
	font-size: .8rem;
	letter-spacing: .08em;
	margin: 2rem 0 .75rem;
	text-transform: uppercase;
	color: #5b6156;
}

.vc-gallery-heading:first-child {
	margin-top: 0;
}

/* Les dossiers sont plus larges que les vignettes : ce sont des destinations,
   pas des images. La différence de gabarit se lit avant le libellé. */
.vc-folder-grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat( auto-fill, minmax( 200px, 1fr ) );
}

/* ── Documents : espaces et fil d'Ariane ─────────────────────────────────
   Deux espaces (section / comité) se choisissent par pastilles ; dans un
   espace, le fil d'Ariane remonte l'arborescence comme un explorateur. */
.vc-doc-spaces {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: var(--vc-space-4);
}

.vc-doc-spaces .vc-folder-chip.is-active.vc-doc-space--committee {
	background: var(--vc-color-accent, #8a6d1f);
	border-color: var(--vc-color-accent, #8a6d1f);
}

.vc-doc-space-hint {
	font-size: var(--vc-font-size-xs);
	color: var(--vc-color-text-muted);
}

.vc-folder-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	min-width: 0;
	max-width: 100%;
	margin-bottom: var(--vc-space-4);
	font-size: var(--vc-font-size-sm);
}

.vc-folder-crumb {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-width: 0;
	max-width: 100%;
	overflow-wrap: anywhere;
	padding: 4px 8px;
	border: 0;
	border-radius: var(--vc-radius-md);
	background: transparent;
	font: inherit;
	color: var(--vc-color-primary);
	cursor: pointer;
}

.vc-folder-crumb:hover {
	background: rgba( 0, 0, 0, .05 );
}

.vc-folder-crumb[aria-current="page"] {
	color: var(--vc-color-text);
	font-weight: 600;
	cursor: default;
}

.vc-folder-crumb-sep {
	color: var(--vc-color-text-muted);
}

.vc-folder-crumbs .vc-item-action {
	margin-left: 4px;
}

/* La carte contient deux boutons — ouvrir, supprimer — donc elle n'en est pas
   un elle-même : imbriquer deux boutons est invalide et le navigateur en avale
   un, généralement celui qu'on vise. */
.vc-folder-card {
	background: #fff;
	border: 1px solid rgba( 0, 0, 0, .08 );
	border-radius: 10px;
	overflow: hidden;
	position: relative;
	transition: border-color .15s ease, transform .15s ease;
}

.vc-folder-card:hover {
	border-color: var( --vc-color-primary, #2d5a27 );
	transform: translateY( -2px );
}

/* Dossier pos� sur le serveur (SFTP, hors m�diath�que) : pas de bouton
   supprimer, un pointill� le distingue des dossiers normaux au survol. */
.vc-folder-card--fixed {
	border-style: dashed;
}

/* Provenance d'un dossier ou d'une photo posés sur le serveur : une icône de
   dossier minuscule, sans mot ni couleur. Elle se remarque quand on la
   cherche et s'oublie le reste du temps — le nom du dossier et l'image
   comptent plus qu'elle. Le détail est dans `title`. */
.vc-source-mark {
	display: inline-flex;
	margin-left: 5px;
	vertical-align: middle;
	color: var(--vc-color-text-muted);
	opacity: .45;
}

.vc-source-mark .vc-icon {
	display: block;
}

.vc-source-mark--photo {
	position: absolute;
	top: 5px;
	left: 5px;
	margin: 0;
	padding: 3px;
	border-radius: 50%;
	/* Sur une photo, la pastille doit tenir aussi bien sur un ciel que sur un
	   green : un fond clair translucide vaut mieux qu'une couleur fixe. */
	background: rgba( 255, 255, 255, .55 );
	color: #444;
	opacity: .55;
}

.vc-gallery-item:hover .vc-source-mark--photo {
	opacity: .85;
}

.vc-folder-card-open {
	background: none;
	border: 0;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	padding: 0;
	text-align: left;
	width: 100%;
}

/* La corbeille n'apparaît qu'au survol : une grille de dossiers piquée de
   corbeilles invite au geste qu'on veut le moins voir se produire par accident. */
.vc-folder-card-delete {
	background: rgba( 255, 255, 255, .92 );
	border: 1px solid rgba( 0, 0, 0, .1 );
	border-radius: 6px;
	cursor: pointer;
	line-height: 1;
	opacity: 0;
	padding: 5px 7px;
	position: absolute;
	right: 8px;
	top: 8px;
	transition: opacity .15s ease;
}

.vc-folder-card:hover .vc-folder-card-delete,
.vc-folder-card-delete:focus-visible {
	opacity: 1;
}

.vc-folder-card-delete:hover {
	border-color: #b32d2e;
}

.vc-folder-card img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
}

.vc-folder-card-icon {
	aspect-ratio: 4 / 3;
	align-items: center;
	background: #f3f5f2;
	display: flex;
	font-size: 2rem;
	justify-content: center;
}

.vc-folder-card-body {
	align-items: baseline;
	display: flex;
	gap: .5rem;
	justify-content: space-between;
	padding: .7rem .9rem;
}

.vc-folder-card-body em {
	color: #5b6156;
	font-size: .85rem;
	font-style: normal;
	font-variant-numeric: tabular-nums;
}

/* Vue liste (barre de vue de la galerie et des actualités, 08/10/2026) :
   une ligne par dossier — vignette, nom, nombre — alignée sur la liste des
   photos et des actualités en dessous. */
.vc-folder-grid--list {
	grid-template-columns: 1fr;
	gap: var(--vc-space-2);
}

.vc-folder-grid--list .vc-folder-card:hover {
	transform: none;
}

.vc-folder-grid--list .vc-folder-card-open {
	flex-direction: row;
	align-items: center;
	gap: var(--vc-space-3);
	padding: var(--vc-space-2);
}

.vc-folder-grid--list .vc-folder-card img,
.vc-folder-grid--list .vc-folder-card-icon {
	flex-shrink: 0;
	width: 120px;
	height: 80px;
	aspect-ratio: auto;
	object-fit: cover;
	border-radius: var(--vc-radius-sm, 4px);
}

.vc-folder-grid--list .vc-folder-card-body {
	flex: 1;
	min-width: 0;
	padding: 0 var(--vc-space-6) 0 0;
}

.vc-folder-grid--list .vc-folder-card-delete {
	top: 50%;
	transform: translateY( -50% );
}

@media (max-width: 600px) {
	.vc-folder-grid--list .vc-folder-card img,
	.vc-folder-grid--list .vc-folder-card-icon {
		width: 84px;
		height: 60px;
	}
}

/* Une photo épinglée porte un liseré : sans lui, rien ne dit pourquoi elle est
   en tête de galerie. */
.vc-gallery-item.is-featured {
	outline: 2px solid var( --vc-color-primary, #2d5a27 );
	outline-offset: 2px;
}

.vc-gallery-grid--featured {
	margin-bottom: .5rem;
}

/* ─── Pagination ─────────────────────────────────────────────────────────── */

.vc-pager {
	align-items: center;
	display: flex;
	gap: 1rem;
	justify-content: center;
	margin: 2rem 0 .5rem;
}

.vc-pager-count {
	color: #5b6156;
	font-size: .9rem;
	font-variant-numeric: tabular-nums;
}

.vc-pager button[disabled] {
	cursor: default;
	opacity: .4;
}

/* ─── Articles : langues déjà écrites ────────────────────────────────────── */

.vc-article-langs {
	display: flex;
	gap: 4px;
	left: .75rem;
	position: absolute;
	top: .75rem;
}

.vc-article-lang {
	background: rgba( 0, 0, 0, .6 );
	border-radius: 3px;
	color: #fff;
	font-size: .65rem;
	letter-spacing: .06em;
	padding: 2px 6px;
	text-transform: uppercase;
}

/* ─── Mise en avant : documents et actualités ────────────────────────────── */

.vc-document-row.is-featured,
.vc-article-card.is-featured {
	border-left: 3px solid var( --vc-color-primary, #2d5a27 );
}

.vc-documents-list--featured {
	margin-bottom: .5rem;
}

/* Un document modifiable le dit avant qu'on l'ouvre : sans cela, on découvre
   en cliquant que le PDF ne se réécrit pas. */
.vc-document-editable {
	background: rgba( 45, 90, 39, .1 );
	border-radius: 3px;
	color: var( --vc-color-primary, #2d5a27 );
	font-size: .7rem;
	letter-spacing: .04em;
	padding: 1px 6px;
	text-transform: uppercase;
}

/* Provenance d'un lien : « Google Sheets », « Lien externe »… */
.vc-document-url {
	color: var(--vc-color-text-muted);
	font-size: var(--vc-font-size-xs);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 260px;
	display: inline-block;
	vertical-align: bottom;
}

.vc-document-service {
	background: var(--vc-color-bg-alt);
	border: 1px solid var(--vc-color-border-soft);
	border-radius: 3px;
	font-size: .7rem;
	letter-spacing: .04em;
	padding: 1px 6px;
	text-transform: uppercase;
}

.vc-folder-back {
	margin-bottom: .75rem;
}

.vc-viewer-fallback {
	margin-top: 1rem;
	text-align: center;
}

/* ─── Recadrage : réglage de compression ─────────────────────────────────── */

.vc-cropper-tools select[data-crop="quality"] {
	margin-left: auto;
}

/* Le poids annoncé rend le réglage compréhensible : « standard » ne veut rien
   dire, « 0,4 Mo » si. */
.vc-cropper-weight {
	color: #5b6156;
	font-size: .8rem;
	margin: .5rem 0 0;
	text-align: right;
}

.vc-cropper-weight:empty {
	display: none;
}

/* ─── Boutons à icône ────────────────────────────────────────────────────── */

/*
 * Boutons à icône seule.
 *
 * Trois boutons texte par ligne de document débordaient sur mobile : la ligne
 * passait à deux hauteurs et le titre se retrouvait écrasé. L'icône tient
 * partout, et le nom reste disponible de deux façons — l'infobulle native
 * (`title`) au survol, `aria-label` au lecteur d'écran. Le libellé écrit est
 * conservé dans le DOM mais retiré de l'affichage : une icône seule sans nom
 * accessible est muette pour qui n'y voit rien.
 */
.vc-btn--icon {
	align-items: center;
	display: inline-flex;
	justify-content: center;
	min-width: 34px;
	padding-left: 8px;
	padding-right: 8px;
}

.vc-btn--icon > span {
	font-size: 1rem;
	line-height: 1;
}

/* Masqué à l'œil, toujours lu. */
.vc-btn--icon > em {
	border: 0;
	clip-path: inset( 50% );
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* ─── Sélecteur de dossier ───────────────────────────────────────────────── */

/*
 * Le champ porte une icône de dossier et sa propre flèche.
 *
 * `appearance: none` retire le rendu natif — sans quoi le select restait plus
 * haut et plus gris que les champs voisins, seul élément du formulaire à ne pas
 * suivre la charte. La flèche est redessinée en fond, en SVG encodé : pas de
 * fichier à charger pour deux traits.
 */
.vc-manage-field select.vc-folder-select {
	appearance: none;
	-webkit-appearance: none;
	background-image:
		url( "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6156' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E" ),
		url( "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a4240' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E" );
	background-position: right 10px center, left 10px center;
	background-repeat: no-repeat, no-repeat;
	background-size: 16px, 17px;
	cursor: pointer;
	padding-left: 34px;
	padding-right: 32px;
}

/*
 * Le champ « nouveau dossier » s'ouvre sous le select, décalé et relié par un
 * filet : on voit qu'il en dépend, et non qu'un second champ indépendant vient
 * d'apparaître.
 */
.vc-manage-field .vc-folder-new {
	border-left: 2px solid var( --vc-color-primary, #0a4240 );
	border-radius: 0 6px 6px 0;
	margin-top: 8px;
	margin-left: 16px;
	width: calc( 100% - 16px );
}

.vc-manage-field .vc-folder-new[hidden] {
	display: none;
}

/* ─── Jeu d'icônes ───────────────────────────────────────────────────────── */

/*
 * Les icônes prennent la couleur et la taille de leur bouton.
 *
 * `currentColor` et `1em` plutôt que des valeurs fixes : un bouton primaire les
 * affiche en blanc, un bouton fantôme en vert, sans une règle de plus.
 */
.vc-icon {
	flex: 0 0 auto;
	vertical-align: middle;
}

.vc-tab-placeholder-icon .vc-icon {
	color: var( --vc-color-text-muted, #5b6156 );
	opacity: .6;
}

/*
 * Les actions d'une ligne de document sont toujours visibles.
 *
 * `.vc-item-actions` a été dessiné pour se révéler au survol d'une vignette :
 * `position: absolute` et `opacity: 0`, avec la révélation réservée aux cartes
 * de galerie et d'actualité. Posé sur une ligne de document, il rendait les
 * boutons invisibles *et* mal placés — dont celui de suppression, qu'on croyait
 * absent.
 */
.vc-document-row .vc-item-actions {
	position: static;
	opacity: 1;
}

.vc-document-actions .vc-item-action,
.vc-document-actions .vc-btn--icon {
	height: 32px;
	min-width: 32px;
	width: auto;
}

/* L'étoile pleine dit l'épinglage ; la couleur le confirme. */
.vc-item-action.is-active {
	color: var( --vc-color-primary, #0a4240 );
}

.vc-folder-card-icon .vc-icon {
	color: var( --vc-color-primary, #0a4240 );
	opacity: .55;
}

.vc-folder-card-delete .vc-icon {
	color: #b32d2e;
}

/* ═══════════════════════════════════════════════════════════
   Recherche et accueil de section
   ═══════════════════════════════════════════════════════════ */

/* Les entrées arrivent en cascade plutôt que d'un bloc : l'œil suit la liste
   au lieu de la recevoir. `--i` est posé par le JS sur chaque élément, ce qui
   évite une règle `nth-child` par ligne. Le décalage est plafonné à 8 rangs —
   au-delà, on n'attend plus une animation, on attend la page. */
@keyframes vc-rise {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}

@keyframes vc-pop {
	0%   { opacity: 0; transform: scale(.94); }
	60%  { opacity: 1; transform: scale(1.02); }
	100% { opacity: 1; transform: scale(1); }
}

/* ── Recherche ───────────────────────────────────────────── */
/* La barre vit dans le menu, au-dessus des onglets : sur mobile elle reste
   visible quand la liste se replie, ce qui en fait le raccourci le plus court
   vers un contenu précis. */
.vc-search-box {
	margin-bottom: var(--vc-space-4);
}

.vc-search-field {
	display: flex;
	align-items: center;
	gap: var(--vc-space-2);
	padding: var(--vc-space-2) var(--vc-space-3);
	border: 1px solid var(--vc-color-border);
	border-radius: var(--vc-radius-full);
	background: var(--vc-color-white);
	color: var(--vc-color-text-muted);
	transition:
		border-color var(--vc-duration-base) var(--vc-ease),
		box-shadow var(--vc-duration-base) var(--vc-ease),
		color var(--vc-duration-base) var(--vc-ease);
}

.vc-search-field:hover {
	border-color: var(--vc-color-ink-soft);
}

.vc-search-field:focus-within {
	border-color: var(--vc-color-primary);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--vc-color-primary) 14%, transparent);
	color: var(--vc-color-primary);
}

/* La loupe pivote légèrement à la prise de focus — un signe que le champ a
   pris la main, sans déplacer quoi que ce soit autour. */
.vc-search-field .vc-icon {
	flex: 0 0 auto;
	transition: transform var(--vc-duration-base) var(--vc-ease-out);
}

.vc-search-field:focus-within .vc-icon {
	transform: rotate(-12deg) scale(1.08);
}

.vc-search-field input {
	width: 100%;
	min-width: 0;
	border: 0;
	padding: 0;
	background: none;
	color: var(--vc-color-text);
	font: inherit;
	font-size: var(--vc-font-size-sm);
}

.vc-search-field input:focus {
	outline: none;
	box-shadow: none;
}

/* Chrome ajoute sa propre croix, qui double celle du bandeau de résultats. */
.vc-search-field input::-webkit-search-cancel-button {
	display: none;
}

.vc-search-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vc-space-4);
	flex-wrap: wrap;
	margin-bottom: var(--vc-space-6);
	padding-bottom: var(--vc-space-3);
	border-bottom: 1px solid var(--vc-color-border);
	animation: vc-rise var(--vc-duration-base) var(--vc-ease-out) both;
}

.vc-search-head p {
	margin: 0;
	color: var(--vc-color-text-muted);
	font-size: var(--vc-font-size-sm);
}

.vc-search-list {
	margin: 0 0 var(--vc-space-8);
	padding: 0;
	list-style: none;
}

/* ── Lignes de résultat et d'aperçu ──────────────────────── */
.vc-search-list li,
.vc-dash-list li {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--vc-space-4);
	padding: var(--vc-space-3);
	border-radius: var(--vc-radius-md);
	cursor: pointer;
	animation: vc-rise var(--vc-duration-base) var(--vc-ease-out) both;
	animation-delay: calc(var(--i, 0) * 45ms);
	transition:
		background var(--vc-duration-fast) var(--vc-ease),
		transform var(--vc-duration-fast) var(--vc-ease);
}

.vc-search-list li:hover,
.vc-dash-list li:hover {
	background: var(--vc-color-bg-alt);
	transform: translateX(3px);
}

.vc-search-list li:active,
.vc-dash-list li:active {
	transform: translateX(1px) scale(.995);
}

/* Un chevron paraît au survol, à droite : il dit que la ligne mène quelque
   part. Il occupe sa place en permanence pour que rien ne bouge en arrivant. */
.vc-search-list li::after,
.vc-dash-list li::after {
	content: "";
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	margin-left: auto;
	border-top: 2px solid var(--vc-color-text-muted);
	border-right: 2px solid var(--vc-color-text-muted);
	border-radius: 1px;
	opacity: 0;
	transform: rotate(45deg) translateX(-4px);
	transition:
		opacity var(--vc-duration-fast) var(--vc-ease),
		transform var(--vc-duration-base) var(--vc-ease-out);
}

.vc-search-list li:hover::after,
.vc-dash-list li:hover::after {
	opacity: 1;
	transform: rotate(45deg) translateX(0);
}

.vc-search-thumb,
.vc-dash-thumb {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: var(--vc-radius-sm);
	object-fit: cover;
	transition: transform var(--vc-duration-base) var(--vc-ease-out);
}

.vc-search-list li:hover .vc-search-thumb,
.vc-dash-list li:hover .vc-dash-thumb {
	transform: scale(1.06);
}

.vc-search-thumb--icon,
.vc-dash-thumb--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--vc-color-bg-alt);
	color: var(--vc-color-text-muted);
	transition:
		background var(--vc-duration-base) var(--vc-ease),
		color var(--vc-duration-base) var(--vc-ease),
		transform var(--vc-duration-base) var(--vc-ease-out);
}

.vc-search-list li:hover .vc-search-thumb--icon,
.vc-dash-list li:hover .vc-dash-thumb--empty {
	background: color-mix(in srgb, var(--vc-color-primary) 12%, transparent);
	color: var(--vc-color-primary);
}

.vc-search-body,
.vc-dash-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.vc-search-body strong,
.vc-dash-body strong {
	font-size: var(--vc-font-size-sm);
	font-weight: 600;
	overflow-wrap: anywhere;
}

.vc-search-body span,
.vc-dash-body span {
	color: var(--vc-color-text-muted);
	font-size: var(--vc-font-size-xs);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Le terme cherché est souligné plutôt que surligné : un bloc de couleur sur
   trois mots d'affilée se lit moins bien que le mot lui-même. */
.vc-search-body mark {
	padding: 0 1px;
	border-radius: 2px;
	background: color-mix(in srgb, var(--vc-color-accent) 26%, transparent);
	box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--vc-color-accent) 55%, transparent);
	color: inherit;
}

/* ── Accueil : les compteurs ─────────────────────────────── */
.vc-dash-counts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
	gap: var(--vc-space-3);
	margin-bottom: var(--vc-space-8);
}

.vc-dash-count {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: var(--vc-space-5) var(--vc-space-2) var(--vc-space-4);
	overflow: hidden;
	border: 1px solid var(--vc-color-border);
	border-radius: var(--vc-radius-lg);
	background: var(--vc-color-white);
	color: var(--vc-color-text-muted);
	font: inherit;
	text-align: center;
	animation: vc-pop var(--vc-duration-base) var(--vc-ease-out) both;
	animation-delay: calc(var(--i, 0) * 55ms);
}

.vc-dash-count .vc-icon {
	color: var(--vc-color-primary);
	opacity: .55;
	transition:
		opacity var(--vc-duration-base) var(--vc-ease),
		transform var(--vc-duration-base) var(--vc-ease-out);
}

/* Un voile de couleur monte du bas à l'approche : la carte s'allume sans
   changer de taille, donc sans pousser ses voisines. */
.vc-dash-count::before {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 100%;
	background: linear-gradient(
		to top,
		color-mix(in srgb, var(--vc-color-primary) 10%, transparent),
		transparent 70%
	);
	opacity: 0;
	transition: opacity var(--vc-duration-base) var(--vc-ease);
	pointer-events: none;
}

button.vc-dash-count {
	cursor: pointer;
	transition:
		border-color var(--vc-duration-base) var(--vc-ease),
		box-shadow var(--vc-duration-base) var(--vc-ease),
		transform var(--vc-duration-base) var(--vc-ease-out);
}

button.vc-dash-count:hover,
button.vc-dash-count:focus-visible {
	border-color: color-mix(in srgb, var(--vc-color-primary) 45%, transparent);
	box-shadow: var(--vc-shadow-card);
	transform: translateY(-3px);
}

button.vc-dash-count:hover::before,
button.vc-dash-count:focus-visible::before {
	opacity: 1;
}

button.vc-dash-count:hover .vc-icon,
button.vc-dash-count:focus-visible .vc-icon {
	opacity: 1;
	transform: translateY(-2px) scale(1.1);
}

button.vc-dash-count:active {
	transform: translateY(-1px);
}

.vc-dash-count strong {
	position: relative;
	color: var(--vc-color-text);
	font-size: var(--vc-font-size-xl);
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}

.vc-dash-count span {
	position: relative;
	font-size: var(--vc-font-size-xs);
}

/* ── Accueil : ce qui reste à faire ──────────────────────── */
/* Une invitation à agir, pas un avertissement : le ton reste celui du portail,
   et chaque ligne porte le bouton qui la règle. */
.vc-dash-todo {
	position: relative;
	margin-bottom: var(--vc-space-8);
	padding: var(--vc-space-4) var(--vc-space-5);
	overflow: hidden;
	border: 1px solid var(--vc-color-border);
	border-radius: var(--vc-radius-md);
	background: var(--vc-color-bg-alt);
	animation: vc-rise var(--vc-duration-base) var(--vc-ease-out) both;
	animation-delay: 120ms;
}

/* Le liseré de gauche se déroule de haut en bas à l'arrivée : il attire le
   regard une fois, puis se tient tranquille. */
.vc-dash-todo::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 3px;
	background: var(--vc-color-primary);
	transform-origin: top;
	animation: vc-todo-bar var(--vc-duration-slow, 480ms) var(--vc-ease-out) 260ms both;
}

@keyframes vc-todo-bar {
	from { transform: scaleY(0); }
	to   { transform: scaleY(1); }
}

.vc-dash-todo h3 {
	display: flex;
	align-items: center;
	gap: var(--vc-space-2);
	margin: 0 0 var(--vc-space-3);
	color: var(--vc-color-text);
	font-size: var(--vc-font-size-sm);
	text-transform: uppercase;
	letter-spacing: .04em;
}

.vc-dash-todo h3 .vc-icon {
	color: var(--vc-color-primary);
}

.vc-dash-todo ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vc-dash-todo li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vc-space-4);
	padding: var(--vc-space-2) 0;
	font-size: var(--vc-font-size-sm);
	animation: vc-rise var(--vc-duration-base) var(--vc-ease-out) both;
	animation-delay: calc(200ms + var(--i, 0) * 60ms);
}

.vc-dash-todo li + li {
	border-top: 1px solid var(--vc-color-border);
}

/* Le bouton reste discret jusqu'à ce qu'on approche de sa ligne. */
.vc-dash-todo li .vc-btn {
	flex: 0 0 auto;
	opacity: .7;
	transition:
		opacity var(--vc-duration-fast) var(--vc-ease),
		transform var(--vc-duration-fast) var(--vc-ease);
}

.vc-dash-todo li:hover .vc-btn {
	opacity: 1;
	transform: translateX(2px);
}

/* ── Accueil : les blocs ─────────────────────────────────── */
.vc-dash-panel {
	margin-bottom: var(--vc-space-8);
	animation: vc-rise var(--vc-duration-base) var(--vc-ease-out) both;
	animation-delay: calc(160ms + var(--i, 0) * 70ms);
}

.vc-dash-panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vc-space-4);
	margin-bottom: var(--vc-space-2);
	padding-bottom: var(--vc-space-2);
	border-bottom: 1px solid var(--vc-color-border);
}

.vc-dash-panel-head h3 {
	display: flex;
	align-items: center;
	gap: var(--vc-space-2);
	margin: 0;
	font-size: var(--vc-font-size-base);
}

.vc-dash-panel-head h3 .vc-icon {
	color: var(--vc-color-primary);
	opacity: .7;
}

/* Le bouton « Tout voir » est une icône seule — son `em` reste le libellé lu
   par les lecteurs d'écran, et le `title` sert d'infobulle. Il s'éclaire quand
   on approche du bloc, et sa flèche avance au survol direct. */
.vc-dash-panel-head .vc-btn {
	opacity: .55;
	transition: opacity var(--vc-duration-base) var(--vc-ease);
}

.vc-dash-panel:hover .vc-btn,
.vc-dash-panel-head .vc-btn:focus-visible {
	opacity: 1;
}

.vc-dash-panel-head .vc-btn .vc-icon {
	transition: transform var(--vc-duration-base) var(--vc-ease-out);
}

.vc-dash-panel-head .vc-btn:hover .vc-icon {
	transform: translateX(3px);
}

.vc-dash-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* La date en colonne fixe : les titres s'alignent au lieu de danser d'une
   ligne à l'autre selon la longueur du jour. */
.vc-dash-date {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0;
	width: 76px;
	padding: var(--vc-space-2);
	border-radius: var(--vc-radius-sm);
	background: var(--vc-color-bg-alt);
	text-align: center;
	transition:
		background var(--vc-duration-base) var(--vc-ease),
		color var(--vc-duration-base) var(--vc-ease);
}

.vc-dash-list li:hover .vc-dash-date {
	background: color-mix(in srgb, var(--vc-color-primary) 12%, transparent);
	color: var(--vc-color-primary);
}

.vc-dash-date strong {
	font-size: var(--vc-font-size-xs);
	line-height: 1.3;
}

.vc-dash-date em {
	color: var(--vc-color-text-muted);
	font-size: var(--vc-font-size-xs);
	font-style: normal;
}

.vc-dash-list li:hover .vc-dash-date em {
	color: inherit;
}

/* -- Prochains rendez-vous : m�me mise en page que sur Mon espace --
   (espace-dashboard.php, .vc-espace-list) � point de couleur, titre, date �
   droite. Classes d�di�es plut�t que .vc-dash-date/.vc-dash-body, partag�es
   avec les listes � vignette (articles, documents) qui gardent leur propre
   mise en page. */
.vc-dash-events-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vc-dash-events-item {
	display: flex;
	align-items: center;
	gap: var(--vc-space-3);
	padding: var(--vc-space-3);
	border-radius: var(--vc-radius-md);
	cursor: pointer;
	animation: vc-rise var(--vc-duration-base) var(--vc-ease-out) both;
	animation-delay: calc(var(--i, 0) * 45ms);
	transition: background var(--vc-duration-fast) var(--vc-ease);
}

.vc-dash-events-item:hover {
	background: var(--vc-color-bg-alt);
}

.vc-dash-events-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex: 0 0 auto;
}

.vc-dash-events-label {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--vc-space-2);
	font-size: var(--vc-font-size-sm);
	font-weight: 600;
}

.vc-dash-events-note {
	color: var(--vc-color-text-muted);
	font-size: var(--vc-font-size-xs);
	font-style: normal;
	font-weight: 400;
}

.vc-dash-events-date {
	flex: 0 0 auto;
	color: var(--vc-color-text-muted);
	font-size: var(--vc-font-size-sm);
	white-space: nowrap;
}

.vc-dash-meta {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.vc-dash-draft {
	margin-left: var(--vc-space-2);
	padding: 1px 7px;
	border-radius: var(--vc-radius-full);
	background: color-mix(in srgb, var(--vc-color-accent) 18%, transparent);
	color: var(--vc-color-ink-soft);
	font-size: var(--vc-font-size-xs);
	font-style: normal;
	font-weight: 500;
	vertical-align: middle;
}

/* ── Mouvement réduit ────────────────────────────────────── */
/* Les entrées et les glissements disparaissent ; les changements de couleur
   restent, car ce sont eux qui disent qu'un élément répond. */
@media (prefers-reduced-motion: reduce) {
	.vc-search-head,
	.vc-search-list li,
	.vc-dash-list li,
	.vc-dash-count,
	.vc-dash-panel,
	.vc-dash-todo,
	.vc-dash-todo li,
	.vc-dash-todo::before {
		animation: none;
	}

	.vc-search-list li:hover,
	.vc-dash-list li:hover,
	button.vc-dash-count:hover,
	button.vc-dash-count:focus-visible {
		transform: none;
	}

	.vc-search-list li:hover .vc-search-thumb,
	.vc-dash-list li:hover .vc-dash-thumb,
	.vc-search-field:focus-within .vc-icon {
		transform: none;
	}

	.vc-dash-panel-head .vc-btn {
		opacity: 1;
	}
}

/* ═══════════════════════════════════════════════════════════
   Annuaire de section
   ═══════════════════════════════════════════════════════════ */

/* Recherche et bouton sur une ligne, panneau replié en dessous : le panneau
   porte `flex-basis: 100%`, ce qui le fait passer à la ligne sans imposer une
   grille au reste. */
.vc-mem-filters {
	display: flex;
	align-items: center;
	gap: var(--vc-space-3);
	flex-wrap: wrap;
	margin-bottom: var(--vc-space-5);
	padding-bottom: var(--vc-space-4);
	border-bottom: 1px solid var(--vc-color-border);
}

.vc-mem-filters-panel {
	display: flex;
	flex: 1 0 100%;
	flex-direction: column;
	gap: var(--vc-space-3);
	margin-top: var(--vc-space-1);
	animation: vc-rise var(--vc-duration-base) var(--vc-ease-out) both;
}

.vc-mem-filters-panel[hidden] {
	display: none;
}

.vc-mem-filters-toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--vc-space-2);
	padding: var(--vc-space-2) var(--vc-space-3);
	border: 1px solid var(--vc-color-border);
	border-radius: var(--vc-radius-full);
	background: var(--vc-color-white);
	color: var(--vc-color-text-muted);
	font: inherit;
	font-size: var(--vc-font-size-sm);
	cursor: pointer;
	transition:
		border-color var(--vc-duration-fast) var(--vc-ease),
		color var(--vc-duration-fast) var(--vc-ease);
}

.vc-mem-filters-toggle:hover,
.vc-mem-filters-toggle[aria-expanded="true"] {
	border-color: color-mix(in srgb, var(--vc-color-primary) 45%, transparent);
	color: var(--vc-color-text);
}

/* Le nombre de critères actifs reste lisible panneau fermé : sans lui, une
   liste filtrée paraîtrait vide sans raison visible. */
.vc-mem-filters-toggle em {
	padding: 1px 7px;
	border-radius: var(--vc-radius-full);
	background: var(--vc-color-primary);
	color: var(--vc-color-white);
	font-size: var(--vc-font-size-xs);
	font-style: normal;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.vc-mem-filters-toggle.is-filtered {
	border-color: color-mix(in srgb, var(--vc-color-primary) 45%, transparent);
	color: var(--vc-color-text);
}

.vc-mem-filters-chevron {
	display: inline-flex;
	transition: transform var(--vc-duration-base) var(--vc-ease-out);
}

.vc-mem-filters-toggle[aria-expanded="true"] .vc-mem-filters-chevron {
	transform: rotate(90deg);
}

/* `.vc-search-field` désigne aussi le champ de recherche du site (sidebar.css,
   chargé après : bordure et fond retirés). Sans ces règles plus précises, le
   champ de l'annuaire perdait son cadre — et, au téléphone, se tassait à
   0 px à côté de « Statut » et « Filtres ». */
.vc-mem-filters .vc-mem-search {
	flex: 1 1 220px;
	min-width: 0;
	max-width: 340px;
	padding: var(--vc-space-2) var(--vc-space-3);
	border: 1px solid var(--vc-color-border);
	border-radius: var(--vc-radius-full);
	background: var(--vc-color-white);
}

.vc-mem-filters .vc-mem-search:focus-within {
	border-color: var(--vc-color-primary);
}

.vc-mem-filters .vc-mem-search input {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	font-size: 16px; /* 16 px : iOS ne zoome pas la page à la saisie. */
}

/* Téléphone : la recherche prend toute sa ligne, Statut et Filtres dessous. */
@media (max-width: 600px) {
	.vc-mem-filters .vc-mem-search {
		flex-basis: 100%;
		max-width: none;
		min-height: 44px;
	}
}

/* ── Filtres à jetons (S.ui.tokenSelect) : métier, groupe, âge ─────────────
   Deux colonnes sur grand écran, une sur téléphone. Seules les valeurs
   choisies s'affichent ; les autres s'ouvrent au clic, filtrables. */
.vc-mem-token-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--vc-space-3) var(--vc-space-5);
}

@media (max-width: 720px) {
	.vc-mem-token-grid {
		grid-template-columns: 1fr;
	}
}

.vc-token-row {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.vc-token-row:empty {
	display: none;
}

/* Filtre sans données encore (sexe avant la première sync iGolf) : grisé, expliqué. */
.vc-token-row.is-pending .vc-token-field {
	padding: 8px 10px;
	background: var(--vc-color-bg-alt);
	color: var(--vc-color-text-muted);
	font-size: var(--vc-font-size-xs);
	cursor: default;
}

/* « Joignables » garde ses pastilles, mais se range dans la grille comme une
   case : intitulé au-dessus, pastilles dessous. */
.vc-mem-token-grid .vc-mem-chiprow {
	align-content: flex-start;
	gap: 4px var(--vc-space-2);
}

.vc-mem-token-grid .vc-mem-chiprow-label {
	flex-basis: 100%;
	min-width: 0;
}

.vc-token-label {
	color: var(--vc-color-text-muted);
	font-size: var(--vc-font-size-xs);
	letter-spacing: .04em;
	text-transform: uppercase;
}

.vc-token-field {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	min-height: 38px;
	padding: 4px 6px;
	border: 1px solid var(--vc-color-border);
	border-radius: var(--vc-radius-md);
	background: var(--vc-color-white);
	cursor: text;
}

.vc-token-field:focus-within {
	border-color: var(--vc-color-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--vc-color-primary) 15%, transparent);
}

.vc-token {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 2px 2px 2px 10px;
	border-radius: var(--vc-radius-full);
	background: var(--vc-color-primary);
	color: var(--vc-color-white);
	font-size: var(--vc-font-size-xs);
	line-height: 1.5;
	white-space: nowrap;
}

.vc-token button {
	width: 20px;
	height: 20px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
}

.vc-token button:hover,
.vc-token button:focus-visible {
	background: rgba(255, 255, 255, .22);
	outline: none;
}

.vc-token-field input[type="text"] {
	flex: 1 1 80px;
	min-width: 80px;
	padding: 4px;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: var(--vc-font-size-sm);
	box-shadow: none;
	outline: none;
}

.vc-token-menu {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	z-index: 20;
	max-height: 240px;
	margin: 0;
	padding: 4px;
	overflow-y: auto;
	list-style: none;
	border: 1px solid var(--vc-color-border);
	border-radius: var(--vc-radius-md);
	background: var(--vc-color-white);
	box-shadow: var(--vc-shadow-md);
}

.vc-token-menu[hidden] {
	display: none;
}

.vc-token-menu li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vc-space-2);
	padding: 6px 8px;
	border-radius: var(--vc-radius-sm);
	font-size: var(--vc-font-size-sm);
	cursor: pointer;
}

.vc-token-menu li:hover,
.vc-token-menu li.is-cursor {
	background: var(--vc-color-bg-alt);
}

.vc-token-menu li em {
	color: var(--vc-color-text-muted);
	font-size: var(--vc-font-size-xs);
	font-style: normal;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.vc-token-menu .vc-token-none {
	color: var(--vc-color-text-muted);
	cursor: default;
}

.vc-mem-chiprow {
	display: flex;
	align-items: center;
	gap: var(--vc-space-2);
	flex-wrap: wrap;
}

.vc-mem-chiprow:empty {
	display: none;
}

.vc-mem-chiprow-label {
	min-width: 74px;
	color: var(--vc-color-text-muted);
	font-size: var(--vc-font-size-xs);
	text-transform: uppercase;
	letter-spacing: .04em;
}

/* Une puce porte son décompte : « Médecin 7 » invite à agir, là où une ligne
   de liste déroulante n'invite à rien. C'est le geste demandé — une action par
   type de métier — rendu visible dès la barre de filtres. */
.vc-mem-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 6px 4px 12px;
	border: 1px solid var(--vc-color-border);
	border-radius: var(--vc-radius-full);
	background: var(--vc-color-white);
	color: var(--vc-color-text);
	font: inherit;
	font-size: var(--vc-font-size-xs);
	cursor: pointer;
	transition:
		border-color var(--vc-duration-fast) var(--vc-ease),
		background var(--vc-duration-fast) var(--vc-ease),
		color var(--vc-duration-fast) var(--vc-ease),
		transform var(--vc-duration-fast) var(--vc-ease);
}

.vc-mem-chip:hover {
	border-color: color-mix(in srgb, var(--vc-color-primary) 45%, transparent);
	transform: translateY(-1px);
}

.vc-mem-chip em {
	padding: 1px 7px;
	border-radius: var(--vc-radius-full);
	background: var(--vc-color-bg-alt);
	color: var(--vc-color-text-muted);
	font-style: normal;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	transition: background var(--vc-duration-fast) var(--vc-ease), color var(--vc-duration-fast) var(--vc-ease);
}

.vc-mem-chip.is-active {
	border-color: var(--vc-color-primary);
	background: var(--vc-color-primary);
	color: var(--vc-color-white);
}

.vc-mem-chip.is-active em {
	background: rgba(255, 255, 255, .22);
	color: var(--vc-color-white);
}

.vc-mem-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vc-space-4);
	flex-wrap: wrap;
	margin-bottom: var(--vc-space-3);
}

.vc-mem-summary p {
	margin: 0;
	color: var(--vc-color-text-muted);
	font-size: var(--vc-font-size-sm);
}

/* La barre d'actions dit toujours sur qui elle porte. « Envoyer » sans savoir
   à qui est le genre de geste qu'on ne peut pas rattraper. */
.vc-mem-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vc-space-4);
	flex-wrap: wrap;
	margin-bottom: var(--vc-space-4);
	padding: var(--vc-space-2) var(--vc-space-3);
	border: 1px solid var(--vc-color-border);
	border-radius: var(--vc-radius-md);
	background: var(--vc-color-bg-alt);
}

.vc-mem-scope {
	color: var(--vc-color-text);
	font-size: var(--vc-font-size-sm);
	font-weight: 600;
}

.vc-mem-actions-buttons {
	display: flex;
	align-items: center;
	gap: var(--vc-space-1);
}

.vc-mem-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vc-mem-head,
.vc-mem-row {
	display: flex;
	align-items: center;
	gap: var(--vc-space-3);
	padding: var(--vc-space-2) var(--vc-space-3);
	border-radius: var(--vc-radius-md);
}

.vc-mem-head {
	color: var(--vc-color-text-muted);
	font-size: var(--vc-font-size-xs);
	text-transform: uppercase;
	letter-spacing: .04em;
}

.vc-mem-row {
	animation: vc-rise var(--vc-duration-base) var(--vc-ease-out) both;
	animation-delay: calc(var(--i, 0) * 35ms);
	transition: background var(--vc-duration-fast) var(--vc-ease);
}

.vc-mem-row:hover {
	background: var(--vc-color-bg-alt);
}

/* Une ligne cochée se distingue par un liseré, pas par un fond : le fond est
   déjà pris par le survol, et les deux se confondraient au passage de souris. */
.vc-mem-row.is-selected {
	box-shadow: inset 3px 0 0 var(--vc-color-primary);
	background: color-mix(in srgb, var(--vc-color-primary) 7%, transparent);
}

.vc-mem-check {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
}

.vc-mem-check input {
	width: 16px;
	height: 16px;
	accent-color: var(--vc-color-primary);
	cursor: pointer;
}

.vc-mem-avatar {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border-radius: var(--vc-radius-full);
	object-fit: cover;
}

.vc-mem-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1 1 auto;
	/* Bouton : ouvre la fiche du membre (13/10/2026). */
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.vc-mem-body:hover strong,
.vc-mem-row.is-open .vc-mem-body strong {
	color: var(--vc-color-primary);
}

/* Fiche du membre, dépliée sous sa ligne. */
.vc-mem-row {
	flex-wrap: wrap;
}

.vc-mem-card {
	flex: 1 1 100%;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--vc-space-2) var(--vc-space-4);
	margin: var(--vc-space-1) 0 var(--vc-space-1) calc(36px + 16px + var(--vc-space-3) * 2);
	padding: var(--vc-space-3);
	border: 1px solid var(--vc-color-border-soft);
	border-radius: var(--vc-radius-md);
	background: var(--vc-color-surface);
}

.vc-mem-card-field {
	min-width: 0;
}

.vc-mem-card dt {
	display: flex;
	align-items: center;
	gap: 5px;
	color: var(--vc-color-text-muted);
	font-size: var(--vc-font-size-xs);
}

.vc-mem-card dd {
	margin: 2px 0 0;
	font-size: var(--vc-font-size-sm);
	overflow-wrap: anywhere;
}

@media (max-width: 600px) {
	.vc-mem-card {
		margin-left: 0;
		grid-template-columns: 1fr;
	}
}

.vc-mem-body strong {
	display: flex;
	align-items: center;
	gap: var(--vc-space-2);
	flex-wrap: wrap;
	font-size: var(--vc-font-size-sm);
	font-weight: 600;
}

.vc-mem-meta {
	display: flex;
	align-items: center;
	gap: var(--vc-space-3);
	flex-wrap: wrap;
	color: var(--vc-color-text-muted);
	font-size: var(--vc-font-size-xs);
}

.vc-mem-job {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.vc-mem-badge {
	padding: 1px 7px;
	border-radius: var(--vc-radius-full);
	background: color-mix(in srgb, var(--vc-color-primary) 14%, transparent);
	color: var(--vc-color-ink-soft);
	font-size: var(--vc-font-size-xs);
	font-style: normal;
	font-weight: 500;
}

.vc-mem-badge--warn {
	background: color-mix(in srgb, var(--vc-color-accent) 24%, transparent);
}

/* Deux pastilles disent d'un coup d'œil par où le membre est joignable. Un
   canal éteint reste visible, en gris : savoir qu'on ne peut PAS écrire à
   quelqu'un est une information, pas une absence. */
.vc-mem-reach {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 4px;
}

.vc-mem-reach > span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: var(--vc-radius-full);
	background: var(--vc-color-bg-alt);
	color: var(--vc-color-border);
}

.vc-mem-reach > span.is-on {
	background: color-mix(in srgb, var(--vc-color-primary) 14%, transparent);
	color: var(--vc-color-primary);
}

/* La note d'en-tête de modale : le décompte des destinataires, et l'état de la
   passerelle. C'est la dernière chose lue avant de rédiger. */
.vc-manage-note {
	margin: 0 0 var(--vc-space-4);
	padding: var(--vc-space-3);
	border-left: 3px solid var(--vc-color-primary);
	border-radius: var(--vc-radius-sm);
	background: var(--vc-color-bg-alt);
	color: var(--vc-color-text);
	font-size: var(--vc-font-size-sm);
}

@media (max-width: 640px) {
	.vc-mem-chiprow-label {
		min-width: 100%;
	}

	.vc-mem-avatar {
		display: none;
	}

	.vc-mem-actions {
		align-items: stretch;
		flex-direction: column;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vc-mem-row,
	.vc-mem-filters-panel {
		animation: none;
	}

	.vc-mem-chip:hover {
		transform: none;
	}

	.vc-mem-filters-toggle[aria-expanded="true"] .vc-mem-filters-chevron {
		transition: none;
	}
}

/* ═══════════════════════════════════════════════════════════
   Menu : le groupe « Gestion »
   ═══════════════════════════════════════════════════════════ */

/* Ce que le gestionnaire règle vit sous son propre intitulé. Mêlées aux
   autres, ces entrées donnaient à un simple membre l'impression d'un menu
   incohérent — il en voyait deux de moins que son voisin, sans savoir
   pourquoi. */
.vc-section-menu-heading {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: var(--vc-space-4) 0 var(--vc-space-1);
	padding: 0 var(--vc-space-3);
	color: var(--vc-color-text-muted);
	font-size: var(--vc-font-size-xs);
	text-transform: uppercase;
	letter-spacing: .06em;
}

.vc-section-menu-heading::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--vc-color-border);
}

/* ═══════════════════════════════════════════════════════════
   Comité
   ═══════════════════════════════════════════════════════════ */

/* La vitrine (tout visiteur) et l'atelier du membre admin partagent ce m�me
   �cran (`section-committee.js`, drapeau `editable`) � l'annuaire des
   membres, lui, a sa propre page (section-members.js, .vc-mem-*). */

.vc-com-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vc-com-row {
	display: flex;
	align-items: center;
	gap: var(--vc-space-3);
	padding: var(--vc-space-3);
	border: 1px solid var(--vc-color-border);
	border-radius: var(--vc-radius-md);
	background: var(--vc-color-white);
	animation: vc-rise var(--vc-duration-base) var(--vc-ease-out) both;
	animation-delay: calc(var(--i, 0) * 40ms);
	transition:
		border-color var(--vc-duration-fast) var(--vc-ease),
		box-shadow var(--vc-duration-fast) var(--vc-ease);
}

.vc-com-row + .vc-com-row {
	margin-top: var(--vc-space-2);
}

.vc-com-row:hover {
	border-color: color-mix(in srgb, var(--vc-color-primary) 40%, transparent);
	box-shadow: var(--vc-shadow-card);
}

/* La poignée dit que la ligne se déplace. Sans elle, le glisser-déposer est
   une fonctionnalité que personne ne découvre. */
.vc-com-grip {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	color: var(--vc-color-border);
	cursor: grab;
	transition: color var(--vc-duration-fast) var(--vc-ease);
}

.vc-com-row:hover .vc-com-grip {
	color: var(--vc-color-text-muted);
}

.vc-com-row.vc-sortable--dragging {
	opacity: .5;
}

.vc-com-row.vc-sortable--over {
	border-color: var(--vc-color-primary);
}

.vc-com-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1 1 auto;
}

.vc-com-body em {
	color: var(--vc-color-accent);
	font-size: var(--vc-font-size-xs);
	font-style: normal;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
}

.vc-com-body strong {
	font-size: var(--vc-font-size-sm);
	font-weight: 600;
}

.vc-com-meta {
	display: flex;
	align-items: center;
	gap: var(--vc-space-3);
	flex-wrap: wrap;
	color: var(--vc-color-text-muted);
	font-size: var(--vc-font-size-xs);
}

.vc-com-meta > span,
.vc-com-meta > a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

/* Coordonn�es cliquables : sur la vitrine publique, la seule diff�rence avec
   un simple span est ce lien � pas de couleur criarde pour un e-mail ou un
   num�ro, juste l'affordance au survol. */
.vc-com-meta > a {
	color: inherit;
	text-decoration: none;
}

.vc-com-meta > a:hover {
	color: var(--vc-color-primary);
	text-decoration: underline;
}

.vc-com-actions {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 2px;
}

/* ═══════════════════════════════════════════════════════════
   Compositeur : progression et historique
   ═══════════════════════════════════════════════════════════ */

.vc-compose-progress {
	margin: var(--vc-space-4) 0 0;
}

.vc-compose-bar {
	height: 6px;
	overflow: hidden;
	border-radius: var(--vc-radius-full);
	background: var(--vc-color-bg-alt);
}

.vc-compose-bar span {
	display: block;
	width: 0;
	height: 100%;
	border-radius: inherit;
	background: var(--vc-color-primary);
	transition: width var(--vc-duration-base) var(--vc-ease);
}

.vc-compose-progress p {
	margin: var(--vc-space-2) 0 0;
	color: var(--vc-color-text-muted);
	font-size: var(--vc-font-size-xs);
	font-variant-numeric: tabular-nums;
}

/* -- Compositeur : barre d'outils (templates, variables, layout) -- */

.vc-compose-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--vc-space-2);
	margin: 0 0 var(--vc-space-2);
	padding: var(--vc-space-2);
	border: 1px solid var(--vc-color-border);
	border-radius: var(--vc-radius-md);
	background: var(--vc-color-bg-alt);
}

.vc-compose-toolbar-sep {
	width: 1px;
	height: 20px;
	background: var(--vc-color-border);
}

.vc-compose-layout {
	display: flex;
	align-items: center;
	gap: var(--vc-space-2);
	margin-left: auto;
	font-size: var(--vc-font-size-xs);
	color: var(--vc-color-text-muted);
}

.vc-compose-layout select {
	padding: 4px 8px;
	border: 1px solid var(--vc-color-border);
	border-radius: var(--vc-radius-sm);
	background: var(--vc-color-bg);
	font-size: var(--vc-font-size-xs);
}

/* Menu des variables � m�mes classes que la page d'envoi de vc-newsletter-golf */

.vc-variable-dropdown {
	position: relative;
	display: inline-flex;
}

.vc-variable-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 40;
	min-width: 260px;
	max-height: 320px;
	overflow-y: auto;
	margin-top: var(--vc-space-1);
	border: 1px solid var(--vc-color-border);
	border-radius: var(--vc-radius-md);
	background: var(--vc-color-bg);
	box-shadow: var(--vc-shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.12));
}

.vc-variable-group-label {
	padding: var(--vc-space-2) var(--vc-space-3) var(--vc-space-1);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--vc-color-primary);
}

.vc-variable-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vc-space-2);
	width: 100%;
	padding: var(--vc-space-2) var(--vc-space-3);
	border: none;
	background: none;
	text-align: left;
	font-size: var(--vc-font-size-sm);
	color: var(--vc-color-text);
	cursor: pointer;
}

.vc-variable-item:hover {
	background: var(--vc-color-bg-alt);
}

.vc-variable-key {
	padding: 2px 6px;
	border-radius: var(--vc-radius-sm);
	background: var(--vc-color-bg-alt);
	font-family: monospace;
	font-size: 12px;
	color: var(--vc-color-text-muted);
	white-space: nowrap;
}

/* Panneau sous la barre : templates, sauvegarde, articles */

.vc-compose-panel {
	margin: 0 0 var(--vc-space-2);
	padding: var(--vc-space-3);
	border: 1px solid var(--vc-color-border);
	border-radius: var(--vc-radius-md);
	background: var(--vc-color-bg);
}

.vc-compose-panel-search {
	width: 100%;
	margin: 0 0 var(--vc-space-2);
}

.vc-compose-panel-list {
	display: grid;
	gap: var(--vc-space-1);
	max-height: 220px;
	overflow-y: auto;
}

.vc-compose-template {
	display: grid;
	gap: 2px;
	padding: var(--vc-space-2) var(--vc-space-3);
	border: 1px solid var(--vc-color-border);
	border-radius: var(--vc-radius-sm);
	background: var(--vc-color-bg);
	text-align: left;
	cursor: pointer;
}

.vc-compose-template:hover {
	border-color: var(--vc-color-primary);
	background: var(--vc-color-bg-alt);
}

.vc-compose-template strong {
	font-size: var(--vc-font-size-sm);
}

.vc-compose-template span {
	font-size: var(--vc-font-size-xs);
	color: var(--vc-color-text-muted);
}

.vc-compose-panel-save {
	display: flex;
	gap: var(--vc-space-2);
}

.vc-compose-panel-save input {
	flex: 1;
}

.vc-compose-articles-all {
	margin-bottom: var(--vc-space-2);
}

/* Les sources du panneau Contenu : une rang�e de pastilles */

.vc-compose-src {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vc-space-1);
	margin: 0 0 var(--vc-space-2);
}

.vc-compose-src button {
	padding: 4px var(--vc-space-3);
	border: 1px solid var(--vc-color-border);
	border-radius: var(--vc-radius-full);
	background: var(--vc-color-bg);
	font-size: var(--vc-font-size-xs);
	color: var(--vc-color-text-muted);
	cursor: pointer;
}

.vc-compose-src button:hover {
	border-color: var(--vc-color-primary);
	color: var(--vc-color-primary);
}

.vc-compose-src button.is-active {
	border-color: var(--vc-color-primary);
	background: var(--vc-color-primary);
	color: #fff;
	font-weight: 600;
}

/* Ajout de personnes individuelles � l'envoi */

.vc-compose-people {
	margin: 0 0 var(--vc-space-3);
}

/* Le décompte « 3 membre(s) sur 3 recevront ce message » ouvre la liste
   des destinataires (newsletter-composer-shared.js). */
.vc-compose-note-link {
	cursor: pointer;
}

.vc-compose-note-link::after {
	content: " →";
	color: var(--vc-color-primary);
	font-weight: 600;
}

.vc-compose-note-link:hover,
.vc-compose-note-link:focus-visible {
	background: color-mix(in srgb, var(--vc-color-primary) 8%, var(--vc-color-bg-alt));
	outline: none;
}

/* ── Qui recevra ce message : liste nominative, retirer / rétablir ── */
.vc-compose-audience {
	margin-top: var(--vc-space-4);
	padding-top: var(--vc-space-3);
	border-top: 1px solid var(--vc-color-border-soft);
}

/* Volet principal, replié par défaut comme « Non joignables » : son titre
   garde le poids d'un intitulé et la pastille du nombre de destinataires. */
.vc-compose-audience-main > summary {
	color: var(--vc-color-text);
	font-size: var(--vc-font-size-sm);
	font-weight: 600;
}

.vc-compose-audience-count {
	padding: 0 8px;
	border-radius: var(--vc-radius-full);
	background: var(--vc-color-primary);
	color: var(--vc-color-surface);
	font-size: var(--vc-font-size-xs);
	line-height: 1.6;
}

.vc-compose-audience-list {
	max-height: 260px;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	list-style: none;
	border: 1px solid var(--vc-color-border-soft);
	border-radius: var(--vc-radius-sm);
}

.vc-compose-audience-list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vc-space-2);
	padding: 5px 8px 5px 10px;
	font-size: var(--vc-font-size-sm);
}

.vc-compose-audience-list li + li {
	border-top: 1px solid var(--vc-color-border-soft);
}

.vc-compose-audience-list.is-muted li {
	color: var(--vc-color-text-muted);
}

.vc-compose-audience-name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vc-compose-audience-name em {
	font-size: var(--vc-font-size-xs);
}

.vc-compose-audience-list button {
	flex: 0 0 auto;
	min-width: 24px;
	padding: 0 6px;
	border: 1px solid transparent;
	border-radius: var(--vc-radius-sm);
	background: none;
	color: var(--vc-color-text-muted);
	font-size: var(--vc-font-size-sm);
	line-height: 22px;
	cursor: pointer;
}

.vc-compose-audience-list button[data-remove]:hover,
.vc-compose-audience-list button[data-remove]:focus-visible {
	border-color: var(--vc-color-border);
	color: var(--vc-color-accent);
}

.vc-compose-audience-list button[data-restore] {
	border-color: var(--vc-color-border);
	color: var(--vc-color-primary);
	font-size: var(--vc-font-size-xs);
}

.vc-compose-audience-more {
	margin-top: var(--vc-space-2);
}

.vc-compose-audience-more summary {
	margin-bottom: var(--vc-space-1);
	color: var(--vc-color-text-muted);
	font-size: var(--vc-font-size-xs);
	cursor: pointer;
}

.vc-compose-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vc-space-1);
}

.vc-compose-chips:not(:empty) {
	margin-bottom: var(--vc-space-2);
}

.vc-compose-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--vc-space-1);
	padding: 2px var(--vc-space-2);
	border-radius: var(--vc-radius-full);
	background: var(--vc-color-bg-alt);
	font-size: var(--vc-font-size-xs);
}

.vc-compose-chip button {
	border: none;
	background: none;
	padding: 0 2px;
	color: var(--vc-color-text-muted);
	font-size: var(--vc-font-size-sm);
	line-height: 1;
	cursor: pointer;
}

.vc-compose-chip button:hover {
	color: var(--vc-color-danger, #c0392b);
}

.vc-compose-people-search {
	position: relative;
}

.vc-compose-people-search input {
	width: 100%;
}

.vc-compose-people-results {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 40;
	margin-top: var(--vc-space-1);
	border: 1px solid var(--vc-color-border);
	border-radius: var(--vc-radius-md);
	background: var(--vc-color-bg);
	box-shadow: var(--vc-shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.12));
	max-height: 240px;
	overflow-y: auto;
}

.vc-compose-people-results button {
	display: flex;
	align-items: center;
	gap: var(--vc-space-2);
	width: 100%;
	padding: var(--vc-space-2) var(--vc-space-3);
	border: none;
	background: none;
	text-align: left;
	font-size: var(--vc-font-size-sm);
	cursor: pointer;
}

.vc-compose-people-results button:hover {
	background: var(--vc-color-bg-alt);
}

.vc-compose-people-results img {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	object-fit: cover;
}

.vc-compose-people-results .vc-manage-hint {
	margin: 0;
	padding: var(--vc-space-2) var(--vc-space-3);
}

/* Adresse externe : proposition dans les r�sultats, puce distincte */

.vc-compose-add-email {
	display: block;
	width: 100%;
	padding: var(--vc-space-2) var(--vc-space-3);
	border: none;
	background: none;
	text-align: left;
	font-size: var(--vc-font-size-sm);
	color: var(--vc-color-primary);
	font-weight: 600;
	cursor: pointer;
}

.vc-compose-add-email:hover {
	background: var(--vc-color-bg-alt);
}

.vc-compose-chip--ext {
	border: 1px dashed var(--vc-color-border);
	background: var(--vc-color-bg);
	font-style: italic;
}

/* Passe-droit administrateur sur les consentements */

.vc-compose-force {
	display: flex;
	align-items: center;
	gap: var(--vc-space-2);
	margin-top: var(--vc-space-2);
	font-size: var(--vc-font-size-sm);
	color: var(--vc-color-danger, #c0392b);
	cursor: pointer;
}

.vc-compose-force-hint {
	color: var(--vc-color-danger, #c0392b);
}

/* -- Compositeur : onglets �diteur / Aper�u -- */

.vc-compose-tabs {
	display: flex;
	gap: var(--vc-space-1);
	margin: 0 0 var(--vc-space-2);
	border-bottom: 1px solid var(--vc-color-border);
}

.vc-compose-tabs button {
	display: inline-flex;
	align-items: center;
	gap: var(--vc-space-1);
	padding: var(--vc-space-2) var(--vc-space-3);
	border: none;
	border-bottom: 2px solid transparent;
	background: none;
	font-size: var(--vc-font-size-sm);
	color: var(--vc-color-text-muted);
	cursor: pointer;
}

.vc-compose-tabs button.is-active {
	color: var(--vc-color-primary);
	border-bottom-color: var(--vc-color-primary);
	font-weight: 600;
}

/* Masque le champ sans le d�sactiver � un champ disabled sortirait le
   message de formValues() et l'envoi partirait vide. */
.vc-compose-field-hidden {
	display: none !important;
}

.vc-compose-preview iframe {
	width: 100%;
	height: 420px;
	border: 1px solid var(--vc-color-border);
	border-radius: var(--vc-radius-md);
	background: #ffffff;
}

.vc-compose-preview-bar {
	display: flex;
	justify-content: flex-end;
	margin: 0 0 var(--vc-space-2);
}

/* -- Compositeur : accord�on Destinataires -- */

/* `hidden` doit gagner m�me contre un display explicite � c'est lui qui
   replie les panneaux du compositeur. */
.vc-compose-adv[hidden],
.vc-compose-people[hidden],
.vc-compose-panel[hidden],
.vc-compose-preview[hidden],
.vc-variable-menu[hidden] {
	display: none !important;
}

.vc-compose-acc {
	margin: 0 0 var(--vc-space-3);
	border: 1px solid var(--vc-color-border);
	border-radius: var(--vc-radius-md);
	background: var(--vc-color-bg);
}

.vc-compose-acc > summary {
	display: flex;
	align-items: center;
	gap: var(--vc-space-2);
	padding: var(--vc-space-2) var(--vc-space-3);
	font-size: var(--vc-font-size-sm);
	font-weight: 600;
	color: var(--vc-color-text);
	cursor: pointer;
	list-style: none;
	user-select: none;
}

.vc-compose-acc > summary::-webkit-details-marker {
	display: none;
}

.vc-compose-acc-chevron {
	margin-left: auto;
	display: inline-flex;
	transition: transform var(--vc-duration-base) var(--vc-ease);
}

.vc-compose-acc[open] .vc-compose-acc-chevron {
	transform: rotate(90deg);
}

.vc-compose-acc-body {
	padding: var(--vc-space-2) var(--vc-space-3) var(--vc-space-3);
	border-top: 1px solid var(--vc-color-border);
}

.vc-compose-acc-body .vc-compose-people {
	margin: 0;
}

/* Le panneau vit d�j� dans le cadre de l'accord�on : pas de second cadre. */
.vc-compose-acc-body .vc-compose-adv {
	margin: 0;
	padding: 0;
	border: none;
	background: transparent;
}

/* -- Compositeur : panneau Destinataires (source, groupes, individuel) -- */

/* La bascule vers le choix libre : une porte discr�te en bas de l'accord�on,
   visible du seul administrateur. */
.vc-compose-scope-toggle {
	margin-top: var(--vc-space-2);
	padding: 0;
	border: none;
	background: none;
	font-size: var(--vc-font-size-xs);
	color: var(--vc-color-text-muted);
	text-decoration: underline;
	cursor: pointer;
}

.vc-compose-scope-toggle:hover {
	color: var(--vc-color-primary);
}

.vc-compose-adv {
	display: grid;
	gap: var(--vc-space-3);
	margin: 0 0 var(--vc-space-3);
	padding: var(--vc-space-3);
	border: 1px solid var(--vc-color-border);
	border-radius: var(--vc-radius-md);
	background: var(--vc-color-bg);
}

.vc-compose-adv-row {
	display: grid;
	grid-template-columns: 90px 1fr;
	gap: var(--vc-space-2);
	align-items: start;
}

.vc-compose-adv-row > span {
	padding-top: 6px;
	font-size: var(--vc-font-size-xs);
	font-weight: 600;
	color: var(--vc-color-text-muted);
}

.vc-compose-adv-row select,
.vc-compose-adv-field input {
	width: 100%;
}

.vc-compose-adv-field {
	display: grid;
	gap: var(--vc-space-2);
}

.vc-compose-checklist {
	display: grid;
	gap: 4px;
	max-height: 180px;
	overflow-y: auto;
	margin-top: 0;
	padding: var(--vc-space-2);
	border: 1px solid var(--vc-color-border-soft);
	border-radius: var(--vc-radius-md);
	background: var(--vc-color-bg-alt);
	box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.02);
}

.vc-compose-check {
	display: grid;
	grid-template-columns: 18px minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--vc-space-2);
	padding: 6px 8px;
	border: 1px solid transparent;
	border-radius: var(--vc-radius-sm);
	font-size: var(--vc-font-size-sm);
	cursor: pointer;
}

.vc-compose-check:hover {
	background: rgba(14, 38, 35, 0.03);
	border-color: rgba(14, 38, 35, 0.06);
}

.vc-compose-check input {
	appearance: none;
	-webkit-appearance: none;
	width: 16px;
	height: 16px;
	margin: 0;
	border: 1.5px solid var(--vc-color-border);
	border-radius: 4px;
	background: var(--vc-color-surface);
	display: inline-grid;
	place-items: center;
	transition: all var(--vc-duration-fast) var(--vc-ease);
}

.vc-compose-check input:checked {
	background: var(--vc-color-primary);
	border-color: var(--vc-color-primary);
}

.vc-compose-check input:checked::after {
	content: "";
	display: block;
	width: 4px;
	height: 8px;
	border: solid var(--vc-color-cream);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) translateY(-1px);
}

.vc-compose-check span {
	min-width: 0;
	overflow-wrap: anywhere;
}

.vc-compose-check em {
	margin-left: 0;
	font-style: normal;
	font-size: var(--vc-font-size-xs);
	color: var(--vc-color-text-muted);
	white-space: nowrap;
	justify-self: end;
}

.vc-compose-custom-estimate {
	margin: 0;
	font-size: var(--vc-font-size-sm);
	color: var(--vc-color-text-muted);
	font-variant-numeric: tabular-nums;
}

.vc-compose-people-results button em {
	margin-left: auto;
	font-style: normal;
	font-size: var(--vc-font-size-xs);
	color: var(--vc-color-text-muted);
}

@media (max-width: 900px) {
	/* En mode app, un champ trop long ne doit jamais pousser la page en
	   largeur : la navigation basse doit rester pleinement visible. */
	body.vc-app .vc-section-content {
		overflow-x: clip;
	}
}

@media (max-width: 600px) {
	.vc-compose-adv-row {
		grid-template-columns: 1fr;
	}

	.vc-compose-adv-row > span {
		padding-top: 0;
	}
}

.vc-mem-history {
	margin-top: var(--vc-space-8);
	padding-top: var(--vc-space-4);
	border-top: 1px solid var(--vc-color-border);
}

.vc-mem-history h3 {
	display: flex;
	align-items: center;
	gap: var(--vc-space-2);
	margin: 0 0 var(--vc-space-3);
	color: var(--vc-color-text-muted);
	font-size: var(--vc-font-size-sm);
	text-transform: uppercase;
	letter-spacing: .04em;
}

.vc-mem-history ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vc-mem-history li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--vc-space-4);
	flex-wrap: wrap;
	padding: var(--vc-space-2) 0;
	font-size: var(--vc-font-size-xs);
}

.vc-mem-history li + li {
	border-top: 1px solid var(--vc-color-border);
}

.vc-mem-history-subject {
	color: var(--vc-color-text);
	font-weight: 600;
}

.vc-mem-history-meta {
	color: var(--vc-color-text-muted);
}

@media (prefers-reduced-motion: reduce) {
	.vc-com-row {
		animation: none;
	}
}

/* La barre de tête d'un article : retour à gauche, partage à droite. Le lien
   se copie mieux qu'il ne se lit — sur mobile la barre d'adresse est tronquée. */
/* La barre m�lait le retour, l'�tat et les outils d'�dition sans rien s�parer :
   on ne voyait pas d'un coup d'oeil ce qui ram�ne en arri�re et ce qui modifie.
   Un filet la d�tache du texte, les outils se regroupent � droite. */
.vc-article-detail-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vc-space-4);
	flex-wrap: wrap;
	margin-bottom: var(--vc-space-5);
	padding-bottom: var(--vc-space-3);
	border-bottom: 1px solid var(--vc-color-border);
}

.vc-article-detail-lead,
.vc-article-detail-actions {
	display: flex;
	align-items: center;
	gap: var(--vc-space-2);
	min-width: 0;
}

/* L'article se lit avant de se publier : le brouillon s'annonce. */
.vc-article-detail-draft {
	flex: 0 0 auto;
	padding: 2px 10px;
	border-radius: var(--vc-radius-full);
	background: var(--vc-color-cream-2);
	color: var(--vc-color-grey-700);
	font-size: var(--vc-font-size-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
}

/* ─── Widgets : informations mises en avant ────────────────────────────────
 *
 * La carte reprend celle des actualités : même surface, même filet, même rayon,
 * même soulèvement au survol. Les pastilles d'action sont le composant commun
 * `.vc-item-actions`, déjà utilisé par la galerie et les actualités — un jeu
 * de boutons propre à ce module aurait détonné dès le premier survol.
 */
.vc-infoblocks-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--vc-space-4);

	/* Sans cela, toutes les cartes d'une rang�e prennent la hauteur de la plus
	   haute : trois coordonn�es � c�t� d'une affiche donnaient un cadre vide
	   sur les deux tiers de la carte. Chacune garde maintenant sa hauteur. */
	align-items: start;
}

/* Largeur d'un bloc, en colonnes de la grille.
 *
 * Quatre r�gles litt�rales plut�t qu'un `span min(var(--n), 4)` : `span`
 * n'accepte qu'un entier �crit tel quel, et les navigateurs jettent la
 * d�claration enti�re d�s qu'on y glisse une fonction. La premi�re version
 * faisait exactement cela � la largeur n'avait aucun effet.
 *
 * `span N` ne d�borde pas d'une grille plus �troite : la grille ram�ne la
 * demande au nombre de colonnes disponibles.
 */
.vc-infoblock--span-2 { grid-column: span 2; }
.vc-infoblock--span-3 { grid-column: span 3; }
.vc-infoblock--span-4 { grid-column: span 4; }

@media (max-width: 700px) {
	.vc-infoblock--span-2,
	.vc-infoblock--span-3,
	.vc-infoblock--span-4 {
		grid-column: span 1;
	}
}

.vc-infoblock {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--vc-space-3);
	padding: var(--vc-space-4);
	background: var(--vc-color-surface);
	border: 1px solid var(--vc-color-border-soft);
	border-radius: var(--vc-radius-lg);
	animation: vc-rise var(--vc-duration-base) var(--vc-ease-out) both;
	animation-delay: calc(60ms + var(--i, 0) * 60ms);
	transition: transform var(--vc-duration-base) var(--vc-ease),
	            box-shadow var(--vc-duration-base) var(--vc-ease),
	            border-color var(--vc-duration-base) var(--vc-ease);
}

.vc-infoblock:hover {
	transform: translateY(-4px);
	box-shadow: var(--vc-shadow-lg);
	border-color: var(--vc-color-accent);
}

.vc-infoblock:hover .vc-item-actions,
.vc-infoblock:focus-within .vc-item-actions {
	opacity: 1;
}

/* Un bloc masqué reste visible du gestionnaire, mais se distingue au premier
   coup d'oeil : sans cela, on le croit publié. */
.vc-infoblock--hidden {
	opacity: .55;
	border-style: dashed;
}

.vc-infoblock-title {
	margin: 0;
	font-size: var(--vc-font-size-base);
	font-weight: 600;
	line-height: 1.3;
}

.vc-infoblock-media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--vc-radius-md);
}

.vc-infoblock-text {
	font-size: var(--vc-font-size-sm);
	line-height: 1.55;
	color: var(--vc-color-text-muted);
}

.vc-infoblock-text > :first-child { margin-top: 0; }
.vc-infoblock-text > :last-child  { margin-bottom: 0; }

.vc-infoblock-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--vc-space-2);
}

.vc-infoblock-links a {
	display: flex;
	align-items: center;
	gap: var(--vc-space-2);
	font-size: var(--vc-font-size-sm);
	text-decoration: none;
	color: inherit;
}

.vc-infoblock-links .vc-icon {
	flex: none;
	color: var(--vc-color-primary);
	opacity: .7;
}

.vc-infoblock-links a:hover span {
	text-decoration: underline;
}

/* Le bouton ferme la carte : il se pose en bas, quelle que soit la hauteur du
   texte au-dessus, pour que les cartes d'une même rangée s'alignent. */
/* Plus de `margin-top: auto` : il servait � coller le bouton en bas d'une carte
   �tir�e. Les cartes gardant d�sormais leur hauteur, il ne faisait qu'ouvrir un
   vide entre le contenu et le bouton. */
.vc-infoblock-cta {
	align-self: flex-start;
}

/* Grille d'informations : autant de colonnes que la largeur en autorise.
 *
 * Il n'y a plus de r�glage de colonnes. Le bloc a d�j� sa largeur (� Largeur du
 * bloc �) ; le nombre de colonnes en d�coule. Deux r�glages pour une seule
 * intention obligeaient � les accorder � la main, et le second ne servait qu'�
 * d�faire le premier.
 *
 * `auto-fit` sur une largeur minimale lisible suffit : un bloc �troit tient une
 * colonne, un bloc sur toute la largeur en aligne quatre ou cinq, et le
 * t�l�phone retombe sur une seule sans rien d�clarer de plus.
 */
.vc-infoblock-grid {
	display: grid;
	gap: var(--vc-space-3) var(--vc-space-4);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
	margin: 0;
}

.vc-infoblock-item {
	min-width: 0;
}

/* Le libell� est une �tiquette discr�te ; la valeur porte l'information et son
   ic�ne. Empiler ic�ne, libell� puis valeur sur trois lignes � le premier
   essai � donnait un bloc trois fois plus haut que ce qu'il disait. */
.vc-infoblock-item dt {
	margin: 0 0 1px;
	font-size: var(--vc-font-size-xs, .75rem);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	line-height: 1.3;
	color: var(--vc-color-text-muted);
}

.vc-infoblock-item dd {
	display: flex;
	align-items: baseline;
	gap: var(--vc-space-2);
	margin: 0;
	font-size: var(--vc-font-size-sm);
	line-height: 1.35;
	/* Un num�ro long ne doit pas d�border de sa colonne. */
	overflow-wrap: anywhere;
}

.vc-infoblock-item dd .vc-icon {
	flex: none;
	/* `baseline` poserait le SVG sur sa base, donc trop bas : ce d�calage le
	   remet sur la ligne du texte. */
	transform: translateY(2px);
	color: var(--vc-color-primary);
	opacity: .7;
}

.vc-infoblock-item dd a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--vc-color-border);
}

.vc-infoblock-item dd a:hover {
	border-bottom-color: var(--vc-color-primary);
}

/* �diteur de coordonn�es, dans la modale des blocs.
 *
 * Trois champs par ligne plut�t qu'une syntaxe � conna�tre. La poign�e sert au
 * glisser-d�poser ; les pastilles reprennent `.vc-item-action`, comme partout.
 */
.vc-contact-editor {
	display: flex;
	flex-direction: column;
	gap: var(--vc-space-2);
	align-items: flex-start;
}

.vc-contact-rows {
	display: flex;
	flex-direction: column;
	gap: var(--vc-space-2);
	width: 100%;
}

/* Les proportions ne sont pas �gales : un libell� tient en deux mots, une
   valeur peut �tre une adresse, et la nature est un choix court. Trois colonnes
   de m�me largeur gaspillaient la place l� o� elle manquait. */
.vc-contact-row {
	display: grid;
	grid-template-columns: 18px minmax(0, 1fr) minmax(0, 1.5fr) 130px 30px;
	align-items: center;
	gap: 6px;
}

/* Ces champs sont plus serr�s que ceux du formulaire : une ligne de carnet
   d'adresses n'a pas besoin de la m�me respiration qu'un champ isol�.
 *
 * Le s�lecteur part de `.vc-manage-field` volontairement. La r�gle g�n�rique du
 * formulaire est `.vc-manage-field input[type="text"]` (0,2,1) ; un simple
 * `.vc-contact-row input` (0,1,1) perd et ne s'applique jamais � c'�tait le cas
 * de la premi�re version, dont ni la taille ni la couleur ne prenaient effet.
 *
 * La couleur est pos�e explicitement : la r�gle g�n�rique dit `color: inherit`,
 * et l'h�ritage traverse ici trois conteneurs de plus que dans un champ normal.
 */
.vc-manage-field .vc-contact-row input,
.vc-manage-field .vc-contact-row select {
	padding: 6px 8px;
	font-size: .875rem;
	color: var(--vc-color-text, #111827);
	background: #fff;
	/* Le remplissage automatique du navigateur impose sa propre couleur de
	   texte, qui ignore `color`. */
	-webkit-text-fill-color: currentColor;
}

.vc-manage-field .vc-contact-row input::placeholder {
	color: var(--vc-color-text-muted, #6b7280);
	opacity: 1;
}

.vc-contact-row .vc-item-action {
	position: static;
	opacity: 1;
	width: 30px;
	height: 30px;
	background: transparent;
	box-shadow: none;
	color: var(--vc-color-text-muted);
}

.vc-contact-row .vc-item-action:hover {
	background: var(--vc-color-cream-2, #f5f5f0);
	color: #b32d2e;
}

.vc-contact-handle {
	display: grid;
	place-items: center;
	color: var(--vc-color-border);
	cursor: grab;
}

.vc-contact-row:hover .vc-contact-handle {
	color: var(--vc-color-text-muted);
}

.vc-contact-row.is-dragging {
	opacity: .5;
}

/* Sous 640 px, cinq colonnes deviennent illisibles : la ligne se replie en
   deux rangs, la poign�e et la corbeille encadrant les champs. */
/* Sous 640 px, cinq colonnes deviennent illisibles : la ligne se replie en
   trois rangs, la poign�e et la corbeille encadrant les champs empil�s. */
@media (max-width: 640px) {
	.vc-contact-row {
		grid-template-columns: 18px minmax(0, 1fr) 30px;
	}

	.vc-contact-row .vc-contact-value,
	.vc-contact-row .vc-contact-kind {
		grid-column: 2 / 3;
	}
}

/* --- Annuaire : statut, gestion d'un membre, suite de la liste -------------
 *
 * Le filtre de statut sort du panneau repliable : il valait � actifs � en dur,
 * et un membre suspendu �tait donc introuvable � donc impossible � r�activer.
 * C'est le seul filtre qui cachait des gens sans le dire ; il reste visible.
 */
.vc-mem-status-filter {
	display: flex;
	align-items: center;
	gap: var(--vc-space-2);
	font-size: var(--vc-font-size-sm);
	color: var(--vc-color-text-muted);
}

.vc-mem-status-filter select {
	padding: 7px 10px;
	border: 1px solid var(--vc-color-border);
	border-radius: 6px;
	background: #fff;
	color: var(--vc-color-text, #111827);
	font: inherit;
	font-size: var(--vc-font-size-sm);
}

/* La ligne d'un membre se termine d�sormais par son bouton de gestion. Il
   reste discret jusqu'au survol : trois cents lignes avec un bouton appuy�
   chacune donneraient une liste h�riss�e. */
.vc-mem-manage {
	flex: none;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: var(--vc-color-text-muted);
	cursor: pointer;
	opacity: .45;
	transition: opacity var(--vc-duration-fast) var(--vc-ease),
	            background var(--vc-duration-fast) var(--vc-ease);
}

.vc-mem-row:hover .vc-mem-manage,
.vc-mem-manage:focus-visible {
	opacity: 1;
	background: var(--vc-color-cream-2, #f5f5f0);
}

/* Au doigt il n'y a pas de survol : le bouton reste lisible. */
@media (hover: none) {
	.vc-mem-manage { opacity: 1; }
}

.vc-mem-more {
	display: block;
	margin: var(--vc-space-4) auto 0;
}

/* Les outils d'�dition d'un article forment un groupe visible, distinct de
   � copier le lien � qui, lui, sert � tout le monde. Sans ce fond, trois
   boutons fant�mes flottaient au m�me niveau que le bouton de retour. */
.vc-article-detail-actions {
	padding: 3px;
	border-radius: var(--vc-radius-md);
	background: var(--vc-color-cream-2, #f5f5f0);
}

/* Le bouton de retour se lit comme un chemin, pas comme un lien perdu : une
   pastille discr�te le distingue du titre qui suit. `margin-bottom` annule
   celui que le bouton porte hors de cette barre. */
.vc-article-detail-bar .vc-article-back-btn {
	margin-bottom: 0;
	padding: 5px 12px 5px 8px;
	border: 1px solid var(--vc-color-border-soft);
	border-radius: var(--vc-radius-full, 999px);
	background: var(--vc-color-surface);
	font-size: var(--vc-font-size-sm);
	cursor: pointer;
}

.vc-article-detail-bar .vc-article-back-btn:hover {
	border-color: var(--vc-color-accent);
}

/* Le premier paragraphe donne le ton : un peu plus grand que la suite, il
   ouvre l'article comme un chapeau sans qu'il faille en saisir un. */
.vc-article-detail-content > p:first-child {
	font-size: 1.0625em;
	color: var(--vc-color-text);
}

/* Les intertitres reprennent de l'air au-dessus d'eux : coll�s au paragraphe
   pr�c�dent, ils semblaient lui appartenir. */
.vc-article-detail-content h2,
.vc-article-detail-content h3,
.vc-article-detail-content h4 {
	max-width: 30ch;
}

/* La remise � z�ro globale grise le texte des listes (`ul, ol { color:
   grey-700 }`). Dans un article, une �num�ration fait partie du propos : elle
   doit se lire comme le reste, pas comme une note de bas de page. */
.vc-article-detail-content ul,
.vc-article-detail-content ol {
	margin-bottom: var(--vc-space-4);
	color: inherit;
}

/* Une image isol�e prend l'air autour d'elle plut�t que de coller au texte.
   `display: block` est d�j� pos� globalement sur les images : seuls la marge
   et l'arrondi manquent ici. */
.vc-article-detail-content p > img,
.vc-article-detail-content figure {
	margin: var(--vc-space-6) 0;
	border-radius: var(--vc-radius-md);
}

/* Une image d'article reprend la mesure du texte : une photo pleine largeur
   au milieu d'un paragraphe de 70 caract�res casse la colonne de lecture. */
.vc-article-detail-content figure,
.vc-article-detail-content img {
	max-width: 100%;
	height: auto;
}

/* Sous 700 px, la barre passe sur deux rangs plut�t que d'�craser les
   libell�s : le retour d'abord, les outils dessous. */
@media (max-width: 700px) {
	.vc-article-detail-bar {
		align-items: stretch;
	}

	.vc-article-detail-actions {
		margin-left: auto;
	}
}

/* ─── Accueil : organisation des blocs ───────────────────────────────────
   Bouton du membre admin (section-dashboard.js) et liste réordonnable de la
   fenêtre « Ordre des blocs de l'accueil » — flèches plutôt que glisser-
   déposer, qui ne fonctionne pas au doigt. */

.vc-dash-customize {
	display: flex;
	justify-content: flex-end;
	margin: 0 0 var(--vc-space-4);
}

.vc-order-list {
	display: grid;
	gap: var(--vc-space-2);
	margin: 0 0 var(--vc-space-4);
	padding: 0;
	list-style: none;
}

.vc-order-item {
	display: flex;
	align-items: center;
	gap: var(--vc-space-3);
	padding: var(--vc-space-2) var(--vc-space-3);
	border: 1px solid var(--vc-color-border);
	border-radius: var(--vc-radius-md);
	background: var(--vc-color-surface);
}

.vc-order-rank {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	display: grid;
	place-items: center;
	border-radius: var(--vc-radius-full);
	background: var(--vc-color-bg-alt);
	color: var(--vc-color-text-muted);
	font-size: var(--vc-font-size-xs);
	font-weight: 600;
}

.vc-order-label {
	flex: 1 1 auto;
	font-weight: 500;
}

.vc-order-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-right: var(--vc-space-2);
	font-size: var(--vc-font-size-xs);
	color: var(--vc-color-text-muted);
	cursor: pointer;
}

.vc-order-toggle input {
	width: 16px;
	height: 16px;
	accent-color: var(--vc-color-primary);
}

.vc-order-item.is-off .vc-order-label {
	color: var(--vc-color-text-muted);
	text-decoration: line-through;
}

.vc-order-item.is-off .vc-order-rank {
	opacity: .5;
}

/* Bloc masqué aux visiteurs, montré au seul membre admin : grisé, étiqueté. */
.vc-dash-block--hidden {
	position: relative;
	opacity: .55;
	outline: 1px dashed var(--vc-color-border);
	outline-offset: 4px;
}

.vc-dash-block--hidden::before {
	content: attr(data-hidden-label);
	position: absolute;
	top: -10px;
	right: 12px;
	z-index: 1;
	padding: 1px 8px;
	border-radius: var(--vc-radius-full);
	background: var(--vc-color-ink-soft);
	color: var(--vc-color-white);
	font-size: .7rem;
	font-weight: 600;
}

.vc-order-item .vc-btn:disabled {
	opacity: .35;
	cursor: default;
}

/* ─── Actualités : barre de vue, liste, dernières actualités ─────────────
   section-articles.js — vue par dossiers ou fil complet, cartes ou liste,
   tri. La liste reprend l'habillage des lignes de l'accueil (.vc-dash-list). */

.vc-articles-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--vc-space-3);
	margin: 0 0 var(--vc-space-5);
}

.vc-articles-defaults {
	margin-left: auto;
}

.vc-segmented {
	display: inline-flex;
	padding: 2px;
	border: 1px solid var(--vc-color-border);
	border-radius: var(--vc-radius-full);
	background: var(--vc-color-surface);
}

.vc-segmented-option {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border: 0;
	border-radius: var(--vc-radius-full);
	background: transparent;
	color: var(--vc-color-text-muted);
	font: inherit;
	font-size: var(--vc-font-size-xs);
	cursor: pointer;
	transition: background var(--vc-duration-fast) var(--vc-ease), color var(--vc-duration-fast) var(--vc-ease);
}

.vc-segmented-option:hover {
	color: var(--vc-color-text);
}

.vc-segmented-option.is-active {
	background: var(--vc-color-primary);
	color: var(--vc-color-white);
	cursor: default;
}

.vc-segmented-option:focus-visible {
	outline: 2px solid var(--vc-color-primary);
	outline-offset: 2px;
}

.vc-articles-sort {
	display: inline-flex;
	align-items: center;
	gap: var(--vc-space-2);
	font-size: var(--vc-font-size-xs);
	color: var(--vc-color-text-muted);
}

.vc-articles-sort select {
	padding: 5px 28px 5px 10px;
	border: 1px solid var(--vc-color-border);
	border-radius: var(--vc-radius-md);
	background-color: var(--vc-color-surface);
	font: inherit;
	font-size: var(--vc-font-size-xs);
	color: var(--vc-color-text);
}

/* Sur téléphone, les libellés du mode cèdent la place aux icônes : la barre
   tient sur une ligne au lieu de trois. */
@media (max-width: 560px) {
	.vc-segmented-label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.vc-articles-defaults {
		margin-left: 0;
	}
}

.vc-articles-recent {
	margin: 0 0 var(--vc-space-6);
	padding: var(--vc-space-4);
	border: 1px solid var(--vc-color-border-soft);
	border-radius: var(--vc-radius-lg);
	background: var(--vc-color-surface);
}

.vc-articles-list {
	display: grid;
	gap: var(--vc-space-2);
	margin: 0 0 var(--vc-space-6);
	padding: 0;
	list-style: none;
}

.vc-articles-recent .vc-articles-list {
	margin: 0;
	gap: 0;
}

/* `min-width: 0` : un élément de grille ne rétrécit pas sous la largeur de
   son contenu par défaut — un titre ou un extrait sans espace (une ligne de
   « ------ » importée de Blogspot) élargissait la ligne hors de l'écran. */
.vc-article-row {
	position: relative;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: var(--vc-space-4);
	padding: var(--vc-space-3);
	border: 1px solid var(--vc-color-border-soft);
	border-radius: var(--vc-radius-md);
	background: var(--vc-color-surface);
	cursor: pointer;
	transition:
		background var(--vc-duration-fast) var(--vc-ease),
		transform var(--vc-duration-fast) var(--vc-ease);
}

.vc-articles-list--compact .vc-article-row {
	padding: var(--vc-space-2) var(--vc-space-3);
	border: 0;
	background: transparent;
}

.vc-article-row:hover {
	background: var(--vc-color-bg-alt);
	transform: translateX(3px);
}

.vc-article-row:hover .vc-item-actions,
.vc-article-row:focus-within .vc-item-actions {
	opacity: 1;
}

.vc-article-row .vc-item-actions {
	top: 50%;
	transform: translateY(-50%);
}

.vc-article-row .vc-article-langs {
	position: static;
	flex: 0 0 auto;
}

.vc-article-row--draft {
	opacity: .72;
	border-style: dashed;
}

.vc-article-row-thumb {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: var(--vc-radius-sm);
	object-fit: cover;
}

.vc-articles-list--compact .vc-article-row-thumb {
	width: 40px;
	height: 40px;
}

.vc-article-row-thumb--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--vc-color-bg-alt);
	color: var(--vc-color-text-muted);
}

.vc-article-row-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.vc-article-row-title {
	font-size: var(--vc-font-size-sm);
	font-weight: 600;
	overflow-wrap: anywhere;
}

/* L'extrait passe à la ligne (deux lignes au plus) au lieu de filer sur une
   seule, et coupe au besoin les suites de caractères sans espace. */
.vc-article-row-excerpt {
	display: -webkit-box;
	overflow: hidden;
	color: var(--vc-color-text-muted);
	font-size: var(--vc-font-size-xs);
	overflow-wrap: anywhere;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.vc-article-row-meta {
	min-width: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
	color: var(--vc-color-text-muted);
	font-size: var(--vc-font-size-xs);
}

.vc-article-row-folder {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 0 8px;
	border-radius: var(--vc-radius-full);
	background: var(--vc-color-bg-alt);
}

/* ─── Compositeur : effacer, layout de la section ───────────────────────── */

.vc-compose-clear {
	margin-right: auto;
}

.vc-compose-layout-pin:disabled {
	opacity: .7;
	cursor: default;
}

@media (prefers-reduced-motion: reduce) {
	.vc-article-row,
	.vc-segmented-option {
		transition: none;
	}

	.vc-article-row:hover {
		transform: none;
	}
}

/* ─── Compositeur de newsletter — mise en page (22/09/2026) ──────────────
   newsletter-composer-shared.js, buildComposerLayout() : à gauche ce qu'on
   écrit (objet, éditeur, aperçu), à droite la palette à onglets (Contenu,
   Variables, Modèles, Destinataires), en pied le décompte des destinataires
   à côté du bouton d'envoi. Sous 900 px, tout s'empile. */

.vc-manage-modal-box.vc-compose-box {
	display: flex;
	flex-direction: column;
	max-width: 1180px;
	height: min(92vh, 940px);
	overflow: hidden;
}

.vc-compose-title-icon {
	display: inline-grid;
	place-items: center;
	width: 30px;
	height: 30px;
	margin-right: 10px;
	border-radius: var(--vc-radius-full);
	background: color-mix(in srgb, var(--vc-color-primary) 12%, transparent);
	color: var(--vc-color-primary);
	vertical-align: middle;
}

.vc-compose-box .vc-manage-modal-head h3 {
	display: flex;
	align-items: center;
}

.vc-manage-form.vc-compose-form {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0;
	min-height: 0;
	padding: 0;
}

.vc-compose-grid {
	display: grid;
	flex: 1 1 auto;
	grid-template-columns: minmax(0, 1fr) 360px;
	min-height: 0;
}

.vc-compose-main {
	display: flex;
	flex-direction: column;
	gap: var(--vc-space-3);
	min-width: 0;
	padding: var(--vc-space-5) var(--vc-space-6);
	overflow-y: auto;
}

/* L'objet se lit comme un titre : c'est la première chose que verra le
   destinataire, il mérite mieux qu'un champ de formulaire ordinaire. */
.vc-compose-subject > label {
	font-size: var(--vc-font-size-xs);
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--vc-color-text-muted);
}

.vc-manage-field.vc-compose-subject input[type="text"] {
	padding: 12px 14px;
	border-radius: var(--vc-radius-md);
	font-family: var(--vc-font-heading);
	font-size: 1.2rem;
	font-weight: 600;
}

.vc-compose-editorbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--vc-space-2) var(--vc-space-3);
	border-bottom: 1px solid var(--vc-color-border);
}

.vc-compose-editorbar .vc-compose-tabs {
	margin: 0 0 -1px;
	border-bottom: 0;
}

.vc-compose-editorbar .vc-compose-layout {
	margin-left: auto;
	padding-bottom: 4px;
}

.vc-compose-editorbar .vc-compose-layout-pin {
	margin-bottom: 4px;
}

.vc-compose-message > label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.vc-compose-message .wp-editor-container {
	border-radius: var(--vc-radius-md);
	overflow: hidden;
}

.vc-compose-main .vc-compose-preview iframe {
	height: 560px;
	box-shadow: var(--vc-shadow-card);
}

/* ── Palette ─────────────────────────────────────────────── */

.vc-compose-side {
	display: flex;
	flex-direction: column;
	min-height: 0;
	border-left: 1px solid var(--vc-color-border);
	background: var(--vc-color-bg-alt);
}

.vc-compose-ptabs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 4px;
	padding: var(--vc-space-3);
	border-bottom: 1px solid var(--vc-color-border);
}

.vc-compose-ptab {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 8px 4px;
	border: 1px solid transparent;
	border-radius: var(--vc-radius-md);
	background: transparent;
	color: var(--vc-color-text-muted);
	font: inherit;
	font-size: .72rem;
	font-weight: 500;
	cursor: pointer;
	transition: background var(--vc-duration-fast) var(--vc-ease), color var(--vc-duration-fast) var(--vc-ease);
}

.vc-compose-ptab:hover {
	background: var(--vc-color-surface);
	color: var(--vc-color-text);
}

.vc-compose-ptab.is-active {
	border-color: var(--vc-color-border);
	background: var(--vc-color-surface);
	box-shadow: var(--vc-shadow-sm);
	color: var(--vc-color-primary);
	font-weight: 600;
}

.vc-compose-ptab:focus-visible,
.vc-compose-card:focus-visible,
.vc-compose-varchip:focus-visible,
.vc-compose-quick:focus-visible {
	outline: 2px solid var(--vc-color-primary);
	outline-offset: 2px;
}

.vc-compose-panes {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
}

.vc-compose-pane {
	display: grid;
	align-content: start;
	gap: var(--vc-space-3);
	padding: var(--vc-space-4);
}

.vc-compose-pane[hidden] {
	display: none;
}

.vc-compose-pane-hint {
	margin: 0;
	color: var(--vc-color-text-muted);
	font-size: var(--vc-font-size-xs);
	line-height: 1.45;
}

.vc-compose-pane-extra {
	display: grid;
	gap: var(--vc-space-2);
	padding-top: var(--vc-space-3);
	border-top: 1px dashed var(--vc-color-border);
}

.vc-compose-pane-extra h4,
.vc-compose-vargroup h4 {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	color: var(--vc-color-text-muted);
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.vc-compose-pane .vc-compose-panel-search {
	margin: 0;
	padding: 8px 11px;
	border: 1px solid var(--vc-color-border);
	border-radius: var(--vc-radius-md);
	background: var(--vc-color-surface);
	font: inherit;
	font-size: var(--vc-font-size-sm);
}

.vc-compose-pane .vc-compose-panel-list {
	max-height: none;
}

.vc-compose-pane .vc-compose-src {
	margin: 0;
}

.vc-compose-pane .vc-compose-src button:not(.is-active) {
	background: var(--vc-color-surface);
}

/* Contenu : des cartes à vignette, qu'on reconnaît avant de les lire. */
.vc-compose-cards {
	display: grid;
	gap: var(--vc-space-2);
}

.vc-compose-card {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--vc-space-3);
	padding: var(--vc-space-2);
	border: 1px solid var(--vc-color-border-soft);
	border-radius: var(--vc-radius-md);
	background: var(--vc-color-surface);
	box-shadow: var(--vc-shadow-sm);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition:
		border-color var(--vc-duration-fast) var(--vc-ease),
		transform var(--vc-duration-fast) var(--vc-ease),
		box-shadow var(--vc-duration-fast) var(--vc-ease);
}

.vc-compose-card:hover {
	border-color: var(--vc-color-primary);
	box-shadow: var(--vc-shadow-card);
	transform: translateY(-1px);
}

.vc-compose-card-thumb {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	overflow: hidden;
	border-radius: var(--vc-radius-sm);
	background: var(--vc-color-bg-alt);
	color: var(--vc-color-text-muted);
}

.vc-compose-card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vc-compose-card-body {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.vc-compose-card-body strong {
	display: -webkit-box;
	overflow: hidden;
	font-size: .875rem;
	line-height: 1.3;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.vc-compose-card-body em {
	color: var(--vc-color-text-muted);
	font-size: var(--vc-font-size-xs);
	font-style: normal;
}

.vc-compose-card-add {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: var(--vc-radius-full);
	background: var(--vc-color-bg-alt);
	color: var(--vc-color-primary);
	transition: background var(--vc-duration-fast) var(--vc-ease), color var(--vc-duration-fast) var(--vc-ease);
}

.vc-compose-card:hover .vc-compose-card-add {
	background: var(--vc-color-primary);
	color: var(--vc-color-white);
}

/* Variables : des pastilles, le libellé en clair et la clé en dessous. */
.vc-compose-vars {
	display: grid;
	gap: var(--vc-space-4);
}

.vc-compose-vargroup {
	display: grid;
	gap: var(--vc-space-2);
}

.vc-compose-vargroup[hidden],
.vc-compose-varchip[hidden] {
	display: none;
}

.vc-compose-varchips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.vc-compose-varchip {
	display: inline-grid;
	gap: 1px;
	padding: 6px 10px;
	border: 1px solid var(--vc-color-border);
	border-radius: var(--vc-radius-md);
	background: var(--vc-color-surface);
	font: inherit;
	font-size: var(--vc-font-size-xs);
	font-weight: 600;
	text-align: left;
	color: var(--vc-color-text);
	cursor: pointer;
	transition: border-color var(--vc-duration-fast) var(--vc-ease), background var(--vc-duration-fast) var(--vc-ease);
}

.vc-compose-varchip code {
	font-family: var(--vc-font-mono);
	font-size: .68rem;
	font-weight: 400;
	color: var(--vc-color-primary);
	background: none;
	padding: 0;
}

.vc-compose-varchip:hover {
	border-color: var(--vc-color-primary);
	background: color-mix(in srgb, var(--vc-color-primary) 6%, var(--vc-color-surface));
}

/* Action rapide de la palette : un bouton plein largeur, discret. */
.vc-compose-quick {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 9px 12px;
	border: 1px dashed var(--vc-color-border);
	border-radius: var(--vc-radius-md);
	background: var(--vc-color-surface);
	color: var(--vc-color-text);
	font: inherit;
	font-size: var(--vc-font-size-sm);
	cursor: pointer;
}

.vc-compose-quick:hover {
	border-color: var(--vc-color-primary);
	border-style: solid;
	color: var(--vc-color-primary);
}

.vc-compose-quick[hidden] {
	display: none;
}

/* Modèles */
.vc-compose-pane .vc-compose-template {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: var(--vc-space-3);
	background: var(--vc-color-surface);
}

.vc-compose-template-icon {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: var(--vc-radius-sm);
	background: var(--vc-color-bg-alt);
	color: var(--vc-color-text-muted);
}

.vc-compose-template-body {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.vc-compose-pane .vc-compose-panel-save input {
	min-width: 0;
	padding: 7px 10px;
	border: 1px solid var(--vc-color-border);
	border-radius: var(--vc-radius-md);
	font: inherit;
	font-size: var(--vc-font-size-sm);
}

/* Destinataires : l'ancien accordéon, à plat dans son onglet. */
.vc-compose-pane .vc-compose-people {
	margin: 0;
}

.vc-compose-pane .vc-compose-adv {
	margin: 0;
	padding: 0;
	border: none;
	background: transparent;
}

/* Tous les champs de la palette ont la même allure, quel que soit l'onglet
   qui les a créés (recherche, personne, groupe, source, nom de modèle). */
.vc-compose-pane input[type="search"],
.vc-compose-pane input[type="text"],
.vc-compose-pane select {
	width: 100%;
	padding: 8px 11px;
	border: 1px solid var(--vc-color-border);
	border-radius: var(--vc-radius-md);
	background: var(--vc-color-surface);
	font: inherit;
	font-size: var(--vc-font-size-sm);
	color: var(--vc-color-text);
}

.vc-compose-pane input:focus,
.vc-compose-pane select:focus {
	outline: none;
	border-color: var(--vc-color-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--vc-color-primary) 14%, transparent);
}

/* Retour d'insertion : l'élément cliqué s'allume un instant. */
.vc-compose-card.is-inserted,
.vc-compose-varchip.is-inserted,
.vc-compose-quick.is-inserted,
.vc-compose-template.is-inserted {
	animation: vc-compose-inserted .9s var(--vc-ease-out, ease-out);
}

@keyframes vc-compose-inserted {
	0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--vc-color-primary) 45%, transparent); border-color: var(--vc-color-primary); }
	100% { box-shadow: 0 0 0 8px transparent; }
}

/* ── Pied : destinataires + boutons ──────────────────────── */

.vc-compose-form > .vc-manage-error {
	margin: 0;
	padding: var(--vc-space-2) var(--vc-space-6);
}

.vc-compose-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--vc-space-3) var(--vc-space-4);
	padding: var(--vc-space-3) var(--vc-space-6);
	border-top: 1px solid var(--vc-color-border);
	background: var(--vc-color-surface);
}

.vc-compose-summary {
	display: flex;
	flex: 1 1 280px;
	align-items: center;
	gap: var(--vc-space-3);
	min-width: 0;
}

.vc-compose-summary-icon {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: var(--vc-radius-full);
	background: color-mix(in srgb, var(--vc-color-primary) 12%, transparent);
	color: var(--vc-color-primary);
}

.vc-compose-summary .vc-manage-note {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-size: var(--vc-font-size-xs);
	line-height: 1.4;
}

.vc-compose-footer .vc-manage-actions {
	flex-wrap: wrap;
	margin: 0;
}

.vc-compose-footer .vc-compose-progress {
	flex: 1 1 100%;
	order: -1;
}

/* ── Écrans étroits : tout s'empile ──────────────────────── */

@media (max-width: 900px) {
	.vc-manage-modal-box.vc-compose-box {
		height: auto;
		overflow-y: auto;
	}

	.vc-manage-form.vc-compose-form {
		display: block;
	}

	.vc-compose-grid {
		display: block;
	}

	.vc-compose-main {
		overflow: visible;
		padding: var(--vc-space-4);
	}

	.vc-compose-side {
		border-top: 1px solid var(--vc-color-border);
		border-left: 0;
	}

	.vc-compose-panes {
		overflow: visible;
	}

	.vc-compose-main .vc-compose-preview iframe {
		height: 420px;
	}

	.vc-compose-footer {
		position: sticky;
		bottom: 0;
		z-index: 2;
		padding: var(--vc-space-3) var(--vc-space-4);
	}

	.vc-compose-editorbar .vc-compose-layout {
		margin-left: 0;
	}
}

/* Téléphone : le pied reste collé en bas mais tient en trois lignes — le
   décompte sur deux lignes au plus, puis deux rangées de deux boutons (au
   lieu des quatre boutons pleine largeur empilés des autres fenêtres). */
@media (max-width: 600px) {
	.vc-compose-footer {
		gap: var(--vc-space-2);
	}

	.vc-compose-summary {
		flex-basis: 100%;
		gap: var(--vc-space-2);
	}

	.vc-compose-summary-icon {
		width: 26px;
		height: 26px;
	}

	.vc-compose-summary .vc-manage-note {
		display: -webkit-box;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.vc-compose-footer .vc-manage-actions {
		display: grid;
		flex: 1 1 100%;
		grid-template-columns: 1fr 1fr;
		gap: 6px;
	}

	.vc-compose-footer .vc-manage-actions .vc-btn {
		margin: 0;
	}

	.vc-compose-ptab {
		font-size: .68rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vc-compose-card,
	.vc-compose-ptab,
	.vc-compose-varchip {
		transition: none;
	}

	.vc-compose-card:hover {
		transform: none;
	}

	.vc-compose-card.is-inserted,
	.vc-compose-varchip.is-inserted,
	.vc-compose-quick.is-inserted,
	.vc-compose-template.is-inserted {
		animation: none;
	}
}

/* ─── Compositeur : tiroir mobile, suppression de template, blocs dynamiques ─
   mountSheet(), templatesPanel(), mountDynamicBlocks() —
   newsletter-composer-shared.js. */

/* Au-delà de 900 px la palette est toujours à droite : ni rangée d'accès,
   ni en-tête de tiroir, ni voile. */
.vc-compose-launch,
.vc-compose-side-head,
.vc-compose-sheet-backdrop {
	display: none;
}

/* Templates : le bouton qui charge, et celui qui supprime à sa droite. */
.vc-compose-template-row {
	display: flex;
	align-items: stretch;
	gap: 4px;
}

.vc-compose-template-row .vc-compose-template {
	flex: 1 1 auto;
	min-width: 0;
}

.vc-compose-template-delete {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 36px;
	border: 1px solid var(--vc-color-border);
	border-radius: var(--vc-radius-sm);
	background: var(--vc-color-surface);
	color: var(--vc-color-text-muted);
	cursor: pointer;
	transition: color var(--vc-duration-fast) var(--vc-ease), border-color var(--vc-duration-fast) var(--vc-ease), background var(--vc-duration-fast) var(--vc-ease);
}

.vc-compose-template-delete:hover {
	border-color: var(--vc-color-accent);
	background: color-mix(in srgb, var(--vc-color-accent) 8%, var(--vc-color-surface));
	color: var(--vc-color-accent);
}

.vc-compose-template-delete:focus-visible {
	outline: 2px solid var(--vc-color-accent);
	outline-offset: 2px;
}

.vc-compose-template-delete:disabled {
	opacity: .5;
	cursor: default;
}

/* Blocs dynamiques : un encart en tête de l'onglet Templates. */
.vc-compose-dyn {
	display: grid;
	gap: var(--vc-space-2);
	padding: var(--vc-space-3);
	border: 1px solid color-mix(in srgb, var(--vc-color-primary) 22%, transparent);
	border-radius: var(--vc-radius-md);
	background: color-mix(in srgb, var(--vc-color-primary) 5%, var(--vc-color-surface));
}

.vc-compose-dyn h4 {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	color: var(--vc-color-primary);
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.vc-compose-dyn-count {
	display: flex;
	align-items: center;
	gap: var(--vc-space-2);
	font-size: var(--vc-font-size-xs);
	color: var(--vc-color-text-muted);
}

.vc-compose-pane .vc-compose-dyn-count select {
	width: auto;
	padding: 4px 8px;
}

.vc-compose-varchip--dyn code {
	color: var(--vc-color-accent);
}

/* ── Téléphone et tablette : la palette devient un tiroir ── */

@media (max-width: 900px) {
	.vc-compose-launch {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
	}

	.vc-compose-launch-btn {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		padding: 6px 12px;
		border: 1px solid var(--vc-color-border);
		border-radius: var(--vc-radius-full);
		background: var(--vc-color-bg-alt);
		color: var(--vc-color-text);
		font: inherit;
		font-size: var(--vc-font-size-xs);
		font-weight: 500;
		cursor: pointer;
	}

	.vc-compose-launch-btn:active {
		background: var(--vc-color-sand);
	}

	.vc-compose-launch-btn .vc-icon {
		color: var(--vc-color-primary);
	}

	.vc-compose-side {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 20;
		max-height: 78vh;
		border-top: 0;
		border-radius: 16px 16px 0 0;
		box-shadow: 0 -12px 40px rgba(20, 20, 15, .22);
		transform: translateY(105%);
		visibility: hidden;
		transition: transform .25s var(--vc-ease-out, ease-out), visibility 0s linear .25s;
	}

	.vc-compose-side.is-open {
		transform: none;
		visibility: visible;
		transition: transform .25s var(--vc-ease-out, ease-out), visibility 0s;
	}

	.vc-compose-panes {
		overflow-y: auto;
	}

	.vc-compose-side-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: var(--vc-space-3) var(--vc-space-4) 0;
	}

	.vc-compose-side-head::before {
		content: "";
		position: absolute;
		top: 6px;
		left: 50%;
		width: 40px;
		height: 4px;
		margin-left: -20px;
		border-radius: 2px;
		background: var(--vc-color-border);
	}

	.vc-compose-side-close {
		display: grid;
		place-items: center;
		width: 34px;
		height: 34px;
		border: 0;
		border-radius: var(--vc-radius-full);
		background: var(--vc-color-surface);
		color: var(--vc-color-text);
		cursor: pointer;
	}

	.vc-compose-sheet-backdrop {
		position: fixed;
		inset: 0;
		z-index: 19;
		display: block;
		background: rgba(20, 20, 15, .35);
		opacity: 0;
		pointer-events: none;
		transition: opacity .2s var(--vc-ease, ease);
	}

	.vc-compose-sheet-backdrop.is-open {
		opacity: 1;
		pointer-events: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vc-compose-side,
	.vc-compose-side.is-open,
	.vc-compose-sheet-backdrop {
		transition: none;
	}
}

/* ─── Compositeur : choix libre dans la palette ──────────────────────────
   La palette fait 360 px : la ligne « libellé 90 px | champ » et la case
   « case | nom | compteur » laissaient moins de 100 px au nom du groupe,
   qui s'écrivait lettre par lettre à la verticale (« BC7F – Business
   Club »). Dans la palette, le libellé passe au-dessus du champ et le
   compteur sous le nom. */

.vc-compose-pane .vc-compose-adv-row {
	grid-template-columns: minmax(0, 1fr);
	gap: 6px;
}

.vc-compose-pane .vc-compose-adv-row > span {
	padding-top: 0;
	font-size: .7rem;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.vc-compose-pane .vc-compose-checklist {
	max-height: 260px;
	background: var(--vc-color-surface);
}

.vc-compose-pane .vc-compose-check {
	grid-template-columns: 18px minmax(0, 1fr);
	align-items: start;
	row-gap: 1px;
}

.vc-compose-pane .vc-compose-check input {
	margin-top: 2px;
}

.vc-compose-pane .vc-compose-check span {
	font-size: var(--vc-font-size-sm);
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.vc-compose-pane .vc-compose-check em {
	grid-column: 2;
	justify-self: start;
	color: var(--vc-color-text-muted);
	font-size: var(--vc-font-size-xs);
	font-style: normal;
}