@font-face {
    font-family: "Ketchupa";
    src: local("Ketchupa-Regular"), url("../../fonts/Ketchupa-Regular-8a73f422d7a73e4706ac981c512a6cdd.ttf")
}

html,
body {
    overflow-x: hidden;
    /* Désactive le scroll horizontal */
    max-width: 100vw;
    /* Empêche le débordement */
}

:root {
    font-size: 16px;
    /* ===========================
     COULEURS
     =========================== */
    --color-primary: var(--darkBlue);
    --color-secondary: var(--yellow);
    /* --color-tertiary: var(--blueSky); */
    --color-tertiary: rgb(229, 243, 251);
    --color-bg: var(--blueSky);
    --color-text: var(--darkBlue);
    --color-quaternary: rgb(178, 214, 242);
    --color-quinary: rgb(191, 225, 245);

    --blueSky: rgb(228, 237, 244);
    --blue: rgb(178, 214, 242);
    --darkBlue: rgb(1, 57, 119);
    --blueMinusl: rgb(0, 134, 214);
    --red: rgb(230, 45, 33);
    --redMinusl: rgb(218, 41, 28);
    --yellow: rgb(253, 211, 46);
    --yellowMinusl: rgb(255, 230, 105);
    --white: rgb(255, 255, 255);
    --black: rgb(0, 0, 0);


    --overlay-white: hsla(0, 0%, 100%, .92);
    --grey: hsla(0, 0%, 50%, 1);

    --font-primary: "Ketchupa", sans-serif;
    --font-secondary: "Lato Regular", sans-serif;

    /* ===========================
     TAILLES DE POLICE (MOBILE)
     =========================== */
    /* H0, H1, H2, H3, H3(Caps), H4(Caps), Small text, etc. */
    --fs-h1: 4rem;
    --fs-h2: 3rem;
    --fs-h2-paragraph: 1.5rem;
    --fs-h3: 1.5rem;
    --fs-h4: 1.5rem;
    --fs-h3-caps: 1.5rem;
    --fs-h4-caps: 1.25rem;

    /* Deux tailles de texte (14 / 18)*/
    --fs-extra-small-text-body: .625rem;
    --fs-small-text-body: .875rem;
    --fs-small-text-deco: 1.125rem;

    --line-height-sm: 1.25rem;
    --line-height-md: 1.625rem;

    /* FONT WEIGHT */
    --font-weight-sm: 400;
    --font-weight-md: 500;
    --font-weight-lg: 600;
    --font-weight-xl: 800;

    /* ===========================
     SPACING (margins / paddings)
     =========================== */
    --spacing-xs: .25rem;
    --spacing-sm: .5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;

    --padding-xs: .31rem;
    --padding-sm: .62rem;
    --padding-md: .93rem;
    --padding-lg: 1.25rem;
    --padding-xl: 1.56rem;
    --padding-2xl: 3.12rem;
    --padding-3xl: 4rem;
    --padding-4xl: 5rem;

    --padding-section: 6rem;
    --padding-section-xl: 6.25rem;
    --padding-section-2xl: 7.8rem;
    --padding-section-3xl: 10rem;
    --padding-section-4xl: 15rem;

    --min-height-header: 4.37rem;
    --min-height-header-desktop: 3.75rem;
    --dropdown-arrow-background-blue: url("data:image/svg+xml,%3Csvg width='22' height='13' viewBox='0 0 22 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.00024 1.59839L10.7993 11.3975L20.5984 1.59839' stroke='%23214C9F' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E%0A");
}



/* Media queries pour tablette, desktop, etc. */
@media (min-width: 768px) {
    :root {
        --fs-h1: 5.93rem;
        --fs-h2: 4.375rem;
        --fs-h2-paragraph: 1.625rem;
        --fs-h3: 2.25rem;
        --fs-h4: 2.25rem;
        --fs-h3-caps: 2.25rem;
        --fs-h4-caps: 1.875rem;

        --fs-extra-small-text-body: .75rem;
        --fs-small-text-body: 1rem;
        --fs-small-text-deco: 1.375rem;
    }
}

@media (min-width: 1024px) {
    :root {
        --fs-h1: 6.75rem;
        --fs-h2: 5.75rem;
        --fs-h4: 3.375rem;
        --fs-h3: 3.375rem;
        --fs-h3-caps: 3.375rem;
        --fs-h4-caps: 2rem;

        --fs-extra-small-text-body: .875rem;
        --fs-small-text-body: 1.125rem;
        --fs-small-text-deco: 1.375rem;

        --line-height-sm: 2rem;
    }
}

@media (min-width: 1680px) {
    :root {
        /* font-size: 20px; */

        --line-height-sm: 2rem;
    }
}

/* STYLEGUIDE */
body {
    margin: 0;
    color: var(--color-primary);
    font-size: var(--fs-small-text-body);
    font-weight: var(--font-weight-sm);
    font-family: var(--font-secondary);
    line-height: var(--line-height-md);
}

.font-primary {
    font-family: var(--font-primary);
}

/* HEADING */
h1 {
    color: var(--color-primary);
    font-family: var(--font-primary);
    font-size: var(--fs-h1);
    margin-bottom: var(--spacing-lg);
    line-height: var(--fs-h1);
    font-weight: var(--font-weight-md);
}

h2 {
    color: var(--color-primary);
    font-family: var(--font-primary);
    font-size: var(--fs-h2);
    margin-bottom: var(--spacing-lg);
    line-height: var(--fs-h2);
    font-weight: var(--font-weight-md);
}

h3 {
    color: var(--color-primary);
    font-family: var(--font-primary);
    font-size: var(--fs-h3);
    margin-bottom: var(--spacing-md);
    line-height: var(--fs-h3);
    font-weight: var(--font-weight-md);
}

h4 {
    color: var(--color-primary);
    font-family: var(--font-primary);
    font-size: var(--fs-h4);
    margin-bottom: var(--spacing-sm);
    line-height: var(--fs-h4);
    font-weight: var(--font-weight-sm);
}

/* END HEADING */

/* BG AND TEXT COLOR */
.bg-primary {
    background-color: var(--color-primary);
}

.bg-primaryMinusl {
    /* REMPLACEMENT DU BLEU FIGMA PAR LE BLEU MINUSL */
    background-color: var(--blueMinusl);
}

.bg-secondary {
    /* REMPLACEMENT DU JAUNE FIGMA PAR LE JAUNE MINUSL */
    background-color: var(--yellowMinusl);
}

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

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

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

.bg-red {
    background-color: var(--redMinusl);
}

.text-white {
    color: var(--white);
}

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

.text-secondary {
    color: var(--color-secondary);
}

.text-tertiary {
    color: var(--color-tertiary);
}

/* BG AND TEXT COLOR */

/* TEXT-ALIGN AND BLOCK ALIGN */
.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-left {
    text-align: left;
}

.align-items-center {
    align-items: center;
    flex-direction: row;
    display: flex;
}

.justify-content-center {
    align-content: center;
}

/* END TEXT-ALIGN AND BLOCK ALIGN */

/* BTN STYLING */

/* Classe de base commune à tous les boutons */
.cta {
    font-size: 1.5rem;
    line-height: 150%;
    display: inline-block;
    padding-block: 0.75rem;
    padding-inline: 1.938rem;
    margin: var(--spacing-md);
    border-radius: 35px;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    text-decoration: none;
    /* au cas où ce soit un <a> */
    /* font-weight: var(--font-weight-sm); dans defaults.css body */
    text-transform: uppercase;
    font-weight: var(--font-weight-md);
    font-family: var(--font-primary);
}

@media (min-width: 768px) {
    .cta {
        font-size: 1.625rem;
    }
}

/* 1) Fond primary, texte blanc */
.btn-primary {
    background-color: var(--color-primary);
    color: var(--white);
    box-shadow: 0px 1px 2px 0px #0000000D;

}

/* 2) Fond secondary, texte primary */
.btn-secondary {
    background-color: var(--color-secondary);
    color: var(--color-primary);
    box-shadow: 0px 1px 2px 0px #0000000D;

}

/* 3) Bordure secondary, fond transparent, texte secondary */
.btn-secondary-outline {
    background-color: transparent;
    color: var(--color-secondary);
    border: 2px solid var(--color-secondary);
}

/* 4) Fond secondary, texte primary, avec icône */
.btn-secondary-icon {
    background-color: var(--color-secondary);
    color: var(--color-primary);
    /* Même règle de base, border: none par défaut */
    display: inline-flex;
    align-items: center;
}

.btn-secondary-icon .icon {
    /* Pour espacer l’icône du texte (ex. si c’est <i> ou <svg>) */
    margin-right: 0.5rem;
}

/* 5) Fond transparent, texte primary, avec icône */
.btn-primary-outline {
    background-color: transparent;
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    /* border: none (hérité de .btn) */
}

.btn-primary-outline .icon {
    margin-right: 0.5rem;
}

/* END BTN STYLING */

/* END STYLEGUIDE */

.homepage-unique-content {
    align-items: center;
    display: flex;
    flex-direction: column;
    padding: var(--padding-section-xl);
}

.homepage-unique-title {
    width: 75%;
}

.homepage-unique-description {
    width: 70%;
    font-weight: 600;
}

.desktop-only, .tablet-desktop-only {
    display: none;
}

/* TABLE */
table {
    margin-top: 2rem;
}

table th,
table td {
    width: 50%;
}

table tr {
    vertical-align: baseline;
}

table th p {
    color: var(--redMinusl);
    margin-bottom: 1.25rem;
}

table th p,
table td p strong {
    font-family: var(--font-primary);
    font-size: 1.125rem;
    line-height: 100%;
    font-weight: 300 !important;
}

table p {
    font-family: var(--font-secondary);
    text-align: left;
    font-size: .875rem;
    line-height: 1.25rem;
    margin-bottom: 0.18rem;
}


@media screen and (min-width: 768px) {

    table {
        width: 90%;
    }

    .marke table {
        width: 100%;
        margin-top: 3.563rem;
        margin-left: .45rem;
    }

    table th,
    table td {
        width: 40%;
    }

    table th:nth-child(2),
    table td:nth-child(2) {
        padding-left: 8.68rem;
        width: 60%;
    }

    table th p {
        margin-bottom: 1.87rem;
    }

    table th p,
    table td p strong {
        font-size: 1.625rem;
        line-height: 1.25rem;
    }

    table p {
        font-size: 1.125rem;
        line-height: 2rem;
    }
}

/* END TABLE */

/* VIDEO PAGE MARKE */
.marke .componentHtml {
    display: flex;
    justify-content: center;
    padding-block: 1rem;
}
/* END VIDEO PAGE MARKE */