/* presentation.css - Version responsive avec images agrandies */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Roboto:wght@300;400&display=swap');

/* ---------- RESET & BASE ---------- */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding : 0;
    font-family: 'Roboto',sans-serif;
    color: #333;
    overflow-x: hidden;
    background: #000;
}

/* ---------- HERO ---------- */
.heroP {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100vw;
    background: url('../img/julai.jpeg') no-repeat center/cover;
    text-align: center;
}

    .heroP::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,.6);
    }

.heroP-content {
    position: relative;
    z-index: 1;
    color: #fff;
}

.brand-name {
    font-family: 'Playfair Display',serif;
    font-size: clamp(3rem,8vw,6rem);
    text-transform: uppercase;
    margin: 0;
    letter-spacing: 2px;
}

.tagline {
    font-size: clamp(1rem,2.5vw,1.5rem);
    margin-top: 1rem;
    letter-spacing: 1px;
}

/* ---------- HISTORY / COFFRET ---------- */
.history {
    padding: 5rem 1.25rem;
    background: #000;
    color: #fff;
}

    .history h2 {
        font-family: 'Playfair Display',serif;
        font-size: 3rem;
        margin-bottom: 1.25rem;
        text-transform: uppercase;
    }

    .history p {
        font-size: 1.2rem;
        line-height: 1.8;
        max-width: 50rem;
        margin: 0 auto 1.25rem;
    }

/* ---------- COFFRET STEPS ---------- */
.coffret-step {
    margin-bottom: 4rem;
}

    .coffret-step h3 {
        font-family: 'Playfair Display',serif;
        font-size: 2rem;
        margin-bottom: 1rem;
    }

.coffret-img {
    width: 100%;
    height: auto; /* garde le ratio */
    object-fit: cover;
    border-radius: .5rem;
    box-shadow: 0 10px 25px rgba(0,0,0,.6);
}
/* Images plus grandes sur desktop */
@media (min-width:992px) {
    .coffret-step .col-lg-7 {
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }

    .coffret-step .col-lg-5 {
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }
        /* l'image remplit toute la hauteur de sa colonne pour équilibrer */
        .coffret-step .col-lg-7 .coffret-img,
        .coffret-step .col-lg-5 .coffret-img {
            height: 100%;
        }
}

/* ---------- CTA ---------- */
.cta {
    padding: 4rem 1.25rem;

    color: #fff;
    text-align: center;
}

    .cta h2 {
        font-family: 'Playfair Display',serif;
        font-size: 2.5rem;
        margin-bottom: 1.25rem;
        text-transform: uppercase;
    }

.cta-button {
    display: inline-block;
    padding: 1rem 2.5rem;
    font-size: 1.2rem;
    font-weight: bold;
    text-transform: uppercase;
    color: #111;
    background: #fff;
    border-radius: 30px;
    text-decoration: none;
    transition: background-color .3s ease;
}

    .cta-button:hover {
        background: #f4f4f4;
    }

/* ---------- ANIMATIONS ---------- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }

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

@keyframes fadeOutDown {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(50px);
    }
}

.animated {
    opacity: 0;
    transition: opacity .5s,transform .5s;
}

    .animated.visible {
        animation: fadeInUp .5s forwards;
    }

    .animated.hidden {
        animation: fadeOutDown .5s forwards;
    }

.white-space-pre-line {
    white-space: pre-line;
}

#navbar {
    transform: translateY(-100%);
}


@media (max-width:575.98px) {
    .history p {
        font-size: 1rem;
    }

    .cta h2 {
        font-size: 1.75rem;
    }
}