/* Style des pages de contenu SEO statiques (servies hors SPA par Cloudflare Pages). On-brand : indigo (#4f46e5) + teal (#0d9488), clair et lisible, responsive. */ /* Noto Color Emoji : Windows (Chrome/Edge) affiche sinon les drapeaux en initiales. */ @import url("https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap"); :root { --indigo: #4f46e5; --indigo-d: #4338ca; --teal: #0d9488; --ink: #0f172a; --slate: #475569; --line: #e2e8f0; --bg: #f8fafc; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Noto Color Emoji"; color: var(--ink); background: var(--bg); line-height: 1.65; } a { color: var(--indigo); } .wrap { max-width: 820px; margin: 0 auto; padding: 0 20px; } /* En-tête / nav */ header.site { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; } header.site .wrap { display: flex; align-items: center; justify-content: space-between; height: 60px; } .brand { font-weight: 900; font-size: 20px; color: var(--ink); text-decoration: none; } .brand span { color: var(--teal); } .nav a { margin-left: 18px; font-weight: 600; font-size: 14px; text-decoration: none; color: var(--slate); } /* Héros */ .hero { background: radial-gradient(800px 340px at 80% -10%, rgba(45,212,191,.35), transparent 60%), linear-gradient(135deg, #4f46e5 0%, #6d28d9 50%, #0f766e 100%); color: #fff; padding: 56px 0 64px; } .hero h1 { font-size: clamp(28px, 5vw, 44px); line-height: 1.15; margin: 0 0 14px; font-weight: 900; } .hero p { font-size: 18px; opacity: .92; margin: 0 0 26px; max-width: 620px; } .btn { display: inline-block; background: #fff; color: var(--indigo); font-weight: 800; padding: 14px 26px; border-radius: 14px; text-decoration: none; font-size: 16px; box-shadow: 0 10px 30px rgba(2,6,23,.25); transition: transform .12s ease; } .btn:hover { transform: translateY(-2px); } .btn.alt { background: var(--indigo); color: #fff; } /* Contenu */ main { padding: 40px 0 64px; } main h2 { font-size: 26px; margin: 40px 0 14px; } main h3 { font-size: 19px; margin: 26px 0 6px; } main p { color: #1e293b; } /* Cartes destinations */ .dest { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; margin: 12px 0; } .dest .flag { font-size: 30px; line-height: 1; } .dest .body { flex: 1; } .dest .body strong { font-size: 17px; } .dest .price { color: var(--teal); font-weight: 800; white-space: nowrap; } .dest .body p { margin: 4px 0 0; font-size: 14px; color: var(--slate); } /* Liens entre pages budget */ .budgets { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; } .budgets a { background: #eef2ff; color: var(--indigo); font-weight: 700; text-decoration: none; padding: 8px 14px; border-radius: 999px; font-size: 14px; } .cta-band { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 28px; text-align: center; margin: 40px 0; } .cta-band h2 { margin: 0 0 8px; } .cta-band p { color: var(--slate); margin: 0 0 18px; } .note { font-size: 13px; color: #94a3b8; } footer.site { border-top: 1px solid var(--line); background: #fff; padding: 28px 0; margin-top: 40px; } footer.site p { color: var(--slate); font-size: 13px; margin: 6px 0; } footer.site a { color: var(--slate); margin-right: 16px; font-size: 13px; } /* Mode sombre : la classe `dark` est posée sur par le script inline de chaque page (qui lit le thème choisi dans l'app via localStorage). Le héros en dégradé reste identique (beau sur fond clair comme sombre). */ html.dark { --ink: #f1f5f9; --slate: #94a3b8; --line: #1e293b; --bg: #0b1220; } html.dark body { background: var(--bg); color: var(--ink); } html.dark header.site, html.dark footer.site, html.dark .dest, html.dark .cta-band { background: #0f172a; border-color: var(--line); } html.dark .brand, html.dark .dest .body strong, html.dark main h2, html.dark main h3 { color: #f1f5f9; } html.dark main p, html.dark .cta-band p { color: #cbd5e1; } html.dark .budgets a { background: #1e293b; color: #c7d2fe; }