/* ============================================================================ IMMOBILIER59 — Main bundle (entrée unique) À charger dans ; importe variables, base, composants. ========================================================================= */ @import url('./variables.css'); @import url('./base.css'); @import url('./components.css'); /* ============================================================================ IMMOBILIER59 — Layouts spécifiques pages ========================================================================= */ /* Page article / dispositif — typographie longue */ .article { max-width: var(--container-narrow); margin: 0 auto; padding-block: var(--space-7); padding-inline: var(--container-padding); font-size: 1.0625rem; line-height: var(--lh-loose); } .article h1 { font-size: clamp(2rem, 3vw + 1rem, 3rem); margin-bottom: var(--space-4); } .article h2 { margin-top: var(--space-7); margin-bottom: var(--space-3); } .article h2::before { content: ''; display: block; width: 48px; height: 1px; background: var(--color-gold-700); margin-bottom: var(--space-3); } .article p { margin-bottom: var(--space-4); } .article ul, .article ol { margin-bottom: var(--space-4); } .article blockquote { border-left: 3px solid var(--color-gold-700); margin: var(--space-5) 0; padding: var(--space-3) var(--space-4); background: var(--color-cream); font-family: var(--font-display); font-size: 1.25rem; font-style: italic; color: var(--color-blue-900); } .article table { width: 100%; border-collapse: collapse; margin: var(--space-4) 0; font-size: 0.95rem; } .article table th, .article table td { padding: var(--space-3); border-bottom: 1px solid var(--border-subtle); text-align: left; } .article table th { background: var(--color-cream); font-weight: var(--fw-semibold); color: var(--color-blue-900); font-size: 0.875rem; letter-spacing: 0.04em; text-transform: uppercase; } .article table td.num, .article table th.num { text-align: right; font-family: var(--font-data); font-feature-settings: 'tnum'; } /* Encart "à retenir" */ .callout { background: linear-gradient(135deg, var(--color-cream), var(--color-gold-100)); border-left: 4px solid var(--color-gold-700); padding: var(--space-4) var(--space-5); border-radius: 0 var(--radius-md) var(--radius-md) 0; margin: var(--space-5) 0; } .callout__title { font-family: var(--font-body); font-size: 0.8rem; font-weight: var(--fw-semibold); color: var(--color-gold-700); letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: var(--space-2); } .callout p:last-child { margin-bottom: 0; } /* CTA inline article */ .cta-inline { margin-block: var(--space-6); padding: var(--space-5); background: var(--color-blue-900); color: var(--color-white); border-radius: var(--radius-md); text-align: center; } .cta-inline h3 { color: var(--color-white); margin-bottom: var(--space-3); margin-top: 0; } .cta-inline p { color: rgba(255, 255, 255, 0.85); margin-bottom: var(--space-4); } /* ============================================================================ ANIMATIONS — fade-in stagger ========================================================================= */ @keyframes fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } .reveal { opacity: 0; } .reveal.is-visible { animation: fade-up 800ms cubic-bezier(0.4, 0, 0.2, 1) forwards; } .reveal--delay-1 { animation-delay: 120ms; } .reveal--delay-2 { animation-delay: 240ms; } .reveal--delay-3 { animation-delay: 360ms; } /* ============================================================================ PRINT ========================================================================= */ @media print { .site-header, .site-footer, .hero__scroll-indicator { display: none !important; } a { color: inherit; text-decoration: none; } .section { padding-block: var(--space-3); } }