:root {
    --header-height:90px;
    --header-height-scroll:65px;
    --border-radius-medium:40px;
    --border-radius-large:70px;
    --border-radius-big:100px;
    --text-base-size: 1rem;
    }

a, .animation, .button {transition: all .15s ease-in-out}
a.dropbtn:hover {color: var(--color-green-light)}
.dropdown:hover .dropdown-content {display: block}
.dropdown-content a:hover {color:black;background-color:hsl(from var(--color-green-light) h s 80%)}
.dropdown-content a:hover.on {color:var(--color-green-light); background-color:var(--color-green-dark)}     
.search-button:hover svg {scale:115%}
.show--mobile {display: none}
.hide--mobile {display: block}

.mainGrid--desktop, .countGrid--desktop, .grid--desktop {display: grid}
.mainGrid, .mainGrid--desktop {grid-template-columns: [full-start] minmax(var(--min-column-size), 1fr) [content-start] repeat(12, minmax(var(--min-column-size), 1fr)) [content-end] minmax(var(--min-column-size), 1fr) [full-end]}
.countGrid--desktop {grid-template-columns: repeat(var(--count-column), 1fr)}
 
.openBtn {
    height:45px;
    border-radius: 22px}
.closeBtn {padding: var(--space-m)}
.mainNav, .socialNav, .sidebar .btn-group,
.langue, .search-content {display:block}      

.contentHeader {grid-column: content} 
.contentHeader .logo-main {margin-left: 0; margin-right: auto}   
.subNav {display: flex;align-items: center;margin-left: var(--space-2xs)}
.langue {margin: 0 var(--space-2xs)}
.contentHeader .chatbot {
    display: grid;place-items: center;
    margin-right:var(--space-2xs);
    background: var(--color-grey);color:var(--main-color);
    line-height: 50px;
    width: 50px;height: 50px;
    border-radius: 50%}

.btn--primary,
.btn--secondary {
    transition: all .15s ease-in-out;
    line-height: 43px}

footer .content {--count-column:2}
footer .mapsite {display: flex; flex-wrap: wrap}
footer .logo-main {grid-column: span 2}    
footer ul {margin-bottom: 0}
footer ul, footer .infos {
    margin-top: var(--space-2xl);
    margin-left: var(--space-xl)}
footer ul + ul {margin-left: var(--space-xl)}    
footer li a, footer .social a {font-size: .9375rem}
footer .map {
    margin-left:8.33333%;
    margin-top:-50px}
footer .map p {left: 0;}
.subFooter {padding-left:8.33333%}

.footer_actus .content {
    --count-column:4;
    grid-gap: 0;
    row-gap: var(--space-l);
    padding-bottom: var(--space-2xl)}
.footer_actus header {
    grid-column: span 4;
    position:relative;
    justify-content: center;
    padding-top: var(--space-l)}  
.footer_actus .btn--primary {position: absolute;right:0} 
.block--content {padding:0 var(--space-m)}
.block--content :is(h3, .h3) {margin-top: var(--space-m)}
   
.background-video, .container-video {min-height: 80svh}
.header--sommaire .carousel-cell img,
.image-single img,
.youtube-background {opacity: .75}
.catchPhrase,
.slogan {
    z-index:1;
    position: absolute;
    width:75%;
    left: 12.5%;
    bottom: var(--space-xl);
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: end;
    background: none}
.catchPhrase p {
    max-width: 70%;
    font-family: var(--font-google-secondary);
    font-size: var(--size-step-6);
    line-height: var(--line-height-small);
    color: white}
.catchPhrase p strong {
    margin-bottom: var(--space-2xs);
    font-size: 1.125rem;
    letter-spacing: 2px;
    color:white}
.catchPhrase .buttons {margin-bottom: var(--space-xs)}
.slogan {
    bottom: inherit;
    top: var(--space-2xl);
    border: none;
    font-size: var(--size-step-1);
    color: white}
.header--sommaire .flickity-page-dots {bottom:15px}
.header--sommaire .flickity-page-dots .dot {background: white}

.callToAction {padding-top: var(--space-l);padding-bottom: var(--space-xl)}
:is(.page_presta, .page_real) .callToAction {padding-top: var(--space-3xl)}
.callToAction a {padding: var(--space-xl)}
.callToAction .circle {
    width: 150px;
    height: 150px;
    margin-top: calc(-75px - var(--space-xl))}
.page_sommaire .callToAction  {position:relative;border-width: 100px}
.callToAction .dessin {
    display: block;
    position: absolute;
    z-index: 2;right: 0;top: var(--space-2xl);
    mix-blend-mode: multiply;
    opacity: .3}
.page_sommaire .callToAction .circle {margin-top: -75px}
.callToAction .circle img {width: 62px} 
.callToAction .title {
    margin-top: var(--space-m);
    font-size:calc(.9 * var(--size-step-5))}
.callToAction p {margin-bottom: var(--space-l)}

.intro--sommaire {padding:var(--space-2xl) 0}
.intro--sommaire .content {
    grid-column: 4 / -4;
    display: flex;
    gap: var(--space-l)}
.intro--sommaire .content > * {flex: 0 1 50%}
.intro--sommaire h1 {font-size: var(--size-step-1)}
.intro--sommaire p {font-size: .875rem}    
.intro--sommaire a {margin-top: var(--space-s)}

.expertises {padding-top: var(--space-xl)}
.expertises .header {
    grid-column: 3 / -3;
    position: relative}
.expertises .header a {
    position: absolute;
    right: 0;bottom: 0}
.expertises .carousel {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-l)}
.expertises .carousel-cell {
    width: 25%;
    margin-right: var(--space-xl)}
.expertises .carousel-cell img {
    border-bottom-left-radius: var(--border-radius-large);
    border-bottom-right-radius: var(--border-radius-large)}   

.zoom {padding-top: var(--space-2xl);padding-bottom: var(--space-2xl)}
.zoom-header {padding: var(--space-m) 0}
.zoom-header .title {
    flex-basis: calc(100% - (110px + var(--space-xl)));
    margin-left:8.33333%;
    padding-right: var(--space-xl)}
.zoom h2 {font-size: 1.125rem}
.zoom h3 {font-size: var(--size-step-5)}   
.zoom picture {border-radius: var(--border-radius-large)}
.zoom-header .button {margin-bottom: var(--space-2xs);margin-right: 8.33333%}  

.page_sommaire .real-media {
    background-size: cover;
    background-repeat: no-repeat}
.page_sommaire .real-media .mozaic > a div {left: var(--space-l);bottom: var(--space-l)}
.page_sommaire .real-media .header {
    padding-top: var(--space-2xl);
    padding-bottom: var(--space-l)}
.page_sommaire .real-media .header h2 {
    width: inherit;
    text-align: left}
.page_sommaire .real-media .button {margin-inline: inherit}
.page_sommaire .real-media .mozaic > a h3 {font-size: var(--size-step-2)}
.page_sommaire .real-items {
    --count-column:4;
    grid-column: 3 / -3;
    column-gap:var(--space-xl);
    row-gap: 0}
.page_sommaire .real-items h2 {
    grid-column: span 4;
    margin-top: var(--space-xl);
    margin-bottom: var(--space-m)}
.page_sommaire .real-items h3 { margin-top: var(--space-s)}

.page_sommaire .real-plus {padding-bottom: var(--space-xl)}
.page_sommaire .real-plus ul {padding-top: var(--space-l);padding-bottom: var(--space-l)}
.page_sommaire .real-plus h2 {
    font-size: var(--size-step-4);
    text-align: left;}
.page_sommaire .real-plus h2 strong {font-size: 1.125rem}
.page_sommaire .real-plus li:has(a) {padding: 0}

.video h3  {font-size: var(--size-step-5)}
.page_sommaire .video svg {
    margin-bottom: -20px;
    width:85px;
    height: auto}     
 
.customers h2 {margin: var(--space-xl) auto var(--space-l)}
.customers .carousel-cell {
    width: 25%;
    margin-right: var(--space-l)}  

/* ARTICLE RUBRIQUE
/* -------------------------- */
.rub--list-entries {
    --count-column: 4;
    grid-gap: var(--space-l)}   
.rub--list-entries:not(:has(+ .next-prev)) {padding-bottom: var(--space-2xl)}  
.rub--list-entries .highlight {
    grid-column-end: span 3;
    position: relative}  

 h1,.h1 {
    text-wrap: balance;
    font-size: calc(var(--size-step-5) * .9)}     
.rub-header {
    margin-top: var(--space-xl);
    margin-bottom: var(--space-xl)}
.rub-chapo p {
    margin-bottom: 0;
    text-align: justify;
    text-wrap: inherit}
.section--rub {grid-column: 4 / -4}

.article {padding-bottom: var(--space-xl)}
.art-header > * {grid-row:1; grid-column: 1}
.art-header div {
    z-index: 1;
    align-self:end;
    display: flex;
    justify-content: space-between;
    align-items: end;
    padding: var(--space-m) 0;
    border-top:1px solid rgb(255 255 255 / .5)}
.art-header h1 {
    max-width: 66.66666%;
    margin-left: 8.33333%;
    color: white}
.art-header .date {margin-right: 8.33333%}    
.art-chapo {grid-column: 3 / -3}  
.article .art-chapo p {
    max-width: 52.5rem;
    margin-bottom: var(--space-xl)}
.art-chapo p {
    font-size: 1.250rem;
    font-weight: 400;
    color: black}
.rub-chapo, .art-chapo {line-height: var(--line-height-large)}
.article .art-chapo p,
.article .art-header:has(.date) + .art-chapo p {margin-top: var(--space-l)}
.art-logo {
    margin-top: var(--space-2xl);
    margin-bottom: 0;
    border-radius: var(--border-radius-large)}
.art-logo img {opacity: .8} 
               
.page_art .art-content {
    grid-column: 3 / -3;
    display: flex;
    gap: var(--space-l);
    justify-content: space-between}
.art-items {max-width: 50rem}
.page_simple .art-items,
.page_simple.realisation .art-content > * {
    max-width: 50rem;
    margin-inline: auto}

.article .stickyNav {
    position: relative;
    margin-top: var(--space-xs)}
.art-content .stickyNav {max-width: 18rem}    
.stickyNav nav {
    top:calc(var(--header-height-scroll) + var(--space-l));
    position: sticky}
.article .stickyNav li a {font-size:.875rem} 
.article .stickyNav li:hover {background-color:  hsl(from var(--color-green-dark) h s 30%)}
.article .stickyNav li a:hover {background-color:  transparent} 

h2,h3,h4,h5 {line-height: var(--line-height-medium)}
p,li,blockquote,pre {line-height: var(--line-height-large)}
   
.article :is(p, ul, blockquote) a:hover {background-color: hsl(from var(--main-color) h s 87%)}
.article :is(p, ul, blockquote) a:active {background-color:hsl(from var(--color-grey) h s 65%)}
.article .art-frame a:hover {background-color: hsl(from var(--color-green) h s 75%)}
.article .art-frame a:active {background-color:hsl(from var(--color-green) h s l)}
.btn--group > * {flex:0}

.article button svg {margin-right: inherit}
.article .toggleBtn {padding: var(--space-m) 2.5rem; padding-left: 0}
.article .toggleBtn :is(h2,h3,h4) {text-wrap: pretty;font-size: var(--size-step-0)}
.block > .content {padding-left: var(--space-xl)}
.download a {font-size: var(--size-step--1)}

.art-frame {padding: var(--space-m)}
.art-frame span {padding: var(--space-m) var(--space-m) calc(var(--space-m) - var(--space-xs))}
.article .carousel-cell {margin-right: var(--space-m)} 

.next-prev {
    grid-gap: var(--space-l);
    margin-top:var(--space-xl)} 
.next-prev {--count-column:2}
.page_art .next-prev {grid-column: 3 / -3}
.next-prev a {
    align-items: flex-start;
    padding: var(--space-xs);
    font-size: var(--size-step-0)}
:is(.prev,.next) div {padding:0 0 0 var(--space-s)}
.next-prev a:hover {background-color: var(--color-green-light)}

.real-header, .real-plus {padding-left: 7.14285%;padding-right: 7.14285%}
.real-header {padding-top: var(--space-2xl);padding-bottom: var(--space-2xl)}
.real-header .second {
    margin-top: var(--space-xl);
    padding: var(--space-xl) var(--space-2xl)}
.real-header .second:has(> .real-logo-chapo) {gap:var(--space-l)}
.real-header .second:has(> .real-logo-chapo) > * {flex-basis: calc(50% - (var(--space-l) / 2))}
.real-plus h2 {
    border-top-left-radius: var(--border-radius-large);
    border-top-right-radius: var(--border-radius-large);
    padding: var(--space-m)}
.real-plus ul {
    --count-column:3;
    gap: var(--space-m);
    padding: var(--space-m) 8.33333% 0}   
.real-plus li, .real-plus li a {padding: var(--space-s)}
.real-plus li {font-size: 1.125rem}
.real-plus--img {display:block;grid-column: full;grid-row: 3;background-color: var(--main-color)}
.sup--art-content {margin-top: var(--space-2xl)}
.sup--art-content + hr {margin-bottom: var(--space-l)}
:is(.page_presta, .page_real) .callToAction {padding-bottom: var(--space-2xl)}
.real-media {padding-top: var(--space-2xl); padding-bottom: var(--space-2xl)}  
.real-media .mozaic {grid-column: 3 / -3}
.video > * {margin-top: var(--space-2xl);margin-bottom: var(--space-2xl)}
.prestation .supTitle {margin: var(--space-xl) 0 var(--space-m)}   
.prestation .toggleBtn {padding-top: var(--space-l);padding-bottom: var(--space-l)}
.prestation .toggleBtn :is(h2,h3,h4) {font-size: var(--size-step-3)}
.prestation .number {margin-right: var(--space-m)} 
.prestation .example {margin-top: var(--space-s);padding-top: var(--space-s)}
.prestation .card-testimony {grid-row:1;grid-column: 4 / span 3;margin: 0}
.prestation .subBlock {align-items: start}
.prestation .subBlock .content {grid-column: 8 / -1; max-width: inherit;margin:0}
.contactToggle {margin-top: var(--space-l);margin-bottom: var(--space-s); padding: var(--space-m) var(--space-s)} 
.contactToggle p {font-weight:300}   

.banner-testimony {margin: var(--space-l) 0}
.page_real .banner-testimony {margin-bottom: 0}
.banner-testimony:has(.first) {--count-column:1;grid-column:6 / -6}
.banner-testimony:has(.third) h2 {grid-column: span 1}
.banner-testimony:has(.second) {--count-column:2;grid-column:4 / -4}
.banner-testimony:has(.third) h2 {grid-column: span 2}
.banner-testimony:has(.third) {--count-column:3;grid-column:3 / -3}
.banner-testimony:has(.third) h2 {grid-column: span 3}

.categorie .rub--list-entries {--count-column: 3}
.categorie .rub--list-entries span {left: var(--space-l);right: var(--space-l);bottom: var(--space-l)} 
.categorie .rub--list-entries h2 {font-size:var(--size-step-1)}
.categorie .rub--list-entries .logo:hover img {mix-blend-mode:luminosity;opacity: .35;transform: scale(1.025)} 
.categorie .rub--list-entries .logo:hover {background-color:var(--main-color)} 

.page_form form {justify-content: space-between;}        
form :is(.email, .subject) {width: calc(50% - (var(--space-l)) / 2)}

@media only screen and (max-width: 99.9375rem) {
    .mainGrid, .mainGrid--desktop {grid-template-columns: [full-start] minmax(var(--min-column-size), .5fr) [content-start] repeat(12, minmax(var(--min-column-size), 1fr)) [content-end] minmax(var(--min-column-size), .5fr) [full-end]}
    .catchPhrase p {max-width:80%;font-size: var(--size-step-5)}
    .section--rub {grid-column: 3 / -3}
    .real-header, .real-plus {padding-left: 3.84615%;padding-right: 3.84615%}
    .page_sommaire .real-items {column-gap: var(--space-l)}
    footer ul, footer .infos {margin-left: var(--space-xl)}
    footer ul + ul {margin-left: var(--space-l)}     
    }

@media only screen and (max-width: 89.9375rem) {
    :root {
        --border-radius-large:40px;
        --border-radius-big:75px;
        }
    .catchPhrase, .slogan {width:85%;left: 7.5%;right: 7.5%}
    .intro--sommaire .content {grid-column: 3 / -3}
    .zoom-header .title {flex-basis: calc(100% - (110px + var(--space-m)));margin-left:4.33333%;padding-right: var(--space-m)}
    .zoom h3 {font-size: var(--size-step-4)}   
    .zoom-header .button {margin-right: 4.33333%}
    footer .infos {width:100%;margin-top: var(--space-s)}  
    .rub-chapo p {line-height: var(--line-height)}
    :is(.simple, .categorie) .rub-header, 
    .article h1, .art-chapo, .page_art .art-content {grid-column: 2 / -2}
    .art-header h1 {margin-left:4.33333%;max-width: 75%}
    .art-header .date {margin-right: 4.33333%}
    .art-items {max-width: 40rem}
    :is(.simple, .categorie) .rub-header h1, .article h1 {font-size: var(--size-step-3)}
    .page_art .next-prev {grid-column: content}    
    .customers .carousel-cell {margin-right: var(--space-m)}
    .real-plus ul {--count-column:2}
    .prestation .card-testimony {grid-column: 2 / span 4}
    .prestation .subBlock .content {grid-column-start: 7 }
    .next-prev a {font-size: var(--size-step-0)}
    }

@media only screen and (max-width: 79.9375rem) {
    .contentHeader .topnav {margin-left: var(--space-2xs)}
    .topnav .btn--contact {padding: 0 var(--space-2xs)}
    .dropbtn {margin-right: var(--space-3xs)}
    .catchPhrase, .slogan {width:calc(100% - (2 * var(--space-l)));left: var(--space-l);right: var(--space-l);bottom: var(--space-m)}
    .slogan {top: var(--space-l); bottom: inherit}
    .intro--sommaire, .expertises {background-size:50% auto}
    .intro--sommaire .content {grid-column: 2 / -2; gap:var(--space-m)}
    .expertises {padding-top: var(--space-l)}
    .expertises .header {grid-column: content}
    .expertises h2, .page_sommaire .real-media h2 {font-size: var(--size-step-2)}
    .expertises .carousel {padding-top: var(--space-l)}
    .real-media .mozaic {grid-column: 2 / -2}
    .page_sommaire .real-items {grid-column:2 / -2; column-gap: var(--space-m)}
    .customers .carousel-cell {width: 33.33333%;margin-right: var(--space-m)}
    .section--rub {grid-column: 2 / -2}
    .rub--list-entries {grid-gap: var(--space-m)}
    .categorie .rub--list-entries span {left: var(--space-m);right: var(--space-m);bottom: var(--space-m)}
    .categorie .rub--list-entries h2 {font-size:var(--size-step-0)}
    .banner-testimony:has(.first) {grid-column:4 / -4}
    .banner-testimony:has(.second), .banner-testimony:has(.third) {grid-column:content}
    .real-header .second {padding: var(--space-l)}
    .real-header .second:has(> .real-logo-chapo) {gap:var(--space-m)}
    .real-header .second:has(> .real-logo-chapo) > * {flex-basis: calc(50% - (var(--space-m) / 2))}
    .prestation .card-testimony {grid-column: 1 / span 5; margin-right: var(--space-l)}
    .prestation .subBlock .content {grid-column-start: 6}
    .block--content {padding:0 var(--space-xs)}
    }

@media only screen and (max-width: 71.9375rem) {
    .contentHeader {grid-column: full;margin-left: var(--space-xs);margin-right: var(--space-xs)}
    .real-header .second:has(> .real-logo-chapo) > * {flex-basis: 100% }
    }