/* association.css — styles spécifiques (design system commun dans base.css) */
.asso-hero {
  background: linear-gradient(135deg, var(--sla-dark) 55%, var(--sla-blue-dark) 100%);
  padding: 4.5rem 3rem; color: white; position: relative; overflow: hidden;
}
.asso-hero-blob { position: absolute; border-radius: 50%; opacity: 0.12; }
.ah-blob1 { width: 400px; height: 400px; background: var(--sla-pink); top: -150px; right: -60px; }
.ah-blob2 { width: 250px; height: 250px; background: var(--sla-yellow); bottom: -80px; right: 200px; }
.asso-hero-content { position: relative; z-index: 1; max-width: 680px; }
.asso-hero h1 { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 64px; text-transform: uppercase; line-height: 0.95; margin-bottom: 1rem; }
.asso-hero h1 span { color: var(--sla-yellow); }
.asso-hero .sub { font-size: 17px; opacity: 0.8; max-width: 760px; line-height: 1.7; }

/* Origine */
.origine-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; min-height: 440px; }
.origine-img { overflow: hidden; position: relative; }
.origine-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.origine-img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to right, transparent 60%, #F5F7FA);
}
.origine-text { padding: 3.5rem 3rem; display: flex; flex-direction: column; justify-content: center; }
.section-kicker { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--sla-pink); margin-bottom: 0.75rem; }
.origine-text h2 { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 34px; text-transform: uppercase; line-height: 1.05; margin-bottom: 1.25rem; }
.origine-text h2 span { color: var(--sla-pink); }
.origine-text p { font-size: 15px; color: #555; line-height: 1.8; margin-bottom: 0.9rem; }

/* Milya */
.milya-section { background: var(--sla-gray); padding: 4rem 3rem; }
.milya-inner { max-width: 760px; margin: 0 auto; }
.milya-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.milya-logo-placeholder {
  width: 56px; height: 56px; border-radius: 12px; background: var(--sla-blue-dark);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 24px;
}
.milya-header h2 { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 30px; text-transform: uppercase; }
.milya-header h2 span { color: var(--sla-blue-dark); }
.milya-section p { font-size: 15px; color: #555; line-height: 1.8; margin-bottom: 0.9rem; }
.milya-link {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 0.5rem; color: var(--sla-blue-dark); font-weight: 700; font-size: 14px;
  text-decoration: none; border-bottom: 2px solid var(--sla-blue); padding-bottom: 1px;
  transition: color 0.15s;
}
.milya-link:hover { color: var(--sla-blue); }

/* Événement */
.event-section {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0; min-height: 400px;
  border-top: 1px solid #E2E6EA;
}
.event-img { overflow: hidden; position: relative; }
.event-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.event-text { padding: 3.5rem 3rem; display: flex; flex-direction: column; justify-content: center; }
.event-text h2 { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 34px; text-transform: uppercase; line-height: 1.05; margin-bottom: 1.25rem; }
.event-text h2 span { color: var(--sla-pink); }
.event-text p { font-size: 15px; color: #555; line-height: 1.8; margin-bottom: 1.5rem; }

/* Stats */
.stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: #D8DDE5; border-top: 1px solid #D8DDE5; border-bottom: 1px solid #D8DDE5; }
.stat-box { background: white; padding: 2rem 2.5rem; text-align: center; }
.stat-num { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 52px; line-height: 1; color: var(--sla-pink); }
.stat-label { font-size: 14px; color: #666; margin-top: 4px; font-weight: 600; }

/* ── RESPONSIVE (mobile / tablette) ── */
@media (max-width: 860px) {
  .asso-hero { padding: 3rem 1.25rem; }
  .asso-hero h1 { font-size: 44px; }
  .origine-grid, .event-section { grid-template-columns: 1fr; min-height: 0; }
  .origine-img, .event-img { min-height: 220px; }
  .origine-img::after { display: none; }
  .origine-text, .event-text { padding: 2.5rem 1.25rem; }
  .origine-text h2, .event-text h2 { font-size: 28px; }
  .milya-section { padding: 3rem 1.25rem; }
  .stats-row { grid-template-columns: 1fr; }
  .stat-box { padding: 1.5rem; }
  .stat-num { font-size: 42px; }
}
@media (max-width: 520px) {
  .asso-hero h1 { font-size: 34px; }
  .asso-hero .sub, .page-hero p { font-size: 15px; }
}