/* ==========================================
   CORRECTIONS RESPONSIVE FORCES POUR SERVICES AUTOPURE
   Contrer les styles de responsive-fixes-clean.css
   ========================================== */

/* Corrections spécifiques pour les pages de services */
@media (max-width: 768px) {
	/* Force le bon comportement du main-content pour les pages de services */
	body .main-content {
		padding-left: 0 !important;
		padding-right: 0 !important;
		width: 100% !important;
		max-width: 100vw !important;
	}
    
	/* Force le bon comportement de service-detail-page */
	.service-detail-page {
		padding-left: 1rem !important;
		padding-right: 1rem !important;
		margin: 0 !important;
		width: 100% !important;
		max-width: 100vw !important;
		box-sizing: border-box !important;
	}
    
	/* Corrections spécifiques pour pricing-info-section */
	.pricing-info-section {
		margin-top: 2rem !important;
		padding: 0 0.5rem !important;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}
    
	/* Force le comportement colonne pour pricing-note */
	.pricing-note {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		text-align: center !important;
		gap: 1rem !important;
		padding: 1.5rem !important;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}
    
	/* Centrage et ajustement de l'icône */
	.pricing-note .info-icon {
		flex-shrink: 0 !important;
		margin-bottom: 0 !important;
	}
    
	/* Force le centrage du contenu */
	.pricing-note .info-content {
		text-align: center !important;
		width: 100% !important;
	}
    
	.pricing-note .info-content h4 {
		text-align: center !important;
		margin-bottom: 1rem !important;
	}
    
	.pricing-note .info-content p {
		text-align: center !important;
		font-size: 0.95rem !important;
		line-height: 1.5 !important;
	}
    
	/* Force le comportement du bonus-info */
	.bonus-info {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		text-align: center !important;
		gap: 0.5rem !important;
		padding: 0.8rem 1rem !important;
		font-size: 0.9rem !important;
	}
    
	.bonus-info i {
		margin-right: 0 !important;
		margin-bottom: 0 !important;
	}
    
	/* Corrections pour service-unavailable si présent */
	.service-unavailable {
		margin: 1.5rem 0.5rem !important;
		padding: 1.5rem !important;
		box-sizing: border-box !important;
	}
    
	/* Correction du badge POPULAIRE sur mobile */
	.popular-badge {
		top: -6px !important;
		right: 50% !important;
		transform: translateX(50%) !important;
		font-size: 0.75rem !important;
		padding: 6px 12px !important;
		white-space: nowrap !important;
	}
    
	/* Ajustement des cartes de prix pour éviter le débordement du badge */
	.price-card.premium-card {
		padding-top: 2.5rem !important;
	}
}

@media (max-width: 480px) {
	/* Ajustements pour très petits écrans */
	.service-detail-page {
		padding-left: 0.5rem !important;
		padding-right: 0.5rem !important;
	}
    
	.pricing-info-section {
		padding: 0 0.25rem !important;
		margin-top: 1.5rem !important;
	}
    
	.pricing-note {
		padding: 1rem !important;
		border-radius: 12px !important;
	}
    
	.pricing-note .info-icon {
		width: 36px !important;
		height: 36px !important;
		font-size: 0.9rem !important;
	}
    
	.pricing-note .info-content h4 {
		font-size: 1rem !important;
		margin-bottom: 0.8rem !important;
	}
    
	.pricing-note .info-content p {
		font-size: 0.85rem !important;
		line-height: 1.4 !important;
	}
    
	.bonus-info {
		padding: 0.6rem 0.8rem !important;
		font-size: 0.8rem !important;
		border-radius: 10px !important;
	}
    
	.service-unavailable {
		margin: 1rem 0.25rem !important;
		padding: 1rem !important;
	}
    
	/* Ajustements mobiles pour le badge POPULAIRE */
	.popular-badge {
		font-size: 0.7rem !important;
		padding: 5px 10px !important;
		top: -5px !important;
	}
}