/**
 * FamiConnect — Événements
 *
 * Mobile d'abord : aucune largeur fixe, aucun débordement horizontal.
 * Les couleurs reprennent celles du thème via des variables, pour rester
 * cohérent avec le design existant sans le modifier.
 */

/*
 * Les couleurs sont posées sur la racine du document, et non sur « .fce ».
 *
 * **Pourquoi c'est important.** Elles étaient déclarées sur « .fce », qui
 * n'habille que cinq gabarits : la liste, la fiche courte, le formulaire, la
 * recherche de membres et « mes événements ». La page de détail d'un
 * événement, elle, s'ouvre sur « .fce-single » — sans « .fce ». Aucune
 * variable ne s'y résolvait.
 *
 * Le bouton « Je participe » y devenait donc invisible : sa couleur de fond,
 * var(--fce-accent), ne valait rien, tandis que son texte restait blanc. Un
 * bouton blanc sur une carte blanche, à l'endroit exact où les familles
 * devaient s'inscrire. Le bouton « Retour aux événements », lui, restait
 * lisible — il hérite de la couleur du texte — mais se dessinait avec une
 * bordure noire au lieu du gris prévu : c'était le même symptôme.
 *
 * Sur :root, elles valent pour toute page où cette feuille est chargée, quel
 * que soit le gabarit — y compris ceux qu'on ajoutera plus tard.
 */
:root {
	--fce-accent: #e8517d;
	--fce-accent-dark: #c73a63;
	--fce-text: #2f3542;
	--fce-muted: #6b7280;
	--fce-border: #e5e7eb;
	--fce-surface: #ffffff;
	--fce-radius: 10px;
}

.fce {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	color: var(--fce-text);
}

.fce *,
.fce *::before,
.fce *::after {
	box-sizing: inherit;
}

.fce img {
	max-width: 100%;
	height: auto;
}

/* --- Messages --- */

.fce-notice {
	margin: 0 0 1.25rem;
	padding: 0.9rem 1rem;
	border-left: 4px solid var(--fce-border);
	border-radius: var(--fce-radius);
	background: #f8f9fb;
	font-size: 0.95rem;
}

.fce-notice ul {
	margin: 0;
	padding-left: 1.1rem;
}

.fce-notice--error {
	border-left-color: #dc2626;
	background: #fef2f2;
}

.fce-notice--success {
	border-left-color: #16a34a;
	background: #f0fdf4;
}

.fce-notice--info {
	border-left-color: var(--fce-accent);
	background: #fdf2f6;
}

.fce-help {
	margin: 0.4rem 0 0;
	color: var(--fce-muted);
	font-size: 0.85rem;
}

.fce-help--warning {
	color: #b45309;
}

.fce-required {
	color: var(--fce-accent);
}

.fce-empty {
	padding: 2rem 1rem;
	border: 1px dashed var(--fce-border);
	border-radius: var(--fce-radius);
	color: var(--fce-muted);
	text-align: center;
}

/* --- Formulaire --- */

.fce-form {
	display: block;
}

.fce-fieldset {
	margin: 0 0 1.5rem;
	padding: 1rem;
	border: 1px solid var(--fce-border);
	border-radius: var(--fce-radius);
	background: var(--fce-surface);
}

.fce-fieldset legend {
	padding: 0 0.4rem;
	font-weight: 600;
}

.fce-field {
	margin: 0 0 1rem;
	min-width: 0; /* indispensable : évite qu'un champ élargisse sa colonne flex */
}

.fce-field > label {
	display: block;
	margin-bottom: 0.35rem;
	font-weight: 600;
	font-size: 0.92rem;
}

.fce-field input[type="text"],
.fce-field input[type="search"],
.fce-field input[type="url"],
.fce-field input[type="email"],
.fce-field input[type="date"],
.fce-field input[type="time"],
.fce-field input[type="number"],
.fce-field input[type="file"],
.fce-field select,
.fce-field textarea {
	width: 100%;
	max-width: 100%;
	padding: 0.65rem 0.75rem;
	border: 1px solid var(--fce-border);
	border-radius: 8px;
	background: #fff;
	color: inherit;
	font: inherit;
	/* 16px minimum : en dessous, iOS zoome automatiquement sur le champ. */
	font-size: max(1rem, 16px);
}

.fce-field textarea {
	resize: vertical;
}

.fce-field--check > label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 500;
}

.fce-field--check input {
	width: auto;
	margin: 0;
}

.fce-row {
	display: flex;
	flex-direction: column;
	gap: 0 1rem;
}

@media (min-width: 600px) {
	.fce-row {
		flex-direction: row;
	}

	.fce-row > .fce-field {
		flex: 1 1 0;
	}

	.fce-row > .fce-time-field,
	.fce-row > .fce-postcode-field {
		flex: 0 0 10rem;
	}
}

/* --- Boutons --- */

.fce-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px; /* cible tactile confortable */
	padding: 0.7rem 1.2rem;
	border: 1px solid transparent;
	border-radius: 999px;
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.fce-button--primary {
	background: var(--fce-accent);
	color: #fff;
}

.fce-button--primary:hover,
.fce-button--primary:focus {
	background: var(--fce-accent-dark);
	color: #fff;
}

.fce-button--ghost {
	border-color: var(--fce-border);
	background: #fff;
	color: var(--fce-text);
}

.fce-button--ghost:hover,
.fce-button--ghost:focus {
	border-color: var(--fce-accent);
	color: var(--fce-accent);
}

.fce-button--danger {
	border-color: #fecaca;
	background: #fff;
	color: #b91c1c;
}

.fce-button--danger:hover,
.fce-button--danger:focus {
	background: #fef2f2;
}

.fce-button[disabled] {
	opacity: 0.6;
	cursor: default;
}

.fce-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.fce-actions .fce-button {
	flex: 1 1 auto;
}

@media (min-width: 600px) {
	.fce-actions .fce-button {
		flex: 0 0 auto;
	}
}

/* --- Filtres --- */

.fce-filters {
	margin: 0 0 1.5rem;
	padding: 1rem;
	border: 1px solid var(--fce-border);
	border-radius: var(--fce-radius);
	background: var(--fce-surface);
}

.fce-filters__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 1rem;
}

@media (min-width: 700px) {
	.fce-filters__row {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.fce-filters__row--geo {
		grid-template-columns: auto minmax(0, 12rem) auto;
		align-items: end;
	}
}

/* --- Liste d'événements --- */

.fce-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.fce-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.fce-cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.fce-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--fce-border);
	border-radius: var(--fce-radius);
	background: var(--fce-surface);
}

.fce-card__media img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.fce-card__body {
	padding: 1rem;
}

.fce-card__date {
	margin: 0 0 0.35rem;
	color: var(--fce-accent);
	font-size: 0.85rem;
	font-weight: 600;
	text-transform: lowercase;
}

.fce-card__title {
	margin: 0 0 0.5rem;
	font-size: 1.1rem;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.fce-card__title a {
	color: inherit;
	text-decoration: none;
}

.fce-card__place,
.fce-card__organizer,
.fce-card__excerpt {
	margin: 0 0 0.35rem;
	color: var(--fce-muted);
	font-size: 0.9rem;
}

.fce-card__distance {
	display: inline-block;
	margin-left: 0.4rem;
	padding: 0.1rem 0.5rem;
	border-radius: 999px;
	background: #fdf2f6;
	color: var(--fce-accent-dark);
	font-size: 0.78rem;
	font-weight: 600;
	white-space: nowrap;
}

.fce-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}

.fce-pagination a,
.fce-pagination span {
	display: block;
	padding: 0.4rem 0.75rem;
	border: 1px solid var(--fce-border);
	border-radius: 8px;
	text-decoration: none;
}

/* --- Fiche événement --- */

.fce-event__meta {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.9rem;
	margin: 0 0 1.5rem;
	padding: 1rem;
	border: 1px solid var(--fce-border);
	border-radius: var(--fce-radius);
	background: var(--fce-surface);
}

@media (min-width: 640px) {
	.fce-event__meta {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.fce-event__meta dt {
	margin: 0 0 0.2rem;
	color: var(--fce-muted);
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.fce-event__meta dd {
	margin: 0;
	overflow-wrap: anywhere;
}

.fce-event__organizer {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: inherit;
	text-decoration: none;
}

.fce-event__organizer img {
	border-radius: 50%;
}

.fce-event__distance {
	display: inline-block;
	margin-left: 0.4rem;
	color: var(--fce-accent-dark);
	font-weight: 600;
}

/* --- Mes événements --- */

.fce-my-events__header {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
}

@media (min-width: 600px) {
	.fce-my-events__header {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

.fce-my-events__header h2 {
	margin: 0;
}

.fce-my-events__section {
	margin: 1.75rem 0 0.75rem;
	font-size: 1.05rem;
}

.fce-my-events__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fce-my-event {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
	padding: 1rem;
	border: 1px solid var(--fce-border);
	border-radius: var(--fce-radius);
	background: var(--fce-surface);
}

@media (min-width: 700px) {
	.fce-my-event {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

.fce-my-event__info {
	min-width: 0;
}

.fce-my-event__date {
	margin: 0 0 0.2rem;
	color: var(--fce-accent);
	font-size: 0.85rem;
	font-weight: 600;
}

.fce-my-event__title {
	margin: 0 0 0.2rem;
	font-size: 1.05rem;
	overflow-wrap: anywhere;
}

.fce-my-event__place {
	margin: 0;
	color: var(--fce-muted);
	font-size: 0.9rem;
}

.fce-my-event__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.fce-my-event__actions .fce-button {
	flex: 1 1 auto;
	padding: 0.55rem 1rem;
	font-size: 0.9rem;
}

@media (min-width: 700px) {
	.fce-my-event__actions .fce-button {
		flex: 0 0 auto;
	}
}

.fce-my-event--removing {
	opacity: 0.4;
}

.fce-badge {
	display: inline-block;
	margin-left: 0.4rem;
	padding: 0.1rem 0.5rem;
	border-radius: 999px;
	background: #f3f4f6;
	font-size: 0.75rem;
	font-weight: 600;
}

/* --- Archive --- */

.fce-archive {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 1.5rem 1rem 3rem;
}

.fce-archive__title {
	margin: 0 0 1.5rem;
	font-size: clamp(1.5rem, 4vw, 2.25rem);
}

/* --- Page d'un événement --- */

.fce-single {
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	padding: 1.5rem 1rem 3rem;
}

.fce-single__title {
	margin: 0 0 1.25rem;
	font-size: clamp(1.5rem, 4vw, 2.25rem);
	line-height: 1.2;
	overflow-wrap: anywhere;
}

.fce-single__media {
	margin: 0 0 1.5rem;
}

.fce-single__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
}

.fce-single__back {
	margin-top: 2rem;
}

/* --- Largeur de lecture --- */

/*
 * Les pages portant les shortcodes n'ont pas toujours de conteneur du thème :
 * sans cela, les champs s'étirent sur toute la largeur de l'écran.
 */
.fce-submit,
.fce-my-events,
.fce-list {
	max-width: 900px;
	margin-inline: auto;
	padding: 1.5rem 1rem 3rem;
}

.fce-submit__title {
	margin: 0 0 1.5rem;
	font-size: clamp(1.4rem, 3.5vw, 2rem);
}

/* --- Photo actuelle dans le formulaire de modification --- */

.fce-photo-actuelle {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: flex-start;
	margin: 0 0 .75rem;
	padding: .75rem;
	border: 1px solid var(--fce-border);
	border-radius: var(--fce-radius);
	background: #fafbfc;
}

.fce-photo-actuelle img {
	width: 160px;
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

.fce-photo-actuelle__infos {
	flex: 1 1 12rem;
	min-width: 0;
}

.fce-photo-actuelle__retrait {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	margin-top: .5rem;
	font-size: .9rem;
}

.fce-photo-actuelle__retrait input {
	width: auto;
	margin: 0;
}

/* --- Autocomplétion --- */

.fce-field { position: relative; }

.fce-auto {
	position: absolute;
	z-index: 60;
	left: 0;
	right: 0;
	margin: 2px 0 0;
	padding: 0;
	max-height: 16rem;
	overflow-y: auto;
	list-style: none;
	background: #fff;
	border: 1px solid var(--fce-border, #e5e7eb);
	border-radius: 8px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}

.fce-auto__item {
	padding: .6rem .75rem;
	font-size: .95rem;
	line-height: 1.3;
	cursor: pointer;
}

.fce-auto__item + .fce-auto__item {
	border-top: 1px solid #f1f2f4;
}

.fce-auto__item:hover,
.fce-auto__item.is-actif {
	background: #fdf2f6;
	color: #c73a63;
}

/* --- Participants --- */

.fce-participants {
	margin: 2rem 0 0;
	padding: 1.25rem;
	border: 1px solid var(--fce-border, #e5e7eb);
	border-radius: var(--fce-radius, 10px);
	background: #fff;
}

.fce-participants__titre {
	margin: 0 0 .5rem;
	font-size: 1.15rem;
}

.fce-participants__compte {
	margin: 0 0 .5rem;
	font-size: .95rem;
}

.fce-participants__retour:not(:empty) {
	margin: .5rem 0;
	padding: .6rem .8rem;
	border-radius: 8px;
	background: #f0fdf4;
	color: #166534;
	font-size: .9rem;
}

.fce-participants__actions {
	margin: 1rem 0 0;
}

.fce-participants__liste {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
}

.fce-participants__membre a {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .35rem .75rem .35rem .35rem;
	border: 1px solid var(--fce-border, #e5e7eb);
	border-radius: 999px;
	color: inherit;
	font-size: .9rem;
	text-decoration: none;
}

.fce-participants__membre a:hover,
.fce-participants__membre a:focus {
	border-color: var(--fce-accent, #e8517d);
	color: var(--fce-accent-dark, #c73a63);
}

.fce-participants__membre img {
	width: 32px;
	height: 32px;
	border-radius: 50%;
}

@media (max-width: 600px) {
	.fce-participants__actions .fce-button { width: 100%; }

/* La phrase qui suit le bouton, pour un visiteur sans compte : elle explique,
   elle ne doit pas concurrencer le bouton lui-meme. */
.fce-participants__invite {
	margin-top: 0.6rem;
	text-align: center;
}
}