/*
Theme Name: Activis Design System
Theme URI: http://activis.ca
Author: Activis
Author URI: http://activis.ca
Description: A design system to build Wordpress site
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: activis

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.
*/
bod, :root {


    --layout--content-size: 850px;
    --layout--wide-size: 1280px;

    --color--primary: #095797;
    --color--primary--hover: #1479CC;
    --color--secondary: #223654;
    --color--secondary--hover: #F2F1F1;
    --color--tertiary: #DAE6F0;
    --color--accent: #1479CC;
    --color--accent--lighter: #1479CC;
    --color--error: #DA1E28;
    --color--black: #000;

    --color--grey-90: #1A1A1A;
    --color--grey-80: #333333;
    --color--grey-70: #4D4D4D;
    --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;

    --focus--outline: 2px solid var(--color--primary);
    --active--outline: 2px solid var(--color--primary--hover);

    --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);
    --color--heading: var(--color--primary);

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

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

    --gaps--text: 1rem;
    --gaps--block: 3rem;
    --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.5rem;
    --margin--xx-small: 1rem;
    --margin--x-small: 1.5rem;
    --margin--small: 2rem;
    --margin--medium: 2.5rem;
    --margin--large: 3rem;
    --margin--x-large: 4rem;
    --margin--xx-large: 5rem;
    --margin--xxx-large: 7rem;

    --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.3333;
    --line-height--large: 1.3333;
    --line-height--x-large: 1.25;

    --font-family--heading: Roboto, sans-serif;
    --font-family--text: 'Open Sans', Roboto, sans-serif;

    --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: 3.5rem;
    --font-size--h2: 2.25rem;
    --font-size--h3: 1.75rem;
    --font-size--h4: 1.25rem;
    --font-size--h5: 1.125rem;
    --font-size--h6: 1rem;

    --line-height--heading: 1.3333;
    --line-height--h1: 1.14;
    --line-height--h2: 1.14;
    --line-height--h3: 1.35;
    --line-height--h4: 1.14;
    --line-height--h5: 1.26;
    --line-height--h6: 1.5;

    --easing--state: ease-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;

    --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: 700;
    --font-weight--text: 400;

    --link--decoration: underline;
    --link--decoration-color: transparent;
    --link--duration: var(--duration--fastest);
    --link--easing: var(--easing--state);
    --link--color: var(--color--primary--hover);
    --link--hover--decoration: underline;
    --link--hover--decoration-color: var(--color--primary--hover);
    --link--hover--color: var(--color--primary--hover);

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

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

    --lead--font: normal 400 1.5rem/1.33 var(--font-family--text);
    --lead--color: var(--color--black);

    --quote--font: normal 400 2rem/1.25 var(--font-family--text);
    --quote--color: var(--color--white);
    --quote--background: var(--color--primary);

    --button--radius: 0.5rem;
    --button--height: 3.5rem;
    --button--padding: 1rem 1.5rem;
    --button--font: 700 1rem/1.5rem var(--font-family--text);
    --button--border: 1px solid transparent;

    --button--text--font: 700 1.125rem/1.5rem var(--font-family--text);

    --button--background: var(--color--accent--lighter);
    --button--border-color: var(--color--accent--lighter);
    --button--color: var(--color--white);

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

    --button--background--active: var(--color--accent--lighter);
    --button--border-color--active: var(--color--accent--lighter);
    --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--secondary--lighter);

    --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%);

    --act-post-metadata--color--background: #DAE6F0;
}

@media (max-width: 781px) {

    body {
        --gaps--text: 1rem;
        --gaps--block: 2rem;
        --gaps--section: 3.75rem;
        --gaps--sides: 1.5rem;
    }
}



.l-header {
    --icon-button--color: var(--color--secondary);
    --icon-button--background: transparent;
    --icon-button--color--hover: var(--color--accent--lighter);
    --icon-button--background--hover: transparent;
}

.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(--color--primary);
    --level-1--btn-border-hover: 1px solid var(--color--secondary);
    --level-1--btn-border-radius: 50px;
    --level-1--btn-color: #fff;
    --level-1--btn-color-hover: #fff;
    --level-1--btn-background: var(--color--primary);
    --level-1--btn-background-hover: var(--color--secondary);

    --level-1--font: bold 1rem/1.4118 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--secondary);
    --level-1--color--hover: var(--color--primary--hover);
    --level-1--color--active: var(--color--primary--hover);
    --level-1--icon--color: var(--color--primary--hover);
    /* 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: 0 var(--gaps--menu);

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

    /* 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: 0 var(--margin--small) var(--margin--small) var(--margin--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: 320px;

    /* 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: 28%;
    /* > 960 */
    --level-2--flexbasis--item-medium: 28%;
    /* > 1440 */
    --level-2--flexbasis--item-large: 28%;

    /* 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--heading);
    --level-3--color: var(--color--secondary);
    --level-3--color--hover: var(--color--primary--hover);
    --level-3--color--active: var(--color--primary--hover);

    /* pour differencier le 2 level du 3ieme */
    --level-3--padding-mobile: var(--padding--small) 0 0 0;
    --level-3--margin-top: 0;
    --level-3--margin-top-item: var(--margin--xx-small);

    /* overlay */
    --overlay--background: var(--color--black);
    --overlay--opacity: 0;

    --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: none;

    /* 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: 100vw;

    /* wrapper du menu */
    --wrapper--shadow: 0;
    --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--primary);
}

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

.wp-block-cover, .act-gallery-cover {
    --cover-heading-color: var(--color--white);
    --cover-heading-font: bold 3.5rem/1.14 var(--font-family--heading);
    --cover-heading-align: left;
    --cover-heading-valign: center;
    --cover-container-width: var(--layout--wide-size);
    --cover-overlay-background: linear-gradient(-90deg, rgba(20, 121, 204, 0) 0%, rgba(20, 121, 204, 0.6) 100%);
    --cover-overlay-opacity: 1;
    --cover-height: 362px;
  }
  @media(max-width: 1279px){
    .wp-block-cover, .act-gallery-cover{
      --cover-heading-font: bold 3rem/1.14 var(--font-family--heading);
    }
  }
  @media(max-width: 1079px){
    .wp-block-cover, .act-gallery-cover{
      --cover-heading-font: bold 2.5rem/1.14 var(--font-family--heading);
    }
  }
  @media(max-width: 599px){
    .wp-block-cover, .act-gallery-cover{
      --cover-heading-font: bold 2rem/1.14 var(--font-family--heading);
    }
  }


.gform_wrapper, form {
    --form--gap-x: var(--gaps--grid);
    --form--gap-y: var(--gaps--grid);
    --label--font: normal 0.875rem/1rem var(--font-family--text);
    --label--color: inherit;
    --input--height: 3rem;
    --input--padding: var(--padding--small);
    --input--textarea--height: 8.1rem;
    --input--radius: 0;
    --input--background: var(--color--grey-05);
    --input--border: 1px solid var(--color--secondary);
    --input--font: normal 1rem/1.5rem var(--font-family--text);
}

.wp-block-query-pagination {

    --number--size: 3rem;
    --number--gap: 0.625rem;
    --number--color: var(--color--primary);
    --number--background: transparent;
    --number--color--hover: var(--color--primary--hover);
    --number--background--hover: var(--color--tertiary);
    --number--color--active: var(--color--primary--hover);
    --number--background--active: var(--color--tertiary);
    --number--color--current: var(--color--primary--hover);
    --number--background--current: var(--color--tertiary);
    --number--radius: 999vw;

    --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: 700 1rem/1.5rem var(--font-family--text);
}

.yoast-breadcrumbs {
    --crumb--gap: var(--margin--xx-small);
    --crumb--color: var(--color--secondary);
    --crumb--font: normal 700 0.875rem/1.4285 var(--font-family--text);
    --crumb--color--current: var(--color--primary--hover);
    --crumb--font--current: var(--crumb--font);
    --crumb--color--separator: var(--color--white);
    --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, .act-actualite-slider-group  {
    --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: 5rem;
    --nav--controls--width: 5rem;
    --nav--controls--color: #fff;
    --nav--controls--bg-color: var(--color--primary);
    --nav--controls--bg-color--hover:var(--color--primary--hover);
    --items-height: 640px;
}

.act-page-404 {
    --page-404--bg--color: var(--color--primary--hover);
    --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--secondary);
    --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:5rem;
    --footer--gap-x:92px;
    --footer--gap-y:var(--margin--large);
    --footer--font-level1:normal 700 1.125rem/1rem var(--font-family--heading);
    --footer--font-level2:normal 400 1rem/1rem var(--font-family--text);
    --footer--copy-background:var(--color--white);
    --footer--copy-spacing-y:var(--padding--x-medium);
    --icon-button--background: var(--color--secondary);
}


.wp-block-act-notice,.act-notice{
    --notice--radius:.5rem;
    --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;
}
.wp-block-archive-filtres{
    --filtres--padding:2rem;
    --filtres--background:var(--color--primary);
    --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--form--gap:1.5rem;
}