:root { --bg-top: #faf6ef; --bg-bottom: #f3ede2; --surface: #ffffff; --surface-soft: #fffaf3; --text-main: #1f2937; --text-muted: #6b7280; --line: #e4dccf; --accent: #ca8a04; --accent-dark: #a16207; } body { min-height: 100vh; color: var(--text-main); background: radial-gradient(circle at 12% 18%, rgba(255, 209, 126, 0.24), transparent 32%), radial-gradient(circle at 86% 10%, rgba(124, 76, 20, 0.24), transparent 30%), radial-gradient(circle at 70% 78%, rgba(255, 198, 105, 0.18), transparent 34%), linear-gradient(165deg, #efdfbd 0%, #d4b27f 52%, #be9153 100%); background-attachment: fixed; font-family: "Manrope", "Segoe UI", sans-serif; } body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(rgba(255, 255, 255, 0.55) 0.9px, transparent 0.9px); background-size: 4px 4px; opacity: 0.08; } /* Variante optionnelle un peu plus festive: ajouter class="bg-festive-plus" sur */ body.bg-festive-plus { background: radial-gradient(circle at 8% 15%, rgba(212, 163, 67, 0.24), transparent 33%), radial-gradient(circle at 90% 12%, rgba(190, 145, 56, 0.2), transparent 31%), radial-gradient(circle at 74% 80%, rgba(212, 163, 67, 0.16), transparent 34%), linear-gradient(165deg, #f9f4ea 0%, #eddcc0 55%, #e1cfb1 100%); } .site-shell { min-height: 100vh; position: relative; z-index: 2; } .champagne-bubbles { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 3; } .bubble { position: absolute; bottom: -22vh; left: var(--left, 50%); width: var(--size, 9px); height: var(--size, 9px); border-radius: 50%; border: 1px solid rgba(255, 248, 226, var(--outline, 0.88)); background: radial-gradient(circle at 30% 28%, rgba(255, 255, 255, var(--peak, 0.96)), rgba(255, 238, 194, 0.76) 42%, rgba(255, 255, 255, 0) 76%); box-shadow: 0 0 16px rgba(255, 218, 132, var(--glow, 0.58)), 0 0 36px rgba(255, 244, 210, 0.28); opacity: 0; mix-blend-mode: normal; animation-name: bubble-rise; animation-duration: var(--duration, 30s); animation-delay: var(--delay, 0s); animation-timing-function: linear; animation-iteration-count: infinite; } @keyframes bubble-rise { 0% { transform: translate3d(0, 0, 0) scale(0.85); opacity: 0; } 10% { opacity: var(--peak, 0.86); } 78% { opacity: var(--trail, 0.36); } 100% { transform: translate3d(var(--drift, 0), -132vh, 0) scale(1.15); opacity: 0; } } .event-title { font-family: "Playfair Display", Georgia, serif; font-weight: 700; } .event-badge { display: inline-block; padding: 0.35rem 0.7rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; background: rgba(202, 138, 4, 0.15); color: var(--accent-dark); } .timeline-wrap { overflow-x: auto; overflow-y: visible; padding-top: 0.5rem; padding-bottom: 0.4rem; } .timeline-nav { display: flex; gap: 1rem; min-width: 560px; } .timeline-nav li { position: relative; flex: 1; text-align: center; } .timeline-nav li::after { content: ""; position: absolute; top: 0.9rem; left: calc(50% + 1.15rem); width: calc(100% - 2.2rem); border-top: 2px dashed var(--line); } .timeline-nav li:last-child::after { display: none; } .timeline-nav a, .timeline-nav span { display: inline-block; width: 100%; text-decoration: none; color: var(--text-muted); font-weight: 600; padding: 0.3rem 0.6rem; transition: color 0.2s ease, transform 0.2s ease; } .timeline-nav a:hover { color: var(--accent-dark); transform: translateY(-1px); } .timeline-nav li::before { content: ""; display: block; margin: 0 auto 0.35rem; width: 0.8rem; height: 0.8rem; border-radius: 50%; border: 2px solid var(--line); background: #fff; box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.9); } .timeline-nav li.is-active::before { border-color: var(--accent-dark); background: var(--accent); } .timeline-nav li.is-active a, .timeline-nav li.is-active span { color: var(--accent-dark); } .timeline-nav li.is-locked span { opacity: 0.65; } .shadow-soft { background: var(--surface); border-radius: 1rem; box-shadow: 0 20px 35px rgba(31, 41, 55, 0.08); } .section-kicker { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: var(--accent-dark); } .hint-box { border: 1px solid var(--line); background: var(--surface-soft); border-radius: 0.75rem; padding: 0.9rem 1rem; } .info-tile { height: 100%; border: 1px solid var(--line); border-radius: 0.85rem; padding: 1rem; background: #fffdfa; } .tile-label { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent-dark); } .btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); border: none; } .btn-primary:hover, .btn-primary:focus { background: linear-gradient(135deg, #b7791f, #8b5e0b); } .form-control:focus { border-color: rgba(202, 138, 4, 0.65); box-shadow: 0 0 0 0.25rem rgba(202, 138, 4, 0.2); } @media (max-width: 576px) { .event-title { font-size: 1.5rem; } .timeline-nav { gap: 0.5rem; } .invitation-video-wrap { margin-left: -0.5rem; margin-right: -0.5rem; } .invitation-video-ratio { --bs-aspect-ratio: 62%; border-radius: 0.5rem !important; } } @media (max-width: 991px) { body { background-attachment: scroll; } .bubble:nth-child(n+151) { display: none; } .bubble { box-shadow: 0 0 14px rgba(255, 218, 132, 0.44), 0 0 28px rgba(255, 244, 210, 0.24); } } @media (max-width: 576px) { .bubble:nth-child(n+91) { display: none; } } @media (prefers-reduced-motion: reduce) { .bubble { animation: none; opacity: 0.16; } }