/* ============================================================
   TOUITIGROUP — about.css
   Section « À propos » : image de fond décorative (IMG-089)
   + voile + contenu centré + 4 cartes.
   Chargé par : index.html, ar/index.html (section #about)
   et fr|ar/a-propos/ (en tête de page, variante --page).
   Variables (--gold, --white, --black) : identity.css ou CSS de index.html.
   ============================================================ */

.about-section { position: relative; padding: 120px 40px; overflow: hidden; background: var(--black); }
.about-section .about-bg-wrap { position: absolute; inset: 0; overflow: hidden; z-index: 0; } /* prioritaire sur .img-wrap (images.css) */
.about-section .about-bg-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.about-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, rgba(10,10,10,0.80) 0%, rgba(10,10,10,0.75) 50%, rgba(10,10,10,0.85) 100%);
}
.about-content { position: relative; z-index: 2; max-width: 1100px; margin: 0 auto; text-align: center; color: var(--white); }
.about-label { display: inline-block; font-size: 12px; letter-spacing: 0.2em; color: var(--gold); font-weight: 600; text-transform: uppercase; margin-bottom: 16px; }
.about-title { font-size: clamp(36px, 5vw, 64px); font-weight: 800; line-height: 1.1; margin: 0 0 20px; color: var(--white); }
.about-title .about-label { display: block; line-height: 1.4; } /* libellé intégré au h1 (page dédiée) */
.about-divider { width: 60px; height: 3px; background: var(--gold); margin: 0 auto 30px; }
.about-subtitle { font-size: 20px; font-weight: 600; color: var(--gold); max-width: 700px; margin: 0 auto 30px; }
.about-content .about-text { font-size: 16px; line-height: 1.7; color: rgba(255,255,255,0.82); max-width: 800px; margin: 0 auto 20px; }
.about-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 50px; text-align: start; }
.about-card { padding: 24px; border: 1px solid rgba(201,168,76,0.3); border-radius: 8px; background: rgba(10,10,10,0.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.about-card-label { display: block; font-size: 10px; letter-spacing: 0.15em; color: var(--gold); font-weight: 600; text-transform: uppercase; }
.about-card-title { font-size: 16px; font-weight: 700; margin: 8px 0; color: var(--white); }
.about-card-text { font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.65); margin: 0; }
.about-more { font-size: 13px; margin: 32px 0 0; }
.about-more a { color: var(--gold); text-decoration: underline; }

/* Page dédiée /a-propos/ : section en tête, sous la barre de navigation fixe */
.about-section--page { padding-top: 160px; }
.about-breadcrumb { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-bottom: 28px; }
.about-breadcrumb a { color: var(--gold); text-decoration: none; }
.about-breadcrumb a:hover { text-decoration: underline; }
.about-breadcrumb span { margin: 0 8px; }
.about-cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px 28px; margin-top: 44px; }

/* Arabe : pas d'espacement des lettres (accueil : body.ar ; pages AR : html[lang="ar"]) */
body.ar .about-label, body.ar .about-card-label,
html[lang="ar"] .about-label, html[lang="ar"] .about-card-label,
html[lang="ar"] .about-breadcrumb { letter-spacing: 0; }

/* Boutons placés dans un bloc .prose : « .prose a » (identity.css) les passait en doré souligné
   → texte doré sur bouton doré, illisible. On rend aux boutons leurs couleurs. */
.prose .btn-row .btn-primary { color: var(--black); text-decoration: none; }
.prose .btn-row .btn-secondary { color: var(--white); text-decoration: none; }
.section-light .prose .btn-row .btn-secondary { color: var(--ink); }

@media (min-width: 769px) and (max-width: 1024px) {
  .about-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .about-section { padding: 80px 24px; }
  .about-section--page { padding-top: 120px; }
  .about-title { font-size: 32px; }
  .about-cards { grid-template-columns: 1fr; gap: 12px; }
  .about-content .about-text { font-size: 15px; }
  .about-cta { flex-direction: column; }
}