/* ========================================================= AZUR — Base styles : reset + typography + primitives ========================================================= */ /* ----- Reset ciblé ----- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; padding: 0; font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img, picture, video, canvas, svg { display: block; max-width: 100%; } button { font-family: inherit; cursor: pointer; background: none; border: 0; padding: 0; color: inherit; } a { color: var(--majorelle); text-decoration: none; transition: color var(--t-fast); } a:hover { color: var(--majorelle-deep); } input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; } /* ----- Typography ----- */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: var(--fw-extra); line-height: var(--lh-snug); /* Pas de color forcé : on hérite du parent (--ink sur , --white sur cards sombres) */ color: inherit; letter-spacing: var(--ls-snug); margin: 0 0 var(--sp-4); } h1 { font-size: var(--fs-h1-page); letter-spacing: var(--ls-tight); line-height: 1; } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } h4 { font-size: var(--fs-h4); } p { margin: 0 0 var(--sp-4); line-height: var(--lh-relaxed); color: var(--ink-muted); } strong, b { font-weight: var(--fw-bold); /* Pas de color forcé : hérite du parent (--ink ou --white selon contexte) */ color: inherit; } em, i { font-style: italic; } small { font-size: var(--fs-small); } code, pre, kbd { font-family: var(--font-mono); } /* Headings = italic gold (signature stylistique du design AZUR) */ h1 i, h2 i, h3 i { font-style: italic; font-weight: var(--fw-medium); color: var(--majorelle); } /* ----- Container ----- */ .azur-container { max-width: var(--container-max); margin: 0 auto; padding-left: var(--sp-5); padding-right: var(--sp-5); } .azur-container--narrow { max-width: var(--container-narrow); } .azur-container--tight { max-width: var(--container-tight); } /* ----- Primitive buttons ----- */ .azur-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: 14px 24px; border-radius: var(--r-md); font-family: var(--font-sans); font-weight: var(--fw-extra); font-size: var(--fs-small); letter-spacing: var(--ls-normal); text-decoration: none; cursor: pointer; border: 0; transition: transform var(--t-base), box-shadow var(--t-base), background var(--t-base), color var(--t-base), border-color var(--t-base); white-space: nowrap; } .azur-btn--majorelle { background: var(--majorelle); color: var(--white); box-shadow: var(--sh-glow-majorelle); } .azur-btn--majorelle:hover { background: var(--majorelle-deep); color: var(--white); transform: translateY(-2px); box-shadow: 0 20px 44px rgba(0, 63, 163, 0.45); } .azur-btn--gold { background: var(--gold); color: var(--ink); box-shadow: var(--sh-glow-gold); } .azur-btn--gold:hover { background: var(--gold-deep); color: var(--ink); transform: translateY(-2px); box-shadow: 0 20px 44px rgba(255, 213, 74, 0.55); } .azur-btn--ink { background: var(--ink); color: var(--gold); box-shadow: var(--sh-glow-ink); } .azur-btn--ink:hover { background: #1a1f3d; color: var(--gold); transform: translateY(-2px); box-shadow: 0 18px 40px rgba(13, 18, 48, 0.30); } .azur-btn--ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); } .azur-btn--ghost:hover { border-color: var(--majorelle); color: var(--majorelle); } .azur-btn--lg { padding: 18px 28px; font-size: 15px; border-radius: var(--r-md); } /* ----- Eyebrow (label uppercase muted gold) ----- */ .azur-eyebrow { display: inline-block; font-family: var(--font-sans); font-size: var(--fs-eyebrow); font-weight: var(--fw-extra); letter-spacing: var(--ls-wide); color: var(--majorelle); text-transform: uppercase; margin-bottom: var(--sp-3); } .azur-eyebrow::before { content: '— '; } /* ----- Pills ----- */ .azur-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--r-pill); font-size: var(--fs-eyebrow); font-weight: var(--fw-extra); letter-spacing: 0.10em; text-transform: uppercase; } .azur-pill--gold { background: var(--gold); color: var(--ink); } .azur-pill--ink { background: var(--ink); color: var(--gold); } /* ----- Accessibility ----- */ :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ----- Responsive headings ----- */ @media (max-width: 720px) { h1 { letter-spacing: -0.035em; } }