@import url('https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&display=swap');

:root {

    /* Couleurs */

    /* Primary */
    --primary-l: .81;
    --primary-c: .12;
    --primary-h: 173.5;
    --clr-primary: oklch(var(--primary-l) var(--primary-c) var(--primary-h));
    --clr-primary-darker: oklch(.69 .1 var(--primary-h));

    /* Secondary */
    --secondary-l: .80;
    --secondary-c: .13;
    --secondary-h: 84.5;
    --clr-secondary: oklch(var(--secondary-l) var(--secondary-c) var(--secondary-h));
    --clr-secondary-darker: oklch(.69 var(--secondary-c) var(--secondary-h));

    /* Accent */
    --accent-l: .66;
    --accent-c: .15;
    --accent-h: 308.8;
    --clr-accent: oklch(var(--accent-l) var(--accent-c) var(--accent-h));

    /* Neutral */
    --neutral-c: 0;
    --neutral-h: 90;
    --clr-100: oklch(1 var(--neutral-c) var(--neutral-h));
    --clr-200: oklch(.97 var(--neutral-c) var(--neutral-h));
    --clr-300: oklch(.93 var(--neutral-c) var(--neutral-h));
    --clr-400: oklch(.89 var(--neutral-c) var(--neutral-h));
    --clr-500: oklch(.53 var(--neutral-c) var(--neutral-h));
    --clr-600: oklch(.35 var(--neutral-c) var(--neutral-h));
    --clr-700: oklch(.25 var(--neutral-c) var(--neutral-h));
    --clr-800: oklch(.15 var(--neutral-c) var(--neutral-h));
    --clr-900: oklch(0 var(--neutral-c) var(--neutral-h));

    /* Font */
    --ff: 'Karla', sans-serif;
    --fw-body: 400;
    --fw-mid: 500;
    --fw-bold: 600;
    --fs-xxl: 6rem;
    --fs-xl: 3.875rem;
    --fs-l: 1.88rem;
    --fs: 1.5rem;
    --fs-s: 1rem;
    --fs-xs: .9rem;

    /* Spacings */
    --spacing-xs: .5rem;
    --spacing-s: .625rem;
    --spacing: 1rem;
    --spacing-l: 1.5rem;
    --spacing-xl: 5.5rem;
    --spacing-inner-wrap: var(--spacing-xl);

    /* Others */
    --max-w-page: 150rem;
    --radius: 1.25rem;
}

/* Reset */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:focus {
    outline: 0px;
}

::selection {
    background-color: var(--clr-accent);
    color: var(--clr-900);
}

img, svg {
    display: block;
    max-width: 100%;
}

input, select, button, textarea {
    appearance: none;
    border-radius: 0;
}

:where(a) {
    color: var(--clr-primary);
}

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

.tac {
    text-align: center;
}

body {
    font-size: var(--fs);
    font-family: var(--ff);
    font-weight: var(--fw-body);
    background-color: var(--clr-100);
    color: var(--clr-700);
    line-height: 1.1;
}

body.no-scroll {
    overflow: hidden;
}

.loading-anim {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150%;
    opacity: 0;
    background: linear-gradient(0deg, var(--clr-100) 67%, transparent 100%);
    pointer-events: none;
    translate: 0 0;
    z-index: 999;
    translate: 0 110%;
    animation: loadinganim 2.5s forwards;
}

.container {
    padding: var(--spacing);
    overflow-x: clip;
    overflow-y: visible;
    margin-bottom: var(--spacing-xl);
    &.nomb {
        margin-bottom: 0;
    }
    &.overvisi {
        overflow: visible;
    }
}

.overvisi {
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
}

.inner-container {
    width: 100%;
    max-width: var(--max-w-page);
    margin: 0 auto;
    border-radius: var(--radius);
    &.inner-padding {
        padding: var(--spacing) var(--spacing-inner-wrap);
    }
    &.inner-padding-h {
        padding: var(--spacing-xl) var(--spacing-inner-wrap);
    }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Scrolling animationc class */
.outTop {
    animation: outTop linear forwards;
    animation-timeline: scroll(root);
    animation-range: 0 100vh;
}

.inOut {
    animation: inOut linear forwards;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
}

.inOutLeft {
    animation: inOutLeft linear forwards;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
}

.inOutRight {
    animation: inOutRight linear forwards;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
}

.inOutBottom {
    animation: inOutBottom linear forwards;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
}

/* Texts */
.title {
    font-size: var(--fs-xl);
    font-weight: var(--fw-body);
    line-height: 1;
}

.sub-title {
    font-size: var(--fs-xl);
    font-weight: var(--fw-body);
    line-height: 1;
    &.bold {
        font-weight: var(--fw-bold);
    }
    &:has( img), &:has( .bouton) {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        flex-wrap: wrap;
        margin-bottom: var(--spacing-l);
    }
    & img {
        width: 4.25rem;
    }
}

.text-caps {
    font-size: var(--fs);
    text-transform: uppercase;
    font-weight: var(--fw-mid);
    line-height: 1.2;
    margin-bottom: var(--spacing);
    &.bigger {
        font-size: var(--fs-xl);
    }
    &.nomb {
        margin-bottom: 0;
    }
}

.text-big {
    font-size: var(--fs-l);
    font-weight: var(--fw-bold);
    line-height: normal;
    &.light {
        font-weight: var(--fw-body);
    }
}

.mb {
    margin-bottom: var(--spacing-xl);
}

.mb-s {
    margin-bottom: var(--spacing-l);
}

.mt {
    margin-top: calc(var(--spacing-l) * 2);
}

.line-before {
    display: flex;
    gap: var(--spacing-l);
    align-items: start;
    justify-content: start;
    &::before {
        content: "";
        --width: 8.5rem;
        height: 1px;
        width: var(--width);
        margin-top: 1rem;
        background-color: currentColor;
        animation: linebefore linear both;
        animation-timeline: view();
        animation-range: entry 0% exit 100%;
    }
}

/* Header */
.main-header {
    position: fixed;
    top: 4rem;
    width: calc(100% - (var(--spacing) * 4));
    max-width: calc(var(--max-w-page) - (var(--spacing) * 2));
    left: max(calc(var(--spacing) * 2), calc((100% - var(--max-w-page) + (var(--spacing) * 2)) / 2));
    display: flex;
    gap: var(--spacing-xs);
    font-size: var(--fs-xs);
    font-weight: var(--fw-mid);
    text-transform: uppercase;
    animation: scrollHeader linear forwards;
    animation-timeline: scroll(root);
    animation-range: 0 75vh;
    z-index: 9999;
}

.inner-header {
    --bgc: var(--clr-100);
    background-color: var(--clr-100);
    border-radius: calc(var(--radius) * .6);
    padding: var(--spacing-xs);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-xs);
    flex-grow: 1;
    position: relative;
    animation: scrollColorHeader linear forwards;
    animation-timeline: scroll(root);
    animation-range: 0 75vh;
}

.logo-header {
    flex-shrink: 0;
    width: 8.65rem;
    color: var(--clr-900);
    animation: scrollColorHeaderLogo linear forwards;
    animation-timeline: scroll(root);
    animation-range: 0 75vh;
}

#main-nav {
    --minh: 3rem;
    flex-grow: 1;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    min-height: var(--minh);
    transition: padding-top 1s;
    animation: scrollMainNav linear forwards;
    animation-timeline: scroll(root);
    animation-range: 0 25vh;
    &.notransition {
        transition: none !important;
    }
    &::before {
        content: '';
        pointer-events: none;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;
        translate: -50% -50%;
        background: linear-gradient( 90deg, var(--clr-100) 0%, transparent 20%, transparent 80%, var(--clr-100) 100% );
        z-index: 9;
        opacity: 0;
    }
    & ul {
        display: flex;
        justify-content: center;
        gap: 0;
        list-style-type: none;
        position: absolute;
        left: 0;
        width: 100%;
        top: 50%;
        translate: 0 -50%;
        overflow: hidden;
        max-height: 3rem;
        & a {
            text-decoration: none;
            color: var(--clr-900);
            display: block;
            padding: 0.5rem 1.125rem;
            transition: color 0.3s, opacity 0.3s;
            &.current {
                color: var(--clr-accent);
            }
        }
        &:has( li a:hover) a:not(:hover) {
            color: var(--clr-600);
            opacity: 0.5;
        }
    }
    &.is-open.nav-hidden {
        animation: none;
        position: absolute;
        bottom: 0;
        left: 0;
        background: var(--clr-200);
        opacity: 1;
        width: 100%;
        padding-top: 3rem;
        translate: 0 calc(100% - 3.5rem);
        border-bottom-left-radius: calc(var(--radius) * .6);
        border-bottom-right-radius: calc(var(--radius) * .6);
        z-index: -1;
        transition: all 1s;
        &::before {
            width: 100%;
            height: 2rem;
            animation: 0;
            top: 3rem;
            left: 0;
            translate: 0 0;
            opacity: 1;
            background: linear-gradient(180deg, var(--bgc) 0%, transparent 100%);
        }
        & ul {
            position: relative;
            top: 0;
            translate: 0 0;
            text-align: right;
            flex-direction: column;
            gap: 0.25rem;
            padding-top: 1rem;
            padding-bottom: 0.5rem;
            max-height: 20rem;
            opacity: 1;
            transition: all 1.5s, max-height 3s;
        }
    }
    &.nav-hidden {
        animation: none;
        opacity: 0;
        translate: 0 -100%;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        padding-top: 0;
        translate: 0 calc(100% - 3.5rem);
        background: var(--clr-200);
        border-bottom-left-radius: calc(var(--radius) * .6);
        border-bottom-right-radius: calc(var(--radius) * .6);
        z-index: -1;
        transition: all 0.5s, padding-top 0.5s, opacity 0s 1s;
        & ul {
            position: relative;
            top: 0;
            translate: 0 0;
            text-align: right;
            flex-direction: column;
            gap: 0.25rem;
            padding-top: 0;
            padding-bottom: 0rem;
            max-height: 0;
            opacity: 0;
            transition: all 1s, opacity 0.4s;
        }
    }
}

.menu-button {
    display: block;
    visibility: hidden;
    width: 2.5rem;
    padding: 0.25rem;
    border: 0;
    background-color: transparent;
    color: var(--clr-900);
    position: absolute;
    top: 50%;
    translate: 0% -50%;
    right: var(--spacing);
    opacity: 0;
    z-index: 11;
    cursor: pointer;
    transition: color 0.3s, scale 0.3s, rotate 0.3s;
    animation: scrollMenuBtn linear forwards;
    animation-timeline: scroll(root);
    animation-range: 0 75vh;
    &:hover {
        color: var(--clr-accent);
        scale: 1 1.25;
    }
    &[aria-expanded='true'] {
        rotate: -90deg;
        scale: 0.9 1.25;
        color: var(--clr-600);
        transition: color 0.3s, scale 0.3s, rotate 0.75s;
        &:hover {
            color: var(--clr-accent);
            scale: 0.7 1.25;
            opacity: 1;
        }
        & svg {
            translate: 0 0.325rem;
            transition: all 0.75s;
        }
    }
}

.button-contact {
    background-color: var(--clr-primary);
    color: var(--clr-900);
    border-radius: calc(var(--radius) * .6);
    display: block;
    position: relative;
    text-decoration: none;
    padding: var(--spacing-l) 0;
    text-align: center;
    overflow: hidden;
    width: 10.5rem;
    transition: background-color 0.3s;
    animation: scrollContactBtn linear forwards;
    animation-timeline: scroll(root);
    animation-range: 0 75vh;
    & svg {
        height: 1.75rem;
        margin-left: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        translate: -50% -50%;
        animation: scrollContactBtnSVG linear forwards;
        animation-timeline: scroll(root);
        animation-range: 0 75vh;
    }
    &:hover {
        background-color: var(--clr-accent);
        & svg {
            animation: sendbtn 1.5s forwards, scrollContactBtnSVG linear forwards;
            animation-timeline: auto, scroll(root);
            animation-range: normal, 0 75vh;
        }
    }
    & span {
        white-space: nowrap;
        width: 100%;
        opacity: 0;
        height: 0;
        display: block;
        overflow: hidden;
        animation: scrollContactBtnSpan linear forwards;
        animation-timeline: scroll(root);
        animation-range: 0 75vh;
    }
}

/* Hero */
.hero {
    color: var(--clr-100);
    height: 100dvh;
    & .inner-hero {
        overflow: hidden;
        position: relative;
        min-height: calc(100% - 6rem);
        display: flex;
        flex-direction: column;
        justify-content: end;
        align-items: start;
        gap: var(--spacing-xl);
    }
    & .lien-descendre {
        display: block;
        text-decoration: none;
        color: var(--clr-900);
        width: 2.125rem;
        margin: calc(var(--spacing) * 2) auto;
        padding: var(--spacing) 0;
        transition: all 0.75s;
        &:hover {
            padding-top: calc(var(--spacing) * 2);
            padding-bottom: 0;
            color: var(--clr-accent);
        }
    }
    & .marquee {
        position: absolute;
        top: 0;
        left: 0;
    }
}

.content-hero {
    position: relative;
    padding: var(--spacing) var(--spacing) var(--spacing-l) var(--spacing-xl);
    filter: drop-shadow(0px 0px 1rem var(--clr-900));
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: start;
    gap: var(--spacing-xl);
    & h1 {
        max-width: 60%;
        animation-range: 0 50vh;
    }
    & .inner-content-hero {
        display: grid;
        align-items: start;
        grid-template-columns: 6fr 4fr;
        gap: 2.5rem;
        width: 100%;
    }
}

.media-hero {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    z-index: -1;
    & img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top center;
        transform-origin: bottom center;
        animation: heroScale linear forwards;
        animation-timeline: scroll(root);
        animation-range: 0 100vh;
    }
}

.switch-wrapper {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 0rem;
    line-height: 1;
    animation-range: 0 70vh;
    & .switch-list {
        list-style-type: none;
        height: 1lh;
        overflow: hidden;
        position: relative;
        padding-left: 2.5rem;
        color: var(--clr-300);
        margin-bottom: 0;
        &::before {
            content: '';
            background-color: var(--clr-secondary);
            border-radius: 50%;
            position: absolute;
            left: 0.125rem;
            top: 50%;
            translate: 100% -50%;
            width: 0.75rem;
            aspect-ratio: 1;
        }
        & li {
            position: relative;
            text-shadow: 0px 0px 2px var(--clr-900);
            animation: switch-anim 8s infinite;
            &:first-child {
                animation: switch-anim-first 8s infinite;
            }
        }
    }
}

.stats-hero {
    display: flex;
    gap: 4rem;
    align-items: start;
    list-style-type: none;
    animation-range: 0 70vh;
    & li {
        position: relative;
        &:not(:first-child) .stat-num::before {
            content: '';
            height: 100%;
            width: 1px;
            background-color: currentColor;
            position: absolute;
            top: 0;
            left: -2rem;
        }
    }
    & .stat-num {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        line-height: 1;
        margin-bottom: var(--spacing-l);
        gap: 0.5rem;
    }
}

.stat-value {
    font-size: 4rem;
    font-weight: var(--fw-bold);
    &.bigger {
        font-size: 5rem;
    }
}

.stat-value-det {
    width: 2rem;
}

.stat-unit {
    font-weight: var(--fw-bold);
    font-size: 2rem;
    width: 100%;
}

.stat-det {
    font-weight: var(--fw-bold);
    font-size: 1.125rem;
}

/* Marquee */
.marquee {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    color: currentColor;
    padding: var(--spacing-s) 0;
    & .marquee-content {
        display: inline-block;
        font-size: var(--fs-xs);
        text-transform: uppercase;
        animation: marquee 60s linear infinite;
        & .marquee-element {
            display: inline-flex;
            gap: 0.25rem;
            align-items: center;
            position: relative;
            padding-right: 4.5rem;
            transition: all 0.3s;
            &::after, & p::after {
                content: '';
                position: absolute;
                right: 0.45rem;
                width: 3.5rem;
                height: 1px;
                background-color: currentColor;
                top: 50%;
                translate: 0 -50%;
            }
            & .marquee-etoiles {
                display: grid;
                grid-template-columns: repeat(5, 1fr);
                width: 6.5rem;
                gap: 0.25rem;
                margin-right: 0.325rem;
            }
            & p {
                position: relative;
                padding-right: 4.5rem;
            }
            & a {
                color: currentColor;
                text-decoration: none;
                font-weight: var(--fw-bold);
                display: flex;
                gap: 0.5rem;
                align-items: center;
                &:hover {
                    & .icon {
                        background-color: currentColor;
                        & svg {
                            filter: invert(1);
                            animation: arrow45 2s 0.2s forwards;
                        }
                    }
                }
            }
            & .icon {
                border-radius: 50%;
                aspect-ratio: 1;
                border: 1px solid currentColor;
                padding: 0.45rem;
                width: 1.625rem;
                overflow: hidden;
                transition: all 0.2s;
            }
        }
    }
    &:hover .marquee-content {
        animation-play-state: paused;
    }
    &.bigger .marquee-content {
        font-size: 1.75rem;
        & .marquee-etoiles {
            width: 12rem;
            gap: 0.5rem;
        }
        & .marquee-element {
            gap: 0.5rem;
            padding-right: 6.5rem;
            & p {
                padding-right: 6.5rem;
            }
            &::after, & p::after {
                height: 2px;
                width: 5rem;
                right: 0.5rem;
            }
            & .icon {
                width: 3rem;
                padding: 1rem;
            }
            & a {
                gap: 0.825rem;
            }
        }
    }
}

/* Section grid */
.grid-inner {
    display: grid;
    gap: var(--spacing);
    grid-template-columns: repeat(4, 1fr);
    & > * {
        border-radius: var(--radius);
        overflow: clip;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: center;
    }
    & > a {
        text-decoration: none;
    }
    & .gs-1 {
        padding: var(--spacing-l) calc(var(--spacing-xl) / 2.25);
    }
    & .gs-2 {
        padding: var(--spacing-l) var(--spacing-xl);
        grid-column: span 2;
    }
    & .gs-3 {
        padding: var(--spacing-l) var(--spacing-xl);
        grid-column: span 3;
    }
    & .gs-4 {
        padding: var(--spacing-l) var(--spacing-xl);
        grid-column: span 4;
        &:has( .gs-inner-wicon) {
            aspect-ratio: 8/3;
        }
    }
    & .gs-100 {
        background-color: var(--clr-100);
    }
    & .gs-200 {
        background-color: var(--clr-200);
    }
    & .gs-300 {
        background-color: var(--clr-300);
    }
    & .gs-400 {
        background-color: var(--clr-400);
    }
    & .gs-500 {
        background-color: var(--clr-500);
    }
    & .gs-600 {
        background-color: var(--clr-600);
    }
    & .gs-700 {
        background-color: var(--clr-700);
        color: var(--clr-100);
    }
    & .gs-800 {
        background-color: var(--clr-800);
        color: var(--clr-100);
    }
    & .gs-900 {
        background-color: var(--clr-900);
        color: var(--clr-100);
    }
    & .gs-primary {
        background-color: var(--clr-primary);
    }
    & .gs-secondary {
        background-color: var(--clr-secondary);
    }
    & .gs-img {
        & > * {
            z-index: 2;
        }
        & .gs-bg-img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            z-index: 1;
        }
        & .gs-bg-img-sm {
            display: none;
        }
    }
    & .round-bg {
        overflow: visible;
        &::after {
            content: '';
            position: absolute;
            left: 50%;
            bottom: 2.5rem;
            width: 10.5rem;
            aspect-ratio: 1;
            border-radius: 50%;
            border: 0.625rem solid var(--clr-secondary);
            translate: -50% 0;
            z-index: -1;
            animation: roundbg linear both;
            animation-timeline: view();
            animation-range: entry 0% exit 100%;
        }
    }
    & .gs-stat {
        padding: calc(var(--spacing-l) * 4.5) var(--spacing-l);
        & .sub-title {
            font-size: calc(var(--fs-s) * 2.5);
            margin: var(--spacing) 0;
            & .bigger {
                display: block;
                font-size: calc(var(--fs-xl) * 1.5);
                font-weight: var(--fw-bold);
            }
        }
    }
    & .gs-flexend {
        justify-content: end;
        align-items: end;
        padding: var(--spacing-l);
    }
    & .open-video {
        border: 0;
        cursor: pointer;
    }
    & .video-vertical {
        aspect-ratio: 38/52;
    }
    & .play-btn {
        position: absolute;
        top: 50%;
        left: 50%;
        translate: -50% -50%;
        z-index: 3;
    }
    & .gs-post {
        justify-content: end;
        text-shadow: 0 0 .5rem var(--clr-800);
        &.gs-3, &.gs-4 {
            padding-right: 25%;
        }
        & .sub-title {
            margin-bottom: var(--spacing-l);
        }
    }
    & *:has( .bouton-gs) {
        align-items: end;
        justify-content: end;
        text-shadow: 0 0 .5rem var(--clr-800);
        padding: var(--spacing) var(--spacing) var(--spacing) calc(var(--spacing-xl) / 2.25);
    }
    & .gs-cta {
        aspect-ratio: 1;
        align-items: center;
        gap: 2.5rem;
        text-transform: uppercase;
        color: var(--clr-primary);
        text-align: center;
        font-size: calc(1.25 * var(--fs-s));
        font-weight: var(--fw-mid);
        transition: all .8s;
        & svg {
            width: 2.25rem;
        }
        &.gs-more-link:hover {
            background-color: var(--clr-700);
            color: var(--clr-accent);
            & svg {
                animation: morebtn 1.25s forwards;
            }
        }
        &.gs-contact-link {
            gap: 1.5rem;
            color: var(--clr-900);
            background-color: var(--clr-primary);
            &:hover {
                background-color: var(--clr-accent);
                & svg {
                    animation: sendbtn2 1.5s forwards;
                }
            }
        }
    }
    & .gs-inner-wicon {
        display: flex;
        justify-content: start;
        align-items: center;
        gap: calc(var(--spacing-l) * 2);
        &>svg {
            width: 12.5rem;
        }
    }
    .gs-sm-icon {
        justify-content: end;
        align-items: start;
        min-height: 30vw;
        &.gs-1 {
            min-height: 0;
        }
        & svg {
            max-width: 6.25rem;
            max-height: 5.25rem;
            margin-bottom: calc(var(--spacing-l) * 2);
        }
    }
    .gs-card-blog {
        padding: var(--spacing);
        flex-direction: row;
        align-items: center;
        justify-content: start;
        gap: calc(var(--spacing-l) * 2);
        & img {
            width: 25rem;
            border-radius: var(--radius);
            aspect-ratio: 4/3;
            object-fit: cover;
            object-position: center;
        }
    }
}

.play-btn {
    width: 4.25rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: var(--clr-100);
    color: var(--clr-primary);
    display: grid;
    place-items: center;
    cursor: pointer;
    filter: drop-shadow(0 0 1.5rem var(--clr-900));
    transition: all 0.3s;
    & svg {
        width: 0.75rem;
    }
    &:hover {
        scale: 1.1;
    }
}

/* bouton */
.bouton-gs {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    text-transform: uppercase;
    font-size: var(--fs);
    font-weight: var(--fw-body);
    text-decoration: none;
    color: currentColor;
    & .icon {
        border-radius: 50%;
        aspect-ratio: 1;
        border: 1px solid currentColor;
        padding: 1.25rem;
        width: 4rem;
        overflow: hidden;
        transition: all 0.2s;
        background-color: currentColor;
        & svg {
            filter: invert(1);
        }
    }
    &:hover {
        & .icon {
            background-color: transparent;
            & svg {
                filter: none;
                animation: arrow45 2s 0.2s forwards;
            }
        }
    }
}

.bouton {
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid currentColor;
    border-radius: 50vh;
    display: flex;
    align-items: center;
    gap: var(--spacing-l);
    overflow: hidden;
    padding: var(--spacing-s) var(--spacing-s) var(--spacing-s) 2.5rem;
    width: max-content;
    color: currentColor;
    text-transform: uppercase;
    font-size: var(--fs-s);
    font-weight: var(--fw-mid);
    position: relative;
    z-index: 4;
    min-width: fit-content;
    background-color: transparent;
    transition: background-color 0.5s;
    &.bouton-white {
        background-color: var(--clr-100);
        border-color: var(--clr-100);
        &:hover {
            animation: none;
        }
    }
    &.bouton-on-white {
        color: var(--clr-900) !important;
        border-color: var(--clr-900) !important;
        &:hover {
            color: var(--clr-900) !important;
            border-color: var(--clr-900) !important;
        }
    }
    &:hover {
        transition: background-color 0.5s 1.5s;
        background-color: var(--clr-primary);
        animation: buttonIconColor 2s forwards;
    }
    & .icon {
        width: 3.75rem;
        flex-shrink: 0;
        border-radius: 50%;
        background-color: var(--clr-primary);
        color: var(--clr-900);
        display: grid;
        place-items: center;
        aspect-ratio: 1;
        position: relative;
        z-index: -1;
        &::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            translate: -50% -50%;
            width: 90%;
            aspect-ratio: 1;
            background-color: var(--clr-primary);
            border-radius: 50%;
            z-index: -1;
        }
        & svg {
            width: 1.25rem;
        }
    }
    &:hover .icon::before {
        animation: buttonIconBefore 2s forwards;
    }
    &:hover .icon {
        animation: buttonIcon 2s forwards;
    }
    &.less-anim {
        font-size: var(--fs);
        &:hover {
            background-color: transparent;
            & .icon {
                animation: ring 1s infinite;
                &::before {
                    scale: 1.175;
                    animation: none;
                }
            }
        }
        & .icon::before {
            width: 100%;
            height: 100%;
            transition: all .6s;
        }
    }
    &.bouton-center {
        margin-left: auto;
        margin-right: auto;
    }
}

/* Témoignages */
.testimonials-inner {
    border: 1px solid var(--clr-900);
    border-radius: var(--radius);
    border-bottom: 0px;
    position: relative;
    text-align: center;
    & .testimonial-after {
        display: block;
        margin-top: var(--spacing-l);
        width: calc(100% + 2px);
        height: 7rem;
        border-top: 0;
        position: sticky;
        bottom: 0;
        left: 0;
        translate: -1px 0;
        z-index: 1;
        background: linear-gradient(0deg, var(--clr-100) 35%, transparent 100%);
        &::after {
            content: '';
            display: block;
            width: 100%;
            height: 6rem;
            border: 1px solid var(--clr-900);
            border-radius: 0 0 var(--radius) var(--radius);
            border-top: 0;
            position: absolute;
            bottom: var(--spacing);
            left: 0;
            z-index: 2;
        }
    }
    & .testimonial {
        padding: 6rem 0 0;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 62rem;
        max-width: 100%;
    }
    & .etoiles {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        width: 12rem;
        gap: 0.5rem;
        color: var(--clr-secondary);
        margin-bottom: 2.5rem;
    }
    & .guillemets {
        width: 1.325rem;
        &:has(+ .testimonial-content) {
            margin-top: 3rem;
        }
    }
    & .testimonial-content {
        font-size: 2.5rem;
        text-align: center;
        margin: var(--spacing) 0;
        letter-spacing: -1px;
    }
    & .testimonial-link {
        display: flex;
        align-items: center;
        gap: 1rem;
        text-transform: uppercase;
        font-size: var(--fs-s);
        color: var(--clr-900);
        text-decoration: none;
        font-weight: var(--fw-mid);
        margin-top: 2.5rem;
        transition: all 0.2s;
        &:hover {
            color: var(--clr-accent);
        }
        & svg {
            width: 4.5rem;
        }
    }
}

/* Spotlight */

@property --h-1 {
    syntax: '<number>';
    initial-value: 256.5;
    inherits: false;
}

@property --c-1 {
    syntax: '<number>';
    initial-value: 0.03;
    inherits: false;
}

@property --l-1 {
    syntax: '<number>';
    initial-value: 0.2;
    inherits: false;
}

.spotlight {
    margin-top: var(--spacing-xl);
    position: relative;
    clip-path: inset(0 0 0 0);
    color: var(--clr-100);
    & .spotlight-sticky {
        position: sticky;
        width: 100%;
        height: calc(100dvh - (var(--spacing) * 2));
        border-radius: var(--radius);
        outline: calc(var(--spacing) * 2) solid var(--clr-100);
        z-index: 9;
        top: var(--spacing);
        left: 0;
        margin-bottom: calc((100dvh - 2rem) * -1);
        pointer-events: none;
    }
    & .spotlight-inner {
        --space-side: calc(2 * var(--spacing-xl));
        overflow: clip;
        position: relative;
        background: linear-gradient(90deg, oklch(0.17 0 0) 0%, oklch(var(--l-1) var(--c-1) var(--h-1)) 40%, oklch(var(--l-1) var(--c-1) var(--h-1)) 70%, oklch(0.17 0 0) 100%);
        padding: var(--spacing-xl) var(--space-side) var(--spacing-l);
        animation: bggradient linear forwards;
        animation-timeline: view();
        animation-range: entry 0% exit 100%;
        & h2 {
            position: sticky;
            width: 100%;
            text-align: center;
            top: calc(var(--spacing-xl) + (var(--spacing-l) * 2));
            z-index: 9;
            animation: spotlightTitle linear forwards;
            animation-timeline: view();
            animation-range: entry 0% exit 100%;
        }
        &>.bouton {
            position: sticky;
            bottom: calc(var(--spacing-l) + var(--spacing));
            left: calc(100% - var(--spacing-l));
            translate: calc(-1 * var(--spacing-l) + var(--space-side)) 0;
        }
    }
    & .podium {
        position: sticky;
        bottom: 0;
        left: 0;
        width: 58.5%;
        filter: drop-shadow(0 10rem 10rem #13304b);
        transform-origin: bottom center;
        &::after {
            content: "";
            position: absolute;
            bottom: 0;
            translate: 0 100%;
            height: 22rem;
            background-color: black;
            width: 100%;
        }
        &.is-chrome {
            animation: podium linear forwards;
            animation-timeline: view();
            animation-range: entry 0% exit 100%;
            &::after {
                display: none;
            }
        }
    }
    & .spotlight-inner-wrap {
        height: 150dvh;
        display: grid;
        grid-template-columns: 65% 35%;
        align-items: center;
    }
    & .floaty {
        position: relative;
        width: 25.7%;
        left: 34%;
        filter: drop-shadow(0 2rem 6rem var(--clr-primary));
        z-index: 10;
        animation: wobble 8s linear infinite;
        &.is-chrome {
            margin-top: 0;
            animation: wobble 8s linear infinite, floaty linear both;
            animation-timeline: auto, view();
            animation-range: normal, entry 0% exit 100%;
            &::after {
                content: "";
                width: 50%;
                height: 40%;
                background-color: oklch(0.3004 0.0367 175.55);
                border-radius: 5rem;
                scale: 1.75 .65;
                filter: blur(14px);
                position: absolute;
                transform: skewX(10deg);
                bottom: -48.5%;
                left: 50%;
                opacity: 0;
                translate: -50% 0;
                animation: wobbleShadow 8s linear infinite, floatyShadow linear both;
                animation-timeline: auto, view();
                animation-range: normal, entry 0% exit 100%;
            }
        }
    }
    & .shadow {
        display: none;
        position: sticky;
        bottom: 31%;
        width: 40%;
        left: 25.5%;
        z-index: 10;
        opacity: 0;
        animation: stickyshadow linear both;
        animation-timeline: view();
        animation-range: cover 0% cover 100%;
    }
    .spotlight-content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: end;
        padding-bottom: 30rem;
        padding-top: 6rem;
        z-index: 11;
        position: sticky;
        top: 32%;
        animation: spotlightcontent linear both;
        animation-timeline: view();
        animation-range: entry 0% exit 100%;
        & h3 {
            padding-left: var(--spacing-l);
            margin-bottom: 2.5rem;
            position: relative;
            animation: fadeInLeft linear both;
            animation-timeline: view();
            animation-range: entry 0% exit 100%;
            &::before {
                content: "";
                width: 90%;
                height: 1px;
                background-color: currentColor;
                position: absolute;
                top: 50%;
                left: 0;
                translate: -100% -50%;
                animation: pointLine linear both;
                animation-timeline: view();
                animation-range: entry 0% exit 100%;
            }
            &::after {
                content: "";
                width: .65rem;
                height: .65rem;
                border-radius: 50%;
                background-color: currentColor;
                position: absolute;
                top: 50%;
                left: -100%;
                translate: -50% -50%;
                animation: scaleIn linear both;
                animation-timeline: view();
                animation-range: entry 0% exit 100%;
            }
        }
        & ul {
            padding-left: var(--spacing);
        }
        & li {
            font-size: var(--fs-s);
            margin-bottom: var(--spacing-l);
            padding-left: .5rem;
            animation: fadeInLeft linear both;
            animation-timeline: view();
            animation-range: entry 0% exit 100%;
        }
    }
}

.testimonials-slider-container {
    border: 1px solid var(--clr-900);
    background-color: var(--clr-100);
    text-align: center;
    & h2 {
        width: 100%;
    }
    & .testimonials-viewport {
        overflow: hidden;
        position: relative;
        width: 100%;
    }
    & .testimonials-slider {
        display: flex;
        gap: 0;
        align-items: stretch;
        margin-top: var(--spacing);
        transform: translateX(0);
        transition: transform 400ms ease;
        will-change: transform;
    }
    & .testimonials-slide {
        flex: 0 0 100%;
        & .tem-etoiles {
            color: var(--clr-secondary-darker);
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 0.25rem;
            & svg {
                width: 1.25rem;
            }
        }
        & .tem-author {
            font-size: var(--fs-l);
            font-weight: var(--fw-bold);
            margin: 0;
        }
        & .tem-titre-author {
            text-transform: uppercase;
            font-size: var(--fs-xs);
        }
        & .tem-content {
            font-size: var(--fs);
            max-height: 5lh;
            margin-top: var(--spacing);
            overflow: scroll;
            width: 100%;

            /* max-width: 44rem; */
            margin-left: auto;
            margin-right: auto;
            position: relative;
            padding: 0 .5rem;
        }
    }
    .testimonials-pager {
        display: flex;
        gap: .5rem;
        align-items: center;
    }
    .pager-element {
        width: 0.25rem;
        border-radius: 50%;
        aspect-ratio: 1;
        border: 0;
        background-color: var(--clr-900);
        font-size: 0;
        cursor: pointer;
        transition: all .4s;
        &:hover {
            background-color: var(--clr-accent);
        }
        &.actif {
            width: .5rem;
        }
    }
    .testimonials-controls {
        display: flex;
        gap: 2.5rem;
        align-items: center;
        justify-content: center;
        margin-top: 2rem;
        flex-wrap: wrap;
        width: 100%;
        &>button {
            color: var(--clr-900);
            width: 2rem;
            cursor: pointer;
            border: 1px solid var(--clr-900);
            background-color: transparent;
            border-radius: 50%;
            padding: 0.45rem;
            aspect-ratio: 1;
            transition: all .4s;
            &:hover {
                border-color: var(--clr-accent);
                background-color: var(--clr-accent);
                color: var(--clr-100);
            }
        }
    }
}

.top-link {
    position: fixed;
    bottom: calc(var(--spacing-xs) + var(--spacing));
    right: calc(var(--spacing-xs) + var(--spacing));
    border-radius: var(--radius);
    background-color: var(--clr-primary);
    color: var(--clr-900);
    width: 4.5rem;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    padding: 1.25rem;
    scale: 1 -1;
    opacity: 0;
    translate: 0 10rem;
    transition: all .6s;
    z-index: 999;
    &.show {
        opacity: 1;
        translate: 0 0rem;
    }
    & svg {
        transition: all .6s;
    }
    &:hover {
        background-color: var(--clr-accent);
        & svg {
            translate: 0 .5rem;
        }
    }
}

.table-list {
    list-style-type: none;
    border-top: 1px solid currentColor;
    counter-reset: list;
    margin-top: calc(var(--spacing-l) * 2);
    margin-bottom: calc(var(--spacing-l) * 2);
    & li {
        display: grid;
        grid-template-columns: 2.5rem 1fr 1fr;
        align-items: center;
        gap: 4rem;
        padding: var(--spacing-l) 0;
        border-bottom: 1px solid currentColor;
        &:before {
            content: "0"counter(list);
            counter-increment: list +1;
            font-size: 1.1rem;
        }
        &:has( span:first-child:last-child) {
            grid-template-columns: 2.5rem 1fr;
        }
    }
    & .text-caps {
        margin-bottom: 0;
    }
}

ul.table-list li::before {
    content: "•";
    font-size: var(--fs-l);
    line-height: 1;
}

.bouton-right {
    margin-left: auto;
}

hr.vertical {
    width: 1px;
    background-color: currentColor;
    border: 0;
    margin: var(--spacing-l) auto;
    height: 6rem;
    animation: hrVertical linear forwards;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
}

hr.hrsep {
    width: 6rem;
    background-color: currentColor;
    border: 0;
    margin: var(--spacing-l) 0;
    height: 1px;
    animation: hrsep linear forwards;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing);
    padding-top: calc(var(--spacing) * 2);
    padding-bottom: calc(var(--spacing) * 2);
}

.card-logo {

    /* background-color: var(--clr-200);
    border-radius: var(--radius);
    display: grid;
    place-items: center;
    padding: var(--spacing-l);
    aspect-ratio: 5/3; */
    & img {
        max-height: 5.5rem;
        max-width: 72.5%;
        margin-left: auto;
        margin-right: auto;
    }
}

.line-list {
    list-style-type: none;
    margin: calc(var(--spacing-l) * 3) 0;
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: calc(var(--spacing-l) * 2);
    & h3 {
        margin-bottom: var(--spacing-s);
    }
    & p {
        max-width: 55ch;
    }
    & + .bouton {
        --width: 8.5rem;
        margin-left: calc(var(--width) + var(--spacing-l));
    }
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing);
    counter-reset: cardnum;
    margin-top: var(--spacing-l);
    padding-top: calc(var(--spacing) * 2);
    padding-bottom: calc(var(--spacing) * 2);
}

.grid-clients {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--spacing);
    align-items: center;
    padding: calc(var(--spacing-l) * 2.5) var(--spacing-l) calc(var(--spacing) * 2);
}

.card-grid-3 {
    border-radius: var(--radius);
    padding: calc(var(--spacing-xl) / 2.25);
    & svg {
        width: 15.5rem;
        margin: var(--spacing-s) auto;
        color: var(--clr-primary);
    }
    &.bg-300 svg {
        color: var(--clr-primary-darker);
    }
    &.bg-700 {
        background-color: var(--clr-700);
        color: var(--clr-100);
        &::before {
            content: "0"counter(cardnum);
            counter-increment: cardnum +1;
            line-height: 1;
            display: block;
            font-size: 3rem;
            font-weight: 400;
        }
    }
    & h3 {
        margin-bottom: var(--spacing-xs);
    }
}

.services .card-grid-3 {
    display: flex;
    align-items: center;
}

.services .card-grid-3.bg-700::before {
    display: none;
}

.full-card {
    border-radius: var(--radius);
    position: relative;
    z-index: 7;
    padding-top: var(--spacing-xl);
    padding-bottom: var(--spacing-l);
    &.more-top {
        padding-top: calc(var(--spacing-xl) * 2);
    }
    &.more-bottom {
        padding-top: calc(var(--spacing-xl) * 2);
    }
    & +.full-card {
        z-index: 5;
        & +.full-card {
            z-index: 4;
            & +.full-card {
                z-index: 3;
                & +.full-card {
                    z-index: 2;
                    & +.full-card {
                        z-index: 1;
                    }
                }
            }
        }
    }
    &.full-card-reverse {
        &+.full-card-reverse {
            margin-top: calc(var(--spacing-l) * -3);
        }

        /* --fullcard: 1;
        transform: translateY(calc(-2rem * var(--fullcard)));
        z-index: 6;
        & +.full-card-reverse {
            --fullcard: 2;
            z-index: 5;
            & +.full-card-reverse {
                --fullcard: 3;
                z-index: 4;
                & +.full-card-reverse {
                    --fullcard: 4;
                    z-index: 3;
                    & +.full-card-reverse {
                        --fullcard: 5;
                        z-index: 2;
                        & +.full-card-reverse {
                            --fullcard: 6;
                            z-index: 1;
                        }
                    }
                }
            }
        } */
        ;
    }
    &.full-card-reverse {
        --fullcard: 0;
        border-radius: var(--radius);
        padding-top: 0;
        padding-bottom: 0;
        margin-top: var(--spacing-l);
        margin-bottom: calc(var(--spacing-l) * -1);
        & .inner-padding {
            padding-top: calc(var(--spacing-l) * 2);
            padding-bottom: calc(var(--spacing-l) * 2);
        }
    }
}

@supports (animation-timeline: view()) {
    .inOut {
        opacity: 0;
    }
    .full-card-container {
        position: relative;
    }
    .full-card+.full-card {
        animation: fullcardscroll linear both;
        animation-timeline: view();
        animation-range: entry 0% exit 100%;
        &.full-card-reverse {
            border-radius: var(--radius);
            animation: fullcardscrollreverse linear both;
            animation-timeline: view();
            animation-range: entry 0% exit 50%;
            &.full-card-sm-anim {
                transform: translateY(calc(-3rem * var(--fullcard)));
                animation: fullcardscrollreversesm linear both;
                animation-timeline: view();
                animation-range: entry 0% exit 100%;
            }
        }
    }
}

.comp-table {
    border: 0;
    border-radius: var(--radius);
    background-color: var(--clr-300);
    border-spacing: 0;
    overflow: hidden;
    margin: calc(var(--spacing-l) * 2) auto calc(var(--spacing-l) * 2);
    width: 62.5rem;
    max-width: 100%;
    & td, & th {
        padding: calc(var(--spacing) * 2);
        text-align: left;
        width: 40%;
        vertical-align: top;
        &:first-child {
            width: 20%;
        }
        &>span {
            display: block;
            margin-left: 3.5rem;
        }
    }
    & tr:nth-child(even) td {
        background-color: var(--clr-400);
    }
    & th {
        background-color: var(--clr-primary);
        & h3 {
            font-weight: var(--fw-mid);
            font-size: 2.75rem;
            display: flex;
            gap: 0.75rem;
            align-items: center;
            & svg {
                width: 2.75rem;
            }
        }
    }
}

.side-btn-cta {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-l);
    align-items: center;
    margin-top: var(--spacing-l);
    &.w-icon {
        padding: var(--spacing-xl) 0 var(--spacing-l);
    }
    & .cornerarrow {
        width: 3.5rem;
        align-self: start;
        flex-shrink: 0;
    }
}

.accordeon {
    border-top: 1px solid var(--clr-900);
    border-bottom: 1px solid var(--clr-900);
    padding-bottom: var(--spacing);
    &+.accordeon {
        border-top: 0;
    }
}

.accordeon-trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-l);
    cursor: pointer;
    overflow: clip;
    padding-top: var(--spacing);
    animation: heightIn linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
    transition: all .2s;
    &:hover {
        color: var(--clr-500);
    }
    &:hover .icon {
        color: var(--clr-accent);
    }
    & .icon {
        width: 1.5rem;
        aspect-ratio: 1;
        border-radius: 50%;
        border: 1px solid currentColor;
        display: grid;
        place-items: center;
        padding: .25rem;
        transition: all .2s;
    }
    &.open {
        padding-bottom: var(--spacing);
        & .icon {
            rotate: 180deg;
        }
        &+.accordeon-content {
            max-height: var(--content-height);
        }
    }
}

.accordeon-content {
    overflow: clip;
    max-height: 0;
    transition: all .5s;
}

.cal-wrapper {
    width: 26.5rem;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    translate: 0 calc(-1.5 * var(--spacing-xl));
    margin-bottom: calc(-1.5 * var(--spacing-xl));
    &.tidycal-wrapper {
        background-color: var(--clr-900);
        width: 90%;
        margin-bottom: calc(-1.5 * var(--spacing-xl));
        margin-top: 0;
    }
}

footer {
    margin-bottom: 0 !important;
    padding: calc(1.5 * var(--spacing-l)) !important;
    margin-top: var(--spacing-xl);
    & .footer-inner {
        display: flex;
        gap: var(--spacing-l);
        justify-content: start;
        align-items: end;
        & a {
            color: var(--clr-primary-darker);
        }
    }
    & .footer-infos {
        display: flex;
        flex-direction: column;
        gap: 0;
        & a {
            font-size: var(--fs);
            text-decoration: none;
            color: var(--clr-primary-darker);
            &:last-child {
                color: var(--clr-700);
            }
        }
        & .footerlogo {
            & svg {
                width: 7rem;
                margin-bottom: var(--spacing);
            }
            text-decoration: none;
            color: var(--clr-900);
            margin-bottom: var(--spacing-l);
        }
    }
}

.marquee-clients {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    margin-bottom: var(--spacing-xl);
}

.clients-content {
    display: inline-block;
    animation: marquee 45s linear infinite;
}

.client-element {
    display: inline-block;
    vertical-align: middle;
    width: 22vw;
    & img {
        max-height: 5.5rem;
        max-width: 72.5%;
        margin-left: auto;
        margin-right: auto;
    }
}

.popupvideo, .popupreal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: oklch(var(--primary-l) var(--primary-c) var(--primary-h) / .7);
    z-index: 9999;
    backdrop-filter: blur(4px);
    display: grid;
    place-items: center;
    translate: 0 calc(-35rem - 100%);
    transition: all 1.5s .4s;
    &::after {
        content: "";
        width: 100%;
        bottom: 0;
        left: 0;
        height: 30rem;
        position: absolute;
        translate: 0 100%;
        background: linear-gradient(180deg, oklch(var(--primary-l) var(--primary-c) var(--primary-h) / .7) 0%, transparent 100%);
    }
    &.open {
        translate: 0 0;
        transition: all 1.5s;
        & .popupclose {
            opacity: 1;
            transition: opacity .6s 1.5s, color .5s;
        }
    }
}

.popupclose {
    position: absolute;
    top: 0;
    right: 1rem;
    line-height: 1;
    font-size: var(--fs-xl);
    color: var(--clr-700);
    cursor: pointer;
    opacity: 0;
    transition: opacity .2s, color .5s;
    &:hover {
        color: var(--clr-accent);
    }
}

.popupcontent {
    background-color: var(--clr-100);
    border-radius: var(--radius);
    padding: var(--spacing-l);
    max-width: 90%;
    max-height: 90%;
    & video {
        display: block;
        max-width: calc(90dvw - var(--spacing-l) - var(--spacing-l));
        max-height: calc(90dvh - var(--spacing-l) - var(--spacing-l));
        border-radius: calc(var(--radius) * .6);
    }
}

.popupreal {
    & .popupcontent {
        max-height: none;
    }
}

.realsliderwrapper {
    position: relative;
    overflow: hidden;
    border-radius: calc(var(--radius) * .6);
}

.realslider {
    display: flex;
    gap: 0;
    align-items: stretch;
    transform: translateX(0);
    transition: transform 400ms ease;
    will-change: transform;
}

.realslide {
    position: relative;
    overflow: scroll;
    flex: 0 0 100%;
    aspect-ratio: 3456/1985;
    & img:first-child:not(:last-child) {
        position: sticky;
        top: 0;
        left: 0;
        width: 100%;
        translate: 0 -101%;
        transition: all .4s;
    }
    &.is-scrolled img:first-child:not(:last-child) {
        translate: 0 0%;
    }
    & img:nth-child(3) {
        position: sticky;
        bottom: .75rem;
        left: 0;
        width: 100%;
    }
}

.realcontrol {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    width: 2.75rem;
    color: var(--clr-700);
    background-color: var(--clr-primary);
    border-radius: 50%;
    padding: var(--spacing-xs);
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    transition: all .5s;
    left: var(--spacing);
    cursor: pointer;
    &:hover {
        background-color: var(--clr-accent);
    }
    &.next {
        left: auto;
        right: var(--spacing);
    }
}

.cal-wrapper {
    width: 55rem;
    background-color: var(--clr-700);
    color: var(--clr-100);
    border-radius: var(--radius);
    padding: var(--spacing-l);
    position: relative;
    margin-bottom: calc(-1.5 * var(--spacing-xl) + 5rem + var(--spacing-l));
    margin-top: var(--spacing);
    & form {
        display: grid;
        gap: var(--spacing-l);
        grid-template-columns: 2fr 3fr;
        text-align: left;
        &>div:nth-child(2) {
            display: flex;
            flex-direction: column;
            & textarea {
                flex: 1;
            }
        }
    }
    & input, & textarea {
        border: 1px solid var(--clr-500);
        border-radius: calc(var(--radius) * .6);
        background-color: transparent;
        color: var(--clr-100);
        padding: var(--spacing);
        display: block;
        width: 100%;
        margin-bottom: var(--spacing-l);
        &:focus {
            border-color: var(--clr-primary);
        }
        &:last-child {
            margin-bottom: 0;
        }
    }
    & textarea {
        margin-bottom: 0;
        resize: vertical;
    }
    & label {
        text-transform: uppercase;
        display: block;
        font-size: var(--fs-s);
        color: var(--clr-primary);
        margin-bottom: var(--spacing-xs);
        &:has(+:focus) {
            color: var(--clr-primary);
        }
    }
    & button {
        position: absolute;
        bottom: 0;
        left: 50%;
        translate: -50% calc(100% + (var(--spacing-l) * 1));
    }
}

.tel-cta {
    margin-top: calc(var(--spacing-l) * 2);
    margin-bottom: var(--spacing);
    &+.bouton {
        margin-left: auto;
        margin-right: auto;
    }
}

.txtpage {
    margin-top: 15rem;
    & p, & ul, & ol, & h3, & h1 {
        margin-bottom: var(--spacing);
    }
    & ul, & ol {
        padding-left: 1rem;
    }
    & h3 {
        font-size: var(--fs);
    }
}

.inner-nav {
    position: relative;
    padding-bottom: calc(var(--spacing-l) * 2);
    margin-bottom: calc(var(--spacing-l) * 2);
    margin-top: calc(var(--spacing-l) * 2);
    &::after {
        content: "";
        position: absolute;
        bottom: 0;
        height: 2px;
        width: 50%;
        left: 50%;
        translate: -50% 0;
        background-color: var(--clr-200);
    }
    & ul {
        display: flex;
        list-style-type: none;
        justify-content: center;
        & li {
            padding: 0 var(--spacing-s);
        }
        & a {
            text-decoration: none;
            background-color: var(--clr-200);
            display: block;
            border-radius: calc(var(--radius) * .6);
            padding: var(--spacing-s) var(--spacing);
            font-size: var(--fs-s);
            text-transform: uppercase;
            color: var(--clr-primary-darker);
            font-weight: var(--fw-mid);
            transition: all .6s;
            &:hover {
                background-color: var(--clr-primary);
                color: var(--clr-700);
            }
        }
    }
}

.note-google {
    text-align: center;
    color: var(--clr-500);
    font-weight: var(--fw-mid);
    font-size: var(--fs-s);
    width: 100%;
    text-decoration: none;
    &:hover {
        color: var(--clr-primary-darker);
    }
    & svg {
        color: var(--clr-secondary);
        display: inline-block;
        width: 1.125rem;
        vertical-align: middle;
        &.gicon {
            width: 2rem;
            margin-right: var(--spacing);
        }
    }
}

@supports not (animation-timeline: view()) {
    .outTop {
        animation: none;
    }
}

/* Responsive */

/* 1400 */

@media screen and (max-width: 87.5rem) {
    :root {
        --fs-xxl: 4rem;
        --fs-xl: 3rem;
        --fs-l: 1.625rem;
        --fs: 1.125rem;
        --fs-s: .9rem;
        --fs-xs: .8rem;
        --spacing-xs: .5rem;
        --spacing-s: .625rem;
        --spacing: 1rem;
        --spacing-l: 1.5rem;
        --spacing-xl: 4rem;
        --spacing-inner-wrap: var(--spacing-xl);
        --max-w-page: 150rem;
        --radius: 1.25rem;
    }
    .testimonials-inner {
        & .testimonial-content {
            font-size: var(--fs-l);
        }
    }
    .text-caps {
        font-size: var(--fs-l);
    }
    .side-btn-cta p {
        font-weight: var(--fw-mid);
        font-size: var(--spacing-l);
    }
    .grid-inner {
        & .gs-stat {
            & .sub-title {
                font-size: calc(var(--fs-s) * 2);
            }
        }
    }
}

/* 1280 */

@media screen and (max-width: 80rem) {
    :root {
        --fs-xxl: 4rem;
        --fs-xl: 3rem;
        --fs-l: 1.5rem;
        --fs: 1rem;
        --fs-s: .9rem;
        --fs-xs: .8rem;
        --spacing-xs: .325rem;
        --spacing-s: .5rem;
        --spacing: .75rem;
        --spacing-l: 1.25rem;
        --spacing-xl: 3rem;
        --spacing-inner-wrap: var(--spacing-xl);
        --max-w-page: 150rem;
        --radius: 1.25rem;
    }
    .main-header {
        animation: none;
        top: 3.5rem;
        width: 32rem;
        left: max(var(--spacing), calc(50% - 16rem));
        transition: top .5s;
        &.scrolled {
            top: var(--spacing-xs);
        }
    }
    .inner-header {
        animation: none;
        --bgc: var(--clr-200);
        background-color: var(--clr-200);
    }
    .logo-header {
        animation: none;
        width: 7.25rem;
    }
    .button-contact {
        animation: none;
        width: 5.375rem;
        & svg {
            animation: none;
            height: 1.75rem;
            translate: -50% -50%;
        }
        &:hover {
            & svg {
                animation: none;
                height: 1.75rem;
                translate: -50% -50%;
            }
        }
        & span {
            animation: none;
            opacity: 0;
            height: 0;
        }
    }
    #main-nav {
        animation: none;
        opacity: 0;
        translate: 0 -80%;
    }
    .menu-button {
        animation: none;
        pointer-events: all;
        visibility: visible;
        opacity: 1;
        translate: 0 -50%;
    }
    .stat-value {
        font-size: 3rem;
    }
    .stats-hero {
        gap: 2.5rem;
    }
    .stats-hero li:not(:first-child) .stat-num::before {
        left: -1.25rem;
    }
    .stat-det {
        font-size: var(--fs);
    }
    .switch-wrapper {
        flex-wrap: wrap;
        gap: var(--spacing-s);
    }
    .grid-inner {
        & .gs-2 {
            padding: var(--spacing-l) calc(var(--spacing-xl) / 1.5);
        }
        & .gs-3 {
            padding: var(--spacing-l) var(--spacing-l);
        }
        & .gs-4 {
            padding: var(--spacing-l) var(--spacing-xl);
            &:has( .gs-inner-wicon) {
                aspect-ratio: 8/3;
            }
        }
        .gs-card-blog {
            padding: var(--spacing);
            gap: var(--spacing-l);
        }
    }
    .testimonial-content {
        max-width: 50ch;
        margin-left: auto;
        margin-right: auto;
        line-height: 1.3;
    }
    .testimonials-inner .testimonial-link svg {
        width: 3rem;
    }
    .testimonials-inner .testimonial-after {
        height: 4rem;
        &::after {
            height: 3rem;
        }
    }
    .testimonials-inner .testimonial {
        padding-top: 3rem;
    }
    .bouton-gs .icon {
        width: 3rem;
        padding: 1rem;
    }
    .side-btn-cta {
        &.w-icon {
            padding: calc(var(--spacing-xl) * 2) 0 var(--spacing-l);
        }
    }
    .line-before::before, .line-list + .bouton {
        --width: 6.5rem;
    }
    .grid-3.clients {
        padding-left: 0;
        padding-right: 0;
    }
    .cal-wrapper {
        margin-bottom: calc(-1.5 * var(--spacing-xl) + 5.5rem + var(--spacing-l));
        & button {
            translate: -50% calc(100% + var(--spacing));
        }
    }
}

/* 1024 */

@media screen and (max-width: 64rem) {
    :root {
        --fs-l: 1.325rem;
        --fs-xl: 2.25rem;
        --spacing-inner-wrap: 2rem;
    }
    .content-hero .inner-content-hero {
        grid-template-columns: 1fr 1fr;
    }
    .grid-inner {
        grid-template-columns: repeat(3, 1fr);
        & .gs-sm-1 {
            grid-column: span 1;
        }
        & .gs-sm-2 {
            grid-column: span 2;
        }
        & .gs-sm-3 {
            grid-column: span 3;
            padding: var(--spacing-l) var(--spacing-l);
        }
        & .gs-stat {
            padding-top: var(--spacing-l);
            padding-bottom: var(--spacing-l);
        }
        & .gs-sm-3.gs-img {
            aspect-ratio: 10/4.5;
            min-height: 18rem;
        }
        & .gs-card-blog {
            & img {
                width: 16rem;
                aspect-ratio: 4/3.6;
            }
        }
        & .gs-sm-icon {
            & svg {
                max-width: 4.25rem;
                max-height: 3.25rem;
                margin-bottom: calc(var(--spacing) * 2);
            }
        }
        & .gs-inner-wicon {
            gap: var(--spacing-l);
            &>svg {
                width: 7.5rem;
            }
        }
    }
    .stat-value {
        &.bigger {
            font-size: 3rem;
        }
    }
    .sub-title {
        & img {
            width: 3rem;
        }
    }
    .card-grid-3 {
        margin-top: 0;
        & svg {
            width: 8rem;
            margin: 0 auto;
        }
        &.bg-700 {
            &::before {
                font-size: 2rem;
            }
        }
    }
    .comp-table {
        & th {
            & h3 {
                font-size: 1.75rem;
            }
        }
    }
    .spotlight {
        & .spotlight-sticky {
            display: none;
        }
        & .spotlight-inner {
            background: none;
            padding-left: 0;
            padding-right: 0;
            & h2 {
                color: var(--clr-700);
                animation: none;
                margin-bottom: var(--spacing-xl);
                position: relative;
                top: 0;
            }
            &>.bouton {
                position: relative;
                bottom: 0;
                left: 0;
                margin-left: auto;
                margin-right: auto;
                translate: 0;
            }
        }
        & .spotlight-element {
            background: linear-gradient(90deg, oklch(0.17 0 0) 0%, oklch(var(--l-1) var(--c-1) var(--h-1)) 40%, oklch(var(--l-1) var(--c-1) var(--h-1)) 70%, oklch(0.17 0 0) 100%);
            border-radius: var(--radius);
            overflow: clip;
            margin-bottom: var(--spacing);
        }
        & .spotlight-inner-wrap {
            height: auto;
            grid-template-columns: 1fr 1fr;
        }
        & .spotlight-content {
            padding: calc(var(--spacing-xl) * 3) 0 var(--spacing-xl);
            animation: none;
            padding-right: var(--spacing-xl);
            & h3 {
                &::before {
                    width: 55%;
                }
                &::after {
                    left: -55%;
                }
            }
        }
        & .spotlight-img {
            position: relative;
        }
        & .floaty {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 40%;
            translate: -50% -50%;
            animation: wobble 8s linear infinite;
            &::after {
                animation: wobbleShadow 8s linear infinite;
            }
        }
        & .shadow, & .podium {
            display: none !important;
            animation: none;
        }
    }
    .bouton.bouton-on-white-sm {
        color: var(--clr-900) !important;
        border-color: var(--clr-900) !important;
        &:hover {
            color: var(--clr-900) !important;
            border-color: var(--clr-900) !important;
        }
    }
    .stat-unit {
        font-size: 1.325rem;
    }
    .stats-hero {
        & li {
            max-width: 9.375rem;
        }
    }
    .popupcontent {
        max-width: 98%;
    }
    .realcontrol {
        width: 2rem;
        padding: var(--spacing-s);
    }
    .full-card {
        &.more-top {
            padding-top: calc(var(--spacing-xl) * 2.75);
        }
    }
    .testimonials-slider-container {
        & .testimonials-slide {
            & .tem-content {
                max-height: 3lh;
            }
        }
        & .testimonials-controls {
            margin-top: 1rem;
        }
    }
}

/* 800 */

@media screen and (max-width: 50rem) {
    .hero {
        margin-bottom: calc(var(--spacing-xl) * 2);
        & .inner-hero {
            min-height: calc(100% - 3rem);
        }
        & .lien-descendre {
            margin: var(--spacing) auto;
        }
    }
    .grid-inner {
        & .round-bg {
            &::after {
                bottom: 0;
            }
        }
        & .gs-img {
            & > * {
                z-index: 2;
            }
            & .gs-bg-img:has( + .gs-bg-img-sm) {
                display: none;
            }
            & .gs-bg-img-sm {
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center;
                z-index: 1;
            }
        }
    }
    .line-before {
        &::before {
            --width: 6rem;
            margin-top: var(--spacing);
        }
    }
    .line-list + .bouton {
        --width: 6rem;
    }
    #forfaits {
        margin-top: calc(var(--spacing-xl) * 2);
    }
    .table-list {
        & li {
            gap: 1.25rem;
            grid-template-columns: 1.5rem 1fr 1fr;
            &:has( span:first-child:last-child) {
                grid-template-columns: 1.5rem 1fr;
            }
        }
    }
    .comp-table {
        & td, & th {
            padding: var(--spacing-l);
            width: 42.5%;
            &:first-child {
                width: 15%;
            }
        }
        & th {
            & h3 {
                font-size: 1.5rem;
                gap: .5rem;
                & svg {
                    width: 1.85rem;
                }
            }
        }
        & .text-caps {
            font-size: var(--fs);
        }
    }
    .comp-table {
        & td, & th {
            &>span {
                margin-left: 2.35rem;
            }
        }
    }
    .side-btn-cta {
        flex-wrap: wrap;
        & .cornerarrow+div {
            width: calc(100% - 3.5rem - var(--spacing-l));
        }
    }
    .footerlogo {
        width: 9rem;
    }
    .copy {
        font-size: var(--fs-s);
    }
    .stat-unit {
        font-size: var(--fs);
    }
    .stats-hero {
        & li {
            max-width: none;
            &+ li {
                min-width: 9.5rem;
            }
        }
    }
    .cal-wrapper {
        padding: var(--spacing-xl);
        & input, & textarea {
            padding: var(--spacing-l);
        }
        & button {
            translate: -50% calc(100% + var(--spacing-l));
        }
        & form {
            grid-template-columns: 1fr;
        }
    }
    .full-card {
        &.more-top {
            padding-top: calc(var(--spacing-xl) * 3);
        }
    }
    .side-btn-cta {
        &.w-icon {
            padding: calc(var(--spacing-xl) * 2.5) 0 var(--spacing-l);
        }
    }
    .testimonials-slider-container {
        & .testimonials-slide {
            & .tem-content {
                max-height: none;
                overflow: visible;
            }
        }
        & .testimonials-controls {
        }
    }
}

/* 704 */

@media screen and (max-width: 44rem) {
    :root {
        --spacing-xs: .125rem;
        --spacing-s: .25rem;
        --spacing: .325rem;
        --spacing-l: .75rem;
        --spacing-xl: 2rem;
        --radius: .6rem;
        --fs-l: 1.25rem;
        --fs-xl: 1.9rem;
        --spacing-inner-wrap: .5rem;
    }
    .footerlogo {
        width: 100%;
    }
    footer .footer-inner {
        flex-direction: column;
        justify-content: start;
        align-items: start;
    }
    .marquee {
        padding: var(--spacing-l) 0;
    }
    .main-header {
        top: var(--spacing);
        width: calc(100% - (var(--spacing) * 2));
        left: var(--spacing);
        gap: var(--spacing);
        &.scrolled {
            top: var(--spacing);
        }
    }
    .inner-header {
        padding: var(--spacing);
        border-radius: var(--radius);
    }
    .logo-header {
        width: 5.5rem;
    }
    .menu-button {
        margin-right: var(--spacing-l);
    }
    .button-contact {
        width: 4rem;
        border-radius: var(--radius);
        & svg {
            width: 1.5rem;
        }
    }
    .hero {
        margin-top: calc(4rem + var(--spacing));
        height: auto;
        text-align: center;
        & .inner-hero {
            min-height: 0;
            padding-top: calc(var(--spacing-xl) * 4.5);
            & h1 {
                max-width: 95%;
                margin-left: auto;
                margin-right: auto;
                line-height: 1;
                & br {
                    display: none;
                }
            }
        }
    }
    .switch-wrapper {
        text-align: center;
        align-items: center;
        justify-content: center;
        & .switch-list {
            color: var(--clr-300);
            font-size: var(--fs-xl);
            text-align: left;
        }
    }
    .content-hero {
        padding: 0 var(--spacing) var(--spacing-xl) var(--spacing-l);
        & .inner-content-hero {
            gap: var(--spacing-l);
            grid-template-columns: 1fr;
        }
    }
    .marquee {
        & .marquee-content {
            font-size: var(--fs-s);
            animation: marquee 40s linear infinite;
        }
    }
    .media-hero {
        background-color: var(--clr-700);
        & img {
            animation: none;
            filter: blur(3px);
            opacity: 0.8;
        }
    }
    .stats-hero {
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
        gap: 1.5rem;
        margin-top: var(--spacing-xl);
        text-align: left;
        & li {
            width: 8.5rem;
            min-width: 0 !important;
        }
        & .stat-num {
            gap: 0 .325rem;
        }
    }
    .stat-value {
        font-size: var(--fs-xl);
    }
    .stat-value-det {
        width: 1.25rem;
    }
    .stat-unit {
        font-size: var(--fs-l);
    }
    .stat-det {
        font-size: var(--fs-s);
        font-weight: var(--fw-body);
    }
    .hero {
        margin-bottom: var(--spacing-xl);
        & .lien-descendre {
            margin: var(--spacing-xl) auto;
        }
    }
    .grid-inner {
        grid-template-columns: 1fr;
        & .gs-sm-1, & .gs-sm-2, & .gs-sm-3 {
            grid-column: span 1;
            padding: var(--spacing-xl) var(--spacing-l);
        }
        & .gs-sm-3.gs-img {
            aspect-ratio: unset;
        }
    }
    .bouton {
        padding: var(--spacing-s) var(--spacing-s) var(--spacing-s) 1.5rem;
        & .icon {
            width: 2.75rem;
            & svg {
                width: 1rem;
            }
        }
    }
    .grid-inner {
        & .stats-hero {
            width: 100%;
            max-width: 100%;
            margin: 0;
            & li {
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: end;
                gap: var(--spacing-l);
            }
            & .stat-num, & .stat-det {
                margin-bottom: 0;
                line-height: 1;
            }
            & .stat-det:last-child {
                margin-left: auto;
            }
        }
        & a.gs-img:has( .bouton-gs) {
            padding: var(--spacing-l);
        }
        & .gs-cta {
            aspect-ratio: unset;
            padding: calc(var(--spacing-xl) * 1.75) 0;
        }
        & .gs-inner-wicon {
            flex-direction: column;
            align-items: start;
            &>svg {
                width: 3.5rem;
            }
        }
        & .gs-card-blog {
            flex-direction: column;
            padding: var(--spacing);
            align-items: start;
            & img {
                aspect-ratio: unset;
                width: 100%;
            }
            & div {
                padding: var(--spacing-l);
            }
            & br {
                display: none;
            }
        }
    }
    .grid-4, .grid-3 {
        grid-template-columns: 1fr 1fr;
    }
    .card-grid-3 {
        & svg {
            width: 7rem;
        }
    }
    .line-before {
        &::before {
            --width: 4.5rem;
            margin-top: var(--spacing-l);
        }
    }
    .line-list + .bouton {
        margin-left: auto;
    }
    .testimonials-inner {
        & .etoiles {
            width: 7rem;
            gap: var(--spacing-xs);
            margin-bottom: var(--spacing-l);
        }
        & .guillemets {
            width: 1rem;
            &:has(+ .testimonial-content) {
                margin-top: var(--spacing-l);
            }
        }
        & .testimonial-content {
            max-width: calc(100% - var(--spacing-xl));
            margin-left: auto;
            margin-right: auto;
        }
        & .testimonial-link {
            margin-top: var(--spacing-xl);
        }
        & .testimonial-link svg {
            width: 2rem;
        }
    }
    .text-big {
        font-weight: var(--fw-mid);
    }
    .spotlight {
        & .spotlight-inner-wrap {
            grid-template-columns: 1fr;
            padding-top: calc(var(--spacing-xl) * 2);
        }
        & .spotlight-content {
            padding: calc(var(--spacing-xl) * 2) var(--spacing-xl) var(--spacing-xl);
            & h3 {
                &::before, &::after {
                    display: none;
                }
            }
        }
        & .floaty {
            position: relative;
            margin-left: auto;
            margin-right: auto;
            top: 0;
            left: 0;
            translate: 0;
        }
        & .spotlight-inner {
            &>.bouton {
                margin-top: var(--spacing-xl);
            }
        }
    }
    .note-google {
        margin-top: 1rem;
        margin-bottom: 1rem;
    }
    .testimonials-slider-container {
        overflow: hidden;
        & .testimonials-slide {
            & .tem-content {
                max-height: 11lh;
                overflow: auto;
            }
        }
    }
    .table-list {
        & li {
            gap: 1rem;
            grid-template-columns: 1rem 1fr 1fr;
            &:before {
                font-size: var(--fs-xs);
            }
        }
    }
    .full-card {
        padding-top: calc(var(--spacing-xl) * 2);
    }
    div:has( > table) {
        width: 100%;
        overflow: scroll;
    }
    .comp-table {
        width: 100%;
        & td, & th {
            width: auto;
            &:first-child {
                width: 8.5rem;
            }
        }
    }
    .side-btn-cta p {
        font-weight: var(--fw-mid);
        font-size: var(--fs);
    }
    .accordeon-trigger {
        padding-top: var(--spacing-l);
        animation: none;
    }
    .accordeon {
        padding-bottom: var(--spacing-l);
    }
    .full-card + .full-card {
        &.full-card-reverse {
            animation: none;
            &.full-card-sm-anim {
                animation: none;
                & .inner-padding {
                    padding-top: calc(var(--spacing-l) * 3);
                }
            }
        }
    }
    .top-link {
        width: 2.5rem;
        padding: .75rem;
    }
    .grid-inner {
        & .gs-stat {
            & .sub-title {
                font-size: var(--fs-l);
            }
        }
    }
    .rmsm {
        display: none !important;
    }
    div:has( > table) {
        margin-bottom: var(--spacing-l);
    }
    .grid-clients {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-xl);
    }
    .card-logo {
        & img {
            max-height: 4rem;
        }
    }
    hr.vertical {
        height: 3rem;
        animation: none;
    }
    .client-element {
        width: 30vw;
    }
    .txtpage {
        margin-top: 10rem;
    }
    .inner-nav {
        padding-bottom: var(--spacing-xl);
        margin-bottom: var(--spacing-xl);
        margin-top: var(--spacing-xl);
        & ul {
            margin-top: var(--spacing-l);
        }
    }
    .gs-inner {
        text-shadow: 0 0 3px var(--clr-900);
    }
    .cal-wrapper {
        max-width: 100%;
        padding: var(--spacing-l);
        &.tidycal-wrapper {
            width: 100%;
            padding: var(--spacing-s);
        }
    }
    .voirsitesm {
        display: block;
        width: 100%;
        color: var(--clr-primary);
        text-transform: uppercase;
        font-size: var(--fs-s);
    }
    .gs-img:has( .voirsitesm) {
        min-height: 9rem;
    }
}

/* 408 */

@media screen and (max-width: 25.5rem) {
    .table-list {
        & li {
            display: flex;
            flex-wrap: wrap;
            gap: 0 .75rem;
            & span+span {
                width: 100%;
            }
            & .text-caps {
                font-size: var(--fs);
            }
        }
    }
    .grid-3 {
        grid-template-columns: 1fr;
    }
    .line-before {
        &::before {
            --width: 2rem;
        }
    }
    .line-list + .bouton {
        --width: 2rem;
    }
}

/* 368 */

@media screen and (max-width: 23rem) {
    .inner-nav ul {
        flex-direction: column;
        gap: .325rem;
    }
}