/* mysite/static/css/viepriveemondroit-page.css
   Le socle de mise en page des pages de contenu Wagtail.

   Extrait le 2026-09-28 : ce bloc etait copie a l identique dans trois gabarits
   (content_page, glossary_page, statistics_page) — 2 730 caracteres servis en
   clair dans le HTML de chaque page. Il vit desormais ici, charge une fois et
   mis en cache par le navigateur.

   Il consomme les jetons de sites/viepriveemondroit.com/theme.css, que base.html
   charge juste avant : sans ce fichier, var(--site-primary) et var(--bg-primary)
   ne sont definis nulle part, et toutes ces declarations sont invalides.
*/
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--text-primary);
    background: var(--bg-primary);
    line-height: var(--leading-relaxed);
    min-height: 100vh;
    padding-top: 0;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.footer-vpmd { margin-top: 0; }

a { color: var(--site-primary); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--site-primary-dark); }

.container { max-width: var(--container-lg); margin: 0 auto; padding: 0 1.25rem; }

.page-header {
    background: linear-gradient(135deg, var(--brand-gradient-start, #0a4f8f) 0%, var(--brand-gradient-mid, #0a3a6b) 50%, var(--brand-gradient-end, #0b1730) 100%);
    color: var(--text-inverse);
    padding: 3rem 1.5rem 2rem;
    text-align: center;
    margin-bottom: var(--spacing-xl);
    position: relative;
    overflow: hidden;
}

.page-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 50%, var(--overlay-white-10) 0%, transparent 60%);
    pointer-events: none;
}

.page-header__content {
    position: relative;
    z-index: 1;
    max-width: var(--container-md);
    margin: 0 auto;
}

.page-header__title {
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
}

.content-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    padding: var(--spacing-xl-2xl);
    margin-bottom: var(--spacing-xl);
    transition: background-color 0.3s ease;
}

.content-card h2 {
    font-size: var(--text-2xl);
    margin-bottom: var(--spacing-md);
    color: var(--site-primary);
}

.content-card h3 {
    font-size: var(--text-xl);
    margin-bottom: var(--spacing-sm-md);
    color: var(--text-primary);
}

.content-card p {
    margin-bottom: var(--spacing-md);
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
}

.content-card ul, .content-card ol {
    margin-bottom: var(--spacing-md);
    padding-left: var(--spacing-lg);
    color: var(--text-secondary);
}

.content-card li {
    margin-bottom: var(--spacing-sm);
}

.content-card a {
    color: var(--site-primary);
    text-decoration: underline;
}

.content-card a:hover {
    color: var(--site-primary-dark);
}

@media (max-width: 768px) {
    .page-header { padding: 2rem 1rem 1.5rem; }
    .page-header__title { font-size: 1.5rem; }
    .content-card { padding: 1.5rem; }
    .container { padding: 0 1rem; }
}