/* ========================================================================= MOEX — Homepage Design system aligné sur la charte officielle MOEX Typo : Space Grotesk (titres/logo) · Manrope (texte) · IBM Plex Mono (données) Couleurs : or #fcb900 · corail #ff8f56 · encre #1c1a17 · papier #faf8f5 ========================================================================= */ /* ---- Fonts (charte officielle MOEX) ---- Space Grotesk : titres + logo · Manrope : texte · IBM Plex Mono : données / libellés Chargées via dans le (perf) plutôt qu'@import bloquant. */ /* ========================================================================= 1. TOKENS ========================================================================= */ :root { /* Marque */ --gold-400: #fcb900; --gold-500: #f59e0b; --gold-600: #d97706; --coral-400: #ff8f56; --coral-500: #f97316; /* Encre chaude (charte) — remplace le navy pour les sections sombres */ --navy-700: #3a342c; --navy-800: #26231e; --navy-900: #1c1a17; /* Surfaces & neutres chauds (charte) */ --bg: #faf8f5; /* papier */ --bg-alt: #f1ece3; --surface: #ffffff; --ink: #26231e; /* texte */ --ink-soft: #5b544a; --ink-faint: #8a7f70; /* gris */ --line: #e5dfd6; /* bordure */ --line-strong: #d9cfc0; /* Ombres douces (teinte chaude) */ --shadow-sm: 0 1px 2px 0 rgb(38 35 30 / .05), 0 1px 1px -1px rgb(38 35 30 / .04); --shadow-md: 0 4px 6px -1px rgb(38 35 30 / .07), 0 2px 4px -2px rgb(38 35 30 / .05); --shadow-lg: 0 18px 40px -18px rgb(38 35 30 / .22), 0 4px 10px -6px rgb(38 35 30 / .10); --shadow-xl: 0 40px 80px -30px rgb(38 35 30 / .35); --radius: 16px; --radius-lg: 24px; --radius-sm: 10px; --wrap: 1180px; --ease: cubic-bezier(.4, 0, .2, 1); } /* ========================================================================= 2. RESET / BASE ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: 'Manrope', system-ui, sans-serif; color: var(--ink); background: var(--bg); line-height: 1.65; font-size: 17px; overflow-x: hidden; } h1, h2, h3, h4 { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); margin: 0; } p { margin: 0; } a { color: inherit; text-decoration: none; } img, svg { display: block; max-width: 100%; } ul { margin: 0; padding: 0; list-style: none; } /* ---- Accessibilité : focus clavier visible ---- */ :where(a, button, summary, [tabindex]):focus-visible { outline: 3px solid var(--gold-500); outline-offset: 2px; border-radius: 6px; } .btn--primary:focus-visible { outline-color: var(--navy-900); } /* ---- Lien d'évitement (skip link) ---- */ .skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--navy-900); color: #fff; padding: 10px 18px; border-radius: 10px; font-weight: 600; transition: top .2s var(--ease); } .skip-link:focus { top: 16px; } /* ========================================================================= 3. LAYOUT ========================================================================= */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; } .section { padding-block: clamp(64px, 9vw, 120px); } .section--tight { padding-block: clamp(48px, 6vw, 80px); } .eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); } /* filet dégradé (ordre flex : après le numéro, avant le libellé) */ .eyebrow::before { content: ""; order: -1; width: 26px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--gold-400), var(--coral-400)); } /* index numéroté éditorial (façon charte « 01 »), en tête */ .eyebrow__n { order: -2; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 13px; font-weight: 500; color: var(--gold-600); } .section-head { max-width: 640px; margin-bottom: 52px; } .section-head h2 { font-size: clamp(28px, 4vw, 42px); margin-top: 16px; } .section-head p { margin-top: 18px; font-size: 18px; color: var(--ink-soft); } /* ========================================================================= 4. BOUTONS (repris de l'extranet : .btn / gold / navy / outline) ========================================================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; font-family: 'Manrope', system-ui, sans-serif; font-size: 15px; font-weight: 600; border: none; border-radius: 14px; cursor: pointer; white-space: nowrap; transition: transform .28s var(--ease), box-shadow .28s var(--ease), background-color .28s var(--ease); } .btn svg { width: 18px; height: 18px; } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--gold-400); color: var(--navy-900); box-shadow: 0 1px 3px rgb(38 35 30 / .12); } .btn--primary:hover { background: #eaad00; box-shadow: 0 10px 24px -8px rgb(252 185 0 / .55); transform: translateY(-1px); } .btn--dark { background: var(--navy-800); color: #fff; } .btn--dark:hover { background: var(--navy-900); transform: translateY(-1px); } .btn--outline { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); } .btn--outline:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--ink-faint); } .btn--ghost { background: transparent; color: var(--ink-soft); } .btn--ghost:hover { color: var(--ink); } .btn--lg { padding: 16px 28px; font-size: 16px; } .btn--light { background: rgba(255,255,255,.12); color: #fff; } .btn--light:hover { background: rgba(255,255,255,.2); } .link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--gold-600); } .link-arrow svg { width: 16px; height: 16px; transition: transform .2s var(--ease); } .link-arrow:hover svg { transform: translateX(3px); } /* ========================================================================= 5. HEADER ========================================================================= */ .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid transparent; transition: border-color .2s var(--ease), background-color .2s var(--ease); } .site-header.is-scrolled { border-color: var(--line); } .nav { display: flex; align-items: center; gap: 32px; height: 72px; } .brand { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; } .brand__logo { display: grid; place-items: center; flex-shrink: 0; transition: transform .3s var(--ease); } .brand:hover .brand__logo { transform: translateY(-2px); } .brand__logo svg { width: 32px; height: 31px; } .brand__word { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 27px; letter-spacing: -.03em; color: var(--ink); } .brand--footer .brand__word { color: #fff; } .nav__links { display: flex; align-items: center; gap: 4px; margin-left: 8px; } .nav__links a { padding: 8px 14px; border-radius: 10px; font-size: 15px; font-weight: 500; color: var(--ink-soft); transition: background-color .15s var(--ease), color .15s var(--ease); } .nav__links a:hover { background: var(--bg-alt); color: var(--ink); } .nav__cta { display: flex; align-items: center; gap: 10px; margin-left: auto; } .nav__toggle { display: none; background: none; border: none; padding: 8px; cursor: pointer; color: var(--ink); } .nav__toggle svg { width: 26px; height: 26px; } /* ========================================================================= 6. HERO ========================================================================= */ .hero { position: relative; padding-block: clamp(56px, 8vw, 104px); overflow: hidden; } /* grille fine estampée — signature discrète, pas de « blob IA » */ .hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(38,35,30,.035) 1px, transparent 1px), linear-gradient(to bottom, rgba(38,35,30,.035) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(120% 80% at 70% 10%, #000 30%, transparent 75%); mask-image: radial-gradient(120% 80% at 70% 10%, #000 30%, transparent 75%); pointer-events: none; } .hero__grid { position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; } .pill { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px 7px 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; font-size: 13.5px; font-weight: 500; color: var(--ink-soft); box-shadow: var(--shadow-sm); } .pill b { background: rgba(252,185,0,.16); color: var(--gold-600); font-weight: 700; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; } .hero h1 { font-size: clamp(38px, 5.4vw, 62px); margin-top: 24px; letter-spacing: -.03em; } .hero h1 .u { position: relative; white-space: nowrap; } /* soulignement or dessiné à la main — écho de la barre d'accent du logo */ .hero h1 .u::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: 6px; height: 12px; background: linear-gradient(90deg, rgba(252,185,0,.55), rgba(255,143,86,.45)); border-radius: 8px; z-index: -1; transform: rotate(-.6deg); } .hero__lead { margin-top: 24px; font-size: 19px; color: var(--ink-soft); max-width: 30em; } .hero__actions { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .hero__note { margin-top: 20px; display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-faint); } .hero__note svg { width: 17px; height: 17px; color: #16a34a; } /* -- Panneau produit (construit avec le vocabulaire UI de l'extranet) -- */ .showcase { position: relative; perspective: 1600px; } .showcase__frame { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); overflow: hidden; transform: rotateY(-4deg) rotateX(2deg); transition: transform .5s var(--ease); } .showcase:hover .showcase__frame { transform: rotateY(0) rotateX(0); } .showcase__bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: var(--navy-800); } .showcase__bar span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.25); } .showcase__bar span:nth-child(1) { background: #ff6058; } .showcase__bar span:nth-child(2) { background: #ffbd2e; } .showcase__bar span:nth-child(3) { background: #28c840; } .showcase__url { margin-left: 10px; font-size: 12px; color: rgba(255,255,255,.55); font-family: ui-monospace, monospace; } .showcase__body { padding: 20px; background: var(--bg); } .mini-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .mini-header h4 { font-size: 15px; } .mini-badge { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: rgba(252,185,0,.16); color: var(--gold-600); } .mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; } .mini-stat { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px; overflow: hidden; } .mini-stat::before { content: ""; position: absolute; inset: 0 auto auto 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--gold-400), var(--coral-400)); } .mini-stat .v { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 22px; } .mini-stat .l { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; color: var(--ink-faint); margin-top: 2px; } .mini-rows { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; } .mini-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 13px; } .mini-row:last-child { border-bottom: none; } .mini-row .doc-ic { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; display: grid; place-items: center; background: rgba(38,35,30,.06); color: var(--navy-700); } .mini-row .doc-ic svg { width: 16px; height: 16px; } .mini-row .grow { flex: 1; min-width: 0; } .mini-row .name { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mini-row .sub { font-size: 11.5px; color: var(--ink-faint); } .chip { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; } .chip--ok { background: rgba(34,197,94,.14); color: #15803d; } .chip--wait { background: rgba(245,158,11,.16); color: #b45309; } /* étiquette flottante « synchro » — rappel du motif flèches du logo */ .showcase__float { position: absolute; bottom: -22px; left: -26px; display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 12px 16px; box-shadow: var(--shadow-lg); } .showcase__float .ring { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, var(--gold-400), var(--coral-400)); color: var(--navy-900); } .showcase__float .ring svg { width: 20px; height: 20px; } .showcase__float .t { font-family: 'Space Grotesk',sans-serif; font-weight: 700; font-size: 14px; line-height: 1.1; } .showcase__float .s { font-size: 12px; color: var(--ink-faint); } /* ========================================================================= 7. BANDEAU CONFIANCE ========================================================================= */ .trust { border-block: 1px solid var(--line); background: var(--bg-alt); } .trust__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 48px; padding-block: 34px; } .trust__label { font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 14.5px; font-weight: 500; color: var(--ink-soft); letter-spacing: 0; max-width: 20em; } .trust__stats { display: flex; flex-wrap: wrap; margin-left: auto; } .trust__stat { padding: 4px 30px; border-left: 1px solid var(--line-strong); } .trust__stat:first-child { border-left: none; padding-left: 0; } .trust__stat .n { font-family: 'Space Grotesk',sans-serif; font-weight: 800; font-size: 34px; color: var(--navy-800); line-height: 1; } .trust__stat .n b { color: var(--gold-500); } .trust__stat .c { font-size: 13.5px; color: var(--ink-soft); margin-top: 6px; } /* ========================================================================= 8. FEATURES ========================================================================= */ .features { border-block: 1px solid var(--line); background: radial-gradient(90% 60% at 100% 0%, rgba(252,185,0,.05), transparent 60%), radial-gradient(70% 50% at 0% 100%, rgba(255,143,86,.05), transparent 60%), var(--bg-alt); } .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .feature { position: relative; padding: 30px 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-md); overflow: hidden; transition: transform .4s var(--ease), box-shadow .4s var(--ease); } .feature:hover { box-shadow: var(--shadow-lg); } .feature__ic { width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 20px; box-shadow: inset 0 0 0 1px rgba(38,35,30,.04); } .feature__ic svg { width: 28px; height: 28px; } .ic--gold { background: linear-gradient(135deg, rgba(252,185,0,.20), rgba(252,185,0,.08)); color: var(--gold-600); } .ic--navy { background: linear-gradient(135deg, rgba(38,35,30,.12), rgba(38,35,30,.04)); color: var(--navy-800); } .ic--coral { background: linear-gradient(135deg, rgba(255,143,86,.20), rgba(255,143,86,.07)); color: var(--coral-500); } .feature h3 { font-size: 21px; } .feature p { margin-top: 11px; font-size: 15.5px; color: var(--ink-soft); } /* Feature large (2 colonnes) */ .feature--wide { grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0; overflow: hidden; } .feature--wide .fw-text { padding: 34px; } .feature--wide .fw-visual { background: radial-gradient(120% 100% at 100% 0%, rgba(252,185,0,.14), transparent 55%), var(--navy-800); padding: 30px; display: flex; align-items: center; justify-content: center; position: relative; } /* ========================================================================= 9. WORKFLOW (comment ça marche) ========================================================================= */ .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 12px; counter-reset: step; } .step { position: relative; padding: 44px 24px 26px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: transform .4s var(--ease), box-shadow .4s var(--ease); } .step:hover { box-shadow: var(--shadow-lg); } /* pastille numérotée */ .step::before { counter-increment: step; content: counter(step); position: absolute; top: -20px; left: 24px; width: 44px; height: 44px; display: grid; place-items: center; font-family: 'Space Grotesk', sans-serif; font-weight: 800; font-size: 18px; color: var(--navy-900); background: linear-gradient(135deg, var(--gold-400), var(--coral-400)); border-radius: 13px; box-shadow: 0 8px 18px -6px rgba(252,185,0,.5); } .step h3 { font-size: 18px; } .step p { margin-top: 8px; font-size: 15px; color: var(--ink-soft); } /* ========================================================================= 10. SPLIT (bénéfices / pour qui) ========================================================================= */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .checklist { margin-top: 24px; display: grid; gap: 14px; } .checklist li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; } .checklist .tick { flex-shrink: 0; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; margin-top: 1px; background: rgba(34,197,94,.14); color: #16a34a; } .checklist .tick svg { width: 15px; height: 15px; } .checklist b { font-weight: 600; } .persona-card { display: grid; gap: 14px; } .persona { display: flex; gap: 16px; align-items: flex-start; padding: 20px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: transform .5s var(--ease), box-shadow .5s var(--ease); } .persona:hover { box-shadow: var(--shadow-lg); } .persona__ic { width: 46px; height: 46px; border-radius: 13px; flex-shrink: 0; display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(38,35,30,.04); } .persona__ic svg { width: 23px; height: 23px; } .persona__tag { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 3px; } .persona h3 { font-size: 16.5px; } .persona p { font-size: 14.5px; color: var(--ink-soft); margin-top: 5px; } /* ========================================================================= 11. QUOTE ========================================================================= */ .quote-band { background: var(--navy-800); color: #fff; position: relative; overflow: hidden; } .quote-band::before { content: ""; position: absolute; top: -80px; right: -60px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(252,185,0,.16), transparent 70%); } .quote { position: relative; max-width: 820px; } .quote__mark { font-family: 'Space Grotesk', sans-serif; font-size: 80px; font-weight: 900; line-height: .6; color: var(--gold-400); } .quote blockquote { margin: 12px 0 0; font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: clamp(22px, 3vw, 30px); line-height: 1.35; letter-spacing: -.01em; } .quote__by { margin-top: 24px; display: flex; align-items: center; gap: 14px; } .quote__by .av { width: 46px; height: 46px; border-radius: 12px; background: linear-gradient(135deg, var(--gold-400), var(--coral-400)); } .quote__by .who b { display: block; font-weight: 700; } .quote__by .who span { font-size: 14px; color: rgba(255,255,255,.6); } /* ========================================================================= 11b. FAQ ========================================================================= */ .faq { background: var(--surface); border-block: 1px solid var(--line); } .section-head--center { margin-inline: auto; text-align: center; } .faq__list { max-width: 780px; margin: 0 auto; display: grid; gap: 12px; } .faq__item { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; transition: box-shadow .3s var(--ease), border-color .3s var(--ease); } .faq__item[open] { box-shadow: var(--shadow-md); border-color: transparent; } .faq__q { list-style: none; cursor: pointer; padding: 20px 22px; font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 17px; color: var(--ink); display: flex; align-items: center; justify-content: space-between; gap: 16px; } .faq__q::-webkit-details-marker { display: none; } .faq__q::after { content: "+"; font-family: 'IBM Plex Mono', monospace; font-size: 22px; line-height: 1; color: var(--gold-600); transition: transform .3s var(--ease); flex-shrink: 0; } .faq__item[open] .faq__q::after { transform: rotate(45deg); } .faq__a { padding: 0 22px 22px; color: var(--ink-soft); font-size: 15.5px; line-height: 1.65; max-width: 64ch; } .faq__a strong { color: var(--ink); font-weight: 600; } /* ========================================================================= 12. CTA FINAL ========================================================================= */ .cta { text-align: center; } .cta__box { position: relative; isolation: isolate; background: radial-gradient(110% 130% at 12% -10%, rgba(252,185,0,.18), transparent 52%), radial-gradient(110% 130% at 100% 110%, rgba(255,143,86,.16), transparent 52%), var(--surface); border: 1px solid var(--line); border-radius: 28px; padding: clamp(48px, 6vw, 80px); box-shadow: var(--shadow-xl); overflow: hidden; } /* grille fine estampée, comme le hero */ .cta__box::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(to right, rgba(38,35,30,.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(38,35,30,.04) 1px, transparent 1px); background-size: 40px 40px; -webkit-mask-image: radial-gradient(80% 80% at 50% 0%, #000, transparent 75%); mask-image: radial-gradient(80% 80% at 50% 0%, #000, transparent 75%); } .cta__box h2 { font-size: clamp(30px, 4.4vw, 46px); } .cta__box p { margin: 18px auto 0; max-width: 34em; font-size: 18px; color: var(--ink-soft); } .cta__actions { margin-top: 34px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } /* ========================================================================= 13. FOOTER ========================================================================= */ .site-footer { background: var(--navy-900); color: rgba(255,255,255,.72); } .footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; padding-block: 64px 40px; } .footer-brand p { margin-top: 16px; font-size: 14.5px; color: rgba(255,255,255,.55); max-width: 30ch; } .footer-brand .made { margin-top: 20px; font-size: 13px; color: rgba(255,255,255,.45); display: inline-flex; align-items: center; gap: 8px; } .footer-brand .made b { color: var(--gold-400); font-weight: 600; } .footer-col h3 { font-family: inherit; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: rgba(255,255,255,.5); margin-bottom: 16px; } .footer-col a { display: block; padding: 6px 0; font-size: 14.5px; color: rgba(255,255,255,.72); transition: color .15s var(--ease); } .footer-col a:hover { color: var(--gold-400); } .footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding-block: 24px; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; font-size: 13.5px; color: rgba(255,255,255,.45); } .footer-bottom nav { display: flex; gap: 20px; flex-wrap: wrap; } .footer-bottom a:hover { color: #fff; } /* ========================================================================= 14. RÉVÉLATION AU SCROLL ========================================================================= */ /* Entrée via `translate` (propriété distincte de `transform`) pour ne pas entrer en conflit avec le `transform` du survol des cartes. La transition inclut box-shadow + transform : le survol des cartes .reveal reste fluide. */ .reveal { opacity: 0; translate: 0 22px; transition: opacity .6s var(--ease), translate .6s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease); } .reveal.in { opacity: 1; translate: 0; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; translate: 0; transition: none; } html { scroll-behavior: auto; } .showcase__frame { transform: none; } } /* ========================================================================= 15. RESPONSIVE ========================================================================= */ @media (max-width: 960px) { .hero__grid { grid-template-columns: 1fr; gap: 48px; } .showcase { max-width: 520px; } .showcase__frame { transform: none; } .split { grid-template-columns: 1fr; gap: 40px; } .feature-grid { grid-template-columns: repeat(2, 1fr); } .feature--wide { grid-column: span 2; } .steps { grid-template-columns: repeat(2, 1fr); } .step::after { display: none; } .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 720px) { body { font-size: 16px; } .nav__links, .nav__cta { display: none; } .nav { justify-content: space-between; } .nav__toggle { display: block; } .nav.is-open { position: relative; } .nav__links.is-open { display: flex; flex-direction: column; align-items: stretch; position: absolute; top: 72px; left: 0; right: 0; background: var(--surface); border-bottom: 1px solid var(--line); padding: 12px; gap: 4px; box-shadow: var(--shadow-lg); margin: 0; } .feature-grid { grid-template-columns: 1fr; } .feature--wide { grid-column: span 1; grid-template-columns: 1fr; } .feature--wide .fw-visual { display: none; } .steps { grid-template-columns: 1fr; } .trust__stats { margin-left: 0; } .footer-grid { grid-template-columns: 1fr; gap: 32px; } .showcase__float { left: 0; bottom: -16px; } } /* ========================================================================= ACCÈS EN PRÉVERSION — overlay JS temporaire (à retirer avant l'ouverture) ========================================================================= */ #access-gate { display: none; } html.gate-locked #access-gate { display: flex; position: fixed; inset: 0; z-index: 9999; align-items: center; justify-content: center; padding: 24px; background: radial-gradient(90% 70% at 100% 0%, rgba(252,185,0,.10), transparent 55%), var(--navy-900); color: #fff; } html.gate-locked body { overflow: hidden; } .gate-card { width: 100%; max-width: 440px; text-align: center; } .gate-logo { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 34px; } .gate-logo svg { width: 34px; height: 33px; } .gate-logo .w { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 28px; letter-spacing: -.03em; color: #fff; } .gate-eyebrow { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: #e0a24d; margin-bottom: 12px; } .gate-title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: clamp(22px, 4vw, 28px); line-height: 1.2; color: #fff; margin-bottom: 28px; letter-spacing: -.02em; } #gate-form { display: flex; gap: 10px; } #gate-input { flex: 1; min-width: 0; padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.06); color: #fff; font-size: 16px; font-family: 'Manrope', sans-serif; } #gate-input::placeholder { color: rgba(255,255,255,.4); } #gate-input:focus { outline: none; border-color: var(--gold-400); background: rgba(255,255,255,.1); } #gate-form button { padding: 14px 24px; border: none; border-radius: 12px; cursor: pointer; background: linear-gradient(135deg, var(--gold-400), var(--coral-400)); color: var(--navy-900); font-weight: 700; font-size: 15px; font-family: 'Manrope', sans-serif; } #gate-form button:hover { filter: brightness(1.05); } .gate-error { margin-top: 14px; color: var(--coral-400); font-size: 14px; font-weight: 500; }