/*
/// Radio Pornic - CARTES PLEINE LARGEUR PC + MOBILE
*/

#nptable {
	padding: 0;
	margin: 20px auto;
	width: 100% !important;
	border: none !important;
	background: transparent !important;
}

#nptable thead { display: none; }

#nptable, #nptable tbody {
	display: block !important;
	width: 100% !important;
}

#nptable tr {
	display: block;
	width: 100% !important;
	box-sizing: border-box;
	background: #fff !important;
	border: 1px solid #e0e0e0 !important;
	border-radius: 8px !important;
	padding: 15px 18px !important;
	margin-bottom: 12px !important;
	box-shadow: 0 2px 6px rgba(0,0,0,0.05);
	position: relative;
}
#nptable tr:hover { border-color: #e60000 !important; }

#nptable td, #nptable th.position {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	width: 100% !important;
	border: none !important;
	padding: 7px 0 !important;
	text-align: left !important;
}

/* Bulle rouge en bas à droite */
#nptable th.position {
	position: absolute !important;
	bottom: 14px !important;
	right: 14px !important;
	top: auto !important;
	width: 32px !important;
	height: 32px !important;
	background: #e60000 !important;
	color: #fff !important;
	border-radius: 50% !important;
	justify-content: center !important;
	font-size: 13px !important;
	font-weight: 800 !important;
	z-index: 2;
}

#nptable td::before {
	font-weight: 800;
	text-transform: uppercase;
	font-size: 11px;
	color: #6b8aa8;
	flex-shrink: 0;
	margin-right: 10px;
}
#nptable td.artist::before { content: "ARTISTE"; }
#nptable td.title::before { content: "TITRE"; }
#nptable td.duration::before { content: "DURÉE"; }
#nptable td.request-col::before { content: "DEMANDE"; }

#nptable td.artist { font-weight: 700 !important; font-size: 16px !important; color: #111 !important; }
#nptable td.title { color: #555 !important; }
#nptable td.duration { font-weight: 700 !important; color: #e60000 !important; }

#nptable td.request-col {
	border-top: 1px solid #f0f0f0 !important;
	margin-top: 10px !important;
	padding-top: 12px !important;
}
#nptable td.request-col a {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 38px !important;
	height: 38px !important;
	background: #eef7ee;
	border-radius: 50%;
}
#nptable td.request-col img { width: 18px !important; height: 18px !important; }

/* Recherche pleine largeur */
.searchbox { padding: 20px; margin: 15px 0; background: #f9f9f9; border: 1px solid #eee; border-radius: 6px; width: 100%; box-sizing: border-box; }
#rdj_searchform fieldset { border: none; padding: 0; }
#rdj_searchform input[type="text"] { width: 100% !important; height: 52px !important; border: 1px solid #ddd !important; border-radius: 4px !important; padding: 0 15px !important; font-size: 16px !important; box-sizing: border-box; }
#rdj_searchform input[type="submit"] { background: #e60000 !important; color: #fff !important; border: none !important; text-transform: uppercase !important; font-weight: 800 !important; padding: 0 28px !important; border-radius: 4px !important; cursor: pointer !important; margin-top: 12px !important; width: 100% !important; height: 50px !important; }
#rdj_searchform input[type="submit"]:hover { background: #000 !important; }

/* Pagination */
.paginate { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; justify-content: center !important; padding: 20px 0 !important; }
.paginate a, .paginate .current, .paginate .disabled { min-width: 36px; height: 36px; display: inline-flex !important; align-items: center !important; justify-content: center !important; border: 1px solid #ddd; border-radius: 4px; }
.paginate .current { background: #e60000; color: #fff; border-color: #e60000; }
.paginate a:hover { background: #e60000; color: #fff; border-color: #e60000; }
/* FIX CROIX VERTE ÉCRASÉE PC + MOBILE */
#nptable td.request-col a {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 38px !important;
	height: 38px !important;
	min-width: 38px !important;
	min-height: 38px !important;
	background: #eef7ee !important;
	border-radius: 50% !important;
	flex-shrink: 0 !important;
	text-decoration: none !important;
}
#nptable td.request-col a:hover {
	background: #d4eed4 !important;
}
#nptable td.request-col img {
	width: 20px !important;
	height: 20px !important;
	min-width: 20px !important;
	min-height: 20px !important;
	object-fit: contain !important;
	display: block !important;
	flex-shrink: 0 !important;
	aspect-ratio: 1/1 !important;
}

/* FIX FORMULAIRE RECHERCHE - Bande rouge + fieldset */
.request-form {
	background: #f5f3f0 !important;
	border-radius: 6px !important;
	overflow: hidden !important;
}
.request-form fieldset {
	border: 1px solid #ddd !important;
	padding: 20px !important;
	margin: 0 !important;
	background: #fdfaf8 !important;
}
.request-form fieldset legend,
.request-form > p,
.searchbox > p {
	display: block !important;
	width: 100% !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	font-size: 13px !important;
	letter-spacing: 0.5px !important;
	color: #111 !important;
	margin-bottom: 15px !important;
	padding: 0 !important;
	border: none !important;
}
#rdj_searchform {
	width: 100% !important;
}
#rdj_searchform label {
	font-size: 11px !important;
	font-weight: 700 !important;
	color: #6b8aa8 !important;
	margin-bottom: 6px !important;
}
/* === VINYLE + POCHETTE - Radio Pornic === */
#nptable tr {
	padding-left: 75px!important;
	min-height: 75px;
}

#nptable tr::before {
	content: "";
	position: absolute;
	left: 15px;
	top: 20px;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background:
		radial-gradient(circle at center, #fff 0 3px, #e60000 4px 5px, #111 6px 100%),
		repeating-radial-gradient(circle at center, #222 0 2px, #111 3px 4px);
	box-shadow: 0 2px 4px rgba(0,0,0,0.2), inset 0 0 0 2px #000;
	flex-shrink: 0;
	z-index: 1;
	animation: spin-vinyle 4s linear infinite;
	animation-play-state: paused;
}
#nptable tr:hover::before {
	animation-play-state: running;
}

#nptable tr.has-cover::before {
	display: none;
}
#nptable tr.rdj-cover {
	position: absolute;
	left: 15px;
	top: 20px;
	width: 50px;
	height: 50px;
	border-radius: 4px;
	object-fit: cover;
	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
	z-index: 2;
	background: #111;
}

@keyframes spin-vinyle {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}