/* =========================================
   LA ROSE NOIRE
   STYLE PRINCIPAL
========================================= */


/* ---------- VARIABLES ---------- */

:root {

    --black: #080304;
    --black-light: #120607;

    --blood: #65080d;
    --blood-dark: #350407;
    --blood-light: #9c151d;

    --cream: #e8dcd5;
    --grey: #a99595;

    --border: rgba(232, 220, 213, 0.18);

}


/* ---------- RESET ---------- */

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

html {
    scroll-behavior: smooth;
}

body {

    background:
        radial-gradient(
            circle at 80% 10%,
            rgba(101, 8, 13, 0.28),
            transparent 30%
        ),

        radial-gradient(
            circle at 10% 80%,
            rgba(101, 8, 13, 0.16),
            transparent 30%
        ),

        var(--black);

    color: var(--cream);

    font-family: "Montserrat", sans-serif;

    min-height: 100vh;

}


/* ---------- TEXTES ---------- */

h1,
h2,
h3 {

    font-family: "Cormorant Garamond", serif;

    font-weight: 500;

}

p {
    line-height: 1.8;
}

.small-title {

    font-size: 0.68rem;

    letter-spacing: 0.3em;

    text-transform: uppercase;

    color: #b87979;

}


/* ---------- NAVIGATION ---------- */

.navbar {

    width: 100%;

    padding: 25px 6%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    position: relative;

    z-index: 10;

    border-bottom: 1px solid var(--border);

    background: rgba(8, 3, 4, 0.9);

    backdrop-filter: blur(10px);

}


.logo {

    color: var(--cream);

    text-decoration: none;

    font-family: "Cormorant Garamond", serif;

    font-size: 1.4rem;

    letter-spacing: 0.12em;

}


nav {

    display: flex;

    gap: 28px;

}


nav a {

    color: var(--grey);

    text-decoration: none;

    font-size: 0.72rem;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    transition: 0.3s;

    position: relative;

}


nav a:hover,
nav a.active {

    color: var(--cream);

}


nav a.active::after {

    content: "";

    position: absolute;

    left: 0;

    right: 0;

    bottom: -8px;

    height: 1px;

    background: var(--blood-light);

}


/* ---------- HERO ---------- */

.hero {

    min-height: 90vh;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

    overflow: hidden;

}


.hero::before {

    content: "";

    position: absolute;

    width: 600px;

    height: 600px;

    background: var(--blood-dark);

    border-radius: 50%;

    filter: blur(120px);

    opacity: 0.5;

}


.hero-content {

    text-align: center;

    position: relative;

    z-index: 2;

}


.hero h1 {

    font-size: clamp(5rem, 13vw, 11rem);

    line-height: 0.75;

    margin: 25px 0 40px;

}


.hero h1 span {

    color: var(--blood-light);

    font-style: italic;

}


.quote {

    color: var(--grey);

    font-family: "Cormorant Garamond", serif;

    font-size: 1.25rem;

    font-style: italic;

    margin-bottom: 35px;

}


.rose-decoration {

    color: var(--blood-light);

    font-size: 1.2rem;

}


.hero-rose {

    position: absolute;

    right: 7%;

    bottom: 5%;

    width: 220px;

    opacity: 0.8;

    animation: floatingRose 5s ease-in-out infinite;

}


.hero-rose img {

    width: 100%;

    filter:
        grayscale(1)
        contrast(1.3)
        brightness(0.55)
        drop-shadow(0 0 30px rgba(120, 0, 0, 0.5));

}


@keyframes floatingRose {

    0%, 100% {
        transform: rotate(-5deg) translateY(0);
    }

    50% {
        transform: rotate(5deg) translateY(-15px);
    }

}


/* ---------- BOUTONS ---------- */

.button {

    display: inline-block;

    padding: 14px 30px;

    border: 1px solid rgba(156, 21, 29, 0.7);

    color: var(--cream);

    text-decoration: none;

    text-transform: uppercase;

    font-size: 0.68rem;

    letter-spacing: 0.2em;

    transition: 0.3s;

}


.button:hover {

    background: var(--blood);

    border-color: var(--blood);

}


/* ---------- SECTIONS ---------- */

.section {

    width: min(1100px, 88%);

    margin: auto;

    padding: 100px 0;

}


.section-title {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 20px;

    margin-bottom: 60px;

}


.section-title h2 {

    font-size: 3rem;

}


.section-title span {

    color: var(--blood-light);

}


/* ---------- INTRO ---------- */

.intro-box {

    max-width: 700px;

    margin: auto;

    text-align: center;

    font-family: "Cormorant Garamond", serif;

    font-size: 1.35rem;

    color: var(--grey);

}


.intro-box p {

    margin-bottom: 22px;

}


.intro-box strong {

    color: var(--cream);

    font-size: 1.6rem;

}


/* ---------- MYSTERY ---------- */

.mystery {

    min-height: 500px;

    display: flex;

    align-items: center;

    gap: 80px;

}


.mystery-content {

    flex: 1;

}


.mystery-content h2 {

    font-size: 4rem;

    margin: 20px 0;

}


.mystery-content p {

    color: var(--grey);

    max-width: 500px;

    margin-bottom: 15px;

}


.text-link {

    display: inline-block;

    margin-top: 20px;

    color: var(--cream);

    text-decoration: none;

    border-bottom: 1px solid var(--blood-light);

    padding-bottom: 5px;

}


.mystery-flower {

    flex: 1;

    display: flex;

    justify-content: center;

}


.fake-rose {

    font-size: 12rem;

    filter:
        grayscale(1)
        brightness(0.35)
        drop-shadow(0 0 40px rgba(120, 0, 0, 0.5));

    animation: floatingRose 6s ease-in-out infinite;

}


/* ---------- CARDS ---------- */

.cards {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 25px;

}


.card {

    padding: 35px;

    border: 1px solid var(--border);

    background: rgba(30, 5, 7, 0.35);

    transition: 0.3s;

}


.card:hover {

    transform: translateY(-5px);

    border-color: rgba(156, 21, 29, 0.6);

}


.card-date {

    font-size: 0.65rem;

    color: #a84b50;

    letter-spacing: 0.2em;

}


.card h3 {

    font-size: 1.8rem;

    margin: 15px 0;

}


.card p {

    color: var(--grey);

}


.card a {

    display: inline-block;

    margin-top: 20px;

    color: var(--cream);

    text-decoration: none;

}


/* ---------- PAGE HEADER ---------- */

.page-header {

    text-align: center;

    padding: 120px 20px 80px;

    background:
        linear-gradient(
            to bottom,
            rgba(101, 8, 13, 0.18),
            transparent
        );

}


.page-header h1 {

    font-size: clamp(4rem, 9vw, 7rem);

    margin: 15px 0;

}


.page-header > p:last-child {

    color: var(--grey);

}


/* ---------- ANNONCES ---------- */

.announcements {

    max-width: 900px;

}


.announcement {

    display: grid;

    grid-template-columns: 100px 1fr;

    gap: 45px;

    padding: 45px 0;

    border-bottom: 1px solid var(--border);

}


.announcement:first-child {

    border-top: 1px solid var(--border);

}


.announcement-date {

    font-family: "Cormorant Garamond", serif;

    font-size: 2rem;

    color: var(--blood-light);

    text-align: center;

}


.announcement-date span {

    font-family: "Montserrat", sans-serif;

    font-size: 0.6rem;

    letter-spacing: 0.2em;

}


.announcement h2 {

    font-size: 2.5rem;

    margin: 10px 0 15px;

}


.announcement p:last-child {

    color: var(--grey);

}


/* ---------- PERSONNAGES ---------- */

.characters {

    display: flex;

    flex-direction: column;

    gap: 70px;

}


.character-card {

    display: grid;

    grid-template-columns: 1fr 1fr;

    min-height: 400px;

    border: 1px solid var(--border);

    background: rgba(25, 5, 7, 0.45);

}


.character-card.reverse {

    direction: rtl;

}


.character-card.reverse .character-info {

    direction: ltr;

}


.character-image {

    overflow: hidden;

    background: var(--blood-dark);

}


.character-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    filter: grayscale(0.5) contrast(1.1);

}


.character-info {

    padding: 60px;

    display: flex;

    flex-direction: column;

    justify-content: center;

}


.character-info h2 {

    font-size: 4rem;

    margin: 10px 0 20px;

}


.character-description {

    color: var(--grey);

    max-width: 450px;

}


.character-details {

    display: flex;

    gap: 35px;

    margin-top: 35px;

    padding-top: 25px;

    border-top: 1px solid var(--border);

}


.character-details p {

    font-size: 0.75rem;

    color: var(--grey);

}


.character-details span {

    display: block;

    text-transform: uppercase;

    letter-spacing: 0.15em;

    font-size: 0.55rem;

    color: #a84b50;

    margin-bottom: 5px;

}


/* ---------- AUTRICES ---------- */

.authors {

    max-width: 950px;

}


.author {

    display: grid;

    grid-template-columns: 300px 1fr;

    gap: 60px;

    align-items: center;

    padding: 50px 0;

    border-bottom: 1px solid var(--border);

}


.author-image {

    aspect-ratio: 1;

    overflow: hidden;

    background: var(--blood-dark);

    border: 1px solid var(--border);

}


.author-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}


.author-info h2 {

    font-size: 3.5rem;

    margin: 10px 0 20px;

}


.author-info p:last-child {

    color: var(--grey);

}


.authors-message {

    text-align: center;

    max-width: 700px;

}


.authors-message h2 {

    font-size: 3rem;

    margin: 15px 0;

}


.authors-message > p:last-child {

    color: var(--grey);

}


/* ---------- CHAPITRES ---------- */

.chapters {

    max-width: 950px;

}


.chapter {

    display: flex;

    align-items: center;

    gap: 30px;

    padding: 30px 20px;

    border-top: 1px solid var(--border);

    color: var(--cream);

    text-decoration: none;

    transition: 0.3s;

}


.chapter:last-child {

    border-bottom: 1px solid var(--border);

}


.chapter:hover {

    background: rgba(101, 8, 13, 0.18);

    padding-left: 30px;

}


.chapter-number {

    font-family: "Cormorant Garamond", serif;

    font-size: 2.5rem;

    color: var(--blood-light);

    width: 70px;

}


.chapter-content {

    flex: 1;

}


.chapter-content p {

    color: #a84b50;

    font-size: 0.6rem;

    letter-spacing: 0.2em;

}


.chapter-content h2 {

    font-size: 2rem;

    margin-top: 5px;

}


.arrow {

    font-size: 1.5rem;

    color: var(--grey);

}


.locked {

    opacity: 0.45;

}


.lock {

    color: var(--blood-light);

}


/* ---------- FOOTER ---------- */

footer {

    margin-top: 100px;

    padding: 70px 20px;

    text-align: center;

    border-top: 1px solid var(--border);

    background: rgba(25, 3, 5, 0.5);

}


.footer-rose {

    font-size: 2rem;

    filter: grayscale(1);

    margin-bottom: 15px;

}


footer p {

    font-family: "Cormorant Garamond", serif;

    font-size: 1.5rem;

    letter-spacing: 0.2em;

}


footer small {

    display: block;

    margin-top: 10px;

    color: var(--grey);

}


/* ---------- RESPONSIVE ---------- */

@media (max-width: 800px) {

    .navbar {

        flex-direction: column;

        gap: 20px;

    }

    nav {

        flex-wrap: wrap;

        justify-content: center;

        gap: 15px;

    }

    .hero {

        min-height: 80vh;

    }

    .hero-rose {

        width: 130px;

        right: 3%;

        opacity: 0.45;

    }

    .mystery {

        flex-direction: column;

        text-align: center;

    }

    .mystery-content p {

        margin-left: auto;

        margin-right: auto;

    }

    .cards {

        grid-template-columns: 1fr;

    }

    .character-card,
    .character-card.reverse {

        grid-template-columns: 1fr;

        direction: ltr;

    }

    .character-image {

        height: 350px;

    }

    .character-info {

        padding: 40px 30px;

    }

    .character-details {

        flex-wrap: wrap;

    }

    .author {

        grid-template-columns: 1fr;

        gap: 30px;

    }

    .author-image {

        max-width: 300px;

        margin: auto;

    }

}


@media (max-width: 500px) {

    .section {

        width: 90%;

        padding: 70px 0;

    }

    .hero h1 {

        font-size: 5rem;

    }

    .announcement {

        grid-template-columns: 60px 1fr;

        gap: 20px;

    }

    .announcement h2 {

        font-size: 2rem;

    }

    .chapter-content h2 {

        font-size: 1.5rem;

    }

}