/* ==========================================================================
   LES CHANTS — PAGE
   ========================================================================== */

:root {
    --chants-bg:#070707;
    --chants-panel:rgba(14,14,14,.82);
    --chants-panel-soft:rgba(20,20,20,.66);
    --chants-border:rgba(255,255,255,.14);

    --chants-silver:#d7d7d7;
    --chants-silver-soft:#9f9f9f;

    --chants-burgundy:#701719;
    --chants-burgundy-light:#9f282b;

    --chants-gold:#c3a170;

    --chants-menu-offset:110px;
}


/* ==========================================================================
   FOND GÉNÉRAL
   ========================================================================== */

.chants-page {
    position:relative;

    min-height:100vh;

    color:#f5f3ef;

    background:#070707;

    isolation:isolate;
}


/*
   Image attendue :
   /assets/images/les-chants/les-chants-bg.jpg
*/
.chants-page::before {
    content:"";

    position:fixed;
    inset:0;

    z-index:-3;

    background-image:
        url("../images/les-chants/les-chants-bg.jpg");

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

    pointer-events:none;
}


.chants-page::after {
    content:"";

    position:fixed;
    inset:0;

    z-index:-2;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.18),
            rgba(0,0,0,.32)
        );

    pointer-events:none;
}


/* ==========================================================================
   HERO
   ========================================================================== */

.chants-hero {
    position:relative;

    min-height:76vh;

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

    isolation:isolate;
    overflow:hidden;

    padding:
        calc(var(--chants-menu-offset) + 55px)
        0
        90px;

    text-align:center;

    background:transparent;
}


.chants-hero__background {
    position:absolute;
    inset:0;

    z-index:-2;

    background:
        radial-gradient(
            ellipse at 50% 38%,
            rgba(115,24,26,.12),
            transparent 48%
        );

    pointer-events:none;
}


.chants-hero__shade {
    position:absolute;
    inset:0;

    z-index:-1;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.12) 0%,
            rgba(0,0,0,.20) 48%,
            rgba(0,0,0,.52) 100%
        ),
        radial-gradient(
            ellipse at center,
            transparent 28%,
            rgba(0,0,0,.10) 68%,
            rgba(0,0,0,.32) 100%
        );

    pointer-events:none;
}


.chants-hero__content {
    position:relative;
    z-index:2;

    width:min(920px,100%);

    margin-inline:auto;
}


.chants-hero .eyebrow {
    margin-bottom:18px;

    color:var(--chants-burgundy-light);

    font-weight:800;

    letter-spacing:.18em;
    text-transform:uppercase;

    text-shadow:
        0 2px 8px rgba(0,0,0,.85);
}


.chants-hero h1 {
    margin:0;

    color:#fff;

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

    font-size:
        clamp(3.3rem,7vw,6.5rem);

    font-weight:500;

    line-height:.95;

    text-shadow:
        0 4px 20px rgba(0,0,0,.84),
        0 1px 3px #000;
}


.chants-hero__intro {
    max-width:750px;

    margin:
        30px
        auto
        0;

    color:#dfddd8;

    font-size:1.08rem;
    line-height:1.8;

    text-shadow:
        0 2px 7px rgba(0,0,0,.96);
}


/* ==========================================================================
   NAVIGATION HERO
   ========================================================================== */
   
 .platform-card {
    align-items:center;
    justify-content:center;
    text-align:center;

    gap:14px;
}

.platform-card__logo-wrap {
    width:70px;
    height:70px;

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

    margin-bottom:4px;
}

.platform-card__logo {
    display:block;

    width:58px;
    height:58px;

    object-fit:contain;
}

.platform-card__name {
    font-size:1.18rem;
}

.platform-card__action {
    margin-top:2px;
}

.chants-hero__nav {
    display:flex;

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

    flex-wrap:wrap;

    gap:14px;

    margin-top:40px;
}


.chants-hero__nav a {
    position:relative;

    min-width:170px;

    padding:
        14px
        22px;

    border:
        1px solid
        rgba(215,215,215,.50);

    background:
        linear-gradient(
            145deg,
            rgba(18,18,18,.72),
            rgba(5,5,5,.54)
        );

    color:#f5f5f2;

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

    font-size:.76rem;
    font-weight:700;

    letter-spacing:.13em;
    text-transform:uppercase;

    text-shadow:
        0 2px 6px #000;

    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.035),
        0 10px 25px rgba(0,0,0,.25);

    transition:
        color .25s ease,
        background .25s ease,
        border-color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}


.chants-hero__nav a::after {
    content:"";

    position:absolute;

    inset:4px;

    border:
        1px solid
        rgba(255,255,255,.08);

    pointer-events:none;
}


.chants-hero__nav a:hover {
    transform:translateY(-3px);

    border-color:
        rgba(230,230,230,.76);

    background:
        linear-gradient(
            145deg,
            rgba(112,23,25,.88),
            rgba(42,9,10,.78)
        );

    box-shadow:
        0 14px 32px rgba(0,0,0,.42);
}


/* ==========================================================================
   SECTIONS GÉNÉRALES
   ========================================================================== */

.chants-section {
    position:relative;

    padding:
        120px
        0;

    background:
        rgba(5,5,5,.73);

    backdrop-filter:blur(1px);
    -webkit-backdrop-filter:blur(1px);
}


/* séparation argentée */
.chants-section::before,
.chants-final::before {
    content:"";

    position:absolute;

    left:50%;
    top:0;

    width:min(900px,72%);
    height:1px;

    transform:
        translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(220,220,220,.20),
            rgba(255,255,255,.60),
            rgba(220,220,220,.20),
            transparent
        );
}


/* ==========================================================================
   TITRES DE SECTION
   ========================================================================== */

.chants-section > .container > .section-heading {
    max-width:900px;

    margin:
        0
        auto
        62px;

    text-align:center;
}


.chants-section > .container > .section-heading .eyebrow {
    margin:
        0
        0
        15px;

    color:
        var(--chants-burgundy-light);

    text-align:center;

    font-weight:800;
    letter-spacing:.18em;
    text-transform:uppercase;
}


.chants-section > .container > .section-heading h2 {
    margin:
        0
        auto
        20px;

    color:#fff;

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

    font-size:
        clamp(2.7rem,5vw,4.9rem);

    font-weight:500;

    line-height:1.05;

    text-shadow:
        0 3px 15px rgba(0,0,0,.72);
}


.chants-section > .container > .section-heading > p:last-child:not(.eyebrow) {
    max-width:720px;

    margin:
        0
        auto;

    color:#c7c4bf;

    line-height:1.8;
}


/* ==========================================================================
   PLATEFORMES D'ÉCOUTE
   ========================================================================== */

.chants-section--platforms {
    background:
        linear-gradient(
            rgba(5,5,5,.70),
            rgba(5,5,5,.74)
        );
}


.platforms-grid {
    display:grid;

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

    gap:16px;
}


.platform-card {
    position:relative;

    min-height:145px;

    display:flex;
    flex-direction:column;

    justify-content:space-between;

    padding:25px;

    border:
        1px solid
        rgba(255,255,255,.15);

    background:
        linear-gradient(
            145deg,
            rgba(22,22,22,.84),
            rgba(7,7,7,.88)
        );

    color:#fff;

    box-shadow:
        0 15px 36px rgba(0,0,0,.22);

    overflow:hidden;

    transition:
        transform .28s ease,
        border-color .28s ease,
        background .28s ease;
}


.platform-card::before {
    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.40),
            transparent
        );

    opacity:.5;
}


.platform-card:hover {
    transform:
        translateY(-6px);

    border-color:
        rgba(230,230,230,.38);

    background:
        linear-gradient(
            145deg,
            rgba(41,27,28,.90),
            rgba(9,9,9,.94)
        );
}


.platform-card__name {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:1.4rem;
}


.platform-card__action {
    color:#bbb;

    font-size:.72rem;
    font-weight:700;

    letter-spacing:.12em;
    text-transform:uppercase;
}


/* ==========================================================================
   ALBUM 01
   ========================================================================== */

.chants-section--album {
    background:
        linear-gradient(
            rgba(6,6,6,.70),
            rgba(6,6,6,.76)
        );
}


/* ==========================================================================
   POCHETTE + QUATRIÈME
   ========================================================================== */

.album-visuals {
    display:grid;

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

    gap:34px;

    max-width:1100px;

    margin:
        0
        auto
        75px;
}


.album-visual {
    margin:0;
}


.album-visual img {
    display:block;

    width:100%;
    height:auto;

    aspect-ratio:1 / 1;

    object-fit:cover;

    border:
        1px solid
        rgba(255,255,255,.18);

    box-shadow:
        0 26px 70px rgba(0,0,0,.42);

    transition:
        transform .45s ease,
        box-shadow .45s ease;
}


.album-visual:hover img {
    transform:
        translateY(-5px)
        scale(1.01);

    box-shadow:
        0 34px 85px rgba(0,0,0,.52);
}


.album-visual figcaption {
    margin-top:13px;

    color:#aaa;

    text-align:center;

    font-size:.68rem;
    font-weight:700;

    letter-spacing:.14em;
    text-transform:uppercase;
}


/* ==========================================================================
   PRÉSENTATION DE L'ALBUM
   ========================================================================== */

.album-presentation {
    max-width:930px;

    margin:
        0
        auto
        75px;

    padding:
        52px
        58px;

    border:
        1px solid
        rgba(255,255,255,.14);

    background:
        linear-gradient(
            145deg,
            rgba(19,19,19,.82),
            rgba(6,6,6,.88)
        );

    box-shadow:
        0 22px 60px rgba(0,0,0,.28);

    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
}


.album-presentation p {
    margin:
        0
        0
        20px;

    color:#c8c5c0;

    line-height:1.85;
}


.album-presentation__lead {
    color:#fff !important;

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

    font-size:
        clamp(1.5rem,2.5vw,2.1rem);

    line-height:1.4 !important;
}


.album-presentation__closing {
    margin-top:30px !important;

    color:#fff !important;

    text-align:center;

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

    font-size:1.25rem;
}


/* ==========================================================================
   NOTE V1
   ========================================================================== */

.album-note {
    position:relative;

    margin-top:38px;

    padding:
        27px
        30px;

    border-left:
        3px solid
        var(--chants-burgundy-light);

    background:
        rgba(112,23,25,.11);
}


.album-note p {
    margin:
        0
        0
        10px;
}


.album-note p:last-child {
    margin-bottom:0;
}


.album-note__title {
    color:#fff !important;

    font-size:.75rem;

    font-weight:800;

    letter-spacing:.14em;
    text-transform:uppercase;
}


/* ==========================================================================
   TRACKLIST
   ========================================================================== */

.album-tracklist {
    max-width:930px;

    margin:
        0
        auto
        75px;

    padding:
        45px
        50px;

    border:
        1px solid
        rgba(255,255,255,.14);

    background:
        rgba(8,8,8,.78);

    box-shadow:
        0 18px 52px rgba(0,0,0,.25);
}


.album-tracklist__heading {
    margin-bottom:30px;
}


.album-tracklist__heading .eyebrow {
    color:
        var(--chants-burgundy-light);
}


.album-tracklist__heading h3 {
    margin:
        5px
        0
        0;

    color:#fff;

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

    font-size:
        clamp(2rem,3.5vw,3rem);

    font-weight:500;
}


.album-tracklist__list {
    list-style:none;

    margin:0;
    padding:0;
}


.album-tracklist__list li {
    display:grid;

    grid-template-columns:
        56px
        1fr;

    gap:16px;

    align-items:center;

    min-height:58px;

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


.album-tracklist__list li:last-child {
    border-bottom:0;
}


.album-tracklist__number {
    color:
        rgba(255,255,255,.30);

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

    font-size:1.1rem;
}


.album-tracklist__title {
    color:#e5e2dc;

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

    font-size:1.22rem;
}


/* ==========================================================================
   LIVRES DE CHANTS
   ========================================================================== */

.songbooks {
    max-width:1050px;

    margin-inline:auto;
}


.songbooks__heading {
    max-width:700px;

    margin:
        0
        auto
        38px;

    text-align:center;
}


.songbooks__heading .eyebrow {
    color:
        var(--chants-burgundy-light);
}


.songbooks__heading h3 {
    margin:
        5px
        0
        13px;

    color:#fff;

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

    font-size:
        clamp(2rem,4vw,3.3rem);

    font-weight:500;
}


.songbooks__heading p:last-child {
    color:#bbb;

    line-height:1.75;
}


.songbooks__grid {
    display:grid;

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

    gap:24px;
}


.songbook-card {
    position:relative;

    min-height:330px;

    display:flex;
    flex-direction:column;

    justify-content:flex-start;

    padding:
        38px
        38px
        34px;

    border:
        1px solid
        rgba(255,255,255,.14);

    background:
        linear-gradient(
            145deg,
            rgba(22,22,22,.83),
            rgba(7,7,7,.90)
        );

    box-shadow:
        0 18px 48px rgba(0,0,0,.25);
}


.songbook-card--collector {
    border-color:
        rgba(195,161,112,.32);

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(195,161,112,.08),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            rgba(25,22,19,.88),
            rgba(7,7,7,.92)
        );
}


.songbook-card__edition {
    color:
        var(--chants-burgundy-light);

    font-size:.72rem;
    font-weight:800;

    letter-spacing:.15em;
    text-transform:uppercase;
}


.songbook-card--collector .songbook-card__edition {
    color:
        var(--chants-gold);
}


.songbook-card h4 {
    margin:
        17px
        0
        17px;

    color:#fff;

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

    font-size:2rem;

    font-weight:500;
}


.songbook-card p {
    margin:
        0
        0
        28px;

    color:#bdbab5;

    line-height:1.75;
}


.songbook-card__actions {
    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-top:auto;
}


/* ==========================================================================
   SINGLES
   ========================================================================== */

.chants-section--singles {
    background:
        linear-gradient(
            rgba(5,5,5,.74),
            rgba(5,5,5,.78)
        );
}


.singles-list {
    max-width:1100px;

    margin-inline:auto;
}


.single-card {
    display:grid;

    grid-template-columns:
        .9fr
        1.1fr;

    min-height:520px;

    border:
        1px solid
        rgba(255,255,255,.14);

    background:
        linear-gradient(
            135deg,
            rgba(18,18,18,.87),
            rgba(6,6,6,.92)
        );

    overflow:hidden;

    box-shadow:
        0 26px 70px rgba(0,0,0,.32);
}


.single-card__image {
    position:relative;

    min-height:520px;

    overflow:hidden;

    background:#101010;
}


.single-card__image::after {
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.32),
            transparent 48%
        );

    pointer-events:none;
}


.single-card__image img {
    width:100%;
    height:100%;

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

    transition:
        transform .65s ease;
}


.single-card:hover
.single-card__image img {
    transform:
        scale(1.025);
}


.single-card__content {
    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:
        60px
        clamp(38px,5vw,74px);
}


.single-card__number {
    margin:
        0
        0
        13px;

    color:
        var(--chants-burgundy-light);

    font-size:.72rem;
    font-weight:800;

    letter-spacing:.17em;
    text-transform:uppercase;
}


.single-card__content h3 {
    margin:
        0
        0
        24px;

    color:#fff;

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

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

    font-weight:500;
}


.single-card__content p {
    margin:
        0
        0
        18px;

    color:#c2bfba;

    line-height:1.8;
}


.single-card__lead {
    color:#ece8e1 !important;

    font-size:1.08rem;
}


.single-card__note {
    margin-top:8px !important;

    padding-top:17px;

    border-top:
        1px solid
        rgba(255,255,255,.10);

    color:#aaa !important;

    font-style:italic;
}


/* ==========================================================================
   BAS DE PAGE
   ========================================================================== */

.chants-final {
    position:relative;

    padding:
        110px
        0;

    text-align:center;

    background:
        linear-gradient(
            rgba(3,3,3,.80),
            rgba(3,3,3,.90)
        );
}


.chants-final__content {
    max-width:820px;

    margin-inline:auto;
}


.chants-final .eyebrow {
    color:
        var(--chants-burgundy-light);
}


.chants-final h2 {
    margin:
        0
        0
        20px;

    color:#fff;

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

    font-size:
        clamp(2.7rem,5vw,4.7rem);

    font-weight:500;
}


.chants-final p:not(.eyebrow) {
    max-width:650px;

    margin:
        0
        auto
        35px;

    color:#c4c1bc;

    line-height:1.8;
}


/* ==========================================================================
   BOUTONS SECONDAIRES
   ========================================================================== */

.button--secondary {
    border-color:
        rgba(220,220,220,.42);

    background:
        rgba(5,5,5,.40);

    backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px);
}


.button--secondary:hover {
    color:#111;

    background:#f2f0eb;
}


/* ==========================================================================
   ANCRES SOUS MENU FIXE
   ========================================================================== */

#plateformes,
#album-01,
#singles {
    scroll-margin-top:
        calc(var(--chants-menu-offset) + 25px);
}


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

.page-les-chants .site-footer,
.page-les-chants footer {
    position:relative;

    z-index:10;

    display:block;

    width:100%;

    background:#050505;
}


/* ==========================================================================
   RESPONSIVE — GRANDES TABLETTES
   ========================================================================== */

@media (max-width:1150px) {

    .platforms-grid {
        grid-template-columns:
            repeat(3,1fr);
    }
}


/* ==========================================================================
   RESPONSIVE — TABLETTES
   ========================================================================== */

@media (max-width:900px) {

    :root {
        --chants-menu-offset:90px;
    }


    .platforms-grid {
        grid-template-columns:
            repeat(2,1fr);
    }


    .album-visuals {
        gap:22px;
    }


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


    .single-card {
        grid-template-columns:1fr;
    }


    .single-card__image {
        min-height:520px;
    }
}


/* ==========================================================================
   RESPONSIVE — MOBILE
   ========================================================================== */

@media (max-width:700px) {

    :root {
        --chants-menu-offset:78px;
    }


    .chants-page::before,
    .chants-page::after {
        position:absolute;
    }


    .chants-page::before {
        background-position:
            center top;
    }


    .chants-hero {
        min-height:auto;

        padding:
            calc(
                var(--chants-menu-offset)
                + 45px
            )
            0
            75px;
    }


    .chants-hero h1 {
        font-size:
            clamp(2.7rem,13vw,4.2rem);
    }


    .chants-hero__intro {
        font-size:.98rem;
    }


    .chants-hero__nav {
        flex-direction:column;
    }


    .chants-hero__nav a {
        width:
            min(320px,90vw);
    }


    .chants-section {
        padding:
            85px
            0;
    }


    .chants-section >
    .container >
    .section-heading {
        margin-bottom:42px;
    }


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


    .platform-card {
        min-height:125px;
    }


    .album-visuals {
        grid-template-columns:1fr;

        max-width:520px;

        margin-bottom:55px;
    }


    .album-presentation {
        padding:
            35px
            26px;

        margin-bottom:55px;
    }


    .album-tracklist {
        padding:
            35px
            26px;

        margin-bottom:55px;
    }


    .album-tracklist__list li {
        grid-template-columns:
            44px
            1fr;
    }


    .album-tracklist__title {
        font-size:1.08rem;
    }


    .songbook-card {
        min-height:0;

        padding:
            32px
            26px;
    }


    .songbook-card__actions {
        flex-direction:column;
    }


    .songbook-card__actions .button {
        width:100%;
    }


    .single-card {
        min-height:0;
    }


    .single-card__image {
        min-height:390px;
    }


    .single-card__content {
        padding:
            42px
            28px;
    }


    .chants-final {
        padding:
            85px
            0;
    }
}