:root{--g:#062f29;--gold:#d9b35a;--gold2:#f4d995;--cream:#fbf7ed}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,sans-serif;background:var(--cream);color:#173d35}body.lock{overflow:hidden}nav{position:fixed;z-index:100;top:15px;left:50%;transform:translateX(-50%);padding:10px 18px;background:#062f29dd;border:1px solid #f4d99566;border-radius:30px;opacity:0;transition:.5s}nav.show{opacity:1}nav a{color:#fff;margin:0 8px;font-size:12px}.hero{height:100svh;min-height:650px;position:relative;overflow:hidden;display:grid;place-items:end center}.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}.overlay{position:absolute;inset:0;background:linear-gradient(#0001,#021e19ef)}.hero-content{position:relative;color:white;text-align:center;padding:80px 20px}.hero h1{font:500 clamp(4rem,14vw,8rem)/.8 Georgia,serif;color:var(--gold2)}.hero h1 i{color:white}.btn{display:inline-block;padding:13px 22px;border:1px solid var(--gold2);border-radius:30px;color:white;margin-top:25px}.container{max-width:1050px;margin:auto;padding:90px 20px}h2{font:500 clamp(2.5rem,6vw,4rem)/1 Georgia,serif;text-align:center;color:var(--g)}small{letter-spacing:.25em;color:#9a7a32}.story{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}.story img{width:100%;height:600px;object-fit:cover}.story blockquote{font:italic 28px/1.3 Georgia,serif;border-left:2px solid var(--gold);padding-left:20px}.dark{background:var(--g);color:#fff;text-align:center}.dark h2{color:var(--gold2)}.count{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:650px;margin:40px auto}.count div{border:1px solid #f4d99544;padding:20px}.count b{display:block;font:40px Georgia;color:var(--gold2)}.count small{color:#fff}.verse{text-align:center;background:#f0e8d4}.verse p{max-width:750px;margin:auto;font:italic 32px Georgia;color:var(--g)}form{max-width:650px;margin:auto;display:grid;gap:12px}input,select,textarea,button{font:inherit;padding:14px;border:1px solid #ddd}button{background:var(--g);color:#fff;cursor:pointer}footer{background:#04251f;color:#fff;text-align:center;padding:45px}.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--g);color:#fff;padding:12px 20px;border-radius:30px;display:none}.toast.show{display:block}
/* ========================================
   HERO — LUKA & SIKA
======================================== */

.hero {
    position: relative;
    height: 100svh;
    min-height: 700px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #062f29;
}

/* PHOTO */

.hero-image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;

    transform: scale(1.03);

    animation: heroZoom 12s ease-out forwards;
}


/* OVERLAY */

.hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0, 20, 16, 0.15) 0%,
            rgba(0, 20, 16, 0.05) 35%,
            rgba(0, 20, 16, 0.45) 70%,
            rgba(0, 20, 16, 0.92) 100%
        );

    z-index: 1;
}


/* CADRE */

.hero-border {
    position: absolute;
    inset: 22px;

    border: 1px solid rgba(244, 217, 149, 0.55);

    z-index: 2;

    pointer-events: none;
}

.hero-border::before,
.hero-border::after {
    content: "";

    position: absolute;

    width: 35px;
    height: 35px;

    border-color: #f4d995;
    border-style: solid;
}

.hero-border::before {
    top: -1px;
    left: -1px;

    border-width: 2px 0 0 2px;
}

.hero-border::after {
    right: -1px;
    bottom: -1px;

    border-width: 0 2px 2px 0;
}


/* CONTENU */

.hero-content {
    position: relative;

    z-index: 3;

    width: min(900px, 90%);

    text-align: center;

    color: white;

    padding-top: 60px;

    animation: heroContent 1.4s ease-out forwards;
}


/* PETIT TITRE */

.hero-top {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 15px;

    color: #f4d995;

    font-size: 10px;

    letter-spacing: 0.35em;

    font-weight: 600;

    margin-bottom: 35px;
}

.hero-line {
    width: 45px;

    height: 1px;

    background: #d9b35a;
}


/* INTRO */

.hero-intro {
    display: flex;

    flex-direction: column;

    align-items: center;

    color: rgba(255,255,255,.9);

    font-family: Georgia, serif;

    font-style: italic;

    font-size: 19px;

    line-height: 1.2;

    margin-bottom: 10px;
}

.hero-intro strong {
    color: #f4d995;

    font-family: Georgia, serif;

    font-size: 18px;

    letter-spacing: .15em;

    margin-top: 5px;
}


/* NOMS */

.hero h1 {
    margin: 10px 0 18px;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 18px;

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(70px, 12vw, 150px);

    line-height: .8;

    font-weight: 400;

    letter-spacing: -0.04em;

    color: #f4d995;

    text-shadow:
        0 4px 25px rgba(0,0,0,.25);
}

.hero h1 span {
    color: #f4d995;
}

.hero h1 i {
    font-size: .45em;

    color: white;

    font-weight: 400;

    font-style: italic;

    margin-top: 10px;
}


/* SEPARATEUR */

.hero-divider {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    margin: 20px auto;
}

.hero-divider span {
    width: 70px;

    height: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        #d9b35a
    );
}

.hero-divider span:last-child {
    background: linear-gradient(
        90deg,
        #d9b35a,
        transparent
    );
}

.hero-divider b {
    color: #f4d995;

    font-size: 18px;

    font-weight: 400;
}


/* DATE */

.hero-date {
    color: white;

    font-size: 13px;

    letter-spacing: .35em;

    font-weight: 600;

    margin-top: 25px;
}


/* LIEU */

.hero-location {
    margin-top: 8px;

    color: rgba(255,255,255,.7);

    font-size: 10px;

    letter-spacing: .3em;
}


/* BOUTON */

.hero-button {
    display: inline-flex;

    align-items: center;

    gap: 18px;

    margin-top: 40px;

    padding: 13px 22px;

    color: white;

    border: 1px solid rgba(244,217,149,.65);

    border-radius: 50px;

    background: rgba(6,47,41,.25);

    backdrop-filter: blur(8px);

    font-size: 9px;

    letter-spacing: .18em;

    transition: all .4s ease;
}

.hero-button b {
    color: #f4d995;

    font-size: 16px;

    font-weight: 400;

    transition: transform .3s ease;
}

.hero-button:hover {
    background: #f4d995;

    color: #062f29;

    transform: translateY(-3px);
}

.hero-button:hover b {
    color: #062f29;

    transform: translateY(3px);
}


/* SCROLL */

.hero-scroll {
    position: absolute;

    z-index: 4;

    bottom: 30px;

    left: 50%;

    transform: translateX(-50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;

    color: rgba(255,255,255,.7);

    font-size: 8px;

    letter-spacing: .3em;
}

.hero-scroll i {
    display: block;

    width: 1px;

    height: 38px;

    background: linear-gradient(
        #f4d995,
        transparent
    );

    animation: scrollLine 1.8s infinite;
}


/* ANIMATIONS */

@keyframes heroZoom {

    from {
        transform: scale(1.03);
    }

    to {
        transform: scale(1.10);
    }

}

@keyframes heroContent {

    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

@keyframes scrollLine {

    0% {
        opacity: 0;
        transform: scaleY(.4);
        transform-origin: top;
    }

    50% {
        opacity: 1;
        transform: scaleY(1);
    }

    100% {
        opacity: 0;
        transform: scaleY(.4);
        transform-origin: bottom;
    }

}
/* Zone de lisibilité derrière le texte */
.hero-content {
    position: relative;
    z-index: 3;

    width: min(800px, 90%);
    text-align: center;
    color: white;

    padding: 10px ;

    /* Fond très léger */
    background: rgba(3, 30, 25, 0.18);

    /* Effet verre */
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);

    /* Bordure très discrète */
    border: 1px solid rgba(244, 217, 149, 0.15);

    /* Coins élégants */
    border-radius: 4px;

    /* Ombre légère */
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.12);

    animation: heroContent 1.4s ease-out forwards;
}

.hero h1 {
    font-size: clamp(50px, 9vw, 90px);
}