.default-section.breadcrumb-container {
        padding: 8px var(--margin-section);
}
.full-width-section{
        margin-bottom: 8px;
}
.content-section.default-section{
        padding: 8px var(--margin-section) 64px;
}
.breadcrumbs {
        margin-bottom: 40px;
        grid-column: 2 / span 6;
}
.default-section.breadcrumb-container .breadcrumb {
        margin: 0;
}
.banner-content .banner-content-inner {
        grid-column: 2 / span 6;
}
.banner-show-statut {
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 0;
        background:rgb(64 47 69 / 60%);
        width: 100%;
        height: 100%;
        font-size: 80px;
        line-height: 1;
        font-weight: 800;
        color: var(--second-color);
}
.left-column {
        position: relative;
        grid-column: 2 / span 5;
        display: flex;
        flex-direction: column;
        gap: 32px;
}
.left-column::before{
        content: '';
        position: absolute;
        top: -16px;
        left: 0;
        height: 6px;
        width: 104px;
        background: #000;
        z-index: -1;
}
.left-column .standfirst{
        font-size: 28px;
        line-height: 1.2;
        font-weight: bold;
}

.right-column {
        position: relative;
        grid-column: 9 / span 4;
}
.right-column-inner {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 24px;
        background: var(--primary-light-color);
        margin-top: -252px;
        padding: 32px;
}
.right-column .typologies {
        display: flex;
        flex-direction: column;
        gap: 12px;
}

.right-column .typologies .typology {
        display: flex;
        align-items: center;
        gap: 12px;
}
.right-column .typologies .typology .text {
        line-height: 1.2;
        background: var(--primary-color);
        padding: 3px 8px 2px;
}
.right-column .typologies .typology .icon {
        width: 40px;
}
.right-column .typologies .typology .icon svg{
        width: 100%;
        height: 100%;
}
.right-column .btn.primary.book {
        display: inline-flex;
        align-items: center;
        padding: 8px 32px 8px 28px;
        gap: 12px;
}
.right-column .book .icon svg {
        width: 40px;
}
.right-column .book .text {
        font-size: 24px;
        font-weight: 700;
}
.right-column .dates {
        display: flex;
        flex-direction: column;
        gap: 4px;
}
.right-column .dates .date-hour {
        position: relative;
        font-size: 18px;
        font-weight: 800;
        padding-left: 20px;
}
.right-column .dates .date-hour::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translate(0, -50%);
        width: 12px;
        height: 12px;
        background: #000;
        border-radius: 50px;
}
.right-column .dates .date-hour .month {
        text-transform: uppercase;
}
.right-column .dates .date-hour .day {
        text-transform: capitalize;
}
.right-column .download-plan,
.right-column .add-to-calendar-btn {
        width: 100%;
        font-size: 14px;
        text-align: center;
        border: 1px solid #000;
        line-height: 1.2;
        padding: 8px 8px 6px;
        cursor: pointer;
        transition: background 0.2s ease;
}
.right-column .download-plan:hover,
.right-column .add-to-calendar-btn:hover{
        color: #000;
        background: var(--primary-color);
}

.right-column .contexts {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding-top: 24px;
        border-top: 4px solid #000;
}
.right-column .contexts .context {
        display: flex;
        gap: 8px;
        text-transform: uppercase;
}
.right-column .contexts .context.partenaire{
        text-transform: initial;
        margin-bottom: 8px;
}
.right-column .contexts .context svg {
        width: 24px;
}

.right-column .scol-dates {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding-top: 24px;
        border-top: 1px solid #000;
}
.right-column .scol-dates-inner {
        display: flex;
        flex-direction: column;
        gap: 4px;
}
.right-column .scol-title {
        font-family: 'Agrandir';
        font-weight: 800;
        font-size: 18px;
        color: #000;
}
.right-column .scol-title .niv {
        font-size: 14px;
        font-weight: 500;
}
.right-column .scol-dates-inner .date-hour .month {
        text-transform: uppercase;
}
.right-column .scol-dates-inner .date-hour .day {
        text-transform: capitalize;
}
.right-column .context.place .text {
        display: flex;
        flex-direction: column;
        gap: 4px;
}
.right-column .context.place .text .address {
        font-size: 12px;
}

.right-column .wrapper-content.prices {
        display: flex;
        flex-direction: column;
        gap: 4px;
}
.right-column .wrapper-content.prices .btn {
        margin-top: 12px;
        text-decoration: none;
}
.price-free {
        font-size: 24px;
        font-weight: 800;
        line-height: 1.2;
}

.single-spectacle .gallery .gallery-slider,
.single-spectacle .gallery-single {
        grid-column: 2/12;
}

.content-section .infos {
        display: flex;
        align-items: center;
        grid-column : 2 / span 7;
        row-gap: 16px;
        column-gap: 16px;
}
.content-section .infos .credits {
        display: flex;
        flex-wrap: wrap;
        column-gap: 24px;
        font-family: 'Agrandir Text';
        padding: 0 16px;
        background: #000;
        font-size: 28px;
        line-height: 1.2;
        font-weight: bold;
}
.content-section .infos .credits .director,
.content-section .infos .credits .company{
        position: relative;
        font-family: 'Agrandir Text';
        color: #fff;
}
.content-section .infos .credits .company::after{
        content: '';
        position: absolute;
        width: 1px;
        height: 24px;
        background: #fff;
        left: -12px;
        bottom: 5px;
}
.content-section .infos .credits.no-director .company::after{
        display: none;
}
.content-section .infos .dates {
        padding: 0 16px;
        font-size: 26px;
        line-height: 1.2;
        color: #000;
        text-transform: uppercase;
        border: 1px solid #000;
}

.right-column .graphic-element {
        position: absolute;
        right: -136px;
        bottom: -104px;
}
.gallery .graphic-element:first-of-type {
        position: absolute;
        bottom: 80px;
        right: -184px;
        transform: rotate(100deg);
}
.gallery .graphic-element:nth-of-type(2) {
        position: absolute;
        left: -136px;
        top: 64px;
}

.recommendation .default-section{
        padding-bottom: 104px;
}

.recommendation .graphic-element:first-of-type {
        position: absolute;
        left: 0;
        bottom: 104px;
}
.recommendation .graphic-element:nth-of-type(2) {
        position: absolute;
        bottom: 0;
        right: 0;
}
.single-spectacle #footer {
        margin-top: 32px;
}


.add-to-calendar-container {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.8);
        backdrop-filter: blur(5px);
        z-index: 999;
}
.add-to-calendar{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: column;
        align-items: center;
}
.add-to-calendar-container input {
        width: 800px;
        font-size: 24px;
        line-height: 1;
        padding: 12px 64px 12px 24px !important;
        border: 1px solid #000;
}
.add-to-calendar-container input:focus-visible {
        outline: none;
}
.add-to-calendar-container .close-add-to-calendar-btn > svg {
        position: absolute;
        bottom: 56px;
        width: 56px;
        left: 50%;
        transform: translate(-50%, 0);
        cursor: pointer;
}
.add-to-calendar-inner {
        position: relative;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 24px;
}
.add-to-calendar-inner svg {
        position: absolute;
        top: 17px;
        right: 20px;
        width: 24px;
        opacity: 0.6;
        cursor: pointer;
}
.add-to-calendar-inner svg * {
        fill: #000;
}
.add-to-calendar-results-container{
        display: none;
}
.choose-dates-title {
        font-size: 32px;
        color: #fff;
        font-weight: 800;
        margin-bottom: 24px;
}
.add-calendar-item {
        font-size: 24px;
        text-transform: uppercase;
        padding: 8px 28px;
}
.add-calendar-item:hover *{
        color: var(--primary-color);
}

@media (max-width: 1400px) {
}

@media (max-width: 1200px) {
        .breadcrumbs,
        .banner-content .banner-content-inner,
        .left-column {
                grid-column: 1 / span 6;
        }
        .right-column {
                grid-column: 8 / span 5;
        }
        .right-column-inner {
                margin-top: 0;
        }

        .content-section .infos{
                grid-column: 1 / span 12;
        }

        .single-spectacle .gallery .gallery-slider{
                grid-column: 1/13;
        }

        .single-spectacle #footer {
                margin-top: 104px;
        }
}

@media (max-width: 992px) {
        .breadcrumbs{
                grid-column: 1 / span 12;
        }
        .right-column {
                grid-column: 7 / span 6;
        }

        .single-spectacle #footer{
                margin-top: 16px;
        }

        .recommendation .default-section{
                padding-bottom: 64px;
        }
}

@media (max-width: 768px) {
        .breadcrumbs,
        .banner-content .banner-content-inner,
        .right-column,
        .left-column {
                grid-column: 1 / span 12;
        }

        .default-section.breadcrumb-container .breadcrumb{
                padding-left: 0;
        }

        .right-column-inner{
                padding: 24px 16px;
        }

        .recommendation .default-section{
                padding-bottom: 24px;
        }
}

@media (max-width: 576px) {

}