/* ========================================================= THEME TOKENS - Par défaut : suit le système (pas d'attribut data-theme) - Forçage via [data-theme="dark|light"] sur ========================================================= */ :root { --ink: #1f2a27; --ink-soft: #4d5a56; --paper: #f7f3ed; --paper-soft: #fffdf9; --sand: #d6c1a3; --sage: #8ca294; --sage-dark: #496258; --warning: #496258; --line: rgba(31, 42, 39, 0.14); --shadow: 0 28px 70px rgba(31, 42, 39, 0.12); --radius-lg: 32px; --radius-md: 20px; --radius-sm: 12px; --max-width: 1180px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; color: var(--ink); background: var(--paper-soft); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.6; } body.menu-open { overflow: hidden; } /* Bandeau démo */ .demo-banner { width: 100%; overflow: hidden; background: var(--warning); color: #fff; font-weight: 700; white-space: nowrap; position: sticky; top: 0; z-index: 999; } .demo-banner span { display: inline-block; padding-left: 100%; animation: scrollBanner 18s linear infinite; } @keyframes scrollBanner { from { transform: translateX(0); } to { transform: translateX(-100%); } } @media (prefers-reduced-motion: reduce) { .demo-banner span { animation: none; padding-left: 15px; } } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button, input, textarea, select { font: inherit; } .container { width: min(calc(100% - 40px), var(--max-width)); margin-inline: auto; } .eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; color: var(--sage-dark); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; } .eyebrow::before { width: 34px; height: 1px; background: currentColor; content: ""; } h1, h2, h3 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-weight: 500; line-height: 1.08; } h1 { max-width: 780px; font-size: clamp(3.1rem, 7vw, 6.6rem); letter-spacing: -0.055em; } h2 { font-size: clamp(2.4rem, 4.6vw, 4.6rem); letter-spacing: -0.04em; } h3 { font-size: 1.6rem; } p { margin: 0; } .lead { max-width: 680px; color: var(--ink-soft); font-size: clamp(1.05rem, 1.8vw, 1.25rem); } .btn { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; padding: 0 22px; border: 1px solid transparent; border-radius: 999px; cursor: pointer; font-weight: 800; transition: transform 180ms ease, background 180ms ease, color 180ms ease, border-color 180ms ease; } .btn:hover { transform: translateY(-2px); } .btn-primary { color: white; background: var(--ink); } .btn-primary:hover { background: var(--sage-dark); } .btn-secondary { border-color: var(--line); background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px); } .btn-secondary:hover { border-color: var(--sage-dark); } .site-header { position: absolute; z-index: 20; top: 0; left: 0; width: 100%; padding: 24px 0; } .nav-wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; } .brand { display: inline-flex; align-items: center; gap: 12px; color: white; font-family: Georgia, "Times New Roman", serif; font-size: 1.35rem; letter-spacing: 0.02em; z-index: 10; } .brand-mark { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 50%; font-family: Inter, sans-serif; font-size: 0.72rem; font-weight: 900; } .nav-links div.menu ul{ display: flex; align-items: center; gap: 28px; color: white; font-size: 0.94rem; font-weight: 700; list-style: none; } .nav-links div ul li a { position: relative; } .nav-links div ul li a::after { position: absolute; right: 0; bottom: -6px; left: 0; height: 1px; background: currentColor; content: ""; transform: scaleX(0); transform-origin: right; transition: transform 180ms ease; } .nav-links a:hover::after { transform: scaleX(1); transform-origin: left; } .header-cta { min-height: 44px; padding-inline: 18px; color: var(--ink); background: white; } .menu-toggle { display: none; width: 46px; height: 46px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 50%; color: white; background: rgba(255, 255, 255, 0.08); cursor: pointer; } .hero { position: relative; min-height: 940px; overflow: hidden; color: white; background: linear-gradient(90deg, rgba(20, 30, 27, 0.88) 0%, rgba(20, 30, 27, 0.64) 38%, rgba(20, 30, 27, 0.1) 100%), linear-gradient(180deg, rgba(20, 30, 27, 0) 64%, rgba(20, 30, 27, 0.82) 100%), url("https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&w=2000&q=88") center / cover no-repeat; } .hero-inner { position: relative; z-index: 2; display: grid; min-height: 940px; align-content: center; padding-top: 120px; padding-bottom: 160px; } .hero .eyebrow { color: rgba(255, 255, 255, 0.82); } .hero p { max-width: 640px; margin-top: 28px; color: rgba(255, 255, 255, 0.82); font-size: 1.15rem; } .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; } .hero .btn-primary { color: var(--ink); background: white; } .hero .btn-primary:hover { color: white; background: var(--sage-dark); } .hero .btn-secondary { color: white; border-color: rgba(255, 255, 255, 0.38); background: rgba(255, 255, 255, 0.08); } .hero-stats { position: absolute; z-index: 3; right: 0; bottom: 0; left: 0; } .stats-panel { display: grid; grid-template-columns: repeat(3, 1fr); width: min(calc(100% - 40px), var(--max-width)); margin-inline: auto; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.18); border-bottom: none; border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: rgba(247, 243, 237, 0.94); backdrop-filter: blur(16px); } .stat { padding: 30px 34px; color: var(--ink); } .stat + .stat { border-left: 1px solid var(--line); } .stat strong { display: block; font-family: Georgia, "Times New Roman", serif; font-size: 2.25rem; font-weight: 500; line-height: 1; } .stat span { display: block; margin-top: 8px; color: var(--ink-soft); font-size: 0.92rem; } section { padding: 120px 0; } .intro-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 90px; align-items: start; } .intro-copy { display: grid; gap: 24px; } .intro-points { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 10px; } .intro-point { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper-soft); } .intro-point strong { display: block; margin-bottom: 6px; } .intro-point span { color: var(--ink-soft); font-size: 0.93rem; } .services { background: var(--paper); } .section-head { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 52px; } .section-head .lead { max-width: 460px; } .service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .service-card { min-height: 340px; padding: 32px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper-soft); transition: transform 180ms ease, box-shadow 180ms ease; } .service-card:hover { box-shadow: var(--shadow); transform: translateY(-6px); } .service-number { display: grid; width: 44px; height: 44px; margin-bottom: 70px; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--sage-dark); font-size: 0.82rem; font-weight: 900; } .service-card p { margin-top: 14px; color: var(--ink-soft); } .split-feature { display: grid; grid-template-columns: 1fr 1fr; min-height: 700px; } .split-image { min-height: 560px; background: linear-gradient(rgba(31, 42, 39, 0.05), rgba(31, 42, 39, 0.05)), url("https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?auto=format&fit=crop&w=1400&q=88") center / cover no-repeat; } .split-content { display: grid; align-content: center; padding: clamp(60px, 8vw, 120px); background: var(--sage-dark); color: white; } .split-content .eyebrow { color: rgba(255, 255, 255, 0.72); } .split-content p { margin-top: 26px; color: rgba(255, 255, 255, 0.76); font-size: 1.08rem; } .check-list { display: grid; gap: 14px; margin: 30px 0 36px; } .check-item { display: flex; align-items: center; gap: 12px; } .check-item::before { display: grid; flex: 0 0 24px; width: 24px; height: 24px; place-items: center; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 50%; content: "✓"; font-size: 0.75rem; } .split-content .btn { justify-self: start; color: var(--ink); background: white; } .process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 54px; } .process-step { position: relative; padding-top: 26px; border-top: 1px solid var(--line); } .process-step::before { position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--sage-dark); content: ""; } .process-step span { color: var(--sage-dark); font-size: 0.82rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; } .process-step h3 { margin-top: 16px; } .process-step p { margin-top: 12px; color: var(--ink-soft); } .destinations { padding-top: 0; } .destination-grid { display: grid; grid-template-columns: 1.4fr 0.8fr 0.8fr; gap: 18px; margin-top: 48px; } .destination-card { position: relative; min-height: 480px; overflow: hidden; border-radius: var(--radius-lg); background-position: center; background-size: cover; } .destination-card:nth-child(1) { background-image: linear-gradient(180deg, transparent 45%, rgba(20, 30, 27, 0.8) 100%), url("https://images.unsplash.com/photo-1600047509807-ba8f99d2cdde?auto=format&fit=crop&w=1400&q=88"); } .destination-card:nth-child(2) { background-image: linear-gradient(180deg, transparent 45%, rgba(20, 30, 27, 0.8) 100%), url("https://images.unsplash.com/photo-1576941089067-2de3c901e126?auto=format&fit=crop&w=1000&q=88"); } .destination-card:nth-child(3) { background-image: linear-gradient(180deg, transparent 45%, rgba(20, 30, 27, 0.8) 100%), url("https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=1000&q=88"); } .destination-label { position: absolute; right: 28px; bottom: 26px; left: 28px; color: white; } .destination-label small { display: block; margin-bottom: 6px; color: rgba(255, 255, 255, 0.72); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .testimonial { background: var(--ink); color: white; } .quote { max-width: 930px; margin-inline: auto; text-align: center; } .quote-mark { margin-bottom: 18px; color: var(--sand); font-family: Georgia, serif; font-size: 5rem; line-height: 0.7; } .quote blockquote { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2rem, 4vw, 3.6rem); line-height: 1.18; } .quote footer { margin-top: 28px; color: rgba(255, 255, 255, 0.64); } .contact { background: var(--paper); } .contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 80px; align-items: start; } .contact-copy { position: sticky; top: 32px; } .contact-copy p { margin-top: 24px; color: var(--ink-soft); font-size: 1.06rem; } .contact-details { display: grid; gap: 14px; margin-top: 34px; color: var(--ink-soft); } .form-card { padding: 36px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper-soft); box-shadow: var(--shadow); } .form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } .field { display: grid; gap: 8px; } .field.full { grid-column: 1 / -1; } label { font-size: 0.86rem; font-weight: 800; } input, select, textarea { width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm); outline: none; background: white; color: var(--ink); transition: border-color 180ms ease, box-shadow 180ms ease; } input, select { height: 52px; padding: 0 16px; } textarea { min-height: 140px; padding: 14px 16px; resize: vertical; } input:focus, select:focus, textarea:focus { border-color: var(--sage-dark); box-shadow: 0 0 0 4px rgba(73, 98, 88, 0.1); } .form-card .btn { width: 100%; margin-top: 22px; } .form-note { margin-top: 14px; color: var(--ink-soft); font-size: 0.82rem; text-align: center; } .site-footer { padding: 44px 0; color: rgba(255, 255, 255, 0.72); background: #17211e; } .footer-grid { display: flex; align-items: center; justify-content: space-between; gap: 30px; } .footer-brand { color: white; font-family: Georgia, "Times New Roman", serif; font-size: 1.3rem; } .footer-links { display: flex; flex-wrap: wrap; gap: 20px; font-size: 0.9rem; } .demo-badge { position: fixed; z-index: 30; right: 18px; bottom: 18px; padding: 10px 14px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; color: white; background: rgba(31, 42, 39, 0.9); box-shadow: 0 12px 30px rgba(31, 42, 39, 0.18); font-size: 0.76rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; backdrop-filter: blur(10px); } .toast { position: fixed; z-index: 50; right: 24px; bottom: 78px; max-width: 360px; padding: 18px 20px; border-radius: 16px; color: white; background: var(--sage-dark); box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translateY(18px); transition: opacity 180ms ease, transform 180ms ease; } .toast.is-visible { opacity: 1; transform: translateY(0); } @media (max-width: 980px) { .menu-toggle { margin: 5px 0; display: block; } .nav-links div.menu { position: fixed; inset: 0; display: none; padding: 110px 32px 40px; background: rgba(23, 33, 30, 0.98); flex-direction: column; align-items: flex-start; font-size: 1.4rem; } .nav-links div.menu ul { flex-direction: column; align-items: flex-start; } .nav-links div.menu.is-open { display: flex; } .header-cta { display: none; } .menu-toggle { display: grid; place-items: center; z-index: 0; } .intro-grid, .contact-grid { grid-template-columns: 1fr; gap: 48px; } .contact-copy { position: static; } .service-grid, .process-grid { grid-template-columns: 1fr 1fr; } .split-feature { grid-template-columns: 1fr; } .destination-grid { grid-template-columns: 1fr 1fr; } .destination-card:first-child { grid-column: 1 / -1; } } @media (max-width: 700px) { .container { width: min(calc(100% - 28px), var(--max-width)); } section { padding: 82px 0; } .hero, .hero-inner { min-height: 820px; } .hero-inner { padding-bottom: 190px; } .stats-panel { grid-template-columns: 1fr; width: min(calc(100% - 28px), var(--max-width)); } .stat { padding: 18px 24px; } .stat + .stat { border-top: 1px solid var(--line); border-left: 0; } .stat strong { font-size: 1.7rem; } .section-head { align-items: start; flex-direction: column; } .service-grid, .process-grid, .destination-grid, .form-grid, .intro-points { grid-template-columns: 1fr; } .destination-card:first-child { grid-column: auto; } .service-card { min-height: auto; } .service-number { margin-bottom: 42px; } .destination-card { min-height: 400px; } .split-content { padding: 72px 28px; } .form-card { padding: 24px; } .footer-grid { align-items: flex-start; flex-direction: column; } .demo-badge { right: 12px; bottom: 12px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }