:root {
    --color-green: /*#6053B4;*/ #3abebe;
    --color-green-light: #C4E6E6; /*#c4e6e6;*/
    --color-green-lighter: #E2F2F2; /*#f0f9f9;*/
    --color-green-dark: #2D7272;
    --color-green-darker: #2D7272; /* #Todo check utilité ? */

    --color-purple: /*#3ABEBE;*/ #6053b4;
    --color-purple-light: #8075C3; /*#f2f1f9;*/
    --color-purple-dark: /*#59676d;*/ #3d3573;

    --color-purple-lighter: #8075C3; /*#f2f1f9;*/

    --color-primary: var(--color-purple);
    --color-primary-light: var(--color-purple-light);
    --color-primary-lighter: var(--color-green-lighter); /* n'existe pas en violet sur xpert, devient white ou green-lighter */
    --color-primary-dark: var(--color-purple-dark); /*var(--color-green-dark);*/

    --color-secondary: var(--color-green);
    --color-secondary-light: var(--color-green-light);
    --color-secondary-dark: var(--color-green-dark);


    --color-white: white;
    --color-black: #2d333d;
    --color-grey: #babec0;
    --color-grey-lighter: #f5f5f5;
    --color-grey-light: #D9DADB;
    --color-grey-dark: #59676d;
    --color-grey-darker: #444F54;

    --color-blue-dark: var(--color-black); /*#3d3573;*/

    --color-red: #be4848;

    --color-title: var(--color-black);
    --color-text: var(--color-grey-darker);
    --color-selection: var(--color-black);
    --color-background: transparent;
    --color-button: #191C21;
    --color-link: var(--color-text);
    --color-link-hover: var(--color-secondary);
    --color-link-footer: var(--color-purple-dark);

}

/*
#Todo
- hover button
 */

/* elements */
button:hover, .button:hover, input[type=reset]:hover, input[type=submit]:hover, input[type=button]:hover, input[type=file] + label:hover {
    color: var(--color-button);
}

.button-transparent:hover {
    background-color: var(--color-grey-darker);
    border-color: var(--color-grey-darker);
    color: var(--color-white);
}

.button-white:hover {
    background-color: var(--color-grey-light);
    border-color: var(--color-grey-light);
}

/* hero banner */
section.section.section--hero-banner svg path {
    fill: var(--color-green-light);
}

/* paragraph text media and link */
section.paragraph--text-media-and-link .paragraph_text_media_and_link--image svg path {
    fill: var(--color-secondary-light);
}

/* paragraph journey */
.paragraph--journey {
    background-color: var(--color-green-lighter);
}

.main section.paragraph--journey .content svg {
    opacity: 1;
}

main section.paragraph--journey .content svg path {
    fill: var(--color-green-light);
}

main section.paragraph--journey .field--name-field-timeline > .field__items > .field__item .timeline .field--name-field-anchor-title {
    color: var(--color-black);
}

.paragraph--journey .field--name-field-number {
    color: #191C21; /* #Todo quelle variable ?  actu color-button*/
}

/* paragraph text icon and link */
.paragraph--text-icon-and-link .text_icon_and_link--title, .paragraph--text-icon-and-link .text_icon_and_link--text {
    color: var(--color-white);
}

section.paragraph--text-icon-and-link .text_icon_and_link--brush svg path {
    fill: var(--color-primary-light);
}

/* paragraph two columns */
section.paragraph--columns.background-color-primary {
    background-color: var(--color-green-lighter);
}

section.paragraph--columns svg path {
    fill: var(--color-green-light);
}

/* paragraph testimonial */
main section.paragraph--testimonials.background-default, main section.paragraph--testimonials.background-color-primary-light {
    background-color: var(--color-secondary);
}

main section.paragraph--testimonials blockquote, .main section.paragraph--testimonials .author-name {
    color: var(--color-title);
}

/* paragraph icon slide card */
main section.paragraph--slide-cards {
    background-color: var(--color-white);
}

main section.paragraph--slide-cards .slider .slick-slider .slick-slide > div > .field__item .inner-slide .left svg path {
    fill: var(--color-primary-light);
}

main section.paragraph--slide-cards .slider .slick-slider .slick-slide > div > .field__item .inner-slide .right .content-card .field--name-field-plain-title {
    color: var(--color-title); /* #191C21; /* #Todo quelle variable ? */
}

main section.paragraph--slide-cards .slider .slick-slider .slick-slide > div > .field__item .inner-slide {
    color: var(--color-text);
}

/* paragraph video */
.paragraph-video__title {
    color: var(--color-green-dark);
}

/* paragraph rich text */
section.paragraph.paragraph--rich-text h2 {
    color: var(--color-green-dark);
}

/* paragraph map */
main section.paragraph--center-map {
    background-color: #F0F9F9;;
}

.map svg path {
    fill: #8eb6b6;
}

.map svg circle, .map svg ellipse {
    fill: var(--color-secondary-light) !important;
}

/* paragraph team */
section.paragraph--team {
    background-color: var(--color-primary);
}

section.paragraph--team h2, section.paragraph--team .field--name-field-description-formatted, section.paragraph--team .person-list__item--title, section.paragraph--team .person-list__item--profession {
    color: var(--color-white) !important;
}

/* paragraph articles */
section.paragraph--articles.background-color-primary-light {
    background-color: var(--color-primary-lighter);
}

/*article.node--type-article.node--view-mode-teaser .article_category__name, .card-article .article_category__name {
    color: var(--color-title);
}*/

/* paragraph contact */
section.paragraph.paragraph--contact .section-content .brush svg path {
    fill: var(--color-primary-light);
}

section.paragraph.paragraph--contact .section-content h2, section.paragraph.paragraph--contact .section-content .subtitle, section.paragraph.paragraph--contact .section-content h3, section.paragraph.paragraph--contact .section-content .field__item, section.paragraph.paragraph--contact .section-content .link {
    color: var(--color-white);
}

section.paragraph.paragraph--contact .section-content:before, section.paragraph.paragraph--contact .section-content .contact-blocks .block-address .address:before, section.paragraph.paragraph--contact .section-content .contact-blocks .block-phone:before {
    filter: invert(1);
}

/* paragraph newsletter */
section.paragraph.paragraph--newsletter {
    background-color: var(--color-primary-lighter);
}

section.paragraph.paragraph--newsletter form .form-type-email label, section.paragraph.paragraph--newsletter form fieldset.form-item legend {
    color: var(--color-title);
}

/* header navbar */
ul.menu li span, ul.menu li a:not(.button) {
    color: var(--color-grey-dark);
}

ul.menu-header-group li a, ul.children a {
    color: var(--color-black) !important;
}

ul.menu-header-group > svg path {
    fill: #E6E3F3;
}

/* paragraph 3-cards pictos */
main section.paragraph--3-cards-1 .inner-card .top svg path {
    fill: var(--color-primary-light);
}

/* paragraph 3-cards service */
main section.paragraph--3-cards-2 {
    background-color: var(--color-primary-lighter);
}

/* paragraph 3-cards image */
main section.paragraph--3-cards-3 {
    background-color: var(--color-primary-lighter);
}

/* landing page
-------------------------------------------------*/
.node--type-landing.node--view-mode-full section.section-mega-card-top-article .inner-mega-card-top-article h2, .node--type-landing.node--view-mode-full section.section-mega-card-top-article .inner-mega-card-top-article .top-articles .node--type-article h3 span {
    color: var(--color-white);
}
.node--type-landing.node--view-mode-full section.section-mega-card-top-article svg.arrow path {
    fill: var(--color-white);
}

/* node article
-------------------------------------------------*/
/*article.node--type-article.node--view-mode-full .article__category svg path {
    fill: var(--color-secondary);
}*/


/* update menu style because service menu disabled */
@media all and (min-width: 1024px) {
    .main {
        padding-top: 117rem;
    }
    header.header {
        height: 117rem;
        padding-bottom: 16rem;
    }
    ul.menu-header-group li svg {
        display: none;
    }
    ul.menu-main > li {
        padding-bottom: 0 !important;
        align-self: center;
    }
}

/* floating action button */

section.block--floating-action-button {
    background-color: var(--color-green);
}

section.block--floating-action-button.style-small:hover {
    background-color: var(--color-green-light);
}

/* footer */

section.section-pre-footer .menu li a {
    color: var(--color-title);
}

body .footer-menu ul.menu.menu-footer-bottom-links li a {
    color: var(--color-white);
}