/* ===== The Events Calendar — harmonisation au thème SBE 2026 =====
   La page /event/ affiche par défaut le design du plugin (Tribe v2 views), qui
   ne reprend ni les polices ni la palette du site. Plutôt que de surcharger
   chaque règle, on REMAPPE les variables CSS du plugin (--tec-*) sur les tokens
   du site (--accent, --contrast-2, --base-2... définis par GeneratePress), puis
   on affine quelques composants (cartes, date, boutons, séparateurs de mois).
   Feuille chargée APRÈS les styles Tribe (voir functions.php) → priorité de
   source pour des spécificités égales (:root ≈ .tribe-common). */

/* ---------- 1. Remapping des tokens Tribe sur la palette du site ---------- */
/* Portée : .tribe-common couvre les vues (liste/mois/jour), .single-tribe_events
   couvre la page événement unique (template « classic », HORS de .tribe-common
   mais gros consommateur de ces mêmes variables). */
.tribe-common,
.single-tribe_events {
	/* Accents principaux → bleu marque #2c4b9a */
	--tec-color-accent-primary: var(--accent);
	--tec-color-accent-primary-hover: #3a5cb0;
	--tec-color-accent-primary-active: #243d80;
	--tec-color-accent-secondary: var(--accent-7);     /* #5282c0, lisible en texte */
	--tec-color-accent-secondary-hover: var(--accent);
	--tec-color-accent-secondary-active: #243d80;

	/* Boutons */
	--tec-color-button-primary: var(--accent);
	--tec-color-button-primary-hover: #3a5cb0;
	--tec-color-button-primary-active: #243d80;
	--tec-color-button-secondary: var(--accent);

	/* Texte */
	--tec-color-text-primary: var(--contrast-2);       /* #1F1F1F */
	--tec-color-text-primary-hover: var(--accent);
	--tec-color-text-primary-active: #243d80;
	--tec-color-text-secondary: var(--contrast-3);     /* #4c4c52 */
	--tec-color-text-events-title: var(--contrast-2);
	--tec-color-text-event-title-list: var(--contrast-2);
	--tec-color-text-event-date: var(--contrast-3);
	--tec-color-link-accent: var(--accent); /* liens du bloc détails (org./lieu/web) */

	/* Fonds */
	--tec-color-background: var(--base-3);             /* #fff */
	--tec-color-background-secondary: var(--base-2);   /* #F6F6F6 */
	--tec-color-background-events: var(--base-3);

	/* Bordures */
	--tec-color-border-default: #e6e6e9;
	--tec-color-border-secondary: #e6e6e9;
	--tec-color-border-active: var(--accent);

	/* Icônes */
	--tec-color-icon-primary: var(--accent);
	--tec-color-icon-active: var(--accent);
	--tec-color-icon-hover: var(--accent);

	/* Typographie */
	--tec-font-family-base: "Inter", system-ui, sans-serif;
	--tec-font-family-sans-serif: "Inter", system-ui, sans-serif;

	/* Arrondi global → 8 px comme le reste du site */
	--tec-border-radius-default: 8px;
}

/* ---------- 2. Typographie ---------- */
.tribe-common,
.tribe-events {
	font-family: "Inter", system-ui, sans-serif;
	color: var(--contrast-2);
}

/* Titres → Inter Tight (display du site) */
.tribe-common h1,
.tribe-common h2,
.tribe-common h3,
.tribe-common h4,
.tribe-common h5,
.tribe-common h6 {
	font-family: "Inter Tight", "Inter", sans-serif;
	font-weight: 700;
	color: var(--contrast-2);
}

/* Liens tribe → bleu accent au survol */
.tribe-common a:hover,
.tribe-events a:hover {
	color: var(--accent);
}

/* ---------- 3. Barre d'événements (recherche + sélecteur de vue) ---------- */
.tribe-events .tribe-events-c-events-bar {
	border: 1px solid #e6e6e9;
	border-radius: 8px;
	background: var(--base-3);
}

/* Champ de recherche : look champ du site (fond clair, arrondi, focus lime) */
.tribe-events .tribe-common-form-control-text__input,
.tribe-events .tribe-events-c-search__input {
	border: 1px solid #e6e6e9;
	border-radius: 8px;
	background: var(--base-2);
	font-family: "Inter", sans-serif;
	color: var(--contrast-2);
	transition: border-color .3s ease, box-shadow .3s ease;
}
.tribe-events .tribe-common-form-control-text__input:focus,
.tribe-events .tribe-events-c-search__input:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 2px var(--accent-2); /* lime, comme le focus newsletter */
}

/* Bouton de recherche (loupe) → plein bleu */
.tribe-events .tribe-events-c-search__button,
.tribe-events button.tribe-events-c-search__button {
	background: var(--accent);
	border-radius: 8px;
	color: var(--base-3);
	border: 2px solid var(--accent);
	transition: background-color .3s ease, color .3s ease;
}
.tribe-events .tribe-events-c-search__button:hover,
.tribe-events button.tribe-events-c-search__button:hover {
	background: var(--base-3);
	color: var(--accent);
}
.tribe-events .tribe-events-c-search__button:hover path,
.tribe-events button.tribe-events-c-search__button:hover path {
	fill: var(--accent);
}

/* Bouton sélecteur de vue (liste/mois…) → texte accent, fond neutre */
.tribe-events .tribe-events-c-view-selector__button {
	font-weight: 600;
	color: var(--contrast-2);
}

/* ---------- 4. Boutons secondaires (S'abonner, iCal) ---------- */
/* Reprend le style « bouton bordé » du site : bordure accent, inversion au survol. */
.tribe-events .tribe-events-c-subscribe-dropdown__button,
.tribe-events .tribe-events-c-ical__link {
	border: 2px solid var(--accent);
	border-radius: 8px;
	color: var(--accent);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 1px;
	text-transform: uppercase;
	transition: background-color .3s ease, color .3s ease;
}
.tribe-events .tribe-events-c-subscribe-dropdown__button:hover,
.tribe-events .tribe-events-c-ical__link:hover {
	background: var(--accent);
	color: var(--base-3);
}

/* ---------- 5. Navigation (précédent / suivant / aujourd'hui) ---------- */
.tribe-events .tribe-events-c-nav__prev,
.tribe-events .tribe-events-c-nav__next,
.tribe-events .tribe-events-c-nav__today,
.tribe-events .tribe-events-c-top-bar__nav-link {
	color: var(--contrast-2);
	font-weight: 500;
}
.tribe-events .tribe-events-c-nav__prev:hover,
.tribe-events .tribe-events-c-nav__next:hover,
.tribe-events .tribe-events-c-nav__today:hover,
.tribe-events .tribe-events-c-top-bar__nav-link:hover {
	color: var(--accent);
}

/* ---------- 6. Vue liste : séparateur de mois ---------- */
.tribe-events .tribe-events-calendar-list__month-separator {
	border-top: 1px solid #e6e6e9;
	padding-top: 1.25rem;
}
.tribe-events .tribe-events-calendar-list__month-separator h3,
.tribe-events .tribe-events-calendar-list__month-separator-text {
	font-family: "Inter Tight", "Inter", sans-serif;
	font-weight: 700;
	font-size: 24px;
	color: var(--accent); /* mois en bleu marque */
}

/* ---------- 7. Vue liste : étiquette de date (jour) ---------- */
.tribe-events .tribe-events-calendar-list__event-date-tag {
	background: var(--base-2);
	border-radius: 8px;
	padding: 8px 12px;
	min-width: 110px;
	text-align: center;
}
.tribe-events .tribe-events-calendar-list__event-date-tag-weekday {
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 12px;
	font-weight: 600;
	color: var(--contrast-3);
}
.tribe-events .tribe-events-calendar-list__event-date-tag-daynum {
	font-family: "Inter Tight", "Inter", sans-serif;
	font-weight: 700;
	color: var(--accent); /* n° du jour en bleu */
}

/* ---------- 8. Vue liste : carte d'événement ---------- */
/* Séparation douce entre événements + image arrondie */
.tribe-events .tribe-events-calendar-list__event-row + .tribe-events-calendar-list__event-row,
.tribe-events .tribe-events-calendar-list__event-row {
	border: 2px solid #e6e6e9;
}

/* Titre d'événement → Inter Tight, contraste fort, bleu au survol */
.tribe-events .tribe-events-calendar-list__event-title,
.tribe-events .tribe-events-calendar-list__event-title-link {
	font-family: "Inter Tight", "Inter", sans-serif;
	font-weight: 700;
	font-size: 22px;
	line-height: 1.3;
}
.tribe-events .tribe-events-calendar-list__event-title-link {
	color: var(--contrast-2);
}
.tribe-events .tribe-events-calendar-list__event-title-link:hover {
	color: var(--accent);
}

/* Date/heure sous le titre → texte secondaire */
.tribe-events .tribe-events-calendar-list__event-datetime {
	color: var(--contrast-3);
	font-weight: 500;
}

/* ---------- 9. Page événement unique (single, template classic) ---------- */
/* Le remapping des variables (section 1, étendu à .single-tribe_events) recolore
   déjà l'ensemble ; on affine ici la mise en forme des composants. */

/* Titre H1 → Inter Tight (display du site), taille proche du H1 site */
.single-tribe_events .tribe-events-single-event-title {
	font-family: "Inter Tight", "Inter", sans-serif;
	font-weight: 700;
	color: var(--contrast-2);
	font-size: 38px;
	line-height: 1.2;
}

/* Horaires (date/heure) → en accent bleu, bien lisible */
.single-tribe_events .tribe-events-schedule {
	color: var(--accent);
	font-weight: 600;
	font-size: 18px;
}

/* Image à la une → arrondie */
.single-tribe_events .tribe-events-event-image img {
	border-radius: 8px;
}

/* Bloc « Détails » → carte info (fond clair, bordure, arrondi) */
.single-tribe_events .tribe-events-meta-group {
	background: var(--base-2);
	border: 1px solid #e6e6e9;
	border-radius: 8px;
	padding: 20px 24px;
}
/* Libellés (Date :, etc.) → eyebrow gris majuscule ; valeurs en contraste fort */
.single-tribe_events .tribe-events-meta-label {
	color: var(--contrast-3);
	font-size: 13px;
	letter-spacing: .5px;
	text-transform: uppercase;
}
.single-tribe_events .tribe-events-meta-value {
	color: var(--contrast-2);
}
.single-tribe_events .tribe-events-meta-value a {
	color: var(--accent);
}
.single-tribe_events .tribe-events-meta-value a:hover {
	text-decoration: underline;
}

/* Titre de section (« Détails », « Organisateur ») → déjà majuscule via tokens,
   on passe la couleur en bleu accent pour rythmer la lecture */
.single-tribe_events .tribe-events-single-section-title {
	color: var(--accent);
}

/* Lien retour (« ‹ Tous les Évènements ») → accent */
.single-tribe_events .tribe-events-back a,
.single-tribe_events .tribe-events-back a:visited {
	color: var(--accent);
	font-weight: 600;
}
.single-tribe_events .tribe-events-back a:hover {
	text-decoration: underline;
}

/* Événements liés → titre en Inter Tight */
.single-tribe_events .tribe-events-related-events-title {
	font-family: "Inter Tight", "Inter", sans-serif;
	color: var(--contrast-2);
}

/* ---------- 10. Vue mois (grille calendrier) ---------- */
/* Tableau : bordures douces + arrondi extérieur */
.tribe-events .tribe-events-calendar-month {
	border: 1px solid #e6e6e9;
	border-radius: 8px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}
.tribe-events .tribe-events-calendar-month th,
.tribe-events .tribe-events-calendar-month td {
	border-color: #e6e6e9;
}

/* En-tête : jours de la semaine → uppercase, gras, bleu, ligne accent dessous */
.tribe-events .tribe-events-calendar-month__header {
	border-bottom: 2px solid var(--accent);
}
.tribe-events .tribe-events-calendar-month__header-column-title {
	font-family: "Inter", sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--accent);
	padding: 14px 8px;
}

/* Numéros de jour → Inter Tight */
.tribe-events .tribe-events-calendar-month__day-date-daynum {
	font-family: "Inter Tight", "Inter", sans-serif;
	font-weight: 600;
	color: var(--contrast-2);
}

/* Jours hors mois et passés → atténués */
.tribe-events .tribe-events-calendar-month__day--other-month .tribe-events-calendar-month__day-date-daynum,
.tribe-events .tribe-events-calendar-month__day--past-month .tribe-events-calendar-month__day-date-daynum,
.tribe-events .tribe-events-calendar-month__day--next-month .tribe-events-calendar-month__day-date-daynum,
.tribe-events .tribe-events-calendar-month__day--past .tribe-events-calendar-month__day-date-daynum {
	color: var(--base); /* gris #8F8F8F */
	opacity: .7;
}

/* Jour courant (aujourd'hui) → pastille bleue, chiffre blanc */
.tribe-events .tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date-daynum {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--accent);
	color: var(--base-3);
	font-weight: 700;
}

/* Survol d'une cellule → fond clair ; cellule sélectionnée → arrondie */
.tribe-events .tribe-events-calendar-month__day-cell--desktop:hover {
	background: var(--base-2);
}
.tribe-events .tribe-events-calendar-month__day-cell--selected {
	border-radius: 8px;
}

/* Événements dans la grille (barres desktop + liste mobile) → titres Inter Tight */
.tribe-events .tribe-events-calendar-month__calendar-event-title,
.tribe-events .tribe-events-calendar-month-mobile-events__mobile-event-title {
	font-family: "Inter Tight", "Inter", sans-serif;
	font-weight: 700;
}
.tribe-events .tribe-events-calendar-month__calendar-event-title-link:hover,
.tribe-events .tribe-events-calendar-month-mobile-events__mobile-event-title-link:hover {
	color: var(--accent);
}

/* ---------- 11. Vue jour ---------- */
.tribe-events .tribe-events-calendar-day__event-title,
.tribe-events .tribe-events-calendar-day__event-title-link {
	font-family: "Inter Tight", "Inter", sans-serif;
	font-weight: 700;
	font-size: 22px;
	line-height: 1.3;
}
.tribe-events .tribe-events-calendar-day__event-title-link {
	color: var(--contrast-2);
}
.tribe-events .tribe-events-calendar-day__event-title-link:hover {
	color: var(--accent);
}
.tribe-events .tribe-events-calendar-day__event-time {
	color: var(--contrast-3);
	font-weight: 500;
}
.tribe-events .tribe-events-calendar-day__event-featured-image {
	border-radius: 8px;
}

/* ---------- 12. Messages / état vide (« Aucun évènement ») ---------- */
.tribe-events .tribe-events-c-messages__message {
	background: var(--base-2);
	border: 1px solid #e6e6e9;
	border-left: 3px solid var(--accent);
	border-radius: 8px;
	padding: 16px 20px;
	color: var(--contrast-2);
	font-weight: 500;
}

/* ---------- 13. Accessibilité : focus visible au clavier (lime) ---------- */
.tribe-events button:focus-visible,
.tribe-events a:focus-visible,
.tribe-events input:focus-visible {
	outline: 2px solid var(--accent-2);
	outline-offset: 2px;
}

.tribe-events .tribe-events-calendar-list__month-separator::after {
	background-color: transparent;
}

.tribe-events .tribe-events-calendar-list__month-separator {
    border: 0;
}

.tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-list__event-row {
	margin: var(--tec-spacer-9) 0 var(--tec-spacer-8);
}

.tribe-common--breakpoint-medium.tribe-common .tribe-common-l-container {
	padding-left: 30px;
	padding-right: 30px;
}

.tribe-events .tribe-events-calendar-list__month-separator h3, .tribe-events .tribe-events-calendar-list__month-separator-text {
	text-transform: uppercase;
	font-size: 25px;
}

.tribe-events-calendar-list .tribe-events-calendar-list__event-row {
	border-radius: 8px;
}

.tribe-common--breakpoint-medium.tribe-common .tribe-common-g-row--gutters > .tribe-common-g-col {
	padding: var(--tec-grid-gutter-half);
}

.tribe-events .tribe-events-calendar-list__event-date-tag-weekday:first-child {
	font-size: 22px;
	white-space: nowrap;
}

.tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-list__event-row > .tribe-common-g-col {
	padding: var(--tec-grid-gutter-half);
}

.tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-list__event-date-tag {
	width: var(--tec-grid-width-2-of-9);
}

.tribe-events .tribe-events-calendar-day__event-featured-image-link,
.tribe-events .tribe-events-calendar-list__event-featured-image {
	max-height: 250px;
	width: auto;
	margin: 0 auto;
}

.tribe-events-single > .tribe_events {
	display: flex;
	flex-wrap: wrap;
	gap: 25px;

	.tribe-events-meta-group {
		margin-right: 0;
	}

	.tribe-events-event-meta .tribe-events-meta-item {
		display: flex;
		align-items: stretch;
		gap: 5px;

		abbr {
			border: 0;
		}

		& > span {
			display: flex;
			align-items: center;
		}
	}
}

@media (min-width: 768px) {
	.tribe-events-single > .tribe_events {
		flex-wrap: nowrap;

		& > .metas {
			width: calc(100% * 1/3);
		}

		& > .content {
			width: calc(100% * 2/3);
		}
	}
}

.tribe-events-event-meta::before, .tribe-events-event-meta ~ div:not(.tribe-events-event-meta, .event-tickets) {
	border: 0;
}

@media (min-width: 768px) {
	.tribe-events-schedule {
		margin-top: 0;
	}
}

.single-tribe_events .tribe-events-single-event-title {
	font-size: 24px;
}

.tribe-events .tribe-events-l-container {
	padding-top: 0;
}

.tribe-common .tribe-common-g-row--gutters {
	padding: var(--tec-grid-gutter-small-half);
}

.tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-list-nav,
.tribe-events .tribe-events-c-subscribe-dropdown__container {
	display: none;
}

/* ---------- 14. Vue liste : titres de section (« à venir » / « récents ») ---------- */
/* Titres poses par la surcharge `tribe/events/v2/list.php` du theme enfant, qui
   partagent la boucle du plugin en deux blocs quand les evenements passes sont
   inclus dans la page. */
.tribe-events .tribe-events-calendar-list__section-heading {
	font-family: "Inter Tight", "Inter", sans-serif;
	font-weight: 700;
	font-size: 25px;
	line-height: 1.25;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: var(--accent);
	margin: var(--tec-spacer-9, 2rem) 0 var(--tec-spacer-5, 1rem);
}

/* Bloc « Evenements recents » : volontairement en retrait. */
.tribe-events .tribe-events-calendar-list__section-heading--past {
	color: var(--contrast-3);
}
.tribe-events .tribe-events-calendar-list--past .tribe-events-calendar-list__event {
	opacity: .78;
}
.tribe-events .tribe-events-calendar-list--past .tribe-events-calendar-list__event:hover {
	opacity: 1;
}