/**
 * CMEDIA Theme Switcher — radial GTA-style
 * À uploader dans : /wp-content/themes/cmedia-gp-child/theme-switcher.css
 */

/* ============================================================
   CONTAINER en bas à gauche, position fixed
   ============================================================ */
.cm-theme-switcher {
	position: fixed;
	bottom: 20px;
	left: 20px;
	z-index: 9998;
	width: 50px;
	height: 50px;
	transition: width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
	            height 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cm-theme-switcher.is-open {
	width: 280px;
	height: 280px;
}

/* Mobile : un peu plus petit */
@media (max-width: 768px) {
	.cm-theme-switcher {
		bottom: 14px;
		left: 14px;
		width: 44px;
		height: 44px;
	}
	.cm-theme-switcher.is-open {
		width: 240px;
		height: 240px;
	}
}

/* ============================================================
   Bouton compact (cercle 50px replié)
   ============================================================ */
.cm-theme-trigger {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	cursor: pointer;
	border: 2px solid rgba(255, 255, 255, 0.2);
	background: #0D0D1C;
	overflow: hidden;
	transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.cm-theme-trigger:hover {
	transform: scale(1.08) rotate(15deg);
	border-color: rgba(255, 255, 255, 0.4);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
}

.cm-theme-switcher.is-open .cm-theme-trigger {
	transform: scale(1.05);
	box-shadow: 0 0 40px rgba(255, 92, 0, 0.4);
}

/* SVG du bouton compact : 5 quartiers de couleur */
.cm-theme-trigger svg {
	width: 100%;
	height: 100%;
	display: block;
	transition: transform 0.4s ease;
}

.cm-theme-switcher.is-open .cm-theme-trigger svg {
	transform: rotate(36deg);
}

/* ============================================================
   Roue radiale (visible quand .is-open)
   ============================================================ */
.cm-theme-wheel {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 280px;
	height: 280px;
	margin-left: -140px;
	margin-top: -140px;
	pointer-events: none;
	opacity: 0;
	transform: scale(0.3);
	transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (max-width: 768px) {
	.cm-theme-wheel {
		width: 240px;
		height: 240px;
		margin-left: -120px;
		margin-top: -120px;
	}
}

.cm-theme-switcher.is-open .cm-theme-wheel {
	pointer-events: auto;
	opacity: 1;
	transform: scale(1);
}

.cm-theme-wheel svg {
	width: 100%;
	height: 100%;
	filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.6));
}

/* Chaque quartier */
.cm-theme-slice {
	cursor: pointer;
	transition: filter 0.2s ease, transform 0.2s ease;
	transform-origin: center;
}

.cm-theme-slice:hover {
	filter: brightness(1.25) saturate(1.2);
}

.cm-theme-slice.is-active {
	filter: brightness(1.15) saturate(1.4);
}

/* Centre de la roue : label dynamique */
.cm-theme-center {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 90px;
	height: 90px;
	margin-left: -45px;
	margin-top: -45px;
	border-radius: 50%;
	background: #0D0D1C;
	border: 2px solid rgba(255, 255, 255, 0.15);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 4px;
	box-sizing: border-box;
	pointer-events: none;
	z-index: 2;
}

@media (max-width: 768px) {
	.cm-theme-center {
		width: 76px;
		height: 76px;
		margin-left: -38px;
		margin-top: -38px;
	}
}

.cm-theme-center-label {
	font-family: 'Fira Code', monospace;
	font-size: 10px;
	color: rgba(255, 255, 255, 0.4);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1;
}

.cm-theme-center-name {
	font-family: 'Russo One', sans-serif;
	font-size: 13px;
	color: #ffffff;
	margin-top: 4px;
	line-height: 1.1;
	text-align: center;
	letter-spacing: 0.02em;
}

@media (max-width: 768px) {
	.cm-theme-center-name {
		font-size: 11px;
	}
}

/* ============================================================
   Backdrop : zone cliquable autour qui ferme la roue
   ============================================================ */
.cm-theme-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0);
	z-index: 9997;
	pointer-events: none;
	transition: background 0.3s ease;
}

.cm-theme-switcher.is-open ~ .cm-theme-backdrop {
	background: rgba(0, 0, 0, 0.3);
	pointer-events: auto;
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

/* ============================================================
   Pulse subtile sur le bouton compact pour signaler
   ============================================================ */
@keyframes cm-theme-pulse {
	0%, 100% { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); }
	50%      { box-shadow: 0 4px 24px rgba(255, 92, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.4); }
}

.cm-theme-trigger:not(:hover) {
	animation: cm-theme-pulse 4s ease-in-out infinite;
}

/* Cache l'animation quand l'utilisateur a déjà choisi un thème */
.cm-theme-switcher[data-touched="true"] .cm-theme-trigger:not(:hover) {
	animation: none;
}

/* Avec admin bar */
body.admin-bar .cm-theme-switcher {
	bottom: 20px; /* reste en bas */
}