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

a {transition: all .15s ease-in-out}
.dropbtn {
    margin-right: var(--space-xs);
    font-size: .875rem;
    font-weight: 400;
    line-height: var(--header-height)}
a.dropbtn:hover span {background-color: var(--color-blue-light)}
.dropdown:hover .dropdown-content {display: block}
.dropdown-content a:hover {color:var(--main-color);background-color:var(--color-blue-light)}
.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;
    margin: var(--space-xs) 0 0} 
.contentHeader .logo-main {top:-8px}
.contentHeader .topnav {
    width: 100%;
    padding-right: var(--space-2xs);
    margin-left: var(--space-l)}    
.dropbtn {text-transform:inherit}
.subNav {
    align-items: center;
    margin-left: auto}
.subNav a {font-size: .875rem}
.langue {margin: 0 var(--space-2xs);} 

footer{
    grid-template-rows: 30em 3.33333em;
    min-height: 33.33333em}
footer .content {
    --count-column:12;
    align-self: center;
    padding-top: 0}
footer .logo-main {grid-column: 1 / span 2}
footer .annonce {
    grid-column: 3 / span 4;
    padding-right: var(--space-2xl);
    margin-top: auto;
    margin-bottom: 0}
footer .logo-main,
footer .annonce {grid-row: 1}
footer ul {
    grid-column: 7 / span 2;
    margin-bottom: 0}
footer ul + ul {grid-column-start: 9}         
footer .infos {grid-column: span 2 / -1}
footer .content .infos,
footer .content > ul {margin-top: var(--space-m)}
.mainNavFooter li:last-child {display: none}       
.subFooter {grid-column: 2 / span 12; margin-top: auto}
.footer_actus header {
    position:relative;
    justify-content: center}  
.footer_actus .btn--primary {
    position: absolute;
    right:var(--space-xl);
    margin-left: 0} 
.footer_actus {grid-column: full}
.page_sommaire .footer_actus {padding-bottom: 0}   
.footer_actus .carousel {height: 475px}
.footer_actus .carousel-cell {
    width: 25%;
    margin-right: var(--space-l)} 

.page_sommaire main:has(:is(.carousel,.background-video,.image-single)) {padding-top: calc(var(--space-xs) + var(--header-height))}
.page_sommaire :is(.carousel,.background-video,.image-single) {
    grid-column: content;
    margin-bottom: var(--space-2xl)}
.image-single {
    overflow: hidden;
    border-radius: var(--border-radius-large);}    
.background-video {min-height: 80svh}
.catchPhrase h1 {
    margin-top: var(--space-2xl);
    margin-bottom: var(--space-2xl);
    font-size:var(--size-step-2);
    line-height:var(--line-height-medium)}
.catchPhrase h1 strong {font-size:var(--size-step-4)}
.catchPhrase .btn--outline {
    margin-left: var(--space-2xs);
    color:white} 

.callToAction {padding: var(--space-xl)}

.page_sommaire .intro .art-logo,
.benefits .content--left {
    margin-bottom: var(--space-2xl);
    border-top-left-radius: 0;
    border-top-right-radius: var(--border-radius)}
.page_sommaire .intro .art-chapo,
.benefits .content--right {
    margin-left: var(--space-l);
    margin-bottom: var(--space-2xl);
    text-align: center}
.page_sommaire .intro .btn--primary {margin-inline: auto}

.page_sommaire :is(.rub--entry, .video, .zoom, .statut, .customers) {margin-bottom: var(--space-2xl)}

.page_sommaire .rub--entry {grid-column: content}
.page_sommaire .rub--entry .content {
    padding: var(--space-xl) var(--space-2xl);
    border-radius: var(--border-radius)}
.page_sommaire .rub--entry a {flex: 0 1 16.66666%}
.page_sommaire .rub--entry a:first-child {border-left: 1px solid rgb(255 255 255 / .35)}
.page_sommaire .rub--entry a:nth-child(2n + 1) {border-left: inherit}
.page_sommaire .rub--entry a:first-child {border-left: 1px solid rgb(255 255 255 / .35)}
.page_sommaire .rub--entry h2 {padding-bottom: var(--space-m)}
.page_sommaire .rub--entry h2 strong {display: block}
.page_sommaire .rub--entry h3 {margin-top: var(--space-m)}

.page_sommaire :is(.video, .zoom) h3 {padding: var(--space-m)}
.page_sommaire .video svg {
    margin-bottom: -20px;
    width:85px;
    height: auto}    

.som--contact .page_form {--count-column: 2}
.som--contact .page_form form {grid-column: 2 / span1}
.som--contact .content {
    align-self: center;
    padding-right: var(--space-2xl)}
.som--contact h2 {
    font-size: var(--size-step-4);
    line-height: var(--line-height-medium)}    
.som--contact h2 strong {
    display: block;
    margin-top: var(--space-3xs);
    font-size: var(--size-step-2)}
.som--contact p {margin-top: var(--space-s)}

.statut {
    --count-column:10;
    padding:var(--space-2xl)}
.statut .section--rub {grid-column: 5 / span 6}
.statut .section--rub article {padding: var(--space-s) 0}
.statut h2 {
    grid-column: 2 / span 3;
    align-self: center;
    padding-right: var(--space-l);
    margin-bottom: 0}

.customers {padding-bottom: 0}  
.customers h2 {margin: var(--space-l) auto}
.customers .carousel-cell {
    width: 25%;
    margin-right: var(--space-l)}

.benefits {min-height: 450px}
.benefits .content--left {
    grid-column: 1 / span 6;
    display: grid;
    position: relative}
.benefits .content--left > * {align-self: center}    
.benefits .content--right {text-align: left}
.benefits .word {
    position: absolute;
    right: -.9375rem}
.benefits h2 {
    margin-left: var(--space-3xl);
    padding-right: calc((170px + .9375rem) + var(--space-l));
    margin-bottom: 0}    

.som--contact,
.reasons {padding: var(--space-2xl) 0}
.reasons header {
    grid-column: 2 / span 3;
    position: relative;
    top: 15%;
    margin-bottom: 0;
    padding-right: var(--space-l)}
.statut h2,
.benefits h2,   
.reasons :is(h2 , p) {
    font-size:var(--size-step-4);
    text-align: left}
.statut h2 strong,    
.benefits h2 strong,    
.reasons :is(h2 , p) strong {
    display: block;
    margin-top: var(--space-3xs);
    font-size: var(--size-step-2);
    font-weight: 400}
.reasons .content {
    grid-column: 5 / -2;
    gap: var(--space-m)}
.reasons .content > * {flex: 0 1 calc(33.33333% - ((2 * var(--space-m)) / 3))}    
.block--content {
    padding: var(--space-m) var(--space-m) var(--space-l);
    border-radius: var(--border-radius)}

/* ARTICLE RUBRIQUE
/* -------------------------- */
.rubrique, .article {padding-top: calc(var(--header-height) + var(--space-l))}
.section--rub {margin-bottom: var(--space-2xl)}
.section--rub:has(+ .rub-more) {margin-bottom: var(--space-xl)}
.rubrique :is(.rub-header, .rub-more,.section--rub) {grid-column: 5 / -5}
.section--rub article img,
.customers article img {max-width: 90px}
.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-4)}
.article .picto {margin-top: var(--space-m)}      
:is(.rubrique,.article) h1 {
    grid-column: 4 / -4;
    margin: var(--space-l) 0 var(--space-2xl);
    line-height: var(--line-height-medium)}
.rubrique h1 {margin-bottom: var(--space-m)}
.rubrique h1:not(:has(+ .rub-chapo)) {margin-bottom: var(--space-xl);}
.section--rub :is(h2,h3) {margin-left: var(--space-l)}

.article .art-chapo,
.benefits .content--right {
    grid-column: span 7 / -1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 0;
    border-top-left-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
    padding: var(--space-xl);
    margin-left: var(--space-l);
    margin-bottom: var(--space-l)}
.rubrique .rub-chapo,
.article .art-chapo {line-height: var(--line-height-large)}
.rubrique .rub-more .rub-chapo p:last-of-type {margin-bottom: var(--space-2xl)}    
.art-logo,
.benefits .content--left {
    grid-column: 1 / span 7;
    overflow: hidden;
    border-top-right-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    margin-bottom: var(--space-l);
    margin-right: var(--space-l);
    display: flex}
.benefits .content--left {overflow: inherit}
.article .date {text-align: left}  
               
.art-content {
    --count-column:10;
    grid-column: 4 / -4;
    gap:var(--space-l)}
.art-items {grid-column: 1/ span 7}
.page_simple .art-content {--count-column:1}
.page_simple .art-items {
    grid-column: 1;
    max-width: 52rem;
    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(--color-blue-light) h s 90%)}
.article .stickyNav li a:hover {background-color:  transparent}
.article .stickyNav li.current a:hover,    
.article .stickyNav li a:active {color:var(--color-blue-light)}
.article .stickyNav li.current:hover {background-color:  var(--main-color)}

h2,h3,h4,h5 {line-height: var(--line-height)}
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 85%)}
.article :is(p, ul, blockquote) a:active {background-color:hsl(from var(--main-color) 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)}

section:has(+ .next-prev)  {padding-bottom: var(--space-xl)}
.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)}

.page_form form {
    grid-column: 5 / -5;
    justify-content: space-between;
    gap: var(--space-l)}
.page_form h1, .page_form_success h1,
.page_form_success .art-chapo.success {grid-column: 5 / -5}
.page_contact hr {margin-top: var(--space-2xl)}         
form :is(.email, .subject) {width: calc(50% - (var(--space-l)) / 2)}
.article.page_form .art-chapo, .page_form .phone, .page_form .section--rub {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)}
    .rubrique :is(.rub-header, .rub-more,.section--rub) {grid-column: 4 / -4}   
    .art-content {grid-column: 3 /-3}
    .art-logo, .benefits .content--left {margin-right: var(--space-s)}
    .page_sommaire .intro .art-chapo, .benefits .content--right, .article .art-chapo {margin-left: var(--space-s)}
    .benefits h2 {margin-left: var(--space-xl);padding-right: calc((170px + .9375rem) + var(--space-s))}
    .reasons .content {grid-column: 6 / -2; gap: var(--space-s)}
    .reasons .content > * {flex: 0 1 calc(33.33333% - ((2 * var(--space-s)) / 3))}    
    .block--content {padding: var(--space-s) var(--space-s) var(--space-m);border-radius: var(--border-radius-small)}
    .page_form h1, .page_form_success h1, .page_form .phone {grid-column: 5 / -5}
    .page_form form, .article.page_form .art-chapo, .page_form .phone, .page_form .section--rub {grid-column: 4 / -4} 
    }

@media only screen and (max-width: 89.9375rem) {
    :root {
        --border-radius-large:40px;
        --border-radius-big:75px;
        }
    .accroche p {font-size:var(--size-step-2)}
    .statut {padding: var(--space-xl)}
    .statut h2 {grid-column: 1 / span 4}
    .customers .carousel-cell {margin-right: var(--space-m)}
    footer .content {--count-column: 9}
    footer .annonce {padding-right: 0}
    footer .logo-main {grid-column: 1 / span 3;margin-top: -10px} 
    footer .annonce {grid-column: 4 / span 6;margin-bottom: var(--space-s)}
    footer ul {grid-column: 4 / span 2}
    footer ul + ul {grid-column: 6 / span 2}
    footer .infos {grid-column: span 2 / -1}
    .article .art-chapo {padding: var(--space-l)}
    .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)}
    .langue--btn {padding: .275rem}
    .dropbtn {margin-right: var(--space-3xs)}
    .dropbtn span {padding: .375rem .350rem}
    .dropbtn.on span::before {left: .375rem;width: calc(100% - .750rem)}
    .block--content {padding: var(--space-s) var(--space-s) var(--space-m)}
    .rubrique :is(.rub-header, .rub-more,.section--rub), .reasons header, .reasons .content {grid-column: 3 / -3}
    .rub--list-entries {grid-gap: var(--space-m)}   
    h1 {font-size: var(--size-step-4)}
    .article .art-chapo {padding: var(--space-m)}
    .page_sommaire .rub--entry .content {padding: var(--space-l) var(--space-m)}
    .page_sommaire .rub--entry a {padding-left: var(--space-2xs); padding-right: var(--space-2xs)} 
    .page_sommaire .rub--entry h3 {font-size: 1.125rem} 
    .statut h2, .benefits h2 {font-size: var(--size-step-3)}
    .benefits h2 {margin-left: var(--space-m);padding-right: calc(170px + .9375rem)}
    .reasons header {margin-bottom: var(--space-l);top: inherit; padding-right: 0}
    .reasons :is(h2 , p) {text-align: center}
    .page_form h1, .page_form_success h1, .page_form .phone {grid-column: 4 / -4} 
    }

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