@import url("fonts.css");

:root {
    /* COULEURS */
    --qc-color-white: #ffffff;
    --qc-color-blue-extra-pale: var(--qc-color-blue-pale);
    --qc-color-blue-pale: #dae6f0;
    --qc-color-blue-light: #4a98d9;
    --qc-color-blue-regular_light: #2586d6;
    --qc-color-blue-regular: #1472bf;
    --qc-color-blue-piv: #095797;
    --qc-color-blue-piv-rgb: 9, 87, 151;
    --qc-color-blue-medium: #19406C;
    --qc-color-blue-dark: #223654;
    --qc-color-blue-dark-rgb: 34, 54, 84;
    --qc-color-purple: #6b4fa1;
    --qc-color-grey-extra-pale: var(--qc-color-grey-pale);
    --qc-color-grey-pale: #f1f1f2;
    --qc-color-grey-light: #c5cad2;
    --qc-color-grey-regular: #8893a2;
    --qc-color-grey-medium: #6b778a;
    --qc-color-grey-dark: #4e5662;
    --qc-color-pink-pale: #ffdbd6;
    --qc-color-pink-regular: #e58271;
    --qc-color-red-pale: var(--qc-color-pink-pale);
    --qc-color-red-light: var(--qc-color-pink-regular);
    --qc-color-red-regular_light: #eb705a;
    --qc-color-red-regular: #cb381f;
    --qc-color-red-medium: #b52e16;
    --qc-color-red-dark: #692519;
    --qc-color-green-pale: #d7f0bb;
    --qc-color-green-regular: #4f813d;
    --qc-color-green-dark: #2c4024;
    --qc-color-yellow-pale: #f8e69a;
    --qc-color-yellow-regular: #e0ad03;
    --qc-color-yellow-dark: #ad781c;
    --qc-color-formfield-border: var(--qc-color-grey-medium);
    --qc-color-formfield-focus-border: var(--qc-color-blue-dark);
    --qc-color-formfield-focus-outline: var(--qc-color-blue-light);
    --qc-color-searchinput-icon: var(--qc-color-blue-piv);
    --qc-color-box_shadow: rgba(var(--qc-color-blue-dark-rgb), 0.24);
    --qc-box_shadow-0-color: var(--qc-color-grey-light);
    /* Texte */
    --qc-color-background: var(--qc-color-white);
    --qc-color-text-primary: var(--qc-color-blue-dark);
    --qc-color-text-secondary: var(--qc-color-grey-medium);
    --qc-color-text-inverse: var(--qc-color-white);
    --qc-color-accent: var(--qc-color-pink-regular);
    --qc-color-success: var(--qc-color-green-regular);
    --qc-color-error: var(--qc-color-red-regular);
    --qc-color-danger: var(--qc-color-red-dark);
    /* Liens */
    --qc-color-link-text: var(--qc-color-blue-piv);
    --qc-color-link-hover: var(--qc-color-blue-piv);
    --qc-color-link-visited: var(--qc-color-purple);
    --qc-color-link-active: var(--qc-color-red-regular);
    --qc-color-link-focus-outline: var(--qc-color-blue-light);
    /* Dropdowns */
    --qc-color-dropdown-bg: var(--qc-color-white);
    --qc-color-dropdown-bg-hover: #f6f6f7;
    --qc-color-dropdown-text: var(--qc-color-blue-piv);
    /* Boutons primaire */
    --qc-color-button-primary-bg: var(--qc-color-blue-piv);
    --qc-color-button-primary-text: var(--qc-color-white);
    --qc-color-button-primary-hover: var(--qc-color-blue-medium);
    /* TYPOGRAPHIE */
    --qc-font-family-roboto: Roboto,sans-serif;
    --qc-font-family-open-sans: Open Sans,sans-serif;
    --qc-font-family-roboto-mono: Roboto Mono,monospace;
    --qc-font-family-content: var(--qc-font-family-open-sans);
    --qc-font-family-header: var(--qc-font-family-roboto);
    --qc-font-family-code: var(--qc-font-family-roboto-mono);
    /* TAILLES DE POLICE */
    --qc-font-size-root-percent: 62.5%;
    --qc-font-size-h6: 1.6rem;
    --qc-font-size-h5: 1.9rem;
    --qc-font-size-h4: 2.1rem;
    --qc-font-size-h3: 2.8rem;
    --qc-font-size-h2: 3.6rem;
    --qc-font-size-h1: 4.8rem;
    --qc-font-size-90: 1.4rem;
    --qc-font-size-100: 1.6rem;
    --qc-font-size-120: 1.8rem;
    --qc-font-size-200: 2.2rem;
    --qc-font-size-sm: var(--qc-font-size-90);
    --qc-font-size-md: var(--qc-font-size-100);
    --qc-font-size-lg: var(--qc-font-size-120);
    --qc-font-size-xl: var(--qc-font-size-200);
    --qc-font-size-content: var(--qc-font-size-md);
    /* ÉPAISSEUR DE POLICE */
    --qc-font-weight-regular: 400;
    --qc-font-weight-medium: 500;
    --qc-font-weight-semi-bold: 600;
    --qc-font-weight-bold: 700;
    --qc-font-weight-header-regular: var(--qc-font-weight-regular);
    --qc-font-weight-header-medium: var(--qc-font-weight-medium);
    --qc-font-weight-header-bold: var(--qc-font-weight-bold);
    --qc-font-weight-content-regular: var(--qc-font-weight-regular);
    --qc-font-weight-content-medium: var(--qc-font-weight-semi-bold);
    --qc-font-weight-content-bold: var(--qc-font-weight-bold);
    /* HAUTEUR DE LIGNE */
    --qc-line-height-h6: 2rem;
    --qc-line-height-h5: 2.4rem;
    --qc-line-height-h4: 2.4rem;
    --qc-line-height-h3: 3.2rem;
    --qc-line-height-h2: 4rem;
    --qc-line-height-h1: 5.6rem;
    --qc-line-height-90: 2rem;
    --qc-line-height-100: 2.4rem;
    --qc-line-height-120: 2.8rem;
    --qc-line-height-200: 3.2rem;
    --qc-line-height-sm: var(--qc-line-height-90);
    --qc-line-height-md: var(--qc-line-height-100);
    --qc-line-height-lg: var(--qc-line-height-120);
    --qc-line-height-xl: var(--qc-line-height-200);
    --qc-line-height-content: var(--qc-line-height-md);
    /* LARGEUR CONTENU */
    --qc-max-content-width: 825px;
    /* OMBRES */
    --qc-color-box_shadow: rgba(var(--qc-color-blue-dark-rgb), 0.24);
    --qc-box_shadow-0-color: var(--qc-color-grey-light);
    --qc-box_shadow-1-blur: 4px;
    --qc-box_shadow-1-offset: 1px;
    --qc-box_shadow-2-blur: 8px;
    --qc-box_shadow-2-offset: 2px;
    --qc-box_shadow-3-blur: 16px;
    --qc-box_shadow-3-offset: 4px;
    --qc-box_shadow-4-blur: 24px;
    --qc-box_shadow-4-offset: 6px;
    /* ESPACEMENTS */
    --qc-spacer-xs: 0.8rem;
    --qc-spacer-sm: 1.6rem;
    --qc-spacer-md: 2.4rem;
    --qc-spacer-lg: 4.8rem;
    --qc-spacer-xl: 9.6rem;
    --qc-spacer-section: var(--qc-spacer-xl);
    --qc-spacer-h1-mt: 7.2rem;
    --qc-spacer-h1-mb: 3.2rem;
    --qc-spacer-h2-mt: 7.2rem;
    --qc-spacer-h2-mb: var(--qc-spacer-sm);
    --qc-spacer-h3-mt: var(--qc-spacer-lg);
    --qc-spacer-h3-mb: var(--qc-spacer-xs);
    --qc-spacer-h4-mt: var(--qc-spacer-lg);
    --qc-spacer-h4-mb: var(--qc-spacer-xs);
    --qc-spacer-h5-mt: var(--qc-spacer-md);
    --qc-spacer-h5-mb: 0;
    --qc-spacer-h6-mt: var(--qc-spacer-md);
    --qc-spacer-h6-mb: 0;
    --qc-spacer-content-block-mb: var(--qc-spacer-md);
    --qc-spacer-list-pl: var(--qc-spacer-sm);
    --qc-spacer-list-item-mb: var(--qc-spacer-sm);
    /* DIMENSIONS — Largeurs maximales */
    --qc-size-max-width-xs: 6.3rem;
    --qc-size-max-width-sm: 15.6rem;
    --qc-size-max-width-md: 24.9rem;
    --qc-size-max-width-lg: 52.8rem;
    --qc-size-max-width-xl: 82.5rem;
    --qc-size-textarea-min-height: 10.8rem;
    --qc-size-search-bar-max-width: 64rem;
    /***********************************/
    --qc-grid-gutter: 32px;
    --qc-grid-breakpoint-xs: 0;
    --qc-grid-breakpoint-sm: 768px;
    --qc-grid-breakpoint-md: 992px;
    --qc-grid-breakpoint-lg: 1200px;
    --qc-grid-container-max-width-sm: 768px;
    --qc-grid-container-max-width-md: 992px;
    --qc-grid-container-max-width-lg: 1200px;
    --qc-spacer-xs: 0.8rem;
    --qc-spacer-sm: 1.6rem;
    --qc-spacer-md: 2.4rem;
    --qc-spacer-lg: 4.8rem;
    --qc-spacer-xl: 9.6rem;
    --qc-spacer-section: var(--qc-spacer-xl);
    --qc-spacer-h1-mt: 7.2rem;
    --qc-spacer-h1-mb: 3.2rem;
    --qc-spacer-h2-mt: 7.2rem;
    --qc-spacer-h2-mb: var(--qc-spacer-sm);
    --qc-spacer-h3-mt: var(--qc-spacer-lg);
    --qc-spacer-h3-mb: var(--qc-spacer-xs);
    --qc-spacer-h4-mt: var(--qc-spacer-lg);
    --qc-spacer-h4-mb: var(--qc-spacer-xs);
    --qc-spacer-h5-mt: var(--qc-spacer-md);
    --qc-spacer-h5-mb: 0;
    --qc-spacer-h6-mt: var(--qc-spacer-md);
    --qc-spacer-h6-mb: 0;
    --qc-spacer-content-block-mb: var(--qc-spacer-md);
    --qc-spacer-list-pl: var(--qc-spacer-sm);
    --qc-spacer-list-item-mb: var(--qc-spacer-sm);
    --piv-nav-height: 7.2rem;
}

@media (max-width: 1199.98px) {
    :root {
        --qc-font-size-h3: 2.5rem;
        --qc-font-size-h2: 2.8rem;
        --qc-font-size-h1: 3.6rem;
        --qc-line-height-h2: 3.2rem;
        --qc-line-height-h1: 4rem;
        --qc-spacer-h2-mt: 4.8rem;
        --qc-spacer-h2-mb: 0.8rem;
        --qc-grid-gutter: 24px;
    }
}

@media (max-width: 991.98px) {
    :root {
        --qc-grid-gutter: 16px;
    }
}