@font-face {
    font-family: 'Manrope';
    /* src: url('/static/fonts/Manrope-Regular.ttf') format('truetype'), */
    src: url('/static/fonts/Manrope-VariableFont_wght.woff2') format('woff2');
}

:root {

    --wp--preset--color--base: #FFFFFF;
    --wp--preset--color--contrast: #111111;
    
    --wp--preset--font-family--manrope: 'Manrope', sans-serif;    

    --wp--preset--font-size--small: 0.875rem;
    --wp--preset--font-size--normal: 16px;
    --wp--preset--font-size--medium: clamp(1rem, 1rem + ((1vw - 0.2rem) * 0.196), 1.125rem);
    --wp--preset--font-size--large: clamp(1.125rem, 1.125rem + ((1vw - 0.2rem) * 0.392), 1.375rem);
    --wp--preset--font-size--huge: 42px;
    --wp--preset--font-size--xx-large: clamp(2.15rem, 2.15rem + ((1vw - 0.2rem) * 1.333), 3rem);

    --wp--style--global--content-size: 645px;
    --wp--style--global--wide-size: 1340px;

    --wp--style--block-gap: 1.2rem;

    --wp--preset--color--accent-2: #f8cfbe;
    --wp--preset--color--accent-3: #000066;

    --wp-block-synced-color: #7a00df;
    --wp-block-synced-color--rgb: 122,0,223;
    --wp-bound-block-color: var(--wp-block-synced-color);
    --wp-editor-canvas-background: #ddd;
    --wp-admin-theme-color: #007cba;
    --wp-admin-theme-color--rgb: 0,124,186;
    --wp-admin-theme-color-darker-10: #006ba1;
    --wp-admin-theme-color-darker-10--rgb: 0,107,160.5;
    --wp-admin-theme-color-darker-20: #005a87;
    --wp-admin-theme-color-darker-20--rgb: 0,90,135;
    --wp-admin-border-width-focus: 2px;    
    
    --wp--preset--spacing--20: 10px;
    --wp--preset--spacing--30: 20px;
    --wp--preset--spacing--40: 30px;
    --wp--preset--spacing--50: clamp(30px, 5vw, 50px);    
    --wp--preset--spacing--60: clamp(30px, 7vw, 70px);

    --wp--style--root--padding-top: 0px;
    --wp--style--root--padding-right: var(--wp--preset--spacing--50);
    --wp--style--root--padding-bottom: 0px;
    --wp--style--root--padding-left: var(--wp--preset--spacing--50);

    --wp--style--button--padding: 5px 10px;

}

body {
    margin: 0;
    background-color: var(--wp--preset--color--base);
    color: var(--wp--preset--color--contrast);
    font-family: var(--wp--preset--font-family--manrope);
    font-size: var(--wp--preset--font-size--large);
    font-style: normal;
    font-weight: 300;
    letter-spacing: -0.1px;
    line-height: 1.4;
}


h1, h2, h3, h4, h5 {
    color: var(--wp--preset--color--accent-3);
    font-weight: 400;
    letter-spacing: -0.1px;
    line-height: 1.125;
}

h1 {
    font-size: var(--wp--preset--font-size--xx-large);
}


footer {
    margin-top: var(--wp--preset--spacing--30);
    background-color: var(--wp--preset--color--accent-3);
    color: white;
    padding: var(--wp--preset--spacing--60);
}

/********************************************************************
 * NAVBAR
 */

#navbar {
    background-color: var(--wp--preset--color--accent-2) !important;
    padding-right: var( --wp--style--root--padding-right) ;
    padding-left: var( --wp--style--root--padding-left) ;

    padding-top: var(--wp--preset--spacing--40);
    padding-bottom: var(--wp--preset--spacing--60);

    display: flex;
    flex-wrap: wrap;
    align-items: top;
    gap: 1.2rem;
}
#navbar-logo {
    height: auto;
    max-width: 100%;
}
#navbar-menu {
    display: none;
    padding-top: var(--wp--preset--spacing--20);
    padding-bottom: var(--wp--preset--spacing--20);
}

#navbar.active {
    width: 100%;
    height: 100vh;
    align-content: start;
    left: 0;
    top: 0;
    z-index: 10;
}
#navbar.active #navbar-menu {
    display: flex;
    width:100%
}

#navbar-menu  * {
    flex-grow: 1;
    justify-content: flex-start;
    list-style: none;
    text-decoration: none;
}
#navbar-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    font-size: var(--wp--preset--font-size--medium);
}
#navbar-menu .nav-item {
    text-decoration-thickness: 1px !important;
    text-underline-offset: .1em;
}
#navbar-menu .nav-item a {
    color: inherit !important
}
#navbar-menu .nav-item a:hover {
    text-decoration: underline;
    outline-offset: 4px;
}
#navbar-toggle {
    display: block;
}

@media (min-width: 645px) {
    #navbar-menu {
        display: block;
    }
    #navbar-toggle {
        display: none
    }
}

/********************************************************************
 * MAIN
 */

main {
    margin-top: var(--wp--preset--spacing--60);

    padding-right: var(--wp--style--root--padding-right);
    padding-left: var(--wp--style--root--padding-left);
}

main .section {
    padding-top: var(--wp--preset--spacing--30);
    padding-bottom: var(--wp--preset--spacing--30);
    margin: var(--wp--preset--spacing--20)
}

main .section > * {
    max-width: 1100px;
    margin-left: auto !important;
    margin-right: auto !important;
}

/********************************************************************
 * METRIC CARD
 */


.metric-card {
    width: 200px;
    display: flex;
    justify-content: start;
    background-color: var(--wp--preset--color--accent-3);
    padding: var(--wp--preset--spacing--30);
    flex-direction: column;
}

.metric-card > .numbers {
    font-size: var(--wp--preset--font-size--xx-large);
    color: white;
}

.metric-card > span {
    font-size: var(--wp--preset--font-size--normal);
    color: #CCC;
}

.metric-warning {
    /* voir si on mets un petit border-top */
    margin-top: var(--wp--preset--spacing--20);
    font-size: var(--wp--preset--font-size--small);
}


/********************************************************************
 * SAMPLES STYLES
 */

.samples-list {
    margin-bottom: var(--wp--preset--spacing--20) 
}
.samples-list-title {
    display: flex;
    justify-content: space-between;
    padding-bottom: 5px;
    border-bottom: 1px solid #CCC
}
.samples-list-title h3 {
    color: var(--wp--preset--color--contrast);
    font-style: normal;
    font-weight: 300
}


/********************************************************************
 * FOOTER INFO
 */
footer img {
    margin-bottom: var(--wp--preset--spacing--50);
}
#footer-information h2 {
    color: white;
    margin-top: 0;
    margin-bottom: var(--wp--preset--spacing--20);
    font-size: var(--wp--preset--font-size--normal);
}

#footer-info-list {
    font-size: var(--wp--preset--font-size--small);
    display: grid;
    grid-template-columns: 60% 40%;
}

#footer-info-list *:nth-child(odd) {
    font-weight: bold;
}

/********************************************************************
 * Answer
 */

.q-group {
    margin-top: var(--wp--preset--spacing--50);
}
.q-group > div:first-child {
    font-weight: bold;
}
.q-group p{
    margin: 0;
}
.answer {
    border: 1px var(--wp--preset--color--accent-3) solid;
    padding:3px
}
.available_answer {
    display: flex;
    margin: 5px 0px;
}

.square {
    width: 30px;
    height: 30px;
    border: 2px var(--wp--preset--color--contrast) solid;
    margin-right: 5px
}
.square.checked {
    background-color: var(--wp--preset--color--accent-3);
}
/********************************************************************
 * TABLE
 */
table tr {
    border-bottom: 1px #CCC solid;
}
table th {
    text-align: justify;
}

/********************************************************************
 * UTILS
 */

.gap {
    gap: var(--wp--style--block-gap)
}
.flex {
    display: flex;
    flex-wrap: wrap;
}
.flex.columns {
    flex-direction: column;
}
.flex.align-start {
    align-items: start;
}
.flex.space-between {
    justify-content: space-between;
}
.w-3 {
    width: 25%;
}
.w-4 {
    width: 33%;
}
.w-6 {
    width: 50%;
}
.w-8 {
    width: 66%;
}
.w-9 {
    width: 75%;
}
.w-12 {
    width: 100% 
}
.w-auto {
    width: auto 
}

@media (min-width: 645px) {
    .w-md-3 {
        width: 25%;
    }
    .w-md-4 {
        width: 33%;
    }
    .w-md-6 {
        width: 50%;
    }
    .w-md-8 {
        width: 66%;
    }
    .w-md-9 {
        width: 75%;
    }
    .w-md-12 {
        width: 100% 
    }
}

.bordered {
    border: 1px #CCC solid
}
.bordered.red {
    border-color: red;
}

.text.red{
    color: red;
}
.white {
    color: white
}

.bg-red {
    background-color: lightsalmon;
}
.bg-green {
    background-color: lightgreen;
}
.bg-accent-3 {
    background-color: var(--wp--preset--color--accent-3);
}

.text.small {
    font-family: 'Manrope', sans-serif;
    font-size: var(--wp--preset--font-size--small);
}

.padded {
    padding: var(--wp--preset--spacing--50);
}

.x-padded {
    padding-left: var(--wp--preset--spacing--50);
    padding-right: var(--wp--preset--spacing--50);
}

.y-padded {
    padding-top: var(--wp--preset--spacing--50);
    padding-bottom: var(--wp--preset--spacing--50);
}

.rounded {
    border-radius: 5px;
    padding-left: 5px;
    padding-right: 5px
}
.tag {
    margin: 3px;
    text-wrap: nowrap;
}

.button, button {
    padding: var(--wp--style--button--padding);
    background-color: var(--wp--preset--color--accent-3);
    color: white;
    border: none;
    border-radius: 7px;
    cursor: pointer;
    text-decoration: none
}
.button.clear, button.clear {
    color: var(--wp--preset--color--contrast);
    background-color: inherit;
}
.hidden {
    display: none;
}