/* ============================================================================
 * Module : shared/styles/components/legal-page.css
 * Rôle   : Styles partagés pour le contenu slotté des pages "legal/article"
 *          (CGV, confidentialité, mentions légales, à propos…).
 *
 *          Style les classes `.toc`, `.toc-title`, `.toc a`, `.legal-card`
 *          (h2, h3, p, ul, li, a) qui vivent dans le LIGHT DOM (à l'intérieur
 *          des slots de <mda-article-layout>). Le composant lui-même style
 *          les containers `.toc` et `.legal-card` via `::slotted()`, mais
 *          ne peut pas atteindre leur contenu interne — c'est ce CSS qui s'en
 *          charge.
 *
 * Dépend de : tokens.css (couleurs, typo, espacements, transitions)
 *             typography.css (styles texte par défaut)
 * Utilisé par : frontend/public/pages/cgv.html, confidentialite.html,
 *               mentions-legales.html, apropos.html (à venir Sprint 8)
 * ============================================================================ */

/* ─── Container des cartes legales (light DOM) ─── */
/* NB : <mda-article-layout> applique aussi `::slotted(.legal-card)` mais le
 * sélecteur ::slotted ne fonctionne pas systématiquement dans tous les
 * navigateurs/contextes. On duplique ici (light DOM = plus fiable). */

.legal-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 36px;
  border: 1px solid var(--gray-200);
  margin-bottom: var(--space-5);
}

.toc {
  background: var(--brand-50);
  border-radius: var(--radius);
  padding: 20px 28px;
  margin-bottom: var(--space-8);
}

/* ─── Sommaire (TOC) — contenu interne ─── */

.toc-title {
  font-weight: var(--weight-bold);
  color: var(--brand);
  font-size: 0.9rem;
  margin-bottom: 10px;
}

.toc a {
  display: block;
  color: var(--gray-700);
  font-size: 0.88rem;
  text-decoration: none;
  padding: 3px 0;
  transition: color var(--transition-fast);
}

.toc a:hover {
  color: var(--brand);
}

/* ─── Contenu des cartes legales ─── */

.legal-card h2 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: var(--weight-bold);
  color: var(--brand-dark);
  margin-bottom: 10px;
}

.legal-card h3 {
  font-size: 1rem;
  font-weight: var(--weight-semibold);
  color: var(--gray-700);
  margin: 18px 0 8px;
}

.legal-card p {
  margin-bottom: 14px;
  color: var(--gray-700);
  font-size: 0.95rem;
  line-height: 1.7;
}

.legal-card a {
  color: var(--brand-mid);
}

.legal-card a:hover {
  color: var(--brand);
}

.legal-card ul {
  padding-left: 20px;
  margin-bottom: 14px;
}

.legal-card li {
  margin-bottom: 10px;
  color: var(--gray-700);
  font-size: 0.95rem;
  line-height: 1.7;
}

/* ─── Highlight box dans le contenu (ex: page apropos) ─── */
/* NB : le composant <mda-article-layout> style aussi `::slotted(.highlight)`
 * pour le cas où la highlight est directement dans le slot. Ici on cible
 * `.highlight` quel que soit son contexte (utile s'il est imbriqué dans
 * une .legal-card par exemple). */

.highlight {
  background: linear-gradient(135deg, var(--brand-50), var(--brand-100));
  border-left: 4px solid var(--brand);
  padding: 18px 22px;
  border-radius: 8px;
  margin: 16px 0;
}

.highlight strong {
  color: var(--brand-dark);
}

.highlight p {
  color: var(--gray-700);
  font-size: 0.95rem;
  line-height: 1.7;
  margin: 0;
}

/* ─── Info grid (paire/quartet de fiches d'information) ─── */
/* Utilisé sur apropos.html (8 infos société) et potentiellement ailleurs. */

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}

.info-item {
  background: var(--gray-50);
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--gray-200);
}

.info-label {
  font-size: 0.78rem;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.info-value {
  font-size: 0.95rem;
  color: var(--brand-dark);
  font-weight: var(--weight-semibold);
}

@media (max-width: 600px) {
  .info-grid {
    grid-template-columns: 1fr;
  }
}