:root {
    --hero-title-margin: 1vh 2vw;
    --hero-contact-gap: 0.5vh;
    --hero-contact-padding: 1vh 0;
    --accessibility-arguments-grid-template: 1fr;
    --list-padding: 5vw;
    --argument-corner-size: 4vh;
    --argument-corner-width: 3px;
    --argument-padding: 3vh 6vw;
    --argument-gap: 1.5vh;
    --card-height: 50vh;
    --argument-height: auto;
    --project-article-padding: 2vh 4vw;

    --habilitation-and-partner-grid-template-column: repeat(5, 1fr);
    --habilitation-and-partner-column-gap: 2vw;
    --habilitation-and-partner-row-gap: 1vh;
    --habilitation-and-partner-padding: 1vh 2vw;
    --rates-grid-template: 1fr;
    --rate-card-grid-gap: 3vh 2vw;
    --rate-card-padding: 3vh 4vw;
    --rate-card-header-gap: 2vw;
    --rate-card-gap: 4vh;
    --rate-card-figure-padding: 15px;
    --progress-circle-width: 50%;
    --testimony-card-padding: 3vh 6vw;
    --testimonial-gap: 2vw;
    --testimonial-row-gap: 4vh;
    --arrow-squarred-button-padding: 0.2vh 4vw;
    --testimony-card-gap: 3vh;
    --small-svg-width: 6vw;
    --medium-svg-width: 8vw;
    --big-svg-width: 10vw;
    --testimony-rate-padding: 1.5vh 2vw;
    --testimony-rate-gap: 1.5vw;
}

@keyframes exit-to-left {
    from {
        transform: translateX(0%);
        opacity: 1;
    }

    to {
        transform: translateX(-150%);
        opacity: 0;
    }
}

@keyframes exit-to-right {
    from {
        transform: translateX(0%);
        opacity: 1;
    }

    to {
        transform: translateX(150%);
        opacity: 0;
    }
}

@keyframes enter-from-left {
    from {
        transform: translateX(-150%);
        opacity: 0;
    }

    to {
        transform: translateX(0%);
        opacity: 1;
    }
}

@keyframes enter-from-right {
    from {
        transform: translateX(150%);
        opacity: 0;
    }

    to {
        transform: translateX(0%);
        opacity: 1;
    }
}


#hero {
    width: 100vw;
    aspect-ratio: 16/9;
    background-image: url("/wp-content/themes/msf/assets/hero_bg_large.png");
    background-size: 125%;
    background-position: 10% 50%;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#hero h1 {
    margin: var(--hero-title-margin);
}

#hero h1 span {
    font-size: var(--display-medium-font-size);
    line-height: var(--display-medium-line-height);
}

#hero h1 span:nth-child(odd) {
    color: var(--primary);
}

#hero h1 span:nth-child(even) {
    color: var(--secondary);
}

#hero-contact {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--hero-contact-gap);
    padding: var(--hero-contact-padding);
    background-color: rgb(from var(--surface) r g b / 0.8);
}

#hero-contact span {
    color: var(--primary);
}

#hero-contact span {
    text-align: center;
    font-size: var(--headline-medium-font-size);
    line-height: var(--headline-medium-line-height);
}

#our-commitments h2 {
    margin-bottom: 2vh;
}

#our-commitments p,
#our-commitments span {
    font-size: var(--headline-medium-font-size);
    line-height: var(--headline-medium-line-height);
}

#our-commitments p span {
    font-weight: var(--bold-weight);
    color: var(--primary);
}

#accessibility {
    background-color: var(--secondary-container);
}

#accessibility .section-title {
    color: var(--secondary);
}

#accessibility h3 {
    font-size: var(--headline-large-font-size);
    line-height: var(--headline-large-line-height);
}

#accessibility #arguments {
    display: grid;
    gap: var(--section-internal-gap);
    grid-template-columns: var(--accessibility-arguments-grid-template);
}

#accessibility #arguments article {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: start;
    justify-content: start;
    gap: var(--argument-gap);
    height: 100%;
    min-height: 30vh;
    border: var(--argument-corner-width) solid var(--primary);
    padding: var(--argument-padding);
    background-color: var(--secondary-container) content-box;
    mask:
        conic-gradient(#000 0 0) content-box,
        conic-gradient(at var(--argument-corner-size) var(--argument-corner-size), #0000 75%, #000 0) 0 0/calc(100% - var(--argument-corner-size)) calc(100% - var(--argument-corner-size));
}

#accessibility ul {
    font-size: var(--body-large-font-size);
    line-height: var(--body-large-line-height);
    list-style-type: none;
    text-align: center;
}

#accessibility li::marker {
    color: var(--secondary);
}

#accessibility ul span {
    color: var(--secondary);
    font-weight: var(--bold-weight);
}

#accessibility svg {
    align-self: center;
    justify-self: center;
    fill: var(--secondary);
    stroke: unset;
    width: 40%;
    flex: 1;
}

#projects #projects-container {
    display: grid;
    gap: var(--section-internal-gap);
}

#projects article {
    min-height: var(--card-height);
    height: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: var(--surface-container);
    padding: var(--project-article-padding);
    border-radius: var(--corner-radius);
}

#projects article img {
    width: 100%;
    aspect-ratio: 16/10;
    border-radius: var(--corner-radius);
}

#projects article a {
    font-size: var(--headline-small-font-size);
    line-height: var(--headline-small-line-height);
    color: var(--primary);
}

#habilitations div,
#partners div {
    display: grid;
    column-gap: var(--habilitation-and-partner-column-gap);
    row-gap: var(--habilitation-and-partner-row-gap);
    grid-template-columns: var(--habilitation-and-partner-grid-template-column);
    grid-template-rows: auto;
}

#habilitations figure,
#partners figure {
    background-color: #fff;
    display: flex;
    justify-items: center;
    align-items: center;
    padding: var(--habilitation-and-partner-padding);
    border-radius: var(--corner-radius);
    width: 100%;
}

#habilitations img,
#partners img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
}

.surface-container-var {
    background-color: var(--surface-container-var);
}

.testimonial-carousel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    gap: 20px;

}

.testimonial-button:first-child {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
}

.testimonial-button:last-child {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
}

#testimonials-container {
    grid-column: 1 / -1;
    grid-row: 2;
    position: relative;
    min-height: 90vh;
    overflow: hidden;
}

.testimonial-button:first-child svg {
    transform: rotateZ(180deg);
}

.testimonial-button {
    position: relative;
    padding: 8px 20px;
    background-color: var(--secondary);
    border: none;
    border-radius: 4px;
    width: fit-content;
}

.testimonial-button:disabled::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

.testimonial-button svg {
    fill: var(--on-secondary);
    stroke: none;
    width: 12px;
}

.testimony-card {
    position: absolute;
    width: 100%;
    max-width: 100%;
    background-color: var(--surface-container);
    border-radius: var(--corner-radius);
    padding: 15px 16px;
    gap: 15px;
    display: grid;
}

.testimony-inactive-l {
    transform: translateX(-150%);
    opacity: 0;
}

.testimony-inactive-r {
    transform: translateX(150%);
    opacity: 0;
}

.testimony-exit-left {
    animation: exit-to-left 1000ms ease-out forwards;
}

.testimony-exit-right {
    animation: exit-to-right 1000ms ease-out forwards;
}

.testimony-enter-from-left {
    animation: enter-from-left 1000ms ease-out forwards;
}

.testimony-enter-from-right {
    animation: enter-from-right 1000ms ease-out forwards;
}

.testimony-header {
    display: grid;
    grid-template-columns: 1fr 2.5fr 1.5fr;
    justify-items: center;
    align-items: center;
}

.testimony-header svg {
    width: 26px;
    fill: var(--secondary);
    stroke: var(--secondary);
}

.testimony-header h5 {
    text-decoration: underline var(--primary) 1px solid;
    text-underline-offset: 5px;
    text-align: center;
}

.testimony-rate {
    display: flex;
    background-color: var(--surface);
    width: min-content;
    justify-self: end;
    padding: 10px;
    gap: 12px;
    border-radius: var(--corner-radius);
}

.testimony-rate svg {
    width: 20px;
}

#satisfactions>div {
    display: grid;
    grid-template-columns: var(--rates-grid-template);
    justify-content: space-between;
    justify-items: center;
    align-items: center;
    gap: var(--rate-card-grid-gap);
}

.rate-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: var(--rate-card-padding);
    gap: var(--rate-card-gap);
    background-color: var(--surface-container);
}

.rate-card-header {
    display: flex;
    justify-items: center;
    align-items: center;
    gap: var(--rate-card-header-gap);
}

.rate-card-header figure {
    width: 25%;
    aspect-ratio: 1;
    background-color: white;
    border-radius: 100%;
    overflow: hidden;
    padding: var(--rate-card-figure-padding);
    border: 1px solid var(--secondary);
    display: flex;
    justify-items: center;
}

.rate-card-header img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.progress-circle {
    align-self: center;
    aspect-ratio: 1;
    width: var(--progress-circle-width);
    border-radius: 50%;
    position: relative;
    background: conic-gradient(var(--primary) 0,
            var(--primary) var(--progress, 0%),
            transparent var(--progress, 0%),
            transparent 100%) var(--primary-container);
    animation: progress-fill 1.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes progress-fill {
    from {
        --progress: 0%;
    }

    to {
        --progress: var(--percent);
    }
}

@property --progress {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%;
}

.progress-overlay {
    top: 50%;
    left: 50%;
    display: flex;
    position: absolute;
    background: var(--surface-container);
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
    width: calc(100% - 15px);
    height: calc(100% - 15px);
}

#recent-articles>div {
    display: grid;
    gap: 2vh;
}



@media screen and (min-width: 768px) {
    :root {
        --hero-contact-padding: 2vh 4vw;
        --accessibility-arguments-grid-template: 1fr 1fr;
        --argument-padding: 2.5vh 4vw;
        --argument-gap: 2vh;
        --card-height: 60vh;
        --project-article-padding: 4vh 2vw;
        --rates-grid-template: repeat(2, min(38vw, 300px));
        --rate-card-padding: 1.5vh 2vw;
        --small-svg-width: 2vw;
        --medium-svg-width: 4vw;
        --big-svg-width: 5vw;
        --rate-card-figure-padding: 20px;
        --progress-circle-width: 40%;
        --arrow-squarred-button-padding: 0.2vh 3vw;
    }

    #hero-contact {
        flex-direction: row;
        justify-content: space-between;
    }

    #accessibility #arguments article {
        min-height: 35vh;
    }

    #accessibility svg {
        width: 30%;
    }

    #testimonials-container {
        grid-column: unset;
        grid-row: unset;
        min-height: 70vh;
    }

    .testimonial-carousel {
        grid-template-columns: 1fr 5fr 1fr;
    }

    .testimonial-button {
        height: min-content;
        align-self: center;
        justify-self: center;
        cursor: pointer;
    }

    .testimonial-button:first-child {
        grid-column: unset;
        grid-row: unset;
    }

    .testimonial-button:last-child {
        grid-column: unset;
        grid-row: unset;
    }

    .testimony-header svg {
        width: 39px;
        justify-self: start;
    }

    .testimony-header span {
        justify-self: end;
    }

    .testimony-card {
        gap: 30px;
    }

}

@media screen and (min-width: 1024px) {
    :root {
        --argument-padding: 2vh 3vw;
        --argument-gap: 2.5vh;
        --card-height: 35vh;
        --habilitation-and-partner-grid-template-column: repeat(10, 1fr);
        --habilitation-and-partner-column-gap: 0.5vw;
        --habilitation-and-partner-padding: 0.5vh 0.75vw;
        --small-svg-width: 1.5vw;
        --medium-svg-width: 3vw;
        --big-svg-width: 4vw;
        --rates-grid-template: repeat(2, min(38vw, 400px));
        --rate-card-padding: 3vh 2vw;
        --rate-card-gap: 3vh;
        --rate-card-figure-padding: 5%;
        --arrow-squarred-button-padding: 0.2vh 2vw;
        --testimony-card-padding: 1vh 1.5vw;
        --testimony-rate-gap: 1vw;
        --testimony-rate-padding: 1vh 1.5vw;
    }

    #accessibility #arguments article {
        min-height: 30vh;
    }

    #accessibility svg {
        width: 20%;
    }

    #projects #projects-container {
        grid-template-columns: repeat(2, 1fr);
    }

    #projects article {
        display: grid;
        column-gap: 2vw;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, auto);
        height: auto;
        min-height: 35vh;
    }

    #projects article:nth-child(even) {
        transform: translateY(20vh);
    }

    #projects article>figure {
        grid-row: 1;
        grid-column: 1;
    }

    #projects article>div {
        grid-column: 2;
        grid-row: 1 / span 2;
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: space-between;
    }

    .testimonial-carousel {
        grid-template-columns: 1fr 4fr 1fr;
    }

    .testimonial-button:disabled {
        cursor: unset;
    }

    #testimonials-container {
        grid-column: unset;
        grid-row: unset;
        min-height: 60vh;
    }

    #satisfactions>div {
        justify-content: center;
        gap: 20vw;
        row-gap: 5vh;
    }

}