/* ============================================================================= Vianova — Landing pages acquisition Design system commun aux 4 personas. La couleur d'accent est injectee par la vue : ========================================================================== */ /* --- 1. Tokens ----------------------------------------------------------- */ :root { /* Charte Vianova */ --navy: #1a2c44; --navy-deep: #142236; --blue: #2a3a70; --grey-bg: #f7f8f9; --cream: #fbf7f2; --white: #fff; --ink: #1a2c44; --ink-soft: #4a5a6e; --ink-mute: #77869a; --line: #e4e8ed; /* Accent persona (surcharge inline sur ) */ --accent: #e4633f; --accent-soft: #fdf0eb; --accent-ink: #fff; --radius-s: 10px; --radius: 16px; --radius-l: 24px; --shadow-s: 0 1px 2px rgba(26, 44, 68, .06), 0 2px 8px rgba(26, 44, 68, .05); --shadow: 0 4px 12px rgba(26, 44, 68, .07), 0 16px 40px rgba(26, 44, 68, .08); --shadow-l: 0 8px 24px rgba(26, 44, 68, .09), 0 32px 80px rgba(26, 44, 68, .12); --wrap: 1180px; --gut: clamp(20px, 5vw, 40px); --section: clamp(64px, 9vw, 120px); --ease: cubic-bezier(.22, .61, .36, 1); --font: "Source Sans 3", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-quote: "Newsreader", Georgia, "Times New Roman", serif; } /* --- 2. Reset ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font); font-size: 17px; line-height: 1.6; color: var(--ink); background: var(--white); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg, picture { max-width: 100%; display: block; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } a { color: inherit; } h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; } ul { padding: 0; list-style: none; } /* --- 3. Typographie ------------------------------------------------------ */ .h1 { font-size: clamp(2.05rem, 4.5vw, 3.25rem); line-height: 1.08; letter-spacing: -.028em; font-weight: 600; text-wrap: balance; } .h2 { font-size: clamp(1.75rem, 3.6vw, 2.7rem); line-height: 1.14; letter-spacing: -.022em; font-weight: 600; text-wrap: balance; } .h3 { font-size: clamp(1.2rem, 2vw, 1.42rem); line-height: 1.25; letter-spacing: -.012em; font-weight: 600; } .lead { font-size: clamp(1.06rem, 1.7vw, 1.28rem); line-height: 1.5; color: var(--ink-soft); text-wrap: pretty; } .small { font-size: .93rem; line-height: 1.5; } .mute { color: var(--ink-mute); } .legal { font-size: .8rem; line-height: 1.5; color: var(--ink-mute); } .accent-text { color: var(--accent); } /* --- 4. Layout ----------------------------------------------------------- */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); } .wrap--narrow { max-width: 780px; } .section { padding-block: var(--section); } .section--cream { background: var(--cream); } .section--grey { background: var(--grey-bg); } .section--navy { background: var(--navy); color: #fff; } .section--navy .lead { color: rgba(255, 255, 255, .74); } .section--navy .mute { color: rgba(255, 255, 255, .6); } .stack > * + * { margin-top: 1rem; } .center { text-align: center; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* --- 5. Eyebrow / badges ------------------------------------------------- */ .eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: .42rem .85rem; } .section--navy .eyebrow { background: rgba(255, 255, 255, .1); color: #fff; } .badge { display: inline-block; font-size: .78rem; font-weight: 600; padding: .22rem .55rem; border-radius: 6px; background: var(--accent-soft); color: var(--accent); } /* --- 6. Boutons ---------------------------------------------------------- */ .btn { --btn-bg: var(--accent); --btn-fg: var(--accent-ink); display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 56px; padding: .9rem 1.6rem; border: 0; border-radius: 999px; background: var(--btn-bg); color: var(--btn-fg); font-size: 1.02rem; font-weight: 600; letter-spacing: -.01em; text-decoration: none; transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease), opacity .18s; box-shadow: 0 2px 6px rgba(26, 44, 68, .12); } .btn:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(26, 44, 68, .18); } .btn:active { transform: translateY(0); } .btn--block { width: 100%; } .btn--navy { --btn-bg: var(--blue); --btn-fg: #fff; } .btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); border: 1.5px solid var(--line); box-shadow: none; } .btn--ghost:hover { border-color: var(--ink); box-shadow: none; } .btn--light { --btn-bg: #fff; --btn-fg: var(--navy); } .btn[disabled], .btn[aria-disabled="true"] { opacity: .55; pointer-events: none; } .btn .btn__spinner { display: none; width: 18px; height: 18px; } .btn.is-loading .btn__label { opacity: .65; } .btn.is-loading .btn__spinner { display: block; animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; } /* --- 7. Header ----------------------------------------------------------- */ .header { position: sticky; top: 0; z-index: 60; background: rgba(255, 255, 255, .88); backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s; } .header.is-stuck { border-bottom-color: var(--line); box-shadow: 0 1px 12px rgba(26, 44, 68, .05); } .header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 72px; } .header__brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; } .header__brand img { height: 46px; width: auto; } .header__right { display: flex; align-items: center; gap: 1.1rem; } .header__phone { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; text-decoration: none; color: var(--navy); } .header__phone span { font-size: .97rem; } .header__cta { min-height: 46px; padding: .55rem 1.15rem; font-size: .95rem; } @media (max-width: 720px) { .header__phone span, .header__cta { display: none; } .header__brand img { height: 38px; } } /* --- 8. Hero ------------------------------------------------------------- */ .hero { position: relative; background: radial-gradient(120% 90% at 88% 8%, color-mix(in srgb, var(--accent) 12%, transparent) 0%, transparent 58%), linear-gradient(180deg, var(--cream) 0%, #fff 88%); padding-block: clamp(32px, 5vw, 68px) clamp(48px, 7vw, 88px); overflow: hidden; } .hero__grid { display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: 1fr; align-items: center; } @media (min-width: 940px) { .hero__grid { grid-template-columns: 1.02fr .98fr; gap: 56px; } } .hero__content > * + * { margin-top: 1.15rem; } .hero__title { margin-top: 1.3rem; } .hero__sub { max-width: 33ch; } .hero__reassure { display: flex; flex-wrap: wrap; gap: .55rem 1.4rem; margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line); } .hero__reassure li { display: flex; align-items: center; gap: .5rem; font-size: .95rem; font-weight: 500; color: var(--ink-soft); } .hero__reassure svg { flex: none; color: var(--accent); } /* Visuel hero :