/* =========================================================
   RESET / BASE
========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    margin: 0;
    background: #f2eee6;
    color: #18283d;
    font-family: Montserrat, Arial, sans-serif;
    overflow-x: hidden;
}


/* =========================================================
   NAVIGATION
========================================================= */

.story-nav {
    position: fixed;
    z-index: 30;
    top: 0;
    left: 0;

    width: 100%;
    padding: 22px 5vw;

    display: flex;
    justify-content: space-between;
    align-items: center;

    color: #fff;

    background:
        linear-gradient(
            180deg,
            rgba(9, 17, 29, 0.7),
            transparent
        );

    font-size: 12px;
    letter-spacing: 0.09em;
}

.story-nav a {
    color: #fff;
    text-decoration: none;
}

.nav-mark {
    opacity: 0.72;
}


/* =========================================================
   INTRODUCTION / PORTAIL
========================================================= */

.portal {
    position: relative;

    height: 100vh;
    min-height: 720px;

    display: grid;
    place-items: center;

    overflow: hidden;

    background: #101b27;
}

.portal-bg,
.finale-bg {
    position: absolute;
    inset: 0;

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    filter:
        sepia(0.32)
        brightness(0.5)
        contrast(1.05);

    transform: scale(1.03);
}


/* PHOTO D'OUVERTURE */

.portal-bg {
    background-image: url("images/screen.jpg");
}


/* PHOTO DE FIN */

.finale-bg {
    background-image: url("images/basilique3.png");
}


/* VOILE SOMBRE SUR LA PHOTO D'OUVERTURE */

.portal::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(7, 15, 26, 0.86),
            rgba(7, 15, 26, 0.28) 60%,
            rgba(7, 15, 26, 0.58)
        ),
        linear-gradient(
            0deg,
            rgba(7, 15, 26, 0.65),
            transparent 55%
        );
}


/* GRAIN ANCIEN */

.grain {
    position: absolute;
    z-index: 2;
    inset: 0;

    opacity: 0.16;

    pointer-events: none;

    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
}


/* CONTENU INTRO */

.portal-content {
    position: relative;
    z-index: 4;

    width: min(1120px, 88vw);

    color: white;
}

.kicker,
.era {
    text-transform: uppercase;
    letter-spacing: 0.19em;

    font-size: 12px;
    font-weight: 600;

    color: #b99351;
}

.portal h1 {
    max-width: 950px;

    margin: 22px 0 28px;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(54px, 8vw, 120px);
    font-weight: 600;
    line-height: 0.92;
}

.portal h1 em {
    font-weight: 500;
    color: #dfc48d;
}

.lead {
    max-width: 700px;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(18px, 1.7vw, 24px);
    font-weight: 500;
    line-height: 1.65;

    color: #f0ece4;
}


/* BOUTON ENTRER DANS L'HISTOIRE */

.time-door {
    margin-top: 36px;
    padding: 17px 22px;

    display: inline-flex;
    align-items: center;
    gap: 32px;

    border: 1px solid rgba(222, 194, 139, 0.65);

    background: rgba(12, 22, 34, 0.28);

    backdrop-filter: blur(8px);

    color: white;
    text-decoration: none;
}

.time-door b {
    color: #d8b46e;

    font-size: 12px;

    letter-spacing: 0.08em;
}


/* DATE EN BAS À DROITE */

.portal-date {
    position: absolute;
    z-index: 4;

    right: 5vw;
    bottom: 6vh;

    color: #d9bd84;

    text-align: right;

    font-family: Cinzel, serif;

    letter-spacing: 0.12em;
}

.portal-date strong {
    font-size: 44px;
}


/* =========================================================
   CHAPITRES
========================================================= */

.chapter {
    position: relative;

    min-height: 88vh;

    padding: 120px 8vw;

    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;

    gap: 8vw;
}

.chapter-copy,
.old-photo {
    position: relative;
    z-index: 1;
}

.chapter h2,
.details h2,
.centuries h2,
.unesco h2,
.finale h2 {
    margin: 15px 0 28px;

    color: #172b45;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(44px, 5vw, 76px);
    font-weight: 600;
    line-height: 1.02;
}

.chapter p {
    color: #5f5a52;

    font-family: "Cormorant Garamond", serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.85;
}


/* LETTRINE */

.dropcap::first-letter {
    float: left;

    padding: 13px 9px 0 0;

    color: #a77836;

    font-family: "Cormorant Garamond", serif;
    font-size: 76px;
    font-weight: 600;
    line-height: 0.72;
}


/* =========================================================
   PHOTO ANCIENNE / ORIGINES
========================================================= */

.old-photo {
    margin: 0;
    padding: 15px 15px 22px;

    background: #e7dece;

    box-shadow:
        0 28px 70px rgba(35, 28, 18, 0.18);

    transform: rotate(1.2deg);
}

.old-photo img {
    display: block;

    width: 100%;
    height: 570px;

    object-fit: cover;

    filter:
        sepia(0.75)
        grayscale(0.2)
        contrast(1.05);
}

.old-photo figcaption {
    padding: 13px 6px 0;

    color: #514a41;

    font-family: "Cormorant Garamond", serif;
    font-size: 17px;
    font-style: italic;
}

.old-photo figcaption span {
    color: #273a51;

    font-style: normal;
    font-weight: 600;
}


/* =========================================================
   BANDEAU CHIFFRES / REPÈRES
========================================================= */

.numbers-band {
    padding: 56px 7vw;

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

    gap: 1px;

    background: #15283d;

    color: white;
}

.numbers-band div {
    text-align: center;

    border-right:
        1px solid rgba(255, 255, 255, 0.17);
}

.numbers-band div:last-child {
    border-right: 0;
}

.numbers-band strong {
    display: block;

    color: #d3b170;

    font-family: Cinzel, serif;
    font-size: 48px;
    font-weight: 600;
}

.numbers-band span {
    display: block;

    margin-top: 8px;

    color: #e5e0d8;

    font-family: "Cormorant Garamond", serif;
    font-size: 15px;
    font-weight: 500;
}


/* =========================================================
   CHAPITRE DU PRÉCIEUX SANG
========================================================= */

.relic {
    padding-left: 0;

    gap: 7vw;

    background: #17283c;
}


/* ---------------------------------------------------------
   PHOTO DU PRÉCIEUX SANG

   Pour modifier le cadrage de CETTE photo :
   change object-position ci-dessous.

   Exemples :
   object-position: center;
   object-position: center top;
   object-position: center 35%;
--------------------------------------------------------- */

.relic-image {
    min-height: 620px;

    height: min(74vw, 760px);

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

    overflow: hidden;

    background: #0f2033;
}

.relic-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: center;

    filter:
        sepia(0.25)
        brightness(0.78);
}

.chapter-copy.light {
    padding-right: 7vw;
}

.chapter-copy.light h2 {
    color: #fff;
}

.chapter-copy.light p {
    color: #d8d3ca;
}

.chapter blockquote {
    margin: 36px 0 0;
    padding: 24px 0 24px 28px;

    border-left: 2px solid #b99351;

    color: #e5c78f;

    font-family: "Cormorant Garamond", serif;
    font-size: 29px;
    font-style: italic;
    line-height: 1.35;
}


/* =========================================================
   DÉTAILS ARCHITECTURAUX
========================================================= */

.details {
    padding: 130px 8vw;

    background: #f6f1e8;
}

.details-head {
    max-width: 800px;
}

.detail-grid {
    margin-top: 65px;

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

    gap: 25px;
}

.detail-card {
    min-height: 300px;

    padding: 45px 38px;

    background: #fff;

    border-top: 4px solid #b99351;

    box-shadow:
        0 15px 50px rgba(49, 42, 31, 0.07);
}

.detail-card h3 {
    margin: 8px 0 14px;

    font-family: "Cormorant Garamond", serif;
    font-size: 30px;
    font-weight: 600;
}

.detail-card p {
    color: #6b655c;

    font-family: "Cormorant Garamond", serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.75;
}


/* =========================================================
   FRISE CHRONOLOGIQUE
========================================================= */

.centuries {
    padding: 130px 8vw;

    background: #e9e1d4;
}

.century-title {
    max-width: 730px;
}

.time-line {
    margin-top: 75px;

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

    border-top: 1px solid #b79c6d;
}

.time-stop {
    position: relative;

    padding: 38px 35px 0 0;
}

.time-stop::before {
    content: "";

    position: absolute;

    top: -7px;
    left: 0;

    width: 12px;
    height: 12px;

    border-radius: 50%;

    background: #a97b3c;

    box-shadow:
        0 0 0 7px #e9e1d4;
}

.time-stop b {
    color: #9d7034;

    font-family: Cinzel, serif;
    font-size: 28px;
    font-weight: 600;
}

.time-stop h3 {
    margin: 14px 0;

    font-family: "Cormorant Garamond", serif;
    font-size: 25px;
    font-weight: 600;
}

.time-stop p {
    color: #625c54;

    font-family: "Cormorant Garamond", serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.7;
}


/* =========================================================
   UNESCO
========================================================= */

.unesco {
    padding: 100px 8vw;

    display: grid;
    grid-template-columns: 0.6fr 1.4fr;
    align-items: center;

    gap: 80px;

    background: #fff;
}

.unesco-mark {
    width: 230px;
    height: 230px;

    display: grid;
    place-items: center;

    border: 1px solid #c4a66f;
    border-radius: 50%;

    color: #17304c;

    font-family: Cinzel, serif;
    font-size: 26px;
    font-weight: 600;

    box-shadow:
        inset 0 0 0 12px #f4efe6;
}

.unesco p {
    max-width: 720px;

    color: #5b554d;

    font-family: "Cormorant Garamond", serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.8;
}


/* =========================================================
   GRANDE SECTION DE FIN
========================================================= */

.finale {
    position: relative;

    min-height: 82vh;

    display: grid;
    place-items: center;

    overflow: hidden;
}


/* ---------------------------------------------------------
   PHOTO DU BAS DE PAGE

   C'EST ICI QUE TU RÈGLES LA PHOTO DU BAS.

   background-position: center 42%;

   Exemple :
   center 20% = montre davantage le haut
   center 42% = cadrage actuel
   center 60% = descend l'image
   center bottom = montre davantage le bas
--------------------------------------------------------- */

.finale-bg {
    background-position: center 42%;

    filter:
        sepia(0.45)
        brightness(0.3);
}

.finale::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(8, 18, 31, 0.9),
            rgba(8, 18, 31, 0.36)
        );
}

.finale-content {
    position: relative;
    z-index: 2;

    width: min(1100px, 86vw);

    color: white;
}

.finale h2 {
    margin: 12px 0 24px;

    color: white;

    font-size: clamp(58px, 7vw, 100px);
}

.finale p {
    max-width: 680px;

    color: #e6e0d6;

    font-family: "Cormorant Garamond", serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.7;
}


/* BOUTONS DE FIN */

.final-actions {
    margin-top: 34px;

    display: flex;
    flex-wrap: wrap;

    gap: 14px;
}

.gold-btn,
.ghost-btn {
    padding: 16px 22px;

    text-decoration: none;

    font-size: 13px;
    font-weight: 600;

    letter-spacing: 0.04em;
}

.gold-btn {
    background: #c39b58;
    color: #10233a;
}

.ghost-btn {
    border:
        1px solid rgba(255, 255, 255, 0.5);

    color: #fff;
}


/* =========================================================
   FOOTER
========================================================= */

footer {
    padding: 25px 5vw;

    display: flex;
    justify-content: space-between;

    background: #0e1b2a;

    color: #cfc7bb;

    font-size: 11px;

    letter-spacing: 0.1em;
    text-transform: uppercase;
}


/* =========================================================
   APPARITION AU SCROLL
========================================================= */

.reveal {
    opacity: 0;

    transform: translateY(34px);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

.reveal.visible {
    opacity: 1;

    transform: none;
}


/* =========================================================
   PHOTOS DE LA PAGE HISTOIRE
========================================================= */

/*

Vous pouvez remplacer indépendamment ces 4 fichiers :

images/histoire-hero.png
→ grande photo d'ouverture

images/histoire-origines.png
→ photo du chapitre des origines

images/histoire-relique.png
→ photo du Précieux Sang

images/histoire-finale.png
→ grande photo tout en bas


Gardez simplement exactement les mêmes noms de fichiers.

*/


/* =========================================================
   ÉCRANS INTERMÉDIAIRES / PETITS ORDINATEURS
========================================================= */

@media (min-width: 851px) and (max-aspect-ratio: 4/3) {

    .relic-image {
        height: 620px;
        min-height: 0;
    }

    .relic-image img {
        object-fit: contain;
    }

}


/* =========================================================
   GRANDS ÉCRANS
========================================================= */

@media (min-width: 1400px) {

    .relic-image {
        height: 720px;
        min-height: 0;
    }

    .chapter.relic {
        align-items: center;
    }

}


/* =========================================================
   MOBILE / TABLETTE
========================================================= */

@media (max-width: 850px) {

    .story-nav {
        padding: 18px 20px;
    }

    .nav-mark {
        display: none;
    }


    /* INTRO */

    .portal-date {
        display: none;
    }

    .portal-bg {
        background-position: center;
    }


    /* CHAPITRES */

    .chapter {
        padding: 100px 7vw;

        grid-template-columns: 1fr;
    }


    /* PHOTO ORIGINES */

    .old-photo img {
        height: auto;

        aspect-ratio: 4 / 3;

        object-fit: cover;
    }


    /* BANDEAU */

    .numbers-band {
        padding: 25px;

        grid-template-columns: 1fr;
    }

    .numbers-band div {
        padding: 25px;

        border-right: 0;

        border-bottom:
            1px solid rgba(255, 255, 255, 0.16);
    }


    /* PRÉCIEUX SANG */

    .relic {
        padding: 0 0 80px;
    }

    .relic-image {
        height: auto;
        min-height: 0;

        aspect-ratio: 16 / 9;

        background: #0f2033;
    }

    .relic-image img {
        object-fit: contain;
    }

    .chapter-copy.light {
        padding: 30px 8vw;
    }


    /* CARTES */

    .detail-grid {
        grid-template-columns: 1fr;
    }


    /* FRISE */

    .time-line {
        grid-template-columns: 1fr;

        border-top: 0;
    }

    .time-stop {
        padding: 10px 0 35px 30px;

        border-left:
            1px solid #b79c6d;
    }

    .time-stop::before {
        top: 14px;
        left: -7px;
    }


    /* UNESCO */

    .unesco {
        grid-template-columns: 1fr;
    }

    .unesco-mark {
        width: 160px;
        height: 160px;
    }


    /* PHOTO DU BAS */

    .finale-bg {
        background-position: center;
    }


    /* FOOTER */

    footer {
        flex-direction: column;

        gap: 12px;
    }

}