/* =====================================================================================
   RESPONSIVE — corrections communes court-circuit.live et court-circuit.band
   Chargé APRÈS style.css sur les deux sites. Beaucoup de blocs ont des styles en ligne
   (padding: 30px 0 30px 40px…) générés par le PHP : d'où les !important ciblés.
   ===================================================================================== */

/* ---------- Listes d'événements : le cœur (favori) ne recouvre plus le titre ---------- */
.evenements:has(> [class^="DivHeart"]) .evenements-infos {
	padding-right: 52px !important;
}

/* ---------- Cartes « artiste » (listes CCB, palmarès) : hauteur libre, badges sous le texte ---------- */
.artistes-liste-item {
	display: flex;
	height: auto;
	min-height: 84px;
	overflow: hidden;
}
.artistes-liste-item > a:first-child {
	display: block;
	flex: 0 0 84px;
	width: 84px !important;
	height: auto !important;
}
.artistes-liste-item--img {
	display: block;
	height: 100%;
	min-height: 84px;
}
.artistes-liste-item--infos {
	flex: 1 1 auto;
	width: auto;
	height: auto;
	min-width: 0;
}
.artistes-liste-item--infos > div[style*="bottom: 8px"][style*="right: 8px"] {
	position: static !important;
	margin-top: 6px;
	text-align: right;
}
.artistes-liste-item--infos_genre {
	line-height: 12px;
}
.artistes-liste-item--infos_genre[style*="font-size: 8px"] {
	font-size: 10px !important;
}

/* ---------- Grilles d'artistes (pages artistes/ de CCB et CCL, recherche) : toutes les cartes à la même hauteur ----------
   Avant : hauteur selon le contenu (lignes de styles, logos des appels) -> grille en escalier.
   Maintenant : hauteur fixe, nom sur 1 ligne, styles sur 2 lignes max (« … »), lieux sur 1 ligne,
   logos des appels sur une rangée calée en bas. */
.artistes-liste .artistes-liste-item {
	height: 132px;
}
.artistes-liste .artistes-liste-item--img {
	height: 100%;
}
.artistes-liste .artistes-liste-item--infos {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.artistes-liste .artistes-liste-item--infos > * {
	flex: none;
}
.artistes-liste .artistes-liste-item--infos_titre {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.artistes-liste .artistes-liste-item--infos_genre {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}
.artistes-liste .artistes-liste-item--infos_genre[style*="font-size: 8px"] {
	-webkit-line-clamp: 1;
	line-clamp: 1;
}
.artistes-liste .artistes-liste-item--infos > div[style*="bottom: 8px"][style*="right: 8px"] {
	margin-top: auto;
	display: flex;
	justify-content: flex-end;
	gap: 4px;
	overflow: hidden;
}
/* beaucoup d'appels (7, 8 logos) : les logos rétrécissent pour tenir sur la rangée au lieu d'être coupés */
.artistes-liste .artistes-liste-item--infos > div[style*="bottom: 8px"][style*="right: 8px"] > a {
	flex: 0 1 25px;
	min-width: 16px;
	line-height: 0;
}
.artistes-liste .artistes-liste-item--infos > div[style*="bottom: 8px"][style*="right: 8px"] img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	margin: 0 !important;
}

/* ---------- Textes trop petits (lieux, villes) ---------- */
.evenements-infos-lieu {
	font-size: 11px;
}

/* =====================================================================================
   BARRE DE CHANGEMENT D'ORGA (SU, comptes à plusieurs orgas) — 2026-11-09, php/cclive-fonctions.php SwitcherOrgas
   Bande sombre aux coins arrondis comme les cartes de la page : à gauche l'orga actuelle, à droite la recherche
   (php/admin_ajax_ccl.js SwitcherInit, liste .ac-artistes) ou une liste déroulante s'il y a peu d'orgas.
   ===================================================================================== */
.sw-barre {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 20px;
	margin-top: 16px !important;
	margin-bottom: 16px !important;
	padding: 12px 16px 12px 20px !important;
	border: 1px solid rgba(255,255,255,.08);
	border-radius: 14px;
	background: #1c1c1e;
	color: #fff;
}
.sw-gauche { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sw-badge {
	flex: none;
	padding: 3px 8px;
	border-radius: 999px;
	background: #ED5E5E;
	font-family: 'GT Walsheim bold', sans-serif;
	font-size: 11px;
	letter-spacing: .06em;
	color: #fff;
}
.sw-texte { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sw-label { font-size: 13px; color: #9a9aa0; }
.sw-actuelle { font-family: 'GT Walsheim bold', sans-serif; font-weight: normal; font-size: 15px; letter-spacing: .02em; text-transform: uppercase; color: #fff; }
.sw-droite { flex: 0 1 380px; min-width: 0; }
.sw-avec-recherche .sw-select { display: none !important; }
.sw-champ {
	position: relative;
	display: block;
	margin: 0;
}
.sw-champ svg { position: absolute; left: 12px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); fill: #9a9aa0; pointer-events: none; }
.sw-barre input#SwitchRecherche,
.sw-barre .sw-select {
	box-sizing: border-box;
	width: 100%;
	height: 42px;
	margin: 0;
	border: 1px solid rgba(255,255,255,.16);
	border-radius: 10px;
	background-color: #2a2a2d;
	color: #fff;
	font-size: 15px;
	-webkit-appearance: none;
	appearance: none;
}
.sw-barre input#SwitchRecherche { padding: 0 12px 0 40px; }
.sw-barre input#SwitchRecherche::placeholder { color: #9a9aa0; opacity: 1; }
.sw-barre input#SwitchRecherche:focus,
.sw-barre .sw-select:focus { outline: none; border-color: #ED5E5E; box-shadow: 0 0 0 3px rgba(237,94,94,.25); }
.sw-barre .sw-select {
	padding: 0 38px 0 14px;
	background: #2a2a2d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 16px;
	cursor: pointer;
}
.sw-barre .sw-select option { background: #1c1c1e; color: #fff; }
.ui-autocomplete.sw-liste { max-height: min(420px, 60vh); overflow-y: auto; overflow-x: hidden; }
@media (max-width: 767px) {
	.sw-barre { margin-left: 16px !important; margin-right: 16px !important; width: auto !important; padding: 12px !important; }
	.sw-droite { flex: 1 1 100%; }
	.sw-barre input#SwitchRecherche { font-size: 16px; } /* pas de zoom automatique sur iPhone */
}
/* ---------- Gestionnaire d'événements : actions lisibles et faciles à toucher ---------- */
.GestionnaireMenuEvent {
	font-size: 11px;
	line-height: 16px;
	margin-bottom: 0;
}
.GestionnaireMenuEvent {
	display: block;
	padding: 5px 0;
}
.GestionnaireMenuEvent a { display: block; }

/* ============================== TÉLÉPHONE ============================== */
@media (max-width: 767px) {

	/* Blocs blancs : 40 px de marge intérieure (+ 40 px à droite sur chaque enfant) mangeaient un tiers de l'écran */
	.home-main--section,
	.home-main--section[style] {
		padding: 24px 20px !important;
	}
	/* sauf les blocs à bande jaune en haut (fond jaune + padding: 20px 0 0 0 en ligne, bloc blanc dedans) :
	   on garde la bande seule, sinon le jaune fait un cadre tout autour */
	.home-main--section[style*="padding: 20px 0 0 0"] {
		padding: 20px 0 0 0 !important;
	}
	/* (sauf les blocs dont le PHP force déjà padding: 0 en ligne : l'espacement y est porté par l'enfant) */
	.home-main--section:not([style*="padding-right: 0"]) > div[style*="padding-right: 40px"],
	.home-main--section:not([style*="padding-right: 0"]) [class^="evenement-a-propos--"][style*="padding-right: 40px"] {
		padding-right: 0 !important;
	}
	.home-main--section .evenement-a-propos--map {
		width: calc(100% + 40px);
		margin-left: -20px;
	}

	/* Icônes (i, #, horloge, lieu, e-mail) : une colonne de 30 px au lieu de 50 px */
	.evenement-a-propos--description,
	.evenement-a-propos--tags,
	.evenement-a-propos--heure,
	.evenement-a-propos--adresse,
	.evenement-a-propos--email {
		padding-left: 32px;
	}
	.evenement-a-propos > div:after {
		width: 20px;
		height: 20px;
	}
	.evenement-a-propos--description,
	.evenement-a-propos--description * {
		font-size: 15px;
		line-height: 1.45;
	}

	/* Menu du bas : libellés lisibles */
	#menu-principal .header-menu--item {
		font-size: 10px;
	}

	/* Villes sous le nom du lieu (pages événement, artiste, organisateur) */
	section.evenement-infos .evenement-localisation .evenement-ville {
		font-size: 11px !important;
		line-height: 13px !important;
	}

	/* Bandeaux rouges/jaunes fixés en bas (cookies, « Vous êtes artiste… ») : compacts */
	section.evenement-billeterie[id^="DspBandeau"]:not(#DspBandeau) .container {
		padding: 10px 14px !important;
	}
	section.evenement-billeterie .evenement-btn-plus {
		font-size: 13px;
		line-height: 1.35;
		text-align: left !important;
	}
	section.evenement-billeterie .DspCroixBlanche {
		width: 26px;
		height: 26px;
		line-height: 24px;
		margin: 0 0 4px 10px;
	}

	/* Barre « Trouver des billets » (page événement) : le bouton de réservation suffit, l'intitulé est masqué */
	#DspBandeau .container {
		padding: 10px 14px !important;
	}
	#DspBandeau .evenement-billeterie-plus:has(+ .evenement-billeterie-choix) {
		display: none;
	}
	#DspBandeau .evenement-billeterie-choix {
		margin: 0 !important;
	}

	/* Champs de formulaire : 16 px minimum, sinon l'iPhone zoome à chaque saisie */
	input[type="text"], input[type="email"], input[type="password"], input[type="search"],
	input[type="tel"], input[type="url"], input[type="number"], input:not([type]),
	select, textarea {
		font-size: 16px !important;
	}

	/* Formulaires « Créer un événement » / « Créer un·e artiste » (panneaux plein écran) :
	   champs sur toute la largeur, marges réduites, et le bas du panneau n'est plus caché par le menu (90 px) */
	#creer-un-evenement,
	#aside-ajouter-un-artiste {
		padding-left: 18px;
		padding-right: 18px;
		bottom: 90px !important;
		height: auto !important;
	}
	#creer-un-evenement form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
	#creer-un-evenement form textarea,
	#aside-ajouter-un-artiste form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
	#aside-ajouter-un-artiste form textarea {
		width: 100%;
		box-sizing: border-box;
		padding: 10px 12px;
	}

	/* … sauf les petits champs de prix (cadre « € » de 94 px) */
	#creer-un-evenement form .prix-ticket .currencyinput input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
	#aside-ajouter-un-artiste form .prix-ticket .currencyinput input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]) {
		width: 75%;
		padding: 8px 4px 8px 10px;
	}

	/* CCB, espace artiste : la barre « Mes paramètres / Votre page artiste » fixée en haut avait un fond en dégradé
	   transparent, le contenu défilait dessous et se mélangeait aux boutons */
	#votre-page-artiste #vpa-fixedhero {
		z-index: 20;
		background: rgba(21, 21, 21, .97);
		box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
	}
	#votre-page-artiste #vpa-fixedhero .row.align-items-center {
		min-height: 0;
		padding: 0 0 10px;
	}

	/* Liste des organisations : pleine largeur */
	#SwitchSelect {
		width: 100%;
		font-size: 16px;
	}

	/* Gestionnaire : boutons d'action de 32 px de haut */
	.GestionnaireMenuEvent {
		font-size: 12px;
	}
	.GestionnaireMenuEvent {
		padding: 8px 0;
	}

	/* Pied de page : mentions légales lisibles */
	#site-footer--copyright,
	#site-footer--copyright a {
		font-size: 11px;
		line-height: 1.4;
	}

	/* Petits libellés de formulaire (« Se souvenir de moi », « Mot de passe oublié ? ») */
	#login-form label,
	#login-form .login-forget-pwd a {
		font-size: 13px;
	}
}

/* Très petits écrans : le menu du bas garde 6 entrées sur 320 px */
@media (max-width: 360px) {
	#menu-principal .header-menu--item {
		font-size: 9px;
	}
}

/* ---------- Sélection d'un appel (CCB appels/…, #DspAppels) : toutes les cartes pareilles (2026-11-08) ----------
   La photo est un enfant direct de la carte (pas dans un lien) avec height / width « inherit » :
   chaque carte prenait la taille de sa photo. Maintenant : carré de 100 px recadré, hauteur fixe. */
#DspAppels .artistes-liste-item { height: 100px; }
#DspAppels .artistes-liste-item > .artistes-liste-item--img { flex: 0 0 100px; width: 100px; height: 100%; min-height: 0; }
#DspAppels .artistes-liste-item--img img { display: block; width: 100% !important; height: 100% !important; object-fit: cover; }
#DspAppels .artistes-liste-item--infos { display: flex; flex-direction: column; overflow: hidden; }
#DspAppels .artistes-liste-item--infos > * { flex: none; }
#DspAppels .artistes-liste-item--infos_titre { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#DspAppels .artistes-liste-item--infos_genre { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; overflow: hidden; }
#DspAppels .artistes-liste-item--infos_titre + .artistes-liste-item--infos_genre { -webkit-line-clamp: 2; line-clamp: 2; }

/* ---------- EN-TÊTES (« hero ») : UNE SEULE TAILLE SUR TOUTES LES PAGES, CCB ET CCL (2026-11-08) ----------
   Avant : 300, 350, 400 ou 460 px selon la page (règles de style.css + styles en ligne du PHP), et parfois selon
   la longueur du titre. Maintenant : la proportion de l'en-tête d'un appel (≈ 2,55 pour 1, soit 559 px de haut
   pour 1425 de large), plafonnée à 560 px ; sur téléphone 260 px au moins ; le contenu peut toujours agrandir.
   Pas les pages d'accueil (#home-hero, .HomeHero), qui gardent leur grand bandeau. */
section.evenement-hero,
section.artiste-hero,
section.organisateur-hero,
#artistes-hero,
#focus-hero,
#actu-hero,
#organisations-hero,
#a-propos-hero,
#vpa-hero {
	height: auto !important;
	min-height: auto !important; /* (annule les min-height en ligne) : avec aspect-ratio, le contenu peut encore agrandir */
	aspect-ratio: 2.55 / 1;
	background-size: cover !important;
}
@media (min-width: 1440px) {
	:is(section.evenement-hero, section.artiste-hero, section.organisateur-hero, #artistes-hero, #focus-hero, #actu-hero, #organisations-hero, #a-propos-hero, #vpa-hero) { max-height: 560px; }
}
@media (max-width: 767px) {
	:is(section.evenement-hero, section.artiste-hero, section.organisateur-hero, #artistes-hero, #focus-hero, #actu-hero, #organisations-hero, #a-propos-hero, #vpa-hero) { aspect-ratio: auto; min-height: 260px !important; }
}
/* le contenu (titre long sur téléphone…) agrandit l'en-tête au lieu de déborder */
:is(section.evenement-hero, section.artiste-hero, section.organisateur-hero, #artistes-hero, #focus-hero, #actu-hero, #organisations-hero, #a-propos-hero, #vpa-hero) > .row {
	height: auto !important;
	min-height: 100%;
}

/* ---------- Cartes « artiste » des grilles (artistes/ CCB et CCL) : survol (2026-11-09) ----------
   La carte monte un peu, contour de la couleur du site (--carte-accent : rouge CCL, jaune CCB dans php/ccband-accueil.css), photo qui zoome. */
.artistes-liste .artistes-liste-item {
	transition: transform .3s cubic-bezier(.4, 0, .2, 1), box-shadow .3s;
}
.artistes-liste .artistes-liste-item--img img {
	transition: transform .6s ease;
}
.artistes-liste .artistes-liste-item:hover,
.artistes-liste .artistes-liste-item:focus-within {
	transform: translateY(-4px);
	box-shadow: 0 0 0 2px var(--carte-accent, #E6173A), 0 14px 28px rgba(0, 0, 0, .14);
}
.artistes-liste .artistes-liste-item:hover .artistes-liste-item--img img {
	transform: scale(1.06);
}
.artistes-liste .artistes-liste-item:hover .artistes-liste-item--infos_titre {
	color: var(--carte-accent-texte, #E6173A);
}
@media (prefers-reduced-motion: reduce) {
	.artistes-liste .artistes-liste-item, .artistes-liste .artistes-liste-item--img img { transition: none; }
	.artistes-liste .artistes-liste-item:hover, .artistes-liste .artistes-liste-item:hover .artistes-liste-item--img img { transform: none; }
}

/* ---------- Pages artistes/ : la zone des résultats de recherche (#DspArtFiltre) ne prend pas de place tant qu'elle est vide,
   et un peu moins d'écart entre la recherche et la grille (2026-11-09) */
.artistes-liste:has(> #DspArtFiltre:empty):not(:has(#artistes-filtres)) { display: none; } /* (pas la section qui porte la recherche : sur CCB elles sont ensemble) */
@media (min-width: 768px) {
	main#artistes > .artistes-liste.mt-md-5 { margin-top: 28px !important; }
}

/* ------------------------------------------------------------------------------------------------
   BANDEAUX DU BAS (2026-11-09) — « Vous êtes artiste… », « page générée selon… », billets, CCB jaune
   La croix était un caractère « ╳ » décentré dans son carré : cercle avec une croix dessinée en CSS.
   Le texte et la croix sont alignés sur une même ligne (sauf le bandeau des billets, qui a ses boutons).
------------------------------------------------------------------------------------------------ */
section.evenement-billeterie .DspCroixBlanche:not([style*="width:unset"]) {
	position: relative; display: inline-flex !important; align-items: center; justify-content: center; flex: 0 0 auto;
	float: none !important; width: 34px !important; height: 34px !important; margin: 0 !important; padding: 0 !important;
	border: 1.5px solid currentColor !important; border-radius: 50% !important; background: transparent;
	font-size: 0 !important; line-height: 0 !important; color: inherit; opacity: .85; cursor: pointer; transition: opacity .2s, background .2s, transform .2s;
}
section.evenement-billeterie .DspCroixBlanche:not([style*="width:unset"])::before,
section.evenement-billeterie .DspCroixBlanche:not([style*="width:unset"])::after { content: ""; position: absolute; width: 14px; height: 1.8px; border-radius: 2px; background: currentColor; }
section.evenement-billeterie .DspCroixBlanche:not([style*="width:unset"])::before { transform: rotate(45deg); }
section.evenement-billeterie .DspCroixBlanche:not([style*="width:unset"])::after { transform: rotate(-45deg); }
section.evenement-billeterie .DspCroixBlanche:not([style*="width:unset"]):hover { opacity: 1; background: rgba(255, 255, 255, .15); transform: rotate(90deg); }
section.evenement-billeterie { color: #fff; }
section.evenement-billeterie > .container:not(:has(.evenement-billeterie-choix)) { display: flex; flex-direction: row-reverse; align-items: center; gap: 18px; max-width: 1140px; }
section.evenement-billeterie > .container:not(:has(.evenement-billeterie-choix)) > .row { flex: 1 1 auto; min-width: 0; margin: 0; }
section.evenement-billeterie > .container:not(:has(.evenement-billeterie-choix)) .evenement-btn-plus { margin: 0; font-size: 15px; line-height: 1.5; }
section.evenement-billeterie .evenement-btn-plus a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 767px) {
	section.evenement-billeterie .DspCroixBlanche:not([style*="width:unset"]) { width: 30px !important; height: 30px !important; }
	section.evenement-billeterie > .container:not(:has(.evenement-billeterie-choix)) { gap: 12px; align-items: flex-start; }
	section.evenement-billeterie > .container:not(:has(.evenement-billeterie-choix)) .evenement-btn-plus { font-size: 13px; }
}
/* bandeau cookies : « C'est noté, merci. » devient un bouton */
section.evenement-billeterie .DspCroixBlanche[style*="width:unset"] {
	display: inline-flex; align-items: center; flex: 0 0 auto; float: none !important; height: auto !important; margin: 0 !important; padding: 9px 18px !important;
	border: 1.5px solid currentColor !important; border-radius: 999px; font-family: 'GT Walsheim bold', sans-serif; font-size: 13px; line-height: 1; white-space: nowrap; cursor: pointer; transition: background .2s, color .2s;
}
section.evenement-billeterie .DspCroixBlanche[style*="width:unset"]:hover { background: #fff; color: #1A1A1B; }

/* CCB, page d'un appel : « Voir les N autres artistes » (avant : un « + » seul) — 2026-11-09 */
.ccb-voir-plus-boite { display: flex; justify-content: center; padding: 6px 0 4px; }
.ccb-voir-plus { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 22px; border: 1.5px solid #F8C11A; border-radius: 999px; background: transparent; color: #F8C11A;
	font-family: 'GT Walsheim bold', sans-serif; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; transition: background .2s, color .2s; }
.ccb-voir-plus:hover { background: #F8C11A; color: #111; }

/* ------------------------------------------------------------------------------------------------
   BANDE DES BILLETS (page événement, 2026-11-09) — balisage : CCLEvenement… (php/cclive-pages.php, .ccl-billets)
   Une seule ligne : « Billets » · prix sur place · prix en ligne (lien) · croix. Avant : ~190 px de haut.
------------------------------------------------------------------------------------------------ */
#DspBandeau.ccl-billets { background: #DD4E4E; box-shadow: 0 -6px 20px rgba(0, 0, 0, .18); }
#DspBandeau.ccl-billets > .ccl-billets-ligne { display: flex !important; flex-direction: row !important; align-items: center; gap: 14px; max-width: 1140px; height: auto !important; padding: 10px 15px !important; text-align: left; }
#DspBandeau.ccl-billets .ccl-billets-titre { display: inline-flex; align-items: center; gap: 8px; flex: none; font-family: 'GT Walsheim bold', sans-serif; font-size: 15px; text-transform: uppercase; letter-spacing: .03em; }
#DspBandeau.ccl-billets .ccl-billets-titre svg { width: 22px; height: 22px; fill: currentColor; }
#DspBandeau.ccl-billets .ccl-billets-liste { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; flex: 1 1 auto; min-width: 0; }
#DspBandeau.ccl-billets .ccl-billets-prix { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px !important; border-radius: 999px; background: rgba(255, 255, 255, .16); color: #fff !important; font-family: 'GT Walsheim regular', sans-serif !important; font-size: 14px !important; line-height: 1 !important; text-transform: none !important; white-space: nowrap; text-decoration: none !important; }
#DspBandeau.ccl-billets .ccl-billets-prix b { font-family: 'GT Walsheim bold', sans-serif; font-size: 16px; font-weight: normal; }
#DspBandeau.ccl-billets a.ccl-billets-resa { background: #fff; color: #C8283D !important; transition: transform .2s, box-shadow .2s; }
#DspBandeau.ccl-billets a.ccl-billets-resa:hover, #DspBandeau.ccl-billets a.ccl-billets-resa:focus-visible { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 0, 0, .2); }
#DspBandeau.ccl-billets a.ccl-billets-resa::after { content: none !important; }
@media (max-width: 767px) {
	#DspBandeau.ccl-billets > .ccl-billets-ligne { gap: 10px; padding: 8px 12px !important; }
	#DspBandeau.ccl-billets .ccl-billets-titre span, #DspBandeau.ccl-billets .ccl-billets-titre { font-size: 0; gap: 0; } /* l'icône suffit */
	#DspBandeau.ccl-billets .ccl-billets-titre svg { width: 24px; height: 24px; }
	/* (2026-11-10) pastilles qui se partagent la largeur, libellé sous le prix : plus rien ne dépasse, même avec une grande police */
	#DspBandeau.ccl-billets .ccl-billets-liste { justify-content: flex-start; flex-wrap: nowrap; }
	#DspBandeau.ccl-billets .ccl-billets-prix { flex: 1 1 0; min-width: 0; max-width: 170px; height: auto; min-height: 40px; flex-direction: column; justify-content: center; gap: 2px; padding: 5px 10px !important; border-radius: 14px; font-size: 12px !important; line-height: 1.1 !important; white-space: normal; text-align: center; }
	#DspBandeau.ccl-billets .ccl-billets-prix b { font-size: 15px; }
	#DspBandeau.ccl-billets .ccl-billets-lib { white-space: nowrap; }
}

/* ------------------------------------------------------------------------------------------------
   SUPPRIMER UNE PHOTO / VIDÉO DE LA GALERIE (2026-11-09) — DspGalOrga() (php/cclive-mon-organisation.php)
   Avant : emoji ❌ dans un carré blanc. Maintenant : rond sombre, corbeille, rouge au survol, toujours visible sur téléphone.
------------------------------------------------------------------------------------------------ */
.gal-suppr { position: absolute; top: 8px; right: 8px; z-index: 3; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%; background: rgba(17, 17, 19, .72); color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: .85; transition: background .2s, opacity .2s, transform .2s; }
.gal-suppr svg { width: 16px; height: 16px; fill: currentColor; }
.gal-suppr:hover, .gal-suppr:focus-visible { background: #E6173A; border-color: #E6173A; opacity: 1; transform: scale(1.06); }
@media (hover: hover) {
	.evenement-galerie-item .gal-suppr, .evenement-galerie-item-big .gal-suppr { opacity: 0; }
	.evenement-galerie-item:hover .gal-suppr, .evenement-galerie-item-big:hover .gal-suppr, .gal-suppr:focus-visible { opacity: 1; }
}

/* ------------------------------------------------------------------------------------------------
   CARTES DU GESTIONNAIRE (2026-11-09) — DspDateGestionnaireV2() (php/cclive-fonctions.php), version CCL
   date | titre, ARTISTES, lieu, alertes | chiffres | actions. Avant : tableaux imbriqués, menu en texte gris.
------------------------------------------------------------------------------------------------ */
ul.g-liste { margin: 0; padding: 0; list-style: none; }
li.g-ligne { margin: 0 0 10px; padding: 0; }
li.g-ligne:empty { display: none; }
.g-carte { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto auto; align-items: center; gap: 18px; padding: 14px 16px; border-radius: 18px; background: #232326; color: #BDBDC4; border: 1px solid rgba(255, 255, 255, .06); transition: background .2s, border-color .2s, transform .2s; }
.g-carte > * { margin-top: 0; } /* (2026-11-10) reset.css « article > * + * { margin-top: 1em } » décalait le titre de 16 px sous la date (et les chiffres, les boutons) */
.g-carte:hover { background: #2A2A2E; border-color: rgba(255, 255, 255, .12); }
.g-carte svg { width: 16px; height: 16px; fill: currentColor; flex: none; }
.g-carte-date { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; width: 64px; height: 72px; padding: 0; border: 0; border-radius: 14px; background: #fff; color: #111; cursor: pointer; line-height: 1; }
.g-carte-js { font-family: 'GT Walsheim bold', sans-serif; font-size: 10px; letter-spacing: .08em; color: #E6173A; }
.g-carte-jour { font-family: 'GT Walsheim bold', sans-serif; font-size: 26px; }
.g-carte-mois { font-family: 'GT Walsheim bold', sans-serif; font-size: 11px; letter-spacing: .06em; color: #555; }
.g-carte-jusqua { margin-top: 2px; font-size: 9px; color: #777; }
.g-carte-brouillon .g-carte-date { background: #3A3A3F; color: #fff; }
.g-carte-brouillon .g-carte-mois, .g-carte-brouillon .g-carte-jusqua { color: #BDBDC4; }
.g-carte-annule { opacity: .7; }
.g-carte-annule .g-carte-titre { text-decoration: line-through; text-decoration-color: rgba(230, 23, 58, .7); }
.g-carte-corps { min-width: 0; cursor: pointer; }
.g-carte-titre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 4px !important; font-family: 'GT Walsheim bold', sans-serif !important; font-size: 17px !important; line-height: 1.25 !important; color: #fff !important; text-transform: none; }
.g-carte-artistes { margin: 0 0 6px !important; font-family: 'GT Walsheim bold', sans-serif; font-size: 12px; line-height: 1.45; letter-spacing: .05em; text-transform: uppercase; color: #E6E6EA !important; }
.g-carte-lieu { display: flex; align-items: center; gap: 6px; margin: 0 !important; font-size: 13px; color: #8C8C92 !important; }
.g-carte-lieu svg { width: 14px; height: 14px; color: #E6173A; }
.g-etiquette { padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, .12); font-family: 'GT Walsheim bold', sans-serif; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.g-etiquette-annule { background: #E6173A; }
.g-carte-alertes { margin-top: 8px; padding: 7px 10px; border-radius: 10px; background: rgba(255, 181, 71, .1); font-size: 12px; line-height: 1.5; color: #FFB547 !important; }
.g-carte-alertes * { color: #FFB547 !important; text-transform: none !important; }
.g-carte-chiffres { display: flex; gap: 18px; }
.g-carte-chiffres span { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 56px; font-size: 11px; color: #8C8C92; }
.g-carte-chiffres svg { color: #6E6E76; }
.g-carte-chiffres b { font-family: 'GT Walsheim bold', sans-serif; font-size: 18px; font-weight: normal; line-height: 1.1; color: #fff; }
.g-carte-chiffres i { font-style: normal; }
.g-carte-actions { display: flex; gap: 6px; }
.g-action { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 40px; height: 40px; padding: 0; border: 1px solid rgba(255, 255, 255, .14); border-radius: 50%; background: transparent; color: #fff !important; cursor: pointer; text-decoration: none !important; transition: background .2s, border-color .2s; }
.g-action span { display: none; }
.g-action:hover, .g-action:focus-visible { background: rgba(255, 255, 255, .12); }
.g-action-modifier { background: #fff; color: #111 !important; border-color: #fff; }
.g-action-modifier:hover, .g-action-modifier:focus-visible { background: #E6E6EA; }
.g-action-supprimer:hover, .g-action-supprimer:focus-visible { background: #E6173A; border-color: #E6173A; }
.g-encode-par { font-size: 12px; color: #8C8C92; }
@media (max-width: 991px) {
	.g-carte { grid-template-columns: 56px minmax(0, 1fr); gap: 12px 14px; }
	.g-carte-date { width: 56px; height: 64px; }
	.g-carte-jour { font-size: 22px; }
	.g-carte-chiffres { grid-column: 1 / -1; justify-content: flex-start; gap: 14px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .06); }
	.g-carte-chiffres span { flex-direction: row; min-width: 0; gap: 5px; }
	.g-carte-chiffres b { font-size: 14px; }
	.g-carte-actions { grid-column: 1 / -1; }
	.g-carte-actions { gap: 8px; } /* (2026-11-10) téléphone : « Modifier » en grand, « Voir » et « Supprimer » en ronds (avant : 3 pilules trop serrées, texte qui débordait) */
	.g-action { flex: none; width: 44px; height: 44px; }
	.g-action-modifier { order: -1; flex: 1 1 auto; width: auto; min-width: 0; padding: 0 16px; border-radius: 999px; }
	.g-action-modifier span { display: inline; white-space: nowrap; font-family: 'GT Walsheim bold', sans-serif; font-size: 13px; }
}
@media (max-width: 420px) {
	.g-carte-chiffres i { display: none; }
}
.g-carte-titre-artistes { text-transform: uppercase !important; letter-spacing: .02em; }
.g-carte-titre { text-transform: uppercase; letter-spacing: .01em; } /* titres des événements en capitales aussi (2026-11-09) */
@media (max-width: 991px) { .g-carte-date { align-self: start; } }

/* =====================================================================================
   FICHE ARTISTE du formulaire d'événement (php/cclive-form-event.php, CCLCreerArtiste) — 2026-11-09
   Sections aérées, champs pleine largeur, « Ajouter » sur la ligne du champ, pastilles, vignettes avec corbeille ronde,
   « Sauver l'artiste » collé en bas du panneau.
   ===================================================================================== */
#aside-ajouter-un-artiste { padding-bottom: 0 !important; }
#aside-ajouter-un-artiste .fa-entete { position: sticky; top: 0; z-index: 4; display: flex; align-items: center; gap: 12px; margin: 0 -35px; padding: 18px 35px 14px; background: #151515; border-bottom: 1px solid rgba(255,255,255,.08); }
#aside-ajouter-un-artiste .fa-entete h2 { margin: 0 !important; font-size: 22px; line-height: 1.2; }
#aside-ajouter-un-artiste .fa-retour { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; background: none; color: #fff; cursor: pointer; transition: background .2s, border-color .2s; }
#aside-ajouter-un-artiste .fa-retour svg { width: 20px; height: 20px; fill: currentColor; }
#aside-ajouter-un-artiste .fa-retour:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.4); }

.fiche-art .fa-bloc { padding: 22px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.fiche-art .fa-bloc:last-of-type { border-bottom: 0; }
#aside-ajouter-un-artiste .fiche-art h3.fa-titre { margin: 0 0 12px !important; font-family: 'GT Walsheim bold', sans-serif; font-size: 12px !important; letter-spacing: .08em; text-transform: uppercase; color: #9a9aa0; }
#aside-ajouter-un-artiste .fiche-art h3.fa-titre::after { content: none !important; display: none !important; }
.fiche-art .fa-aide { margin: 8px 0 0 !important; font-size: 12px; line-height: 1.4; color: #8C8C92 !important; }

#aside-ajouter-un-artiste .fiche-art input[type="text"],
#aside-ajouter-un-artiste .fiche-art input[type="url"],
#aside-ajouter-un-artiste .fiche-art textarea { width: 100% !important; box-sizing: border-box; margin: 0 !important; padding: 11px 14px !important; border: 1px solid rgba(255,255,255,.22) !important; border-radius: 10px; background: rgba(255,255,255,.04) !important; color: #fff; font-size: 15px; transition: border-color .2s, background .2s; }
#aside-ajouter-un-artiste .fiche-art input:focus,
#aside-ajouter-un-artiste .fiche-art textarea:focus { outline: none; border-color: #ED5E5E !important; background: rgba(255,255,255,.07) !important; }
#aside-ajouter-un-artiste .fiche-art textarea { min-height: 180px; line-height: 1.5; resize: vertical; }
#aside-ajouter-un-artiste .fiche-art .fa-nom { border-color: transparent !important; background: rgba(255,255,255,.06) !important; font-family: 'GT Walsheim bold', sans-serif; text-transform: uppercase; letter-spacing: .02em; cursor: default; }
#aside-ajouter-un-artiste .fiche-art #ACPays { margin-top: 0 !important; }

/* champ + bouton sur une ligne */
.fiche-art .fa-ligne { display: flex; gap: 8px; align-items: stretch; margin-top: 10px; }
.fiche-art .fa-ligne input { flex: 1 1 auto; min-width: 0; }
.fiche-art .fa-bouton { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; margin: 0; padding: 0 16px; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; background: none; color: #fff; font-family: 'GT Walsheim bold', sans-serif; font-size: 13px; line-height: 1; white-space: nowrap; cursor: pointer; transition: background .2s, border-color .2s; }
.fiche-art .fa-bouton span { font-size: 18px; line-height: 1; }
.fiche-art .fa-bouton:hover, .fiche-art .fa-bouton:focus-visible { background: #ED5E5E; border-color: #ED5E5E; }
.fiche-art label.fa-bouton { margin-top: 12px; }

/* pastilles (pays, styles) */
#aside-ajouter-un-artiste .fiche-art ul.fa-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; padding: 0; list-style: none; }
#aside-ajouter-un-artiste .fiche-art ul.fa-tags:empty { display: none; }
#aside-ajouter-un-artiste .fiche-art ul.fa-tags li.fa-tag { display: inline-flex !important; align-items: center; gap: 2px; width: auto !important; margin: 0 !important; padding: 0 4px 0 12px !important; height: 32px; border: 1px solid rgba(255,255,255,.25) !important; border-radius: 999px !important; background: rgba(255,255,255,.06) !important; }
#aside-ajouter-un-artiste .fiche-art ul.fa-tags li.fa-tag label { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; color: #fff !important; font-family: 'GT Walsheim bold', sans-serif; font-size: 12px; letter-spacing: .03em; text-transform: uppercase; cursor: default; }
#aside-ajouter-un-artiste .fiche-art .fa-tag-x { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: none; color: #9a9aa0; font-size: 18px; line-height: 1; cursor: pointer; transition: background .2s, color .2s; }
#aside-ajouter-un-artiste .fiche-art .fa-tag-x:hover, #aside-ajouter-un-artiste .fiche-art .fa-tag-x:focus-visible { background: #E6173A; color: #fff; }

/* vignettes (photos, vidéos) */
.fiche-art .fa-medias { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.fiche-art .fa-medias:empty { display: none; }
.fiche-art .fa-media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 10px; background: #222; }
.fiche-art .fa-media-video { aspect-ratio: 16 / 9; }
.fiche-art .fa-medias:has(.fa-media-video) { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.fiche-art .fa-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fiche-art .fa-media .gal-suppr { top: 6px; right: 6px; width: 30px; height: 30px; }
.fiche-art .fa-media .gal-suppr svg { width: 14px; height: 14px; }
.fiche-art .fa-lecture { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: rgba(0,0,0,.55); pointer-events: none; }
.fiche-art .fa-lecture svg { width: 20px; height: 20px; fill: #fff; }

/* liens : même largeur que le reste */
.fiche-art .creer-lien { margin-bottom: 8px; }

/* bas du panneau */
.fiche-art .fa-pied { position: sticky; bottom: 0; z-index: 4; margin: 0 -35px; padding: 14px 35px 18px; background: linear-gradient(to bottom, rgba(21,21,21,0), #151515 22%); }
.fiche-art .fa-pied .btn { display: flex !important; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin: 0 !important; }
.fiche-art .fa-message { margin: 0 0 8px; text-align: center; font-family: 'GT Walsheim bold', sans-serif; font-size: 13px; color: #7ad19a; }
.fiche-art .fa-message:empty { display: none; }

@media (max-width: 767px) {
	#aside-ajouter-un-artiste .fa-entete, .fiche-art .fa-pied { margin-left: -18px; margin-right: -18px; padding-left: 18px; padding-right: 18px; }
	.fiche-art .fa-medias { grid-template-columns: repeat(3, 1fr); gap: 8px; }
	.fiche-art .fa-medias:has(.fa-media-video) { grid-template-columns: repeat(2, 1fr); }
}

/* suggestions Google (Localisation d'un nouveau lieu) : au-dessus des panneaux latéraux (z-index 1001+), sinon elles s'ouvrent derrière */
.pac-container { z-index: 10050 !important; }
/* nouveau lieu : revenir à la recherche dans la liste */
.lieu-retour-liste { display: inline-block; margin: 0 0 10px; padding: 4px 0; background: none; border: 0; color: #F8C11A; font: inherit; font-size: 13px; cursor: pointer; }
.lieu-retour-liste:hover, .lieu-retour-liste:focus-visible { text-decoration: underline; outline: none; }

/* nouveau lieu : « Ajouter ce lieu » = vrai bouton (avant : 19 % de large, minuscule sur téléphone) ; champs sur toute la largeur dans le formulaire d'événement */
.lieu-nouveau-ajouter { display: block !important; width: 100% !important; min-height: 46px; height: auto !important; margin: 12px 0 0 !important; padding: 0 18px !important; border: 0 !important; border-radius: 999px; background: #F8C11A !important; color: #000 !important; font-family: 'GT Walsheim bold', sans-serif; font-size: 15px; cursor: pointer; }
.lieu-nouveau-ajouter:hover, .lieu-nouveau-ajouter:focus-visible { background: #fff !important; outline: none; }
#DspFormNewLieu input[type="text"] { width: 100% !important; }

/* ---------- LINE-UP d'un événement (2026-11-10, DspCCLEvenementsLineUp de php/cclive-evenements.php) ----------
   même famille que les cartes de concerts (.ccl-ev) : fond noir, talon rouge avec l'heure de passage (sinon une bande rouge),
   photo carrée (ou initiales), nom en majuscules + pays en pastille rouge, 3 styles au plus (+N), flèche rouge */
.evenement-lineup .ccl-lu-liste { display: flex; flex-direction: column; gap: 10px; padding-right: 40px; }
a.ccl-lu { display: flex; align-items: stretch; min-height: 76px; border-left: 6px solid #ED5E5E; border-radius: 10px; overflow: hidden; background: #000; color: #fff !important; text-decoration: none !important; transition: background .15s, transform .15s; }
a.ccl-lu:has(.ccl-lu-heure) { border-left: 0; }
a.ccl-lu:hover, a.ccl-lu:focus-visible { background: #161616; transform: translateX(3px); outline: none; }
a.ccl-lu:focus-visible { box-shadow: 0 0 0 3px rgba(237, 94, 94, .45); }
.ccl-lu-heure { flex: 0 0 64px; display: flex; align-items: center; justify-content: center; background: #ED5E5E; color: #fff; font-family: 'GT Walsheim bold', sans-serif; font-size: 17px; line-height: 1; }
.ccl-lu-photo { flex: 0 0 76px; width: 76px; min-height: 76px; background: #1b1b1b center / cover no-repeat; }
.ccl-lu-init { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #3a1414, #151515); color: #ED5E5E; font-family: 'GT Walsheim bold', sans-serif; font-size: 22px; letter-spacing: .02em; }
.ccl-lu-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 7px; padding: 10px 14px; }
.ccl-lu-nom { font-family: 'GT Walsheim bold', sans-serif; font-size: 17px; line-height: 1.2; text-transform: uppercase; overflow-wrap: anywhere; }
.ccl-lu-pays { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 4px; background: #ED5E5E; color: #fff; font-size: 11px; line-height: 1.3; letter-spacing: .04em; vertical-align: 2px; }
.ccl-lu-scene { display: flex; align-items: center; gap: 5px; color: #bbb; font-size: 12.5px; line-height: 1.2; letter-spacing: .02em; overflow-wrap: anywhere; } /* scène ou salle du lieu (case « scène » de MYCP) */
.ccl-lu-scene svg { flex: none; width: 12px; height: 12px; fill: #ED5E5E; }
.ccl-lu-styles { display: flex; flex-wrap: wrap; gap: 5px; }
.ccl-lu-styles span { padding: 2px 8px; border: 1px solid rgba(237, 94, 94, .75); border-radius: 3px; color: #ffb0b0; font-family: 'GT Walsheim bold', sans-serif; font-size: 10.5px; line-height: 1.4; letter-spacing: .03em; text-transform: uppercase; }
.ccl-lu-styles .ccl-lu-plus { border-color: transparent; color: #999; padding-left: 2px; }
.ccl-lu-fleche { flex: none; display: flex; align-items: center; padding: 0 16px 0 4px; font-size: 28px; line-height: 1; color: #ED5E5E; transition: transform .15s; }
a.ccl-lu:hover .ccl-lu-fleche { transform: translateX(3px); }
@media (max-width: 767px) {
	.evenement-lineup.home-main--section[style] { padding: 24px 16px !important; }
	.evenement-lineup .ccl-lu-liste { padding-right: 0; }
	a.ccl-lu { min-height: 66px; }
	.ccl-lu-heure { flex-basis: 54px; font-size: 15px; }
	.ccl-lu-photo { flex-basis: 66px; width: 66px; min-height: 66px; }
	.ccl-lu-txt { padding: 8px 10px; gap: 5px; }
	.ccl-lu-nom { font-size: 15px; }
	.ccl-lu-fleche { padding-right: 10px; }
}

/* =====================================================================================
   CARTE HORIZONTALE D'UN ÉVÉNEMENT (2026-11-10) — la même partout : agenda, pages artiste / organisateur,
   profil, recherche (JS carte() de recherche.js). PHP : CCLCarteEvenement (php/cclive-fonctions.php).
   Ancienne carte « fun » (colonne de date rouge, fond noir, lieu rouge) + flyer et pastilles de la recherche.
   ===================================================================================== */
.ccl-ev { position: relative; display: flex; flex-direction: column; margin: 0 0 10px; min-width: 0; }
.ccl-ev-lien {
	flex: 1 1 auto;
	display: flex;
	align-items: stretch;
	min-height: 100px;
	background: #000;
	color: #fff !important;
	text-decoration: none !important;
	border-radius: 10px;
	overflow: hidden;
	transition: transform .15s, background .15s;
}
a.ccl-ev-lien:hover { transform: translateY(-2px); background: #141414; }
a.ccl-ev-lien:focus-visible { outline: 2px solid #ED5E5E; outline-offset: 2px; }

/* la colonne de date : talon rouge (plus de ligne noire, demande de Nicolas 2026-11-10) */
.ccl-ev-date {
	flex: 0 0 58px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	padding: 10px 10px 10px 6px;
	background: #ED5E5E;
	color: #fff;
	font-family: 'GT Walsheim bold', sans-serif;
	line-height: 1;
	text-align: right;
}
.ccl-ev-jsem { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; opacity: .9; margin-bottom: 5px; }
.ccl-ev-jour { font-size: 26px; letter-spacing: -.02em; }
.ccl-ev-mois { font-size: 15px; margin-top: 2px; }
.ccl-ev-fin, .ccl-ev-heure { margin-top: auto; padding-top: 8px; font-size: 11px; white-space: nowrap; }

.ccl-ev-img {
	position: relative;
	flex: 0 0 100px;
	width: 100px;
	background: linear-gradient(135deg, #3a1414, #151515);
	overflow: hidden;
}
.ccl-ev-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.ccl-ev-infos {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	padding: 10px 14px;
	font-family: 'GT Walsheim bold', sans-serif;
	text-transform: uppercase;
}
.ccl-ev-titre {
	margin: 0;
	font-family: inherit;
	font-weight: normal;
	text-transform: inherit;
	font-size: 16px;
	line-height: 1.15;
	color: #fff;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	word-break: break-word;
}
.ccl-ev-artistes {
	font-size: 12px;
	line-height: 1.3;
	letter-spacing: .02em;
	color: #cfcfcf;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.ccl-ev-lieu { font-size: 11px; line-height: 1.3; letter-spacing: .03em; color: #ED5E5E; }
.ccl-ev-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 1px; text-transform: none; font-family: inherit; }
.ccl-ev-badge { font-size: 11px; line-height: 18px; padding: 0 8px; border-radius: 9px; background: #2b2b2b; color: #ddd; white-space: nowrap; }
.ccl-ev-badge--annule { background: #ED5E5E; color: #fff; }
.ccl-ev-badge--dist { background: rgba(237, 94, 94, .18); color: #ffb0b0; }
.ccl-ev--annule .ccl-ev-titre, .ccl-ev--annule .ccl-ev-artistes { text-decoration: line-through; text-decoration-color: rgba(237, 94, 94, .8); }

/* dans la grille de la recherche (courtcircuitlive/css/recherche.css .rch-grille) : l'écart vient de la grille */
.rch-grille > .ccl-ev { margin: 0; }

/* cœur « suivre ce concert » */
.ccl-ev-coeur { position: absolute; z-index: 2; top: 8px; right: 8px; }
.ccl-ev-coeur:empty { display: none; }
.ccl-ev:has(.ccl-ev-coeur:not(:empty)) .ccl-ev-infos { padding-right: 50px; }
.ccl-ev-coeur #favori { position: static !important; display: flex !important; align-items: center; justify-content: center; width: 32px !important; height: 32px !important; margin: 0 !important; padding: 0 !important; border-radius: 50%; background: #fff; cursor: pointer; transition: transform .15s; }
.ccl-ev-coeur #favori a { display: flex; }
.ccl-ev-coeur #favori img { width: 16px !important; height: 16px !important; margin: 0 !important; }
.ccl-ev-coeur #favori:hover { transform: scale(1.1); }

/* hors Fédération Wallonie-Bruxelles (pages artiste / organisateur) : grisée, pas cliquable */
.ccl-ev--gris .ccl-ev-lien { filter: grayscale(1); opacity: .65; }
/* court-circuit.band : jaune */
.ccl-ev--ccb .ccl-ev-date { background: #F8C11A; color: #000; }
.ccl-ev--ccb .ccl-ev-lieu { color: #F8C11A; }
.ccl-ev--ccb a.ccl-ev-lien:focus-visible { outline-color: #F8C11A; }

@media (max-width: 767px) {
	.ccl-ev-lien { min-height: 88px; }
	.ccl-ev-date { flex-basis: 50px; padding: 8px 8px 8px 4px; }
	.ccl-ev-jour { font-size: 22px; }
	.ccl-ev-mois { font-size: 13px; }
	.ccl-ev-img { flex-basis: 76px; width: 76px; }
	.ccl-ev-infos { padding: 8px 10px; gap: 4px; }
	.ccl-ev-titre { font-size: 14px; }
	.ccl-ev-artistes { font-size: 11px; }
}

/* ---------- Cartes artistes CCL / CCB (2026-11-10, demande de Nicolas) : les styles plus petits et plus légers que le nom ----------
   (la ligne des styles est la seule .artistes-liste-item--infos_genre sans style en ligne ; les lieux en ont un) */
.artistes-liste-item--infos_genre:not([style]) {
	font-family: 'GT Walsheim medium', 'GT Walsheim bold', sans-serif;
	font-size: 9px;
	line-height: 11px;
	letter-spacing: .03em;
	margin: 2px 0 3px;
}

/* ---------- Formulaire d'événement (CCL et CCB, même formulaire) — 2026-11-10 ----------
   Date + heure : une grille à 2 colonnes, mêmes hauteurs (avant : la date en inline, l'heure non → décalées).
   Line-up : noms plus petits et alignés sur l'heure ; le champ « Rechercher un·e artiste » prend toute la largeur. */
#creer-un-evenement form .form-date,
#aside-ajouter-un-artiste form .form-date { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 10px; align-items: center; }
#creer-un-evenement form .form-date input,
#aside-ajouter-un-artiste form .form-date input { width: 100% !important; height: 46px; margin: 0 !important; box-sizing: border-box; display: block !important; }
#creer-un-evenement form .form-date .form-description,
#aside-ajouter-un-artiste form .form-date .form-description { grid-column: 1 / -1; margin: 0 0 14px; }

#creer-un-evenement #DspCCLArtistes table { width: 100%; border-collapse: separate; border-spacing: 0 6px; }
#creer-un-evenement #DspCCLArtistes td { vertical-align: middle !important; padding: 0 8px 0 0; }
#creer-un-evenement #DspCCLArtistes td:first-child { width: 30px; }
#creer-un-evenement #DspCCLArtistes td:nth-child(2) { width: 116px; }
#creer-un-evenement #DspCCLArtistes .DspBoutCroix { font-size: 15px; cursor: pointer; }
#creer-un-evenement #DspCCLArtistes input[type="time"] { width: 108px !important; height: 42px; margin: 0 !important; padding: 6px 8px !important; box-sizing: border-box; }
#creer-un-evenement #DspCCLArtistes td:last-child span { font-size: 15px; line-height: 1.3; letter-spacing: .01em; }
#creer-un-evenement #DspCCLArtistes td:last-child span span { font-size: 13px; }

#creer-un-evenement form .form-lineup-artiste input,
#aside-ajouter-un-artiste form .form-lineup-artiste input { width: 100% !important; margin: 0 !important; display: block !important; box-sizing: border-box; }
#creer-un-evenement form .form-lineup-artiste #ajouter-artiste { margin-top: 8px !important; }

/* (2026-11-10) En-tête des pages artiste et événement : le nom prend toute la largeur (à gauche),
   « suivi par N … » / « vu N fois » juste en dessous, à droite, sur une seule ligne
   (avant : deux colonnes côte à côte → le compteur se coupait en deux lignes au milieu de la photo) */
#EventHeaderCont:has(> .DspResp + #DivHeart2) { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto auto; align-items: end; }
#EventHeaderCont > .DspResp, #EventHeaderCont > #DivHeart2 { flex: 0 0 100%; max-width: 100%; width: 100%; }
#EventHeaderCont:has(> .DspResp + #DivHeart2) > .article-boutons { align-self: start; }
#EventHeaderCont > .DspResp .big-title { margin-bottom: 4px !important; text-align: left; }
#EventHeaderCont > #DivHeart2 .nbre-vues { display: block; white-space: nowrap; text-align: right; line-height: 1.4; }
@media (max-width: 767px) { /* (2026-11-10) titre + « vu x fois » posés en bas du visuel */
	.evenement-hero:has(> #EventHeaderCont) { display: flex; flex-direction: column; }
	.evenement-hero > #EventHeaderCont { flex: 1 1 auto; padding-bottom: 10px; }
}
/* (2026-11-10) bloc « Contacts et médias » d'un événement : un site qui n'est pas un réseau connu (salle, billetterie…)
   s'affiche en pastille icône + nom (« Botanique ») au lieu d'un globe gris anonyme — php/cclive-evenements.php */
.evenement-liens ul.liens li.ccl-lien-site { display: inline-flex; align-items: center; gap: 8px; margin: 0 8px 8px 0; padding: 6px 14px 6px 8px !important; border: 1px solid #d6d6d6; border-radius: 999px; background: #fff; vertical-align: middle; transition: border-color .15s; }
.evenement-liens ul.liens li.ccl-lien-site::after { content: none; }
.evenement-liens ul.liens li.ccl-lien-site img { width: 20px; height: 20px; filter: none; border-radius: 4px; }
.evenement-liens ul.liens li.ccl-lien-site span { color: #000; font-family: 'GT Walsheim bold', sans-serif; font-size: 14px; line-height: 1.2; }
.evenement-liens ul.liens a:hover li.ccl-lien-site, .evenement-liens ul.liens a:focus-visible li.ccl-lien-site { border-color: #ED5E5E; }
/* (2026-11-10) icônes du bloc « À propos » (i, #, horloge, lieu, e-mail) : elles étaient accrochées à « .evenement-a-propos > div:after »,
   mais les lignes sont maintenant un niveau plus bas (dans un div intermédiaire) : plus de content, donc plus d'icône,
   et le texte restait décalé à droite pour rien. Icône à gauche, texte 32 px plus loin, ordinateur et téléphone. */
.evenement-a-propos [class^="evenement-a-propos--"]:not(.evenement-a-propos--map) { position: relative; padding-left: 32px; }
.evenement-a-propos [class^="evenement-a-propos--"]:not(.evenement-a-propos--map)::after { content: ''; display: block; position: absolute; top: 0; left: 0; width: 20px; height: 20px; background-size: contain; background-repeat: no-repeat; background-position: center; }
.og-apropos [class^="evenement-a-propos--"]::after { content: none !important; }
/* (2026-11-10) PAGE ÉVÉNEMENT SUR TÉLÉPHONE : UNE SEULE LIGNE VERTICALE À 28 PX, À GAUCHE ET À DROITE
   (flèche retour, titre, « vu x fois », cœur, lieu, date, titres des blocs « Line-up », « À propos »…, cartes).
   Avant : 40 px en haut, 48 px pour le lieu et la date, 28 ou 32 px dans les blocs blancs. Blocs blancs : 12 px du bord + 16 px dedans. */
@media (max-width: 767px) {
	#EventHeaderCont > .article-boutons, #EventHeaderCont > .DspResp { padding-left: 28px !important; padding-right: 28px !important; }
	#EventHeaderCont > #DivHeart2 { padding-right: 28px !important; }
	section.evenement-infos > .row { padding-left: 8px !important; padding-right: 8px !important; }
	:is(.page-evenement, .evenement-main-mobile, .artiste-main-mobile) .home-main--section:not([style*="padding: 20px 0 0 0"]) { padding-left: 16px !important; padding-right: 16px !important; }
	:is(.page-evenement, .evenement-main-mobile, .artiste-main-mobile) .home-main--section .evenement-a-propos--map { width: calc(100% + 32px); margin-left: -16px; }
	/* (2026-11-13) la ligne des titres va jusqu'au bord droit du bloc, comme sur ordinateur (avant : 16 px avant le bord) */
	:is(.page-evenement, .evenement-main-mobile, .artiste-main-mobile) .home-main--section:not([style*="padding: 20px 0 0 0"]) h2.titre-ligne-v2 { margin-right: -16px !important; }
}

/* (2026-11-10) Cartes de concerts (.ccl-ev) sur téléphone : sans le flyer (talon rouge + texte sur toute la largeur).
   Avec le flyer, le titre, les artistes et le lieu étaient coupés à 3-4 lettres par ligne → on ne comprenait plus l'événement. */
@media (max-width: 575px) {
	.ccl-ev-img { display: none; }
	.ccl-ev-infos { padding: 10px 12px; }
}

/* (2026-11-11, demande de Nicolas) Logo de la salle dans l'en-tête de sa page, sur téléphone : plus petit, dans le coin en bas à droite */
@media (max-width: 767px) {
	section.organisateur-hero { position: relative; }
	section.organisateur-hero .row > .col-4 { position: static; }
	section.organisateur-hero .organisateur-avatar { position: absolute; right: 16px; bottom: 16px; width: 56px !important; height: 56px !important; float: none !important; border-radius: 50% !important; box-shadow: 0 2px 10px rgba(0, 0, 0, .45); z-index: 2; }
	section.organisateur-hero .organisateur-avatar { overflow: hidden !important; }
	section.organisateur-hero .organisateur-avatar img { display: block; width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 50% !important; }   /* (la balise img a style="width: 81px; height: 81px") */
	/* (2026-11-11) nom en bas à gauche du hero (Nicolas : laisser voir la photo), à côté de l'avatar en bas à droite */
	section.organisateur-hero #OrgaTitre { position: absolute; left: 16px; top: auto; bottom: 16px; transform: none; width: auto; max-width: calc(100% - 104px); flex: none; padding: 10px 16px 12px !important; border-radius: 12px; background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); z-index: 1; }
	section.organisateur-hero #OrgaTitre .big-title { margin: 0; }
	/* « S'y rendre » et « Suivi par… » chacun centré dans sa moitié de la bande grise */
	section.organisateur-infos { padding-left: 0 !important; padding-right: 0 !important; }
	section.organisateur-infos > .row { margin: 0; padding: 0 !important; }
	section.organisateur-infos > .row > .col-6 { padding: 0 8px !important; text-align: center; }
	/* « Suivi par 20 utilisateurs » : centré dans sa moitié (style.css le collait à droite → il sortait de l'écran avec une police agrandie) */
	section.organisateur-infos #DivHeart3 { padding-right: 8px !important; }   /* (style.css : #DivHeart3 { padding-right: 0 !important }) */
	section.organisateur-infos #DivHeart3 .nbre-vues { text-align: center !important; width: auto !important; max-width: 100%; margin: 0 auto; overflow-wrap: anywhere; }
}

/* (2026-11-11) Orga sans adresse : pas de « S'y rendre », « Suivi par… » seul → une seule couleur (pas la bande coupée en deux), texte centré */
section.organisateur-infos:has(> .row > #DivHeart3.col-12) { background: #EAEAEA !important; }
section.organisateur-infos > .row > #DivHeart3.col-12 { text-align: center; }
section.organisateur-infos > .row > #DivHeart3.col-12 .nbre-vues { margin-left: auto; margin-right: auto; text-align: center; }

/* (2026-11-11) Nom de l'artiste dans l'en-tête de sa page CCL, sur téléphone : comme les salles (FrancoFaune),
   au milieu de la photo sur un fond sombre transparent ; « Suivi par X » / « utilisateurs » sur deux lignes.
   (CCB a sa propre mise en page du hero sur téléphone : php/ccband-mobile.css) */
@media (max-width: 767px) {
	#page-artiste.ccl-artiste section.artiste-hero { position: relative; }
	/* (2026-11-11) nom en bas à gauche du hero (laisser voir la photo), à côté du « suivi par » en bas à droite */
	#page-artiste.ccl-artiste section.artiste-hero .col-8.DspResp { position: absolute; left: 16px; top: auto; bottom: 16px; transform: none; width: auto !important; max-width: calc(100% - 150px) !important; flex: none; padding: 10px 16px 12px !important; border-radius: 12px; background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); z-index: 1; }
	#page-artiste.ccl-artiste section.artiste-hero .col-8.DspResp .big-title { width: auto !important; margin: 0 !important; padding: 0 !important; overflow-wrap: anywhere; }
	#page-artiste.ccl-artiste section.artiste-hero .nbre-vues span::after { content: "\A"; white-space: pre; }   /* retour à la ligne après le nombre */
	#page-artiste.ccl-artiste section.artiste-hero #DivHeart2 { position: static; }   /* « suivi par » : dans le coin en bas à droite du hero */
	#page-artiste.ccl-artiste section.artiste-hero .nbre-vues { position: absolute; right: 12px; bottom: 12px; width: auto !important; max-width: 50%; margin: 0 !important; padding: 6px 10px !important; border-radius: 10px; background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); text-align: right; line-height: 1.35; z-index: 1; }
}