/* pages/a-propos.css */

.page-hero {
  padding: var(--space-16) 0 var(--space-12);
  background: linear-gradient(160deg, var(--color-primary-50) 0%, white 70%);
  border-bottom: 1px solid var(--color-border);
}
.breadcrumb { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-5); }
.breadcrumb a { color: var(--color-primary); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.page-hero-title { font-size: var(--text-4xl); font-weight: 800; letter-spacing: -.03em; line-height: var(--leading-tight); max-width: 700px; margin-bottom: var(--space-5); }
.page-hero-desc  { font-size: var(--text-xl); color: var(--color-gray-500); max-width: 640px; line-height: var(--leading-relaxed); }
@media (max-width: 768px) { .page-hero-title { font-size: var(--text-3xl); } .page-hero-desc { font-size: var(--text-lg); } }

.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center; }
@media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; gap: var(--space-8); } }
.about-title { font-size: var(--text-3xl); font-weight: 800; margin: var(--space-3) 0 var(--space-5); letter-spacing: -.02em; }
.about-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.about-stat { background: white; border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-6); text-align: center; box-shadow: var(--shadow-sm); }
.about-stat-value { display: block; font-size: var(--text-4xl); font-weight: 800; color: var(--color-primary); letter-spacing: -.03em; line-height: 1.1; margin-bottom: var(--space-1); }
.about-stat-label { font-size: var(--text-xs); color: var(--color-text-muted); line-height: var(--leading-relaxed); }

.valeur-card { background: white; border: 1px solid var(--color-border); border-radius: var(--radius-2xl); padding: var(--space-8); }
.valeur-icon { width: 56px; height: 56px; border-radius: var(--radius-xl); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-4); }
.valeur-title { font-size: var(--text-xl); font-weight: 700; margin-bottom: var(--space-3); }
.valeur-desc { font-size: var(--text-sm); color: var(--color-gray-500); line-height: var(--leading-relaxed); }

.team-card { background: white; border: 1px solid var(--color-border); border-radius: var(--radius-2xl); padding: var(--space-6); text-align: center; }
.team-avatar { width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--text-xl); font-weight: 700; color: white; margin: 0 auto var(--space-4); }
.team-name { font-size: var(--text-lg); font-weight: 700; margin-bottom: var(--space-1); }
.team-role { font-size: var(--text-sm); color: var(--color-primary); font-weight: 600; margin-bottom: var(--space-3); }
.team-bio  { font-size: var(--text-sm); color: var(--color-gray-500); line-height: var(--leading-relaxed); }

.about-rgpd { display: flex; gap: var(--space-8); align-items: flex-start; background: white; border: 1px solid var(--color-border); border-radius: var(--radius-2xl); padding: var(--space-8); }
@media (max-width: 768px) { .about-rgpd { flex-direction: column; gap: var(--space-5); } }
.about-rgpd-icon { width: 72px; height: 72px; flex-shrink: 0; background: var(--color-primary-50); color: var(--color-primary); border-radius: var(--radius-xl); display: flex; align-items: center; justify-content: center; }
.rgpd-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.rgpd-list li { font-size: var(--text-sm); color: var(--color-gray-600); padding-left: var(--space-5); position: relative; }
.rgpd-list li::before { content: '✓'; position: absolute; left: 0; color: var(--color-success); font-weight: 700; }

.reveal { opacity: 0; transform: translateY(20px); transition: opacity .5s ease, transform .5s ease; }
.reveal.is-visible { opacity: 1; transform: none; }