:root { /* `only light` — the `only` keyword opts out of UA force-dark / auto-darken behaviour (Samsung Internet, Chrome Android, etc.). Plain `light` lets the browser still override; `only light` doesn't. */ color-scheme: only light; /* Bright gradient — for gold backgrounds (buttons, badges, gold cards). Pairs with dark text. */ --gold-gradient: linear-gradient(to right, #C5A059, #E6D089, #B38B3D, #E6D089, #9B7322); /* Deep gradient — for gold *text* on light bg. The bright gradient's lighter stops (#E6D089) fall to ~1.5:1 contrast on cream. These darker stops give ~5.5–7:1, readable for large headings. */ --gold-gradient-deep: linear-gradient(to right, #785516, #9B7322, #634415, #9B7322, #785516); } body, html { margin: 0; padding: 0; width: 100%; height: 100%; background-color: #fbfbfb; font-family: 'Inter', sans-serif; overflow-x: hidden; color: #1a1a1a; } /* Belt + suspenders for the nav anchor jumps: Tailwind's scroll-smooth utility class on sometimes doesn't get picked up by the JIT CDN, and Safari has known quirks. The explicit declaration here guarantees the behaviour. */ html { scroll-behavior: smooth; color-scheme: only light; } /* Defensive opt-out from browser force-dark (Samsung Internet, Chrome auto-darken). Browsers will only auto-invert sites that have *no* dark-mode rules. By providing this block — which re-asserts the light theme — we tell the UA we handle dark mode ourselves and don't want colour inversion. */ @media (prefers-color-scheme: dark) { :root { color-scheme: only light; } body, html { background-color: #fbfbfb; color: #1a1a1a; } } /* Arrière-plan Canvas pour l'effet de particules d'or */ #canvas-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } /* Conteneur principal */ .perspective-container { z-index: 10; position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 6rem 1rem 2rem; } /* Top nav header — always opaque white */ #main-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: #ffffff; border-bottom: 1px solid rgba(155, 115, 34, 0.15); box-shadow: 0 1px 4px rgba(155, 115, 34, 0.06); } .nav-brand { font-family: 'Arial Pro Bold', 'Arial Bold', Arial, sans-serif; font-weight: 700; font-size: 1.125rem; letter-spacing: 0.3em; text-decoration: none; } .nav-link { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: #1a1a1a; text-decoration: none; position: relative; padding: 0.25rem 0; transition: color 0.2s; } .nav-link:hover { color: #9B7322; } .nav-link::after { content: ''; position: absolute; left: 50%; bottom: -2px; width: 0; height: 1px; background: #9B7322; transform: translateX(-50%); transition: width 0.3s ease; } .nav-link:hover::after { width: 100%; } /* Mobile menu panel */ #mobile-menu { background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(155, 115, 34, 0.15); box-shadow: 0 4px 12px rgba(155, 115, 34, 0.08); } #mobile-menu .nav-link { display: block; padding: 0.875rem 0; border-bottom: 1px solid rgba(155, 115, 34, 0.1); } #mobile-menu .nav-link:last-child { border-bottom: none; } #mobile-menu .nav-link::after { display: none; } /* Anchor targets clear the fixed header */ main[id], section[id] { scroll-margin-top: 5rem; } /* Typographie dorée — uses the deep gradient so it reads on cream bg. */ .text-gold { color: #785516; background: var(--gold-gradient-deep); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } @supports not ((-webkit-background-clip: text) or (background-clip: text)) { .text-gold { background: none; -webkit-text-fill-color: #785516; color: #785516; } } .font-cinzel { font-family: 'Arial Pro Bold', 'Arial Bold', Arial, sans-serif; font-weight: 700; } /* Animations d'apparition */ .fade-in-up { animation: fadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards; opacity: 0; transform: translateY(20px); } @keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } } .delay-1 { animation-delay: 0.2s; } .delay-2 { animation-delay: 0.4s; } .delay-3 { animation-delay: 0.6s; } .delay-4 { animation-delay: 0.8s; } /* Style du bouton */ .btn-gold { background: var(--gold-gradient); color: #000; transition: all 0.3s ease; position: relative; overflow: hidden; border: none; cursor: pointer; } .btn-gold:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(197, 160, 89, 0.2); } /* Sélecteur de langue — light mode */ #lang-button { background: rgba(255, 255, 255, 0.85); border: 1px solid rgba(155, 115, 34, 0.35); color: #1a1a1a; backdrop-filter: blur(10px); } #lang-button:focus { outline: none; border-color: #9B7322; } #lang-list { background: rgba(255, 255, 255, 0.97); border: 1px solid rgba(155, 115, 34, 0.3); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 10px 30px rgba(155, 115, 34, 0.12); } #lang-list li[aria-selected="true"] { background: rgba(155, 115, 34, 0.12); color: #785516; } .flag-img { width: 22px; height: 16px; object-fit: cover; border-radius: 2px; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08); } /* Dropdown "intéressé par" — option list shown by native control */ #interest-select option { background: #ffffff; color: #1a1a1a; } /* ---------- Services marquee (hero) ---------- */ .marquee { position: relative; overflow: hidden; width: 100%; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; padding: 1.5rem 0; /* room for chip shadows (~22px reach below each chip) */ mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%); } .marquee.is-dragging { cursor: grabbing; } .marquee-track { display: flex; align-items: center; width: max-content; will-change: transform; /* Position driven by JS — see the MARQUEE block in