:root {
    --color-midnight: #05141F;
    --color-white: #FFFFFF;
    --color-gray: #D9D9D9;
    --color-black: #000000;
    --color-gray-light: #F4F5F5;
    --color-gray-light-2: #f5f5f5;
    --color-border: #e2e2e2;
    --track: #D9D9D9;
    --fs-36: 2.25rem;
    --fs-28: 1.75rem;
    --fs-26: 1.625rem;
    --fs-20: 1.25rem;
    --fs-18: 1.125rem;
    --fs-16: 1rem;
    --fs-14: 0.875rem;
    --fs-12: 0.75rem;
    --fs-10: 0.625rem;
    --fs-8: 0.5rem;
    --fs-6: 0.375rem;
    --fs-4: 0.25rem;
    --ff-kiab: kiab, sans-serif;
    --ff-kiam: kiam, sans-serif;
    --ff-kial: kial, sans-serif;


    --radius-3: 3px;

    --space-2: 0.5rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-14: 3.5rem;
    --space-16: 4rem;
    --space-18: 4.5rem;
    --space-20: 5rem;
    --space-22: 5.5rem;
    --space-24: 6rem;
    --space-26: 6.5rem;
    --space-28: 7rem;
    --space-30: 7.5rem;


    --slides-count: 3;
}




.container,
.container * {
    box-sizing: border-box;
}

.container>* {
    margin: 0;
    padding: 0;
    font-size: var(--fs-16);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
}

.bg--dark {
    background-color: var(--color-midnight);
    color: var(--color-white);
}

.bg--black {
    background-color: var(--color-black);
    color: var(--color-white);
}

.bg--light {
    background-color: var(--color-white);
    color: var(--color-midnight);
}

.bg--gray-light-2 {
    background-color: var(--color-gray-light-2);
}




.p-2 {
    padding: 2rem;
}

.d-block {
    display: block;
}

.fs-18 {
    font-size: var(--fs-18);
}

.mt-0-5 {
    margin-top: 0.5rem;
}


/*Titles*/

.title--1 {
    font-size: var(--fs-36);
    line-height: 1.1;
    margin-bottom: var(--fs-4);
}

.title--2 {
    font-size: var(--fs-28);
    line-height: normal;
    text-align: center;
    margin-bottom: clamp(2.5rem, 5vw, 5rem);
}

h2.title--1:has(+ h3),
h2.title--2:has(+ h3) {
    margin-bottom: 1.5rem;
    text-align: center;
}

h2.title--1+h3,
h2.title--2+h3 {
    margin-bottom: 2.5rem;
    font-family: var(--ff-kiam);
    text-align: center;
}

.title--3 {
    font-size: var(--fs-18);
}


/*Alignments*/
.text-center {
    text-align: center;
}

/* Widths */
.w-20ch {
    width: min(100%, 20ch);
    margin-inline: auto;
}

.w-1440 {
    width: min(100%, 1440px);
    margin-inline: auto;
}

.w-1200 {
    width: min(100%, 1200px);
    margin-inline: auto;
}

.w-1 .w-1024 {
    width: min(100%, 1024px);
    margin-inline: auto;
}

.w-1312 {
    width: min(100%, 1312px);
    margin-inline: auto;
}

.w-1000 {
    width: min(100%, 1000px);
    margin-inline: auto;
}

.w-980 {
    width: min(100%, 980px);
    margin-inline: auto;
}

.w-800 {
    width: min(100%, 800px);
    margin-inline: auto;
}


.w-720 {
    width: min(100%, 720px);
    margin-inline: auto;
}

.w-600 {
    width: min(100%, 600px);
    margin-inline: auto;
}


img {
    max-width: 100%;
    height: auto;
    display: block;
}


/* animations */
/* État initial — éléments invisibles avant scroll */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* État final — ajouté par JS au scroll */
.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger — décalage progressif des enfants animés (opt-in via data-stagger) */
[data-stagger] {
    --stagger-delay: 0.1s;
}

[data-stagger="fast"] {
    --stagger-delay: 0.05s;
}

[data-stagger="slow"] {
    --stagger-delay: 0.15s;
}

[data-stagger]>.animate-on-scroll:nth-child(1) {
    transition-delay: calc(var(--stagger-delay) * 0);
}

[data-stagger]>.animate-on-scroll:nth-child(2) {
    transition-delay: calc(var(--stagger-delay) * 1);
}

[data-stagger]>.animate-on-scroll:nth-child(3) {
    transition-delay: calc(var(--stagger-delay) * 2);
}

[data-stagger]>.animate-on-scroll:nth-child(4) {
    transition-delay: calc(var(--stagger-delay) * 3);
}

[data-stagger]>.animate-on-scroll:nth-child(5) {
    transition-delay: calc(var(--stagger-delay) * 4);
}

[data-stagger]>.animate-on-scroll:nth-child(6) {
    transition-delay: calc(var(--stagger-delay) * 5);
}

[data-stagger]>.animate-on-scroll:nth-child(7) {
    transition-delay: calc(var(--stagger-delay) * 6);
}

[data-stagger]>.animate-on-scroll:nth-child(8) {
    transition-delay: calc(var(--stagger-delay) * 7);
}

[data-stagger]>.animate-on-scroll:nth-child(9) {
    transition-delay: calc(var(--stagger-delay) * 8);
}

[data-stagger]>.animate-on-scroll:nth-child(10) {
    transition-delay: calc(var(--stagger-delay) * 9);
}

[data-stagger]>.animate-on-scroll:nth-child(11) {
    transition-delay: calc(var(--stagger-delay) * 10);
}

[data-stagger]>.animate-on-scroll:nth-child(12) {
    transition-delay: calc(var(--stagger-delay) * 11);
}

/* Accessibilité */
@media (prefers-reduced-motion: reduce) {
    .animate-on-scroll {
        opacity: 1;
        transform: none;
        transition: none;
    }

    [data-stagger]>.animate-on-scroll {
        transition-delay: 0s;
    }
}





/* Flex */
.d-flex {
    display: flex;
    flex-wrap: wrap;
}

.d-flex>* {
    flex: 1;
}

.flex-basis-0 {
    flex-basis: 0;
}



/* Cols — responsive flex columns via data-cols */
.cols-list {
    --cols: 2;
    --cols-gap: 2rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: var(--cols-gap);
}

.cols-list>* {
    flex: 0 1 calc((100% - (var(--cols) - 1) * var(--cols-gap)) / var(--cols));
    max-width: calc((100% - (var(--cols) - 1) * var(--cols-gap)) / var(--cols));
}

.cols-list[data-cols="2"],
.cols-list[data-cols="3"],
.cols-list[data-cols="4"] {
    --cols: 1;
}

@media (min-width: 576px) and (max-width: 1024px) {

    .cols-list[data-cols="1"],
    .cols-list[data-cols="2"],
    .cols-list[data-cols="3"],
    .cols-list[data-cols="4"] {
        --cols: 2;
    }
}

@media (min-width: 1024px) {
    .cols-list[data-cols="1"] {
        --cols: 1;
    }

    .cols-list[data-cols="2"] {
        --cols: 2;
    }

    .cols-list[data-cols="3"] {
        --cols: 3;
    }

    .cols-list[data-cols="4"] {
        --cols: 4;
    }
}

@media (min-width: 576px) and (max-width: 1024px) {
    .cols-list[data-stretch-last]> :nth-child(2n+1):last-child {
        flex: 0 0 100%;
        max-width: 100%;
    }
}




section.section {
    padding: 5rem 2rem;
    isolation: isolate;
}