/* Ported from src/pages/qui-sommes-nous.astro */
.section-center-header { text-align: center; max-width: 600px; margin: 0 auto var(--space-12) auto; }
.section-subtitle { color: var(--color-text-body); font-size: var(--text-base); }

/* ── 1. Histoire & Présentation ───────────────────────────── */
.qui-sommes-nous-section { padding: var(--space-16) 0; }
.history-grid { display: flex; flex-direction: column; gap: var(--space-16); }
.history-row { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-12); align-items: center; }
.history-row.reverse .history-text { order: 2; }
.history-row.reverse .history-image-wrap { order: 1; }
.history-text { display: flex; flex-direction: column; gap: var(--space-4); }
.history-text h3 { font-size: var(--text-xl); font-weight: var(--fw-bold); color: var(--color-primary); border-bottom: 2px solid var(--color-primary); padding-bottom: var(--space-2); display: inline-block; width: fit-content; }
.history-text p { color: var(--color-text-body); line-height: 1.8; font-size: var(--text-base); }
.history-image-wrap { border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-md); }
.history-img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }

/* ── 2. Nos valeurs ───────────────────────────────────────── */
.valeurs-section { padding: var(--space-16) 0; }
.valeurs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
.valeur-card { background: var(--color-bg); border: 1px solid var(--color-border); padding: var(--space-8); border-radius: var(--radius-md); text-align: center; transition: border-color 0.2s, box-shadow 0.2s; }
.valeur-card:hover { border-color: #cbd5e1; box-shadow: var(--shadow-md); }
.valeur-icon { font-size: 3rem; display: block; margin-bottom: var(--space-4); }
.valeur-card h3 { font-size: var(--text-lg); font-weight: var(--fw-bold); margin-bottom: var(--space-3); color: var(--color-text); }
.valeur-card p { font-size: var(--text-sm); color: var(--color-text-body); line-height: 1.6; }

/* ── 3. Chiffres clés ─────────────────────────────────────── */
.chiffres-section { padding: var(--space-16) 0; background: var(--color-bg); }
.chiffres-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.chiffre-card { padding: var(--space-8) var(--space-6); text-align: center; border-top: 4px solid var(--color-primary); }
.chiffre-value { display: block; font-family: var(--font-title); font-size: var(--text-4xl); font-weight: var(--fw-extrabold); color: var(--color-primary); margin-bottom: var(--space-2); letter-spacing: -0.02em; }
.chiffre-label { font-size: var(--text-sm); color: var(--color-text-body); font-weight: var(--fw-medium); line-height: 1.5; }

/* ── 4. Engagements & RSE ─────────────────────────────────── */
.rse-section { padding: var(--space-20) 0; }
.rse-layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-12); align-items: start; }
.rse-content-card { display: flex; flex-direction: column; gap: var(--space-6); }
.rse-meta { display: flex; gap: var(--space-4); align-items: center; }
.rse-badge { background: #fffbf0; color: #c09000; border: 1px solid #f0c000; font-size: var(--text-xs); font-weight: var(--fw-semibold); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); text-transform: uppercase; }
.rse-date { font-size: var(--text-xs); color: var(--color-text-muted); }
.rse-title { font-size: var(--text-3xl); font-weight: var(--fw-bold); line-height: 1.15; }
.rse-lead { font-size: var(--text-lg); color: var(--color-text-body); line-height: 1.7; }
.rse-articles-list { display: flex; flex-direction: column; gap: var(--space-6); margin-top: var(--space-2); }
.rse-article-item { display: flex; gap: var(--space-4); align-items: flex-start; }
.rse-number { font-size: var(--text-2xl); font-weight: var(--fw-bold); color: var(--color-primary); opacity: 0.5; line-height: 1; }
.rse-article-item h3 { font-size: var(--text-base); font-weight: var(--fw-bold); margin-bottom: var(--space-1); }
.rse-article-item p { font-size: var(--text-sm); color: var(--color-text-body); line-height: 1.6; }
.rse-image-block { position: relative; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-lg); }
.rse-img { width: 100%; aspect-ratio: 10/12; object-fit: cover; }
.rse-image-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%); padding: var(--space-8); color: #fff; }
.rse-image-overlay blockquote { font-size: var(--text-lg); font-style: italic; font-weight: var(--fw-medium); line-height: 1.5; }

@media (max-width: 1023px) {
  .history-row { grid-template-columns: 1fr; }
  .history-row.reverse .history-text { order: 1; }
  .history-row.reverse .history-image-wrap { order: 2; }
  .valeurs-grid { grid-template-columns: 1fr; }
  .chiffres-grid { grid-template-columns: repeat(2, 1fr); }
  .rse-layout { grid-template-columns: 1fr; }
  .rse-img { aspect-ratio: 16/9; }
}
@media (max-width: 767px) { .chiffres-grid { grid-template-columns: 1fr; } }