/*
 * CESAM Organisateurs - habillage visuel de la fiche evenement (The Events Calendar)
 * 04/09/2026, demande club "ameliorer le design de la page de presentation d'un evenement",
 * puis "c'est un peu terne par rapport au reste du site" - premiere version trop plate/pale,
 * reprise avec les vraies couleurs du site (extraites en direct de la homepage/page tarifs,
 * pas devinees) : bleu marine des menus #2d4059, degrade signature bleu ciel -> turquoise
 * (#1bb3eb -> #25efcb, 72deg, celui de la photo d'accueil), vert menthe des boutons #44d89e.
 *
 * Approche CSS-only pour la structure (aucune donnee/markup TEC modifie) + une seule variable
 * CSS injectee en PHP (--cesam-hero-image) quand l'evenement a une image mise en avant, pour un
 * bandeau d'en-tete qui varie par evenement sans dupliquer de template.
 */

:root {
	--cesam-navy: #2d4059;
	--cesam-teal: #0e7c86;
	--cesam-teal-dark: #0a5e66;
	--cesam-teal-tint: #eef6f6;
	--cesam-mint: #26c98e;
	--cesam-ink: #1e293b;
	--cesam-ink-soft: #64748b;
	--cesam-border: #e2e8f0;
	--cesam-card: #f8fafc;
	--cesam-hero-image: none;
}

/* --- Bandeau d'en-tete : fil d'ariane + titre + date, fusionnes visuellement en un seul
   bandeau plein degrade (le degrade signature du site, assombri pour la lisibilite du texte
   blanc, avec la photo de l'evenement en fond quand elle existe). Les 3 elements restent des
   noeuds DOM independants (aucune structure ajoutee) mais partagent le meme fond sans
   interruption grace a des marges/rayons qui se raccordent exactement.
   BUG CORRIGE (04/09/2026, constat au moment d'ajouter une photo de secours) : le degrade
   signature etait place AU-DESSUS de --cesam-hero-image dans l'ordre des calques CSS - en
   couleurs pleines/opaques, il masquait donc totalement la photo, qui ne s'est en realite
   jamais affichee ici depuis le debut (seul le bloc photo separe .tribe-events-event-image,
   plus bas sur la page, montrait la vraie photo - d'ou l'illusion que "ca marchait"). Ordre
   desormais : voile sombre (transparent) au-dessus, photo au milieu, degrade en dernier
   recours seulement (si --cesam-hero-image vaut "none").
   BUG 2 CORRIGE (04/09/2026, retour club "l'image apparait en triple") : ces 3 elements sont
   des noeuds DOM independants, chacun affiche donc SA PROPRE copie "cover" de la photo calee
   sur SA propre (petite) hauteur - sur une photo texturee (rochers/vegetation), ces 3 recadrages
   independants se ressemblent assez pour donner l'illusion d'un motif repete. Fix : attachment
   fixed sur le calque photo uniquement -> son "cover" se calcule alors par rapport au viewport
   (identique pour les 3 elements) au lieu de la boite de chacun, donc les 3 fenetres affichent
   exactement la meme portion de l'image = continuite parfaite sans dupliquer de markup. */
.tribe-events-back,
.tribe-events-single-event-title,
.tribe-events-schedule {
	background:
		linear-gradient(100deg, rgba(10, 34, 51, 0.62), rgba(10, 34, 51, 0.42)),
		var(--cesam-hero-image) center center / cover no-repeat fixed,
		linear-gradient(72deg, #1bb3eb 0%, #25efcb 100%);
}
/* Evenement complet/reservations closes (04/09/2026, demande club) : ce bandeau est le SEUL
   element toujours present sur la fiche, avec ou sans photo mise en avant (contrairement a
   .tribe-events-event-image, absent si l'evenement n'en a pas) - donc le signal visuel doit
   aussi vivre ici pour rester visible sur tous les evenements, pas seulement ceux avec photo.
   Degrade assombri/desature (photo, si presente, conservee mais grisee plutot que le degrade
   signature vif) + pastille de statut ajoutee au bandeau date/prix. */
body.cesam-event-closed .tribe-events-back,
body.cesam-event-closed .tribe-events-single-event-title,
body.cesam-event-closed .tribe-events-schedule,
body.cesam-event-soldout .tribe-events-back,
body.cesam-event-soldout .tribe-events-single-event-title,
body.cesam-event-soldout .tribe-events-schedule {
	background:
		linear-gradient(100deg, rgba(30, 41, 59, 0.62), rgba(15, 23, 42, 0.78)),
		var(--cesam-hero-image) center center / cover no-repeat fixed,
		linear-gradient(100deg, #64748b, #334155);
}
body.cesam-event-closed .tribe-events-schedule::after,
body.cesam-event-soldout .tribe-events-schedule::after {
	content: "Réservations closes";
	display: inline-flex;
	align-items: center;
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	padding: 9px 18px;
	border-radius: 999px;
	border: 1.5px solid rgba(255, 255, 255, 0.5);
	margin-left: 10px;
}
body.cesam-event-soldout .tribe-events-schedule::after {
	content: "Complet";
}

.tribe-events-back {
	margin: 0 !important;
	padding: 20px 32px 0;
	border-radius: 18px 18px 0 0;
}
.tribe-events-back a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: #fff;
	text-decoration: none;
	padding: 6px 14px 6px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.16);
	transition: background 0.15s ease;
}
.tribe-events-back a:hover {
	background: rgba(255, 255, 255, 0.28);
}

.tribe-events-single-event-title {
	font-weight: 800;
	letter-spacing: -0.01em;
	color: #fff;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.25);
	margin: 0 !important;
	padding: 18px 32px 0;
}

/* --- Date/heure : integree au bandeau, en pastille blanche qui ressort sur le degrade --- */
.tribe-events-schedule {
	display: flex;
	margin: 0 !important;
	padding: 20px 32px 28px;
	border-radius: 0 0 18px 18px;
}
.tribe-events-schedule > div {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	color: var(--cesam-navy);
	font-weight: 700;
	font-size: 15px;
	padding: 10px 18px;
	border-radius: 999px;
	box-shadow: 0 4px 14px rgba(8, 28, 42, 0.18);
}
/* Icone calendrier : sur le pseudo-element de la pastille blanche elle-meme (pas du bandeau
   parent) pour qu'elle reste bien A L'INTERIEUR de la pastille, pas flottante sur le degrade. */
.tribe-events-schedule > div::before {
	content: "";
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	background-color: var(--cesam-navy);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") no-repeat center / contain;
	order: -1;
}
.tribe-events-schedule .tribe-event-date-start,
.tribe-events-schedule .tribe-event-time {
	color: inherit;
}
/* Le prix (evenement payant, span.tribe-events-cost) s'affiche apres la pastille date/heure -
   meme traitement mais sur fond menthe pour le distinguer visuellement au premier coup d'oeil. */
.tribe-events-schedule .tribe-events-cost {
	display: inline-flex;
	align-items: center;
	background: var(--cesam-mint);
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	padding: 10px 18px;
	border-radius: 999px;
	margin-left: 10px;
}

/* --- Photo d'illustration de l'evenement (image mise en avant WordPress, affichee par TEC
   dans .tribe-events-event-image entre le bandeau et la description) : angles carres par
   defaut, pas repris dans l'habillage initial - meme langage de carte que le reste (coins
   arrondis 16px) demande par le club (04/09/2026). Distincte du bandeau degrade en haut de
   page (qui utilise --cesam-hero-image en fond, pas cette balise) et de la vignette des
   evenements lies en bas de page (.tribe-related-events-thumbnail, deja arrondie). */
.tribe-events-event-image {
	position: relative;
	margin-top: 24px;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12);
}
.tribe-events-event-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 16px;
}

/* --- Evenement complet / reservations closes (04/09/2026, demande club) : photo desaturee +
   bandeau diagonal, pilote par la classe sur <body> ajoutee par
   cesam_org_add_booking_state_body_class() dans cesam-organisateurs.php. Le bandeau des
   dates/prix en haut de page (.tribe-events-schedule) n'est pas touche : ces infos restent
   correctes (dates de l'evenement, prix du billet), seule l'image signale l'indisponibilite. */
body.cesam-event-closed .tribe-events-event-image img,
body.cesam-event-soldout .tribe-events-event-image img {
	filter: grayscale(0.85) brightness(0.75);
}
body.cesam-event-closed .tribe-events-event-image::after,
body.cesam-event-soldout .tribe-events-event-image::after {
	content: "Réservations closes";
	position: absolute;
	top: 34px;
	right: -54px;
	width: 220px;
	padding: 8px 0;
	background: var(--cesam-navy);
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	text-align: center;
	transform: rotate(35deg);
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.3);
}
body.cesam-event-soldout .tribe-events-event-image::after {
	content: "Complet";
	background: #b42318;
}

/* Contenu de la fiche (description, cartes...) : espace au-dessus du bandeau pour ne pas coller */
.tribe-events-single-event-description.tribe-events-content {
	margin-top: 28px;
}

/* --- Description : un peu plus d'air --- */
.tribe-events-single-event-description.tribe-events-content {
	font-size: 16px;
	line-height: 1.7;
	color: var(--cesam-ink);
}

/* --- Bouton "Ajouter au calendrier" : couleur Divi par defaut -> vert menthe du club (meme
   famille que les boutons du reste du site, #44d89e) --- */
.tribe-events-c-subscribe-dropdown__button {
	border-color: var(--cesam-mint) !important;
	border-radius: 999px !important;
	transition: background 0.15s ease;
}
.tribe-events-c-subscribe-dropdown__button:hover {
	background: #e9fbf3 !important;
}
.tribe-events-c-subscribe-dropdown__button-text,
.tribe-events-c-subscribe-dropdown__export-icon,
.tribe-events-c-subscribe-dropdown__button-icon {
	color: #16a877 !important;
	fill: #16a877 !important;
}

/* --- Bloc Billets (Event Tickets Plus) : boite blanche brute -> carte du meme langage visuel,
   bouton d'achat en vert menthe plein (c'est l'action principale de la page, doit ressortir
   plus que le bouton secondaire "Ajouter au calendrier") --- */
.tribe-tickets__tickets-wrapper {
	background: #fff;
	border: 1px solid var(--cesam-border);
	border-radius: 16px;
	padding: 8px 32px 28px;
	margin-bottom: 28px;
}
.tribe-tickets__tickets-title {
	color: var(--cesam-ink);
}
.tribe-tickets__tickets-wrapper .tribe-common-c-btn {
	background-color: var(--cesam-mint) !important;
	border-color: var(--cesam-mint) !important;
	border-radius: 999px !important;
}
.tribe-tickets__tickets-wrapper .tribe-common-c-btn:hover:not(:disabled) {
	background-color: #16a877 !important;
	border-color: #16a877 !important;
}

/* --- Bloc Details/Lieu/Carte : simple liste -> carte groupee --- */
.tribe-events-event-meta.primary {
	background: var(--cesam-card);
	border: 1px solid var(--cesam-border);
	border-radius: 16px;
	padding: 36px 40px;
	margin-top: 8px;
}
/* Barre horizontale visible sur pc au-dessus du bloc (retour club 04/09/2026) : TEC dessine
   nativement un separateur via `.tribe-events-event-meta::before` (position:absolute, largeur
   pleine colonne ~1020px, bordure grise) - prevu a l'origine pour un template sans carte/fond,
   il devient visible et decale une fois le bloc habille en carte plus etroite (685px). Coupe
   court : ce pseudo-element n'a aucune utilite avec le nouvel habillage carte. */
.tribe-events-event-meta.primary::before,
.tribe-events-event-meta.secondary::before {
	display: none;
}
/* Le CSS natif de TEC met `.tribe-events-event-meta { display:flex }` (donc align-items:stretch
   par defaut, cf. commentaire plus haut pres de .tribe-events-venue-map). Le fix scope sur
   .tribe-events-venue-map ne suffit pas partout : selon l'evenement, TEC insere un wrapper
   intermediaire .tribe-events-meta-group-gmap entre la ligne flex et la carte (confirme en
   direct le 04/09/2026 sur l'evenement "Plongee a Marseille (Doris)", capture ecran club a
   l'appui) - un align-self pose sur le seul enfant le plus profond ne corrige alors pas
   l'etirement du wrapper intermediaire. Fix a la source : neutraliser le stretch sur le
   conteneur flex lui-meme, quelle que soit la profondeur de wrapper TEC pour cet evenement. */
.tribe-events-event-meta {
	align-items: flex-start;
	gap: 32px;
}
.tribe-events-single-section-title {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--cesam-teal);
	border: none !important;
	margin-bottom: 10px !important;
	padding: 0 !important;
}
.tribe-events-meta-group {
	margin-bottom: 20px;
}
.tribe-events-meta-group:last-child {
	margin-bottom: 0;
}
.tribe-events-meta-item {
	color: var(--cesam-ink);
}

/* --- Carte Google Maps : coins arrondis + ombre plutot que rectangle brut ---
 * Bug remonte par le club (photo telephone + confirme via capture automatisee le 04/09) :
 * grand espace blanc sous la carte. Cause reelle : le CSS natif de The Events Calendar
 * (tribe-events-single-skeleton.css) met `.tribe-events-event-meta { display:flex }` (donc
 * align-items:stretch par defaut) sur la ligne Details/Lieu/Carte. Sans habillage visuel,
 * cet etirement etait invisible (rien ne dessinait les limites de la colonne). Des qu'on
 * habille .tribe-events-venue-map avec sa propre bordure/ombre, l'etirement devient un grand
 * rectangle blanc sous la carte (qui, elle, garde sa taille native Google Maps).
 * Correctif : empecher cette seule colonne de s'etirer (align-self), sans toucher a l'ordre
 * ni a la taille de la carte elle-meme - modifier son ordre/position avait deja casse le rendu
 * Google Maps une fois (voir notes plugin), donc on evite tout ce qui deplace/redimensionne
 * la div de la carte.
 */
.tribe-events-venue-map {
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
	margin-top: 8px;
	align-self: flex-start;
}

/* --- Participants (cesam-organisateurs) : integre au meme langage de carte --- */
.cesam-participants {
	background: var(--cesam-card);
	border: 1px solid var(--cesam-border);
	border-radius: 16px;
	padding: 24px 28px !important;
}
.cesam-participants h3 {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--cesam-teal);
}

/* --- Evenements lies : colonne etroite unique -> grille responsive de cartes --- */
.tribe-events-related-events-title {
	font-size: 20px;
	font-weight: 800;
	color: var(--cesam-ink);
	margin-top: 40px;
}
ul.tribe-related-events.tribe-clearfix {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	padding: 0;
	margin: 20px 0 0;
	list-style: none;
}
ul.tribe-related-events.tribe-clearfix > li {
	width: calc(33.333% - 16px);
	min-width: 240px;
	flex: 1 1 240px;
	background: #fff;
	border: 1px solid var(--cesam-border);
	border-radius: 14px;
	overflow: hidden;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	float: none !important;
}
ul.tribe-related-events.tribe-clearfix > li:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 20px rgba(15, 23, 42, 0.1);
}
.tribe-related-events-thumbnail {
	background: var(--cesam-teal-tint);
	min-height: 160px;
	overflow: hidden;
	border-radius: 14px 14px 0 0;
}
/* !important : le theme/le lazy-load de WP Rocket imposent sinon la taille naturelle de
   l'image (~1040x694 mesure en direct) au lieu de la caler sur le cadre 100%/160px, ce qui
   la fait deborder du coin arrondi de la carte - d'ou la demande club "meme coin arrondi que
   le reste" (04/09/2026). */
.tribe-related-events-thumbnail img {
	display: block !important;
	width: 100% !important;
	height: 160px !important;
	object-fit: cover !important;
	border-radius: 14px 14px 0 0 !important;
}
.tribe-related-event-info {
	padding: 14px 16px 18px;
}
.tribe-related-events-title {
	font-size: 15px;
	margin: 0 0 6px;
}
.tribe-related-events-title a {
	color: var(--cesam-ink);
	text-decoration: none;
}
.tribe-related-event-info .tribe-event-date-start,
.tribe-related-event-info .tribe-event-time {
	font-size: 13px;
	color: var(--cesam-ink-soft);
}

/* --- Evenement complet/reservations closes dans la vue "Liste" du calendrier TEC (04/09/2026,
   retour club "la vignette de la liste des evenements ne reflete pas l'etat des reservations") :
   classe ajoutee par cesam_org_add_booking_state_post_class() (filtre post_class standard,
   evenement par evenement - aucun template modifie). Photo desaturee + pastille centree
   (04/09/2026 : pas un ruban d'angle comme sur la fiche evenement - la vignette de liste est
   trop petite pour un ruban en diagonale sans qu'il deborde, une pastille centree tient mieux
   et reste lisible). Pour les evenements sans photo (le template TEC n'affiche alors aucun
   wrapper), badge textuel a cote du titre a la place. */
.cesam-event-closed .tribe-events-calendar-list__event-featured-image,
.cesam-event-soldout .tribe-events-calendar-list__event-featured-image {
	filter: grayscale(0.85) brightness(0.75);
}
.cesam-event-closed .tribe-events-calendar-list__event-featured-image-wrapper,
.cesam-event-soldout .tribe-events-calendar-list__event-featured-image-wrapper {
	position: relative;
	overflow: hidden;
}
.cesam-event-closed .tribe-events-calendar-list__event-featured-image-wrapper::after,
.cesam-event-soldout .tribe-events-calendar-list__event-featured-image-wrapper::after {
	content: "Réservations closes";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 7px 14px;
	background: rgba(45, 64, 89, 0.92);
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	text-align: center;
	white-space: nowrap;
	border-radius: 999px;
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.35);
}
.cesam-event-soldout .tribe-events-calendar-list__event-featured-image-wrapper::after {
	content: "Complet";
	background: rgba(180, 35, 24, 0.92);
}
/* Pas de photo sur l'evenement : le wrapper ci-dessus n'existe pas du tout (le template TEC ne
   le rend pas), donc le ruban ne peut pas s'y accrocher - badge textuel a cote du titre a la
   place, seul signal toujours present quel que soit l'evenement. */
.cesam-event-closed .tribe-events-calendar-list__event-title::after,
.cesam-event-soldout .tribe-events-calendar-list__event-title::after {
	content: "Réservations closes";
	display: inline-block;
	margin-left: 10px;
	padding: 3px 10px;
	background: var(--cesam-navy);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	border-radius: 999px;
	vertical-align: middle;
}
.cesam-event-soldout .tribe-events-calendar-list__event-title::after {
	content: "Complet";
	background: #b42318;
}

/* --- Mobile : le bandeau date passe en pleine largeur, la grille d'evenements lies en 1 colonne --- */
@media (max-width: 640px) {
	.tribe-events-schedule {
		display: flex;
		width: 100%;
		box-sizing: border-box;
	}
	.tribe-events-event-meta.primary {
		padding: 20px;
	}
	ul.tribe-related-events.tribe-clearfix > li {
		width: 100%;
	}
	/* NOTE : le CSS Divi/TEC d'origine affiche Details/Carte/Lieu dans cet ordre sur mobile
	   (pas Details/Lieu/Carte) - deja le cas avant cet habillage. Un essai de reordonnancement
	   en flex a ete tente ici puis abandonne : il cassait le rendu de la carte Google Maps
	   (dimensionnee par son script au chargement, invisible si son conteneur est deplace/
	   redimensionne apres coup sans declencher un resize). L'ordre reste donc tel quel -
	   mineur, pas fonctionnellement genant, bien moins grave qu'une carte cassee. */
	.tribe-events-meta-group {
		float: none !important;
		width: 100% !important;
	}
}