/**
 * Mansa Prochainement – style.css (v3.0.0)
 * Approche mobile-first.
 * Préfixe "mp-" sur toutes les classes pour éviter les conflits avec le thème.
 *
 * TABLE DES MATIÈRES
 *  1. Variables CSS
 *  2. Bloc principal
 *  3. En-tête / Titre
 *  4. Onglets de navigation
 *  5. Loader (spinner)
 *  6. Message "aucun événement"
 *  7. Liste des événements
 *  8. Événement – layout
 *  9. Événement – horaire
 * 10. Événement – image (optionnelle)
 * 11. Événement – corps (titre, lieu, tarif)
 * 12. Événement – bouton réservation
 * 13. Bouton "Voir plus" (load more)
 * 14. Utilitaires
 * 15. Responsive – tablette (≤ 768 px)
 * 16. Responsive – mobile  (≤ 480 px)
 * 17. Animations
 */


/* ─────────────────────────────────────────────────────
   1. Variables CSS
   Modifiables depuis le thème :  var(--mp-xxx)
───────────────────────────────────────────────────── */
.mp-block {
	--mp-color-text:    #111111;
	--mp-color-muted:   #888888;
	--mp-color-border:  #e5e5e5;
	--mp-color-bg:      #ffffff;
	--mp-color-btn-bg:  #000000;
	--mp-color-btn-fg:  #ffffff;
	--mp-font-size-sm:  0.78rem;
	--mp-font-size-md:  0.9rem;
	--mp-font-size-lg:  0.95rem;
	--mp-time-width:    62px;   /* largeur fixe de la colonne horaire */
	--mp-img-width:     80px;   /* largeur fixe de la colonne image */
	--mp-img-height:    64px;
	--mp-gap:           0.875rem;
	--mp-row-py:        0.85rem; /* padding vertical d'une ligne événement */
}


/* ─────────────────────────────────────────────────────
   2. Bloc principal
   Reproduit exactement le .container du theme Kallyas :
   - gutter Bootstrap 5 (--bs-gutter-x: 1.5rem)
   - breakpoints 576 / 768 / 992 / 1200 / 1366 / 1400
───────────────────────────────────────────────────── */
.mp-block {
	box-sizing: border-box;
	width: 100%;
	padding-right: calc(1.5rem * 0.5 + 12px);
	padding-left:  calc(1.5rem * 0.5 + 12px);
	padding-top:    2rem;
	padding-bottom: 2rem;
	margin-right: auto;
	margin-left:  auto;
}

/* Neutraliser les styles box-sizing venant du theme sur les enfants */
.mp-block *,
.mp-block *::before,
.mp-block *::after {
	box-sizing: border-box;
}

/* ≥ 576px — container-sm */
@media (min-width: 576px) {
	.mp-block {
		max-width: 540px;
	}
}

/* ≥ 768px — container-md */
@media (min-width: 768px) {
	.mp-block {
		max-width: 720px;
	}
}

/* ≥ 992px — container-lg */
@media (min-width: 992px) {
	.mp-block {
		max-width: 960px;
	}
}

/* ≥ 1200px — container-xl */
@media (min-width: 1200px) {
	.mp-block {
		max-width: 1140px;
	}
}

/* ≥ 1366px — kl-container-default (specifique Kallyas) */
@media (min-width: 1366px) {
	.mp-block {
		max-width: 1288px;
	}
}

/* ≥ 1400px — container-xxl Bootstrap 5 */
@media (min-width: 1400px) {
	.mp-block {
		max-width: 1320px;
	}
}


/* ─────────────────────────────────────────────────────
   3. En-tête / Titre
───────────────────────────────────────────────────── */
.mp-header {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

/* Trait horizontal à droite du titre */
.mp-header::after {
	content: '';
	flex: 1 1 0;
	height: 2px;
	background: var(--mp-color-text);
}

.mp-title {
	margin: 0;
	padding: 0;
	line-height: 1;
	white-space: nowrap;
	flex-shrink: 0;
}

/* Taille "grand" : force une taille independante du theme */
.mp-title--grand {
	font-size: clamp(1.6rem, 4vw, 2.5rem);
	font-weight: 700;
	color: var(--mp-color-text);
}


/* ─────────────────────────────────────────────────────
   4. Onglets de navigation
───────────────────────────────────────────────────── */
.mp-tabs {
	display: flex;
	border-bottom: 2px solid var(--mp-color-border);
	margin-bottom: 1rem;
	/* Scroll horizontal si l'écran est très étroit */
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.mp-tabs::-webkit-scrollbar {
	display: none;
}

/* Bouton onglet */
.mp-tab {
	/* Reset complet pour ne pas hériter des styles de bouton du thème */
	all: unset;
	cursor: pointer;
	flex-shrink: 0;

	display: inline-block;
	padding: 0.55rem 1rem;
	position: relative;
	bottom: -2px;            /* colle au border-bottom de .mp-tabs */

	font-size: var(--mp-font-size-sm);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--mp-color-muted);
	white-space: nowrap;

	border-bottom: 3px solid transparent;
	transition: color 0.18s ease, border-color 0.18s ease;
}

.mp-tab:hover {
	color: var(--mp-color-text);
}

.mp-tab--active {
	background: var(--mp-color-btn-bg);
	color: var(--mp-color-btn-fg);
	border-bottom-color: transparent;
	padding-top: 0.55rem;
	padding-bottom: 0.55rem;
	position: static;
}

.mp-tab--active:hover {
	color: var(--mp-color-btn-fg);
}

/* Focus visible (accessibilité clavier) */
.mp-tab:focus-visible {
	outline: 2px solid var(--mp-color-text);
	outline-offset: 2px;
}


/* ─────────────────────────────────────────────────────
   5. Loader (spinner)
───────────────────────────────────────────────────── */
.mp-loader {
	display: flex;
	justify-content: center;
	padding: 2rem 0;
}

.mp-spinner {
	display: block;
	width: 28px;
	height: 28px;
	border: 2px solid var(--mp-color-border);
	border-top-color: var(--mp-color-text);
	border-radius: 50%;
	animation: mp-spin 0.7s linear infinite;
}

@keyframes mp-spin {
	to { transform: rotate(360deg); }
}


/* ─────────────────────────────────────────────────────
   6. Message "aucun événement"
───────────────────────────────────────────────────── */
.mp-empty {
	text-align: center;
	color: var(--mp-color-muted);
	font-size: var(--mp-font-size-md);
	padding: 2.5rem 0;
	margin: 0;
}


/* ─────────────────────────────────────────────────────
   7. Liste des événements
───────────────────────────────────────────────────── */
.mp-events {
	/* Conteneur flex vertical – chaque article est une ligne */
	display: flex;
	flex-direction: column;
}


/* ─────────────────────────────────────────────────────
   8. Événement – layout
   Grille : [horaire] [corps] [bouton]
   (+ colonne image si activée)
───────────────────────────────────────────────────── */
.mp-event {
	border-top: 1px solid var(--mp-color-border);
}

.mp-event:last-child {
	border-bottom: 1px solid var(--mp-color-border);
}

/* Grille par défaut (sans image) */
.mp-event-inner {
	display: grid;
	grid-template-columns: var(--mp-time-width) 1fr auto;
	grid-template-areas: "time body resa";
	align-items: center;
	gap: var(--mp-gap);
	padding: var(--mp-row-py) 0;
}

/* Grille avec image */
.mp-event-inner.has-img {
	grid-template-columns: var(--mp-time-width) var(--mp-img-width) 1fr auto;
	grid-template-areas: "time img body resa";
}


/* ─────────────────────────────────────────────────────
   9. Événement – Colonne horaire
───────────────────────────────────────────────────── */
.mp-event-time {
	grid-area: time;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1px;
	line-height: 1.2;
}

.mp-time-start {
	font-size: var(--mp-font-size-md);
	font-weight: 700;
	color: var(--mp-color-text);
}

.mp-time-sep {
	font-size: 0.7rem;
	color: var(--mp-color-border);
	line-height: 1;
}

.mp-time-end {
	font-size: var(--mp-font-size-sm);
	font-weight: 500;
	color: var(--mp-color-muted);
}

.mp-time-none {
	color: var(--mp-color-border);
	font-size: var(--mp-font-size-md);
}


/* ─────────────────────────────────────────────────────
  10. Événement – Colonne image (optionnelle)
───────────────────────────────────────────────────── */
.mp-event-img {
	grid-area: img;
	width: var(--mp-img-width);
	height: var(--mp-img-height);
	overflow: hidden;
	flex-shrink: 0;
}

.mp-event-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/* ─────────────────────────────────────────────────────
  11. Événement – Corps (titre, lieu, tarif)
───────────────────────────────────────────────────── */
.mp-event-body {
	grid-area: body;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;         /* évite le débordement en grille */
}

/* Titre */
.mp-event-title {
	margin: 0;
	padding: 0;
	font-size: var(--mp-font-size-lg);
	font-weight: 600;
	line-height: 1.35;
}

.mp-event-title a {
	color: var(--mp-color-text);
	text-decoration: none;
}

.mp-event-title a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mp-event-title a:focus-visible {
	outline: 2px solid var(--mp-color-text);
	outline-offset: 2px;
}

/* Plage de dates pour les evenements multi-jours : "du 7 fev au 10 fev" */
.mp-event-daterange {
	margin: 0;
	padding: 0;
	font-size: var(--mp-font-size-sm);
	font-weight: 600;
	color: var(--mp-color-muted);
	font-style: italic;
}

/* Lieu */
.mp-event-lieu {
	display: flex;
	align-items: flex-start;
	gap: 0.3rem;
	margin: 0;
	padding: 0;
	font-size: var(--mp-font-size-sm);
	color: var(--mp-color-muted);
	line-height: 1.4;
}

.mp-event-lieu svg {
	flex-shrink: 0;
	margin-top: 2px;
	opacity: 0.5;
}

.mp-event-lieu span {
	/* Troncature du texte long sur une seule ligne */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Tarif */
.mp-event-tarif {
	margin: 0;
	padding: 0;
	font-size: var(--mp-font-size-sm);
	font-weight: 600;
	color: var(--mp-color-text);
}

/* Variante "Entree libre sur reservation" */
.mp-event-tarif--libre {
	font-weight: 400;
	font-style: italic;
	color: var(--mp-color-muted);
}


/* ─────────────────────────────────────────────────────
  12. Événement – Bouton réservation
      Noir / Blanc / Zéro border-radius (charte Mansa)
───────────────────────────────────────────────────── */
.mp-event-resa {
	grid-area: resa;
	flex-shrink: 0;
}

.mp-btn-resa {
	display: inline-block;
	padding: 0.45rem 1rem;
	background: var(--mp-color-btn-bg);
	color: var(--mp-color-btn-fg) !important;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	text-decoration: none !important;
	border: 2px solid var(--mp-color-btn-bg);
	border-radius: 0;
	white-space: nowrap;
	transition: background 0.2s ease, color 0.2s ease;
	cursor: pointer;
}

.mp-btn-resa:hover,
.mp-btn-resa:focus-visible {
	background: var(--mp-color-bg);
	color: var(--mp-color-btn-bg) !important;
	outline: none;
}


/* ─────────────────────────────────────────────────────
  13. Bouton "Voir plus" (load more)
───────────────────────────────────────────────────── */
.mp-more-wrap {
	display: flex;
	justify-content: center;
	padding-top: 1.25rem;
	margin-top: 0.25rem;
	border-top: 1px solid var(--mp-color-border);
}

.mp-more-btn {
	/* Reset */
	all: unset;
	cursor: pointer;

	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 1.75rem;
	border: 2px solid var(--mp-color-text);
	border-radius: 0;

	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--mp-color-text);

	transition: background 0.2s ease, color 0.2s ease;
}

.mp-more-btn:hover:not(:disabled) {
	background: var(--mp-color-text);
	color: var(--mp-color-bg);
}

.mp-more-btn:disabled {
	opacity: 0.35;
	cursor: wait;
}

.mp-more-btn:focus-visible {
	outline: 2px solid var(--mp-color-text);
	outline-offset: 2px;
}

/* Compteur "X restants" à côté du label */
.mp-more-count {
	font-size: 0.68rem;
	font-weight: 400;
	opacity: 0.55;
	text-transform: none;
	letter-spacing: 0;
}


/* ─────────────────────────────────────────────────────
  14. Utilitaires
───────────────────────────────────────────────────── */
/* Masquer un élément (ajouté / retiré par le JS) */
.mp-hidden {
	display: none !important;
}


/* ─────────────────────────────────────────────────────
  15. Responsive – Tablette  (≤ 768 px)
───────────────────────────────────────────────────── */
@media (max-width: 768px) {

	.mp-event-inner {
		grid-template-columns: 54px 1fr auto;
	}

	.mp-event-inner.has-img {
		/* On garde l'image, mais elle prend moins de place */
		--mp-img-width: 68px;
		--mp-img-height: 56px;
		grid-template-columns: 54px 68px 1fr auto;
	}

	.mp-time-start { font-size: 0.85rem; }

	/* Lieu sur une ligne max sur tablette */
	.mp-event-lieu span {
		max-width: 28ch;
	}
}


/* ─────────────────────────────────────────────────────
  16. Responsive – Mobile (≤ 480 px)
───────────────────────────────────────────────────── */
@media (max-width: 480px) {

	/* Onglets plus compacts */
	.mp-tab {
		padding: 0.5rem 0.75rem;
		font-size: 0.7rem;
	}

	/*
	 * Événement SANS image :
	 * On passe en 2 colonnes [horaire] [corps]
	 * Le bouton réservation tombe sous le corps.
	 */
	.mp-event-inner {
		grid-template-columns: 54px 1fr;
		grid-template-areas:
			"time body"
			".    resa";
		align-items: start;
	}

	/*
	 * Événement AVEC image :
	 * L'image passe en pleine largeur au-dessus de tout.
	 */
	.mp-event-inner.has-img {
		grid-template-columns: 54px 1fr;
		grid-template-areas:
			"img  img"
			"time body"
			".    resa";
		--mp-img-width: 100%;
		--mp-img-height: 120px;
	}

	.mp-event-img {
		width: 100%;
	}

	/* Bouton pleine largeur sur mobile */
	.mp-btn-resa {
		display: block;
		width: 100%;
		text-align: center;
		padding: 0.6rem 1rem;
	}

	/* Lieu peut prendre 2 lignes sur mobile */
	.mp-event-lieu span {
		white-space: normal;
		max-width: none;
	}

	/* Bouton "Voir plus" pleine largeur */
	.mp-more-btn {
		width: 100%;
		justify-content: center;
	}
}


/* ─────────────────────────────────────────────────────
  17. Animation d'apparition des événements
      Respecte prefers-reduced-motion
───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {

	/* Classe ajoutée par le JS pendant l'animation */
	.mp-event.mp-entering {
		animation: mp-fade-in 0.28s ease forwards;
	}

	@keyframes mp-fade-in {
		from {
			opacity: 0;
			transform: translateY(8px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
}