/* === SUPER BOUTON ETPE (centré + stylé) === */
.etpe-bouton-centre {
	display: flex !important;
	justify-content: center !important;
	width: 100%;
}

/* Bouton */
a.btn-unique-alban {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 18px 42px !important;
	background: linear-gradient(135deg, #0057b8, #f5c400) !important;
	color: #ffffff !important;
	font-size: 18px !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	letter-spacing: 1px !important;
	border-radius: 999px !important;
	text-decoration: none !important;
	border: none !important;
	box-shadow: 0 16px 40px rgba(0, 87, 184, 0.45) !important;
	transition: all .3s ease !important;
}

/* Hover */
a.btn-unique-alban:hover {
	transform: translateY(-4px) scale(1.05) !important;
	box-shadow: 0 26px 60px rgba(245, 196, 0, 0.55) !important;
	background: linear-gradient(135deg, #f5c400, #0057b8) !important;
	color: #ffffff !important;
}

/* Miniature dans le bouton */
a.btn-unique-alban {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 12px;
/* espace entre l'image et le texte */
}

/* Taille de l'image */
a.btn-unique-alban .btn-miniature {
	width: 36px;
/* ajuste selon ton image */
	height: 36px;
	object-fit: cover;
	border-radius: 6px;
}

/* Centrage du bouton */
.btn-cancer-centre {
	display: flex !important;
	justify-content: center !important;
	width: 100%;
	margin-top: 20px;
/* espace avec les autres boutons */
}

/* Bouton bleu → rose */
a.btn-cancer {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 12px;
/* espace icône / texte */
	padding: 18px 42px !important;
	font-size: 18px !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	letter-spacing: 1px !important;
	background: linear-gradient(135deg, #1e90ff, #ff69b4) !important;
/* bleu → rose */
	color: #ffffff !important;
	border-radius: 999px !important;
	text-decoration: none !important;
	border: none !important;
	box-shadow: 0 16px 40px rgba(30,144,255,0.45) !important;
	transition: all .3s ease !important;
/* Animation pulse douce */
	animation: pulseBtn 2.5s infinite alternate;
}

/* Hover dynamique */
a.btn-cancer:hover {
	transform: translateY(-4px) scale(1.05) !important;
	background: linear-gradient(135deg, #ff69b4, #1e90ff) !important;
	box-shadow: 0 26px 60px rgba(255,105,180,0.55) !important;
	color: #ffffff !important;
}

/* Icône */
.btn-icon {
	font-size: 22px;
}

/* Pulse animation */
@keyframes pulseBtn {
	0% {
		transform: scale(1);
	}
	
	50% {
		transform: scale(1.03);
	}
	
	100% {
		transform: scale(1);
	}
}

/* Barre flottante en haut */
.top-btn-bar {
	position: fixed;
	top: 10px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 20px;
	background: rgba(255,255,255,0.95);
	padding: 10px 20px;
	border-radius: 50px;
	z-index: 9999;
	box-shadow: 0 6px 25px rgba(0,0,0,0.15);
	flex-wrap: wrap;
}

/* Super bouton ETPE */
a.btn-unique-alban {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 18px 42px;
	font-size: 18px;
	font-weight: 800;
	text-transform: uppercase;
	color: #fff;
	background: linear-gradient(135deg, #0057b8, #f5c400);
	border-radius: 999px;
	text-decoration: none;
	box-shadow: 0 16px 40px rgba(0,87,184,0.45);
	transition: all .3s ease;
}

a.btn-unique-alban:hover {
	transform: translateY(-4px) scale(1.05);
	background: linear-gradient(135deg, #f5c400, #0057b8);
	box-shadow: 0 26px 60px rgba(245,196,0,0.55);
}

/* Super bouton Cancer du Sein */
a.btn-cancer {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 18px 42px;
	font-size: 18px;
	font-weight: 800;
	text-transform: uppercase;
	color: #fff;
	background: linear-gradient(135deg, #1e90ff, #ff69b4);
	border-radius: 999px;
	text-decoration: none;
	box-shadow: 0 16px 40px rgba(30,144,255,0.45);
	transition: all .3s ease;
	animation: pulseBtn 2.5s infinite alternate;
}

a.btn-cancer:hover {
	transform: translateY(-4px) scale(1.05);
	background: linear-gradient(135deg, #ff69b4, #1e90ff);
	box-shadow: 0 26px 60px rgba(255,105,180,0.55);
}

/* Pulse animation */
@keyframes pulseBtn {
	0% {
		transform: scale(1);
	}
	
	50% {
		transform: scale(1.03);
	}
	
	100% {
		transform: scale(1);
	}
}

/* Responsive : réduire taille sur mobile */
@media (max-width:768px) {
	.top-btn-bar {
		flex-direction: column;
		top: 5px;
		padding: 8px 12px;
	}
	
	a.btn-unique-alban, a.btn-cancer {
		padding: 14px 28px;
		font-size: 16px;
	}
}

/* Titre du site stylé */
h1.site-title {
	font-size: 48px;
/* taille du titre */
	font-weight: 900;
/* bien gras */
	text-transform: uppercase;
	background: linear-gradient(90deg, #0057b8, #f5c400, #ff69b4);
	-webkit-background-clip: text;
	text-align: center;
	margin: 20px 0;
	letter-spacing: 2px;
	text-shadow: 2px 2px 8px rgba(0,0,0,0.25);
	animation: gradientShift 5s ease infinite;
}

/* Animation dégradé */
@keyframes gradientShift {
	0% {
		background-position: 0 50%;
	}
	
	50% {
		background-position: 100% 50%;
	}
	
	100% {
		background-position: 0 50%;
	}
}

h1.site-title {
	background-size: 200% 200%;
}

/* Titre du site stylé ETPE + Cancer du Sein */
h1 {
	font-size: 48px !important;
/* Taille */
	font-weight: 900 !important;
/* Gras */
	text-transform: uppercase !important;
	text-align: center !important;
	letter-spacing: 2px !important;
/* Dégradé bleu → jaune → rose */
	background: linear-gradient(90deg, #0057b8, #f5c400, #ff69b4) !important;
	-webkit-background-clip: text !important;
/* Ombre / relief */
	text-shadow: 2px 2px 8px rgba(0,0,0,0.25) !important;
/* Animation dégradé */
	background-size: 200% 200% !important;
	animation: gradientShift 5s ease infinite !important;
}

/* Animation du dégradé */
@keyframes gradientShift {
	0% {
		background-position: 0 50%;
	}
	
	50% {
		background-position: 100% 50%;
	}
	
	100% {
		background-position: 0 50%;
	}
}

/* TITRE VISUEL IMPACTANT POUR LE CLUB */
h1 {
	font-size: 3rem !important;
	font-weight: 900 !important;
	text-align: center !important;
	text-transform: uppercase !important;
	margin-bottom: .3em !important;
/* Fond dégradé bleu → jaune → rose */
	background: linear-gradient(90deg, #0057b8, #f5c400, #ff69b4) !important;
	-webkit-background-clip: text !important;
/* Ombre pour relief */
	text-shadow: 3px 3px 12px rgba(0, 0, 0, 0.35) !important;
/* Animation du gradient */
	background-size: 300% 300% !important;
	animation: etpeTitleGradient 8s ease infinite !important;
}

/* Animation du dégradé */
@keyframes etpeTitleGradient {
	0% {
		background-position: 0 50%;
	}
	
	50% {
		background-position: 100% 50%;
	}
	
	100% {
		background-position: 0 50%;
	}
}

/* TITRE ANIMÉ PERSONNALISÉ */
.custom-site-title {
	font-size: 3rem;
	font-weight: 900;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 2px;
	padding: 10px 0;
/* Dégradé bleu → jaune → rose */
	background: linear-gradient(90deg, #0057b8, #f5c400, #ff69b4);
	-webkit-background-clip: text;
/* Ombre pour relief */
	text-shadow: 3px 3px 12px rgba(0,0,0,0.35);
/* Animation du gradient */
	background-size: 300% 300%;
	animation: customTitleGradient 8s ease infinite;
}

/* Animation du dégradé */
@keyframes customTitleGradient {
	0% {
		background-position: 0 50%;
	}
	
	50% {
		background-position: 100% 50%;
	}
	
	100% {
		background-position: 0 50%;
	}
}

/* FORCER STYLE SUR LE TITRE DU SITE */
h1, h1 a {
	font-size: 3rem !important;
	font-weight: 900 !important;
	text-align: center !important;
	text-transform: uppercase !important;
	letter-spacing: 2px !important;
	padding: 10px 0 !important;
/* Dégradé bleu → jaune → rose */
	background: linear-gradient(90deg, #0057b8, #f5c400, #ff69b4) !important;
	-webkit-background-clip: text !important;
/* Ombre pour relief */
	text-shadow: 3px 3px 12px rgba(0,0,0,0.35) !important;
/* Animation du gradient */
	background-size: 300% 300% !important;
	animation: etpeTitleGradient 8s ease infinite !important;
}

@keyframes etpeTitleGradient {
	0% {
		background-position: 0 50%;
	}
	
	50% {
		background-position: 100% 50%;
	}
	
	100% {
		background-position: 0 50%;
	}
}

.super-title {
	font-size: 3rem;
	font-weight: 900;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 2px;
	padding: 20px 0;
/* Dégradé bleu → jaune → rose */
	background: linear-gradient(90deg, #0057b8, #f5c400, #ff69b4);
	-webkit-background-clip: text;
/* Ombre pour relief */
	text-shadow: 3px 3px 12px rgba(0,0,0,0.35);
/* Animation du gradient */
	background-size: 300% 300%;
	animation: superTitleGradient 8s ease infinite;
}

@keyframes superTitleGradient {
	0% {
		background-position: 0 50%;
	}
	
	50% {
		background-position: 100% 50%;
	}
	
	100% {
		background-position: 0 50%;
	}
}

.super-title {
	font-size: 3rem;
	font-weight: 900;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 2px;
	padding: 20px 0;
/* Dégradé bleu → jaune → rose lumineux */
	background: linear-gradient(90deg, #007bff, #ffe600, #ff69b4);
	-webkit-background-clip: text;
/* Ombre légère pour relief mais pas trop sombre */
	text-shadow: 1px 1px 4px rgba(0,0,0,0.15);
/* Animation du gradient */
	background-size: 300% 300%;
	animation: superTitleGradient 8s ease infinite;
}

@keyframes superTitleGradient {
	0% {
		background-position: 0 50%;
	}
	
	50% {
		background-position: 100% 50%;
	}
	
	100% {
		background-position: 0 50%;
	}
}

.super-title {
	font-size: 3rem;
	font-weight: 900;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 2px;
	padding: 20px 0;
/* Dégradé vif bleu → jaune → rose */
	background: linear-gradient(90deg, #007bff, #ffeb3b, #ff69b4);
	-webkit-background-clip: text;
/* Supprimer l’ombre pour visibilité */
	text-shadow: none;
/* Animation du gradient */
	background-size: 300% 300%;
	animation: superTitleGradient 6s ease infinite;
}

/* Animation dégradé */
@keyframes superTitleGradient {
	0% {
		background-position: 0 50%;
	}
	
	50% {
		background-position: 100% 50%;
	}
	
	100% {
		background-position: 0 50%;
	}
}

.super-title {
	font-size: 3rem;
	font-weight: 900;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 2px;
	padding: 20px 0;
/* Dégradé bleu → jaune → rose */
	background: linear-gradient(90deg, #007bff, #ffeb3b, #ff69b4);
	-webkit-background-clip: text;
	color: transparent !important;
/* Ombre légère pour relief */
	text-shadow: 1px 1px 6px rgba(0,0,0,0.15);
/* Animation dégradé + pulse */
	background-size: 300% 300%;
	animation: superTitleGradient 6s ease infinite, superTitlePulse 2.5s ease-in-out infinite alternate;
}

/* Animation du dégradé */
@keyframes superTitleGradient {
	0% {
		background-position: 0 50%;
	}
	
	50% {
		background-position: 100% 50%;
	}
	
	100% {
		background-position: 0 50%;
	}
}

/* Pulse doux (zoom léger) */
@keyframes superTitlePulse {
	0% {
		transform: scale(1);
	}
	
	50% {
		transform: scale(1.03);
	}
	
	100% {
		transform: scale(1);
	}
}

.super-title {
	font-size: 3rem;
	font-weight: 900;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 2px;
	padding: 20px 0;
/* Dégradé bleu → jaune → rose */
	background: linear-gradient(90deg, #007bff, #ffeb3b, #ff69b4);
	-webkit-background-clip: text;
	color: transparent !important;
/* Ombre légère pour relief */
	text-shadow: 1px 1px 6px rgba(0,0,0,0.15);
/* Animation du dégradé + pulse */
	background-size: 300% 300%;
	animation: superTitleGradient 6s ease infinite, superTitlePulse 2.5s ease-in-out infinite alternate;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	text-decoration: none;
/* enlever soulignement du lien */
}

/* Animation du dégradé */
@keyframes superTitleGradient {
	0% {
		background-position: 0 50%;
	}
	
	50% {
		background-position: 100% 50%;
	}
	
	100% {
		background-position: 0 50%;
	}
}

/* Pulse doux */
@keyframes superTitlePulse {
	0% {
		transform: scale(1);
	}
	
	50% {
		transform: scale(1.03);
	}
	
	100% {
		transform: scale(1);
	}
}

.super-title {
	display: block;
/* rendre le lien bloc pour centrer */
	margin: 0 auto;
/* centrer horizontalement */
	font-size: 3rem;
	font-weight: 900;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 2px;
	padding: 20px 0;
/* Dégradé bleu → jaune → rose */
	background: linear-gradient(90deg, #007bff, #ffeb3b, #ff69b4);
	-webkit-background-clip: text;
	color: transparent !important;
/* Ombre légère pour relief */
	text-shadow: 1px 1px 6px rgba(0,0,0,0.15);
/* Animation du dégradé + pulse */
	background-size: 300% 300%;
	animation: superTitleGradient 6s ease infinite, superTitlePulse 2.5s ease-in-out infinite alternate;
	text-decoration: none;
/* enlever le soulignement */
}

/* Animation du dégradé */
@keyframes superTitleGradient {
	0% {
		background-position: 0 50%;
	}
	
	50% {
		background-position: 100% 50%;
	}
	
	100% {
		background-position: 0 50%;
	}
}

/* Pulse doux */
@keyframes superTitlePulse {
	0% {
		transform: scale(1);
	}
	
	50% {
		transform: scale(1.03);
	}
	
	100% {
		transform: scale(1);
	}
}

/* Footer stylé ETPE */
footer {
	background: linear-gradient(120deg, #0057b8, #ffeb3b, #ff69b4);
/* Dégradé club + rose */
	color: #fff;
	padding: 40px 20px;
	text-align: center;
	font-size: 1rem;
	line-height: 1.5;
	position: relative;
}

/* Liens du footer */
footer a {
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	transition: all .3s ease;
}

/* Hover sur liens */
footer a:hover {
	color: #ffeb3b;
	text-shadow: 0 0 8px #ffeb3b;
}

/* Icones sociales si présentes */
footer .social-icons a {
	display: inline-block;
	margin: 0 10px;
	font-size: 1.5rem;
	transition: transform .3s ease, color .3s ease;
}

footer .social-icons a:hover {
	transform: scale(1.2) rotate(-5deg);
	color: #ff69b4;
}

/* Optionnel : ajouter une petite ligne lumineuse en haut du footer */
footer::before {
	content: "";
	display: block;
	width: 100%;
	height: 4px;
	background: linear-gradient(90deg, #007bff, #ffeb3b, #ff69b4);
	margin-bottom: 20px;
}

/* Footer simple et moderne */
footer {
	background: #0057b8;
/* bleu ETPE uni */
	color: #fff;
	padding: 30px 20px;
	text-align: center;
	font-size: 1rem;
	line-height: 1.5;
}

/* Liens du footer */
footer a {
	color: #fff;
	text-decoration: none;
	transition: color .3s ease;
}

/* Hover subtil sur les liens */
footer a:hover {
	color: #ffeb3b;
/* jaune discret au survol */
}

/* Icônes sociales */
footer .social-icons a {
	margin: 0 8px;
	font-size: 1.3rem;
	transition: transform .2s ease;
}

footer .social-icons a:hover {
	transform: scale(1.1);
/* léger zoom */
}

/* Footer sobre ETPE */
footer {
	background: #222;
/* gris anthracite pour contraste avec bleu */
	color: #fff;
	padding: 30px 20px;
	text-align: center;
	font-size: 1rem;
	line-height: 1.5;
}

/* Liens du footer */
footer a {
	color: #ffeb3b;
/* jaune ETPE pour contraste */
	text-decoration: none;
	transition: color .3s ease;
}

footer a:hover {
	color: #ff69b4;
/* rose au survol pour rappeler le dégradé du site */
}

/* Icônes sociales */
footer .social-icons a {
	margin: 0 8px;
	font-size: 1.3rem;
	transition: transform .2s ease, color .3s ease;
}

footer .social-icons a:hover {
	transform: scale(1.1);
/* léger zoom */
	color: #ff69b4;
}

/* Blocs importants / call-to-action */
.cta-block {
	background: linear-gradient(120deg, #f5f5f5, #e0e0e0);
/* gris clair subtil */
	border-left: 5px solid #007bff;
/* accent bleu ETPE */
	border-radius: 10px;
	padding: 20px;
	margin: 20px 0;
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
	transition: transform .3s ease, box-shadow .3s ease;
}

/* Hover pour interactivité */
.cta-block:hover {
	transform: translateY(-4px);
/* léger “lift” */
	box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* Titres dans les blocs */
.cta-block h2, .cta-block h3 {
	color: #007bff;
/* bleu ETPE pour titre */
	margin-top: 0;
}

/* Texte normal */
.cta-block p {
	color: #333;
	line-height: 1.6;
}

/* Blocs importants animés */
.cta-block {
	background: linear-gradient(120deg, #f5f5f5, #e0e0e0);
/* gris clair */
	border-left: 5px solid #007bff;
/* accent bleu ETPE */
	border-radius: 10px;
	padding: 20px;
	margin: 20px 0;
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
	transition: transform .3s ease, box-shadow .3s ease;
/* Pulse léger permanent */
	animation: ctaPulse 3s ease-in-out infinite alternate;
}

/* Animation au hover pour encore plus de mouvement */
.cta-block:hover {
	transform: translateY(-8px) scale(1.03);
/* lift + léger zoom */
	box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* Animation pulse doux */
@keyframes ctaPulse {
	0% {
		transform: translateY(0) scale(1);
	}
	
	50% {
		transform: translateY(-3px) scale(1.01);
	}
	
	100% {
		transform: translateY(0) scale(1);
	}
}

/* Titres dans les blocs */
.cta-block h2, .cta-block h3 {
	color: #007bff;
	margin-top: 0;
}

/* Texte normal */
.cta-block p {
	color: #333;
	line-height: 1.6;
}

/* Images “section / news / galeries” */
img {
	border-radius: 12px;
/* coins arrondis */
	box-shadow: 0 6px 15px rgba(0,0,0,0.1);
/* ombre légère */
	transition: transform .3s ease, box-shadow .3s ease, filter .3s ease;
}

/* Hover sur les images */
img:hover {
	transform: scale(1.05);
/* léger zoom */
	box-shadow: 0 12px 25px rgba(0,0,0,0.2);
/* ombre plus prononcée */
	filter: brightness(1.1);
/* un peu plus lumineux */
}

/* Optionnel : si tu veux un effet pulse léger continu */
img.cta-img {
	animation: imgPulse 4s ease-in-out infinite alternate;
}

@keyframes imgPulse {
	0% {
		transform: scale(1);
	}
	
	50% {
		transform: scale(1.02);
	}
	
	100% {
		transform: scale(1);
	}
}

/* Images premium avec bordure ETPE et coins arrondis */
img.premium-img {
	border-radius: 12px;
	border: 4px solid #007bff;
/* bordure bleu ETPE */
	box-shadow: 0 6px 15px rgba(0,0,0,0.15);
/* ombre douce */
	transition: transform .3s ease, box-shadow .3s ease, filter .3s ease;
	display: block;
	margin: 0 auto;
/* centrer si nécessaire */
}

/* Hover : zoom + tilt + glow */
img.premium-img:hover {
	transform: scale(1.07) rotate(-1deg);
	box-shadow: 0 12px 25px rgba(0,0,0,0.25), 0 0 20px rgba(0,123,255,0.4);
	filter: brightness(1.1);
}

/* Animation pulse doux pour certaines images */
img.premium-img.pulse {
	animation: imgPulsePremium 4s ease-in-out infinite alternate;
}

@keyframes imgPulsePremium {
	0% {
		transform: scale(1);
	}
	
	50% {
		transform: scale(1.02);
	}
	
	100% {
		transform: scale(1);
	}
}

/* Bloc important avec dégradé animé */
.cta-block {
	border-left: 5px solid #007bff;
/* accent bleu ETPE */
	border-radius: 10px;
	padding: 20px;
	margin: 20px 0;
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
	color: #333;
	background: linear-gradient(135deg, #f5f5f5, #e0e0e0);
	background-size: 400% 400%;
	animation: ctaGradient 8s ease infinite, ctaPulse 3s ease-in-out infinite alternate;
	transition: transform .3s ease, box-shadow .3s ease;
}

/* Animation dégradé */
@keyframes ctaGradient {
	0% {
		background-position: 0 50%;
	}
	
	50% {
		background-position: 100% 50%;
	}
	
	100% {
		background-position: 0 50%;
	}
}

/* Pulse léger */
@keyframes ctaPulse {
	0% {
		transform: translateY(0) scale(1);
	}
	
	50% {
		transform: translateY(-3px) scale(1.01);
	}
	
	100% {
		transform: translateY(0) scale(1);
	}
}

/* Hover pour interactivité */
.cta-block:hover {
	transform: translateY(-8px) scale(1.03);
	box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* Bloc important premium */
.cta-block {
	border-left: 6px solid #007bff;
/* accent bleu ETPE */
	border-radius: 12px;
	padding: 25px;
	margin: 25px 0;
	box-shadow: 0 6px 18px rgba(0,0,0,0.15);
	color: #fff;
	background: linear-gradient(135deg, #007bff, #ffeb3b, #ff69b4);
/* dégradé bleu → jaune → rose */
	background-size: 400% 400%;
	animation: ctaGradientPremium 8s ease infinite, ctaPulsePremium 3s ease-in-out infinite alternate;
	transition: transform .3s ease, box-shadow .3s ease;
}

/* Animation dégradé dynamique */
@keyframes ctaGradientPremium {
	0% {
		background-position: 0 50%;
	}
	
	50% {
		background-position: 100% 50%;
	}
	
	100% {
		background-position: 0 50%;
	}
}

/* Pulse léger pour mouvement continu */
@keyframes ctaPulsePremium {
	0% {
		transform: translateY(0) scale(1);
	}
	
	50% {
		transform: translateY(-4px) scale(1.02);
	}
	
	100% {
		transform: translateY(0) scale(1);
	}
}

/* Hover pour interactivité */
.cta-block:hover {
	transform: translateY(-10px) scale(1.05);
/* lift + zoom */
	box-shadow: 0 12px 28px rgba(0,0,0,0.2);
}

/* Bloc important premium mais classe */
.cta-block {
	border-left: 6px solid #007bff;
/* accent bleu ETPE */
	border-radius: 12px;
	padding: 25px;
	margin: 25px 0;
	box-shadow: 0 6px 18px rgba(0,0,0,0.12);
	color: #fff;
/* Dégradé fixe et sobre */
	background: linear-gradient(135deg, #007bff, #6ec1ff, #ff69b4);
	transition: transform .3s ease, box-shadow .3s ease;
	animation: ctaPulseClass 3s ease-in-out infinite alternate;
}

/* Pulse léger pour mouvement subtil */
@keyframes ctaPulseClass {
	0% {
		transform: translateY(0) scale(1);
	}
	
	50% {
		transform: translateY(-3px) scale(1.01);
	}
	
	100% {
		transform: translateY(0) scale(1);
	}
}

/* Hover pour interactivité */
.cta-block:hover {
	transform: translateY(-6px) scale(1.03);
/* lift + léger zoom */
	box-shadow: 0 10px 25px rgba(0,0,0,0.18);
}

/* Bloc CTA premium et classe */
.cta-block {
	border-left: 4px solid #007bff;
/* bleu ETPE discret */
	border-radius: 12px;
	padding: 25px;
	margin: 25px 0;
	box-shadow: 0 6px 15px rgba(0,0,0,0.08);
/* ombre subtile */
	color: #fff;
/* Fond doux, dégradé fixe élégant */
	background: linear-gradient(135deg, #007bff, #87cefa, #ffb6c1);
/* Pulse subtil permanent */
	animation: ctaPulseUltra 4s ease-in-out infinite alternate;
	transition: transform .3s ease, box-shadow .3s ease;
}

/* Pulse léger pour mouvement subtil */
@keyframes ctaPulseUltra {
	0% {
		transform: translateY(0) scale(1);
	}
	
	50% {
		transform: translateY(-2px) scale(1.01);
	}
	
	100% {
		transform: translateY(0) scale(1);
	}
}

/* Hover subtil et élégant */
.cta-block:hover {
	transform: translateY(-5px) scale(1.03);
	box-shadow: 0 12px 22px rgba(0,0,0,0.15);
}

/* Petit bloc titre stylisé */
.styled-title {
	display: inline-block;
/* s’adapte à la largeur du texte */
	background: linear-gradient(135deg, #007bff, #87cefa);
/* bleu → ciel */
	color: #fff;
	padding: 10px 20px;
	border-radius: 8px;
	font-size: 1.2rem;
	font-weight: 600;
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
	transition: transform .3s ease, box-shadow .3s ease;
}

/* Hover subtil pour dynamisme */
.styled-title:hover {
	transform: translateY(-3px) scale(1.05);
	box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* Petit bloc titre stylisé premium ETPE */
.styled-title {
	display: inline-block;
/* s’adapte à la largeur du texte */
	background: linear-gradient(135deg, #007bff, #ffeb3b, #ff69b4);
/* bleu → jaune → rose */
	color: #fff;
	padding: 12px 25px;
	border-radius: 12px;
	font-size: 1.3rem;
	font-weight: 700;
	text-align: center;
	box-shadow: 0 6px 18px rgba(0,0,0,0.15);
	animation: titlePulse 3s ease-in-out infinite alternate;
	transition: transform .3s ease, box-shadow .3s ease;
	margin: 0 auto;
/* centrer */
}

/* Pulse subtil pour effet premium */
@keyframes titlePulse {
	0% {
		transform: translateY(0) scale(1);
	}
	
	50% {
		transform: translateY(-2px) scale(1.02);
	}
	
	100% {
		transform: translateY(0) scale(1);
	}
}

/* Hover léger pour dynamisme */
.styled-title:hover {
	transform: translateY(-4px) scale(1.05);
	box-shadow: 0 12px 25px rgba(0,0,0,0.25);
}

/* Petit titre premium centré */
.styled-title {
	display: block;
/* prend toute la largeur disponible pour centrer facilement */
	max-width: 400px;
/* limite la largeur pour un look compact */
	margin: 20px auto;
/* centrer horizontalement */
	background-color: #007bff;
/* bleu ETPE uni */
	color: #fff;
	padding: 12px 20px;
	border-radius: 10px;
	font-size: 1.3rem;
	font-weight: 700;
	text-align: center;
	box-shadow: 0 6px 15px rgba(0,0,0,0.1);
	transition: transform .3s ease, box-shadow .3s ease;
}

/* Hover élégant et subtil */
.styled-title:hover {
	transform: translateY(-3px) scale(1.03);
	box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}