/* ==========================================================================
   LA TROPA — LE PROJET
   ========================================================================== */

:root {
    --project-bg: #070707;
    --project-bg-soft: #0d0d0d;
    --project-panel: rgba(17, 17, 17, .90);
    --project-panel-soft: rgba(22, 22, 22, .72);

    --project-border: rgba(255, 255, 255, .13);
    --project-border-strong: rgba(255, 255, 255, .24);

    --project-white: #f5f3ee;
    --project-silver: #d4d4d4;
    --project-muted: #aaa7a2;

    --project-burgundy: #71191c;
    --project-burgundy-light: #9a292c;

    --project-gold: #c6a87b;
    --project-gold-soft: rgba(198, 168, 123, .18);

    --project-menu-offset: 110px;

    --project-radius: 2px;
    --project-transition: .3s ease;
}


/* ==========================================================================
   PAGE
   ========================================================================== */

.project-page {
    position: relative;
    min-height: 100vh;

    background:
        linear-gradient(
            rgba(6, 6, 6, .92),
            rgba(6, 6, 6, .92)
        ),
        #070707;

    color: var(--project-white);

    overflow: hidden;
}


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

.project-hero {
    position: relative;

    /* Le Hero occupe exactement tout l'écran */
    min-height: 100vh;
    min-height: 100svh;

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

    /*
     * On tient compte du menu fixe sans augmenter
     * artificiellement la hauteur du Hero.
     */
    box-sizing: border-box;

    padding:
        calc(var(--project-menu-offset) + 30px)
        0
        45px;

    text-align: center;

    overflow: hidden;
    isolation: isolate;
}

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

    z-index: -3;

    background:
        url("../images/le-projet/le-projet-bg.jpg")
        center / cover
        no-repeat;

    transform: scale(1.02);
}


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

    z-index: -2;

    background:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, .54) 0%,
            rgba(0, 0, 0, .32) 38%,
            rgba(0, 0, 0, .78) 100%
        ),
        radial-gradient(
            ellipse at center,
            transparent 15%,
            rgba(0, 0, 0, .25) 55%,
            rgba(0, 0, 0, .70) 100%
        );
}


.project-hero {
    position: relative;

    /* Le Hero occupe exactement tout l'écran */
    min-height: 100vh;
    min-height: 100svh;

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

    /*
     * On tient compte du menu fixe sans augmenter
     * artificiellement la hauteur du Hero.
     */
    box-sizing: border-box;

    padding:
        calc(var(--project-menu-offset) + 30px)
        0
        45px;

    text-align: center;

    overflow: hidden;
    isolation: isolate;
}


.project-hero .eyebrow {
    margin-bottom: 20px;

    color: var(--project-gold);
}


.project-hero h1 {
    margin: 0;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(3rem, 7vw, 6.7rem);
    font-weight: 500;
    line-height: .95;

    color: #fff;

    text-shadow:
        0 4px 25px rgba(0, 0, 0, .85);
}


.project-hero__lead {
    max-width: 800px;

    margin:
        32px
        auto
        0;

    color: #eee;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.25rem, 2vw, 1.65rem);
    line-height: 1.6;
}


.project-hero__intro {
    max-width: 820px;

    margin:
        18px
        auto
        36px;

    color: #c4c4c4;

    font-size: 1.05rem;
    line-height: 1.85;
}


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

.project-page .button {
    display: inline-flex;

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

    min-height: 50px;

    padding: 13px 26px;

    border: 1px solid var(--project-burgundy-light);

    background:
        linear-gradient(
            145deg,
            var(--project-burgundy-light),
            var(--project-burgundy)
        );

    color: #fff;

    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .12em;
    line-height: 1.2;

    text-align: center;
    text-transform: uppercase;
    text-decoration: none;

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

    transition:
        transform var(--project-transition),
        background var(--project-transition),
        border-color var(--project-transition),
        color var(--project-transition),
        box-shadow var(--project-transition);
}


.project-page .button:hover {
    transform: translateY(-3px);

    border-color: #bc3a3e;

    background:
        linear-gradient(
            145deg,
            #9e292d,
            #78191c
        );

    box-shadow:
        0 15px 34px rgba(0, 0, 0, .38);
}


.project-page .button--secondary {
    border-color: rgba(255, 255, 255, .32);

    background: rgba(7, 7, 7, .56);

    color: #fff;

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


.project-page .button--secondary:hover {
    border-color: var(--project-gold);

    background: rgba(198, 168, 123, .12);

    color: #fff;
}


/* ==========================================================================
   SECTIONS — STRUCTURE GÉNÉRALE
   ========================================================================== */

.project-section {
    position: relative;

    padding: 120px 0;

    background: #080808;
}


.project-section:nth-of-type(even) {
    background: #0a0a0a;
}


.project-section::before,
.project-final::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: min(950px, 75%);
    height: 1px;

    transform: translateX(-50%);

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


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

.project-page .section-heading {
    max-width: 900px;

    margin:
        0
        auto
        60px;

    text-align: center;
}


.project-page .section-heading .eyebrow,
.project-copy .eyebrow,
.project-rewards .eyebrow,
.project-partner-example .eyebrow,
.project-horizon .eyebrow {
    color: var(--project-burgundy-light);
}


.project-page .section-heading h2,
.project-copy h2,
.project-game-copy h2 {
    margin:
        0
        0
        24px;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.6rem, 5vw, 4.8rem);
    font-weight: 500;
    line-height: 1.04;

    color: #fff;
}


.project-page .section-heading > p:last-child {
    max-width: 760px;

    margin-inline: auto;

    color: #bcbcbc;

    font-size: 1.03rem;
    line-height: 1.8;
}


/* ==========================================================================
   DEUX COLONNES
   ========================================================================== */

.project-two-columns {
    display: grid;

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

    gap: 80px;

    align-items: center;
}


.project-copy p:not(.eyebrow) {
    margin:
        0
        0
        20px;

    color: #b9b9b9;

    line-height: 1.85;
}


/* ==========================================================================
   VISION
   ========================================================================== */

.project-section--vision {
    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(113, 25, 28, .11),
            transparent 43%
        ),
        #080808;
}


.project-vision-grid {
    display: grid;

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

    gap: 18px;
}


.project-vision-card {
    position: relative;

    min-height: 285px;

    padding: 34px 28px;

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

    background:
        linear-gradient(
            145deg,
            rgba(25, 25, 25, .92),
            rgba(8, 8, 8, .96)
        );

    overflow: hidden;

    transition:
        transform var(--project-transition),
        border-color var(--project-transition),
        background var(--project-transition);
}


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

    border-color: rgba(198, 168, 123, .38);

    background:
        linear-gradient(
            145deg,
            rgba(38, 29, 26, .93),
            rgba(9, 9, 9, .98)
        );
}


.project-vision-card__number {
    position: absolute;

    top: 17px;
    right: 20px;

    color: rgba(255, 255, 255, .12);

    font-family: Georgia, "Times New Roman", serif;
    font-size: 2.5rem;
}


.project-vision-card h3 {
    margin:
        90px
        0
        16px;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.8rem;
    font-weight: 500;

    color: #fff;
}


.project-vision-card p {
    margin: 0;

    color: #aaa;

    line-height: 1.7;
}


/* ==========================================================================
   AUJOURD'HUI
   ========================================================================== */

.project-section--today {
    background:
        radial-gradient(
            circle at 75% 50%,
            rgba(198, 168, 123, .07),
            transparent 30%
        ),
        #090909;
}


.project-current-grid {
    display: grid;

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

    gap: 14px;
}


.project-current-item {
    display: flex;

    align-items: center;

    min-height: 92px;

    padding: 20px;

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

    background: rgba(20, 20, 20, .76);
}


.project-current-item strong {
    flex: 0 0 auto;

    margin-right: 18px;

    color: var(--project-gold);

    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.45rem;
    font-weight: 500;
}


.project-current-item span {
    color: #ddd;

    font-size: .92rem;
    font-weight: 700;
}


/* ==========================================================================
   ALBUMS / EXTENSIONS
   ========================================================================== */

.project-section--albums {
    background:
        radial-gradient(
            circle at 15% 30%,
            rgba(113, 25, 28, .13),
            transparent 30%
        ),
        #070707;
}


.project-albums {
    display: flex;

    flex-direction: column;

    gap: 26px;
}


.project-album {
    display: grid;

    grid-template-columns: 145px 1fr;

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

    background:
        linear-gradient(
            135deg,
            rgba(24, 24, 24, .94),
            rgba(8, 8, 8, .97)
        );

    overflow: hidden;

    transition:
        border-color var(--project-transition),
        transform var(--project-transition);
}


.project-album:hover {
    transform: translateY(-3px);

    border-color: rgba(198, 168, 123, .32);
}


.project-album__number {
    display: flex;

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

    min-height: 100%;

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

    background:
        radial-gradient(
            circle,
            rgba(113, 25, 28, .28),
            rgba(10, 10, 10, .98) 65%
        );

    color: rgba(255, 255, 255, .76);

    font-family: Georgia, "Times New Roman", serif;
    font-size: 4.5rem;
}


.project-album__content {
    padding:
        42px
        48px;
}


.project-album__meta {
    display: flex;

    align-items: center;
    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 14px;
}


.project-album__meta span {
    display: inline-flex;

    padding: 6px 10px;

    border: 1px solid rgba(198, 168, 123, .28);

    color: var(--project-gold);

    font-size: .67rem;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}


.project-album__content h3 {
    margin:
        0
        0
        18px;

    color: #fff;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 4vw, 3.4rem);
    font-weight: 500;
}


.project-album__content > p {
    max-width: 900px;

    color: #b5b5b5;

    line-height: 1.8;
}


.project-album__extension,
.project-album__characters {
    margin-top: 25px;

    padding:
        18px
        20px;

    border-left: 2px solid var(--project-burgundy);

    background: rgba(255, 255, 255, .025);
}


.project-album__extension strong,
.project-album__characters strong {
    display: block;

    margin-bottom: 7px;

    color: var(--project-gold);

    font-size: .7rem;
    letter-spacing: .13em;
    text-transform: uppercase;
}


.project-album__extension p,
.project-album__characters p {
    margin: 0;

    color: #aaa;

    line-height: 1.7;
}


.project-albums__future {
    max-width: 760px;

    margin:
        42px
        auto
        0;

    color: var(--project-gold);

    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.25rem;
    font-style: italic;
    line-height: 1.7;

    text-align: center;
}


/* ==========================================================================
   CHRONIQUES
   ========================================================================== */

.project-section--chronicles {
    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(198, 168, 123, .055),
            transparent 45%
        ),
        #090909;
}


.project-chronicles-grid {
    display: grid;

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

    gap: 18px;
}


.project-chronicle-card {
    min-height: 190px;

    padding: 30px;

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

    background:
        linear-gradient(
            145deg,
            rgba(22, 22, 22, .92),
            rgba(10, 10, 10, .96)
        );
}


.project-chronicle-card h3 {
    margin:
        0
        0
        15px;

    color: #fff;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.55rem;
    font-weight: 500;
}


.project-chronicle-card p {
    margin: 0;

    color: #aaa;

    line-height: 1.7;
}


.project-chronicles-note {
    max-width: 880px;

    margin:
        38px
        auto
        0;

    padding: 28px 32px;

    border:
        1px
        solid
        rgba(198, 168, 123, .22);

    background:
        linear-gradient(
            145deg,
            rgba(198, 168, 123, .07),
            rgba(10, 10, 10, .8)
        );

    text-align: center;
}


.project-chronicles-note strong {
    display: block;

    margin-bottom: 12px;

    color: var(--project-gold);

    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.4rem;
}


.project-chronicles-note p {
    margin: 0;

    color: #b7b7b7;

    line-height: 1.75;
}


/* ==========================================================================
   CARTE / CARNET / AGENDA / CHRONIQUES
   ========================================================================== */

.project-ecosystem-grid {
    display: grid;

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

    gap: 18px;
}


.project-tool-card {
    position: relative;

    min-height: 320px;

    display: flex;

    flex-direction: column;

    padding: 32px 27px;

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

    background:
        linear-gradient(
            145deg,
            rgba(24, 24, 24, .92),
            rgba(8, 8, 8, .96)
        );
}


.project-tool-card__index {
    color: var(--project-burgundy-light);

    font-family: Georgia, "Times New Roman", serif;
    font-size: 2.2rem;
}


.project-tool-card h3 {
    margin:
        28px
        0
        15px;

    color: #fff;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.65rem;
    font-weight: 500;
}


.project-tool-card p {
    color: #aaa;

    line-height: 1.7;
}


.project-tool-card__link {
    margin-top: auto !important;
    margin-bottom: 0 !important;

    padding-top: 20px;

    color: var(--project-gold) !important;

    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}


/* ==========================================================================
   GRANDE CHASSE
   ========================================================================== */

.project-section--hunt {
    background:
        radial-gradient(
            circle at center,
            rgba(113, 25, 28, .13),
            transparent 45%
        ),
        #070707;
}


.project-hunt-phases {
    display: grid;

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

    gap: 22px;
}


.project-hunt-phase {
    position: relative;

    min-height: 350px;

    padding: 34px;

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

    background:
        linear-gradient(
            150deg,
            rgba(28, 24, 24, .92),
            rgba(8, 8, 8, .97)
        );

    overflow: hidden;
}


.project-hunt-phase > span {
    display: inline-flex;

    padding: 7px 11px;

    border: 1px solid rgba(198, 168, 123, .3);

    color: var(--project-gold);

    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .13em;
}


.project-hunt-phase h3 {
    margin:
        70px
        0
        18px;

    color: #fff;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 2rem;
    font-weight: 500;
}


.project-hunt-phase p {
    margin: 0;

    color: #aaa;

    line-height: 1.75;
}


/* ==========================================================================
   JEU IRL
   ========================================================================== */

.project-section--game {
    background:
        radial-gradient(
            circle at 75% 45%,
            rgba(198, 168, 123, .08),
            transparent 32%
        ),
        #090909;
}


.project-game-layout {
    display: grid;

    grid-template-columns: 1.05fr .95fr;

    gap: 90px;

    align-items: center;
}


.project-game-copy p:not(.eyebrow) {
    color: #b5b5b5;

    line-height: 1.85;
}


.project-highlight {
    margin-top: 35px !important;

    padding:
        22px
        25px;

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

    background: rgba(113, 25, 28, .09);

    color: #e2e2e2 !important;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.2rem;
    font-style: italic;
}


.project-game-flow {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 11px;
}


.project-game-flow > i {
    color: rgba(198, 168, 123, .55);

    font-size: 1.2rem;
    font-style: normal;
}


.project-game-step {
    width: min(390px, 100%);

    display: flex;

    align-items: center;

    gap: 20px;

    padding:
        20px
        24px;

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

    background: rgba(18, 18, 18, .9);
}


.project-game-step span {
    color: var(--project-gold);

    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.25rem;
}


.project-game-step strong {
    color: #ddd;

    font-size: .9rem;
    letter-spacing: .05em;
    text-transform: uppercase;
}


.project-game-step--reward {
    border-color: rgba(154, 41, 44, .52);

    background:
        linear-gradient(
            145deg,
            rgba(113, 25, 28, .30),
            rgba(15, 15, 15, .95)
        );
}


/* ==========================================================================
   QUÊTES
   ========================================================================== */

.project-quest-types {
    display: grid;

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

    gap: 18px;
}


.project-quest-type {
    min-height: 220px;

    padding: 30px;

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

    background: rgba(18, 18, 18, .88);
}


.project-quest-type h3 {
    margin:
        0
        0
        18px;

    color: #fff;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.55rem;
    font-weight: 500;
}


.project-quest-type p {
    margin: 0;

    color: #aaa;

    line-height: 1.7;
}


.project-rewards {
    max-width: 900px;

    margin:
        45px
        auto
        0;

    padding:
        30px
        35px;

    border: 1px solid rgba(198, 168, 123, .22);

    background: rgba(198, 168, 123, .045);

    text-align: center;
}


.project-rewards p:last-child {
    margin-bottom: 0;

    color: #bbb;

    line-height: 1.8;
}


/* ==========================================================================
   FAMILLES
   ========================================================================== */

.project-section--family {
    background:
        radial-gradient(
            circle at 80% 50%,
            rgba(113, 25, 28, .10),
            transparent 34%
        ),
        #080808;
}


.project-family-example {
    padding: 45px;

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

    background:
        linear-gradient(
            145deg,
            rgba(25, 25, 25, .9),
            rgba(9, 9, 9, .96)
        );
}


.project-family-example strong {
    display: block;

    margin-bottom: 26px;

    color: #fff;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 2rem;
    font-weight: 500;
}


.project-family-example p {
    padding:
        15px
        0;

    margin: 0;

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

    color: #b5b5b5;

    line-height: 1.6;
}


.project-family-example span {
    display: block;

    margin-top: 28px;

    color: var(--project-gold);

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


/* ==========================================================================
   COMMUNAUTÉ
   ========================================================================== */

.project-community-grid {
    display: grid;

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

    gap: 22px;
}


.project-community-card {
    position: relative;

    min-height: 340px;

    padding: 34px;

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

    background:
        linear-gradient(
            145deg,
            rgba(23, 23, 23, .92),
            rgba(8, 8, 8, .97)
        );
}


.project-community-card__number {
    color: rgba(255, 255, 255, .15);

    font-family: Georgia, "Times New Roman", serif;
    font-size: 2.8rem;
}


.project-community-card h3 {
    margin:
        40px
        0
        17px;

    color: #fff;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 2rem;
    font-weight: 500;
}


.project-community-card p {
    color: #aaa;

    line-height: 1.75;
}


.project-community-card__note {
    margin-top: 25px;

    padding-top: 18px;

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

    color: var(--project-gold) !important;

    font-size: .85rem;
    font-style: italic;
}


/* ==========================================================================
   CROWDFUNDING
   ========================================================================== */

.project-section--crowdfunding {
    background:
        radial-gradient(
            circle at center top,
            rgba(113, 25, 28, .16),
            transparent 40%
        ),
        #070707;
}


.project-crowdfunding-purpose {
    display: grid;

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

    gap: 14px;

    margin-bottom: 45px;
}


.project-crowdfunding-purpose-card {
    min-height: 190px;

    padding: 25px;

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

    background: rgba(20, 20, 20, .88);
}


.project-crowdfunding-purpose-card h3 {
    margin:
        0
        0
        14px;

    color: var(--project-gold);

    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.35rem;
    font-weight: 500;
}


.project-crowdfunding-purpose-card p {
    margin: 0;

    color: #a9a9a9;

    line-height: 1.65;
}


.project-crowdfunding-highlight {
    max-width: 850px;

    margin:
        0
        auto
        50px;

    color: #eee;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-style: italic;
    line-height: 1.55;

    text-align: center;
}


.project-crowdfunding-rewards {
    display: grid;

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

    gap: 18px;
}


.project-reward-card {
    padding: 27px;

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

    background:
        linear-gradient(
            145deg,
            rgba(25, 25, 25, .93),
            rgba(9, 9, 9, .97)
        );

    transition:
        transform var(--project-transition),
        border-color var(--project-transition);
}


.project-reward-card:hover {
    transform: translateY(-4px);

    border-color: rgba(198, 168, 123, .35);
}


.project-reward-card__heading {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 18px;
}


.project-reward-card h3 {
    margin: 0;

    color: #fff;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.35rem;
    font-weight: 500;
}


.project-reward-card__heading > strong {
    flex: 0 0 auto;

    color: var(--project-gold);

    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.25rem;
}


.project-reward-card p {
    margin: 0;

    color: #aaa;

    line-height: 1.7;
}


.project-crowdfunding-note {
    max-width: 850px;

    margin:
        35px
        auto
        0;

    padding:
        20px
        24px;

    border-left: 3px solid var(--project-gold);

    background: rgba(198, 168, 123, .05);

    color: #b9b9b9;

    line-height: 1.75;
}


/* ==========================================================================
   ROADMAP / ACCORDÉONS
   ========================================================================== */

.project-section--roadmap {
    background:
        radial-gradient(
            circle at 20% 35%,
            rgba(113, 25, 28, .12),
            transparent 35%
        ),
        #090909;
}


.project-roadmap {
    max-width: 1000px;

    margin-inline: auto;
}


.project-roadmap-step {
    margin-bottom: 14px;

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

    background:
        linear-gradient(
            145deg,
            rgba(22, 22, 22, .94),
            rgba(8, 8, 8, .97)
        );

    overflow: hidden;
}


.project-roadmap-step summary {
    min-height: 100px;

    display: grid;

    grid-template-columns:
        60px
        minmax(0, 1fr)
        auto
        30px;

    gap: 22px;

    align-items: center;

    padding:
        22px
        28px;

    cursor: pointer;

    list-style: none;
}


.project-roadmap-step summary::-webkit-details-marker {
    display: none;
}


.project-roadmap-step__number {
    color: var(--project-burgundy-light);

    font-family: Georgia, "Times New Roman", serif;
    font-size: 2.2rem;
}


.project-roadmap-step__heading {
    display: flex;

    flex-direction: column;

    gap: 5px;
}


.project-roadmap-step__heading strong {
    color: #fff;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.55rem;
    font-weight: 500;
}


.project-roadmap-step__heading small {
    color: #999;

    font-size: .85rem;
}


.project-roadmap-step__status {
    padding:
        7px
        11px;

    border: 1px solid rgba(198, 168, 123, .28);

    color: var(--project-gold);

    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}


.project-roadmap-step__toggle {
    color: #ccc;

    font-size: 1.5rem;

    transition: transform .25s ease;
}


.project-roadmap-step[open] {
    border-color: rgba(198, 168, 123, .28);
}


.project-roadmap-step[open] .project-roadmap-step__toggle {
    transform: rotate(45deg);
}


.project-roadmap-step__content {
    padding:
        0
        30px
        32px
        110px;
}


.project-roadmap-step__content ul {
    margin: 0;
    padding: 0;

    list-style: none;
}


.project-roadmap-step__content li {
    position: relative;

    padding:
        10px
        0
        10px
        22px;

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

    color: #b3b3b3;

    line-height: 1.6;
}


.project-roadmap-step__content li::before {
    content: "—";

    position: absolute;

    left: 0;

    color: var(--project-burgundy-light);
}


.project-roadmap__note {
    max-width: 760px;

    margin:
        35px
        auto
        0;

    color: #aaa;

    font-style: italic;
    line-height: 1.7;

    text-align: center;
}


/* ==========================================================================
   COMPÉTENCES
   ========================================================================== */

.project-skills-grid {
    display: grid;

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

    gap: 18px;
}


.project-skill-card {
    min-height: 220px;

    padding: 27px;

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

    background: rgba(18, 18, 18, .9);
}


.project-skill-card h3 {
    margin:
        0
        0
        15px;

    color: #fff;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.4rem;
    font-weight: 500;
}


.project-skill-card p {
    margin: 0;

    color: #a9a9a9;

    line-height: 1.7;
}


.project-section-cta {
    max-width: 800px;

    margin:
        48px
        auto
        0;

    text-align: center;
}


.project-section-cta p {
    margin:
        0
        0
        27px;

    color: #bbb;

    line-height: 1.8;
}


/* ==========================================================================
   PARTENAIRES
   ========================================================================== */

.project-section--partners {
    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(198, 168, 123, .06),
            transparent 40%
        ),
        #080808;
}


.project-partners-grid {
    display: grid;

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

    gap: 14px;
}


.project-partner-card {
    min-height: 220px;

    padding: 27px;

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

    background: rgba(19, 19, 19, .9);
}


.project-partner-card h3 {
    margin:
        0
        0
        15px;

    color: #fff;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.35rem;
    font-weight: 500;
}


.project-partner-card p {
    margin: 0;

    color: #aaa;

    line-height: 1.7;
}


.project-partner-example {
    max-width: 950px;

    margin:
        45px
        auto
        0;

    padding: 35px;

    border: 1px solid rgba(198, 168, 123, .22);

    background:
        linear-gradient(
            145deg,
            rgba(198, 168, 123, .055),
            rgba(10, 10, 10, .8)
        );

    text-align: center;
}


.project-partner-example > p:not(.eyebrow) {
    color: #b7b7b7;

    line-height: 1.8;
}


.project-partner-example strong {
    display: block;

    margin-top: 24px;

    color: var(--project-gold);

    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.25rem;
    font-style: italic;
    font-weight: 500;
}


/* ==========================================================================
   HORIZONS / STATUTS
   ========================================================================== */

.project-section--horizons {
    background:
        radial-gradient(
            circle at center,
            rgba(113, 25, 28, .10),
            transparent 42%
        ),
        #070707;
}


.project-horizons {
    display: flex;

    flex-direction: column;

    gap: 22px;

    max-width: 1050px;

    margin-inline: auto;
}


.project-horizon {
    padding:
        34px
        38px;

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

    background:
        linear-gradient(
            145deg,
            rgba(23, 23, 23, .94),
            rgba(8, 8, 8, .97)
        );
}


.project-horizon__heading {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 25px;

    margin-bottom: 28px;

    padding-bottom: 24px;

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


.project-horizon__heading .eyebrow {
    margin-bottom: 8px;
}


.project-horizon__heading h3 {
    margin: 0;

    color: #fff;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.7rem, 3vw, 2.5rem);
    font-weight: 500;
}


.project-horizon__status {
    max-width: 280px;

    padding:
        8px
        12px;

    border: 1px solid rgba(198, 168, 123, .28);

    color: var(--project-gold);

    font-size: .67rem;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1.4;

    text-align: center;
    text-transform: uppercase;
}


.project-horizon__list {
    margin: 0;
    padding: 0;

    list-style: none;
}


.project-horizon__list li {
    display: grid;

    grid-template-columns: 145px 1fr;

    gap: 18px;

    padding:
        11px
        0;

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

    color: #b6b6b6;

    line-height: 1.55;
}


.project-horizon__item-status {
    color: var(--project-gold);

    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}


/* statut visuel différent selon horizon */

.project-horizon--in-progress {
    border-left: 3px solid #d1d1d1;
}


.project-horizon--soon {
    border-left: 3px solid var(--project-gold);
}


.project-horizon--study {
    border-left: 3px solid var(--project-burgundy-light);
}


.project-horizon--tavern {
    border-left: 3px solid #7c684b;

    background:
        linear-gradient(
            145deg,
            rgba(40, 31, 20, .48),
            rgba(8, 8, 8, .97)
        );
}


.project-horizons-summary {
    max-width: 800px;

    display: grid;

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

    gap: 10px;

    margin:
        50px
        auto
        0;
}


.project-horizons-summary p {
    margin: 0;

    padding:
        17px
        20px;

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

    background: rgba(20, 20, 20, .72);

    color: #aaa;
}


.project-horizons-summary strong {
    color: #fff;
}


.project-roadmap-disclaimer {
    max-width: 900px;

    margin:
        55px
        auto
        0;

    padding:
        40px;

    border:
        1px
        solid
        rgba(198, 168, 123, .24);

    background:
        linear-gradient(
            145deg,
            rgba(198, 168, 123, .065),
            rgba(10, 10, 10, .86)
        );

    text-align: center;
}


.project-roadmap-disclaimer h3 {
    margin:
        0
        0
        22px;

    color: #fff;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 2rem;
    font-weight: 500;
}


.project-roadmap-disclaimer p {
    color: #aaa;

    line-height: 1.8;
}


.project-roadmap-disclaimer strong {
    display: block;

    margin-top: 25px;

    color: var(--project-gold);

    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.2rem;
    font-style: italic;
    font-weight: 500;
    line-height: 1.6;
}


/* ==========================================================================
   3 FAÇONS DE REJOINDRE
   ========================================================================== */

.project-paths-grid {
    display: grid;

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

    gap: 22px;
}


.project-path-card {
    min-height: 380px;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    padding: 35px;

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

    background:
        linear-gradient(
            145deg,
            rgba(24, 24, 24, .93),
            rgba(8, 8, 8, .97)
        );
}


.project-path-card > span {
    color: var(--project-burgundy-light);

    font-family: Georgia, "Times New Roman", serif;
    font-size: 2.4rem;
}


.project-path-card h3 {
    margin:
        45px
        0
        18px;

    color: #fff;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 2rem;
    font-weight: 500;
}


.project-path-card p {
    margin:
        0
        0
        30px;

    color: #aaa;

    line-height: 1.75;
}


.project-path-card .button {
    margin-top: auto;
}


/* ==========================================================================
   FINAL
   ========================================================================== */

.project-final {
    position: relative;

    padding:
        125px
        0;

    background:
        radial-gradient(
            circle at center,
            rgba(113, 25, 28, .19),
            transparent 48%
        ),
        #050505;

    text-align: center;
}


.project-final__content {
    max-width: 900px;

    margin-inline: auto;
}


.project-final .eyebrow {
    color: var(--project-gold);
}


.project-final h2 {
    margin:
        0
        0
        28px;

    color: #fff;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.8rem, 5vw, 5rem);
    font-weight: 500;
    line-height: 1.05;
}


.project-final p {
    max-width: 720px;

    margin:
        0
        auto
        18px;

    color: #b8b8b8;

    line-height: 1.8;
}


.project-final__strong {
    margin-top: 32px !important;

    color: #eee !important;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.2rem;
    font-style: italic;
}


.project-final .button-row {
    margin-top: 40px;
}


/* ==========================================================================
   HOVER GÉNÉRAL SUR CARTES
   ========================================================================== */

.project-chronicle-card,
.project-tool-card,
.project-hunt-phase,
.project-quest-type,
.project-community-card,
.project-crowdfunding-purpose-card,
.project-skill-card,
.project-partner-card,
.project-path-card {
    transition:
        transform var(--project-transition),
        border-color var(--project-transition),
        background var(--project-transition);
}


.project-chronicle-card:hover,
.project-tool-card:hover,
.project-hunt-phase:hover,
.project-quest-type:hover,
.project-community-card:hover,
.project-crowdfunding-purpose-card:hover,
.project-skill-card:hover,
.project-partner-card:hover,
.project-path-card:hover {
    transform: translateY(-5px);

    border-color: rgba(198, 168, 123, .32);
}


/* ==========================================================================
   ANCRES — COMPENSATION MENU FIXE
   ========================================================================== */

#vision,
#aujourd-hui,
#albums-extensions,
#chroniques,
#terres-et-outils,
#grande-chasse,
#jeu-irl,
#quetes,
#familles,
#communaute,
#crowdfunding,
#feuille-de-route,
#construire-avec-nous,
#partenaires,
#horizons,
#rejoindre {
    scroll-margin-top: calc(var(--project-menu-offset) + 20px);
}


/* ==========================================================================
   RESPONSIVE — TABLETTE
   ========================================================================== */

@media (max-width: 1100px) {

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


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


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


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


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


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


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


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

}


/* ==========================================================================
   RESPONSIVE — TABLETTE / PETIT ÉCRAN
   ========================================================================== */

@media (max-width: 900px) {

    .project-two-columns,
    .project-game-layout {
        grid-template-columns: 1fr;

        gap: 55px;
    }


    .project-hunt-phases,
    .project-community-grid,
    .project-paths-grid {
        grid-template-columns: 1fr;
    }


    .project-hunt-phase,
    .project-community-card,
    .project-path-card {
        min-height: 0;
    }


    .project-album {
        grid-template-columns: 100px 1fr;
    }


    .project-album__number {
        font-size: 3.2rem;
    }


    .project-roadmap-step summary {
        grid-template-columns:
            45px
            minmax(0, 1fr)
            25px;
    }


    .project-roadmap-step__status {
        grid-column: 2;

        justify-self: start;
    }


    .project-roadmap-step__toggle {
        grid-column: 3;
        grid-row: 1 / span 2;
    }


    .project-roadmap-step__content {
        padding:
            0
            28px
            30px
            95px;
    }

}


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

@media (max-width: 700px) {

    .project-hero {
        min-height: 100vh;
        min-height: 100svh;

        box-sizing: border-box;

        padding:
            calc(var(--project-menu-offset) + 25px)
            0
            35px;
    }

    .project-hero__content {
        transform: none;
    }

    .project-hero h1 {
        font-size: clamp(2.6rem, 12vw, 4.2rem);
    }

    .project-hero__lead {
        font-size: 1.15rem;
    }

    .project-hero__intro {
        font-size: .97rem;
    }
}


    .project-hero {
        min-height: auto;

        padding:
            calc(var(--project-menu-offset) + 45px)
            0
            80px;
    }


    .project-hero h1 {
        font-size: clamp(2.6rem, 12vw, 4.2rem);
    }


    .project-hero__lead {
        font-size: 1.15rem;
    }


    .project-hero__intro {
        font-size: .97rem;
    }


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


    .project-page .section-heading {
        margin-bottom: 42px;
    }


    .project-page .section-heading h2,
    .project-copy h2,
    .project-game-copy h2 {
        font-size: clamp(2.3rem, 10vw, 3.4rem);
    }


    .project-vision-grid,
    .project-current-grid,
    .project-chronicles-grid,
    .project-ecosystem-grid,
    .project-quest-types,
    .project-crowdfunding-purpose,
    .project-crowdfunding-rewards,
    .project-skills-grid,
    .project-partners-grid,
    .project-horizons-summary {
        grid-template-columns: 1fr;
    }


    .project-vision-card,
    .project-tool-card,
    .project-quest-type,
    .project-crowdfunding-purpose-card,
    .project-skill-card,
    .project-partner-card {
        min-height: 0;
    }


    /* albums */

    .project-album {
        display: block;
    }


    .project-album__number {
        min-height: 110px;

        border-right: 0;
        border-bottom: 1px solid var(--project-border);
    }


    .project-album__content {
        padding:
            32px
            25px;
    }


    /* crowdfunding */

    .project-reward-card__heading {
        flex-direction: column;
    }


    /* roadmap */

    .project-roadmap-step summary {
        min-height: 0;

        grid-template-columns:
            38px
            minmax(0, 1fr)
            24px;

        gap: 13px;

        padding:
            20px
            18px;
    }


    .project-roadmap-step__number {
        font-size: 1.65rem;
    }


    .project-roadmap-step__heading strong {
        font-size: 1.2rem;
    }


    .project-roadmap-step__heading small {
        font-size: .78rem;
    }


    .project-roadmap-step__status {
        font-size: .58rem;
    }


    .project-roadmap-step__content {
        padding:
            0
            20px
            25px
            20px;
    }


    /* horizons */

    .project-horizon {
        padding:
            27px
            22px;
    }


    .project-horizon__heading {
        flex-direction: column;
    }


    .project-horizon__status {
        max-width: 100%;

        text-align: left;
    }


    .project-horizon__list li {
        grid-template-columns: 1fr;

        gap: 4px;

        padding:
            13px
            0;
    }


    .project-horizon__item-status {
        font-size: .65rem;
    }


    .project-roadmap-disclaimer {
        padding:
            30px
            23px;
    }


    /* CTA */

    .project-page .button-row {
        flex-direction: column;

        align-items: center;
    }


    .project-page .button-row .button {
        width: min(330px, 100%);
    }


    .project-final {
        padding:
            90px
            0;
    }

}


/* ==========================================================================
   TRÈS PETITS ÉCRANS
   ========================================================================== */

@media (max-width: 420px) {

    .project-current-item {
        min-height: 80px;

        padding: 16px;
    }


    .project-family-example {
        padding:
            32px
            22px;
    }


    .project-game-step {
        padding:
            17px
            18px;
    }


    .project-partner-example,
    .project-rewards,
    .project-chronicles-note {
        padding:
            27px
            21px;
    }

}