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

a {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-s)}
.langue {margin: 0 var(--space-2xs);}

.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;
    margin-left: 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%)}

.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)}
.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 .banner {margin-bottom: var(--space-2xl)}
.page_sommaire .banner .container {padding: var(--space-xl) var(--space-m)}
.page_sommaire .banner p {font-size:var(--size-step-1)}
.page_sommaire .banner a {margin-top: var(--space-m)}

.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))}    

/* 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;
    padding-top: var(--space-l);
    padding-bottom: var(--space-xl)}
.section--rub :is(article, .intro) {min-width: 40rem}
.rub-header {
    z-index:1;
    grid-column: 4 / span 7;
    align-self: center;} 
.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}     
.rub-header 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}

.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}
.art-logo {
    grid-column: 3 / -3;
    overflow: hidden;
    margin-bottom: var(--space-xl);
    border-radius: var(--border-radius-small)}
.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(--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)}
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%)}
.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}
.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)}  
    .art-content {grid-column: 3 /-3}
    .page_sommaire .intro .art-chapo, .benefits .content--right {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))}    
    .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;
        }
    .rub-header {grid-column-end: span 8}
    .rub-header h1 {margin-bottom: var(--space-xs)}
    .rub-chapo p {line-height: var(--line-height)}
    .article h1, .art-chapo {grid-column: 3 / -3}    
    .article h1 {font-size: var(--size-step-4)}    
    .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)}
    .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}
    .rub-logo {grid-column-start: 6}  
    .rub-logo_suite {grid-column-end: span 5}
    .section--rub {grid-column-start: 6}
    .section--rub :is(article, .intro) {min-width: 34rem}
    .rub--list-entries {grid-gap: 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}
    .block--content {padding:0 var(--space-xs)}
    .page_form h1, .page_form_success h1, .page_form .phone {grid-column: 4 / -4}
    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 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}
    }