/*
Theme Name: Microsite - Cegep Garneau
Theme URI: http://activis.ca
Author: Activis
Author URI: http://activis.ca
Description: A design system to build Wordpress site
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: activis
Template: act-wp-base-designsystem

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/* Font */
@import url("https://use.typekit.net/tjl4qgn.css");

/* Couleur de la maquette */

html body.act-theme .wp-block-cover img{
    padding-top:0 !important;
}

:root {

    /* Brand primary */
    --g-900: #101914;
    --g-800: #006944;
    --g-600: #80BA27;
    --g-50: #F3FAE7;

    /* Brand secondary */
    --b-800: #0D294D;
    --b-50: #E5F3F5;

    /* Neutral */
    --n-900: #000000;
    --n-800: #1A1A1A;
    --n-700: #666666;
    --n-600: #808080;
    --n-500: #999999;
    --n-400: #B3B3B3;
    --n-300: #CCCCCC;
    --n-200: #E5E5E5;
    --n-100: #F2F2F2;
    --n-50: #F7F7F7;

    /* Base */
    --black: #000000;
    --white: #FFFFFF;

    /* Alert/Error */
    --error-darkest: #742A2A;
    --error-dark: #C53030;
    --error-light: #FEB2B2;
    --error-lightest: #FFF0F0;

    /* Alert/Succes */
    --succes-darkest: #234E52;
    --succes-dark: #2C7A7B;
    --succes-light: #4FD1C5;
    --succes-lightest: #E6FFFA;

    /* Alert/Warning */
    --warning-darkest: #7B341E;
    --warning-dark: #C05621;
    --warning-light: #FBD38D;
    --warning-lightest: #FFF6E6;

    /* Alert/Info */
    --info-darkest: #3C366B;
    --info-dark: #4C51BF;
    --info-light: #7F9CF5;
    --info-lightest: #EBF4FF;

    /* Social */
    --facebook: #3B5999;
    --twitter: #55ACEE;
    --instagram: #E4405F;
    --youtube: #CD201F;
    --linkedin: #0077B5;

    /* link */
    --links: #3371F2;

    --color--text--high: #000;
    --color--text--medium: #333;
    --color--text--low: #666;
    --color--text: var(--color--text--high);
    --color--accent: #3371F2;
    --color--background: #fff;
    --color--border: #CCCCCC;

    --color--background--button--primary: #3371F2;
    --color--background--button--hover--primary: #0C47C1;
    --color--background--button--active--primary: #09338A;
    --color--link--button--secondary: var(--color--link--text);
    --color--background--surface--light: #EBF1FE;

    --color--button--background: var(--color--link--text);
    --color--button--text: #fff;
    --color--button--border: var(--color--link--text);
    --color--button--background--filled: var(--color--link--text);
    --color--button--text--filled: #fff;
    --color--button--border--filled: var(--color--link--text);

    --color--button--background--hover--filled: var(--color--link--text--hover);
    --color--button--text--hover--filled: #fff;
    --color--button--border--hover--filled: var(--color--link--text--hover);

    --color--button--background--disabled--filled: var(--color--text--low);
    --color--button--text--disabled--filled: #fff;
    --color--button--border--disabled--filled: var(--color--text--low);


    --color--button--background--outlined: transparent;
    --color--button--text--outlined:#3371F2;
    --color--button--border--outlined: #3371F2;

    --color--button--background--hover--outlined: #3371F2;
    --color--button--text--hover--outlined: #fff;
    --color--button--border--hover--outlined: #3371F2;

    --color--button--background--disabled--outlined: transparent;
    --color--button--text--disabled--outlined: var(--color--text--low);
    --color--button--border--disabled--outlined: var(--color--text--low);


    --color--button--background--light: #fff;
    --color--button--text--light: var(--color--link--text);
    --color--button--border--light: #fff;

    --color--button--background--hover--light: var(--b-400);
    --color--button--text--hover--light: var(--color--link--text--hover);
    --color--button--border--hover--light: #EBF1FE;

    --color--button--background--disabled--light: #efefef;
    --color--button--text--disabled--light: var(--color--text--low);
    --color--button--border--disabled--light: #efefef;


    --color--button--background--dark: var(--color--text);
    --color--button--text--dark: #fff;
    --color--button--border--dark: var(--color--text);

    --color--button--background--hover--dark: var(--color--text--medium);
    --color--button--text--hover--dark: #fff;
    --color--button--border--hover--dark: var(--color--text--medium);

    --color--button--background--disabled--dark: var(--color--text--low);
    --color--button--text--disabled--dark: #fff;
    --color--button--border--disabled--dark: var(--color--text--low);


    --color--button--background--transparent: transparent;
    --color--button--text--transparent: var(--color--link--text);
    --color--button--border--transparent: transparent;

    --color--button--background--hover--transparent: transparent;
    --color--button--text--hover--transparent: var(--color--link--text--hover);
    --color--button--border--hover--transparent: transparent;

    --color--button--background--disabled--transparent: transparent;
    --color--button--text--disabled--transparent: var(--color--text--low);
    --color--button--border--disabled--transparent: transparent;


    --color--interactive-box--border: var(--color--border);
    --color--interactive-box--text: var(--color--text);
    --color--interactive-box--link: var(--color--link--text);
    --color--interactive-box--background:var(--color--background);

    --color--interactive-box--border--hover: var(--color--button--border--filled);
    --color--interactive-box--text--hover: var(--color--button--text--filled);
    --color--interactive-box--link--hover: var(--color--button--text--filled);
    --color--interactive-box--background--hover: var(--color--button--background--filled);

    --color--interactive-box--border--activated: var(--color--button--border--filled);
    --color--interactive-box--text--activated: var(--color--button--text--filled);
    --color--interactive-box--link--activated: var(--color--button--text--filled);
    --color--interactive-box--background--activated: var(--color--button--background--filled);

    --border-width--box: none;
    --border-radius--box: none;
    --border-radius--interactive-box: 0.5rem;
    --box-shadow--box: none;
    --padding--box:1.5rem;

    --border-width--interactive-box: 1px;
    --border-radius--interactive-box: 0.5rem;
    --padding--interactive-box:1.5rem;

}

body {
    /**
    * Variables wordpress pour les containers de blocs
    */
    --layout--content-size: 850px;
    --layout--wide-size: 1280px;

    --font-family--heading: "franklin-gothic-atf", sans-serif;
    --font-family--text: "franklin-gothic-atf", sans-serif;

    --color--text: #000;
    --color--background: #fff;
    --color--border: #ccc;
    --color--facebook:#3B5999;
    --color--youtube:#CD201F;
    --color--linkedin :#0077B5;
    --color--twitter :#55ACEE;
    --color--instagram :#E4405F;


    --color--lead--text: #000;
    --color--title--text: #000;

    --color--list--icon: var(--color--text);

    --color--link--text: var(--g-800);
    --color--link--text--hover: var(--g-600);
    --color--link--text--focus: #0C47C1;
    --color--link--text--active: #09338A;

    --color--link--decoration: transparent;
    --color--link--decoration--hover: transparent;
    --color--link--decoration--focus: transparent;
    --color--link--decoration--active: transparent;

    --color--button--background: var(--g-800);
    --color--button--text: #fff;
    --color--button--border: var(--color--link--text);

    --color--button--background--hover: var(--g-600);
    --color--button--text--hover: #fff;
    --color--button--border--hover: var(--g-800);

    --color--button--background--focus: var(--g-800);
    --color--button--text--focus: #fff;
    --color--button--border--focus: var(--g-600);

    --color--button--background--active: var(--g-800);
    --color--button--text--active: #fff;
    --color--button--border--active: var(--g-600);

    --color--button--background--disabled: rgba(0,0,0,0.5);
    --color--button--text--disabled: #fff;
    --color--button--border--disabled: rgba(0,0,0,0.5);

    --color--button--background--light: #fff;
    --color--button--text--light: var(--color--link--text);
    --color--button--border--light: #fff;

    --color--button--background--hover--light: var(--b-400);
    --color--button--text--hover--light: var(--color--link--text--hover);
    --color--button--border--hover--light: #EBF1FE;

    --color--button--background--disabled--light: #efefef;
    --color--button--text--disabled--light: var(--color--text--low);
    --color--button--border--disabled--light: #efefef;

    --color--button--background--filled: var(--color--link--text);
    --color--button--text--filled: #fff;
    --color--button--border--filled: var(--color--link--text);

    --color--button--background--hover--filled: var(--color--link--text--hover);
    --color--button--text--hover--filled: #fff;
    --color--button--border--hover--filled: var(--color--link--text--hover);

    --color--button--background--disabled--filled: var(--color--text--low);
    --color--button--text--disabled--filled: #fff;
    --color--button--border--disabled--filled: var(--color--text--low);


    --color--button--background--outlined: transparent;
    --color--button--text--outlined: var(--color--link--text);
    --color--button--border--outlined: var(--color--link--text);

    --color--button--background--hover--outlined: var(--color--link--text);
    --color--button--text--hover--outlined: #fff;
    --color--button--border--hover--outlined: var(--color--link--text);

    --color--button--background--disabled--outlined: transparent;
    --color--button--text--disabled--outlined: var(--color--text--low);
    --color--button--border--disabled--outlined: var(--color--text--low);

    --color--button--background--dark: var(--g-600);
    --color--button--text--dark: var(--color--text);
    --color--button--border--dark: var(--g-600);

    --color--button--background--hover--dark: var(--g-800);
    --color--button--text--hover--dark: #fff;
    --color--button--border--hover--dark: var(--g-800);

    --color--button--background--disabled--dark: var(--color--text--low);
    --color--button--text--disabled--dark: #fff;
    --color--button--border--disabled--dark: var(--color--text--low);


    --color--button--background--transparent: transparent;
    --color--button--text--transparent: var(--color--link--text);
    --color--button--border--transparent: transparent;

    --color--button--background--hover--transparent: transparent;
    --color--button--text--hover--transparent: var(--color--link--text--hover);
    --color--button--border--hover--transparent: transparent;

    --color--button--background--disabled--transparent: transparent;
    --color--button--text--disabled--transparent: var(--color--text--low);
    --color--button--border--disabled--transparent: transparent;

    --color--label--text:var(--color--text);

    --color--input--background:#F2F2F2;
    --color--input--border:#F2F2F2;
    --color--input--text:var(--color--text);

    --color--input--background--focus:var(--color--input--background);
    --color--input--border--focus:var(--color--input--border);
    --color--input--text--focus:var(--color--input--text);

    --color--input--background--error:var(--color--input--background);
    --color--input--border--error:var(--color--input--border);
    --color--input--text--error:var(--color--input--text);

    --color--input--background--disabled:var(--color--input--background);
    --color--input--border--disabled:var(--color--input--border);
    --color--input--text--disabled:var(--color--input--text);

    --color--box--text: var(--color--text);
    --color--box--background: #F3FAE7;
    --color--box--border: #F3FAE7;

    --color--box--text--odd: var(--color--text);
    --color--box--background--odd: var(--color--background);
    --color--box--border--odd: var(--color--background);

    --color--box--text--even: var(--color--box--text);
    --color--box--background--even: var(--g-50);
    --color--box--border--even: var(--color--box--border);

    --color--box--text--contrast: #fff;
    --color--box--background--contrast: #000;
    --color--box--border--contrast: #000;

    --color--box--text--emphasis: var(--g-800);
    --color--box--background--emphasis: var(--g-800);
    --color--box--border--emphasis: #202084;

    --color--box--text--info: #202084;
    --color--box--background--info: #CFE2FF;
    --color--box--border--info: #CFE2FF;

    --color--box--text--warning: #664D03;
    --color--box--background--warning: #FFF3CD;
    --color--box--border--warning: #FFF3CD;

    --color--box--text--error: #842029;
    --color--box--background--error: #F8D7DA;
    --color--box--border--error: #F8D7DA;

    --color--box--text--success: #0F5132;
    --color--box--background--success: #D1E7DD;
    --color--box--border--success: #D1E7DD;

    --font--input:normal 1rem/1.5rem var(--font-family--text);

    --outline--focus: 3px solid var(--color--button--background--focus);
    --outline--active: 2px solid var(--color--button--background--active);

    --font--text: 1rem var(--font-family--text, sans-serif);
    --font--text--bold: bold 1rem var(--font-family--text, sans-serif);
    --font--small--regular:0.875rem/1.714 var(--font-family--text, sans-serif);
    --font--small--bold:bold 0.875rem/1.714 var(--font-family--text, sans-serif);
    --font--small:var(--font--small--regular);

    --font--lead--regular: 1.75rem/1.429 var(--font-family--text, sans-serif);
    --font--lead--bold: bold 1.75rem/1.429 var(--font-family--text, sans-serif);
    --font--lead: var(--font--lead--regular);
    --font--hero: bold clamp(1.75rem, 5vw, 4rem)/1.156 var(--font-family--heading, sans-serif);

    --font--small:0.875rem/1.714 var(--font-family--text, sans-serif);
    --font--input: var(--font--text);

    --font--button: var(--font--text--bold);
    --font--button--large: var(--font--text--bold);
    --font--button--small: var(--font--text--bold);

    --font--lead--regular: 1.5rem var(--font-family--text, sans-serif);
    --font--lead--bold: bold 1.5rem var(--font-family--text, sans-serif);
    --font--lead: var(--font--lead--regular);
    --font--title--h1--regular: 500 3rem var(--font-family--heading, sans-serif);
    --font--title--h2--regular: 400 2rem var(--font-family--heading, sans-serif);
    --font--title--h3--regular: 500 1.5rem var(--font-family--heading, sans-serif);
    --font--title--h4--regular: bold 1.25rem var(--font-family--heading, sans-serif);
    --font--title--h5--regular: bold 1.125rem/1.33333 var(--font-family--heading, sans-serif);
    --font--title--h6--regular: bold 1.0625rem/1.41176 var(--font-family--heading, sans-serif);

    --font--title--h1--bold: bold 3rem var(--font-family--heading, sans-serif);
    --font--title--h2--bold: bold 2rem var(--font-family--heading, sans-serif);
    --font--title--h3--bold: bold 1.5rem var(--font-family--heading, sans-serif);
    --font--title--h4--bold: bold 1.25rem var(--font-family--heading, sans-serif);
    --font--title--h5--bold: bold 1.125rem/1.33333 var(--font-family--heading, sans-serif);
    --font--title--h6--bold: bold 1.0625rem/1.41176 var(--font-family--heading, sans-serif);

    --font--title--h1: var(--font--title--h1--regular);
    --font--title--h2: var(--font--title--h2--bold);
    --font--title--h3: var(--font--title--h3--bold);
    --font--title--h4: var(--font--title--h4--bold);
    --font--title--h5: var(--font--title--h5--bold);
    --font--title--h6: var(--font--title--h6--bold);

    --font--label:normal 0.875rem/1rem var(--font-family--text);

    --spacing--none: 0;
    --spacing--xxx-small: 0.25rem;
    --spacing--xx-small: 0.5rem;
    --spacing--x-small: 1rem;
    --spacing--small: 1.5rem;
    --spacing--medium: 2rem;
    --spacing--large: 3rem;
    --spacing--x-large: 4rem;
    --spacing--xx-large: 5rem;
    --spacing--xxx-large: 8rem;


    --border-radius--button: 0.5rem;
    --border-width--button:2px;
    --border-width--button--large:2px;
    --border-width--button--medium:2px;
    --border-width--button--small:2px;
    --border-width--button--x-small:2px;
    --border-width--button--text:0;
    /*--height--button:3.5rem;*/

    --padding--button:1rem;
    --padding--button--large:1rem;
    --padding--button--medium:0.75rem;
    --padding--button--small:0.5rem;
    --padding--button--x-small:0.25rem;
    --padding--button--text:0rem;
    --height--button:3.5rem;

    --height--input:3rem;
    --padding--input:0.5rem 1rem;
    --border-radius--input:0;
    --border-width--input:0;

    --border-width--box: none;
    --border-radius--box: none;
    --box-shadow--box: none;
    --padding--box:1.5rem;

    --box-shadow--button: none;
    --box-shadow--button--hover: none;
    --box-shadow--button--focus: none;
    --box-shadow--button--active: none;

    --box-shadow--input: none;
    --box-shadow--input--hover: none;
    --box-shadow--input--focus: none;
    --box-shadow--input--error: none;

    /**
    https://yoksel.github.io/url-encoder/
    */
    --icon--list: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ctitle%3Ebullet%3C/title%3E%3Cpath d='M16 21.333c-2.945 0-5.333-2.388-5.333-5.333s2.388-5.333 5.333-5.333c2.945 0 5.333 2.388 5.333 5.333 0 1.415-0.561 2.771-1.563 3.771s-2.356 1.563-3.771 1.563z'%3E%3C/path%3E%3C/svg%3E");


    --easing--state: ease-in-out;
    --easing--entrance: ease-in;
    --easing--exit: ease-out;

    --duration--slowest: 1s;
    --duration--slower: 750ms;
    --duration--slow: 500ms;
    --duration--fast: 300ms;
    --duration--faster: 200ms;
    --duration--fastest: 100ms;
    --duration--none: 0;
}

@media (max-width: 1279px) {

    body {
        --font--title--h1--regular:2rem/1.2 var(--font-family--heading, sans-serif);
        --font--title--h1--bold:bold 2rem/1.2 var(--font-family--heading, sans-serif);
        --font--title--h2--regular:1.5rem/1.25 var(--font-family--heading, sans-serif);
        --font--title--h2--bold: bold 1.5rem/1.25 var(--font-family--heading, sans-serif);
        --font--title--h3--regular: 1.375rem/1.333333 var(--font-family--heading, sans-serif);
        --font--title--h3--bold:bold 1.375rem/1.333333 var(--font-family--heading, sans-serif);

        --font--lead:1.375rem/1.333333 var(--font-family--text, sans-serif);

        --spacing--medium: 1.5rem;
        --spacing--large: 2rem;
        --spacing--x-large: 2.5rem;
        --spacing--xx-large: 4rem;
        --spacing--xxx-large: 5rem;
    }
}

@media (max-width: 781px) {

    body {
        --spacing--large: 1.5rem;
        --spacing--x-large: 2rem;
        --spacing--xx-large: 3rem;
        --spacing--xxx-large: 4rem;
    }
}


/***
DEPRECATED
La liste en-dessous n'est plus à utiliser.
**/

body {


    /**
    * Variables de couleurs propres au projet
    */
    --color--primary: var(--g-800);
    --color--primary--hover: var(--g-600);
    --color--secondary: #222221;
    --color--secondary--hover: #222221;
    --color--tertiary: #86BBD8;
    --color--tertiary--hover: #86BBD8;
    --color--accent: var(--g-800);
    --color--accent--hover: #F1F7FB;
    --color--error: #DA1E28;
    --color--black: #000;

    --color--grey-90: #1A1A1A;
    --color--grey-80: #333333;
    --color--grey-70: #534545;
    --color--grey-60: #666666;
    --color--grey-50: #808080;
    --color--grey-40: #C4C4C4;
    --color--grey-30: #B3B3B3;
    --color--grey-20: #CCCCCC;
    --color--grey-10: #E5E5E5;
    --color--grey-05: #F2F2F2;
    --color--grey-03: #F7F7F7;
    --color--white: #fff;





    --background: var(--color--white);
    --color--meta: var(--color--grey-70);
    --color--text: var(--color--black);
    --color--interactive: var(--color--secondary);
    --color--emphasis: var(--color--primary);


    --gaps--columns: 1.5rem;
    --gaps--grid: 2rem;
    --gaps--list: 1.5rem;
    --gaps--sides: 2.25rem;
    --gaps--boxed: 1.5rem;

    --gaps--text: 1rem;
    --gaps--block: 2.5rem;
    --gaps--section: 5rem;

    --gaps--inline: 0.5rem;
    --gaps--inline--large: 1em;
    --gaps--menu: 2.5rem;

    --padding--none: 0;
    --padding--xx-small: 0.25rem;
    --padding--x-small: 0.5rem;
    --padding--small: 1rem;
    --padding--medium: 1.25rem;
    --padding--x-medium: 1.5rem;
    --padding--xx-medium: 1.75rem;
    --padding--large: 2rem;
    --padding--x-large: 2.5rem;
    --padding--xx-large: 5rem;

    --margin--none: 0;
    --margin--xxx-small: 0.25rem;
    --margin--xx-small: 0.5rem;
    --margin--x-small: 1rem;
    --margin--small: 1.5rem;
    --margin--medium: 2rem;
    --margin--large: 3rem;
    --margin--x-large: 4rem;
    --margin--xx-large: 5rem;
    --margin--xxx-large: 8rem;

    --layer--behind: -1;
    --layer--set: 1;
    --layer--overlay: 800;
    --layer--menu: 900;
    --layer--header: 1000;
    --layer--modal: 1100;
    --layer--veil: 9000;
    --layer--always-on-top: 99999999;

    --line-height--text: 1.5;
    --line-height--x-small: 1.6;
    --line-height--small: 1.4285;
    --line-height--x-large: 1.25;


    --font-size--x-small: 0.625rem;
    --font-size--small: 0.75rem;
    --font-size--medium: 1rem;
    --font-size--large: 1.5rem;
    --font-size--x-large: 2rem;

    --font-size--h1: 3rem;
    --font-size--h2: 2rem;
    --font-size--h3: 1.5rem;
    --font-size--h4: 1rem;
    --font-size--h5: 1.25rem;
    --font-size--h6: 1.125rem;
    --line-height--heading: 1.3333;
    --line-height--h1: 1.142857;
    --line-height--h2: 1.142857;
    --line-height--h3: 1.2;
    --line-height--h4: 1.3333;
    --line-height--h5: 1.2;
    --line-height--h6: 1.3333;


    --icon--xx-small: 1rem;
    --icon--x-small: 1.25rem;
    --icon--small: 1.5rem;
    --icon--medium: 2rem;
    --icon--large: 2.5rem;
    --icon--x-large: 4rem;
    --icon--xx-large: 5rem;
    --icon--xxx-large: 6rem;

    --font-weight--heading: 500;
    --font-weight--text: 400;

    --list--bullet: url("../../assets/icons/SVG/bullet.svg");


    --caption--font: normal var(--font-weight--text) 0.875rem/1.5rem var(--font-family--text);

    --quote--font: italic 500 1.75rem var(--font-family--heading);
    --quote--color: var(--g-800);
    --quote--background: transparent;
    --color--quote--emphasis: #3371f2;
    --color--quote--text: var(--color--text);


    /* non scopé, peut etre utilisé a beaucoup de places */
    --social--facebook:#3B5999;
    --social--youtube:#CD201F;
    --social--twitter:#55ACEE;
    --social--linkedin:#0077B5;
    --social--instagram:#E4405F;

    --button--background--hover:var(--color--primary--hover);
    --button--border-color--hover:var(--color--primary--hover);
    --button--color--hover:var(--color--white);

    --button--background--active:var(--color--primary--hover);
    --button--border-color--active:var(--color--primary--hover);
    --button--color--active:var(--color--white);

    --button--background--disabled:#ededed;
    --button--border-color--disabled:#ededed;
    --button--color--disabled:#bcbcbc;

    --icon-button--color: var(--color--white);
    --icon-button--background: var(--color--black);

    --icon-button--color--hover: var(--color--black);
    --icon-button--background--hover: var(--color--white);

    --logo--primary--filter: invert(51%) sepia(61%) saturate(495%) hue-rotate(79deg) brightness(93%) contrast(92%);

    --badges--gap:.5rem;
    --badge--padding:.5rem 1rem;
    --badge--radius:999vw;
    --badge--font:700/normal 1rem/1.5em var(--font-family--text);
}



.l-header {
    --icon-button--color: var(--color--black);
    --icon-button--background: var(--color--grey-05);
    --icon-button--color--hover: var(--color--white);
    --icon-button--background--hover: var(--g-600);
}

.post-navigation-link {
    --link--color: var(--color--primary);
}

.act-page-tree-menu {
    --menu-btn-border: 1px solid #E5E5E5;
    --menu-btn-padding: var(--padding--xx-small);
    --menu-btn-size: var(--icon--large);
    --menu-btn-open-size: var(--icon--x-small);
    --menu-btn-close-size: var(--icon--small);
    /* btn à gérer plus tard avec les bouton par defaut du site */
    --level-1--btn-padding: var(--padding--x-small) var(--padding--small);

    --level-1--btn-border: 1px solid var(--icon-button--background);
    --level-1--btn-border-hover: 1px solid var(--g-600);
    --level-1--btn-border-radius: 50px;
    --level-1--btn-color: #fff;
    --level-1--btn-color-hover: #fff;
    --level-1--btn-background: var(--icon-button--background);
    --level-1--btn-background-hover: var(--g-600);

    --level-1--font: bold 1rem/1.2 var(--font-family--text);
    /* padding des liens de premier niveau */
    --level-1--padding: var(--padding--x-small) 0;
    --level-1--padding-mobile: var(--padding--small) 0;

    --level-1--color: var(--color--black);
    --level-1--color--hover: var(--color--primary);
    --level-1--color--active: var(--color--primary);
    --level-1--icon--color: currentColor;
    --level-1--icon--size: var(--icon--xx-small);
    --level-1--icon--gap:.5rem;
    /* separateur pour les premier niveau en mobile */
    --level-1--border-mobile: 1px solid #E5E5E5;

    /* border hover premier niveau */
    --level-1--border-height: 4px;
    --level-1--border-color: currentColor;
    --level-1--border-width: calc(100% + 32);

    /* gap entre les item de menu de premier niveau */
    --level-1--gap--item: var(--gaps--menu);

    --level-2--columns:4;

    --level-2--icon--color: var(--color--secondary);
    --level-2--font: bold 1rem/1.2 var(--font-family--text);
    --level-2--color: var(--color--secondary);
    --level-2--color--hover: var(--g-600);
    --level-2--color--active: var(--g-600);

    /* padding des items de menu 2iem niveau */
    --level-2--item-padding: var(--padding--x-small) 0;
    --level-2--padding-mobile: var(--padding--small) 0 0 0;

    /* marges pour le panel dropdown (souvent moins d espace que le panel pleine largeur) */
    --level-2--margin-dropdown: var(--margin--large) var(--margin--medium) var(--margin--large) var(--margin--x-small);

    /* position du dropdwon par rapport à son parent - decalage negatif vers la gauche pour aligner le texte avec le parent */
    --level-2--dropdown-position: calc((var(--margin--xx-small) + var(--icon--small)) * -1);

    /* largeur du dropdown, si on le met à 100% il ne sera pas plus large que son parent */
    --level-2--dropdown-width: 250px;

    /* margin top pour les colonne de menu 2ieme niveau */
    --level-2--margin-top: var(--margin--xx-small);

    /* largeur des item de menu 2ieme niveau selon la resolution */
    /* mobile */
    --level-2--flexbasis--item-small: calc(263 / 544 * 100%);
    /* > 960 */
    --level-2--flexbasis--item-medium: calc(263 / 928 * 100%);
    /* > 1440 */
    --level-2--flexbasis--item-large: calc(263 / 1310 * 100%);

    /* gap entre les item de menu 2ieme niveau selon la resolution */
    --level-2--gap--item-medium: calc(69 / 928 * 100%);
    --level-2--gap--item-large: calc(86 / 1310 * 100%);


    --level-3--icon--color: var(--color--secondary);
    --level-3--font: normal 1rem/1.2 var(--font-family--text);
    --level-3--color: var(--color--secondary);
    --level-3--color--hover: var(--g-600);
    --level-3--color--active: var(--g-600);
    /* pour differencier le 2 level du 3ieme */
    --level-3--padding-mobile: var(--padding--small) 0 0 var(--padding--small);
    --level-3--margin-top: var(--margin--xx-small);
    --level-3--margin-top-item: var(--margin--xx-small);

    /* overlay */
    --overlay--background: #222221;
    --overlay--opacity: 0.8;

    --panel--border: none;
    --panel--radius: 0;
    --panel--margin: calc(var(--margin--xx-large) - var(--margin--small)) var(--margin--xxx-large) var(--margin--xx-large) var(--margin--xxx-large);
    --panel--background: var(--color--white);
    --panel--shadow: inset 0 4px 29px hsl(0deg 0% 49% / 15%);

    /* taille de l image dans le panel */
    --panel--prepend-width: calc(384 / 1920 * 100%);

    /* taille du panel si pas d image */
    --panel-without-prepend-medium-width: 100vw;
    --panel-without-prepend-large-width: 60vw;

    /* wrapper du menu */
    --wrapper--shadow: inset 0 4px 29px hsl(0deg 0% 49% / 15%);
    --wrapper--padding: var(--padding--large) var(--gaps--sides);
    --wrapper--padding-mobile: 0 var(--gaps--sides) var(--padding--large) var(--gaps--sides);
    --wrapper--background: var(--color--white);
}

.barba-integration {
    --config--transition-color: var(--color--accent);
}

.barba-integration-progress-bar {
    --config--transition-color: var(--color--accent);
}

.act-quick-links {
    --color--background: var(--color--primary);
    --color--background--hover: var(--color--tertiary);
    --color--text: var(--color--white);
    --color--text--hover: var(--color--white);
}

.wp-block-cover, .act-gallery-cover {
    --cover-heading-color: var(--color--white);
    --cover-heading-font: normal var(--font-weight--heading) var(--font-size--h1)/var(--line-height--heading) var(--font-family--heading);
    --cover-heading-align: left;
    --cover-heading-valign: center;
    --cover-container-width: var(--layout--wide-size);
    --cover-overlay-background: var(--color--black);
    --cover-overlay-opacity: 0.35;
    --cover-height: 385px;
}


.gform_wrapper,form{
    --form--gap-x:var(--gaps--grid);
    --form--gap-y:var(--gaps--grid);
}

.wp-block-query-pagination {

    --number--size: 2rem;
    --number--gap: 0.5rem;
    --number--color: var(--color--secondary);
    --number--background: transparent;
    --number--color--hover: var(--color--white);
    --number--background--hover: var(--color--secondary);
    --number--color--active: var(--color--white);
    --number--background--active: var(--color--grey-60);
    --number--color--current: var(--color--secondary);
    --number--background--current: var(--color--grey-20);
    --number--radius: 0.25rem;

    --button--color: var(--color--white);
    --button--background: var(--color--primary);
    --button--color--hover: var(--color--white);
    --button--background--hover: var(--color--secondary);
    --button--color--active: var(--color--white);
    --button--background--active: var(--color--grey-60);
    --button--radius: 0.25rem;
    --font: 500 1rem/1.5rem var(--font-family--text);
}

.yoast-breadcrumbs {
    --crumb--gap: var(--padding--x-small);
    --crumb--color: var(--color--text--high);
    --crumb--font: normal 500 var(--font-size--medium)/1em var(--font-family--text);
    --crumb--color--current: var(--color--text--high);
    --crumb--font--current: normal 400 var(--font-size--medium)/1em var(--font-family--text);
    --crumb--color--separator: var(--g-800);
    --crumb--size--separator: var(--font-size--medium);
}

.wp-block-post-template {
    --img--height: 200px;
}


.alerte-banner{
    --avis--title-color:#ffffff;
    --avis--color:#ffffff;
    --avis--bg-color:#D22E3E;
    --annonce--title-color:#000000;
    --annonce--color:#000000;
    --annonce--bg-color:#FFB529;
    --information--title-color:#000000;
    --information--color:#000000;
    --information--bg-color:#758E4F;
}

.act-galerie-slider{
    --nav--dots--height:0.5rem;
    --nav--dots--width:0.5rem;
    --nav--dots--margin:0 0.5rem;
    --nav--dots--shadow:0px 0.25rem 0.25rem rgb(0 0 0 / 25%);
    --nav--dots--bg-color:#fff;
    --nav--dots--border-color:#fff;
    --nav--dots--border-size:2px;
    --nav--controls--padding:0 1.5rem;
    --nav--controls--height:1.5rem;
    --nav--controls--width:1.5rem;
    --nav--controls--color:#fff;
    --nav--controls--bg-color:rgba(0, 0, 0, 0.4);
    --nav--controls--bg-color--hover:rgba(0, 0, 0, 1);
    --items-height:400px;
}

.act-page-404{
    --page-404--bg--color:var(--color--primary);
    --page-404--text--color:var(--color--white);

    --button--background:#fff;
    --button--border-color:#fff;
    --button--color:var(--color--primary);

    --button--background--hover:#dcdcdc;
    --button--border-color--hover:#dcdcdc;
    --button--color--hover:var(--color--primary);

    --button--background--active:#dcdcdc;
    --button--border-color--active:#dcdcdc;
    --button--color--active:var(--color--primary);

    --button--background--disabled:#ededed;
    --button--border-color--disabled:#ededed;
    --button--color--disabled:#bcbcbc;
}

.l-footer{
    --footer--background:var(--color--black);
    --footer--text-color:var(--color--white);
    --footer--font:normal 400 1rem/1.5rem var(--font-family--heading);
    --footer--spacing-y:var(--padding--none);
    --footer--content-spacing-y:var(--padding--xx-large);
    --footer--gap-x:92px;
    --footer--gap-y:var(--margin--large);
    --footer--font-level1:normal 700 1.125rem/1.25em var(--font-family--heading);
    --footer--font-level2:normal 400 1rem/1.25em var(--font-family--heading);
}

.act-share{
    --network--color:var(--color--primary);
    --network--color--hover:var(--color--secondary);
    --toggle--color:var(--color--secondary);
}

.wp-block-archive-filtres{
    --filtres--padding:1.5rem;
    --filtres--background:#ECF2FE;
    --filtres--title--font:700 normal 1.25rem/1.14em var(--font-family--heading);
    --filtres--label--font:700 normal 1rem/1.5em var(--font-family--text);
    --filtres--field--font:400 normal 1rem/1.5em var(--font-family--text);
    --filtres--field--color: #223654;
    --filtres--label--text-color: #000;
    --filtres--form--gap:1rem;
}
.act-reveal-card{
    --card--height:400px;
    --color--text:#fff;
    --color--background--reveal:var(--color--primary);
    --color--background-opacity--reveal:0.9;
    --color--text--reveal:#fff;
    --font--normal: 700 normal 2.5rem/1.20em var(--font-family--heading);
}
.wp-block-act-notice,.act-notice{
    --notice--radius:0;
    --default--background:#000;
    --default--color:#fff;
    --default--border:transparent;
    --info--background:#CFE2FF;
    --info--color:#202084;
    --info--border:transparent;
    --alert--background:#F8D7DA;
    --alert--color:#842029;
    --alert--border:transparent;
    --warning--background:#FFF3CD;
    --warning--color:#664D03;
    --warning--border:transparent;
    --success--background:#D1E7DD;
    --success--color:#0F5132;
    --success--border:transparent;
}

.act-collapsible{
  --collapsible--color--heading--border: var(--color--grey-20);
  --collapsible--color--heading--background: var(--color--white);
  --collapsible--color--heading--text: var(--white);
  --collapsible--color--heading--icon: var(--g-800);
  --collapsible--color--heading--border--hover: var(--color--grey-20);
  --collapsible--color--heading--background--hover: #3371F2;
  --collapsible--color--heading--text--hover: var(--color--white);
  --collapsible--color--heading--icon--hover: var(--color--white);
  --collapsible--color--heading--border--focus :var(--color--grey-20);
  --collapsible--color--heading--background--focus: var(--g-800);
  --collapsible--color--heading--text--focus: var(--color--white);
  --collapsible--color--heading--icon--focus: var(--color--white);
  --collapsible--color--heading--border--active: var(--color--grey-20);
  --collapsible--color--heading--background--active: var(--g-800);
  --collapsible--color--heading--text--active: var(--color--white);
  --collapsible--color--heading--icon--active: var(--g-800);
  --collapsible--color--heading--border--open: var(--color--grey-20);
  --collapsible--color--heading--background--open: var(--g-800);
  --collapsible--color--heading--text--open: var(--color--white);
  --collapsible--color--heading--icon--open: var(--g-800);

  --collapsible--color--wrapper--border: none;
  --collapsible--color--wrapper--background: var(--color--white);
  --collapsible--color--wrapper--text :var(--color--text);

  --collapsible--font--heading: var(--font--family--heading);
  --collapsible--icon--heading: var(--g-800);
  --collapsible--icon--heading--open: var(--g-800);
}

.act-hero-slider{
  --act-hero-slider--height: 55.75rem;
  --act-hero-slider--color--text: #fff;
  --act-hero-slider--color--controls--text: #fff;
  --act-hero-slider--color--controls--background: rgba(0, 0, 0, 0.65);
  --act-hero-slider--color--controls--background--hover: rgba(0, 0, 0, 0.75);
}

.act-back-to-top{
  --back-to-top--background: #80BA27;
  --back-to-top--background--hover: #006944;
  --back-to-top--size: 3.75rem;
}

.has-emphasis-background-color {
  --color--link--text--hover: var(--g-600);
  --color--link--text--focus: var(--g-600);
  --color--link--text--active: var(--g-600);
  --color--link--text--decoration: var(--g-600);
}
