/* ==========================================
   SHARED STYLES - Commun à toutes les pages
   Principe DRY : Styles réutilisés partout
   ========================================== */

/* === LAYOUT 2 COLONNES === */
/* Utilisé par : pages services, communes, utilitaires, légales */
.layout-two-cols {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--spacing-2xl) var(--spacing-lg);
  display: grid;
  grid-template-columns: 1fr 350px;
  gap: var(--spacing-2xl);
  align-items: start;
}

@media (max-width: 1024px) {
  .layout-two-cols {
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
  }
}

/* === CONTENU PRINCIPAL === */
.content-main {
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--spacing-2xl);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

@media (max-width: 768px) {
  .content-main {
    padding: var(--spacing-lg);
  }

  .layout-two-cols {
    padding: var(--spacing-lg) var(--spacing-md);
  }
}

/* === CTA FINAL === */
/* Section CTA en bas de page - utilisée partout */
.cta-final {
  background: var(--gradient-primary);
  padding: var(--spacing-3xl) var(--spacing-lg);
  text-align: center;
  color: white;
  margin-top: var(--spacing-3xl);
}

.cta-final-container {
  max-width: 800px;
  margin: 0 auto;
}

.cta-final-title {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 800;
  margin-bottom: var(--spacing-md);
}

.cta-final-subtitle {
  font-size: 1.2rem;
  margin-bottom: var(--spacing-xl);
  opacity: 0.95;
}

.btn-cta-final {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  background: white;
  color: var(--red-primary);
  padding: var(--spacing-lg) var(--spacing-2xl);
  border-radius: var(--radius-full);
  font-size: 1.2rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.btn-cta-final:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}