/* ==========================================================================
   ACF COMPUTER - STYLE PAGE À PROPOS (stylea.css)
   Réutilise les couleurs de marque (#0f172a navy, #ffb300 amber) pour rester
   cohérent avec le reste du site (Boutique, Panier, Paiement).
   ========================================================================== */

* { box-sizing: border-box; }
body { margin: 0; font-family: 'Inter', Arial, sans-serif; color: #0f172a; background: #ffffff; }

.about-hero {
    background: #050f1b;
    background-image: radial-gradient(circle at 15% 30%, rgba(255,179,0,0.12), transparent 45%);
    color: #ffffff;
    padding: 90px 20px 70px 20px;
    text-align: center;
}
.about-hero .tag { display:inline-block; background:rgba(255,179,0,0.15); color:#ffb300; font-size:12px; font-weight:700; letter-spacing:0.5px; padding:6px 14px; border-radius:20px; margin-bottom:16px; }
.about-hero h1 { font-size: 34px; margin: 0 0 14px 0; }
.about-hero p { max-width: 620px; margin: 0 auto; color: #cbd5e1; font-size: 15px; line-height: 1.7; }

.about-section { max-width: 1080px; margin: 0 auto; padding: 60px 20px; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.about-grid h2 { font-size: 24px; margin-bottom: 14px; }
.about-grid p { color: #475569; line-height: 1.8; font-size: 14.5px; }
.about-grid img { width: 100%; border-radius: 14px; box-shadow: 0 15px 40px rgba(15,23,42,0.15); }

.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 40px; }
.value-card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 14px; padding: 26px 20px; text-align: center; transition: transform .15s, box-shadow .15s; }
.value-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(15,23,42,0.08); }
.value-card i { font-size: 26px; color: #ffb300; margin-bottom: 12px; }
.value-card h3 { font-size: 15px; margin: 8px 0; }
.value-card p { font-size: 13px; color: #64748b; margin: 0; }

.stats-bar { background: #050f1b; padding: 46px 20px; }
.stats-grid { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.stats-grid .num { font-size: 30px; font-weight: 800; color: #ffb300; }
.stats-grid .label { font-size: 13px; color: #cbd5e1; margin-top: 4px; }

.timeline { max-width: 720px; margin: 0 auto; padding: 60px 20px; }
.timeline h2 { text-align: center; font-size: 24px; margin-bottom: 40px; }
.timeline-item { display: flex; gap: 20px; margin-bottom: 30px; }
.timeline-year { flex: 0 0 90px; font-weight: 800; color: #ffb300; font-size: 15px; }
.timeline-text h4 { margin: 0 0 4px 0; font-size: 15px; }
.timeline-text p { margin: 0; font-size: 13.5px; color: #64748b; }

.about-cta { text-align: center; padding: 60px 20px 90px 20px; }
.about-cta h2 { font-size: 24px; margin-bottom: 10px; }
.about-cta p { color: #64748b; margin-bottom: 24px; }
.about-cta a { display: inline-block; background: #ffb300; color: #0f172a; padding: 13px 30px; border-radius: 30px; text-decoration: none; font-weight: 700; }

@media (max-width: 860px) {
    .about-grid { grid-template-columns: 1fr; }
    .values-grid { grid-template-columns: repeat(2, 1fr); }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
}