/* === CONTENEUR PRINCIPAL === */
.article-container {
	max-width: 900px;
	margin: 0 auto;
	background: white;
	padding: 40px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* === BANNIÈRE URGENCE === */
.urgent-banner {
	background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
	color: white;
	padding: 25px;
	border-radius: 8px;
	margin-bottom: 30px;
	text-align: center;
	box-shadow: 0 4px 15px rgba(220, 38, 38, 0.3);
}

/* === WIDGET FLOTTANT === */
.floating-cta {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
	color: white;
	padding: 10px 15px;
	box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	animation: slideUp .5s ease-out;
}

@keyframes slideUp {
	from {
		transform: translateY(100%);
		opacity: 0;
	}
	
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

.floating-cta-content {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1;
}

.floating-cta-icon {
	font-size: 1em;
	animation: pulse 2s infinite;
}

@keyframes pulse {
	0%, 100% {
		transform: scale(1);
	}
	
	50% {
		transform: scale(1.1);
	}
}

.floating-cta-text {
	flex: 1;
}

.floating-cta-title {
	font-size: 1em;
	font-weight: 700;
	margin: 0 0 1px;
	color: white;
}

.floating-cta-subtitle {
	font-size: .9em;
	margin: 0;
	opacity: .95;
}

.floating-cta-button {
	background: white;
	color: #dc2626 !important;
	padding: 12px 30px;
	border-radius: 50px;
	text-decoration: none !important;
	font-weight: 700;
	font-size: 1em;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: all .3s ease;
	box-shadow: 0 4px 15px rgba(255, 255, 255, 0.3);
	white-space: nowrap;
}

.floating-cta-button:hover {
	background: #f9fafb;
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(255, 255, 255, 0.5);
}

/* Responsive mobile */
@media (max-width: 100px) {
	.floating-cta {
		flex-direction: column;
		padding: 4px 8px;
	/* Padding réduit */
		gap: 8px;
	/* Gap réduit */
	}
	
	.floating-cta-content {
		flex-direction: column;
		gap: 5px;
	/* Gap réduit */
		text-align: left;
		width: 100%;
	/* Ajout/Confirmation */
	}
	
	.floating-cta-button {
		white-space: normal;
	/* TRÈS IMPORTANT : Autorise le saut de ligne si besoin */
		width: 100%;
	/* TRÈS IMPORTANT : Force le bouton à prendre 100% de l'espace *
			        justify-content: center; /* Centre le contenu du bouton */
		padding: 4px 6px;
	/* Padding du bouton réduit */
	}
	
	/* Le reste de vos styles pour mobile (urgent-banner, etc.) */
	.urgent-banner h1 {
		font-size: .5em;
		margin-bottom: 10px;
		font-weight: 500;
		color: white !important;
	}
	
	.urgent-banner p {
		font-size: 1.1em;
		opacity: .95;
	}
}

/* === TITRES === */
h2 {
	color: #1f2937 !important;
	font-size: 1.8em !important;
	margin: 35px 0 20px !important;
	padding-bottom: 10px !important;
	border-bottom: 3px solid #14453d !important;
}

h3 {
	color: #374151 !important;
	font-size: 1.4em !important;
	margin: 25px 0 15px !important;
	font-weight: 600 !important;
}

/* === TEXTE INTRODUCTION === */
.intro-text {
	font-size: 1.15em;
	color: #4b5563;
	background: #f3f4f6;
	padding: 25px;
	border-left: 5px solid #dc2626;
	margin: 30px 0;
	border-radius: 4px;
}

/* === CARTES DE SERVICE === */
.service-card {
	background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
	padding: 25px;
	margin: 25px 0;
	border-radius: 10px;
	border-left: 6px solid #f59e0b;
	box-shadow: 0 3px 10px rgba(245, 158, 11, 0.2);
}

.service-card h3 {
	color: #92400e !important;
	margin-top: 0 !important;
}

.service-card strong {
	color: #78350f;
}

/* === LISTE AVANTAGES === */
.advantages-list {
	background: #ecfdf5;
	padding: 25px;
	border-radius: 8px;
	margin: 25px 0;
	border-left: 5px solid #10b981;
}

.advantages-list h3 {
	color: #065f46 !important;
	margin-top: 0 !important;
}

.advantages-list ul {
	margin-left: 25px;
	margin-top: 15px;
}

.advantages-list li {
	margin-bottom: 12px;
	color: #047857;
	font-weight: 500;
}

/* === BOÎTE APPEL À L'ACTION === */
.cta-box {
	background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
	color: white;
	padding: 35px;
	margin: 40px 0;
	border-radius: 12px;
	text-align: center;
	box-shadow: 0 6px 20px rgba(30, 64, 175, 0.4);
}

.cta-box h2 {
	color: white !important;
	border: none !important;
	margin-top: 0 !important;
	font-size: 2em !important;
}

.cta-box p {
	font-size: 1.2em;
	margin: 20px 0;
	color: white;
}

/* === BOUTON CTA === */
.cta-button {
	display: inline-block;
	background: #dc2626;
	color: white !important;
	padding: 18px 45px;
	text-decoration: none !important;
	border-radius: 50px;
	font-size: 1.3em;
	font-weight: 700;
	margin-top: 15px;
	transition: all .3s ease;
	box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4);
}

.cta-button:hover {
	background: #991b1b;
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(220, 38, 38, 0.6);
}

/* === BOÎTE AVERTISSEMENT === */
.warning-box {
	background: #fef2f2;
	border: 2px solid #fecaca;
	padding: 20px;
	border-radius: 8px;
	margin: 25px 0;
}

.warning-box strong {
	color: #991b1b;
}

/* === MISE EN AVANT LOCALISATION === */
.location-highlight {
	background: #eff6ff;
	padding: 20px;
	border-radius: 8px;
	margin: 20px 0;
	border-left: 5px solid #3b82f6;
}

/* === EMOJI === */
.emoji {
	font-size: 1.3em;
	margin-right: 8px;
}

/* === RESPONSIVE MOBILE === */
@media (max-width: 768px) {
	.article-container {
		padding: 20px;
	}
	
	.urgent-banner h1 {
		font-size: 1.5em !important;
	}
	
	h2 {
		font-size: 1.5em !important;
	}
	
	.cta-button {
		padding: 15px 30px;
		font-size: 1.1em;
	}
}

/* ============================================
   CSS CARROUSEL AVIS GOOGLE - VESTA & PÉNATES
   ============================================ */
/* Reset de base */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: 'Roboto', Arial, sans-serif;
	background-color: #f8f9fa;
	padding: 20px;
}

/* Conteneur principal */
.google-reviews-container {
	max-width: 1200px;
	margin: 0 auto;
	background: white;
	padding: 40px 20px;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* ==================
   BADGE GOOGLE
   ================== */
.google-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
	margin-bottom: 40px;
	padding: 20px;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 1px 6px rgba(0,0,0,0.1);
}

.google-logo {
	width: 80px;
	height: auto;
}

.badge-info {
	text-align: left;
}

.badge-rating {
	font-size: 32px;
	font-weight: 500;
	color: #202124;
	margin-bottom: 5px;
}

.badge-stars {
	font-size: 24px;
	color: #fbbc04;
	margin-bottom: 5px;
}

.badge-count {
	font-size: 14px;
	color: #5f6368;
}

.badge-google-text {
	font-size: 14px;
	color: #5f6368;
	margin-top: 5px;
}

/* ==================
   CARROUSEL
   ================== */
.carousel-wrapper {
	position: relative;
	padding: 0 60px;
}

.carousel-container {
	overflow: hidden;
	width: 100%;
}

.carousel-track {
	display: flex;
	transition: transform .4s ease-in-out;
	gap: 20px;
}

/* ==================
   CARTES D'AVIS
   ================== */
.review-card {
	min-width: calc(33.333% - 14px);
	background: white;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	padding: 20px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.1);
	transition: box-shadow .3s ease;
}

.review-card:hover {
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* En-tête de l'avis */
.review-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

.reviewer-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: linear-gradient(135deg, #4285f4, #34a853);
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-weight: 500;
	font-size: 16px;
}

.reviewer-info {
	flex: 1;
}

.reviewer-name {
	font-weight: 500;
	color: #202124;
	font-size: 14px;
	margin-bottom: 2px;
}

.review-date {
	font-size: 12px;
	color: #5f6368;
}

/* Étoiles de l'avis */
.review-stars {
	font-size: 16px;
	color: #fbbc04;
	margin-bottom: 12px;
}

/* Texte de l'avis */
.review-text {
	color: #3c4043;
	font-size: 14px;
	line-height: 1.6;
	max-height: 150px;
	overflow-y: auto;
}

/* Scrollbar personnalisée */
.review-text::-webkit-scrollbar {
	width: 6px;
}

.review-text::-webkit-scrollbar-track {
	background: #f1f1f1;
	border-radius: 10px;
}

.review-text::-webkit-scrollbar-thumb {
	background: #dadce0;
	border-radius: 10px;
}

/* ==================
   BOUTONS NAVIGATION
   ================== */
.carousel-button {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: white;
	border: 1px solid #dadce0;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	transition: all .3s ease;
	z-index: 10;
}

.carousel-button:hover {
	background: #f8f9fa;
	box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.carousel-button.prev {
	left: 10px;
}

.carousel-button.next {
	right: 10px;
}

.carousel-button svg {
	width: 20px;
	height: 20px;
	fill: #5f6368;
}

.carousel-button:disabled {
	opacity: .3;
	cursor: not-allowed;
}

/* ==================
   RESPONSIVE MOBILE
   ================== */
/* Tablettes et mobiles */
@media (max-width: 768px) {
	.carousel-wrapper {
		padding: 0 50px;
	}
	
	.review-card {
		min-width: 100%;
	}
	
	.google-badge {
		flex-direction: column;
		text-align: center;
	}
	
	.badge-info {
		text-align: center;
	}
	
	.carousel-button {
		width: 35px;
		height: 35px;
	}
	
	.carousel-button.prev {
		left: 5px;
	}
	
	.carousel-button.next {
		right: 5px;
	}
}

/* Tablettes moyennes */
@media (max-width: 1024px) and (min-width: 769px) {
	.review-card {
		min-width: calc(50% - 10px);
	}
}

/* ==================
   PERSONNALISATION
   ================== */
/* Pour changer les couleurs des avatars (blanc et vert) :
.reviewer-avatar {
    background: linear-gradient(135deg, #FFFFFF, #00AA00);
}
*/
/* Pour changer la couleur des étoiles :
.review-stars,
.badge-stars {
    color: #FFD700;
}
*/
/* Pour ajuster le nombre d'avis visibles sur desktop :
.review-card {
    min-width: calc(25% - 15px);  // 4 avis
    min-width: calc(50% - 10px);  // 2 avis
}
*/