/* ============================================================
   Blocs d'information — UI partagée entre le portail de section et Mon
   Espace : fenêtre d'édition (widget-form-shared.js) et glisser-déposer de
   la liste (widget-list-shared.js). Chargée par les deux pages, pour que
   les blocs se comportent — pas seulement se ressemblent — de la même
   façon des deux côtés.
   ============================================================ */

.vc-sortable {
	cursor: grab;
}

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

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

/* Fiche de détail d'un événement — assets/js/agenda-shared.js, montée dans
   le même gabarit `.vc-widget-form-*` que la fenêtre des blocs. */
.vc-event-when,
.vc-event-where {
	margin: 0 0 var(--vc-space-2, 8px);
	color: var(--vc-color-text-muted, #6b7280);
	font-size: var(--vc-font-size-sm, .875rem);
}

.vc-event-section {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 var(--vc-space-3, 12px);
	font-size: var(--vc-font-size-xs, .75rem);
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--vc-color-text-muted, #6b7280);
}

/* ============================================================
   Agenda — habillage FullCalendar, partagé entre le portail de section
   (section-agenda.js) et l'agenda agrégé de Mon Espace (espace-agenda.js).
   Copié depuis section.css plutôt que déplacé : les deux pages ne se
   chargent jamais en même temps, la redondance ne coûte rien et évite de
   toucher à un fichier par ailleurs difficile à modifier en toute sécurité.
   ============================================================ */

.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;
}

@media (max-width: 600px) {
	.vc-section-calendar {
		padding: var(--vc-space-4, 16px) var(--vc-space-3, 12px);
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.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;
	}

	.vc-section-calendar .fc-toolbar-chunk:nth-child(2) {
		order: -1;
	}

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

	.vc-section-calendar .fc-toolbar-chunk:last-child .fc-button {
		padding-left: 6px;
		padding-right: 6px;
		font-size: 0.7rem;
	}
}

.vc-widget-form-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

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

.vc-widget-form-box {
	position: relative;
	width: 100%;
	max-width: 720px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	background: var(--vc-color-surface, #fff);
	border-radius: var(--vc-radius-lg, 10px);
	box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
}

.vc-widget-form-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-widget-form-head h3 {
	margin: 0;
	font-size: 1.05rem;
}

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

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

.vc-widget-form-error {
	margin: 16px 20px 0;
	padding: 10px 14px;
	background: #fdf0f0;
	border: 1px solid #f0c8c8;
	border-radius: var(--vc-radius-md, 6px);
	color: #b32d2e;
	font-size: var(--vc-font-size-sm, .875rem);
}

.vc-widget-form-fields {
	padding: 18px 20px 20px;
	display: grid;
	gap: 14px;
}

.vc-widget-form-fields label {
	display: grid;
	gap: 6px;
	color: var(--vc-color-text-muted, #6b7280);
	font-size: var(--vc-font-size-xs, .75rem);
	text-transform: uppercase;
	letter-spacing: .04em;
}

.vc-widget-form-fields input,
.vc-widget-form-fields select,
.vc-widget-form-fields textarea {
	padding: 10px 12px;
	background: var(--vc-color-bg-alt, #f5f5f4);
	border: 1px solid transparent;
	border-radius: var(--vc-radius-md, 6px);
	color: var(--vc-color-text, #111827);
	font-family: var(--vc-font-body, inherit);
	font-size: var(--vc-font-size-sm, .875rem);
	text-transform: none;
	letter-spacing: normal;
}

.vc-widget-form-fields input:focus,
.vc-widget-form-fields select:focus,
.vc-widget-form-fields textarea:focus {
	outline: none;
	border-color: var(--vc-color-accent, #b81018);
	background: var(--vc-color-surface, #fff);
}

.vc-widget-form-fields textarea {
	resize: vertical;
}

/* `applyVisibility()` (widget-form-shared.js) bascule l'attribut `hidden`
   selon la nature du bloc — sans cette règle, `display: grid`/`flex` ci-dessus
   l'emporterait sur le `display: none` par défaut du navigateur (une règle
   d'auteur bat toujours la feuille de l'agent utilisateur, à spécificité
   égale ou supérieure), et tous les champs resteraient visibles ensemble. */
.vc-widget-form-fields [data-field][hidden] {
	display: none;
}

.vc-widget-form-hint {
	color: var(--vc-color-text-muted, #6b7280);
	text-transform: none;
	letter-spacing: normal;
	font-size: var(--vc-font-size-xs, .75rem);
}

.vc-widget-form-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 6px;
}

.vc-widget-form-actions button {
	padding: 10px 18px;
	border-radius: var(--vc-radius-md, 6px);
	font-size: var(--vc-font-size-sm, .875rem);
	font-weight: 600;
	cursor: pointer;
	border: 1px solid transparent;
}

.vc-widget-form-cancel {
	background: none;
	border-color: var(--vc-color-border, #e5e7eb);
	color: var(--vc-color-text, #111827);
}

.vc-widget-form-submit {
	background: var(--vc-color-accent, #b81018);
	color: #fff;
}

.vc-widget-form-submit:disabled,
.vc-widget-form-cancel:disabled {
	opacity: .6;
	cursor: default;
}

/* Éditeur de coordonnées d'un bloc « Contacts » — une ligne par coordonnée,
   plutôt qu'une syntaxe « Libellé | Valeur | Nature » à connaître par cœur. */
.vc-widget-form-contacts {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.vc-widget-form-contact-rows {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.vc-widget-form-contact-add {
	align-self: flex-start;
	padding: 6px 12px;
	border: 1px solid var(--vc-color-border, #e5e7eb);
	border-radius: var(--vc-radius-md, 6px);
	background: none;
	color: var(--vc-color-text, #111827);
	font-size: var(--vc-font-size-sm, .875rem);
	cursor: pointer;
}

.vc-widget-form-contact-add:hover {
	background: var(--vc-color-bg-alt, #f5f5f4);
}

.vc-widget-form-contact-row {
	display: grid;
	grid-template-columns: 1fr 1fr auto auto;
	gap: 6px;
	align-items: center;
}

.vc-widget-form-contact-row input,
.vc-widget-form-contact-row select {
	padding: 8px 10px;
	background: var(--vc-color-bg-alt, #f5f5f4);
	border: 1px solid transparent;
	border-radius: var(--vc-radius-md, 6px);
	font-size: var(--vc-font-size-sm, .875rem);
}

.vc-widget-form-contact-remove {
	width: 32px;
	height: 32px;
	border: none;
	border-radius: var(--vc-radius-md, 6px);
	background: none;
	color: var(--vc-color-text-muted, #6b7280);
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
}

.vc-widget-form-contact-remove:hover {
	background: #fdf0f0;
	color: #a4262c;
}

@media (max-width: 480px) {
	.vc-widget-form-contact-row {
		grid-template-columns: 1fr 1fr;
		grid-template-areas: "label value" "kind remove";
	}
}

/* ─── Image d'un bloc : choix dans la galerie ────────────────────────────────
   Le bouton ouvre la médiathèque du club (media-picker.css). */

.vc-widget-form-image {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.vc-widget-form-gallery-toggle {
	align-self: flex-start;
	padding: 6px 12px;
	border: 1px solid var(--vc-color-border, #e5e7eb);
	border-radius: var(--vc-radius-md, 6px);
	background: none;
	color: var(--vc-color-text, #111827);
	font-size: var(--vc-font-size-sm, .875rem);
	cursor: pointer;
}

.vc-widget-form-gallery-toggle:hover {
	background: var(--vc-color-bg-alt, #f5f5f4);
}

.vc-widget-form-image-preview {
	max-width: 160px;
	max-height: 110px;
	border-radius: var(--vc-radius-md, 6px);
	object-fit: cover;
}

.vc-widget-form-image-preview[hidden] {
	display: none;
}

/* ─── Liens et documents : éditeurs en lignes (widget-form-shared.js) ───────── */

.vc-widget-form-links,
.vc-widget-form-documents {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.vc-widget-form-links[hidden],
.vc-widget-form-documents[hidden] {
	display: none;
}

.vc-widget-form-label {
	color: var(--vc-color-text-muted, #6b7280);
	font-size: var(--vc-font-size-xs, .75rem);
	letter-spacing: .04em;
	text-transform: uppercase;
}

.vc-widget-form-links-editor,
.vc-widget-form-documents-editor {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.vc-widget-form-link-rows,
.vc-widget-form-doc-rows {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.vc-widget-form-link-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
	gap: 6px;
	align-items: center;
}

.vc-widget-form-link-row input {
	min-width: 0;
	padding: 8px 10px;
	background: var(--vc-color-bg-alt, #f5f5f4);
	border: 1px solid transparent;
	border-radius: var(--vc-radius-md, 6px);
	font-size: var(--vc-font-size-sm, .875rem);
}

.vc-widget-form-doc-row {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 10px;
	align-items: center;
	padding: 6px 8px;
	border: 1px solid var(--vc-color-border, #e5e7eb);
	border-radius: var(--vc-radius-md, 6px);
}

.vc-widget-form-doc-ext,
.vc-infoblock-doc-ext,
.vc-media-picker-ext {
	display: inline-grid;
	place-items: center;
	min-width: 38px;
	padding: 3px 5px;
	border-radius: 4px;
	background: color-mix(in srgb, var(--vc-color-primary, #0a4240) 10%, transparent);
	color: var(--vc-color-primary, #0a4240);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .03em;
}

.vc-widget-form-doc-title {
	min-width: 0;
	overflow: hidden;
	font-size: var(--vc-font-size-sm, .875rem);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vc-widget-form-doc-title em {
	margin-left: 6px;
	color: var(--vc-color-text-muted, #6b7280);
	font-size: var(--vc-font-size-xs, .75rem);
	font-style: normal;
}

.vc-widget-form-row-tools {
	display: inline-flex;
	gap: 2px;
}

.vc-widget-form-row-tools button {
	width: 30px;
	height: 30px;
	border: none;
	border-radius: var(--vc-radius-md, 6px);
	background: none;
	color: var(--vc-color-text-muted, #6b7280);
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
}

.vc-widget-form-row-tools button:hover {
	background: var(--vc-color-bg-alt, #f5f5f4);
	color: var(--vc-color-text, #111827);
}

.vc-widget-form-row-tools button[data-remove]:hover {
	background: #fdf0f0;
	color: #a4262c;
}

@media (max-width: 480px) {
	.vc-widget-form-link-row {
		grid-template-columns: 1fr auto;
	}

	.vc-widget-form-link-row .vc-widget-form-link-url {
		grid-column: 1;
	}

	.vc-widget-form-link-row .vc-widget-form-row-tools {
		grid-column: 2;
		grid-row: 1 / span 2;
		flex-direction: column;
	}
}

/* ─── Rendu des blocs « Liste de liens » et « Documents » ────────────────────
   Partagé portail de section / Mon espace : cette feuille est chargée aux
   deux endroits (contrairement à section.css et espace.css, qui gardent
   chacun leur copie des styles de base des blocs). */

.vc-infoblock .vc-infoblock-links--cards,
.vc-infoblock .vc-infoblock-docs {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vc-infoblock .vc-infoblock-links--cards a,
.vc-infoblock .vc-infoblock-docs a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border: 1px solid var(--vc-color-border-soft, rgba(20, 20, 15, .07));
	border-radius: var(--vc-radius-md, 6px);
	color: inherit;
	text-decoration: none;
	transition: border-color .15s ease, background-color .15s ease;
}

.vc-infoblock .vc-infoblock-links--cards a:hover,
.vc-infoblock .vc-infoblock-docs a:hover {
	border-color: var(--vc-color-primary, #0a4240);
	background: color-mix(in srgb, var(--vc-color-primary, #0a4240) 4%, transparent);
}

.vc-infoblock-link-icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--vc-color-primary, #0a4240) 10%, transparent);
	color: var(--vc-color-primary, #0a4240);
}

.vc-infoblock-link-text {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
	font-size: var(--vc-font-size-sm, .875rem);
	line-height: 1.3;
}

.vc-infoblock-link-text > span {
	overflow: hidden;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vc-infoblock-link-text small {
	overflow: hidden;
	color: var(--vc-color-text-muted, #6b7280);
	font-size: var(--vc-font-size-xs, .75rem);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vc-infoblock .vc-infoblock-links--cards a > .vc-icon:last-child,
.vc-infoblock .vc-infoblock-docs a > .vc-icon:last-child {
	flex: none;
	color: var(--vc-color-text-muted, #6b7280);
	opacity: 1;
}

.vc-infoblock-empty {
	margin: 0;
	color: var(--vc-color-text-muted, #6b7280);
	font-size: var(--vc-font-size-sm, .875rem);
	font-style: italic;
}

/* Barre d'administration WordPress : la fenêtre des blocs démarre dessous
   (voir --vc-adminbar-height, header.css). */
body.admin-bar .vc-widget-form-modal {
	top: var(--vc-adminbar-height, 32px);
}