/* TLW Agenda — styles admin et publics, tous préfixés .tlw- */

.tlw-metabox .tlw-field {
	margin-bottom: 16px;
}

.tlw-metabox .tlw-label {
	display: block;
	font-weight: 600;
	margin-bottom: 4px;
}

.tlw-metabox .tlw-input {
	width: 100%;
	max-width: 480px;
	padding: 8px;
	font-size: 16px;
	box-sizing: border-box;
}

.tlw-metabox textarea.tlw-input {
	resize: vertical;
}

.tlw-metabox .tlw-counter {
	margin: 4px 0 0;
	color: #7A7A7A;
	font-size: 12px;
}

.tlw-format-choices {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.tlw-format-choice {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	border: 1px solid #ccd0d4;
	border-radius: 20px;
	cursor: pointer;
}

.tlw-format-choice input[type="radio"] {
	margin: 0;
}

.tlw-format-dot,
.tlw-admin-dot {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	flex-shrink: 0;
}

.tlw-admin-dot {
	margin-right: 4px;
}

/* ==========================================================================
   Public : carte C, liste agenda, page d'une soirée, visionneuse
   (charte §6 — https://docs/maquette-carte.html, variante C validée)
   ========================================================================== */

.tlw-agenda,
.tlw-single {
	--tlw-bg-page: #0B272C;
	--tlw-bg-card: #0F3138;
	--tlw-border: rgba(255, 255, 255, .06);
	--tlw-text: #FFFFFF;
	--tlw-text-secondary: #7A7A7A;
	--tlw-accent: #E2B56C;
	--tlw-gradient-start: #114D57;
	--tlw-gradient-end: #07191d;
	/* Espace sous l'en-tête fixe du thème (réglage "header_clearance"),
	 * pour ne plus dépendre d'une marge posée à la main dans Elementor. */
	--tlw-header-clearance: 120px;
	/* Polices confirmées par JM (§6). Pas de fichier chargé : si "DM Serif
	 * Display" / "Poppins" ne sont pas installées chez le visiteur, repli
	 * silencieux sur une serif/sans-serif du système. */
	--tlw-font-title: 'DM Serif Display', Georgia, 'Times New Roman', serif;
	--tlw-font-text: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-family: var( --tlw-font-text );
	color: var( --tlw-text );
}

/* Filet de sécurité : tout lien texte à l'intérieur (hors boutons .tlw-cta,
 * qui gèrent leur propre couleur) hérite sinon de la couleur de lien du
 * thème/Elementor. Les règles plus spécifiques ci-dessous (bouton "Retour
 * à l'agenda" en accent doré, etc.) passent devant. */
.tlw-agenda a:not( .tlw-cta ),
.tlw-single a:not( .tlw-cta ) {
	color: var( --tlw-text );
	text-decoration: none;
}

/* Le conteneur peint son propre fond, indépendamment de la page qui
 * l'accueille (Elementor, thème...). */
.tlw-agenda {
	background: var( --tlw-bg-page );
	padding: var( --tlw-header-clearance ) 12px 40px;
	box-sizing: border-box;
}

.tlw-agenda-empty {
	color: var( --tlw-text-secondary );
}

.tlw-month {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var( --tlw-accent );
	font-family: var( --tlw-font-text );
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 3px;
	text-transform: uppercase;
	margin: 22px 0 18px;
}

.tlw-month:first-child {
	margin-top: 0;
}

.tlw-month:after {
	content: "";
	flex: 1;
	height: 1px;
	background: rgba( 226, 181, 108, .35 );
}

.tlw-card {
	display: grid;
	grid-template-columns: 1fr 104px;
	gap: 12px;
	background: var( --tlw-bg-card );
	border: 1px solid var( --tlw-border );
	border-radius: 14px;
	margin-bottom: 16px;
	padding: 10px 10px 10px 12px;
	position: relative;
	box-sizing: border-box;
	min-width: 0;
	cursor: pointer;
	transition: background-color .15s ease;
}

/* Éclaircissement léger au survol/focus, pour que la carte se voie plus
 * nettement cliquable dans son ensemble. */
.tlw-card:hover,
.tlw-card:focus-visible {
	background: #15414A;
}

.tlw-date {
	position: absolute;
	top: -14px;
	left: -18px;
	background: var( --tlw-accent );
	color: var( --tlw-bg-page );
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1;
	padding: 7px 9px;
	border-radius: 10px;
	box-shadow: 0 4px 12px rgba( 0, 0, 0, .45 );
}

.tlw-date i {
	font-style: normal;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
}

.tlw-date b {
	font-family: var( --tlw-font-title );
	font-weight: 800;
	font-size: 24px;
	margin: 2px 0;
}

.tlw-date span {
	font-size: 10px;
	font-weight: 600;
}

.tlw-body {
	display: block;
	min-width: 0;
}

/* Le texte épouse le badge de date qui déborde sur le coin de la carte. */
.tlw-body::before {
	content: "";
	float: left;
	width: 34px;
	height: 52px;
}

.tlw-body > * {
	margin-bottom: 4px;
}

.tlw-meta {
	font-size: 11px;
}

.tlw-tag {
	display: inline-block;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 2px 7px;
	border-radius: 4px;
}

.tlw-card-title {
	font-family: var( --tlw-font-title );
	font-size: 17px;
	font-weight: 800;
	line-height: 1.15;
	margin: 0;
}

/* Le thème/Elementor définit souvent une couleur de lien globale plus
 * spécifique que ".tlw-card-title a" seul : on chaîne le conteneur pour
 * passer devant sans !important. */
.tlw-agenda .tlw-card h3 a,
.tlw-agenda .tlw-card h3 a:hover,
.tlw-agenda .tlw-card h3 a:visited,
.tlw-agenda .tlw-card h3 a:focus {
	color: var( --tlw-text );
	text-decoration: none;
}

.tlw-genre {
	font-size: 12px;
	color: #c9d2d3;
}

.tlw-price {
	font-size: 13px;
	font-weight: 600;
	color: var( --tlw-accent );
	margin-top: 6px;
}

.tlw-banner {
	font-size: 12px;
	font-weight: 600;
	color: var( --tlw-accent );
}

.tlw-cta {
	display: block;
	box-sizing: border-box;
	width: 100%;
	margin-top: 6px;
	text-align: center;
	font-weight: 600;
	font-size: 13px;
	padding: 9px 12px;
	border-radius: 8px;
	border: none;
	text-decoration: none;
	background: transparent;
}

.tlw-cta--book {
	background: var( --tlw-accent );
	color: var( --tlw-bg-page );
}

.tlw-cta--free {
	border: 1px solid rgba( 255, 255, 255, .25 );
	color: var( --tlw-text );
	font-weight: 500;
}

.tlw-cta--soon {
	border: 1px dashed rgba( 226, 181, 108, .6 );
	color: var( --tlw-accent );
	font-weight: 500;
}

.tlw-cta--cancelled {
	border: 1px solid rgba( 255, 255, 255, .2 );
	color: var( --tlw-text-secondary );
	font-weight: 500;
}

/* .tlw-cta--book est un vrai lien (Billetweb) : au survol, la couleur de
 * lien du thème/Elementor prenait le dessus et le texte disparaissait sur
 * le fond doré (couleur) ou se soulignait (thème). Même stratégie que les
 * titres de carte (chaînage du conteneur, même spécificité, pas de
 * !important) sur tous les états et toutes les variantes, y compris
 * celles qui ne sont pas des liens aujourd'hui (garde-fou si ça change
 * plus tard) : couleur ET absence de soulignement forcées partout. */
.tlw-agenda .tlw-cta--book,
.tlw-agenda .tlw-cta--book:hover,
.tlw-agenda .tlw-cta--book:focus,
.tlw-agenda .tlw-cta--book:active,
.tlw-agenda .tlw-cta--book:visited,
.tlw-single .tlw-cta--book,
.tlw-single .tlw-cta--book:hover,
.tlw-single .tlw-cta--book:focus,
.tlw-single .tlw-cta--book:active,
.tlw-single .tlw-cta--book:visited {
	color: var( --tlw-bg-page );
	text-decoration: none;
}

.tlw-agenda .tlw-cta--free,
.tlw-agenda .tlw-cta--free:hover,
.tlw-agenda .tlw-cta--free:focus,
.tlw-agenda .tlw-cta--free:active,
.tlw-agenda .tlw-cta--free:visited,
.tlw-single .tlw-cta--free,
.tlw-single .tlw-cta--free:hover,
.tlw-single .tlw-cta--free:focus,
.tlw-single .tlw-cta--free:active,
.tlw-single .tlw-cta--free:visited {
	color: var( --tlw-text );
	text-decoration: none;
}

.tlw-agenda .tlw-cta--soon,
.tlw-agenda .tlw-cta--soon:hover,
.tlw-agenda .tlw-cta--soon:focus,
.tlw-agenda .tlw-cta--soon:active,
.tlw-agenda .tlw-cta--soon:visited,
.tlw-single .tlw-cta--soon,
.tlw-single .tlw-cta--soon:hover,
.tlw-single .tlw-cta--soon:focus,
.tlw-single .tlw-cta--soon:active,
.tlw-single .tlw-cta--soon:visited {
	color: var( --tlw-accent );
	text-decoration: none;
}

.tlw-agenda .tlw-cta--cancelled,
.tlw-agenda .tlw-cta--cancelled:hover,
.tlw-agenda .tlw-cta--cancelled:focus,
.tlw-agenda .tlw-cta--cancelled:active,
.tlw-agenda .tlw-cta--cancelled:visited,
.tlw-single .tlw-cta--cancelled,
.tlw-single .tlw-cta--cancelled:hover,
.tlw-single .tlw-cta--cancelled:focus,
.tlw-single .tlw-cta--cancelled:active,
.tlw-single .tlw-cta--cancelled:visited {
	color: var( --tlw-text-secondary );
	text-decoration: none;
}

.tlw-more-info {
	font-size: 11px;
	color: var( --tlw-text-secondary );
	text-align: right;
	margin-top: 4px;
}

.tlw-visual {
	position: relative;
}

.tlw-image {
	aspect-ratio: 4 / 5;
	background: linear-gradient( 160deg, var( --tlw-gradient-start ), var( --tlw-gradient-end ) );
	border-radius: 8px;
	overflow: hidden;
	position: relative;
}

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

/* Statuts */
.tlw-card--cancelled {
	opacity: .55;
}

.tlw-card--cancelled .tlw-card-title {
	text-decoration: line-through;
}

.tlw-card--postponed .tlw-cta {
	display: none;
}

/* Grille responsive : structure de carte identique à toutes les tailles (§6) */
@media screen and ( min-width: 768px ) {
	.tlw-agenda {
		display: grid;
		grid-template-columns: repeat( 2, 1fr );
		gap: 0 20px;
	}

	.tlw-month {
		grid-column: 1 / -1;
	}
}

@media screen and ( min-width: 1100px ) {
	.tlw-agenda {
		grid-template-columns: repeat( 3, 1fr );
	}
}

/* Page d'une soirée (/soiree/slug) : s'habille comme .tlw-agenda (fond
 * pleine largeur, même espace sous l'en-tête), contenu centré dans une
 * colonne de lecture. */
.tlw-single {
	background: var( --tlw-bg-page );
	padding: var( --tlw-header-clearance ) 16px 40px;
	box-sizing: border-box;
}

.tlw-single-inner {
	max-width: 640px;
	margin: 0 auto;
}

.tlw-single-title {
	font-family: var( --tlw-font-title );
	font-size: 28px;
	font-weight: 800;
	line-height: 1.15;
	color: var( --tlw-text );
	margin: 0 0 10px;
}

.tlw-single-image {
	aspect-ratio: 4 / 5;
	max-width: 100%;
	border-radius: 8px;
	overflow: hidden;
	margin: 12px 0 16px;
	background: linear-gradient( 160deg, var( --tlw-gradient-start ), var( --tlw-gradient-end ) );
	position: relative;
	cursor: zoom-in;
}

.tlw-single-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.tlw-single-date {
	font-weight: 600;
	color: var( --tlw-accent );
	margin-bottom: 4px;
}

.tlw-single-excerpt {
	margin: 12px 0;
	color: var( --tlw-text );
}

.tlw-single-address {
	color: var( --tlw-text-secondary );
	font-size: 13px;
	margin: 12px 0;
}

.tlw-single .tlw-back-link a {
	color: var( --tlw-accent );
	font-size: 13px;
	font-weight: 600;
}

.tlw-back-link--top {
	margin: 0 0 16px;
}

/* Le thème (Hello Elementor / widget Elementor "Titre de l'article")
 * affiche son propre titre au-dessus de the_content : on le masque pour
 * éviter le doublon avec .tlw-single-title. Best-effort sur les motifs
 * de titre les plus courants ; si le thème en utilise un autre, il
 * faudra ajouter son sélecteur ici. */
body.single-tlw_soiree .entry-title,
body.single-tlw_soiree .elementor-widget-theme-post-title {
	display: none;
}

/* Visionneuse plein écran */
.tlw-lightbox {
	position: fixed;
	inset: 0;
	background: rgba( 0, 0, 0, .92 );
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 100000;
	padding: 20px;
}

.tlw-lightbox.is-open {
	display: flex;
}

.tlw-lightbox-img {
	max-width: 100%;
	max-height: 100%;
	border-radius: 4px;
}

.tlw-lightbox-close {
	position: absolute;
	top: 16px;
	right: 20px;
	background: none;
	border: none;
	color: #fff;
	font-size: 32px;
	line-height: 1;
	cursor: pointer;
}

body.tlw-lightbox-open {
	overflow: hidden;
}

/* La meta box « Soirée » (déplacée juste après le titre par admin.js)
 * doit toujours passer avant Publier et Image à la une, écran mobile
 * de wp-admin (breakpoint WordPress à 782px) compris. */
@media screen and ( max-width: 782px ) {
	#post-body {
		display: flex;
		flex-direction: column;
	}

	#post-body-content {
		order: 1;
	}

	#postbox-container-1 {
		order: 2;
	}

	#postbox-container-2 {
		order: 3;
	}
}