/**
 * Custom Heading Block Styles - Bullet Points
 * Styles pour les puces sur les blocs Heading (Titre)
 */

/* Style de base pour tous les titres avec puces */
.wp-block-heading.is-style-bullet-round,
.wp-block-heading.is-style-bullet-square,
.wp-block-heading.is-style-bullet-diamond,
.wp-block-heading.is-style-bullet-arrow,
.wp-block-heading.is-style-bullet-star {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	position: relative;
}

/* Puce ronde */
.wp-block-heading.is-style-bullet-round::before {
	content: '';
	width: 12px;
	height: 12px;
	background: linear-gradient(135deg, #3182ce 0%, #805ad5 100%);
	border-radius: 50%;
	flex-shrink: 0;
}

/* Adaptation de la taille pour les différents niveaux de titre */
.wp-block-heading.is-style-bullet-round h1::before,
.wp-block-heading.is-style-bullet-round.has-xx-large-font-size::before {
	width: 16px;
	height: 16px;
}

.wp-block-heading.is-style-bullet-round h2::before,
.wp-block-heading.is-style-bullet-round.has-x-large-font-size::before {
	width: 14px;
	height: 14px;
}

.wp-block-heading.is-style-bullet-round h3::before,
.wp-block-heading.is-style-bullet-round.has-large-font-size::before {
	width: 12px;
	height: 12px;
}

.wp-block-heading.is-style-bullet-round h4::before,
.wp-block-heading.is-style-bullet-round h5::before,
.wp-block-heading.is-style-bullet-round h6::before {
	width: 10px;
	height: 10px;
}

/* Puce carrée */
.wp-block-heading.is-style-bullet-square::before {
	content: '';
	width: 13px;
	height: 13px;
	background: #797979;
	border-radius: 3px;
	flex-shrink: 0;
    align-self: flex-start;
    margin-top: clamp(2px,0.3vw,6px);
}

/* Adaptation de la taille pour puce carrée */
.wp-block-heading.is-style-bullet-square h1::before,
.wp-block-heading.is-style-bullet-square.has-xx-large-font-size::before {
	width: 16px;
	height: 16px;
}

.wp-block-heading.is-style-bullet-square h2::before,
.wp-block-heading.is-style-bullet-square.has-x-large-font-size::before {
	width: 14px;
	height: 14px;
}

.wp-block-heading.is-style-bullet-square h3::before,
.wp-block-heading.is-style-bullet-square.has-large-font-size::before {
	width: 12px;
	height: 12px;
}

.wp-block-heading.is-style-bullet-square h4::before,
.wp-block-heading.is-style-bullet-square h5::before,
.wp-block-heading.is-style-bullet-square h6::before {
	width: 10px;
	height: 10px;
}

/* Puce diamant */
.wp-block-heading.is-style-bullet-diamond::before {
	content: '';
	width: 12px;
	height: 12px;
	background: linear-gradient(135deg, #38a169 0%, #48bb78 100%);
	transform: rotate(45deg);
	flex-shrink: 0;
	box-shadow: 0 2px 4px rgba(56, 161, 105, 0.3);
}

/* Adaptation de la taille pour puce diamant */
.wp-block-heading.is-style-bullet-diamond h1::before,
.wp-block-heading.is-style-bullet-diamond.has-xx-large-font-size::before {
	width: 16px;
	height: 16px;
}

.wp-block-heading.is-style-bullet-diamond h2::before,
.wp-block-heading.is-style-bullet-diamond.has-x-large-font-size::before {
	width: 14px;
	height: 14px;
}

.wp-block-heading.is-style-bullet-diamond h3::before,
.wp-block-heading.is-style-bullet-diamond.has-large-font-size::before {
	width: 12px;
	height: 12px;
}

.wp-block-heading.is-style-bullet-diamond h4::before,
.wp-block-heading.is-style-bullet-diamond h5::before,
.wp-block-heading.is-style-bullet-diamond h6::before {
	width: 10px;
	height: 10px;
}

/* Puce flèche */
.wp-block-heading.is-style-bullet-arrow::before {
	content: '▶';
	color: #805ad5;
	font-size: 0.8em;
	flex-shrink: 0;
	text-shadow: 0 1px 2px rgba(128, 90, 213, 0.3);
}

/* Adaptation de la taille pour puce flèche */
.wp-block-heading.is-style-bullet-arrow h1::before,
.wp-block-heading.is-style-bullet-arrow.has-xx-large-font-size::before {
	font-size: 1em;
}

.wp-block-heading.is-style-bullet-arrow h2::before,
.wp-block-heading.is-style-bullet-arrow.has-x-large-font-size::before {
	font-size: 0.9em;
}

.wp-block-heading.is-style-bullet-arrow h3::before,
.wp-block-heading.is-style-bullet-arrow.has-large-font-size::before {
	font-size: 0.8em;
}

.wp-block-heading.is-style-bullet-arrow h4::before,
.wp-block-heading.is-style-bullet-arrow h5::before,
.wp-block-heading.is-style-bullet-arrow h6::before {
	font-size: 0.7em;
}

/* Puce étoile */
.wp-block-heading.is-style-bullet-star::before {
	content: '★';
	color: #ffd700;
	font-size: 0.9em;
	flex-shrink: 0;
	text-shadow: 0 1px 2px rgba(255, 215, 0, 0.5);
}

/* Adaptation de la taille pour puce étoile */
.wp-block-heading.is-style-bullet-star h1::before,
.wp-block-heading.is-style-bullet-star.has-xx-large-font-size::before {
	font-size: 1.1em;
}

.wp-block-heading.is-style-bullet-star h2::before,
.wp-block-heading.is-style-bullet-star.has-x-large-font-size::before {
	font-size: 1em;
}

.wp-block-heading.is-style-bullet-star h3::before,
.wp-block-heading.is-style-bullet-star.has-large-font-size::before {
	font-size: 0.9em;
}

.wp-block-heading.is-style-bullet-star h4::before,
.wp-block-heading.is-style-bullet-star h5::before,
.wp-block-heading.is-style-bullet-star h6::before {
	font-size: 0.8em;
}

/* Effets d'animation au survol */
.wp-block-heading.is-style-bullet-round:hover::before,
.wp-block-heading.is-style-bullet-square:hover::before,
.wp-block-heading.is-style-bullet-diamond:hover::before {
	transform: scale(1.1);
	transition: transform 0.2s ease;
}

.wp-block-heading.is-style-bullet-diamond:hover::before {
	transform: rotate(45deg) scale(1.1);
}

.wp-block-heading.is-style-bullet-arrow:hover::before,
.wp-block-heading.is-style-bullet-star:hover::before {
	transform: scale(1.1);
	transition: transform 0.2s ease;
}

/* Animation de rotation pour l'étoile */
.wp-block-heading.is-style-bullet-star::before {
	animation: star-twinkle 2s ease-in-out infinite;
}

@keyframes star-twinkle {
	0%, 100% {
		opacity: 1;
		transform: scale(1);
	}
	50% {
		opacity: 0.8;
		transform: scale(1.05);
	}
}

/* Styles responsifs */
@media (max-width: 768px) {
	.wp-block-heading.is-style-bullet-round,
	.wp-block-heading.is-style-bullet-square,
	.wp-block-heading.is-style-bullet-diamond,
	.wp-block-heading.is-style-bullet-arrow,
	.wp-block-heading.is-style-bullet-star {
		gap: 0.5rem;
	}
	
	.wp-block-heading.is-style-bullet-round::before,
	.wp-block-heading.is-style-bullet-square::before,
	.wp-block-heading.is-style-bullet-diamond::before {
		width: 10px;
		height: 10px;
	}
	
	.wp-block-heading.is-style-bullet-arrow::before,
	.wp-block-heading.is-style-bullet-star::before {
		font-size: 0.7em;
	}
}

/* Alignement pour les titres centrés */
.wp-block-heading.is-style-bullet-round.has-text-align-center,
.wp-block-heading.is-style-bullet-square.has-text-align-center,
.wp-block-heading.is-style-bullet-diamond.has-text-align-center,
.wp-block-heading.is-style-bullet-arrow.has-text-align-center,
.wp-block-heading.is-style-bullet-star.has-text-align-center {
	justify-content: center;
}

/* Alignement pour les titres à droite */
.wp-block-heading.is-style-bullet-round.has-text-align-right,
.wp-block-heading.is-style-bullet-square.has-text-align-right,
.wp-block-heading.is-style-bullet-diamond.has-text-align-right,
.wp-block-heading.is-style-bullet-arrow.has-text-align-right,
.wp-block-heading.is-style-bullet-star.has-text-align-right {
	justify-content: flex-end;
	flex-direction: row-reverse;
}

/* Couleurs alternatives pour différents contextes */
.wp-block-heading.is-style-bullet-round.has-primary-color::before {
	background: currentColor;
}

.wp-block-heading.is-style-bullet-square.has-secondary-color::before {
	background: currentColor;
}

.wp-block-heading.is-style-bullet-diamond.has-accent-color::before {
	background: currentColor;
}