/* =========================================================================
   Habillage de « The Events Calendar » + « Event Tickets » (RSVP) pour
   matcher le design du Collectif Jeunesse. Ce fichier ne remplace AUCUN
   template des plugins : il ne fait que surcharger visuellement leurs
   classes CSS existantes avec les jetons de conception du thème
   (assets/css/main.css). N'est chargé que si le plugin est actif
   (voir inc/theme-setup.php) — classes vérifiées sur le DOM réel rendu
   par la version installée (vues Liste / Mois / Jour, fiche événement,
   bloc RSVP).

   Note sur les !important : les feuilles de style des deux plugins (en
   particulier event-tickets/.../rsvp.css et tickets-forms.css) se
   chargent APRÈS ce fichier et utilisent des sélecteurs composés comme
   « .tribe-common button.tribe-common-c-btn » (spécificité supérieure à
   un simple « .tribe-common-c-btn »). Sans !important sur les propriétés
   de couleur/bordure, nos règles perdent systématiquement — vérifié en
   inspectant les règles CSS effectivement appliquées dans le navigateur.
   C'est la pratique standard pour une feuille de compatibilité posée
   sur un plugin tiers dont on ne contrôle ni l'ordre de chargement ni
   la spécificité interne (ex. WooCommerce/bbPress dans d'autres thèmes).
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Jetons — on réutilise les variables du thème à la source pour que
   toute la sortie des plugins (qui lit --tribe-common-*) en hérite.
   ------------------------------------------------------------------------- */
.tribe-common {
	--tribe-common-color-accent-primary: var(--cj-royal, #12479D);
	--tribe-common-color-accent-primary-active: var(--cj-royal-fonce, #0D3576);
	--tribe-common-color-accent-primary-background: var(--cj-royal, #12479D);
	--tribe-common-color-text-primary: var(--cj-foreground, #111826);
	--tribe-common-color-text-secondary: var(--cj-muted-foreground, #677284);
	--tribe-common-color-background: var(--cj-card, #FFFFFF);
	--tribe-common-font-family-base: var(--cj-police, "Instrument Sans", sans-serif);
	--tribe-common-font-family-alt: var(--cj-police, "Instrument Sans", sans-serif);
	font-family: var(--cj-police, "Instrument Sans", sans-serif);
	color: var(--cj-foreground, #111826);
}

/* Conteneur général : on aligne sur la largeur de contenu du thème. */
.tribe-events,
.tribe-events-single,
.tribe-events-header {
	max-width: var(--cj-largeur-contenu, 80rem);
	margin-inline: auto;
	padding-inline: var(--cj-gouttiere, 1.5rem);
	font-family: var(--cj-police);
}

.tribe-events-single { padding-block: 1rem 3rem; }
.tribe-events-header { padding-top: 0; }

/* -------------------------------------------------------------------------
   2. Boutons — tous les boutons des deux plugins (recherche, RSVP,
   « Ajouter au calendrier », pagination) passent par .tribe-common-c-btn
   ou une de ses variantes bordées : on les aligne sur .cj-bouton.
   ------------------------------------------------------------------------- */
.tribe-common-c-btn,
.tribe-events-c-search__button,
.tribe-tickets__rsvp-actions-button-going,
button[name="tribe-tickets-attendees-list-optout-form-submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	background: var(--cj-royal) !important;
	color: var(--cj-royal-foreground) !important;
	border: 1px solid var(--cj-royal) !important;
	border-radius: var(--cj-rayon-plein) !important;
	font-family: var(--cj-police);
	font-size: 0.9375rem;
	font-weight: 500;
	padding: 0.625rem 1.25rem;
	min-height: 44px;
	line-height: 1.2;
	transition: filter 0.15s ease;
	box-shadow: none !important;
	text-transform: none;
}
.tribe-common-c-btn:hover,
.tribe-common-c-btn:focus-visible,
.tribe-events-c-search__button:hover,
.tribe-tickets__rsvp-actions-button-going:hover {
	filter: brightness(1.1);
	background: var(--cj-royal) !important;
	color: var(--cj-royal-foreground) !important;
}

/* Boutons bordés (secondaires) : « Ajouter au calendrier », « Aujourd'hui ». */
.tribe-common-c-btn-border,
.tribe-common-c-btn-border-small,
.tribe-events-c-top-bar__today-button,
.tribe-events-c-top-bar__datepicker-button {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: var(--cj-secondary) !important;
	color: var(--cj-secondary-foreground) !important;
	border: 1px solid var(--cj-border) !important;
	border-radius: var(--cj-rayon-plein) !important;
	font-family: var(--cj-police);
	font-size: 0.875rem;
	font-weight: 500;
	padding: 0.5rem 1rem;
	min-height: 40px;
	transition: background-color 0.15s ease;
}
.tribe-common-c-btn-border:hover,
.tribe-common-c-btn-border-small:hover,
.tribe-events-c-top-bar__today-button:hover {
	background: var(--cj-border) !important;
	color: var(--cj-secondary-foreground) !important;
}

/* Icônes de bouton (caret précédent/suivant) : couleur héritée du thème. */
.tribe-common-c-btn-icon {
	background: var(--cj-card) !important;
	border: 1px solid var(--cj-border) !important;
	border-radius: 50% !important;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}
.tribe-common-c-btn-icon:hover { background: var(--cj-secondary) !important; border-color: var(--cj-royal) !important; }
.tribe-common-c-btn-icon .tribe-common-c-svgicon,
.tribe-common-c-btn-icon__icon-svg { fill: var(--cj-royal) !important; }

/* -------------------------------------------------------------------------
   3. Barre d'évènements : recherche + bouton + sélecteur de vue.
   ------------------------------------------------------------------------- */
.tribe-events-c-events-bar,
.tribe-events-header__events-bar {
	background: var(--cj-card) !important;
	border: 1px solid var(--cj-border) !important;
	border-radius: var(--cj-rayon-lg) !important;
	padding: 0.75rem 1rem;
	box-shadow: var(--cj-ombre-carte) !important;
	margin-bottom: 1.5rem;
}

/* Champ de texte générique (utilisé par la recherche ET par le formulaire
   RSVP plus bas) : boîte visible par défaut... */
.tribe-common-form-control-text__input {
	font-family: var(--cj-police);
	border: 1px solid var(--cj-border) !important;
	border-radius: var(--cj-rayon-md) !important;
	background: var(--cj-background) !important;
	color: var(--cj-foreground) !important;
	padding: 0.65rem 0.875rem;
}
/* ...mais transparent dans la barre de recherche, qui a déjà sa propre
   bordure (section 3) : évite une double boîte. */
.tribe-events-c-search__input {
	border: 1px solid transparent !important;
	background: transparent !important;
	padding-block: 0;
}
.tribe-events-c-search__input::placeholder { color: var(--cj-muted-foreground); }

.tribe-events-c-events-bar__search-button {
	color: var(--cj-muted-foreground) !important;
}
.tribe-events-c-events-bar__search-button:hover { color: var(--cj-royal) !important; }
.tribe-events-c-events-bar__search-button-icon-svg { fill: var(--cj-muted-foreground) !important; }

/* Sélecteur de vue (Liste / Mois / Jour) : onglets soulignés en bleu roi. */
.tribe-events-c-view-selector__button {
	font-family: var(--cj-police);
	font-weight: 500;
	color: var(--cj-muted-foreground) !important;
	border-radius: 0;
}
.tribe-events-c-view-selector__button[aria-current="true"],
.tribe-events-c-view-selector__button:hover {
	color: var(--cj-royal) !important;
}
.tribe-events-c-view-selector__button[aria-current="true"] {
	border-bottom: 2px solid var(--cj-royal) !important;
	font-weight: 600;
}
.tribe-events-c-view-selector__list {
	background: var(--cj-card) !important;
	border: 1px solid var(--cj-border) !important;
	border-radius: var(--cj-rayon-lg) !important;
	box-shadow: var(--cj-ombre-flottante) !important;
}

/* Menu déroulant « Ajouter au calendrier / iCal ». */
.tribe-events-c-subscribe-dropdown__button {
	color: var(--cj-royal) !important;
	border-color: var(--cj-border) !important;
	border-radius: var(--cj-rayon-plein) !important;
}
.tribe-events-c-subscribe-dropdown__content {
	background: var(--cj-card) !important;
	border: 1px solid var(--cj-border) !important;
	border-radius: var(--cj-rayon-lg) !important;
	box-shadow: var(--cj-ombre-flottante) !important;
	font-family: var(--cj-police);
}

/* Barre de navigation (précédent / Aujourd'hui / suivant / « septembre 2026 »). */
.tribe-events-c-top-bar {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.5rem;
}
.tribe-events-c-top-bar__nav-title,
.tribe-events-calendar-month__header-title,
.tribe-events-c-top-bar__datepicker-desktop .tribe-common-h4 {
	font-family: var(--cj-police);
	color: var(--cj-royal) !important;
	font-weight: 600;
}

/* -------------------------------------------------------------------------
   4. Vue Liste — cartes d'événements alignées sur .cj-carte.
   ------------------------------------------------------------------------- */
.tribe-events-calendar-list__event-row {
	border: 1px solid var(--cj-border) !important;
	border-radius: var(--cj-rayon-lg) !important;
	background: var(--cj-card) !important;
	box-shadow: var(--cj-ombre-carte) !important;
	padding: 1.25rem;
	margin-bottom: 1.25rem;
}

.tribe-events-calendar-list__event-date-tag {
	color: var(--cj-royal) !important;
}
.tribe-events-calendar-list__event-date-tag-weekday,
.tribe-events-calendar-list__event-date-tag-daynum {
	color: var(--cj-royal) !important;
	font-family: var(--cj-police);
}

.tribe-events-calendar-list__event-title,
.tribe-events-calendar-list__event-title-link {
	font-family: var(--cj-police);
	color: var(--cj-royal) !important;
	font-weight: 600;
}
.tribe-events-calendar-list__event-title-link:hover { text-decoration: underline; }

.tribe-events-calendar-list__event-datetime,
.tribe-events-calendar-list__event-venue,
.tribe-events-calendar-list__event-venue-address {
	color: var(--cj-muted-foreground) !important;
	font-family: var(--cj-police);
}
.tribe-events-calendar-list__event-venue-title { color: var(--cj-secondary-foreground) !important; }

/* Étiquette « RSVP Now » / prix dans la carte liste : mini badge assorti. */
.tribe-events-c-small-cta__link {
	display: inline-flex;
	align-items: center;
	font-family: var(--cj-police);
	font-weight: 600;
	color: var(--cj-royal) !important;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.tribe-events-calendar-list__event-cost {
	color: var(--cj-accent-green-texte) !important;
	font-weight: 600;
}

/* Séparateur de mois dans la vue Liste. */
.tribe-events-calendar-list__month-separator-text {
	font-family: var(--cj-police);
	color: var(--cj-royal) !important;
	font-weight: 600;
}

/* -------------------------------------------------------------------------
   5. Vue Mois — grille avec jour courant en bleu roi.
   ------------------------------------------------------------------------- */
.tribe-events-calendar-month__day {
	border-color: var(--cj-border) !important;
	background: var(--cj-card) !important;
}
.tribe-events-calendar-month__day--other-month { background: var(--cj-background) !important; }

.tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date-daynum {
	background: var(--cj-royal) !important;
	color: var(--cj-royal-foreground) !important;
	border-radius: 999px !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
}

.tribe-events-calendar-month__day-date,
.tribe-events-calendar-month__day-date-daynum {
	font-family: var(--cj-police);
	color: var(--cj-foreground) !important;
}

.tribe-events-calendar-month__calendar-event {
	background: var(--cj-secondary) !important;
	border-left: 3px solid var(--cj-royal) !important;
	border-radius: var(--cj-rayon-sm) !important;
}
.tribe-events-calendar-month__calendar-event-title,
.tribe-events-calendar-month__calendar-event-title-link {
	font-family: var(--cj-police);
	color: var(--cj-royal) !important;
	font-weight: 600;
}
.tribe-events-calendar-month__calendar-event-datetime {
	color: var(--cj-muted-foreground) !important;
}

.tribe-events-calendar-month__calendar-event-tooltip {
	background: var(--cj-card) !important;
	border: 1px solid var(--cj-border) !important;
	border-radius: var(--cj-rayon-lg) !important;
	box-shadow: var(--cj-ombre-flottante) !important;
	font-family: var(--cj-police);
}

.tribe-events-calendar-month__header-column {
	font-family: var(--cj-police);
	color: var(--cj-muted-foreground) !important;
	font-weight: 600;
	text-transform: uppercase;
	font-size: 0.75rem;
}

/* -------------------------------------------------------------------------
   6. Vue Jour — même traitement que la vue Liste.
   ------------------------------------------------------------------------- */
.tribe-events-calendar-day__event {
	border: 1px solid var(--cj-border) !important;
	border-radius: var(--cj-rayon-lg) !important;
	background: var(--cj-card) !important;
	box-shadow: var(--cj-ombre-carte) !important;
	padding: 1.25rem;
	margin-bottom: 1.25rem;
}
.tribe-events-calendar-day__event-title,
.tribe-events-calendar-day__event-title-link {
	font-family: var(--cj-police);
	color: var(--cj-royal) !important;
	font-weight: 600;
}
.tribe-events-calendar-day__event-datetime,
.tribe-events-calendar-day__event-venue {
	color: var(--cj-muted-foreground) !important;
	font-family: var(--cj-police);
}

/* -------------------------------------------------------------------------
   7. Fiche événement (single event).
   ------------------------------------------------------------------------- */
.tribe-events-single-event-title {
	font-family: var(--cj-police);
	color: var(--cj-royal) !important;
	font-weight: 600;
	font-size: 1.875rem;
	line-height: 1.2;
}

.tribe-events-schedule,
.tribe-events-schedule * {
	font-family: var(--cj-police);
	color: var(--cj-muted-foreground) !important;
	font-weight: 500;
}
.tribe-events-schedule .tribe-events-cost {
	color: var(--cj-accent-green-texte) !important;
	font-weight: 600;
}

.tribe-events-single-event-description,
.tribe-events-content {
	font-family: var(--cj-police);
	color: var(--cj-foreground) !important;
	line-height: 1.7;
}

.tribe-events-meta-group,
.tribe-events-single-section {
	border-color: var(--cj-border) !important;
}
.tribe-events-single-section-title,
.tribe-events-meta-group-title {
	font-family: var(--cj-police);
	color: var(--cj-royal) !important;
	font-weight: 600;
}

/* -------------------------------------------------------------------------
   8. Bloc RSVP (Event Tickets).
   ------------------------------------------------------------------------- */
.tribe-tickets__rsvp-wrapper {
	border: 1px solid var(--cj-border) !important;
	border-radius: var(--cj-rayon-xl) !important;
	background: var(--cj-card) !important;
	box-shadow: var(--cj-ombre-carte) !important;
	font-family: var(--cj-police);
	overflow: hidden;
}

.tribe-tickets__rsvp-title {
	font-family: var(--cj-police);
	color: var(--cj-royal) !important;
	font-weight: 600;
}

.tribe-tickets__rsvp-availability,
.tribe-tickets__rsvp-availability-days-left,
.tribe-tickets__rsvp-availability-quantity {
	color: var(--cj-muted-foreground) !important;
	font-family: var(--cj-police);
}

.tribe-tickets__rsvp-attendance-number {
	color: var(--cj-royal) !important;
	font-weight: 700;
}

.tribe-tickets__rsvp-actions-rsvp-going,
.tribe-tickets__rsvp-actions-going {
	color: var(--cj-secondary-foreground) !important;
	font-family: var(--cj-police);
}

/* Le bouton « Going » hérite déjà du style .tribe-common-c-btn (section 2). */
.tribe-tickets__rsvp-actions-button-going {
	width: 100%;
}

.tribe-tickets__rsvp-details-wrapper { font-family: var(--cj-police); }

/* Formulaire RSVP (nom / courriel / nombre d'invités) une fois « Going »
   cliqué. Les champs eux-mêmes sont déjà stylés via
   .tribe-common-form-control-text__input (section 3) : reste le titre
   du formulaire et les étiquettes. */
.tribe-tickets__rsvp-form-title .tribe-common-h5 {
	font-family: var(--cj-police);
	color: var(--cj-royal) !important;
}
.tribe-tickets__form-field-label {
	font-family: var(--cj-police);
	color: var(--cj-secondary-foreground) !important;
	font-weight: 500;
}
.tribe-tickets__form-field-input,
.tribe-tickets select.tribe-common-form-control-text__input {
	font-family: var(--cj-police);
}

/* Confirmation « Vous êtes inscrit·e ». */
.tribe-tickets__rsvp-confirmation,
.tribe-tickets__tickets-confirmation {
	font-family: var(--cj-police);
	color: var(--cj-foreground) !important;
}
.tribe-tickets__rsvp-confirmation-title {
	color: var(--cj-accent-green-texte) !important;
	font-weight: 600;
}

/* Liste des personnes inscrites. */
.tribe-tickets-attendees-list,
.tribe-tickets__tickets-attendees-list {
	font-family: var(--cj-police);
}
.tribe-tickets-attendees-list-optout-wrap .tribe-common-c-btn {
	background: var(--cj-secondary) !important;
	color: var(--cj-secondary-foreground) !important;
	border-color: var(--cj-border) !important;
}

/* -------------------------------------------------------------------------
   9. Indicateur de chargement (accessible, normalement invisible) —
   filet de sécurité au cas où il resterait affiché un instant pendant
   une navigation AJAX : on le contraint à une taille de puce raisonnable
   plutôt que de le laisser occuper toute la largeur.
   ------------------------------------------------------------------------- */
.tribe-common-c-loader,
.tribe-tickets-loader__dots {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	width: auto !important;
	height: auto !important;
}
.tribe-common-c-loader__dot,
.tribe-common-c-loader__dot svg {
	width: 0.5rem !important;
	height: 0.5rem !important;
}
.tribe-common-c-loader__dot circle { fill: var(--cj-royal) !important; }

/* -------------------------------------------------------------------------
   10. Mobile (≤ 782px) — la barre d'évènements s'empile, les boutons
   restent pleine largeur et tactiles (≥44px, déjà garanti section 2).
   ------------------------------------------------------------------------- */
@media (max-width: 782px) {
	.tribe-events-c-events-bar {
		flex-direction: column;
		align-items: stretch;
	}
	.tribe-events-c-top-bar {
		flex-wrap: wrap;
		row-gap: 0.75rem;
	}
	.tribe-events-calendar-list__event-row,
	.tribe-events-calendar-day__event {
		padding: 1rem;
	}
}