/* =========================================================
   PAGE HISTOIRE DE LA MAIRIE

   Photos indépendantes :
   - images/mairie-hero.jpg
   - images/mairie-archives.jpg
   - images/mairie-conseil.jpg
   - images/mairie-finale.jpg
========================================================= */


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

* {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    background: #f3efe7;
    color: #1c2d42;
    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(16, 22, 29, 0.76),
            transparent
        );

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

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

.nav-mark {
    opacity: 0.72;
}


/* =========================================================
   GRANDE INTRODUCTION
========================================================= */

.portal {
    position: relative;

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

    display: grid;
    place-items: center;

    overflow: hidden;

    background: #192431;
}

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

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

    transform: scale(1.025);
}


/* PHOTO D'OUVERTURE */

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

    filter:
        sepia(0.18)
        brightness(0.48)
        contrast(1.06);
}


/* VOILE SOMBRE */

.portal::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(11, 20, 30, 0.9),
            rgba(11, 20, 30, 0.34) 63%,
            rgba(11, 20, 30, 0.5)
        ),
        linear-gradient(
            0deg,
            rgba(11, 20, 30, 0.62),
            transparent 55%
        );
}


/* EFFET GRAIN */

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

    opacity: 0.13;

    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='.22'/%3E%3C/svg%3E");
}


/* CONTENU INTRO */

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

    width: min(1120px, 88vw);

    color: white;
}

.kicker,
.era {
    color: #b58b49;

    text-transform: uppercase;

    letter-spacing: 0.19em;

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

.portal h1 {
    max-width: 980px;

    margin: 22px 0 28px;

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

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

.lead {
    max-width: 740px;

    color: #f0ece5;

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


/* BOUTON D'ENTRÉE */

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

    display: inline-flex;
    align-items: center;

    gap: 32px;

    border:
        1px solid rgba(224, 196, 139, 0.65);

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

    backdrop-filter: blur(8px);

    color: white;

    text-decoration: none;
}

.time-door b {
    color: #d9b872;

    font-size: 12px;

    letter-spacing: 0.08em;
}


/* DATE EN BAS DE L'INTRO */

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

    right: 5vw;
    bottom: 6vh;

    color: #d9bd84;

    text-align: right;
    text-transform: uppercase;

    font-family: Cinzel, serif;
    font-size: 12px;

    letter-spacing: 0.08em;
}

.portal-date strong {
    display: block;

    margin-top: 7px;

    font-size: 30px;

    text-transform: none;
}


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

.chapter {
    position: relative;

    min-height: 88vh;

    padding: 120px 8vw;

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

    gap: 2vw;
}

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

.chapter h2,
.details h2,
.renewal h2,
.address 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 ARCHIVES
========================================================= */

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

    background: #e7dece;

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

    transform: rotate(1deg);
}

.old-photo img {
    display: block;

    width: 100%;
    height: 570px;

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

    filter:
        sepia(0.58)
        grayscale(0.12)
        contrast(1.04);
}

.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 DES GRANDES DATES
========================================================= */

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

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

    gap: 1px;

    background: #1d3044;

    color: white;
}

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

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

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

.memory-band strong {
    display: block;

    color: #d8b777;

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

.memory-band span {
    display: block;

    margin-top: 8px;

    color: #e6e0d8;

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


/* =========================================================
   SALLE DU CONSEIL
========================================================= */

.council {
    padding-left: 0;

    gap: 7vw;

    background: #17283c;
}

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

    height: min(70vw, 760px);

    overflow: hidden;

    background: #0f2033;
}

.council-image img {
    display: block;

    width: 100%;
    height: 100%;

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

    filter:
        sepia(0.22)
        brightness(0.76);
}

.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;
}


/* =========================================================
   PIÈCES / DÉTAILS
========================================================= */

.details {
    padding: 130px 8vw;

    background: #f7f2e9;
}

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

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

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

    gap: 25px;
}

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

    padding: 42px 36px;

    background: #fff;

    border-top: 4px solid #b99351;

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

.detail-card span {
    color: #a77836;

    text-transform: uppercase;

    letter-spacing: 0.13em;

    font-size: 11px;
    font-weight: 600;
}

.detail-card h3 {
    margin: 13px 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;
}


/* =========================================================
   RÉNOVATION
========================================================= */

.renewal {
    padding: 130px 8vw;

    background: #e9e1d4;
}

.renewal-title {
    max-width: 760px;
}

.renewal-grid {
    margin-top: 55px;

    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: start;

    gap: 7vw;
}

.renewal-copy p {
    margin: 0 0 22px;

    color: #5d574f;

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

.renewal-cards {
    display: grid;

    gap: 14px;
}

.renewal-card {
    padding: 26px 30px;

    background:
        rgba(255, 255, 255, 0.58);

    border:
        1px solid rgba(167, 120, 54, 0.2);
}

.renewal-card b {
    color: #1b3149;

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

.renewal-card p {
    margin: 7px 0 0;

    color: #655f56;

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


/* =========================================================
   ADRESSE
========================================================= */

.address {
    padding: 100px 8vw;

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

    gap: 80px;

    background: #fff;
}

.address-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: 24px;
    font-weight: 600;

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

.address p {
    max-width: 760px;

    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 */

.finale-bg {
    background-image:
        url("images/mairie-finale.jpg");

    background-position: center 45%;

    filter:
        sepia(0.28)
        brightness(0.31);
}

.finale::after {
    content: "";

    position: absolute;
    inset: 0;

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

.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: 690px;

    color: #e6e0d6;

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


/* BOUTONS DU BAS */

.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;
}


/* =========================================================
   HISTOIRE DE LA MAIRIE — CHRONOLOGIE
========================================================= */

.history-section {
    padding: 130px 8vw;

    background: #f6f1e8;
}

.history-intro {
    max-width: 820px;

    margin: 0 auto 75px;

    text-align: center;
}

.history-intro h2 {
    margin: 15px 0 24px;

    color: #172b45;

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

.history-intro > p:last-child {
    color: #625c54;

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


/* LIGNE CHRONOLOGIQUE */

.mairie-timeline {
    position: relative;

    max-width: 1050px;

    margin: 0 auto;
}

.mairie-timeline::before {
    content: "";

    position: absolute;

    top: 12px;
    bottom: 12px;
    left: 185px;

    width: 1px;

    background:
        rgba(169, 123, 60, 0.45);
}


/* ÉTAPE DE LA CHRONOLOGIE */

.mairie-time {
    position: relative;

    padding: 0 0 70px;

    display: grid;
    grid-template-columns: 150px 1fr;

    gap: 70px;
}

.mairie-time:last-child {
    padding-bottom: 0;
}


/* POINT SUR LA LIGNE */

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

    position: absolute;

    top: 9px;
    left: 180px;

    width: 11px;
    height: 11px;

    border-radius: 50%;

    background: #a97b3c;

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


/* ANNÉE */

.time-year {
    padding-top: 1px;

    color: #9d7034;

    text-align: right;

    font-family: Cinzel, serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.35;
}


/* TEXTE */

.time-copy {
    max-width: 720px;
}

.time-copy h3 {
    margin: 7px 0 14px;

    color: #172b45;

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

.time-copy p {
    margin: 0 0 12px;

    color: #625c54;

    font-family: "Cormorant Garamond", serif;
    font-size: 17px;
    line-height: 1.78;
}


/* NOTE HISTORIQUE */

.time-copy .source-note {
    margin-top: 18px;
    padding: 15px 18px;

    border-left:
        2px solid #b99351;

    background:
        rgba(255, 255, 255, 0.52);

    color: #756c60;

    font-size: 15px;
    font-style: italic;
}


/* =========================================================
   RÉGLAGE DES PHOTOS

   PHOTO D'OUVERTURE :
   .portal-bg {
       background-position: center;
   }

   PHOTO ARCHIVES :
   .old-photo img {
       object-position: center;
   }

   PHOTO SALLE DU CONSEIL :
   .council-image img {
       object-position: center;
   }

   PHOTO DU BAS :
   .finale-bg {
       background-position: center 45%;
   }
========================================================= */


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

@media (max-width: 850px) {

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

    .nav-mark {
        display: none;
    }

    .portal-date {
        display: none;
    }


    /* CHAPITRES */

    .chapter {
        padding: 100px 7vw;

        grid-template-columns: 1fr;
    }


    /* PHOTO ARCHIVES */

    .old-photo img {
        height: auto;

        aspect-ratio: 4 / 3;
    }


    /* BANDEAU DATES */

    .memory-band {
        padding: 25px;

        grid-template-columns: 1fr;
    }

    .memory-band div {
        padding: 25px;

        border-right: 0;

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


    /* SALLE DU CONSEIL */

    .council {
        padding: 0 0 80px;
    }

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

        aspect-ratio: 4 / 3;
    }

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


    /* CARTES / RÉNOVATION / ADRESSE */

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

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


    /* PHOTO DU BAS */

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


    /* FOOTER */

    footer {
        flex-direction: column;

        gap: 12px;
    }


    /* HISTOIRE / CHRONOLOGIE */

    .history-section {
        padding: 95px 7vw;
    }

    .history-intro {
        margin-bottom: 55px;

        text-align: left;
    }

    .mairie-timeline::before {
        left: 5px;
    }

    .mairie-time {
        padding:
            0 0 55px 32px;

        grid-template-columns: 1fr;

        gap: 10px;
    }

    .mairie-time::before {
        top: 8px;
        left: 0;
    }

    .time-year {
        text-align: left;
    }

    .time-copy h3 {
        font-size: 28px;
    }

}