/* ==========================================================
   MAGNOLIA CONFIGURATOR
   VERSION 0.4
   ========================================================== */

.mgc {
    --mgc-ink: #4d504a;
    --mgc-soft: #84847c;
    --mgc-accent: #a1693b;
    --mgc-border: rgba(77, 80, 74, .18);
    --mgc-bg: #f7f5f1;
    --mgc-white: #ffffff;

    width: 100%;
    padding: 70px 30px 90px;

    background:
        linear-gradient(
            180deg,
            #fbfaf8 0%,
            #f6f3ee 100%
        );

    box-sizing: border-box;
}


.mgc * {
    box-sizing: border-box;
}


.mgc-shell {
    width: min(1380px, 100%);
    margin: 0 auto;
}


/* ==========================================================
   TYPO
   ========================================================== */

.mgc-kicker,
.mgc-step-label,
.mgc-selection-label {
    font-family: Muli, sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .30em;
    text-transform: uppercase;
    color: var(--mgc-accent);
}


.mgc-title {
    margin: 16px 0 18px !important;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(48px, 6vw, 84px);

    font-weight: 400;
    line-height: .98;
    letter-spacing: -.025em;

    color: var(--mgc-ink);
}


.mgc-subtitle {
    max-width: 680px;
    margin: 0 !important;

    font-family: Muli, sans-serif;

    font-size: 17px;
    font-weight: 300;
    line-height: 1.8;

    color: var(--mgc-soft);
}


.mgc-question {
    margin: 10px 0 30px !important;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(28px, 3vw, 42px);

    font-weight: 400;
    line-height: 1.15;

    color: var(--mgc-ink);
}


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

.mgc-screen {
    display: none;
}


.mgc-screen.is-active {
    display: block;

    animation:
        mgcScreenIn .45s ease both;
}


@keyframes mgcScreenIn {

    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* ==========================================================
   PROGRESSION
   ========================================================== */

.mgc-progress {
    margin-bottom: 55px;

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

    gap: 35px;

    padding-bottom: 18px;

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


.mgc-progress-summary {
    display: flex;
    align-items: center;

    gap: 8px;

    flex: 0 0 auto;

    font-family: Muli, sans-serif;

    font-size: 10px;
    font-weight: 500;
    letter-spacing: .15em;
    text-transform: uppercase;

    color: var(--mgc-soft);
}


.mgc-progress-separator {
    opacity: .4;
}


.mgc-progress-steps {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 22px;

    flex: 1;

    font-family: Muli, sans-serif;

    font-size: 9px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;

    color:
        rgba(77, 80, 74, .28);
}


.mgc-progress-steps span {
    position: relative;
    white-space: nowrap;

    transition:
        color .25s ease;
}


.mgc-progress-steps span.is-active {
    color:
        var(--mgc-ink);
}


.mgc-progress-steps span.is-complete {
    color:
        var(--mgc-accent);
}


.mgc-progress-steps span.is-active::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: -20px;

    height: 1px;

    background:
        var(--mgc-accent);
}


/* ==========================================================
   INTRO
   ========================================================== */

.mgc-intro {
    max-width: 820px;
    margin-bottom: 65px;
}


/* ==========================================================
   CARTES ÉVÉNEMENT
   ========================================================== */

.mgc-event-grid {
    display: grid;

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

    gap: 14px;
}


.mgc-event-card {
    position: relative;

    min-height: 210px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;

    padding: 25px;

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

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

    color:
        var(--mgc-ink);

    text-align: left;

    cursor: pointer;

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


.mgc-event-card:hover {
    transform:
        translateY(-4px);

    background: #fff;

    border-color:
        rgba(161,105,59,.45);

    box-shadow:
        0 18px 60px
        rgba(77,80,74,.08);
}


.mgc-event-card.is-selected {
    background:
        var(--mgc-ink);

    border-color:
        var(--mgc-ink);

    color: #fff;
}


.mgc-event-number,
.mgc-space-number {
    font-family: Muli, sans-serif;

    font-size: 10px;
    font-weight: 500;

    letter-spacing: .22em;

    opacity: .58;
}


.mgc-event-name {
    max-width: 220px;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 29px;
    font-weight: 400;
    line-height: 1.05;
}


/* ==========================================================
   INVITÉS
   ========================================================== */

.mgc-guests {
    margin-top: 70px;
    padding: 40px 0;

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

    gap: 40px;

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

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


.mgc-guests-copy .mgc-question {
    margin-bottom: 0 !important;
}


.mgc-counter {
    display: flex;
    align-items: center;

    gap: 22px;
}


.mgc-counter-button {
    width: 54px;
    height: 54px;

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

    padding: 0;

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

    background:
        transparent;

    color:
        var(--mgc-ink);

    font-family: Muli, sans-serif;

    font-size: 24px;
    line-height: 1;

    cursor: pointer;

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


.mgc-counter-button:hover {
    background:
        var(--mgc-ink);

    color: #fff;

    border-color:
        var(--mgc-ink);
}


.mgc-counter-value {
    min-width: 155px;

    display: flex;
    flex-direction: column;
    align-items: center;

    color:
        var(--mgc-ink);
}


.mgc-counter-value > span {
    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 58px;
    font-weight: 400;
    line-height: .9;
}


.mgc-counter-value small {
    margin-top: 9px;

    font-family: Muli, sans-serif;

    font-size: 10px;
    font-weight: 500;

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

    color:
        var(--mgc-soft);
}


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

.mgc-footer {
    margin-top: 35px;

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

    gap: 40px;
}


.mgc-selection-summary {
    display: flex;
    flex-direction: column;

    gap: 5px;
}


.mgc-selection-value {
    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 21px;

    color:
        var(--mgc-ink);
}


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

.mgc-primary-button {
    min-width: 310px;

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

    gap: 30px;

    padding: 18px 22px;

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

    background:
        var(--mgc-ink);

    color: #fff;

    font-family: Muli, sans-serif;

    font-size: 10px;
    font-weight: 500;

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

    cursor: pointer;

    transition:
        background .3s ease,
        color .3s ease,
        opacity .3s ease;
}


.mgc-primary-button:hover:not(:disabled) {
    background:
        transparent;

    color:
        var(--mgc-ink);
}


.mgc-primary-button:disabled {
    opacity: .30;
    cursor: default;
}


.mgc-button-arrow {
    font-size: 18px;
    line-height: 1;
}


.mgc-back-button {
    justify-self: start;

    padding: 14px 0;

    border: 0;

    background:
        transparent;

    font-family: Muli, sans-serif;

    font-size: 10px;
    font-weight: 500;

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

    color:
        var(--mgc-soft);

    cursor: pointer;
}


/* ==========================================================
   ÉTAPE ESPACE
   ========================================================== */

.mgc-step-head {
    max-width: 780px;
    margin-bottom: 50px;
}


.mgc-space-mode-grid {
    display: grid;

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

    gap: 14px;
}


.mgc-space-mode-card {
    min-height: 220px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;

    padding: 26px;

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

    background:
        rgba(255,255,255,.55);

    color:
        var(--mgc-ink);

    text-align: left;

    cursor: pointer;

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


.mgc-space-mode-card:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(161,105,59,.45);

    background: #fff;

    box-shadow:
        0 16px 50px
        rgba(77,80,74,.06);
}


.mgc-space-mode-card.is-selected {
    background:
        var(--mgc-ink);

    border-color:
        var(--mgc-ink);

    color: #fff;
}


.mgc-space-content {
    display: flex;
    flex-direction: column;

    gap: 10px;
}


.mgc-space-name {
    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 31px;
    line-height: 1.05;
}


.mgc-space-text {
    max-width: 480px;

    font-family: Muli, sans-serif;

    font-size: 13px;
    font-weight: 300;
    line-height: 1.65;

    opacity: .68;
}


/* ==========================================================
   PANNEAUX ESPACE
   ========================================================== */

.mgc-space-panel {
    display: none;

    margin-top: 45px;

    padding-top: 40px;

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


.mgc-space-panel.is-active {
    display: block;

    animation:
        mgcPanelIn .4s ease both;
}


@keyframes mgcPanelIn {

    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


.mgc-panel-head {
    display: grid;

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

    gap: 50px;

    align-items: end;

    margin-bottom: 30px;
}


.mgc-panel-head .mgc-question {
    margin-bottom: 0 !important;
}


.mgc-panel-head > p {
    margin: 0 !important;

    font-family: Muli, sans-serif;

    font-size: 13px;
    line-height: 1.7;

    color:
        var(--mgc-soft);
}


/* ==========================================================
   FORMULAIRE ESPACE PERSONNEL
   ========================================================== */

.mgc-own-space-form {
    display: grid;

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

    gap: 14px;
}


.mgc-field {
    min-height: 145px;

    padding: 20px;

    background:
        rgba(255,255,255,.55);

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


.mgc-field label {
    display: block;

    margin-bottom: 12px;

    font-family: Muli, sans-serif;

    font-size: 10px;
    font-weight: 500;

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

    color:
        var(--mgc-soft);
}


.mgc-field select,
.mgc-field input {
    width: 100%;
    height: 46px;

    padding: 0 12px;

    border:
        1px solid
        rgba(77,80,74,.20);

    border-radius: 0;

    background: #fff;

    color:
        var(--mgc-ink);

    font-family: Muli, sans-serif;

    font-size: 13px;

    outline: none;
}


.mgc-field select:focus,
.mgc-field input:focus {
    border-color:
        var(--mgc-accent);
}


.mgc-field-helper {
    display: block;

    margin-top: 8px;

    font-family: Muli, sans-serif;

    font-size: 11px;

    color:
        var(--mgc-soft);
}


.mgc-dimensions {
    display: grid;

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

    align-items: center;

    gap: 8px;
}


.mgc-dimensions > span {
    text-align: center;

    color:
        var(--mgc-soft);
}


.mgc-dimensions > div {
    position: relative;
}


.mgc-dimensions small {
    position: absolute;

    right: 10px;
    top: 50%;

    transform:
        translateY(-50%);

    font-size: 11px;

    color:
        var(--mgc-soft);
}


.mgc-dimensions input {
    padding-right: 30px;
}


.mgc-input-unit {
    position: relative;
}


.mgc-input-unit span {
    position: absolute;

    right: 12px;
    top: 50%;

    transform:
        translateY(-50%);

    font-size: 11px;

    color:
        var(--mgc-soft);
}


.mgc-input-unit input {
    padding-right: 32px;
}


/* ==========================================================
   STRUCTURES MAGNOLIA
   ========================================================== */

.mgc-structure-grid {
    display: grid;

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

    gap: 14px;
}


.mgc-structure-card {
    position: relative;

    display: flex;
    flex-direction: column;

    padding: 0;

    overflow: hidden;

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

    background: #fff;

    color:
        var(--mgc-ink);

    text-align: left;

    cursor: pointer;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease,
        opacity .3s ease;
}


.mgc-structure-card:hover:not(.is-incompatible) {
    transform:
        translateY(-4px);

    border-color:
        rgba(161,105,59,.55);

    box-shadow:
        0 18px 55px
        rgba(77,80,74,.10);
}


.mgc-structure-card.is-selected {
    border-color:
        var(--mgc-ink);

    box-shadow:
        0 0 0 2px
        var(--mgc-ink);
}


.mgc-structure-card.is-incompatible {
    opacity: .45;

    cursor:
        not-allowed;
}


.mgc-structure-image {
    position: relative;

    width: 100%;

    aspect-ratio:
        4 / 3;

    overflow: hidden;

    background:
        #efefeb;
}


.mgc-structure-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .5s ease;
}


.mgc-structure-card:hover:not(.is-incompatible)
.mgc-structure-image img {
    transform:
        scale(1.025);
}


.mgc-structure-recommended,
.mgc-structure-invalid {
    display: none;

    position: absolute;

    left: 14px;
    top: 14px;

    padding: 7px 9px;

    background:
        var(--mgc-ink);

    color: #fff;

    font-family: Muli, sans-serif;

    font-size: 8px;
    font-weight: 500;

    letter-spacing: .13em;

    text-transform: uppercase;
}


.mgc-structure-card.is-recommended
.mgc-structure-recommended {
    display: block;
}


.mgc-structure-card.is-incompatible
.mgc-structure-invalid {
    display: block;

    background:
        rgba(77,80,74,.82);
}


.mgc-structure-card.is-incompatible
.mgc-structure-recommended {
    display: none;
}


.mgc-structure-body {
    flex: 1;

    display: flex;
    flex-direction: column;

    padding: 20px;
}


.mgc-structure-type {
    margin-bottom: 7px;

    font-family: Muli, sans-serif;

    font-size: 9px;
    font-weight: 500;

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

    color:
        var(--mgc-accent);
}


.mgc-structure-body h3 {
    margin:
        0 0 18px !important;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 28px;
    font-weight: 400;
    line-height: 1.05;

    color:
        var(--mgc-ink);
}


.mgc-structure-data {
    display: flex;
    flex-wrap: wrap;

    gap: 18px;

    margin-bottom: 22px;
}


.mgc-structure-data span {
    display: flex;
    flex-direction: column;

    gap: 2px;
}


.mgc-structure-data small {
    font-family: Muli, sans-serif;

    font-size: 8px;
    font-weight: 500;

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

    color:
        var(--mgc-soft);
}


.mgc-structure-data strong {
    font-family: Muli, sans-serif;

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

    color:
        var(--mgc-ink);
}


.mgc-structure-footer {
    margin-top: auto;

    padding-top: 16px;

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

    gap: 20px;

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


.mgc-structure-price {
    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 20px;

    color:
        var(--mgc-ink);
}


.mgc-structure-footer > span {
    font-family: Muli, sans-serif;

    font-size: 8px;
    font-weight: 500;

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

    color:
        var(--mgc-soft);
}


/* ==========================================================
   ÉTAT VIDE
   ========================================================== */

.mgc-empty-state {
    padding: 30px;

    background:
        rgba(255,255,255,.55);

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


.mgc-empty-state strong {
    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 24px;

    color:
        var(--mgc-ink);
}


.mgc-empty-state p {
    margin:
        7px 0 0 !important;

    color:
        var(--mgc-soft);
}


/* ==========================================================
   CONSEIL MAGNOLIA
   ========================================================== */

.mgc-recommendation {
    margin-top: 30px;

    padding: 24px 28px;

    border-left:
        2px solid
        var(--mgc-accent);

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


.mgc-recommendation p {
    margin:
        8px 0 0 !important;

    max-width: 950px;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 22px;
    font-weight: 400;
    line-height: 1.4;

    color:
        var(--mgc-ink);
}


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

.mgc-navigation {
    margin-top: 38px;

    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: end;

    gap: 35px;

    padding-top: 30px;

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


.mgc-navigation
.mgc-primary-button {
    justify-self: end;
}


.mgc-navigation
.mgc-selection-summary {
    text-align: center;
    align-items: center;
}


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

@media only screen and (max-width: 1000px) {

    .mgc-event-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .mgc-progress {
        flex-direction:
            column;

        align-items:
            flex-start;
    }


    .mgc-progress-steps {
        width: 100%;

        justify-content:
            flex-start;

        overflow-x: auto;

        padding-bottom: 5px;
    }


    .mgc-own-space-form {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .mgc-structure-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .mgc-panel-head {
        grid-template-columns:
            1fr;
    }

}


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

@media only screen and (max-width: 700px) {

    .mgc {
        padding:
            45px 18px 65px;
    }


    .mgc-progress {
        margin-bottom: 40px;
    }


    .mgc-progress-summary {
        font-size: 9px;
    }


    .mgc-title {
        font-size: 48px;
    }


    .mgc-subtitle {
        font-size: 15px;
    }


    .mgc-intro {
        margin-bottom: 45px;
    }


    .mgc-event-grid,
    .mgc-space-mode-grid,
    .mgc-own-space-form,
    .mgc-structure-grid {
        grid-template-columns:
            1fr;

        gap: 9px;
    }


    .mgc-event-card {
        min-height: 125px;

        padding: 18px;
    }


    .mgc-event-name {
        font-size: 25px;
    }


    .mgc-guests {
        margin-top: 45px;

        padding: 32px 0;

        flex-direction:
            column;

        align-items:
            flex-start;
    }


    .mgc-counter {
        width: 100%;

        justify-content:
            space-between;
    }


    .mgc-counter-value {
        min-width: 125px;
    }


    .mgc-counter-value > span {
        font-size: 50px;
    }


    .mgc-footer {
        flex-direction:
            column;

        align-items:
            stretch;

        gap: 25px;
    }


    .mgc-primary-button {
        width: 100%;

        min-width: 0;
    }


    .mgc-space-mode-card {
        min-height: 155px;

        padding: 20px;
    }


    .mgc-space-name {
        font-size: 27px;
    }


    .mgc-panel-head {
        gap: 18px;
    }


    .mgc-structure-card {
        display: grid;

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


    .mgc-structure-image {
        height: 100%;

        aspect-ratio: auto;
    }


    .mgc-structure-body {
        padding: 16px;
    }


    .mgc-structure-body h3 {
        font-size: 24px;
    }


    .mgc-structure-data {
        gap: 10px;
    }


    .mgc-navigation {
        display: flex;

        flex-direction:
            column-reverse;

        align-items:
            stretch;

        gap: 20px;
    }


    .mgc-navigation
    .mgc-selection-summary {
        align-items:
            flex-start;

        text-align:
            left;
    }


    .mgc-back-button {
        align-self:
            center;
    }

}