/* ============================================
   STYLES SPÉCIFIQUES PAR LOCALITÉ
   ============================================ */

/* Thème Bretagne (Bleu) */
.localite-bretagne {
  --localite-primary: #1E88E5;
  --localite-primary-dark: #1565C0;
  --localite-accent: #64B5F6;
}

.localite-bretagne .hero {
  background: linear-gradient(135deg, #1E88E5 0%, #1565C0 100%);
}

.localite-bretagne .section-title h2::after {
  background: var(--localite-primary);
}

.localite-bretagne .btn-primary,
.localite-bretagne .service-card-cta,
.localite-bretagne .phone-cta {
  background: var(--localite-primary);
}

.localite-bretagne .btn-primary:hover,
.localite-bretagne .service-card-cta:hover,
.localite-bretagne .phone-cta:hover {
  background: var(--localite-primary-dark);
}

.localite-bretagne .badge-urgence {
  background: var(--localite-primary);
}

.localite-bretagne .localite-header {
  background: linear-gradient(135deg, var(--localite-primary) 0%, var(--localite-primary-dark) 100%);
}

/* Thème Dijon/Bourgogne (Rouge/Bourgogne) */
.localite-dijon {
  --localite-primary: #C62828;
  --localite-primary-dark: #B71C1C;
  --localite-accent: #EF5350;
}

.localite-dijon .hero {
  background: linear-gradient(135deg, #C62828 0%, #B71C1C 100%);
}

.localite-dijon .section-title h2::after {
  background: var(--localite-primary);
}

.localite-dijon .btn-primary,
.localite-dijon .service-card-cta,
.localite-dijon .phone-cta {
  background: var(--localite-primary);
}

.localite-dijon .btn-primary:hover,
.localite-dijon .service-card-cta:hover,
.localite-dijon .phone-cta:hover {
  background: var(--localite-primary-dark);
}

.localite-dijon .badge-urgence {
  background: var(--localite-primary);
}

.localite-dijon .localite-header {
  background: linear-gradient(135deg, var(--localite-primary) 0%, var(--localite-primary-dark) 100%);
}

/* Thème Rennes (Orange - par défaut) */
.localite-rennes {
  --localite-primary: #FF6B35;
  --localite-primary-dark: #E55A2B;
}

/* Carte de zone d'intervention */
.intervention-map {
  width: 100%;
  height: 400px;
  border-radius: var(--border-radius);
  margin: var(--spacing-md) 0;
  overflow: hidden;
  box-shadow: var(--box-shadow);
}

.intervention-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.intervention-zones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
}

.zone-item {
  background: var(--color-white);
  padding: var(--spacing-sm);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  text-align: center;
  font-weight: 600;
  color: var(--color-gray-dark);
}

/* Informations locales */
.local-info {
  background: var(--color-white);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  padding: var(--spacing-md);
  margin: var(--spacing-md) 0;
}

.local-info-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-secondary);
  margin-bottom: var(--spacing-sm);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}


.local-info-list {
  list-style: none;
  padding-left: 0;
}

.local-info-list li {
  padding: var(--spacing-xs) 0;
  padding-left: var(--spacing-md);
  position: relative;
  color: var(--color-gray-dark);
}

.local-info-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  background: linear-gradient(135deg, #FF6B35 0%, #F7931E 25%, #FF8C42 50%, #E55A2B 75%, #C44536 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% 200%;
  animation: gradient-shift-text 3s ease infinite;
  font-weight: 700;
}

/* Responsive Localités */
@media (max-width: 768px) {
  .intervention-map {
    height: 300px;
  }
  
  .intervention-zones {
    grid-template-columns: 1fr;
  }
}


/* Zones d'intervention - Layout 2 colonnes responsive */
.zones-intervention-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .zones-intervention-grid {
        grid-template-columns: 1fr !important;
    }
    
    .zones-intervention-grid .intervention-map {
        position: relative !important;
        top: auto !important;
        height: 400px !important;
    }
}