:root {
    --primary: #9b7e7e;
    --accent: #d4a373;
    --bg: #f5f1ec;
    --bg-soft: #fffaf5;
    --text: #2f2d2c;
    --muted: #756a66;
    --font-serif: 'Playfair Display', serif;
    --font-sans: 'Inter', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    overflow: hidden;
    height: 100%;
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg);
    color: var(--text);
    line-height: 1.6;
    /* Lenis gère le scroll sur la fenêtre, on évite les conflits ici */
}

/* Pendant le login, on bloque tout */
body.login-open {
    overflow: hidden !important;
    height: 100vh;
}

/* Une fois prêt, on laisse Lenis ou le scroll natif respirer */
body.site-ready {
    overflow-x: hidden;
}

h1, h2, h3, .playfair {
    font-family: var(--font-serif);
    font-weight: 700;
}

#smooth-wrapper {
    width: 100%;
    min-width: 100vw;
    position: relative;
    overflow: visible; /* Laisser Lenis gérer le contenu */
}

#smooth-content {
    width: 100%;
    position: relative;
}

.hero-section {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(circle at 20% 15%, rgba(212, 163, 115, 0.14), transparent 38%),
        radial-gradient(circle at 84% 85%, rgba(155, 126, 126, 0.15), transparent 44%),
        radial-gradient(circle at 60% 40%, rgba(212, 163, 115, 0.06), transparent 50%),
        linear-gradient(160deg, #fefcf9 0%, var(--bg) 58%, #f6efe8 100%);
}

/* Halo central qui respire */
.hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(212, 163, 115, 0.07) 0%, transparent 70%);
    animation: hero-breathe 6s ease-in-out infinite;
    z-index: -1;
}

.hero-section::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 72% 62% at 50% 48%, transparent 58%, rgba(92, 64, 64, 0.06) 100%),
        linear-gradient(180deg, rgba(255, 252, 249, 0.18), rgba(245, 241, 236, 0.08));
    pointer-events: none;
    z-index: 0;
}

@keyframes hero-breathe {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50%       { opacity: 1;   transform: scale(1.06); }
}

.hero-bg-orb {
    position: absolute;
    border-radius: 999px;
    filter: blur(10px);
    z-index: -1;
}

.hero-bg-orb-a {
    width: clamp(220px, 34vw, 480px);
    height: clamp(220px, 34vw, 480px);
    background: radial-gradient(circle, rgba(212, 163, 115, 0.28) 0%, rgba(212, 163, 115, 0) 70%);
    top: -8%;
    left: -6%;
}

.hero-bg-orb-b {
    width: clamp(280px, 38vw, 560px);
    height: clamp(280px, 38vw, 560px);
    background: radial-gradient(circle, rgba(155, 126, 126, 0.24) 0%, rgba(155, 126, 126, 0) 72%);
    bottom: -16%;
    right: -8%;
}

.hero-bg-orb-c {
    width: clamp(180px, 28vw, 380px);
    height: clamp(180px, 28vw, 380px);
    background: radial-gradient(circle, rgba(212, 163, 115, 0.13) 0%, rgba(212, 163, 115, 0) 70%);
    top: 30%;
    right: 5%;
    filter: blur(30px);
    animation: orb-c-drift 12s ease-in-out infinite;
}

@keyframes orb-c-drift {
    0%, 100% { transform: translate(0, 0); }
    50%       { transform: translate(-20px, -30px); }
}

/* ── Particules flottantes ── */
.hero-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.hero-particle {
    position: absolute;
    color: var(--accent);
    animation: particle-float linear infinite;
    font-style: normal;
    animation-fill-mode: both;
}

.hp-1  { left: 8%;  top: 18%; font-size: 0.75rem; animation-duration: 9s;   animation-delay: 0s;   }
.hp-2  { left: 18%; top: 72%; font-size: 1.1rem;  animation-duration: 11s;  animation-delay: 1.5s; color: var(--primary); }
.hp-3  { left: 78%; top: 14%; font-size: 0.65rem; animation-duration: 8s;   animation-delay: 0.8s; }
.hp-4  { left: 88%; top: 60%; font-size: 1.4rem;  animation-duration: 13s;  animation-delay: 2.2s; color: var(--muted); }
.hp-5  { left: 5%;  top: 50%; font-size: 0.9rem;  animation-duration: 10s;  animation-delay: 3s;   color: var(--primary); }
.hp-6  { left: 55%; top: 82%; font-size: 0.6rem;  animation-duration: 7s;   animation-delay: 1s;   }
.hp-7  { left: 70%; top: 35%; font-size: 1.2rem;  animation-duration: 12s;  animation-delay: 4s;   color: var(--muted); }
.hp-8  { left: 40%; top: 8%;  font-size: 0.7rem;  animation-duration: 9.5s; animation-delay: 0.4s; }

@keyframes particle-float {
    0%   { opacity: 0;    transform: translateY(0)     rotate(0deg)   scale(0.8); }
    15%  { opacity: 0.45; }
    50%  { opacity: 0.3;  transform: translateY(-30px)  rotate(180deg) scale(1.1); }
    85%  { opacity: 0.4; }
    100% { opacity: 0;    transform: translateY(-60px)  rotate(360deg) scale(0.8); }
}

/* ── Ornement au-dessus du kicker ── */
.hero-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    margin-bottom: 1.2rem;
}

.hero-orn-line {
    display: block;
    width: 40px;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--accent));
}

.hero-ornament .hero-orn-line:last-child {
    background: linear-gradient(to left, transparent, var(--accent));
}

.hero-orn-gem {
    font-size: 0.55rem;
    color: var(--accent);
    animation: gem-pulse 3s ease-in-out infinite;
}

@keyframes gem-pulse {
    0%, 100% { opacity: 0.6; transform: scale(1)    rotate(0deg); }
    50%       { opacity: 1;   transform: scale(1.35) rotate(45deg); }
}

.hero-content {
    max-width: 980px;
    padding: clamp(1.4rem, 2.4vw, 2.4rem) clamp(1.1rem, 2.7vw, 2.8rem);
    position: relative;
    z-index: 1;
    border-radius: 30px;
    background: linear-gradient(180deg, rgba(255, 252, 248, 0.52), rgba(255, 252, 248, 0.24));
    border: 1px solid rgba(212, 163, 115, 0.2);
    backdrop-filter: blur(3px);
    box-shadow:
        0 20px 50px rgba(110, 85, 85, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.hero-kicker {
    display: inline-block;
    margin-bottom: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-size: 0.78rem;
    color: var(--muted);
}

.hero-title {
    font-size: clamp(2.5rem, 8.5vw, 7rem);
    line-height: 0.95;
    letter-spacing: -0.02em;
    color: var(--primary);
    margin-bottom: 1.6rem;
    text-shadow: 0 8px 28px rgba(124, 89, 89, 0.2);
    overflow: visible;
    perspective: 600px;
}

/* ── Ligne décorative sous le titre ── */
.hero-title-deco {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.4rem;
}

.htd-line {
    display: block;
    height: 1px;
    width: clamp(40px, 8vw, 90px);
    background: linear-gradient(to right, transparent, rgba(212, 163, 115, 0.7));
}

.hero-title-deco .htd-line:last-child {
    background: linear-gradient(to left, transparent, rgba(212, 163, 115, 0.7));
}

.htd-spark {
    font-size: 0.65rem;
    color: var(--accent);
    animation: htd-spin 4s linear infinite;
}

@keyframes htd-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.title-line {
    display: block;
    overflow: visible;
    padding: 0.15em 0;
}

.char {
    display: inline-block;
    will-change: transform, opacity, color, filter;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    cursor: default;
    transition: color 0.1s;
}

.char-space {
    display: inline-block;
    width: 0.34em;
}

.char-dot {
    display: inline-block;
    will-change: transform, opacity, filter;
    transform-origin: 50% 70%;
}

.hero-subtitle {
    font-size: clamp(1.2rem, 2.2vw, 2rem);
    font-style: italic;
    color: var(--text);
    opacity: 0.9;
    margin: 0 auto;
    max-width: 24ch;
}

.scroll-ind {
    margin-top: 4rem;
    border: 0;
    background: transparent;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.24em;
    font-size: 0.72rem;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    cursor: pointer;
    transition: color 0.3s, transform 0.3s ease;
}

.scroll-ind:hover {
    color: var(--accent);
    transform: translateY(-3px);
}

.scroll-dot {
    width: 3px;
    height: 62px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(155, 126, 126, 0.08), rgba(155, 126, 126, 0.22), rgba(155, 126, 126, 0.08));
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(155, 126, 126, 0.08);
}

.scroll-dot-inner {
    display: block;
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 50%;
    border-radius: 999px;
    background: linear-gradient(to bottom, transparent, var(--accent), transparent);
    animation: scroll-drop 1.8s ease-in-out infinite;
}

@keyframes scroll-drop {
    0%   { top: -50%; opacity: 0; }
    20%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { top: 120%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-section::before,
    .hero-bg-orb-c,
    .hero-particle,
    .hero-orn-gem,
    .htd-spark,
    .scroll-dot-inner {
        animation: none !important;
    }
}

.story-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 5rem 10%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    position: relative;
}

.story-section > .container {
    position: relative;
    z-index: 1;
}

.section-divider {
    display: none; /* Remplacé par le fil rouge global */
}

/* ── Fil de progression (fixed, toujours visible) ── */
#global-scroll-line {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    z-index: 200;
    pointer-events: none;
}

.gsl-track {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(155, 126, 126, 0.12);
    border-radius: 999px;
}

.gsl-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: linear-gradient(180deg, #d4a373 0%, #9b7e7e 50%, #c27a7a 80%, #d4a373 100%);
    border-radius: 999px;
    box-shadow: 0 0 8px rgba(212, 163, 115, 0.5), 0 0 20px rgba(212, 163, 115, 0.2);
    transition: none;
}

.gsl-spark {
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.4rem;
    color: #d4a373;
    opacity: 1;
    text-shadow: 0 0 10px rgba(212, 163, 115, 1), 0 0 25px rgba(255, 255, 255, 0.9);
    will-change: top;
    z-index: 201;
}

/* Halo de burst sur les sections */
.gsl-burst {
    position: fixed;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212,163,115,0.6) 0%, transparent 70%);
    pointer-events: none;
    z-index: 199;
    opacity: 0;
    scale: 0;
}

.story-section.alt {
    background-color: var(--bg-soft);
}

.container {
    max-width: 1380px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
}

#rencontre .container {
    grid-template-columns: 1.35fr 0.65fr;
}

.flex-reverse {
    direction: rtl;
}

.flex-reverse > * {
    direction: ltr;
}

.image-wrapper img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
    transition: transform 0.5s ease;
}

.image-card {
    padding: 1.1rem;
    border-radius: 32px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.97), rgba(255, 245, 235, 0.94));
    box-shadow:
        0 40px 80px rgba(108, 80, 80, 0.18),
        0 0 0 1px rgba(212, 163, 115, 0.18),
        inset 0 1px 0 rgba(255,255,255,0.9);
    transform: scale(1.06);
    position: relative;
}

.image-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 32px;
    background: linear-gradient(135deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 60%);
    pointer-events: none;
}

.image-card img {
    display: block;
    border-radius: 22px;
    width: 100%;
}

.text-content h2 {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    color: var(--primary);
}

.rencontre-title {
    background: linear-gradient(90deg, #967474 0%, #b08363 55%, #967474 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.rencontre-word {
    display: inline-block;
    margin-right: 0.22em;
    will-change: transform, opacity;
}

#rencontre .text-content {
    position: relative;
    padding: 2.8rem 2.8rem 2.8rem 3.2rem;
    border-radius: 28px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.92), rgba(255, 246, 236, 0.78));
    box-shadow:
        0 30px 70px rgba(127, 102, 102, 0.14),
        0 0 0 1px rgba(212, 163, 115, 0.14),
        inset 0 1px 0 rgba(255,255,255,0.85);
    overflow: hidden;
    backdrop-filter: blur(6px);
}

#rencontre .text-content::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.8rem;
    bottom: 1.8rem;
    width: 4px;
    border-radius: 999px;
    background: linear-gradient(to bottom, rgba(212, 163, 115, 0.25), rgba(155, 126, 126, 1));
    box-shadow: 0 0 18px rgba(212, 163, 115, 0.5);
}

#rencontre .text-content p {
    font-size: clamp(1.1rem, 1.3vw, 1.45rem);
    line-height: 1.85;
    color: #5f5651;
}

/* Overflow clip pour animations lettre */
.rencontre-title-wrapper {
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.rencontre-body-wrapper {
    overflow: hidden;
}

/* Chaque mot inline du body avec clip pour GSAP */
.body-line {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    line-height: 1.35;
}

.body-word {
    display: inline-block;
}

.rencontre-word-char {
    display: inline-block;
    will-change: transform, opacity, filter;
}

/* ── Section Rencontre – améliorations ───────────────────────── */

#rencontre {
    position: relative;
    overflow: hidden;
}

/* Éléments flottants style intro */
.rencontre-float-wrap {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.renc-fi {
    position: absolute;
    left: var(--rx);
    top:  var(--ry);
    font-size: calc(1.5rem * var(--rs));
    opacity: 0;
    will-change: transform, opacity;
    font-family: var(--font-serif);
}

.renc-fi.flower { color: var(--accent); }
.renc-fi.spark  { color: var(--primary); }
.renc-fi.leaf   { color: #b8c8a8; }
.renc-fi.petal  { color: #e8c87a; }
.renc-fi.heart  { color: #c27a7a; }

/* Image agrandie */
.rencontre-image-large {
    transform: scale(1.12) !important;
}

/* Halo lumineux derrière l'image */
.rencontre-glow {
    position: absolute;
    inset: -30px;
    border-radius: 40px;
    background: radial-gradient(ellipse at center, rgba(212, 163, 115, 0.28) 0%, transparent 70%);
    pointer-events: none;
    animation: rencontre-glow-pulse 3.5s ease-in-out infinite;
    z-index: -1;
}

@keyframes rencontre-glow-pulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50%       { opacity: 1;   transform: scale(1.05); }
}

/* Particules flottantes */
.rencontre-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

/* Eyebrow "Le hasard n'existe pas" */
.rencontre-eyebrow {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 1.2rem;
    opacity: 0.78;
}

.rencontre-eyebrow-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 163, 115, 0.7), transparent);
}

.rencontre-eyebrow-text {
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #b08363;
    white-space: nowrap;
    font-weight: 500;
}

/* Citation romantique */
.rencontre-quote {
    margin-top: 2rem;
    padding: 1.1rem 1.5rem;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255,245,230,0.6), rgba(255,235,215,0.4));
    border: 1px solid rgba(212, 163, 115, 0.22);
    font-style: italic;
    font-size: 1rem;
    line-height: 1.75;
    color: #7a6455;
    text-align: center;
    position: relative;
}

.rencontre-quote-mark {
    font-size: 2rem;
    line-height: 0;
    vertical-align: -0.5rem;
    color: rgba(212, 163, 115, 0.5);
    font-style: normal;
    margin: 0 0.3rem;
    font-family: Georgia, serif;
}

.text-content p {
    font-size: 1.2rem;
    color: #666;
}

.villes-fullscreen {
    position: relative;
    height: 400vh; /* Espace pour le scroll de l'animation */
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: visible;
    padding: 0;
    background-color: var(--bg-soft);
}

.villes-inner {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: 3rem 3%;
    z-index: 10;
    box-sizing: border-box;
    will-change: transform;
}

.villes-fi {
    position: absolute;
    left: var(--vx);
    top: var(--vy);
    font-size: calc(1.5rem * var(--vs));
    opacity: 0;
    will-change: transform, opacity;
    font-family: var(--font-serif);
    pointer-events: none;
    z-index: 0;
    user-select: none;
}

.villes-fi.flower { color: var(--accent); }
.villes-fi.spark { color: var(--primary); }
.villes-fi.heart { color: #c27a7a; }

/* ── Décorations flottantes communes (famille, lyon, pacs, maison, bebe, annecy, wedding) ── */
.section-float-wrap {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.sec-fi {
    position: absolute;
    left: var(--fx);
    top:  var(--fy);
    font-size: calc(1.5rem * var(--fs));
    opacity: 0;
    will-change: transform, opacity;
    font-family: var(--font-serif);
    pointer-events: none;
    user-select: none;
}

.sec-fi.flower { color: var(--accent); }
.sec-fi.spark  { color: var(--primary); }
.sec-fi.leaf   { color: #b8c8a8; }
.sec-fi.petal  { color: #e8c87a; }
.sec-fi.heart  { color: #c27a7a; }

.route-narrative {
    max-width: 780px;
    text-align: center;
}

.villes-title {
    font-size: clamp(2rem, 4.8vw, 3.8rem);
    margin-bottom: 1.2rem;
    line-height: 1.08;
    letter-spacing: -0.015em;
    background: linear-gradient(108deg, #896a70 0%, #d4a373 48%, #c27a7a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.villes-body {
    font-size: clamp(1.05rem, 1.5vw, 1.45rem);
    line-height: 1.85;
    color: #6b5652;
    font-style: italic;
    font-family: var(--font-serif);
}

.villes-word {
    display: inline-block;
    will-change: transform, opacity, filter;
}

.route-stage {
    position: relative;
    width: 100%;
    border-radius: 28px;
    padding: 1.8rem 1.2rem 1.2rem;
    background:
        radial-gradient(ellipse at 20% 60%, rgba(255, 238, 217, 0.55) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 30%, rgba(212, 163, 115, 0.18) 0%, transparent 45%),
        linear-gradient(160deg, #fffefb 0%, #f9f3ee 60%, #fff8f4 100%);
    box-shadow:
        0 40px 80px rgba(110, 85, 85, 0.11),
        inset 0 0 0 1px rgba(212, 163, 115, 0.35);
}

.route-canvas {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

.route-guide {
    fill: none;
    stroke: rgba(155, 120, 120, 0.30);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 10 20;
}

.route-segment {
    fill: none;
    stroke: url(#routeLineGradient);
    stroke-width: 6;
    stroke-linecap: round;
    filter: url(#trainGlow);
}

/* Tous les anciens cercles masqués */
.node-ring, .node-dot,
.node-pin-glow, .node-pin-dot {
    display: none;
}

/* ── Icône monument SVG ── */
.node-icon-city {
    color: #c9967a;
    fill: #c9967a;
    opacity: 0.2;
    transform-box: fill-box;
    transform-origin: center;
    transition: opacity 0.35s ease, fill 0.35s ease, color 0.35s ease;
}

.route-node.is-active .node-icon-city {
    opacity: 1;
    animation: iconPop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes iconPop {
    0%   { transform: scale(0.3) translateY(10px); opacity: 0; }
    65%  { transform: scale(1.15) translateY(-3px); }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* ── Labels SVG des villes ── */
.node-label-group {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.node-city-name {
    font-family: var(--font-serif);
    font-size: 16px;
    font-weight: 700;
    fill: #7c5959;
    letter-spacing: 0.01em;
    filter: drop-shadow(0 1px 5px rgba(255,255,255,1)) drop-shadow(0 1px 5px rgba(255,255,255,1));
}

.node-city-sub {
    font-family: var(--font-serif);
    font-size: 12px;
    font-style: italic;
    fill: #a08078;
    letter-spacing: 0.01em;
    filter: drop-shadow(0 1px 4px rgba(255,255,255,1)) drop-shadow(0 1px 4px rgba(255,255,255,1));
}

/* ── Voyageur — véhicule selon le segment ── */
.traveler-vehicle {
    font-size: 22px;
    text-anchor: middle;
    dominant-baseline: central;
    filter: drop-shadow(0 2px 6px rgba(154,79,91,0.5));
    animation: vehicleBounce 0.8s ease-in-out infinite alternate;
    transform-origin: center;
    transform-box: fill-box;
}

@keyframes vehicleBounce {
    0%   { transform: translateY(0px) scale(1); }
    100% { transform: translateY(-5px) scale(1.1); }
}

.traveler-glow {
    fill: #c27a7a;
    animation: travelerPulse 1.1s ease-in-out infinite;
}

@keyframes travelerPulse {
    0%, 100% { r: 16px; opacity: 0.18; }
    50%       { r: 24px; opacity: 0.06; }
}

@media (max-width: 680px) {
    .route-stage { border-radius: 18px; padding: 0.8rem; }
}

/* ── Section Annecy ──────────────────────────────────────── */
#annecy .annecy-container {
    grid-template-columns: 1.25fr 0.75fr;
    gap: 2rem;
    align-items: center;
    transform: translateX(-6vw);
}

.annecy-title {
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    line-height: 1.05;
    letter-spacing: -0.015em;
    background: linear-gradient(110deg, #4a90b8 0%, #d4a373 55%, #c27a7a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 1.4rem;
}

.annecy-body {
    font-size: clamp(1.05rem, 1.4vw, 1.45rem);
    line-height: 1.85;
    color: #5b5450;
}

.annecy-visual {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.5rem 0;
}

.annecy-svg {
    width: 100%;
    max-width: 680px;
    border-radius: 34px;
    box-shadow:
        0 55px 110px rgba(74, 144, 184, 0.18),
        0 18px 40px rgba(212, 163, 115, 0.12),
        0 0 0 1px rgba(122, 184, 216, 0.18);
    overflow: visible;
}

.annecy-person-elle,
.annecy-person-lui,
.annecy-dock,
.annecy-lake-group,
.annecy-mountains,
.annecy-sparkles,
.annecy-hearts {
    transform-box: fill-box;
    transform-origin: center;
}

/* ── Animations SVG Annecy ─────────────── */

/* Soleil qui se couche (cycle 12s synchronisé avec le ciel) */
.annecy-sun {
    animation: annecySunSet 12s ease-in-out infinite;
}
.annecy-sun-glow {
    animation: annecySunGlowPulse 12s ease-in-out infinite;
}
@keyframes annecySunSet {
    0%   { transform: translateY(-12px); opacity: 0.95; }
    45%  { transform: translateY(18px);  opacity: 0.75; }
    55%  { transform: translateY(18px);  opacity: 0.4; }
    70%  { transform: translateY(-12px); opacity: 0.0; }
    90%  { transform: translateY(-12px); opacity: 0.0; }
    100% { transform: translateY(-12px); opacity: 0.95; }
}
@keyframes annecySunGlowPulse {
    0%   { opacity: 0.58; }
    45%  { opacity: 0.35; }
    60%  { opacity: 0.0;  }
    90%  { opacity: 0.0;  }
    100% { opacity: 0.58; }
}

/* Ciel animé géré par SVG animate natif dans le HTML */

/* Étoiles (cycle 12s synchronisé) */
.annecy-star {
    opacity: 0;
    animation: starAppear 12s ease-in-out infinite;
}
.annecy-star-b { animation-delay: 1.2s; }
.annecy-star-c { animation-delay: 0.5s; }
.annecy-star-d { animation-delay: 2.1s; }
@keyframes starAppear {
    0%   { opacity: 0; }
    42%  { opacity: 0; }
    58%  { opacity: 0.85; }
    72%  { opacity: 1; }
    82%  { opacity: 0.9; }
    92%  { opacity: 0; }
    100% { opacity: 0; }
}

/* Lune (cycle 12s synchronisé) */
.annecy-moon {
    opacity: 0;
    animation: moonRise 12s ease-in-out infinite;
}
@keyframes moonRise {
    0%   { opacity: 0;    transform: translateY(20px); }
    44%  { opacity: 0;    transform: translateY(20px); }
    60%  { opacity: 0.8;  transform: translateY(0px);  }
    75%  { opacity: 1;    transform: translateY(-8px);  }
    88%  { opacity: 0;    transform: translateY(-8px);  }
    100% { opacity: 0;    transform: translateY(20px);  }
}

/* Lac scintille doucement */
.annecy-reflection {
    animation: lakeReflect 4s ease-in-out infinite alternate;
}
.annecy-reflection-b {
    animation: lakeReflect 5.5s ease-in-out infinite alternate-reverse;
}
.annecy-moon-reflection {
    opacity: 0;
    animation: moonReflect 8s ease-in-out infinite alternate;
}
@keyframes lakeReflect {
    0%   { opacity: 0.25; stroke-width: 16; }
    100% { opacity: 0.38; stroke-width: 22; }
}
@keyframes moonReflect {
    0%   { opacity: 0; }
    50%  { opacity: 0; }
    100% { opacity: 0.22; }
}

/* Vagues animées */
.annecy-wave {
    animation: waveFlow 3.5s ease-in-out infinite alternate;
}
.annecy-wave-b {
    animation: waveFlow 4.8s ease-in-out infinite alternate-reverse;
}
.annecy-wave-c {
    animation: waveFlow 4.2s ease-in-out infinite alternate;
    animation-delay: 0.8s;
}
@keyframes waveFlow {
    0%   { transform: translateX(-6px); opacity: 0.18; }
    100% { transform: translateX(6px);  opacity: 0.28; }
}

/* Nuages dérivent lentement */
.annecy-cloud-a {
    animation: cloudDrift 16s ease-in-out infinite alternate;
}
.annecy-cloud-b {
    animation: cloudDrift 22s ease-in-out infinite alternate-reverse;
}
@keyframes cloudDrift {
    0%   { transform: translateX(-8px); }
    100% { transform: translateX(8px); }
}

/* Bague qui brille */
.annecy-ring-shine {
    animation: ringShine 2s ease-in-out infinite alternate;
}
@keyframes ringShine {
    0%   { opacity: 0.7; r: 6; }
    100% { opacity: 1.0; r: 9; }
}

/* Étincelles autour de la bague */
.annecy-spark {
    animation: sparkTwinkle 1.8s ease-in-out infinite alternate;
}
.annecy-spark-b { animation: sparkTwinkle 2.4s ease-in-out infinite alternate-reverse; animation-delay: 0.3s; }
.annecy-spark-c { animation: sparkTwinkle 1.5s ease-in-out infinite alternate; animation-delay: 0.7s; }
.annecy-spark-d { animation: sparkTwinkle 2.1s ease-in-out infinite alternate-reverse; animation-delay: 1.1s; }
@keyframes sparkTwinkle {
    0%   { opacity: 0.3; transform: scale(0.7) rotate(-10deg); }
    100% { opacity: 1.0; transform: scale(1.2) rotate(10deg); }
}

/* Coeurs qui montent */
.annecy-heart {
    animation: heartRise 3.2s ease-in-out infinite;
}
.annecy-heart-b { animation: heartRise 3.2s ease-in-out infinite; animation-delay: 1.1s; }
.annecy-heart-c { animation: heartRise 3.2s ease-in-out infinite; animation-delay: 2.0s; }
@keyframes heartRise {
    0%   { transform: translateY(0)  scale(1);   opacity: 0.8; }
    60%  { transform: translateY(-22px) scale(1.15); opacity: 0.6; }
    100% { transform: translateY(-40px) scale(0.8); opacity: 0; }
}

@media (max-width: 768px) {
    #annecy .annecy-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .annecy-visual {
        padding: 0.5rem 0 1.5rem;
    }

    .annecy-svg {
        max-width: min(100%, 560px);
    }
}

/* ── Section Elle dit Oui ─────────────────────────────────── */
.oui-section {
    min-height: 300vh;
    display: block;
    text-align: center;
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, #fff8f4 0%, #fde8f0 40%, #f8d8e8 70%, #fce4ee 100%);
}

/* Barre centrale : masquée par JS via opacity lors du pin */

/* ── Particules ambiantes flottantes (fond de la section) ── */
.oui-ambient {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}
.oui-amb {
    position: absolute;
    left: var(--ax);
    top:  var(--ay);
    font-size: calc(var(--as) * 1.1rem);
    color: #d4899e;
    opacity: 0;
    animation: ambFloat var(--ar) ease-in-out infinite var(--ad);
}
.oui-amb.lys {
    color: rgba(255,255,255,0.55);
    font-size: calc(var(--as) * 1.3rem);
    filter: drop-shadow(0 0 5px rgba(255,200,220,0.7));
}
@keyframes ambFloat {
    0%   { opacity: 0;    transform: translateY(0)    scale(0.7) rotate(0deg); }
    15%  { opacity: 0.35; }
    50%  { opacity: 0.25; transform: translateY(-28px) scale(1.1) rotate(20deg); }
    85%  { opacity: 0.3; }
    100% { opacity: 0;    transform: translateY(-50px) scale(0.8) rotate(-10deg); }
}

/* Lueur douce centrale */
.oui-glow-bg {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 80vw; height: 80vw;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,200,220,0.55) 0%, rgba(255,220,235,0.2) 50%, transparent 75%);
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 1.5s ease;
    animation: glowPulse 3s ease-in-out infinite alternate;
}
.oui-glow-bg.active { opacity: 1; }
@keyframes glowPulse {
    0%   { transform: translate(-50%,-50%) scale(0.95); }
    100% { transform: translate(-50%,-50%) scale(1.08); }
}

/* ── Pluie de particules ───────────────────────────── */
.oui-rain {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 100;
    opacity: 0;
    transition: opacity 0.8s ease;
}
.oui-rain.active { opacity: 1; }

.oui-p {
    position: absolute;
    top: -60px;
    opacity: 0;
    animation: ouiParticleFall linear infinite;
    will-change: transform, opacity;
    user-select: none;
}

/* Fleurs de lys — blanches/dorées */
.oui-p.lys      { color: #fff; font-size: 1.6rem; filter: drop-shadow(0 0 6px rgba(255,220,180,0.9)); }
.oui-p.lys.big  { font-size: 2.6rem; filter: drop-shadow(0 0 10px rgba(255,210,160,1)); }
/* Cœurs — roses */
.oui-p.heart    { color: #e87a9a; font-size: 1.4rem; filter: drop-shadow(0 0 6px rgba(232,100,140,0.6)); }
.oui-p.heart.big{ font-size: 2.2rem; color: #c25a7a; }
/* Roses */
.oui-p.rose     { font-size: 1.5rem; }
/* Étincelles — or */
.oui-p.spark    { color: #f0c860; font-size: 1.2rem; filter: drop-shadow(0 0 5px rgba(240,180,60,0.8)); }
/* Petites fleurs — rose pâle */
.oui-p.flower   { color: #f0a8c0; font-size: 1.3rem; }

/* Positions et timings des 50 particules */
.oui-p[data-i="1"]  { left:2%;   animation-duration:5.1s; animation-delay:0.0s; }
.oui-p[data-i="2"]  { left:6%;   animation-duration:7.3s; animation-delay:0.6s; }
.oui-p[data-i="3"]  { left:10%;  animation-duration:4.8s; animation-delay:1.2s; }
.oui-p[data-i="4"]  { left:15%;  animation-duration:6.5s; animation-delay:0.3s; }
.oui-p[data-i="5"]  { left:19%;  animation-duration:5.6s; animation-delay:0.9s; }
.oui-p[data-i="6"]  { left:24%;  animation-duration:7.0s; animation-delay:0.1s; }
.oui-p[data-i="7"]  { left:29%;  animation-duration:4.5s; animation-delay:1.5s; }
.oui-p[data-i="8"]  { left:34%;  animation-duration:6.2s; animation-delay:0.4s; }
.oui-p[data-i="9"]  { left:39%;  animation-duration:5.3s; animation-delay:0.7s; }
.oui-p[data-i="10"] { left:44%;  animation-duration:6.8s; animation-delay:1.1s; }
.oui-p[data-i="11"] { left:4%;   animation-duration:5.9s; animation-delay:0.2s; }
.oui-p[data-i="12"] { left:8%;   animation-duration:4.7s; animation-delay:1.0s; }
.oui-p[data-i="13"] { left:13%;  animation-duration:7.4s; animation-delay:0.5s; }
.oui-p[data-i="14"] { left:18%;  animation-duration:5.0s; animation-delay:1.3s; }
.oui-p[data-i="15"] { left:23%;  animation-duration:6.6s; animation-delay:0.0s; }
.oui-p[data-i="16"] { left:28%;  animation-duration:4.9s; animation-delay:0.8s; }
.oui-p[data-i="17"] { left:33%;  animation-duration:7.1s; animation-delay:1.6s; }
.oui-p[data-i="18"] { left:38%;  animation-duration:5.4s; animation-delay:0.3s; }
.oui-p[data-i="19"] { left:43%;  animation-duration:6.3s; animation-delay:0.9s; }
.oui-p[data-i="20"] { left:48%;  animation-duration:4.6s; animation-delay:1.4s; }
.oui-p[data-i="21"] { left:50%;  animation-duration:5.7s; animation-delay:0.1s; }
.oui-p[data-i="22"] { left:55%;  animation-duration:6.9s; animation-delay:0.7s; }
.oui-p[data-i="23"] { left:60%;  animation-duration:5.2s; animation-delay:1.2s; }
.oui-p[data-i="24"] { left:65%;  animation-duration:7.2s; animation-delay:0.4s; }
.oui-p[data-i="25"] { left:70%;  animation-duration:4.8s; animation-delay:1.0s; }
.oui-p[data-i="26"] { left:75%;  animation-duration:6.4s; animation-delay:0.2s; }
.oui-p[data-i="27"] { left:80%;  animation-duration:5.5s; animation-delay:0.8s; }
.oui-p[data-i="28"] { left:85%;  animation-duration:7.0s; animation-delay:1.5s; }
.oui-p[data-i="29"] { left:52%;  animation-duration:5.8s; animation-delay:0.0s; }
.oui-p[data-i="30"] { left:57%;  animation-duration:4.4s; animation-delay:0.6s; }
.oui-p[data-i="31"] { left:62%;  animation-duration:6.7s; animation-delay:1.1s; }
.oui-p[data-i="32"] { left:67%;  animation-duration:5.3s; animation-delay:0.5s; }
.oui-p[data-i="33"] { left:72%;  animation-duration:7.5s; animation-delay:1.8s; }
.oui-p[data-i="34"] { left:77%;  animation-duration:4.9s; animation-delay:0.3s; }
.oui-p[data-i="35"] { left:11%;  animation-duration:6.1s; animation-delay:1.4s; }
.oui-p[data-i="36"] { left:21%;  animation-duration:5.6s; animation-delay:0.7s; }
.oui-p[data-i="37"] { left:47%;  animation-duration:7.2s; animation-delay:0.2s; }
.oui-p[data-i="38"] { left:63%;  animation-duration:4.7s; animation-delay:1.0s; }
.oui-p[data-i="39"] { left:83%;  animation-duration:6.3s; animation-delay:0.5s; }
.oui-p[data-i="40"] { left:91%;  animation-duration:5.0s; animation-delay:1.3s; }
.oui-p[data-i="41"] { left:3%;   animation-duration:6.8s; animation-delay:0.4s; }
.oui-p[data-i="42"] { left:46%;  animation-duration:5.2s; animation-delay:1.6s; }
.oui-p[data-i="43"] { left:88%;  animation-duration:7.4s; animation-delay:0.1s; }
.oui-p[data-i="44"] { left:97%;  animation-duration:5.9s; animation-delay:0.9s; }
.oui-p[data-i="45"] { left:16%;  animation-duration:4.6s; animation-delay:1.2s; }
.oui-p[data-i="46"] { left:93%;  animation-duration:6.5s; animation-delay:0.6s; }
.oui-p[data-i="47"] { left:35%;  animation-duration:5.1s; animation-delay:0.0s; }
.oui-p[data-i="48"] { left:56%;  animation-duration:7.3s; animation-delay:1.7s; }
.oui-p[data-i="49"] { left:74%;  animation-duration:4.8s; animation-delay:0.8s; }
.oui-p[data-i="50"] { left:42%;  animation-duration:6.0s; animation-delay:1.1s; }

@keyframes ouiParticleFall {
    0%   { transform: translateY(0)     rotate(0deg)   translateX(0px);   opacity: 0; }
    6%   { opacity: 1; }
    85%  { opacity: 0.8; }
    100% { transform: translateY(108vh) rotate(600deg) translateX(50px);  opacity: 0; }
}

/* ── Révélation sticky ──────────────────────────── */
.oui-reveal {
    position: relative;
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    z-index: 10;
    pointer-events: none;
}

.oui-step {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    will-change: transform, opacity, filter;
    pointer-events: none;
}

/* Étape 1 */
.oui-kicker-large {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.5em;
    font-size: clamp(2rem, 6vw, 4.5rem);
    color: #8a5060;
    font-family: var(--font-serif);
    font-weight: 300;
    margin-top: 1rem;
}
.oui-breath-dots { display: flex; gap: 0.6rem; margin-bottom: 1.5rem; }
.oui-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #c27a7a;
    animation: dotBreathe 1.4s ease-in-out infinite;
}
.oui-dot:nth-child(2) { animation-delay: 0.25s; }
.oui-dot:nth-child(3) { animation-delay: 0.5s; }
@keyframes dotBreathe {
    0%, 100% { transform: scale(1);   opacity: 0.4; }
    50%       { transform: scale(1.7); opacity: 1; }
}

/* Étape 2 */
.oui-heart-beat {
    font-size: clamp(3rem, 9vw, 7rem);
    color: #c27a7a;
    animation: heartBeat 0.9s ease-in-out infinite;
    line-height: 1;
    margin-bottom: 0.8rem;
    filter: drop-shadow(0 0 24px rgba(194,122,122,0.7));
}
@keyframes heartBeat {
    0%   { transform: scale(1); }
    14%  { transform: scale(1.28); }
    28%  { transform: scale(1); }
    42%  { transform: scale(1.2); }
    70%  { transform: scale(1); }
}
.oui-title-small {
    font-family: var(--font-serif);
    font-size: clamp(2.5rem, 8vw, 5.5rem);
    color: #6a3a4a;
    font-style: italic;
    font-weight: 400;
    margin-bottom: 1.2rem;
}
.oui-suspense-dots { display: flex; gap: 0.8rem; }
.oui-suspense-dots span {
    width: 14px; height: 14px;
    border-radius: 50%;
    background: #d4a373;
    animation: suspenseDot 1.8s ease-in-out infinite;
}
.oui-suspense-dots span:nth-child(2) { animation-delay: 0.35s; }
.oui-suspense-dots span:nth-child(3) { animation-delay: 0.7s; }
@keyframes suspenseDot {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.3; }
    40%       { transform: translateY(-14px) scale(1.4); opacity: 1; }
}

/* Étape 3 : "Oui !" */
.oui-title-main {
    font-family: var(--font-serif);
    font-size: clamp(7rem, 22vw, 16rem);
    line-height: 0.9;
    letter-spacing: -0.03em;
    margin-bottom: 2rem;
}
.oui-title-main em {
    font-style: italic;
    background: linear-gradient(110deg, #c27a7a 0%, #f0d060 35%, #e8b040 65%, #c27a7a 100%);
    background-size: 300% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: block;
    animation: ouiGoldShimmer 2.5s infinite linear;
    filter: drop-shadow(0 0 50px rgba(240,200,80,0.6));
}
@keyframes ouiGoldShimmer {
    to { background-position: 300% center; }
}

.oui-sub {
    font-size: clamp(1.05rem, 2vw, 1.45rem);
    color: #6a3a4a;
    font-style: italic;
    max-width: 540px;
    margin: 0 auto;
    line-height: 1.85;
    opacity: 0;
}

@media (max-width: 768px) {
    .oui-section { min-height: 250vh; }
    .oui-title-main { font-size: clamp(5rem, 20vw, 10rem); }
    .oui-kicker-large { font-size: clamp(1.6rem, 6vw, 3rem); letter-spacing: 0.3em; }
    .oui-title-small { font-size: clamp(2rem, 7vw, 4rem); }
}

/* ── Section Maison ──────────────────────────────────────── */
#maison .maison-container {
    grid-template-columns: 0.9fr 1.1fr;
    gap: 4rem;
    align-items: center;
}

.maison-title {
    font-size: clamp(2.2rem, 4.8vw, 3.6rem);
    line-height: 1.06;
    letter-spacing: -0.015em;
    background: linear-gradient(110deg, #7a9a6a 0%, #c8a870 55%, #7a9a6a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 1.4rem;
}

.maison-body {
    font-size: clamp(1.05rem, 1.4vw, 1.45rem);
    line-height: 1.85;
    color: #5b5450;
}

.maison-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.maison-svg {
    width: 100%;
    max-width: 520px;
    border-radius: 28px;
    box-shadow:
        0 40px 80px rgba(90, 110, 80, 0.13),
        0 0 0 1px rgba(180, 200, 150, 0.22);
    overflow: visible;
}

@media (max-width: 768px) {
    #maison .maison-container {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

/* ── Section PACS ────────────────────────────────────────── */
#pacs .pacs-container {
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
}

.pacs-title {
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    line-height: 1.05;
    letter-spacing: -0.015em;
    background: linear-gradient(110deg, #c27a7a 0%, #e8c87a 55%, #c27a7a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 1.4rem;
}

.pacs-body {
    font-size: clamp(1.05rem, 1.4vw, 1.45rem);
    line-height: 1.85;
    color: #5b5450;
}

.pacs-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.pacs-card {
    width: 100%;
    max-width: 380px;
    padding: 2.2rem;
    border-radius: 36px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.97), rgba(255, 245, 235, 0.94));
    box-shadow:
        0 40px 80px rgba(108, 80, 80, 0.16),
        0 0 0 1px rgba(212, 163, 115, 0.18),
        inset 0 1px 0 rgba(255,255,255,0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
}

.pacs-svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

@media (max-width: 768px) {
    #pacs .pacs-container {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .pacs-card {
        max-width: 300px;
    }
}

/* ── Section Lyon ─────────────────────────────────────────── */
#lyon .lyon-container {
    grid-template-columns: 0.9fr 1.1fr;
    gap: 4rem;
    align-items: center;
}

.lyon-title {
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    line-height: 1.05;
    letter-spacing: -0.015em;
    background: linear-gradient(110deg, #896a70 0%, #d2a17d 55%, #896a70 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 1.4rem;
}

.lyon-body {
    font-size: clamp(1.05rem, 1.4vw, 1.45rem);
    line-height: 1.85;
    color: #5b5450;
}

.lyon-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.lyon-svg {
    width: 100%;
    max-width: 520px;
    border-radius: 28px;
    box-shadow:
        0 40px 80px rgba(121, 90, 90, 0.14),
        0 0 0 1px rgba(212, 163, 115, 0.18);
    overflow: visible;
}

.lyon-caption {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1rem;
    color: var(--muted);
    letter-spacing: 0.04em;
    opacity: 0.8;
}

@media (max-width: 768px) {
    #lyon .lyon-container {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

.announcement-section {
    min-height: 120vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: linear-gradient(to bottom, var(--bg), #fff);
    padding: 5rem 10%;
    position: relative;
}

/* Cache la barre centrale (gérée par JS) au-dessus du contenu */
.announcement-section .gsl-hidden { opacity: 0; }

.rings-image img {
    max-width: 400px;
    margin-bottom: 2rem;
}

.announcement-section .content {
    position: relative;
    z-index: 1;
}

.final-reveal h2 {
    font-size: 5rem;
    color: var(--primary);
    margin-bottom: 1rem;
}

.date {
    font-size: 3rem;
    font-weight: 300;
    letter-spacing: 10px;
    margin-bottom: 2rem;
    color: var(--accent);
}

.final-text {
    font-size: 1.5rem;
    max-width: 600px;
    margin: 0 auto;
    opacity: 0.7;
}

/* ── Écran d'entrée ──────────────────────────────────────── */
#intro-screen {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 25% 20%, rgba(212, 163, 115, 0.18), transparent 45%),
        radial-gradient(circle at 78% 80%, rgba(155, 126, 126, 0.16), transparent 48%),
        linear-gradient(160deg, #fefcf9 0%, #f5f1ec 60%, #f6efe8 100%);
}

.intro-floating-elements {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.intro-float-item {
    position: absolute;
    left: var(--x);
    top: var(--y);
    font-size: calc(1.6rem * var(--s));
    opacity: 0;
    will-change: transform, opacity;
    font-family: var(--font-serif);
}

.intro-float-item.flower { color: var(--accent); }
.intro-float-item.spark { color: var(--primary); }
.intro-float-item.leaf { color: #b8c8a8; }
.intro-float-item.petal { color: #e8c87a; }
.intro-float-item.heart { color: #c27a7a; }

#intro-content {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
}

.intro-kicker {
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-size: 0.78rem;
    color: var(--muted);
    opacity: 0;
}

.intro-heading {
    font-family: var(--font-serif);
    font-size: clamp(2.8rem, 8vw, 6rem);
    line-height: 1;
    color: var(--primary);
    letter-spacing: -0.02em;
    perspective: 600px;
}

.intro-heading-word {
    display: inline-block;
    transform-origin: 50% 100%;
    opacity: 0;
}

#intro-btn {
    margin-top: 1rem;
    opacity: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.9rem 2.2rem;
    border-radius: 999px;
    border: none;
    background: linear-gradient(135deg, #9b7e7e, #c8a870);
    color: white;
    font-family: var(--font-sans);
    font-size: 1rem;
    letter-spacing: 0.06em;
    cursor: pointer;
    box-shadow: 0 8px 28px rgba(155, 126, 126, 0.35);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

#intro-btn::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transition: all 0.6s ease;
}

#intro-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(200, 168, 112, 0.45);
    background: linear-gradient(135deg, #a48686, #d2b078);
}

#intro-btn:hover::before {
    left: 100%;
}

#intro-btn svg {
    width: 18px;
    height: 18px;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

#intro-btn:hover svg {
    transform: translateX(6px) scale(1.1);
}

.intro-music-hint {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--muted);
    opacity: 0;
    letter-spacing: 0.06em;
}

/* ── Bouton musique ───────────────────────────────────────── */
/* ── Widget musique ──────────────────────────────────────────── */
#music-widget {
    position: fixed;
    bottom: 1.8rem;
    right: 1.8rem;
    z-index: 100001;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
}

#music-volume-panel {
    background: rgba(255, 250, 245, 0.92);
    backdrop-filter: blur(10px);
    border-radius: 999px;
    box-shadow:
        0 4px 20px rgba(108, 80, 80, 0.18),
        0 0 0 1px rgba(212, 163, 115, 0.25);
    padding: 0.6rem 1rem;
    display: flex;
    align-items: center;
    transform: translateY(8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

#music-volume-panel.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

#music-volume-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 90px;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(to right, var(--gold, #c4996a) 0%, var(--gold, #c4996a) 100%, rgba(212,163,115,0.25) 100%);
    outline: none;
    cursor: pointer;
}

#music-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--primary, #8a6060);
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(108,80,80,0.3);
    transition: transform 0.15s ease;
}

#music-volume-slider::-webkit-slider-thumb:active {
    transform: scale(1.2);
}

#music-volume-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--primary, #8a6060);
    border: none;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(108,80,80,0.3);
}

#music-btn {
    width: 46px;
    height: 46px;
    border-radius: 999px;
    background: rgba(255, 250, 245, 0.88);
    backdrop-filter: blur(10px);
    box-shadow:
        0 4px 20px rgba(108, 80, 80, 0.18),
        0 0 0 1px rgba(212, 163, 115, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--primary);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: none;
    padding: 0;
    flex-shrink: 0;
}

#music-btn:hover {
    transform: scale(1.1);
    box-shadow:
        0 6px 28px rgba(108, 80, 80, 0.24),
        0 0 0 1px rgba(212, 163, 115, 0.4);
}

#music-btn svg {
    width: 22px;
    height: 22px;
}

#music-btn.is-muted {
    opacity: 0.55;
}

@media (max-width: 480px) {
    #music-widget {
        bottom: 1.2rem;
        right: 1.2rem;
    }
    #music-volume-slider {
        width: 70px;
    }
}

/* ── Bouton galerie ────────────────────────────────────────── */
.gallery-cta {
    margin-top: 3.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
}

/* ── Bouton principal ── */
.gallery-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #b87a8a 0%, #c8a870 50%, #b87a8a 100%);
    background-size: 200% auto;
    color: white;
    text-decoration: none;
    position: relative;
    overflow: visible;
    animation: btnGradientShift 3.5s ease infinite, btnBreath 2.2s ease-in-out infinite;
    box-shadow:
        0 0 0 0 rgba(184,122,138,0.5),
        0 16px 48px rgba(184,122,138,0.4),
        0 4px 16px rgba(200,168,112,0.3);
}
@keyframes btnGradientShift {
    0%   { background-position: 0% center; }
    50%  { background-position: 100% center; }
    100% { background-position: 0% center; }
}
@keyframes btnBreath {
    0%, 100% { box-shadow: 0 0  0  0   rgba(184,122,138,0.5), 0 16px 48px rgba(184,122,138,0.4), 0 4px 16px rgba(200,168,112,0.3); transform: scale(1); }
    50%       { box-shadow: 0 0 0 14px rgba(184,122,138,0),   0 22px 58px rgba(184,122,138,0.5), 0 4px 16px rgba(200,168,112,0.3); transform: scale(1.025); }
}

/* Contenu interne du bouton */
.gallery-btn-inner {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1.15rem 2.8rem;
    font-family: var(--font-sans);
    font-size: 1.08rem;
    font-weight: 500;
    letter-spacing: 0.07em;
}

/* Shimmer qui balaye */
.gallery-btn-shimmer {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.38) 50%, transparent 100%);
    background-size: 200% 100%;
    animation: btnShimmer 2.5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes btnShimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}

/* Particules qui s'échappent autour du bouton */
.gallery-btn-sparks {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: 999px;
}
.gbs {
    position: absolute;
    font-size: 0.9rem;
    opacity: 0;
    animation: gbsFloat 3s ease-in-out infinite;
    color: #f0d080;
}
.gbs:nth-child(1) { top: -10px; left: 15%;  animation-delay: 0.0s; color: #f0c860; font-size: 0.8rem; }
.gbs:nth-child(2) { top: -14px; left: 42%;  animation-delay: 0.6s; color: #e87a9a; font-size: 1.0rem; }
.gbs:nth-child(3) { top: -8px;  right: 18%; animation-delay: 1.2s; color: #f0c860; font-size: 0.75rem; }
.gbs:nth-child(4) { bottom: -10px; left: 25%; animation-delay: 0.4s; color: #f0a8c0; font-size: 0.85rem; }
.gbs:nth-child(5) { bottom: -12px; right: 22%; animation-delay: 1.0s; color: #f0c860; font-size: 0.8rem; }
.gbs:nth-child(6) { top: 50%; right: -12px; animation-delay: 1.6s; color: #e87a9a; font-size: 0.9rem; }
@keyframes gbsFloat {
    0%   { opacity: 0; transform: translateY(0)    scale(0.6) rotate(0deg); }
    25%  { opacity: 1; transform: translateY(-10px) scale(1.1) rotate(15deg); }
    75%  { opacity: 0.6; }
    100% { opacity: 0; transform: translateY(-22px) scale(0.8) rotate(-10deg); }
}

.gallery-btn-icon {
    font-size: 1rem;
    animation: gallerySpark 2s ease-in-out infinite;
}
@keyframes gallerySpark {
    0%, 100% { opacity: 0.7; transform: rotate(0deg) scale(1); }
    50%       { opacity: 1;   transform: rotate(72deg) scale(1.4); }
}

.gallery-btn svg {
    width: 18px; height: 18px;
    transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
}
.gallery-btn:hover svg { transform: translateX(6px); }
.gallery-btn:hover { filter: brightness(1.08); }

/* Texte du bouton */
.gallery-btn-text {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    font-weight: 500;
    letter-spacing: 0.04em;
}

/* Sous-textes */
.gallery-hint {
    font-size: 0.82rem;
    color: var(--muted);
    letter-spacing: 0.12em;
    opacity: 0.7;
    font-style: italic;
    font-family: var(--font-serif);
}

.gallery-mouchoir {
    font-size: 0.85rem;
    color: #b07890;
    font-style: italic;
    font-family: var(--font-serif);
    letter-spacing: 0.04em;
    opacity: 0.72;
}

footer {
    padding: 3rem;
    text-align: center;
    font-size: 0.9rem;
    opacity: 0.5;
}

@media (max-width: 768px) {
    .hero-content {
        padding: 1.4rem 1rem;
        border-radius: 22px;
    }

    .hero-kicker {
        letter-spacing: 0.18em;
    }

    .hero-subtitle {
        max-width: 90%;
        margin: 0 auto;
    }

    .scroll-ind {
        margin-top: 2.5rem;
        letter-spacing: 0.14em;
    }

    .container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .flex-reverse {
        direction: ltr;
    }

    .text-content h2 {
        font-size: 2rem;
    }

    .image-card {
        transform: scale(1);
    }

    #rencontre .text-content {
        padding: 1.5rem 1.2rem;
    }

    #rencontre .text-content::before {
        left: 50%;
        top: 0;
        bottom: auto;
        width: 70px;
        height: 3px;
        transform: translateX(-50%);
    }

    .final-reveal h2 {
        font-size: 3rem;
    }

    .date {
        font-size: 2rem;
    }

    .route-stage {
        padding: 0.8rem;
        border-radius: 20px;
    }

    .route-stage::after {
        inset: 0.8rem;
        border-radius: 14px;
    }

    .route-label {
        font-size: 0.92rem;
    }
}

/* ── Overlay de Connexion Luxueux ── */
.wedding-login {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    overflow: hidden;
}

.login-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(-45deg, #fefcf9, #f5f1ec, #e0d5c1, #fefcf9);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
    filter: blur(3px);
    z-index: -1;
}

@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.login-card {
    background: rgba(255, 252, 248, 0.7);
    backdrop-filter: blur(25px);
    padding: 3.5rem;
    border-radius: 40px;
    border: 1px solid rgba(212, 163, 115, 0.3);
    box-shadow: 
        0 40px 100px rgba(110, 85, 85, 0.15),
        inset 0 0 20px rgba(255, 255, 255, 0.5);
    width: 100%;
    max-width: 500px;
    text-align: center;
    animation: login-appear 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}

@keyframes login-appear {
    from { opacity: 0; transform: translateY(30px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.login-ornament {
    font-size: 1.8rem;
    color: var(--accent);
    margin-bottom: 1.5rem;
    animation: htd-spin 10s linear infinite;
}

.login-card h2 {
    font-family: var(--font-serif);
    font-size: 2.2rem;
    color: var(--primary);
    margin-bottom: 1rem;
    line-height: 1.2;
}

.login-intro {
    font-size: 1rem;
    color: var(--muted);
    margin-bottom: 2.5rem;
    line-height: 1.6;
}

.input-group {
    margin-bottom: 1.2rem;
}

.input-group input {
    width: 100%;
    padding: 1.1rem 1.5rem;
    border-radius: 15px;
    border: 1px solid rgba(212, 163, 115, 0.2);
    background: rgba(255, 255, 255, 0.6);
    font-family: var(--font-sans);
    font-size: 1rem;
    color: var(--text);
    transition: all 0.3s ease;
}

.input-group input:focus {
    outline: none;
    border-color: var(--accent);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(212, 163, 115, 0.1);
}

.login-btn {
    width: 100%;
    padding: 1.2rem;
    border-radius: 15px;
    border: none;
    background: linear-gradient(135deg, var(--accent) 0%, var(--primary) 100%);
    color: #fff;
    font-family: var(--font-sans);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    cursor: pointer;
    transition: all 0.4s ease;
    box-shadow: 0 10px 20px rgba(212, 163, 115, 0.2);
    margin-top: 1rem;
}

.login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(212, 163, 115, 0.3);
    filter: brightness(1.1);
}

.error-msg {
    color: #c27a7a;
    font-size: 0.9rem;
    margin-top: 1.5rem;
    opacity: 0;
    transition: opacity 0.3s;
}

.wedding-login.fade-out {
    opacity: 0;
    pointer-events: none;
    transition: opacity 1s ease-in-out;
}