/* Fonts - start */

/* mynerve-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Mynerve';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/mynerve-v6-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
  
/* pathway-extreme-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Pathway Extreme';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/pathway-extreme-v3-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
  
/* pathway-extreme-italic - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Pathway Extreme';
    font-style: italic;
    font-weight: 400;
    src: url('../fonts/pathway-extreme-v3-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* pathway-extreme-500 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Pathway Extreme';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/pathway-extreme-v3-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* pathway-extreme-600 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Pathway Extreme';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/pathway-extreme-v3-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* pathway-extreme-700 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Pathway Extreme';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/pathway-extreme-v3-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* Fonts - end */

/* Variables - start */ 

:root {
    --clr-primary-1: hsl(15, 92%, 41%);
    --clr-primary-2: hsl(180, 90%, 34%);
    --clr-neutral-light: hsl(30, 100%, 98%);
    --clr-neutral-dark: hsl(0, 0%, 0%);
    --clr-neutral-medium: hsl(0, 0%, 60%);

    --transparency-001: hsla(0, 0%, 0%, .5);
    --transparency-002: hsla(0, 0%, 0%, .6);
    --transparency-003: hsla(0, 0%, 0%, .75);

    --ff-main: 'Pathway Extreme', sans-serif;
    --ff-accent: 'Mynerve', cursive;

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semi-bold: 600;
    --fw-bold: 700;

    --fs-title-accroche: 6.4rem;
    --fs-h1: clamp(4rem, 2.933rem + 2.963vw, 7.2rem);
    --fs-h2-home: clamp(4rem, 2.933rem + 2.963vw, 7.2rem);
    --fs-h2-main: clamp(3.2rem, 2.933rem + 0.741vw, 4rem);
    --fs-h3-accent: clamp(2.4rem, 2.133rem + 0.741vw, 3.2rem);

    --fs-subtitles: 2.4rem;
    --fs-accent-text: clamp(1.6rem, 1.333rem + 0.741vw, 2.4rem);

    --fs-nav-main: 1.6rem;
    --fs-nav-footer: 2.4rem;
    --fs-links: 1.6rem;

    --fs-breadcrumbs: clamp(1.4rem, 1.333rem + 0.185vw, 1.6rem);
    --fs-dates: 3.2rem;

    --fs-smallest-text: 1.2rem;

    --lh-title-accroche: 6.4rem;
    --lh-h1: clamp(4rem, 2.933rem + 2.963vw, 7.2rem);
    --lh-h2-home: clamp(4.8rem, 4.48rem + 0.889vw, 5.76rem);
    --lh-h2-main: 4rem;
    --lh-h3-accent: 3.2rem;

    --lh-subtitles-cards: 3.2rem;
    --lh-subtitles: 2.4rem;
    
    --lh-nav-main: 2.4rem;
    --lh-nav-footer: 3.2rem;
    --lh-links: 2.4rem;

    --space-characters-nav-main: 0.128rem;

    --lh-body-breadcrumbs: 2.4rem;
    --lh-dates: 4rem;

    --space-characters-btn: 0.064rem;

    --lh-smallest-text: 1.8rem;

    --vertical-spacing-sections: clamp(10.4rem, 8.533rem + 5.185vw, 16rem);
    --horizontal-spacing-sections: clamp(2.4rem, -1.067rem + 9.63vw, 12.8rem);
}

/* Variables - end */ 

/* Navigation principale - start */

header {
    position: relative;
}

.primary-nav {
    width: 100%;
    height: 12.8rem;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    background-color: var(--clr-neutral-dark);
    padding-inline: var(--horizontal-spacing-sections);
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
}

.primary-nav > a {
    position: absolute;
    left: 2.4rem;
    top: 2.1rem;
    width: 9.2rem;
    height: 8.5rem;
}

.logo-primary {
    position: absolute;
    left: 0;
    top: 0;
    width: 9.2rem;
    height: 8.5rem;
}

.primary-nav-list {
    display: flex;
    gap: 4.8rem;
}

.primary-nav-item {
    font-size: var(--fs-nav-main);
    line-height: var(--lh-nav-main);
    text-transform: uppercase;
}

.primary-nav-link.no-link-style {
    display: inline-block;
    position: relative;
    color: var(--clr-neutral-light);
    letter-spacing: var(--space-characters-nav-main);
    padding-block-end: 0.4em;
}

.primary-nav-link::after {
    content: "";
    position: absolute;
    display: block;
    height: 2px;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--clr-neutral-light);
    transform: scaleX(0);
    transition: all .3s ease-in-out;
}

.primary-nav-link:hover:after, .primary-nav-link:focus:after, .primary-nav-link:active:after {
    transform: scaleX(1);
}

.mobile-nav-toggle {
    display: none;
}

.social-network-list {
    transform: translateY(-1000rem);
    transition: all .5s ease-in-out;
    display: none;
}

/* Hover effects on social networks buttons - start */

.social-network-item {
    position: relative;
    display: grid;
    justify-items: center;
    align-items: center;
    width: 5.2rem;
    height: 4.8rem;
    border-radius: 59% 41% 59% 41% / 48% 53% 47% 52%;
    overflow: hidden;
    z-index: 3;
}

.social-network-item:focus-within {
    outline: .2rem solid var(--clr-primary-1);
    outline-offset: .2rem;
}

.social-network-item:hover a .social-network-link path, .social-network-item:focus-within a .social-network-link path {
    fill: var(--clr-neutral-light);
}

.social-network-item > a {
    z-index: 3;
    width: 5.2rem;
    height: 4.8rem;
    display: grid;
}

.social-network-link {
    align-self: center;
    justify-self: center;
}

.social-network-item::before {
    content: "";
    background: var(--clr-primary-1);
    position: absolute;
    height: 100%;
    width: 100%;
    transform: translateY(-100%);
    transition: transform .5s ease-in-out;
    z-index: 2;
}

.social-network-item:hover::before, .social-network-item:focus-within::before {
    transform: translateY(0);
}

.social-network-item::after {
    content: "";
    background: var(--clr-neutral-light);
    border-radius: 59% 41% 59% 41% / 48% 53% 47% 52%;
    position: absolute;
    top: 0;
    left: 0;
    width: 5.2rem;
    height: 4.8rem;
    z-index: 1;
}

.social-network-link > path {
    transition: fill .4s ease-in-out;
}

.social-network-link:hover > path, .social-network-link:focus > path, .social-network-link:active > path {
    fill: var(--clr-neutral-light);
}

/* Hover effects on social networks buttons - end */

/* Shows the current page - start */

.primary-nav-link[aria-current="page"]::after {
    content: "";
    position: absolute;
    display: block;
    left: 0;
    right: 0;
    bottom: 0;
    transform: scaleX(1);
    background: var(--clr-neutral-light);
}

/* Shows the current page - end */

/* Scroll to top button - start */

#scrollBtn {
    display: block;
    background: none;
    border: none;
    background-image: url(../images/svg/Scroll_to_top.svg);
    background-size: cover;
    width: 4.5rem;
    height: 4.5rem;
    bottom: 4rem;
    right: 4rem;
    z-index: 10000;
    position: fixed;
    transform: translateY(9rem);
    transition: all .5s ease-in-out;
}

#scrollBtn[data-visible="true"] {
    transform: translateY(0rem);
    cursor: pointer;
}

/* Scroll to top button - end */

@media only screen and (max-width: 68.688em) /* 1099px */ {
    .primary-nav {
        height: 8rem;
        flex-direction: column;
        transition: height .5s ease-in-out;
    }
    .primary-nav[data-visible="true"] {
        height: 100vh;
        justify-content: center;
    }
    body:has(.primary-nav[data-visible="true"]) {
        overflow-y: hidden;
    }
    .primary-nav-list {
        visibility: hidden;
        transform: translateY(-100%);
        flex-direction: column;
        gap: 2.4rem;
        transition: all .5s ease-in-out;
    }
    .primary-nav-list[data-visible="true"] {
        visibility: visible;
        transform: translateY(0%);
    }
    .primary-nav-item {
        font-size: var(--fs-nav-main);
        line-height: var(--lh-nav-main);
    }
    .mobile-nav-toggle {
        display: block;
        position: absolute;
        width: 4rem;
        aspect-ratio: 1;
        top: 2.4rem;
        right: 2.4rem;
        background: none;
        border: none;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 3rem;
        cursor: pointer;
        z-index: 999;
    }
    .menu-icon {
        display: block;
        position: absolute;
        width: 3.5rem;
        height: .4rem;
        background-color: var(--clr-neutral-light);
        transition: transform .4s;
        border-radius: 10rem;
        z-index: 998;
    }
    .menu-icon::before {
        position: absolute;
        content: '';
        width: inherit;
        height: inherit;
        background-color: inherit;
        top: -1.2rem;
        left: 0;
        border-radius: 10rem;
    }
    .menu-icon::after {
        position:absolute;
        content:'';
        width:inherit;
        height:inherit;
        background-color: inherit;
        bottom: -1.2rem;
        left: 0;
        border-radius: 10rem;
    }
    .mobile-nav-toggle[aria-expanded="true"] > .menu-icon {
        transform: rotate(45deg);
    }
    .mobile-nav-toggle[aria-expanded="true"] > .menu-icon::before {
        top: unset;
    }
    .mobile-nav-toggle[aria-expanded="true"] > .menu-icon::after {
        bottom: unset;
        transform: rotate(-90deg);
    }
    .logo-primary {
        width: 5rem;
        height: 4.7rem;
        top: -.5rem;
    }
    .social-network-list[data-visible="true"] {
        transform: translateY(0);
        display: flex;
        gap: 3.2rem;
        padding-top: 4rem;
        position: absolute;
        bottom: 10%;
    }
}

/* Navigation principale - end */

/* Navigation fil d'Ariane - start */

.fil-dariane {
    position: absolute;
    top: clamp(10.4rem, 8.8rem + 4.444vw, 15.2rem);
    left: var(--horizontal-spacing-sections);
    font-size: var(--fs-breadcrumbs);
    line-height: var(--lh-body-breadcrumbs);
    z-index: 5;
}

.main-page .fil-dariane {
    position: static;
    padding-inline: var(--horizontal-spacing-sections);
    padding-block: 2.4rem;
}

.fil-dariane > ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    color: var(--clr-neutral-medium);
    margin: 0;
    padding: 0;
    column-gap: 3.2rem;
}

.fil-dariane-link {
    position: relative;
    transition: all 0.3s ease-in-out;
}

.fil-dariane-link:hover, .fil-dariane-link:focus, .fil-dariane-link:active {
    color: var(--clr-primary-1);
}

.fil-dariane-link::after {
    position: absolute;
    right: -2.2rem;
    content: ">";
    color: var(--clr-neutral-medium);
}

.fil-dariane > ul > li > span[aria-current="page"] {
    color: var(--clr-neutral-dark);
}

.fil-dariane > ul > li > a[aria-current="page"] {
    color: var(--clr-neutral-dark);
}

/* Navigation fil d'Ariane - end */

/* Navigation footer - start */

footer {
    display: grid;
    grid-template-columns: 176px 1fr 1fr 1fr;
    grid-template-rows: repeat(3, 1fr);
    gap: 3.2rem;
    background-color: var(--clr-neutral-dark);
    padding-block: 12.8rem 6.4rem;
    padding-inline: var(--horizontal-spacing-sections);
    position: relative;
    z-index: 0;
}

.logo-secondary {
    grid-row: 1 / 3;
    align-self: center;
}

.address-social > address {
    color: var(--clr-neutral-light);
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    align-self: start;
}

.accented {
    font-size: var(--fs-subtitles);
    line-height: var(--lh-subtitles);
}

.secondary-social-network-list {
    display: flex;
    flex-wrap: wrap;
    gap: 2.4rem;
}

.address-social {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 3.2rem;
    grid-column: 2 / 3;
    grid-row: 1 / 3;
}

footer > h2 {
    font-size: var(--fs-subtitles);
    line-height: var(--lh-subtitles);
    color: var(--clr-neutral-light);
    font-family: (var(--ff-main));
    grid-column: 4 / 5;
    grid-row: 1 / 2;
    align-self: start;
    justify-self: end;
    text-transform: uppercase;
}

.sponsors-list {
    display: flex;
    flex-wrap: wrap;
    gap: 2.4rem;
    grid-column: 3 / 5;
    grid-row: 2 / 3;
    align-self: center;
    justify-self: end;
}

.legal-info-list {
    display: flex;
    flex-wrap: wrap;
    color: var(--clr-neutral-light);
    grid-column: span 5;
    grid-row: 3 / 4;
    align-self: center;
    justify-self: center;
}

.legal-info-item:not(:last-child) {
    position: relative;
    padding-inline-end: 3.9rem;
}

.legal-info-item:not(:last-child)::after {
    position: absolute;
    right: 1.6rem;
    content: "|";
}

.legal-info-link {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease-in-out;
}

.legal-info-link:hover, .legal-info-link:focus, .legal-info-link:active {
    color: var(--clr-primary-1);
}

@media only screen and (max-width: 68.688em) /* 1099px */ {
    footer {
        display: flex;
        flex-direction: column;
        gap: 5.6rem;
    }
    .logo-secondary {
        width: 10rem;
        height: 9.3rem;
    }
    .sponsors-list {
        display: flex;
        justify-content: center;
    }
    .legal-info-list {
        display: flex;
        justify-content: center;
    }
}

@media only screen and (min-width: 115.625em) /* 1850px */ {
    .address-social {
        max-width: 35rem;
    }
}

/* Navigation footer - end */

/* Styles généraux - start*/

body {
    font-family: var(--ff-main);
    font-weight: var(--fw-regular);
    background-color: var(--clr-neutral-light);
    color: var(--clr-neutral-dark);
}

body p {
    line-height: var(--lh-body-breadcrumbs);
}

main {
    position: relative;
}

h1 {
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
    font-family: var(--ff-accent);
    text-transform: uppercase;
    word-break: break-word;
}

h2 {
    font-size: var(--fs-h2-main);
    line-height: var(--lh-h2-main);
    font-family: var(--ff-accent);
    text-transform: uppercase;
    word-break: break-word;
}

h3 {
    font-size: var(--fs-h3-accent);
    line-height: var(--lh-h3-accent);
    font-family: var(--ff-accent);
    word-break: break-word;
}

h4 {
    font-size: var(--fs-subtitles);
    line-height: var(--lh-subtitles);
    font-family: var(--ff-accent);
    word-break: break-word;
}

.hero {
    position: relative;
    max-height: 100vh;
    overflow: hidden;
}

.hero::before {
    content: "";
    background-image: url(../images/svg/separateur_sections.svg);
    background-size: cover;
    width: 100%;
    height: 3.1rem;
    position: absolute;
    bottom: -1.3rem;
    left: 0;
    z-index: 2;
}

.hero-title {
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    color: var(--clr-neutral-light);
    bottom: clamp(10.4rem, 9.6rem + 2.222vw, 12.8rem);
    left: var(--horizontal-spacing-sections);
    right: var(--horizontal-spacing-sections);
    text-shadow: 4px 3px 8px rgba(0,0,0,0.26);
    z-index: 2;
}

.hero-img > img {
    width: 100%;
}

.content {
    padding-inline: var(--horizontal-spacing-sections);
    padding-block: var(--vertical-spacing-sections);
    position: relative;
    display: flex;
    flex-direction: column;
}

@media only screen and (min-width: 120em) {
    .max-width-container {
        width: 118.4rem;
        margin-inline: auto;
    }    
}

.content::after {
    content: "";
    background-image: url(../images/svg/separateur_sections.svg);
    background-size: cover;
    width: 100%;
    height: 3.1rem;
    position: absolute;
    bottom: -1.5rem;
    transform: rotate(180deg);
    left: 0;
    z-index: 1;
}

.content::before {
    content: "";
    background-image: url(../images/svg/separateur_sections.svg);
    background-size: cover;
    width: 100%;
    height: 3.1rem;
    position: absolute;
    top: -1.5rem;
    transform: rotate(180deg);
    left: 0;
}

.primary-1 {
    color: var(--clr-primary-1);
}

.primary-2 {
    color: var(--clr-primary-2);
}

.dark-bg {
    background-color: var(--clr-neutral-dark);
}

.no-link-style {
    text-decoration: none;
    color: inherit;
}

.accented-bold {
    font-weight: var(--fw-bold);
}

.hidden-card {
    position: absolute;
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0,0,0,0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.disabled {
    cursor: not-allowed;
    pointer-events: none;
    color: var(--clr-neutral-medium);
}

/* Styles généraux - end */

/* Styles spécifiques - start */

/* LA COMPAGNIE - start */

.main-about > .content:nth-of-type(2)::before {
    background: none;
}

.sub-hero-img {
    position: relative;
}

.sub-hero-img::after {
    content:"";
    background-image: url(../images/svg/circle_top_right_la_compagnie.svg);
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    height: 29rem;
    width: 54.85rem;
    top: -8.7rem;
    left: calc(100% - 54.85rem);
    z-index: 3;
    transform: rotate(360deg);
}

.description-compagnie {
    padding-block-start: 2.4rem;
}

.subtitle {
    font-size: var(--fs-h3-accent);
    line-height: var(--lh-h3-accent);
    font-family: var(--ff-accent);
    line-height: var(--lh-h3-accent);
    padding-block-end: 1.6rem;
}

.accented-text-1 {
    color: var(--clr-primary-1);
}

.valeurs {
    display: grid;
    grid-template-columns: 21.5rem 1fr;
    gap: 7rem;
    margin-block-start: 12.8rem;
}

.valeurs > h2 {
    font-size: var(--fs-h3-accent);
    line-height: var(--lh-h3-accent);
}

.valeurs-list {
    display: flex;
    gap: 10.4rem;
    grid-column: 2 / 3;
    justify-self: center;
}

.valeurs-item {
    width: 12rem;
    text-align: center;
    align-self: center;
    position: relative;
    z-index: -1;
}

.valeurs-item::before {
    content:"";
    position: absolute;
    top: -50%;
    left: -1.25rem;
    background-image: url(../images/svg/Encadre_petit.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 14.5rem;
    height: 10.7rem;
    z-index: -1;
}

.valeurs-item:nth-of-type(2)::before {
    transform: rotate(180deg);
}

.main-about > .content:nth-of-type(3) {
    color: var(--clr-neutral-light);
    background-color: var(--clr-neutral-dark);
}

.content-title-about {
    padding-block-end: 7.2rem;
}

.members-list, .collab-list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2.4rem;
}

.collab-list {
    gap: 8rem;
    justify-content: center;
}

.member-item {
    max-width: 25rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.4rem;
    position: relative;
}

.member-item > img {
    margin-block-end: 2.4rem;
}

.member-item > h3 {
    color: var(--clr-primary-2);
    font-size: var(--fs-subtitles);
    line-height: var(--lh-subtitles);
}

.member-link::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.member-item {
    transition: all 0.3s ease-in-out;
}

.member-item:has(.member-link:hover), .member-item:has(.member-link:focus) {
    transform: scale(1.03)
}

.content-title-about.primary-1 {
    text-align: end;
}

.collab-item {
    display: grid;
    gap: 2.4rem;
    grid-template-columns: 25rem;
    grid-template-rows: 23rem;
    justify-items: center;
    text-align: center;
}

.collab-item > img {
    align-self: end;
}

.collab-item > h3 {
    color: var(--clr-primary-1);
    font-size: var(--fs-subtitles);
    line-height: var(--lh-subtitles);
}

.collab-item > p {
    align-self: start;
}

@media only screen and (max-width: 62em) /* 992px */{
    .main-about > .content:nth-of-type(2) {
        grid-template-columns: 1fr;
    }

    .sub-hero-img::after {
        content:"";
        background: none;
    }

    .description-compagnie {
        grid-column: 1;
    }
    
    .subtitle {
        grid-column: 1;
    }

    .valeurs {
        display: grid;
        grid-template-columns: 1fr;
        justify-items: center;
        column-gap: 0;
    }
    
    .valeurs-list {
        flex-direction: column;
        gap: 10.4rem;
        grid-column: 1;
        justify-self: center;
    }
}

@media only screen and (max-width: 37.5em) /* 600px */ {
    .members-list {
        justify-content: center;
    }
    
    .member-item {
        margin-block-start: 10.4rem;
    }

    .content-title-about:not(.primary-1) {
        padding-block-end: 0;
    }

    .content-title-about.primary-1 {
        font-size: 2.8rem;
        text-align: start;
    }
}

/* LA COMPAGNIE - end */

/* BIOGRAPHIE - start */

.main-biography {
    display: grid;
    grid-template-columns: 25vw 16vw 6rem 1fr 1fr;
    grid-template-rows: 4rem min-content min-content min-content 50rem;
    padding-block-start: clamp(17rem, 13.333rem + 10.185vw, 28rem);
    padding-block-end: var(--vertical-spacing-sections);
    padding-inline-end: var(--horizontal-spacing-sections);
    row-gap: 6.4rem;
}

.content:has(.profile-img-container) {
    padding-inline-start: 0;
}

.profile-img-container {
    grid-column: 1 / 3;
    grid-row: 1 / 6;
}

.profile-img {
    position: relative;
    z-index: -1;
    clip-path: url(#clippathbio);
}

.main-biography > h1 {
    grid-column: 2 / 6;
    grid-row: 2 / 3;
    text-transform: capitalize;
    z-index: 2;
}

.profession {
    grid-column: 3 / 6;
    grid-row: 3 / 4
}

.biographie {
    grid-column: 4 / 6;
    grid-row: 4 / 6;
}

@media only screen and (max-width: 68.688em) { /* 1099px */
    .main-biography {
        grid-template-columns: 1fr;
        grid-template-rows: 25vw 16vw ;
        row-gap: 0;
    }

    .main-biography > h1, .profession, .biographie {
        padding-inline-start: var(--horizontal-spacing-sections);
    }

    .profile-img-container {
        grid-column: 1 / 2;
        grid-row: 1 / 4;
        width: 80vw;
    }

    .main-biography > h1 {
        grid-column: 1 / 2;
        grid-row: 4 / 5;
        padding-block: 4.8rem 6.4rem;
    }

    .profession {
        grid-column: 1 / 2;
        grid-row: 5 / 6;
        padding-block-end: 3.2rem;
    }

    .biographie {
        grid-column: 1 / 2;
        grid-row: 6 / 7;
    }
}

/* BIOGRAPHIE - end */

/* SPECTACLES - start */

.main-spectacles > .hero > picture {
    position: relative;
}

.main-spectacles > .hero > picture::before {
    content: "";
    position: absolute;
    background: rgb(0,0,0);
    background: linear-gradient(30deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 30%, rgba(0,0,0,0) 100%);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.anchors {
    display: flex;
    justify-content: center;
}

.anchors-list {
    display: flex;
    flex-wrap: wrap;
    gap: 9.6rem;
    justify-content: center;
}

.anchors-link {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
    max-width: 15.4rem;
    align-items: center;
    transition: all 0.3s ease-in-out;
}

.anchors-link:hover, .anchors-link:focus, .anchors-link:active {
    transform: scale(1.03);
}

.anchor-title-spectacles {
    font-size: var(--fs-subtitles);
    line-height: var(--lh-subtitles);
    text-transform: none;
    text-align: center;
}

.repertoire {
    background-color: var(--clr-neutral-dark);
}

.repertoire > h2, .duos-nomades > h2, .spectacles-passes > h2 {
    padding-block-end: 9.6rem;
    text-transform: none;
}

.spectacle-list {
    display: flex;
    flex-wrap: wrap;
    column-gap: 20rem;
    row-gap: 8.8rem;
    justify-content: center;
}


.spectacle-item {
    position: relative;
    transition: all 0.3s ease-in-out;
}

.spectacle-link {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 25rem;
}

.spectacle-affiche {
    padding-block-end: 4rem;
}

.title-subtitle h4 {
    padding-block-end: 1.6rem;
    font-size: var(--fs-subtitles);
    line-height: var(--lh-subtitles);
    text-align: center;
}

.title-subtitle > p {
    text-align: center;
}

.spectacle-link::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

.spectacle-item:has(.spectacle-link:hover), .spectacle-item:has(.spectacle-link:focus), .spectacle-item:has(.spectacle-link:active) {
    transform: scale(1.03);
}

.primary-2 + p {
    color: var(--clr-neutral-light);
}

.primary-1 + p {
    color: var(--clr-neutral-dark);
}

.grid-description-duos-nomades {
    display: grid;
    grid-template-columns: 45% 55%;
    gap: 12.8rem;
}

.btns-flex {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
}

.btn {
    display: inline;
    border-radius: 5rem;
    padding-block: 1.6rem;
    padding-inline: 3.2rem;
    text-transform: uppercase;
    letter-spacing: var(--space-characters-btn);
    position: relative;
    overflow: hidden;
    transition: all .5s ease-in-out;
    background-color: transparent;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    width: fit-content;
}

.btns-flex > .btn {
    margin-inline-end: 2.4rem;
}

.btn-1 {
    border: 0.12rem solid var(--clr-neutral-dark);
    color: var(--clr-neutral-dark);
}

.btn-2 {
    border: 0.12rem solid var(--clr-neutral-light);
    color: var(--clr-neutral-light);
}

.btn::after {
    content: "";
    display: inline;
    position: absolute;
    left: 0;
    width: 100%;
    height: 0;
    transition: all .5s ease-in-out;
    top: 0;
    z-index: 2;
}

.btn-1::after {
    background-color: var(--clr-primary-1);
}

.btn-2::after {
    background-color: var(--clr-primary-2);
}

.btn-1:hover, .btn-1:focus, .btn-1:active {
    color: var(--clr-neutral-light);
}

.btn:hover::after, .btn:focus::after, .btn:active::after {
    bottom: 0;
    height: 100%;
}

.btn-1:hover, .btn-1:focus, .btn-1:active {
    border: 0.12rem solid var(--clr-primary-1);
}

.btn-2:hover, .btn-2:focus, .btn-2:active {
    border: 0.12rem solid var(--clr-primary-2);    
}

.spectacles-passes .btn-2 {
    justify-self: center;
    margin-block-start: 10.4rem;
    margin-inline: 2.4rem;
}

.btn-txt {
    z-index: 9;
    position: relative;
}

.duos-nomades > h3 {
    font-size: var(--fs-h3-accent);
    line-height: var(--lh-h3-accent);
    padding-block-start: var(--vertical-spacing-sections);
    padding-block-end: 10.4rem;
}

.duos-nomades > h3:nth-of-type(2) {
    text-align: right;
}

.spectacles-passes {
    background-color: var(--clr-neutral-dark);
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(31.2rem, 1fr);
    justify-content: center;
}

.content:has(.spectacles-passes)::after {
    display: none;
}

.spectacles-passes > .spectacle-list {
    max-width: 115rem;
    justify-self: center;
}

.no-display {
    display: none;
}

.spectacle-item[data-visible="false"] {
    display: none;
}

.spectacle-item[data-visible="true"] {
    display: block;
}

@media only screen and (max-width: 62em) /* 992px */ {
    .grid-description-duos-nomades {
        grid-template-columns: 1fr;
        gap: 12.8rem;
    }
}


/* SPECTACLES - end */

/* FICHE SPECTACLE - start */

.spectacle-description {
    color: var(--clr-neutral-light);
    background-color: var(--clr-neutral-dark);
    display: grid;
    grid-template-columns: 47% 40%;
    padding-block-start: var(--vertical-spacing-sections);
    column-gap: 11.2rem;
    row-gap: 8rem;
    position: relative;
    z-index: 3;
}

.fiche-spectacle > .fil-dariane > ul > li > span[aria-current="page"] {
    color: var(--clr-neutral-light);
}

.spectacle-description h1 {
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
    text-transform: none;
    grid-row: 2;
}

.spectacle-description h2 {
    font-family: var(--ff-main);
    font-size: var(--fs-subtitles);
    line-height: var(--lh-subtitles);
    font-weight: var(--fw-bold);
    text-transform: none;
    grid-row: 2;
    position: relative;
    align-self: end;
    padding-inline-start: 2.4rem;
}

.spectacle-description h2::after {
    content: "";
    background-image: url(../images/svg/Ligne_verticale_bleue.svg);
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: .8rem;
}

.description-paragraphe {
    grid-column: 2;
    grid-row: 3;
}

.spectacle-img-container {
    position: absolute;
    bottom: 0;
    left: 0;
}

.spectacle-img {
    position: relative;
    z-index: -1;
    clip-path: url(#clippathspectacle);
}

.spectacle-info::before, .spectacle-description::after {
    z-index: -1;
    display: none;
}

.spectacle-info {
    display: grid;
    grid-template-columns: 50% 50%;
    row-gap: 4.8rem;
    position: relative;
}

.spectacle-info h3 {
    font-family: var(--ff-main);
    font-size: var(--fs-subtitles);
    line-height: var(--lh-subtitles);
    font-weight: var(--fw-bold);
    text-transform: none;
    padding-block-end: 4.8rem;
}

.info-title-list {
    font-weight: bold;
}

.other-info-spectacle {
    color: var(--clr-neutral-light);
    grid-column: 2 / 3;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(../images/bureau/Texture_peinture_circle.webp);
    background-size: cover;
    width: 60.7rem;
    height: 63.6rem;
    position: absolute;
    top: -16rem;
    right: -12.8rem;
}

.events-list, .sponsors-spectacle-list, .btn-flex {
    display: grid;
    gap: 1.6rem;
}

.distribution-calendrier {
    display: grid;
    gap: 4.8rem;
}

.sponsors-spectacle {
    grid-row: 2;
    grid-column: span 2;
}

.fiche-spectacle > .fil-dariane > ul > li > a[aria-current="page"] {
    color: var(--clr-neutral-light);
}

.info-desc-list {
    position: relative;
    z-index: 5;
    padding-block-end: 2.4rem;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 1.6rem;
}

@media only screen and (min-width: 120em) /* 1920px */ {
    .distribution-calendrier {
        grid-template-columns: 1fr 1fr;
    }
}

@media only screen and (max-width: 75em) /* 1200px */ {
    .spectacle-description {
        grid-template-columns: 1fr;
        overflow-x: hidden;
    }
    .spectacle-description h1 {
        padding-block-end: 4rem;
    }
    .spectacle-description h2 {
        grid-row: 3;
    }
    .description-paragraphe {
        grid-row: 4;
        grid-column: 1;
        margin-block-end: 40rem;
    }
    .spectacle-description h2::after {
        height: 100%;
    }
    .spectacle-info {
        grid-template-rows: max-content max-content;
        justify-items: center;
        overflow-x: hidden;
    }
    .distribution-calendrier {
        grid-column: 1 / 3;
        grid-row: 1 / 2;
        justify-self: start;
    }
    .sponsors-spectacle {
        grid-row: 2 / 3;
        justify-self: start;
    }
    .other-info-spectacle {
        grid-column: 1 / 3;
        grid-row: 4 / 5;
        display: flex;
        align-items: center;
        justify-content: center;
        background-image: url(../images/mobile/Texture_peinture_circle_s.webp);
        background-size: cover;
        width: 60.6rem;
        height: 55.8rem;
        top: 0;
        right: 0;
        position: static;
    }
}

@media only screen and (max-width: 62em) /* 992px */ {
    .distribution-calendrier {
        grid-template-columns: 1fr;
    }
}

@media only screen and (max-width: 22.5em) /* 360px */ {
    .other-info-spectacle {
        padding-inline: 14.5rem;
    }
    .other-info-spectacle-container {
        padding-inline: 2.4rem;
    }
}

/* FICHE SPECTACLE - end */

/* ERREUR 404/403 - start */

.error404, .error403 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

.pseudo-h1 {
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
    font-family: var(--ff-accent);
    padding-block-start: 10.4rem;
    text-align: center;
}

.error404 h1, .error404 a, .error403 h1, .error403 a {
    font-size: var(--fs-h3-accent);
    line-height: var(--lh-h3-accent);
    text-transform: none;
    font-family: var(--ff-accent);
    text-align: center;
}

.error404 h1 {
    padding-block: 5.6rem 3.2rem;
}

.error404 p {
    text-align: center;
}

.error403 .pseudo-h1 {
    padding-block-end: 5.6rem;
}

.error404 a, .error403 a {
    display: block;
    margin-top: 10.4rem;
}

.interdits-container {
    display: grid;
    gap: 2.4rem;
}

.interdits-container p {
    text-align: center;
}

.interdits-container p:last-of-type {
    font-family: var(--ff-accent);
    font-size: var(--fs-h3-accent);
    line-height: var(--lh-h3-accent);
}

/* ERREUR 404/403 - end */

/* ACTIONS CULTURELLES - start */

.main-actions-cult .hero::after {
    content: "";
    display: block;
    background-color: var(--transparency-002);
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.main-actions-cult h2 {
    text-transform: none;
}

.actions-description {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6.4rem;
}

.actions-paragraphe-1 > h2 {
    font-size: var(--fs-h3-accent);
    line-height: var(--lh-h3-accent);
}

.actions-description > .actions-paragraphe-1 {
    grid-column: 1 / 3;
}

.actions-description > p:last-child {
    grid-column: 2 / 4;
    grid-row: 2;
}

.modalites-actions-container {
    background-color: var(--clr-neutral-dark);
    color: var(--clr-neutral-light);
    display: grid;
    grid-template-columns: 55% 45%;
    justify-items: start;
}

.modalites-actions-container h2, .actions-annee h2 {
    padding-block-end: 4.8rem;
}

.modalites-actions-container > ul, .actions-annee > ul {
    grid-column: 1 / 2;
    padding: 1.6rem;
    margin: 0;
}

.modalites-actions-container > ul > li, .actions-annee > ul > li {
    margin-block-end: 4rem;
}

.modalites-actions-container > ul > li::marker {
    color: var(--clr-primary-2);
}

.modalites-actions {
    background-image: url(../images/mobile/Texture_peinture_circle_s.webp);
    background-size: contain;
    background-repeat: no-repeat;
    width: 47.1rem;
    height: 43.9rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-inline: 9.6rem;
    gap: 1.6rem;
    grid-row: 1 / 3;
    grid-column: 2 / 3;
    align-self: center;
}

.modalites-actions > p {
    padding-block-start: 2.4rem;
}

.actions-annee > ul > li::marker {
    color: var(--clr-primary-1);
}

.actions-annee p.accented-bold {
    padding-block-start: 2.4rem;
}

.actions-partenaires {
    display: grid;
    background-color: var(--clr-neutral-dark);
    color: var(--clr-neutral-light);
    grid-template-columns: 1fr 1fr;
}

.actions-partenaires h2 {
    grid-column: 1 / 3;
    padding-block-end: 10.4rem;
}

.public-scolaire {
    display: grid;
    gap: 10.4rem;
    grid-template-columns: 1fr max-content;
    grid-column: 1 / 3;
}

.public-prioritaire {
    display: grid;
    gap: 10.4rem;
    grid-template-columns: max-content 1fr;
    grid-column: 1 / 3;
}

.prioritaire-list {
    grid-column: 2 / 3;
}

.public-scolaire picture {
    justify-self: end;
}

.public-prioritaire picture {
    justify-self: start;
    align-self: start;
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

.public-associations {
    grid-column: 1 / 3;
}

.scolaire-list li, .prioritaire-list li {
    margin-block-end: 2.4rem;
}

.main-actions-cult h3 {
    padding-block-end: 7.5rem;
    padding-inline-start: 15.1rem;
}

.actions-partenaires h3:nth-of-type(2), .actions-partenaires h3:last-of-type {
    padding-block-start: 18rem;
}

.public-scolaire-title, .public-prioritaire-title, .public-associations-title {
    position: relative;
    grid-column: 1 / 3;
}

.public-scolaire-title::before {
    content: "";
    background-image: url(../images/svg/public_scolaire.svg);
    background-size: cover;
    width: 11.1rem;
    height: 10.2rem;
    position: absolute;
    top: -25%;
    left: 0;
}

.public-prioritaire-title::before {
    content: "";
    background-image: url(../images/svg/public_prioritaire.svg);
    background-size: cover;
    width: 11.1rem;
    height: 10.2rem;
    position: absolute;
    top: 15.1rem;
    left: 0;
}

.public-associations-title::before {
    content: "";
    background-image: url(../images/svg/public_associations.svg);
    background-size: cover;
    width: 11.1rem;
    height: 10.2rem;
    position: absolute;
    top: 15.1rem;
    left: 0;
}

.savoir-plus {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
    justify-content: center;
    text-align: center;
}

@media only screen and (max-width: 62em) /* 992px */ {
    .actions-partenaires {
        display: flex;
        flex-direction: column;
    }
    .public-scolaire, .public-prioritaire {
        display: flex;
        flex-direction: column;
    }
    .actions-partenaires picture {
        margin-inline: auto;
    }
    .dark-bg:has(.modalites-actions-container) {
        overflow-x: hidden;
    }
}

@media only screen and (max-width: 75em) /* 1200px */ {
    .actions-description {
        grid-template-columns: 1fr;
    }
    .actions-description > .actions-paragraphe-1 {
        grid-column: 1 / 2;
    }
    .actions-description > p:last-child {
        grid-column: 1 / 2;
    }
    .modalites-actions {
        grid-row: 3 / 4;
        grid-column: 1 / 3;
        justify-self: center;
    }
    .modalites-actions-container > h2, .modalites-actions-container > ul {
        grid-column: 1 / 3;
    }
}

/* ACTIONS CULTURELLES - end */

/* AGENDA - start */

.main-agenda .hero::after {
    content: "";
    display: block;
    background-color: var(--transparency-002);
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.filtres {
    display: flex;
    justify-content: center;
    gap: 6.4rem;
}

.btn-filtre-container {
    display: flex;
    flex-wrap: wrap;
    column-gap: clamp(0.8rem, -1.867rem + 7.407vw, 8.8rem);
    justify-content: space-between;
}

.btn-filtre {
    background: none;
    border: none;
    padding: 0;
    font-family: var(--ff-accent);
    font-size: var(--fs-subtitles);
    line-height: var(--lh-subtitles);
    position: relative;
    width: 15rem;
    display: flex;
    align-items: start;
    padding-block-start: 12.6rem;
    transition: all 0.3s ease-in-out;
}

.btn-filtre:hover, .btn-filtre:focus, .btn-filtre:active {
    transform: scale(1.03);
}

.btn-filtre:focus::before, .btn-filtre:active::before {
    outline: .2rem solid var(--clr-primary-1);
    outline-offset: .6rem;
    border-radius: 59% 41% 59% 41% / 48% 53% 47% 52%;
}

.btn-filtre::before {
    content: "";
    background-size: contain;
    background-repeat: no-repeat;
    width: 11.2rem;
    height: 10.2rem;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

#toutDates::before {
    background-image: url(../images/svg/tout_filtre.svg);
}

#spectaclesDates::before {
    background-image: url(../images/svg/spectacles_filtre.svg);
}

#actionsDates::before {
    background-image: url(../images/svg/actions_cult_filtre.svg);
}

#duosDates::before {
    background-image: url(../images/svg/duos_nomades_filtre.svg);
}

.filtres > p:first-child {
    margin-block: auto;
    text-transform: uppercase;
    font-weight: var(--fw-semi-bold);
}

.cards {
    display: flex;
    flex-wrap: wrap;
    column-gap: 17.1rem;
    row-gap: 8rem;
    margin-block-start: 8rem;
    justify-content: center;
}

.card-date {
    width: 27.8rem;
    height: 46.9rem;
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
}

.card-date[data-visible="true"] {
    position: relative;
}

.card-date[data-visible="true"]::after {
    content: "";
    background-image: url(../images/svg/encadre_agenda.svg);
    background-size: contain;
    position: absolute;
    width: 27.8rem;
    height: 19.8rem;
    top: 2.2rem;
    right: -2.4rem;
    z-index: -1;
}

.card-date img {
    margin-block-end: 2.2rem;
}

.card-date h2 {
    font-size: var(--fs-subtitles);
    line-height: var(--lh-subtitles-cards);
    font-weight: var(--fw-semi-bold);
    font-family: var(--ff-main);
    text-transform: none;
}

.infos-dates {
    display: flex;
    justify-content: space-between;
    align-items: end;
}

.infos-lieu {
    display: flex;
    flex-wrap: wrap;
    column-gap: .6rem;
}

.infos-dates p:nth-child(1) {
    font-size: var(--fs-dates);
    line-height: var(--lh-dates);
}

.pagination {
    display: flex;
    justify-content: space-between;
    margin-block-start: 16rem;
}

.pagination a, .card-date a {
    transition: all 0.3s ease-in-out;
}

.pagination-btn:hover, .card-date h2 a:hover, .pagination-btn:focus, .card-date h2 a:focus, .pagination-btn:active, .card-date h2 a:active {
    color: var(--clr-primary-1);
}

#current-page {
    font-weight: var(--fw-semi-bold);
}

#previous, #next {
    font-weight: var(--fw-semi-bold);
}

.previous, .next {
    display: flex;
    gap: 1.6rem;
}

@media only screen and (max-width: 76.875em) /* 1230px */ {
    .filtres {
        flex-direction: column;
    }
    .btn-filtre-container {
        row-gap: 5.6rem;
    }
    .filtres > p:first-child {
        text-align: center;
    }
}

@media only screen and (max-width: 22.5em) /* 360px */ {
    .btn-filtre-container {
        justify-content: center;
    }
    .pagination {
        font-size: var(--fs-smallest-text);
        line-height: var(--lh-smallest-text);
    }
}

/* AGENDA - end */

/* ESPACE PRESSE - start */

.article-flex {
    display: flex;
    justify-content: space-between;
    column-gap: 5.6rem;
    padding-block-end: 9.6rem;
}

.article-btn {
    display: flex;
    align-items: baseline;
    gap: 2.4rem;
}

.article-info {
    width: 56rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: .8rem;
}

.articles-presse h1 {
    padding-block: var(--vertical-spacing-sections);
}

.article-info h2 {
    font-family: var(--ff-main);
    font-size: var(--fs-subtitles);
    line-height: var(--lh-subtitles);
    font-weight: var(--fw-semi-bold);
    grid-column: 1 / 3;
}

.article-info p {
    font-style: italic ;
}

.article-info p:last-child {
    justify-self: end;
}

@media only screen and (max-width: 68.688em) { /* 1099px */
    .article-flex {
        flex-direction: column;
        row-gap: 3.2rem;
    }
    .article-info {
        display: flex;
        flex-direction: column;
        width: fit-content;
    }
    .article-btn {
        flex-direction: column;
    }
}

/* ESPACE PRESSE - end */

/* CONTACT - start */

.main-contact .hero::after {
    content: "";
    display: block;
    background-color: var(--transparency-002);
    height: 100%;
    width: 100vw;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.contact-info .social-network-list {
    transform: none;
    transition: none;
    position: static;
    display: flex;
    gap: 2.4rem;
}

.contact-info .social-network-item::after {
    background: var(--clr-neutral-dark);
}

.contact-info .social-network-link > path {
    transition: fill .4s ease-in-out;
}

.contact-info .social-network-item a .social-network-link path {
    fill: var(--clr-neutral-light);
}

.contact-flex-main {
    display: flex;
    gap: 2.4rem;
}

.contact-flex {
    display: flex;
    gap: 2.4rem;
    justify-content: space-between;
    align-items: flex-start;
}

.contact-flex-main h2 {
    font-size: var(--fs-h2-main);
    line-height: var(--lh-h2-main);
    text-transform: none;
    padding-block-end: 3.2rem;
}

.contact-info {
    flex-basis: 50%;
}

.contact-form-container {
    flex-basis: 50%;
}

.contact-info-list {
    display: flex;
    flex-direction: column;
    gap: 3.6rem;
    padding-block-end: 3.6rem;
}

.contact-info-list li p:last-child, .contact-info-list li a:last-child, .contact-info-list li address:last-child{
    font-size: var(--fs-subtitles);
    line-height: var(--lh-subtitles);
}

.contact-info > p {
    padding-block-end: 1.6rem;
}

.contact-form-container p {
    padding-block-end: 5.6rem;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 4.8rem;
}

fieldset {
    border: none;
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
}

.contact-form fieldset input[type="text"], .newsletter-form .newsletter-flex input[type="text"], .newsletter-form input[type="text"] {
    border-radius: 5rem;
}

.contact-form fieldset textarea {
    border-radius: 4rem;
}

.contact-form fieldset input[type="text"], .contact-form fieldset textarea {
    background: transparent;
    border: .1rem solid var(--clr-neutral-dark);
    padding-block: 1.6rem;
    padding-inline: 3.2rem;
}

.newsletter-form .newsletter-flex input[type="text"], .newsletter-form input[type="text"] {
    background: transparent;
    border: .1rem solid var(--clr-neutral-light);
    padding-block: 1.6rem;
    padding-inline: 3.2rem;
    color: var(--clr-neutral-light);
}

.contact-form > fieldset > label, .newsletter-form .newsletter-flex fieldset label, .newsletter-form fieldset label {
    text-transform: uppercase;
    padding-inline: 3.2rem;
    letter-spacing: var(--space-characters-nav-main);
}

.newsletter-flex fieldset label[for="consent-newsletter"] {
    text-transform: none;
    letter-spacing: 0;
    padding: 0;
}

label[data-active="false"] {
    transform: translateY(165%);
    transition: all 0.3s ease-in-out;
}

label[data-active="true"] {
    transform: translateY(-.8rem);
    transition: all 0.4s ease-in-out;
}

.checkbox {
    appearance: none;
    width: 2rem;
    height: 2rem;
    margin: .4rem;
    border: .1rem solid var(--clr-neutral-dark);
    background-color: var(--clr-neutral-light);
    aspect-ratio : 1 / 1;
    border-radius: .4rem;
    cursor: pointer;
}

.checkbox:checked {
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
}

.checkbox-primary-1:not(:disabled):checked {
    background-image:url(../images/svg/checkbox-red.svg);
}

.checkbox-primary-2:not(:disabled):checked {
    background-image:url(../images/svg/checkbox-blue.svg);
}

.btn-full-1 {
    background-color: var(--clr-neutral-dark);
    color: var(--clr-neutral-light);
    border: 0.12rem solid var(--clr-neutral-dark);
    min-width: fit-content;
}

.btn-full-2 {
    background-color: var(--clr-neutral-light);
    min-width: fit-content;
}

.btn-full-2 > .btn-txt {
    color: var(--clr-neutral-dark);
    transition: all .5s ease-in-out;
}

.btn-full-2:hover > .btn-txt {
    color: var(--clr-neutral-light);
}

.contact-flex > fieldset {
    flex-direction: row;
    gap: 1.2rem;
    align-items: center;
}

.newsletter-section {
    background-image: url(../images/bureau/Photo_newsletter_x2.webp);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--clr-neutral-light);
    padding-inline: clamp(2.4rem, -7.767rem + 28.241vw, 32.9rem);
}

.newsletter-section::after {
    background: none;
}

.newsletter-section h2 {
    padding-block-end: 3.2rem;
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
}

.newsletter-section p {
    padding-block-end: 5.6rem;
}

.newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 4.8rem;
}

.newsletter-flex {
    display: flex; 
    justify-content: space-between;
    gap: 4.8rem;
    align-items: flex-start;
}

.newsletter-flex > fieldset:where(:not([class])) {
    flex-basis: 50%;
}

.consent-label {
    font-size: var(--fs-smallest-text);
    line-height: var(--lh-smallest-text);
}

.fieldset-flex {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 1.6rem;
    justify-content: center;
}

@media only screen and (max-width: 68.688em) { /* 1099px */ 
    .contact-flex-main {
        flex-direction: column;
        gap: 10.4rem;
    }
    .contact-flex {
        flex-direction: column;
        align-items: center;
    }
    .newsletter-flex:first-of-type {
        align-items: stretch;
    }
    .newsletter-flex {
        flex-direction: column;
        align-items: center;
    }
}

@media only screen and (max-width: 22.5em) { /* 360px */
    .newsletter-section {
        background-image: url(../images/mobile/Newsletter.webp);
    }
}

/* CONTACT - end */

/* ARTICLE ACTUALITE - start */

.article-actualite {
    display: grid;
}

.article-actualite h1 {
    font-size: var(--fs-subtitles);
    line-height: var(--lh-subtitles);
    font-family: var(--ff-main);
    text-transform: none;
    padding-block: var(--vertical-spacing-sections);
    justify-self: center;
}

.article-actualite picture {
    justify-self: center;
    margin-block-end: 12rem;
    max-width: 78.2rem;
    max-height: 56.2rem;
}

.article-actualite p {
    padding-block-end: var(--vertical-spacing-sections);
    max-width: 66ch;
    justify-self: center;
}

.pagination-article {
    display: flex;
    justify-content: space-between;
    gap: 2.4rem;
}

.pagination-article .previous, .pagination-article .next {
    display: flex;
    flex-direction: column;
}

.pagination-article .next {
    align-items: flex-end;
    text-align: end;
}

.pagination-article a {
    transition: all 0.3s ease-in-out;
}

.pagination-article a:hover {
    color: var(--clr-primary-1);
}

@media only screen and (max-width: 22.5em) /* 360px */ {
    .article-actualite .previous, .article-actualite .next {
        font-size: var(--fs-smallest-text);
        line-height: var(--lh-smallest-text);
    }
}

/* ARTICLE ACTUALITE - end */

/* ACTUALITES - start */

.actualites {
    display: flex;
    flex-direction: column;
    gap: 7.2rem;
}

.actualites h1 {
    padding-block: var(--vertical-spacing-sections);
}

.filtres-actus {
    padding-block-end: 10.4rem;
}

.filtres-actus > .btn-filtre-container {
    justify-content: center;
}

#intermedes::before {
    background-image: url(../images/svg/intermedes.svg);
}

#articles-actus::before {
    background-image: url(../images/svg/articles_actus.svg);
}

#articles-actus {
    display: flex;
    justify-content: center;
    align-items: center;
}

.title-subtitle-actu {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
}

.title-subtitle-actu h2 {
    font-size: var(--fs-subtitles);
    line-height: var(--lh-subtitles);
    font-family: var(--ff-main);
    font-weight: var(--fw-semi-bold);
    text-transform: none;
}

.title-subtitle-actu a {
    font-weight: var(--fw-semi-bold);
    transition: all 0.3s ease-in-out;
}

.title-subtitle-actu a:hover, .title-subtitle-actu a:focus, .title-subtitle-actu a:active {
    color: var(--clr-primary-1);
}

.title-subtitle-actu a::before {
    content: '>';
    font-family: var(--ff-accent);
    font-size: var(--fs-subtitles);
    line-height: var(--lh-subtitles);
    padding-inline-end: .8rem;
}

.actu[data-visible="true"] {
    display: flex;
    justify-content: space-between;
    gap: 4.8rem;
} 

.actu[data-visible="true"]:nth-child(even) {
    flex-direction: row-reverse;
}

.video-actu video {
    flex-basis: 100%;
    max-width: 58rem;
    aspect-ratio: 16 / 9;
}

@media only screen and (max-width: 62em) /* 992px */{
    .video-actu[data-visible="true"] {
        flex-direction: column-reverse;
        align-items: center;
    }
    .actu[data-visible="true"] {
        flex-direction: column-reverse;
    }
    .actu[data-visible="true"]:nth-child(even) {
        flex-direction: column-reverse;
    }
    .article-actu img {
        margin-inline: auto;
    }
    .actualites {
        gap: 10.4rem;
    }
}

/* ACTUALITES - end */

/* ACCUEIL - start */

.main-accueil .hero-title {
    text-transform: none;
    top: 18rem;
}

.main-accueil section:nth-of-type(2)::before {
    content: '';
    position: absolute;
    background-image: url(../images/svg/quarter_circle_homepage.svg);
    background-size: cover;
    width: 40.84rem;
    height: 28.63rem;
    left: calc(100% - 40.84rem);
    z-index: 3;
    transform: rotate(360deg);
}

.main-accueil > section > div > h2 {
    font-size: var(--fs-h2-home);
    line-height: var(--lh-h1);
}

.accueil-description {
    display: grid;
    grid-template-columns: repeat(8, auto);
    grid-template-rows: repeat(6, min-content);
    column-gap: 2.4rem;
    justify-items: center;
}

.accueil-description h2 {
    justify-self: start;
    grid-column: 2 / 8;
    padding-block-end: 13.9rem;
}

.accueil-description span:nth-of-type(2){
    font-size: var(--fs-h2-main);
    line-height: var(--lh-h2-main);
    text-transform: none;
}

.accueil-description a {
    margin-block-start: 10.4rem;
    grid-row: 5 / 6;
    grid-column: 1 / 9;
}

.compagnie-description {
    grid-column: 3 / 6;
    grid-row: 2 / 5;
    display: grid;
    row-gap: 10.4rem;
    grid-template-columns: 15% 70% 15%;
    max-width: 78.4rem;
}

.accueil-description::before {
    content: '';
    background-image: url(../images/svg/emmanuelle_illu.svg);
    background-size: cover;
    width: 13.95rem;
    height: 42.26rem;
    grid-column: 7 / 9;
    grid-row: 2 / 4;
}

.accueil-description::after {
    content: '';
    background-image: url(../images/svg/lola_illu.svg);
    background-size: cover;
    width: 24.83rem;
    height: 22.78rem;
    grid-column: 1 / 3;
    grid-row: 4 / 6;
}

.compagnie-description p:nth-of-type(odd) {
    grid-column: 2 / 4;
    justify-self: end;
}

.compagnie-description p:nth-of-type(even) {
    grid-column: 1 / 3;
    justify-self: start;
}

.prochaines-dates {
    display: flex;
    flex-direction: column; 
    justify-content: center;
    align-items: center;
}

.prochaines-dates > h2 {
    width: fit-content;
}

.prochaines-dates > h2 > span {
    position: relative;
    display: inline-block;
    width: fit-content;
}

.prochaines-dates > h2 > span::after {
    display: block;
    content: '';
    position: absolute;
    background-image: url(../images/svg/ligne_horizontale_rouge.svg);
    background-size: cover;
    width: 16.8rem;
    height: .8rem;
    left: calc(100% - 16.8rem);
}

.prochaines-dates a {
    margin-block-start: 7.2rem;
}

.full-width-img {
    position: relative;
    width: 100%;
}

.full-width-img::after {
    content: "";
    position: absolute;
    background-color: var(--transparency-002);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.citation-txt {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.citation-txt p {
    color: var(--clr-neutral-light);
}

.citation-txt p:first-of-type {
    font-size: var(--fs-h2-main);
    line-height: var(--lh-h2-main);
    font-family: var(--ff-accent);
    position: relative;
}

.citation-txt p:first-of-type:before {
    content: '“';
    position: absolute;
    color: var(--clr-primary-1);
    font-size: 10.4rem;
    left: -15%;
    top: -55%;
}

.citation-txt p:first-of-type:after {
    content: '”';
    position: absolute;
    color: var(--clr-primary-1);
    font-size: 10.4rem;
    right: -15%;
}

.content-spectacles {
    position: relative;
}

.content-spectacles::after {
    content: '';
    position: absolute;
    top: 0;
    left: calc(100% - 70rem);
    background-image: url(../images/bureau/emmanuelle_bleue_x2.webp);
    background-size: 200%;
    background-position: center top;
    background-repeat: no-repeat;
    max-width: 70rem;
    height: 69.8rem;
    transform: rotate(360deg);
    clip-path: path("M87.0312 0C33.405 62.6858 0 137.689 0 222.42C0 483.983 91.4595 622.07 333.871 684.157C449.547 713.775 584.835 690.478 701 631.634V0H87.0312Z");
    z-index: 0;
}

.section-spectacles {
    color: var(--clr-neutral-light);
    display: flex;
    flex-direction: column;
    gap: 10.4rem;
    position: relative;
    z-index: 2;
}

.section-spectacles h2 {
    padding-inline-start: clamp(0rem, -131.579rem + 105.263vw, 20rem);
    width: fit-content;
}

.section-spectacles h2 span {
    position: relative;
}

.section-spectacles h2 span::after {
    content: '';
    position: absolute;
    background-image: url(../images/svg/ligne_horizontale_bleue.svg);
    background-size: cover;
    width: 16.8rem;
    height: .8rem;
    bottom: -1.6rem;
    right: 0;
}

.desc-spectacles {
    display: grid;
    gap: 12.8rem;
    max-width: 47.8rem;
}

.desc-spectacles > p:first-of-type {
    position: relative;
    margin-inline-start: 3.2rem;
}

.desc-spectacles > p:first-of-type::before {
    content: '';
    position: absolute;
    background-image: url(../images/svg/Ligne_verticale_bleue.svg);
    background-size: cover;
    width: .8rem;
    height: 100%;
    left: -3.2rem;
}

.desc-spectacles a {
    justify-self: end;
}

.content.content-actions {
    padding-inline-start: 0;
}

.content-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
}

.content-actions::after {
    background: none;
}

.actions-img {
    position: relative;
    clip-path: url(#cercle_actus);
    z-index: 0;
    max-width: 40vw;
    height: auto;
    grid-column: 1 / 3;
    grid-row: 1 / 2;
    aspect-ratio: 1 / 1;
}

.actions-img::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(0,0,0);
    background: radial-gradient(circle, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 80%);
    transform: rotate(360deg);
    clip-path: url(#cercle_actus);
    z-index: 1;
}

.section-actions {
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, auto);
    row-gap: 10.4rem;
    grid-column: 1 / 3;
    grid-row: 1 / 2;
    padding-inline-start: var(--horizontal-spacing-sections);
}

.section-actions h2 {
    grid-row: 1 / 2;
    grid-column: 1 / 3;
}

.section-actions h2 span {
    position: relative;
}

.section-actions h2 span::after {
    content: '';
    position: absolute;
    background-image: url(../images/svg/ligne_horizontale_rouge.svg);
    background-size: cover;
    width: 16.8rem;
    height: .8rem;
    bottom: -1.6rem;
    right: 0;
}

.desc-actions {
    grid-row: 2 / 3;
    grid-column: 2 / 3;
    display: grid;
    gap: 10.4rem;
}

.desc-actions a {
    justify-self: end;
    align-self: end;
}

.desc-actions > p:first-of-type {
    position: relative;
    margin-inline-start: 3.2rem;
    height: fit-content;
}

.desc-actions > p:first-of-type::before {
    content: '';
    position: absolute;
    background-image: url(../images/svg/Ligne_verticale_rouge.svg);
    background-size: cover;
    width: .8rem;
    height: 100%;
    left: -3.2rem;
}

.main-accueil .content-actus::before {
    background: none;
}

.section-actus {
    display: grid;
    position: relative;
}

.section-actus > h2 {
    justify-self: end;
    position: absolute;
    top: -12.4rem;
}

.section-actus > a {
    justify-self: center;
}

.actus-articles {
    display: flex;
    flex-direction: column;
    gap: 7.2rem;
    padding-block: 2.4rem 8rem;
    position: relative;
}

.section-actus > h2 > span {
    width: fit-content;
    position: relative;
}

.section-actus > h2 > span::after {
    content: '';
    position: absolute;
    background-image: url(../images/svg/ligne_horizontale_rouge.svg);
    background-size: cover;
    width: 16.8rem;
    height: .8rem;
    bottom: -1.6rem;
    right: 0;
}

@media only screen and (max-width: 100em) /* 1600px */ {
    .content-spectacles::after {
        background-position: top 0 left 15%;
    }
}

@media only screen and (max-width: 68.75em) /* 1100px */ {
    .main-accueil section:nth-of-type(2)::before {
        background: none;
    }
}

@media only screen and (max-width: 62em) /* 992px */ {
    .accueil-description {
        grid-template-columns: repeat(2, auto);
        grid-template-rows: repeat(8, min-content);
    }
    .accueil-description h2 {
        grid-column: 1 / 3;
        grid-row: 4 / 5;
        padding-block: 6.4rem;
    }
    .accueil-description a {
        grid-row: 6 / 7;
        grid-column: 1 / 3;
        margin-block-end: 7.6rem;
    }
    .compagnie-description {
        grid-column: 1 / 3;
        grid-row: 5 / 6;
    }
    .accueil-description::before {
        grid-column: 1 / 3;
        grid-row: 1 / 3;
        width: 8.65rem;
        height: 26.2rem;
    }
    .accueil-description::after {
        grid-column: 1 / 3;
        grid-row: 7 / 8;
        width: 20.7rem;
        height: 18.99rem;
    }
    .content-spectacles::after {
        left: calc(100% - 27.7rem * 2);
        background-image: url(../images/mobile/Emmanuelle_bleue_x2.webp);
        max-width: calc(27.7rem * 2);
        height: calc(32.4rem * 2);
    }
    .desc-spectacles a {
        justify-self: center;
    }
    .content-actions {
        grid-template-columns: 1fr;
    }
    .section-actions {
        grid-template-columns: 1fr;
        grid-template-rows: min-content min-content;
        gap: clamp(15rem, -2.089rem + 47.468vw, 45rem);
    }
    .actions-img {
        max-width: 70vw;
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }
    .section-actions h2 {
        grid-column: 1 / 2;
        padding-block-start: 2.4rem;
    }
    .desc-actions {
        grid-column: 1 / 2;
        grid-row: 3 / 4;
    }
    .desc-actions a {
        justify-self: center;
    }
}

@media only screen and (max-width: 50em) /* 800px */ {
    .content-spectacles {
        padding-inline-end: 30rem;
    }
    .section-spectacles h2 {
        word-break: keep-all;
    }
    .prochaines-dates > h2 > span::after {
        left: 0;
    }
}

@media only screen and (max-width: 36em) /* 576px */ {
    .content-spectacles::after {
        left: calc(100% - 27.7rem);
        max-width: calc(27.7rem);
        height: calc(32.4rem);
    }
    .content-spectacles {
        padding-inline: var(--horizontal-spacing-sections);
    }
    .section-spectacles h2 {
        max-width: 11ch;
    }
}

@media only screen and (max-width: 22.5em) /* 360px */ {
    .main-accueil .hero-title {
        top: 40rem;
    }
    .citation-txt p:first-of-type:after {
        right: -30%;
    }
}

/* ACCUEIL - end */

/* MENTIONS LEGALES - start */

.mentions-legales-container {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.mentions-legales-container h1 {
    padding-block: var(--vertical-spacing-sections);
}

.mentions-legales-container h2 {
    font-size: var(--fs-h2-main);
    line-height: var(--lh-h2-main);
    text-transform: none;
}

/* MENTIONS LEGALES - end */

/* Styles spécifiques - end */