:root {
    --header-height:100px;
    --header-height-scroll:80px;
    --border-radius-large:50px;
    --border-radius-big:100px;
    }

a, .animation, .button {transition: all .15s ease-in-out}
.dropbtn {
    margin-right: var(--space-xs);
    font-weight: 400}
a.dropbtn:hover {color: white}
.dropdown:hover .dropdown-content {display: block}
.dropdown-content a:hover {color:var(--main-color);background-color:hsl(from var(--color-grey) h s 85%)}
.search-button:hover svg {scale:115%}
.mainNav a:hover {color:var(--color-grey-light)}
.show--mobile {display: none}
.hide--mobile {display: block}

.mainGrid--desktop, .countGrid--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}
header .logo-main img {max-width: 152px}
.contentHeader .topnav {width: calc(100% - (152px + 76px))}    
.dropbtn {text-transform:inherit}
.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: 48px}

footer .content, .subFooter {grid-column: 3 / -3}
footer .content {
    --count-column:5;
    padding-top: var(--space-2xl)}
footer .logo-main {grid-column: span 2}    
footer ul {margin-bottom: 0}
footer li a, footer .social a {font-size: 1rem}
footer .phone {margin-top: var(--space-m)}         
.subFooter {margin-top: var(--space-2xl)}

.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);
    border-left:1px solid hsl(from var(--color-grey) h s 62.5%)}
.block--content:last-child {border-right:1px solid hsl(from var(--color-grey) h s 62.5%)}

.image-single {
    overflow: hidden;
    border-radius: var(--border-radius-large);}    
.background-video {min-height: 80svh}

.callToAction {padding: var(--space-xl)}
.callToAction .title {font-size:var(--size-step-5)}
.callToAction p {
    margin-bottom: var(--space-l);
    font-size:var(--size-step-3);
    font-weight: 300;
    line-height: var(--line-height-medium)}

.page_sommaire .intro .rub-header .h1 {
    margin-bottom: 0;
    font-size: var(--size-step-3);
    font-weight: 300}
.page_sommaire .rub-logo_suite {display:flex}
.page_sommaire .intro .section--rub {
    padding-left: var(--space-m);
    padding-right: var(--space-m);
    margin:var(--space-xl) auto}
.catchPhrase {right: var(--space-xl);bottom: var(--space-xl)}

.expertises {margin-top: var(--space-2xl)}
.expertises .header {
    grid-column: 3 / -3;
    margin-bottom: var(--space-l);
    position: relative}
.expertises .header a {
    position: absolute;
    right: 0;bottom: 0}
.expertises h2 {
    margin-bottom: var(--space-s);
    font-size: var(--size-step-4);
    font-weight: 300}
.expertises .carousel {padding-top: var(--space-2xl)}
.expertises .carousel-cell {
    width: 25%;
    margin-right: var(--space-xl)} 
.expertises a h3 {font-size: var(--size-step-0)}     

.secteurs {
    margin-top: var(--space-2xl);
    padding-bottom: var(--space-3xl)}
.secteurs .content {
    --count-column:3;
    grid-column: 4 / -4;
    gap:var(--space-l);
    column-gap: 0}
.secteurs svg {grid-column: 1 / span 3}
.secteurs a {
    padding: 0 var(--space-m);
    border-top: 0;border-bottom: 0;
    border-left: 1px solid rgb(255 255 255 / .35);
    text-align: left}
.secteurs a:last-child {border-right: 1px solid rgb(255 255 255 / .35)} 
.secteurs img {max-width: 70px} 
.secteurs .content h2 {
    grid-column: span 3;
    font-size: var(--size-step-1)}
.secteurs h3 {font-weight: 300}    

.securite {padding-top: var(--space-2xl)}
.securite .real-plus {
    padding-top: var(--space-2xl);
    padding-bottom: var(--space-2xl)}
.securite .real-plus p {
    margin-top: var(--space-l);
    margin-bottom: var(--space-l);
    font-size: var(--size-step-3);
    font-weight: 300}

.zoom {padding-top: var(--space-2xl);padding-bottom: var(--space-2xl)}
.zoom h2 {font-size: 1.125rem}
.zoom .rub-header {
    display: flex;
    justify-content: space-between;
    margin-left: var(--space-3xl);
    margin-right: var(--space-xl)}
.zoom .rub-header .h1::after {
    width: 270px;height: 270px;
    left: -100px;top:-125px}

.page_sommaire .real-media 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-plus li {flex-direction: row}
.page_sommaire .real-plus li:has(a) {padding: 0}
.real-plus--picto {
    margin-bottom: 0;
    margin-right: var(--space-xs)}
.page_sommaire .real-media h2 {
    font-size: var(--size-step-4);
    font-weight: 300}

.video h3  {font-size: var(--size-step-5)}
.page_sommaire .video svg {
    margin-bottom: -20px;
    width:85px;
    height: auto}
.partners {margin-bottom: var(--space-xl)}
.partners > * {flex: 0 1 15%}      

.customers {padding-top: var(--space-l)}  
.customers h2 {margin: var(--space-l) auto;font-size: var(--size-step-3)}
.customers .carousel-cell {
    width: 25%;
    margin-right: var(--space-l)}  

/* ARTICLE RUBRIQUE
/* -------------------------- */
.rubrique, .article {padding-top: var(--header-height)}
.section--rub {
    grid-column: 5 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center}
.section--rub :is(article, .intro) {min-width: 40rem}
.rub-header {
    z-index:1;
    grid-column: 4 / span 7;
    align-self: center}
:is(.simple, .categorie) .rub-header {grid-column: 4 / -4} 
.rub-logo {
    grid-column: 5 / -1;
    background: var(--main-color)}
.rub-logo img {opacity: .85}    
.rub-logo_suite {grid-column: 1 / span 4} 
.rub-header, .rub-logo {grid-row: 1}  
.rub--list-entries {
    --count-column: 4;
    grid-column: 2 / -2;
    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: var(--size-step-5);
    font-weight: 300}     
.default .rub-header :is(h1,.h1) {
    margin-top: 0;
    margin-bottom: var(--space-l);
    font-weight: 300;
    line-height: var(--line-height-medium)}
.rub-header h1:not(:has(+ .rub-chapo)) {margin-bottom: 0}
.rub-chapo p {margin-bottom: 0}

:is(.simple, .categorie) .rub-header h1,
.article h1 {
    grid-column: 4 / -4;
    margin: var(--space-xl) 0 var(--space-m);
    font-weight: 300;
    line-height: var(--line-height-medium)}
.art-chapo {grid-column: 4 / -4}
.rub-chapo, .art-chapo {line-height: var(--line-height-large)}
/*:is(.art-chapo, .rub-chapo) p {text-wrap: balance}*/
:is(.simple, .categorie) .rub-chapo,
.article .art-chapo p {margin-bottom: var(--space-xl)}
.art-logo {
    grid-column: 3 / -3;
    overflow: hidden;
    margin-bottom: var(--space-xl);
    border-radius: var(--border-radius-small)}
.article .date {margin-bottom: var(--space-l)}  
               
.art-content {
    --count-column:10;
    grid-column: 4 / -4;
    gap:var(--space-l)}
.art-items {grid-column: 1/ span 7}
.page_simple .art-items,
.page_simple.realisation .art-content > * {
    max-width: 52.5rem;
    margin-inline: auto}

.article .stickyNav {
    position: relative;
    grid-column: span 3 / -1;
    margin-top: var(--space-xs)}
.stickyNav nav {
    top:calc(var(--header-height) + var(--space-l));
    position: sticky}
.article .stickyNav li a {font-size:.875rem} 
.article .stickyNav li:hover {background-color:  hsl(from var(--main-color) h s 25%)}
.article .stickyNav li a:hover {background-color:  transparent} 
.article .stickyNav li a:active {color:var(--color-orange)}
.article .stickyNav li.current:hover {background-color:  hsl(from var(--main-color) h s 25%)}

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(--color-grey-light) h s 85%)}
.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-orange) h s 75%)}
.article .art-frame a:active {background-color:hsl(from var(--color-orange) 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}
.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-blue-light)}

.real-header {padding-bottom: var(--space-2xl)}
.real-plus {padding: var(--space-2xl)}
.real-header svg {transform: translateY(-200px)}
.real-header .category {margin-top: calc(-200px + var(--space-xl));margin-bottom: var(--space-xs)}
.real-plus ul {
    --count-column:3;
    gap: var(--space-m);
    margin-top: var(--space-l)}
.real-plus li {font-size: var(--size-step-1);font-weight: 300}    
.real-plus li, .real-plus li a {padding: var(--space-m)}
.real-plus li a span {font-size: var(--size-step-1)}
.real-plus {grid-row: 3}
.real-plus--img {display:block;grid-column: full;grid-row: 3;background-color: var(--main-color)}
.sup--art-content {margin-top: var(--space-xl)}
.sup--art-content + hr {margin-bottom: var(--space-2xl)}
.realisation .callToAction {padding-bottom: var(--space-2xl)}
.real-media {padding-bottom: var(--space-2xl)}  
.real-media .mozaic {grid-column: 3 / -3}
.video > * {margin-top: var(--space-2xl);margin-bottom: var(--space-2xl)}
.prestation hr {max-width: 85%;margin: var(--space-xl) auto}
.prestation .supTitle {margin: var(--space-xl) 0 var(--space-m);font-size: var(--size-step-4)}   
.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-xs)}
.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)} 
.contactToggle p {font-weight:300}   

.banner-testimony {margin: var(--space-l) 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:hsl(from var(--color-orange) h s 60%)} 

.article.page_chatbot {padding-top: calc(var(--space-xl) + var(--header-height));padding-bottom: var(--space-xl)} 
.page_form form {
    grid-column: 5 / -5;
    justify-content: space-between}
.page_form.article h1, .page_form_success.article h1, 
.page_form_success .art-chapo.success {grid-column: 5 / -5}
.page_contact hr {margin-top: var(--space-2xl)}
.page_form.article .stickyNav a {text-align: center;font-size: var(--size-step-1)}
.page_form.article .stickyNav a p {font-size:1.125rem;max-width: inherit}         
form :is(.email, .subject) {width: calc(50% - (var(--space-l)) / 2)}
.article.page_form .art-chapo, .page_form .phone, .page_form .section--rub, .page_form.article .stickyNav {grid-column: 5 / -5}

@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]}
    .accroche {left:var(--space-2xl)}
    .accroche p {font-size:var(--size-step-3)}  
    .art-content {grid-column: 3 /-3}
    .page_sommaire .intro .art-chapo {margin-left: var(--space-s)}
    .page_form.article h1, .page_form_success.article h1,
    .page_form form, .article.page_form .art-chapo, .page_form .phone, .page_form .section--rub, .page_form.article .stickyNav {grid-column: 4 / -4} 
    }

@media only screen and (max-width: 89.9375rem) {
    :root {
        --border-radius-large:40px;
        --border-radius-big:75px;
        }
    .rub-header {grid-column-end: span 8}
    .rub-header h1 {margin-bottom: var(--space-xs)}
    .rub-chapo p {line-height: var(--line-height)}
    :is(.simple, .categorie) .rub-header, 
    .article h1, .art-chapo {grid-column: 3 / -3}
    :is(.simple, .categorie) .rub-header h1,    
    .article h1 {font-size: var(--size-step-4)}    
    .accroche p {font-size:var(--size-step-2)}
    .secteurs .content {grid-column: 3 / -3}
    .customers .carousel-cell {margin-right: var(--space-m)}
    .real-plus ul {--count-column:2}
    .real-plus li, .real-plus li a {padding:var(--space-s)}
    .prestation .card-testimony {grid-column: 2 / span 4}
    .prestation .subBlock .content {grid-column-start: 7 }
    .next-prev a {font-size: var(--size-step-0)}
    footer .phone a {padding: 0 var(--space-s);font-size: 1.375rem} 
    }

@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)}
    .rub-header {grid-column-start: 5}
    .page_sommaire .intro .rub-header {grid-column-start: 4}
    .rub-logo {grid-column-start: 6}
    .page_sommaire .rub-logo {grid-column-start: 5}
    .rub-logo_suite {grid-column-end: span 5}
    .page_sommaire .rub-logo_suite {grid-column-end: span 4}
    .secteurs .content {grid-column: content}
    .securite .real-plus {padding-top: var(--space-l);padding-bottom: var(--space-l)}
    .securite .real-plus p {font-size: var(--size-step-2)}
    .catchPhrase {right: var(--space-m);bottom: var(--space-m)}
    .section--rub {grid-column-start: 6}
    .section--rub :is(article, .intro) {min-width: 34rem}
    .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}
    .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)}
    footer .content, .subFooter {grid-column: content}
    }

@media only screen and (max-width: 71.9375rem) {
    .contentHeader {grid-column: full;margin-left: var(--space-xs);margin-right: var(--space-xs);}
    .page_form.article h1, .page_form_success.article h1, 
    .page_form form, .article.page_form .art-chapo, .page_form .phone, .page_form .section--rub, .page_form.article .stickyNav {grid-column: 3 / -3}
    .art-content {grid-column: 2 / -2}
    }