/* ══ MDLM EVENTS — SIDEBAR DE LA FICHE ÉVÉNEMENT ═══════════════════════════
 *
 * Habillage de la vue TEC « À venir » posée dans la colonne de droite du
 * gabarit single. Visuel UNIQUEMENT : aucun gabarit TEC surchargé, aucun
 * script ajouté, aucune URL ni aucun comportement modifié.
 *
 * ── SCOPE ─────────────────────────────────────────────────────────────────
 * Toute règle commence par :
 *
 *     body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar
 *
 * .mdlm-event-sidebar est la classe CSS posée dans Elementor sur le conteneur
 * de la sidebar. La fiche principale (.mdlm-event-main) en est la sœur : aucun
 * sélecteur de cette feuille ne peut l'atteindre, et aucune classe TEC
 * (.tribe-events-calendar-list, .tribe-events-c-nav,
 * .tribe-events-c-subscribe-dropdown…) n'est jamais visée sans ce préfixe.
 *
 * Poids : l'identifiant fait passer ces règles devant TEC, tribe-common,
 * bootstrap-datepicker, Elementor et le thème SANS !important.
 *
 * ── MARQUAGE ET STYLES TEC — relevés dans la source, pas supposés ─────────
 * (the-events-calendar : src/views/v2/list/…, src/views/v2/components/… et
 *  src/resources/postcss/…)
 *
 * - Vue : .tribe-events-view > section.tribe-common-l-container. Dans une
 *   colonne étroite, TEC n'ajoute PAS la classe tribe-common--breakpoint-medium :
 *   la vue est rendue dans sa mise en page « mobile », quelle que soit la
 *   largeur de la fenêtre. Toutes les règles ci-dessous visent cette mise en
 *   page.
 * - « À venir » : button.tribe-events-c-top-bar__datepicker-button contenant
 *   un <time> puis le SVG caret-down. TEC ajoute --open au bouton ouvert.
 * - Calendrier : bootstrap-datepicker, injecté par script dans
 *   .tribe-events-c-top-bar__datepicker-container (position: absolute ;
 *   bottom: 0 ; width: 363px ; max-width: calc(100% + 29px) — d'où un
 *   débordement de 29 px dans une colonne étroite). Le panneau .datepicker
 *   reçoit son top / left / display / z-index EN LIGNE : cette feuille ne
 *   définit jamais position, top, left ni display sur lui.
 * - Événement : div.tribe-events-calendar-list__event-row (rangée à gouttières
 *   négatives) > date-tag (jour de semaine + quantième, SANS mois) + wrapper >
 *   article > image + details (date, titre, lieu, description, prix).
 * - Séparateur : h2.tribe-events-calendar-list__month-separator, trait en ::after.
 * - Navigation : ul.tribe-events-c-nav__list > trois li de 33 %.
 * - Abonnement : .tribe-events-c-subscribe-dropdown__container >
 *   .tribe-events-c-subscribe-dropdown > DIV __button (contient le vrai
 *   <button> et le SVG) + __content > ul __list. ical-links.js ouvre et ferme
 *   le contenu par jQuery .toggle() (style display en ligne) : cette feuille
 *   ne définit JAMAIS « display » sur __content. Le visuel TEC du panneau est
 *   porté par __list ; sur single-tribe_events, TEC place __content en
 *   position: absolute ; top: 42px.
 *
 * ── SOMMAIRE ──────────────────────────────────────────────────────────────
 *  1. Carte de la sidebar et jetons TEC
 *  2. Titre « À venir »
 *  3. Calendrier (datepicker)
 *  4. Séparateurs de mois
 *  5. Cartes événements
 *  6. Navigation de liste
 *  7. Bloc « S'abonner au calendrier »
 *  8. Mouvement réduit
 *  9. Points de rupture
 */


/* ══ 1. CARTE DE LA SIDEBAR ET JETONS TEC ══════════════════════════════════
 *
 * La vue TEC devient une carte blanche légère. Pas d'overflow: hidden : le
 * calendrier et le menu d'abonnement débordent de la carte par conception.
 *
 * Les jetons --tec-* de TEC sont redéfinis à l'échelle de la vue : tout ce
 * que cette feuille ne stylise pas explicitement (messages, chargement,
 * éléments ajoutés par une future version de TEC) reprend quand même la
 * police et les couleurs de Main dans la Main. */

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .tribe-events-view {
	--tec-font-family-sans-serif: var(--mdlm-ev-font-text);
	--tec-font-family-base: var(--mdlm-ev-font-text);
	--tec-color-text-primary: var(--mdlm-ev-ink);
	--tec-color-text-secondary: var(--mdlm-ev-muted);
	--tec-color-text-event-title: var(--mdlm-ev-navy);
	--tec-color-text-event-date: var(--mdlm-ev-muted);
	--tec-color-accent-primary: var(--mdlm-ev-blue-strong);
	--tec-color-accent-secondary-hover: var(--mdlm-ev-blue-ink);
	--tec-color-border-default: var(--mdlm-ev-line);
	--tec-color-border-secondary: var(--mdlm-ev-line);
	--tec-color-link-accent: var(--mdlm-ev-blue-ink);
	/* Trait de séparation très léger, propre à la sidebar : un cran sous
	   --mdlm-ev-line, pour ne plus découper la carte en tableau. */
	--mdlm-sb-line-soft: #E6F0F9;

	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	margin: 0;
	/* 21 px, et 5 px de plus à gauche et à droite depuis 0.1.17 : respiration
	   intérieure seulement. box-sizing: border-box et width: 100% — la carte
	   garde exactement la largeur de sa colonne Elementor. Téléphone : § 9. */
	padding: 1.3125rem calc(1.3125rem + 5px);
	border: 1px solid var(--mdlm-ev-line);
	border-radius: var(--mdlm-ev-radius-lg);
	background: var(--mdlm-ev-white);
	box-shadow: var(--mdlm-ev-shadow-shell);
	color: var(--mdlm-ev-ink);
	font-family: var(--mdlm-ev-font-text);
}

/* Police de la sidebar sur tous ses éléments de texte : tribe-common et le
   kit Elementor imposent les leurs. Poids faible (:where) : chaque composant
   ci-dessous peut encore choisir Nunito. */
body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .tribe-events-view :where(div, p, span, a, button, time, address, h1, h2, h3, h4, h5, h6, ul, li, th, td, label) {
	font-family: var(--mdlm-ev-font-text);
}

/* Conteneurs TEC : leurs gouttières de page et marges d'en-tête sont
   remplacées par le rembourrage de la carte. L'en-tête n'a plus de filet :
   l'espace suffit à détacher le titre de la liste. */
body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar :is(.tribe-common-l-container, .tribe-events-l-container) {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-height: 0;
	margin: 0;
	padding: 0;
}

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .tribe-events-header {
	margin: 0 0 1rem;
	padding: 0;
	border: 0;
}

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .tribe-events-view-loader {
	border-radius: inherit;
}

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .tribe-events-c-messages__message {
	margin: 0 0 .75rem;
	padding: .625rem .75rem;
	border-radius: var(--mdlm-ev-radius-sm);
	background: var(--mdlm-ev-hover);
	color: var(--mdlm-ev-muted);
	font-size: .8125rem;
	line-height: 1.45;
}


/* ══ 2. TITRE « À VENIR » ══════════════════════════════════════════════════
 * Le bouton du datepicker devient le titre du bloc : Nunito 800, 21 px, bleu
 * marine, pictogramme calendrier décoratif devant, chevron discret derrière.
 * Il reste un <button> : clavier, focus et ouverture du calendrier inchangés.
 *
 * display: flex et non inline-flex : en ligne, le bouton entraînait l'input
 * caché sur sa ligne et décalait le calendrier (voir § 3). width: fit-content
 * garde la zone cliquable à la taille du titre. */

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .tribe-events-c-top-bar__datepicker {
	margin: 0;
	padding: 0;
}

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar button.tribe-events-c-top-bar__datepicker-button {
	display: flex;
	align-items: center;
	gap: .5rem;
	width: fit-content;
	max-width: 100%;
	margin: 0;
	padding: .25rem 0;
	border: 0;
	border-radius: var(--mdlm-ev-radius-btn);
	background: transparent;
	box-shadow: none;
	color: var(--mdlm-ev-navy);
	font-family: var(--mdlm-ev-font-title);
	font-size: 1.3125rem;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.005em;
	text-align: left;
	text-transform: none;
	opacity: 1;
	cursor: pointer;
	transition: color var(--mdlm-ev-transition);
}

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar button.tribe-events-c-top-bar__datepicker-button :is(time, span) {
	font: inherit;
	color: inherit;
}

/* Pictogramme calendrier décoratif : content vide, jamais annoncé. */
body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar button.tribe-events-c-top-bar__datepicker-button::before {
	content: "";
	flex: 0 0 auto;
	width: 1.25rem;
	height: 1.25rem;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B3D82' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='16.5' rx='3'/%3E%3Cpath d='M3 9.5h18M8 2.5v4M16 2.5v4'/%3E%3C/svg%3E") center / contain no-repeat;
}

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar button.tribe-events-c-top-bar__datepicker-button:is(:hover, :focus) {
	border: 0;
	box-shadow: none;
	color: var(--mdlm-ev-blue-ink);
	opacity: 1;
	outline: none;
}

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar button.tribe-events-c-top-bar__datepicker-button:focus-visible {
	outline: 2px solid var(--mdlm-ev-blue);
	outline-offset: 3px;
}

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .tribe-events-c-top-bar__datepicker-button-icon-svg {
	display: block;
	flex: 0 0 auto;
	width: 10px;
	height: 7px;
	margin: .125rem 0 0;
	color: var(--mdlm-ev-muted);
	transition: transform var(--mdlm-ev-transition);
}

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .tribe-events-c-top-bar__datepicker-button-icon-svg path {
	fill: currentColor;
}


/* ══ 3. CALENDRIER (DATEPICKER) ════════════════════════════════════════════
 *
 * ── POSITION ──────────────────────────────────────────────────────────────
 * bootstrap-datepicker place() (vendor/bootstrap-datepicker, options TEC :
 * container = __datepicker-container, orientation « bottom left ») calcule :
 *
 *     left = offset(input caché) − offset(conteneur)
 *     top  = idem + hauteur de l'input
 *
 * et les écrit EN LIGNE sur .datepicker. L'élément de référence est l'input
 * visuellement masqué __datepicker-input (position absolue, sans décalage),
 * pas le bouton.
 *
 * CAUSE DU CALENDRIER DÉPORTÉ À DROITE (0.1.5) : le bouton « À venir » était
 * passé en inline-flex. L'input absolu, sans décalage, prend alors sa position
 * statique sur la MÊME ligne, juste après le bouton : left valait la largeur
 * du bouton, et le calendrier s'ouvrait à droite du titre.
 *
 * Correctif, sans toucher au script :
 * - le bouton redevient un bloc (display: flex, largeur ajustée — § 2) ;
 * - l'input est ancré explicitement à gauche du bloc datepicker (left: 0) :
 *   le calendrier s'ouvre sous le titre, aligné sur son bord gauche, quelle
 *   que soit la mise en forme du bouton.
 * Aucune déclaration position / top / left / display sur .datepicker.
 *
 * ── GRILLE ────────────────────────────────────────────────────────────────
 * CAUSE DES COLONNES IRRÉGULIÈRES (0.1.5) : en table-layout: fixed, ce sont
 * les cellules de la PREMIÈRE ligne rendue qui fixent la largeur des colonnes.
 * C'est la ligne ‹ flèche | mois (colspan 5) | flèche › — et la 0.1.5 donnait
 * width: 2rem aux flèches. Colonnes 1 et 7 plus étroites que les cinq autres :
 * lettres des jours et chiffres ne tombaient plus au même endroit. Aucune
 * cellule ne porte plus de largeur : les sept colonnes sont égales.
 * Vue des mois et des années : cases flottantes de 25 %, et non plus
 * width: auto (qui les rendait inégales). */

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .tribe-events-c-top-bar__datepicker {
	position: relative;
}

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .tribe-events-c-top-bar__datepicker-input {
	left: 0;
	right: auto;
}

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .tribe-events-c-top-bar__datepicker-container {
	left: 0;
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

/* ── Panneau ───────────────────────────────────────────────────────────── */

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .datepicker {
	box-sizing: border-box;
	width: 100%;
	max-width: 19.5rem;
	min-width: 0;
	margin-top: .5rem;
	padding: .5rem .625rem .625rem;
	border: 1px solid var(--mdlm-sb-line-soft);
	border-radius: 14px;
	background: var(--mdlm-ev-white);
	box-shadow: 0 12px 32px rgba(11, 61, 130, .12), 0 2px 6px rgba(11, 61, 130, .05);
	color: var(--mdlm-ev-ink);
	font-family: var(--mdlm-ev-font-text);
}

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .datepicker::before,
body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .datepicker::after {
	content: none;
}

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .datepicker table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: separate;
	border-spacing: 2px;
	table-layout: fixed;
	background: transparent;
}

/* Toute cellule : ni bordure, ni fond, ni ombre, ni contour hérités — ceux de
   bootstrap-datepicker (dégradés, border-color sombres, text-shadow), du thème
   (bordures et zébrures de tableau) ou du navigateur (contour de focus). */
body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .datepicker :is(tr, th, td, span) {
	width: auto;
	border: 0;
	border-color: transparent;
	background-color: transparent;
	background-image: none;
	box-shadow: none;
	outline: 0;
	text-shadow: none;
	filter: none;
	-webkit-tap-highlight-color: transparent;
}

/* ── En-tête : ‹ septembre 2026 › ──────────────────────────────────────── */

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .datepicker :is(.datepicker-switch, .prev, .next) {
	height: 2.25rem;
	padding: 0;
	border-radius: 9px;
	vertical-align: middle;
	text-align: center;
	cursor: pointer;
	transition: background-color var(--mdlm-ev-transition), color var(--mdlm-ev-transition);
}

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .datepicker .datepicker-switch {
	color: var(--mdlm-ev-navy);
	font-family: var(--mdlm-ev-font-title);
	font-size: .9375rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .005em;
}

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .datepicker :is(.prev, .next) {
	color: var(--mdlm-ev-muted);
}

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .datepicker .tribe-events-c-top-bar__datepicker-nav-icon-svg {
	display: block;
	width: 7px;
	height: 12px;
	margin: 0 auto;
}

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .datepicker .tribe-events-c-top-bar__datepicker-nav-icon-svg path {
	fill: currentColor;
}

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .datepicker :is(.datepicker-switch, .prev, .next):hover {
	background-color: var(--mdlm-ev-hover);
	color: var(--mdlm-ev-blue-ink);
}

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .datepicker :is(.prev, .next).disabled,
body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .datepicker :is(.prev, .next).disabled:hover {
	background-color: transparent;
	color: var(--mdlm-ev-line-strong);
	cursor: default;
}

/* ── Jours de la semaine : L M M J V S D ───────────────────────────────── */

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .datepicker .dow {
	height: 1.75rem;
	padding: 0;
	vertical-align: middle;
	color: #7C8FA4;
	font-family: var(--mdlm-ev-font-text);
	font-size: .6875rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .03em;
	text-align: center;
	text-transform: uppercase;
	cursor: default;
}

/* ── Jours ─────────────────────────────────────────────────────────────── */

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .datepicker .day {
	box-sizing: border-box;
	height: 2.125rem;
	padding: 0;
	border-radius: 10px;
	vertical-align: middle;
	color: var(--mdlm-ev-ink);
	font-family: var(--mdlm-ev-font-text);
	font-size: .8125rem;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	cursor: pointer;
	transition: background-color var(--mdlm-ev-transition), color var(--mdlm-ev-transition), box-shadow var(--mdlm-ev-transition);
}

/* ── Mois et années ────────────────────────────────────────────────────── */

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .datepicker :is(.datepicker-months, .datepicker-years, .datepicker-decades, .datepicker-centuries) td {
	padding: .25rem 0 0;
}

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .datepicker :is(.month, .year, .decade, .century) {
	display: block;
	float: left;
	box-sizing: border-box;
	width: calc(25% - 4px);
	height: 2.5rem;
	margin: 2px;
	padding: 0;
	border-radius: 10px;
	color: var(--mdlm-ev-ink);
	font-family: var(--mdlm-ev-font-text);
	font-size: .8125rem;
	font-weight: 600;
	line-height: 2.5rem;
	text-align: center;
	cursor: pointer;
	transition: background-color var(--mdlm-ev-transition), color var(--mdlm-ev-transition), box-shadow var(--mdlm-ev-transition);
}

/* ── États, du plus faible au plus fort (écrits dans cet ordre) ─────────── */

/* Passés (TEC : .past) et hors mois (bootstrap : .old, .new). */
body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .datepicker :is(.day, .month, .year, .decade, .century).past {
	color: #8A9BAE;
}

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .datepicker .day:is(.old, .new),
body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .datepicker :is(.year, .decade, .century):is(.old, .new) {
	color: #B7C3D0;
	font-weight: 500;
}

/* Survol : bleu très clair, texte bleu marine. */
body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .datepicker :is(.day, .month, .year, .decade, .century):is(:hover, .focused) {
	background-color: var(--mdlm-ev-tint);
	color: var(--mdlm-ev-navy);
}

/* Aujourd'hui (TEC : .current ; bootstrap : .today), s'il n'est pas choisi :
   fond bleu très pâle et contour bleu adouci, 1 px. */
body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .datepicker :is(.day, .month, .year, .decade, .century):is(.current, .today) {
	background-color: var(--mdlm-ev-hover);
	box-shadow: inset 0 0 0 1px rgba(23, 143, 230, .45);
	color: var(--mdlm-ev-navy);
	font-weight: 700;
}

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .datepicker :is(.day, .month, .year, .decade, .century):is(.current, .today):hover {
	background-color: var(--mdlm-ev-tint);
}

/* Sélectionné : fond bleu plein, texte blanc, ombre légère teintée — aucun
   contour, aucune bordure. --mdlm-ev-blue-strong et non #178FE6, sous lequel
   un chiffre blanc de 13 px n'atteindrait pas le contraste AA. Écrit après
   « aujourd'hui » et le survol : il l'emporte quand les états coïncident. */
body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .datepicker :is(.day, .month, .year, .decade, .century).active,
body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .datepicker :is(.day, .month, .year, .decade, .century).active:is(:hover, .focused, .current, .today) {
	background-color: var(--mdlm-ev-blue-strong);
	box-shadow: 0 3px 8px rgba(11, 116, 194, .28);
	color: var(--mdlm-ev-white);
	font-weight: 700;
}

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .datepicker :is(.day, .month, .year, .decade, .century).disabled,
body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .datepicker :is(.day, .month, .year, .decade, .century).disabled:hover {
	background-color: transparent;
	box-shadow: none;
	color: #C9D3DD;
	cursor: default;
}

/* Focus clavier : TEC rend flèches et mois focalisables (tabindex). Anneau
   bleu intérieur, uniquement au clavier — jamais le contour noir par défaut. */
body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .datepicker :is(th, td, span):focus {
	outline: 0;
}

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .datepicker :is(th, td, span):focus-visible {
	outline: 2px solid var(--mdlm-ev-blue);
	outline-offset: -2px;
}


/* ══ 4. SÉPARATEURS DE MOIS ════════════════════════════════════════════════
 * Mois en texte, trait très léger à droite (--mdlm-sb-line-soft), centré sur
 * la hauteur du texte : titre et texte à interligne 1, le trait est aligné sur
 * le milieu de la boîte du texte et non plus sur une ligne d'interligne
 * héritée du thème. */

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .tribe-events-calendar-list__month-separator {
	display: flex;
	align-items: center;
	gap: .625rem;
	margin: 1.125rem 0 .625rem;
	padding: 0;
	border: 0;
	font-size: .75rem;
	line-height: 1;
}

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .tribe-events-calendar-list > .tribe-events-calendar-list__month-separator:first-child {
	margin-top: 0;
}

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .tribe-events-calendar-list__month-separator::after {
	content: "";
	display: block;
	flex: 1 1 auto;
	align-self: center;
	height: 1px;
	margin: 0;
	background-color: var(--mdlm-sb-line-soft);
}

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .tribe-events-calendar-list__month-separator-text {
	display: block;
	flex: none;
	margin: 0;
	padding: 0;
	color: var(--mdlm-ev-muted);
	font-family: var(--mdlm-ev-font-title);
	font-size: .75rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .01em;
	text-transform: none;
}


/* ══ 5. CARTES ÉVÉNEMENTS ══════════════════════════════════════════════════
 *
 *   ┌───────────────────────────────────┐
 *   │  SAM  │ ╭─────────────────────╮   │
 *   │  26   │ │     miniature 16:9  │   │
 *   │       │ ╰─────────────────────╯   │
 *   │       │ 26 sept. @ 10:00          │
 *   │       │ Titre de l'événement      │
 *   │       │ Lieu · adresse            │
 *   │       │ (Gratuit)                 │
 *   └───────────────────────────────────┘
 *
 * La rangée TEC (flex à gouttières négatives) devient une grille à deux
 * colonnes : date compacte de 42 px, puis le contenu. Le mois n'est pas dans
 * le bloc date — TEC ne le rend pas — : il est porté par le séparateur. */

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .tribe-events-calendar-list__event-row {
	display: grid;
	grid-template-columns: 2.625rem minmax(0, 1fr);
	align-items: start;
	gap: 0 .75rem;
	box-sizing: border-box;
	width: 100%;
	margin: 0 0 .75rem;
	padding: .8125rem .8125rem .8125rem .625rem;
	border: 1px solid var(--mdlm-ev-line);
	border-radius: 14px;
	background: var(--mdlm-ev-white);
	box-shadow: none;
	transition: border-color var(--mdlm-ev-transition), background-color var(--mdlm-ev-transition);
}

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .tribe-events-calendar-list__event-row:last-child {
	margin-bottom: 0;
}

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .tribe-events-calendar-list__event-row:is(:hover, :focus-within) {
	border-color: var(--mdlm-ev-blue);
	background: var(--mdlm-ev-hover);
}

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .tribe-events-calendar-list__event-row > .tribe-common-g-col {
	box-sizing: border-box;
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 0;
}

/* ── Date compacte ─────────────────────────────────────────────────────── */

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .tribe-events-calendar-list__event-date-tag {
	position: relative;
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 0;
}

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .tribe-events-calendar-list__event-date-tag-datetime {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: auto;
	padding: .3125rem 0 .375rem;
	border-radius: var(--mdlm-ev-radius-sm);
	background: var(--mdlm-ev-tint);
	text-align: center;
}

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .tribe-events-calendar-list__event-date-tag-weekday {
	margin: 0;
	color: var(--mdlm-ev-muted);
	font-family: var(--mdlm-ev-font-text);
	font-size: .65625rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .06em;
	text-transform: uppercase;
}

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .tribe-events-calendar-list__event-date-tag-daynum {
	margin: 0;
	color: var(--mdlm-ev-navy);
	font-family: var(--mdlm-ev-font-title);
	font-size: 1.4375rem;
	font-weight: 800;
	line-height: 1.05;
}

/* Événement mis en avant : le liseré TEC reste, recalé sur la date. */
body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .tribe-events-calendar-list__event-row--featured .tribe-events-calendar-list__event-date-tag-datetime::after {
	right: auto;
	left: -.625rem;
	width: 3px;
	background-color: var(--mdlm-ev-blue);
}

/* ── Contenu ───────────────────────────────────────────────────────────── */

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar :is(.tribe-events-calendar-list__event, .tribe-events-calendar-list__event-details) {
	display: flex;
	flex-direction: column;
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 0;
}

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .tribe-events-calendar-list__event-header {
	display: flex;
	flex-direction: column;
	gap: .25rem;
	margin: 0;
}

/* ── Miniature 16:9 ────────────────────────────────────────────────────── */

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .tribe-events-calendar-list__event-featured-image-wrapper {
	width: 100%;
	margin: 0 0 .625rem;
	padding: 0;
}

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .tribe-events-calendar-list__event-featured-image-link {
	display: block;
	border: 0;
	border-radius: var(--mdlm-ev-radius-sm);
	box-shadow: none;
}

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .tribe-events-calendar-list__event-featured-image {
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	margin: 0;
	object-fit: cover;
	border: 0;
	border-radius: var(--mdlm-ev-radius-sm);
}

/* ── Date et heure ─────────────────────────────────────────────────────── */

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .tribe-events-calendar-list__event-datetime-wrapper {
	margin: 0;
	color: var(--mdlm-ev-muted);
	font-size: .78125rem;
	font-weight: 600;
	line-height: 1.35;
}

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .tribe-events-calendar-list__event-datetime {
	color: inherit;
	font: inherit;
}

/* ── Titre, 3 lignes au plus ───────────────────────────────────────────── */

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .tribe-events-calendar-list__event-title {
	margin: 0;
	padding: 0;
	color: var(--mdlm-ev-navy);
	font-family: var(--mdlm-ev-font-title);
	font-size: .90625rem;
	font-weight: 700;
	line-height: 1.3;
}

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar a.tribe-events-calendar-list__event-title-link {
	display: -webkit-box;
	overflow: hidden;
	border: 0;
	box-shadow: none;
	color: var(--mdlm-ev-navy);
	font: inherit;
	text-decoration: none;
	overflow-wrap: break-word;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	transition: color var(--mdlm-ev-transition);
}

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar a.tribe-events-calendar-list__event-title-link:is(:hover, :focus, :active, :visited:hover) {
	border: 0;
	color: var(--mdlm-ev-blue-ink);
	text-decoration: none;
}

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar a.tribe-events-calendar-list__event-title-link:focus-visible {
	outline: 2px solid var(--mdlm-ev-blue);
	outline-offset: 2px;
	border-radius: 3px;
}

/* ── Lieu ──────────────────────────────────────────────────────────────── */

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .tribe-events-calendar-list__event-venue {
	margin: .125rem 0 0;
	color: var(--mdlm-ev-muted);
	font-size: .71875rem;
	font-style: normal;
	line-height: 1.4;
	overflow-wrap: break-word;
}

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .tribe-events-calendar-list__event-venue-title {
	display: block;
	color: var(--mdlm-ev-ink);
	font-size: inherit;
	font-weight: 700;
}

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .tribe-events-calendar-list__event-venue-address {
	display: block;
	font-size: inherit;
	font-weight: 400;
}

/* ── Prix : petite pastille ────────────────────────────────────────────── */

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .tribe-events-calendar-list__event-cost {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	margin: .5rem 0 0;
	padding: .1875rem .5625rem;
	border-radius: var(--mdlm-ev-radius-pill);
	background: #ECF7E4;
	color: #3F7A12;
	font-size: .6875rem;
	font-weight: 700;
	line-height: 1.3;
}

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .tribe-events-calendar-list__event-cost > * {
	margin: 0;
	color: inherit;
	font: inherit;
}


/* ══ 6. NAVIGATION DE LISTE ════════════════════════════════════════════════
 * Barre discrète : précédents · aujourd'hui · suivants, 12 px. Sans filet :
 * l'espace la sépare des cartes. */

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .tribe-events-c-nav {
	margin: 1rem 0 0;
	padding: 0;
	border: 0;
}

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .tribe-events-c-nav__list {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .tribe-events-c-nav__list-item {
	margin: 0;
	padding: 0;
}

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar :is(.tribe-events-c-nav__prev, .tribe-events-c-nav__next, .tribe-events-c-nav__today) {
	display: inline-flex;
	align-items: center;
	gap: .3125rem;
	margin: 0;
	padding: .25rem .125rem;
	border: 0;
	border-radius: var(--mdlm-ev-radius-pill);
	background: transparent;
	box-shadow: none;
	color: var(--mdlm-ev-blue-ink);
	font-size: .75rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	text-shadow: none;
	transition: color var(--mdlm-ev-transition), background-color var(--mdlm-ev-transition);
}

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar :is(.tribe-events-c-nav__prev, .tribe-events-c-nav__next):is(:hover, :focus) {
	color: var(--mdlm-ev-navy);
	text-decoration: none;
}

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar :is(.tribe-events-c-nav__prev, .tribe-events-c-nav__next):disabled {
	color: #A5B4C4;
	font-size: .75rem;
	cursor: default;
}

/* Aujourd'hui : bleu marine sur petit fond léger. */
body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .tribe-events-c-nav__today {
	padding: .25rem .625rem;
	background: var(--mdlm-ev-hover);
	color: var(--mdlm-ev-navy);
}

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .tribe-events-c-nav__today:is(:hover, :focus) {
	background: var(--mdlm-ev-tint);
	color: var(--mdlm-ev-blue-ink);
	text-decoration: none;
}

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar :is(.tribe-events-c-nav__prev, .tribe-events-c-nav__next, .tribe-events-c-nav__today):focus-visible {
	outline: 2px solid var(--mdlm-ev-blue);
	outline-offset: 2px;
}

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar :is(.tribe-events-c-nav__prev-icon-svg, .tribe-events-c-nav__next-icon-svg) {
	display: block;
	flex: 0 0 auto;
	width: 6px;
	height: 10px;
	margin: 0;
	opacity: 1;
}

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar :is(.tribe-events-c-nav__prev-icon-svg, .tribe-events-c-nav__next-icon-svg) path {
	fill: currentColor;
}


/* ══ 7. BLOC « S'ABONNER AU CALENDRIER » ═══════════════════════════════════
 *
 *   ─────────────────────────────────────
 *   (📅) Ne manquez aucun événement
 *        Abonnez-vous au calendrier pour recevoir
 *        les prochains rendez-vous.
 *   [   S'abonner au calendrier   ▾   ]
 *
 * Conservé, distinct de « Ajouter au calendrier » de la fiche : on s'abonne à
 * TOUS les événements à venir, on n'ajoute pas un seul événement.
 *
 * Texte d'accroche : contenu CSS généré sur le conteneur TEC, sans markup ni
 * gabarit. Un crochet PHP de TEC l'aurait ajouté au rendu initial, mais pas
 * aux rendus AJAX de la vue (navigation précédents / suivants) : le texte
 * aurait disparu au premier clic. Le contenu généré survit à tout rendu.
 * Deux lignes dans un seul ::before (\A + pre-line) ; la première, le titre,
 * est mise en forme par ::first-line. Le texte est lu par les lecteurs d'écran
 * — il accompagne le bouton, il ne le remplace pas.
 *
 * Le menu n'est jamais ouvert ni fermé ici : ical-links.js pose un display en
 * ligne sur __content. */

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .tribe-events-c-subscribe-dropdown__container {
	display: block;
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	margin: 1rem 0 0;
	padding: 1rem 0 0;
	border-top: 1px solid var(--mdlm-sb-line-soft);
}

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .tribe-events-c-subscribe-dropdown__container::before {
	content: "Ne manquez aucun événement\A Abonnez-vous au calendrier pour recevoir les prochains rendez-vous.";
	display: block;
	box-sizing: border-box;
	min-height: 2.25rem;
	margin: 0 0 .875rem;
	padding: 0 0 0 3rem;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A63B0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='16.5' rx='3'/%3E%3Cpath d='M3 9.5h18M8 2.5v4M16 2.5v4M12 13v5M9.5 15.5h5'/%3E%3C/svg%3E") no-repeat 10px 10px / 16px 16px,
		radial-gradient(circle at 18px 18px, var(--mdlm-ev-tint) 17.5px, transparent 18px) no-repeat 0 0 / 36px 36px;
	color: var(--mdlm-ev-muted);
	font-family: var(--mdlm-ev-font-text);
	font-size: .78125rem;
	font-weight: 400;
	line-height: 1.45;
	white-space: pre-line;
}

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .tribe-events-c-subscribe-dropdown__container::first-line {
	color: var(--mdlm-ev-navy);
	font-family: var(--mdlm-ev-font-title);
	font-size: .9375rem;
	font-weight: 800;
	line-height: 1.6;
}

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .tribe-events-c-subscribe-dropdown {
	position: relative;
	float: none;
	width: 100%;
	margin: 0;
	font-size: .8125rem;
}

/* ── Bouton ────────────────────────────────────────────────────────────────
 * TEC : un DIV .__button enveloppe le vrai <button> et le chevron. Le DIV porte
 * le visuel ; le <button> reste nu et hérite. */

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .tribe-events-c-subscribe-dropdown__button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	min-height: 40px;
	margin: 0;
	padding: .375rem .875rem;
	border: 1px solid var(--mdlm-ev-blue);
	border-radius: var(--mdlm-ev-radius-sm);
	background: var(--mdlm-ev-white);
	box-shadow: none;
	color: var(--mdlm-ev-blue-ink);
	font-size: .8125rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color var(--mdlm-ev-transition), border-color var(--mdlm-ev-transition), color var(--mdlm-ev-transition);
}

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar button.tribe-events-c-subscribe-dropdown__button-text {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	color: inherit;
	font-family: var(--mdlm-ev-font-text);
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	text-shadow: none;
	cursor: pointer;
}

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar button.tribe-events-c-subscribe-dropdown__button-text:focus {
	outline: none;
}

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .tribe-events-c-subscribe-dropdown__button:has(button:focus-visible) {
	outline: 2px solid var(--mdlm-ev-blue);
	outline-offset: 2px;
}

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .tribe-events-c-subscribe-dropdown__button-icon {
	display: block;
	flex: 0 0 auto;
	width: 10px;
	height: 6px;
	margin: 0;
	color: currentColor;
	transition: transform var(--mdlm-ev-transition);
}

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .tribe-events-c-subscribe-dropdown__button-icon path {
	fill: currentColor;
}

/* Survol, focus, menu ouvert : fond plein --mdlm-ev-blue-strong (AA), texte et
   chevron blancs. */
body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .tribe-events-c-subscribe-dropdown__button:is(:hover, :focus-within, .tribe-events-c-subscribe-dropdown__button--active) {
	border-color: var(--mdlm-ev-blue-strong);
	background: var(--mdlm-ev-blue-strong);
	color: var(--mdlm-ev-white);
}

/* ── Menu ──────────────────────────────────────────────────────────────────
 * Le panneau s'ouvre SOUS le bouton (sens natif de TEC). Aucune déclaration
 * « display » : TEC l'ouvre et le ferme. Le visuel est porté par la liste,
 * comme chez TEC ; la translation de 4 px de TEC est remplacée par un écart. */

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .tribe-events-c-subscribe-dropdown__content {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	left: 0;
	z-index: 60;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
}

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .tribe-events-c-subscribe-dropdown__list {
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: .375rem;
	border: 1px solid var(--mdlm-ev-line);
	border-radius: var(--mdlm-ev-radius-md);
	background: var(--mdlm-ev-white);
	box-shadow: var(--mdlm-ev-shadow-raised);
	list-style: none;
	transform: none;
}

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .tribe-events-c-subscribe-dropdown__list-item,
body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .tribe-events-c-subscribe-dropdown__list-item:is(:hover, :focus, :focus-within, :active) {
	margin: 0;
	padding: 0;
	border-radius: 8px;
	background: transparent;
	list-style: none;
}

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar a.tribe-events-c-subscribe-dropdown__list-item-link {
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: .5rem .625rem;
	border: 0;
	border-radius: 8px;
	background: transparent;
	box-shadow: none;
	color: var(--mdlm-ev-navy);
	font-size: .8125rem;
	font-weight: 500;
	line-height: 1.35;
	text-align: left;
	text-decoration: none;
	transition: background-color var(--mdlm-ev-transition), color var(--mdlm-ev-transition);
}

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar a.tribe-events-c-subscribe-dropdown__list-item-link:is(:hover, :focus, :active) {
	background: var(--mdlm-ev-tint);
	color: var(--mdlm-ev-blue-ink);
	text-decoration: none;
}

body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar a.tribe-events-c-subscribe-dropdown__list-item-link:focus-visible {
	outline: 2px solid var(--mdlm-ev-blue);
	outline-offset: -2px;
}


/* ══ 8. MOUVEMENT RÉDUIT ═══════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
	body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar :is(button.tribe-events-c-top-bar__datepicker-button, .tribe-events-c-top-bar__datepicker-button-icon-svg, .datepicker .day, .datepicker .month, .datepicker .year, .tribe-events-calendar-list__event-row, a.tribe-events-calendar-list__event-title-link, .tribe-events-c-nav__prev, .tribe-events-c-nav__next, .tribe-events-c-nav__today, .tribe-events-c-subscribe-dropdown__button, .tribe-events-c-subscribe-dropdown__button-icon, a.tribe-events-c-subscribe-dropdown__list-item-link) {
		transition: none;
	}
}


/* ══ 9. POINTS DE RUPTURE ══════════════════════════════════════════════════
 * Tablette : comportement Elementor conservé, aucune règle.
 * Téléphone : la sidebar passe sous la fiche. Carte pleine largeur, un peu
 * moins rembourrée ; le calendrier et le menu sont déjà bornés à la carte. */

@media (max-width: 767px) {
	body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .tribe-events-view {
		padding: 1.125rem;
	}

	body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar button.tribe-events-c-top-bar__datepicker-button {
		font-size: 1.25rem;
	}

	body.single-tribe_events #tribe-events-pg-template .mdlm-event-sidebar .datepicker {
		max-width: min(19.5rem, calc(100vw - 2rem));
	}
}