:root {
    --header-height:90px;
    --header-height-scroll:0;
    --text-base-size: 1rem;
    --border-radius-large:50px;
    --border-radius-big:100px;
    }

a {transition: all .15s ease-in-out}
.dropbtn {
    margin-right: .5rem;
    font-size: .875rem;
    font-weight: 400;
    line-height: 54px}
a.dropbtn:hover span {background-color: rgb(0,0,0,.15)}
.dropdown:hover .dropdown-content {display: block}
.dropdown-content a:hover {color:black; background-color: rgb(0,0,0,.15)}
.search-button:hover svg {scale:120%}
.search-button:hover {color: white}
:is(.mainNav, .subNav) a:hover {
    padding-left: .250rem;
    color:#4c723a}
.show--mobile {display: none}
.hide--mobile {display: block}

.mainGrid--desktop, .countGrid--desktop {display: grid}
.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:40px;
    width:40px;
    border-radius: 20px}
.closeBtn {padding: var(--space-m)}
.mainNav, .subNav, .socialNav, .sidebar .btn--group,
.langue, .search-content {
    width: 425px;
    margin-left: var(--space-xl)}
.supTitleNav {margin-top: var(--space-l)}         
.subNav a {font-size: var(--size-step--1)}
.contentHeader {
    margin-top: var(--space-s);
    border-radius: var(--border-radius-small);
    padding: var(--space-2xs) var(--space-xs)}
header.scroll .contentHeader {
    margin-top: var(--space-2xs);
    box-shadow: 0 5px 15px rgb(0,0,0,0.1)}
 
.footer--pub .square {max-width: 970px}
.footer--pub .square > * {flex:1 1 0}    
footer .content {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    text-align: inherit}
footer .colLeft {grid-column: 1}
footer .colRight {grid-column: 3}
footer .line {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 1px;
    height: 100%}
footer .logo-main {
    margin-top: var(--space-2xl);
    padding-top: 0}
footer ul {margin-bottom: 0}       
footer .content > ul {margin-top: var(--space-m)}         
.navFooter {
    display: flex;
    padding-top: var(--space-2xl);
    padding-left: var(--space-2xl)}
.subFooter {padding-top: var(--space-l)}    
.subFooter.colLeft {padding-top: 0}    
.subFooter.colRight {padding-left: var(--space-2xl);padding-top: 0}    
footer .social {margin-left: auto}
.footer--pub .content {padding:0}

.page_sommaire main:has(:is(.carousel,.background-video,.image-single)) {padding-top: 0}
.background-video {min-height: 80svh}
.page_sommaire :is(.carousel-cell, .image-single) img {opacity: .8}
.catchPhrase {
    z-index: 5;
    position: absolute;
    transform: translateY(-50%);
    top: 50%;left: 0;right: 0;
    border-bottom: none}
.catchPhrase p {
    max-width: 50%;
    font-size: var(--size-step-6);
    color:white}
.catchPhrase .buttons {margin-top: var(--space-m)}        
.catchPhrase .btn--outline {color:white}

.page_sommaire .rubrique header {padding-top: var(--space-2xl)}

.page_sommaire .slogan {
    z-index: 4;
    overflow: inherit}
.page_sommaire .slogan p strong {
    font-size: var(--size-step-2);
    text-transform: uppercase}
.page_sommaire .slogan p {font-size: calc(1.5 * var(--size-step-7))}
.page_sommaire .slogan picture {
    grid-column: 4 / -4;
    opacity: .9}

.banner--club {
    padding-top: var(--space-2xl);
    padding-bottom: var(--space-2xl)}
.banner--club header {grid-column: 1 / span 7}
.banner--club article {grid-column: 9 / -2}
.banner--club img {
    margin-bottom: var(--space-m);
    margin-left: -2px}
.banner--club :is(h2, .h2) {text-align: right}

.banner--actus {
    --count-column: 5;
    grid-column-gap: var(--space-l);
    padding-bottom: var(--space-xl)}
.banner--actus header {
    grid-column: span 5;
    display: flex;
    align-items: center;
    padding: 0;
    background: none}
.banner--actus header > a {
    margin-top: 0;
    margin-left: auto}     
.banner--actus :is(h2, .h2) a {
    margin-bottom: var(--space-xs);
    font-size: var(--size-step-5)}  
.banner--actus :is(h3, .h3) a {
    font-size: var(--size-step--1);
    line-height:var(--line-height-medium)}

.page_sommaire .zoom {--count-column:2}
.page_sommaire .zoom .content {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 var(--space-xl) 0 var(--space-3xl)}
.page_sommaire :is(.zoom,.video) h3 {margin-bottom:var(--space-s)}
.page_sommaire .zoom h3 strong {color:white}
.page_sommaire .zoom .content img {
    display: block;
    margin-right: calc(-1 * var(--space-xl))}
.page_sommaire .video {padding: var(--space-l)}
.page_sommaire .video .content {
    margin-left: var(--space-3xl);
    margin-bottom: var(--space-3xl);
    text-align: left}
.page_sommaire .video .poster {
    justify-items: start;
    align-items: end}
.page_sommaire .video h3,
.page_sommaire .accessoires h2 a,
.page_sommaire .accessoires a h2  {
    font-size: var(--size-step-5);
    line-height: var(--line-height-small)}
.page_sommaire .video svg {
    margin-bottom: -20px;
    width:85px;
    height: auto}

.page_sommaire .accessoires,
.page_sommaire .infos {
    padding-top: var(--space-2xl);
    padding-bottom: var(--space-2xl)}
.page_sommaire .accessoires header {grid-column: 2 / span 4}
.page_sommaire .accessoires .content {
    gap: var(--space-m);
    grid-column: 7 / span 7}
.page_sommaire .accessoires .content > * {flex:0 1 calc((100% - (2 * var(--space-m))) / 3)}
.page_sommaire .test {
    margin-top: var(--space-m);  
    grid-column: 7 / span 7}
.page_sommaire .test h2 {
    z-index: 5;
    position: absolute;
    max-width: 75%;
    margin-top: var(--space-xl);
    left: calc(-1 * var(--space-2xl))}
.page_sommaire .test h3 {
    left: var(--space-xl);
    right: var(--space-xl);
    bottom: var(--space-xl);
    font-size: var(--size-step-2)}

.page_sommaire .infos {grid-column: full}
.page_sommaire .infos ul {
    margin-top: var(--space-l);
    margin-bottom: var(--space-l)}
.page_sommaire .infos li a {
    padding-top: var(--space-s);
    padding-bottom: var(--space-s)}
 

/* ARTICLE RUBRIQUE
/* -------------------------- */ 
.rub--list-entries {
    --count-column: 4;
    grid-column: 2 / -2;
    grid-gap: var(--space-l)}   
.rub--list-entries:not(:has(+ nav)) {padding-bottom: var(--space-2xl)}  
.rub--list-entries .highlight {
    grid-column-end: span 3;
    position: relative}
.rub--list-entries .normal {grid-column-end: span 2}
.rubrique h2 {font-size:var(--size-step-0)}
.rubrique .highlight .content {
    z-index: 1;
    position:absolute;
    right: 0;
    bottom:var(--space-xl) ;
    max-width: 65%;
    background:none;
    text-align: right}
.rubrique .highlight h2 {
    display: inline-block;
    margin-top: var(--space-xs);
    padding: var(--space-2xs) var(--space-l) var(--space-2xs) var(--space-2xs);
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    background-color: var(--color-grey-blue)}
.rubrique .highlight h2 a {
    font-size: .875rem;
    text-transform: uppercase}
.rubrique .highlight span {display: inline-block}
.rubrique .highlight span a {
    padding-right: var(--space-l);
    font-size: var(--size-step-5);
    font-weight: 400;
    line-height: var(--line-height-small);
    color: white}
.rub--list-models .normal h2 strong,
.page_search .rub--list-entries h2 strong,
.rubrique.alter :is(h3, .h3) strong {font-size: .875rem}

.rubrique.alter article {position: relative}
.rubrique.alter picture {background-color: black}
.rubrique.alter img {opacity: .8}
.rubrique.alter :is(h3, .h3) {
    z-index: 5;
    position: absolute;
    max-width: 65%;
    font-size: var(--size-step-5)}
.rubrique.alter :is(h3, .h3) :is(a, strong) {color: white}
.rubrique.alter :is(h3, .h3) strong {font-weight: 400}
.rubrique.alter .colLeft :is(h3, .h3) {
    top: var(--space-m);
    right:var(--space-m);
    text-align: right}
.rubrique.alter .colRight :is(h3, .h3) {
    bottom: var(--space-m);
    left:var(--space-m)}

.article {padding-top: 0}
.art-content {grid-column: 4 / span 6}
.article .art-diptyque {--count-column:2; margin-bottom: var(--space-2xl)}
.page_simple .art-content {
    grid-column-start: 5;
    margin-top: calc(var(--header-height) + var(--space-l))}
.page_simple article h1 {margin-bottom: var(--space-l)}

h1,.h1 {
    text-wrap: balance;  
    line-height: var(--line-height)}
p,li,blockquote,pre {line-height: var(--line-height-large)}

.article .date {margin-top: var(--space-2xs)}  
.article :is(p, ul, blockquote) a:hover {background-color: hsl(from var(--color-green) h s 75%)}
.article :is(p, ul, blockquote) a:active {background-color:hsl(from var(--color-green) h s l)}
.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}
.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:var(--space-xl) 0} 
.next-prev {--count-column:2}
.next-prev .back {grid-column: span 2; margin: 0}
.next-prev div a {
    align-items: flex-start;
    padding: var(--space-s);
    font-size: var(--size-step-0)}
:is(.prev,.next) div {padding:0 0 0 var(--space-s)}
.next-prev div a:hover {background-color: hsl(from var(--color-grey-light) h s 70%)}
.rubrique .next-prev div a:hover {background-color: hsl(from var(--color-grey-dark) h s 30%)}

.page_form form,
.article.page_form header {
    grid-column: 5 / -5;
    justify-content: space-between;
    gap: var(--space-l)}
.page_contact hr {margin-top: var(--space-2xl)}         
form :is(.name, .email) {width: calc(50% - (var(--space-l)) / 2)}

.banner {margin-bottom: var(--space-2xl)}

.card--scooter {padding-top: 0}
.scoot--catchphrase {font-size: var(--size-step-6)}
.card--scooter h1,
.rubrique h1,
.rubrique.alter header :is(h2,.h2),
.article h1 {
    align-self: self-start;
    margin-bottom: 0;
    font-size: var(--size-step-2)}
.article h1 {
    margin-top: -1.25rem;
    font-size: var(--size-step-4)}
.card--scooter header,
.rubrique header,
.rubrique.alter .content,
.article header {
    --count-column:2;
    grid-column: 3 / -3;
    grid-gap: var(--space-l);
    padding: var(--space-2xl) 0}
.rubrique header {padding: var(--space-xl) 0 var(--space-l)}
.rubrique header:has(+ section) {padding-bottom: var(--space-xl)}
.progress + header {margin-top: var(--space-2xl) }
.rubrique.models + .rubrique.alter header {padding-bottom: var(--space-xl)}
.rubrique.alter .content {
    grid-gap: var(--space-l);
    padding-top: 0}

.rubrique.alter .content.rowTop {padding-top: var(--space-xl)}
.rubrique.alter .content.rowBottom {padding-bottom: var(--space-xl)}
.rubrique .rowTop +  h2 {grid-column: 3 / -3}

.rub--list-models {
    --count-column:6;
    padding-top: var(--space-2xl)} 
.rubrique.models :is(h1,.rub-chapo,.rub-chapo--suite) {
    z-index: 1;
    position: relative;
    padding: 0}
.rubrique.models h1 {
    margin-top: calc(var(--header-height) + var(--space-xl));
    margin-bottom: var(--space-m);
    font-weight: 400;
    font-size: var(--size-step-7);
    line-height: var(--line-height-small)}
.rubrique.models h1 strong {
    display: block;
    font-weight: 400;
    font-size: var(--size-step-4)}
.rubrique.models :is(.rub-chapo,.rub-chapo--suite) {text-align: justify}
.rubrique.models header::before {
    z-index: 0;
    background-size: 50% auto;
    position: absolute;
    content: "";
    left: 0;
    right: 0;
    top: 0;
    bottom: -35%;
    width: 100%;
    height: 135%;
    margin-inline: auto;
    opacity: 0.05} 
.page_search .rub--list-entries {padding-top:var(--space-2xl)}      
.page_search .rubrique.models h1 {font-size: var(--size-step-4)}    
.search-select {padding: 0}

.card--scooter :is(.lite-youtube,.poster) {margin-bottom: var(--space-2xl)}
.scoot--imgX3,.scoot--spec {--count-column:12}
.scoot--imgX3,.card--scooter :is(.col1,.col2) {padding:var(--space-2xl) 0}   

.scoot--imgX3 :is(.content,.album) {z-index: 0} 
.scoot--imgX3 .content {
    grid-column: 3 / span 4;
    align-self: center}
.scoot--imgX3 .album {
    grid-column: span 6 / -2;
    place-content: center;
    margin-top: 0}
.scoot--imgX3 .right {
    grid-row: span 2;
    display: flex;
    align-items: center}         
.scoot--imgX3 .thumbnail {grid-column: span 1}
.scoot--imgX3,
.scoot--imgX2 {position: relative}
.scoot--imgX3::before,
.scoot--imgX2::before {
    content: "";
    position: absolute;
    bottom: -15%;
    left: -15%;
    width: 75%;
    height: 75%;
    opacity: 0.05}

.scoot--spec {padding: var(--space-2xl) 0}
.scoot--spec :is(h2,ul) {grid-column: 2 / span 8}
.scoot--spec ul {padding-right: var(--space-m)}
.scoot--spec h2,
.scoot--toggle h2  {
    grid-row: 1;
    font-size: var(--size-step-4);
    font-weight: 400}        
.scoot--spec .link {
    grid-row: 2;
    grid-column: span 3 / -1;}

.scoot--imgX2 {
    display: flex;
    padding-bottom: var(--space-2xl)}
.scoot--imgX2 :is(.colLeft, .colRight) {
    --count-column: 7;
    z-index: 5;
    flex:1 1 0}                  
.scoot--imgX2 picture {
    grid-column: 1 / span 7;
    margin-bottom: var(--space-2xl)}                  
.scoot--imgX2 :is(h3,p,.image) {grid-column-end: span 4}                  
.scoot--imgX2 .colLeft :is(h3,p,.image) {grid-column-start: 3}                  
.scoot--imgX2 .colRight :is(h3,p,.image) {grid-column-start: 2}
.scoot--imgX2 .colLeft p:last-of-type {margin-bottom: 0}
.scoot--imgX2::before {
    left: 0;
    right: 0;
    bottom: -10%;
    width: 60%;
    height: 60%;
    margin-inline: auto;
    opacity: 0.05}                  

.scoot--toggle {padding-bottom: var(--space-2xl)}
.scoot--toggle .toggleBtn {
    padding-top: var(--space-l);
    padding-bottom: var(--space-l)} 
.scoot--toggle h2 {
    z-index: 1;
    grid-column: 1 / span 6;
    grid-row: 1;
    align-self: end}
.scoot--toggle h2 + p {
    z-index: 1;
    grid-column: span 5 / -2;
    grid-row: 2}
.scoot--toggle .block > .content {grid-column: 7 / span 5}
.scoot--toggle h3 {font-size: var(--size-step-2)}
.number {margin-right: var(--space-m)}
.scoot--toggle button svg {margin-right: var(--space-s)}

.scoot--prosCons {
    padding-top:var(--space-2xl);
    padding-bottom:var(--space-2xl)}
.scoot--prosCons h2 {
    grid-column: 3 / span 4;
    font-size: var(--size-step-6);
    line-height: var(--line-height-medium)}
.scoot--prosCons h2 strong {
    margin-bottom: var(--space-2xs);
    font-size: var(--size-step-2)}
.pros, .cons {
    grid-column: span 4 / -3;
    padding: var(--space-l)}
:is(.pros, .cons) li {font-size: 1.125rem}
.scoot--prosCons br {display: block}      

@media only screen and (max-width: 99.9375rem) {
    .catchPhrase p {max-width: 65%}
    .page_sommaire .accessoires h2 a, .page_sommaire .accessoires a h2 {font-size: var(--size-step-4)} 
    .rubrique .highlight .content, .rubrique.alter h3 {max-width: 85%}
    .art-content {grid-column: 3 / span 7}
    .page_simple .art-content {grid-column: 4 / -4}
    .banner--actus {grid-column: 3 / -3}
    .page_form form, .article.page_form header {grid-column: 4 / -4}
    .card--scooter header, .rubrique header, .rubrique.alter .content, .article header, .rubrique .rowTop +  h2 {grid-column: content}
    .scoot--toggle h2 + p, .block > .content {grid-column: span 6 / -1}
    .scoot--imgX3 .content {grid-column: 2 / span 5}
    .scoot--spec :is(h2,ul) {grid-column: 1 / span 9}
    .scoot--prosCons h2 {grid-column: 2 / span 5}
    .pros, .cons {grid-column: span 5 / -2} 
    }

@media only screen and (max-width: 89.9375rem) {
    :root {
        --border-radius-large:40px;
        --border-radius-big:75px;
        }
    .catchPhrase p {max-width: 80%}
    .page_sommaire .slogan p {font-size: calc(1.25 * var(--size-step-7))}
    .page_sommaire .video .content {margin-left: var(--space-2xl);margin-bottom: var(--space-2xl)}    
    .scoot--toggle h2 {grid-column-end: span 8}
    .scoot--imgX2 :is(h3,p,.image) {grid-column-end: span 5}
    .scoot--imgX2 .colLeft :is(h3,p,.image) {grid-column-start: 2}
    .scoot--toggle .block > .content {grid-column: 7 / span 6}
    .scoot--toggle h3 {font-size: var(--size-step-1)}
    .scoot--prosCons h2 {grid-column: 2 / span 5}
    .pros, .cons {grid-column: span 5 / -2}  
    }

@media only screen and (max-width: 79.9375rem) {
    .dropbtn span {padding: .375rem .5rem}
    .catchPhrase p {font-size: var(--size-step-5)}
    .page_sommaire .accessoires .content {gap: var(--space-s);grid-column: 8 / span 6}
    .page_sommaire .accessoires .content > * {flex:0 1 calc((100% - var(--space-s)) / 2)}
    .page_sommaire .test {grid-column: content}
    .page_sommaire .test h2 {left: var(--space-xl)}
    .page_sommaire .infos .content {max-width: 42.5rem}
    .banner--club :is(h2, .h2) {text-align: left}
    .banner--club :is(header,article) {grid-column: 3 / -3; max-width: 42.5rem;width: 100%;margin-inline:auto}
    .banner--club::before {background-size: 115% auto;background-position: top 50% left -50%} 
    .banner--actus {grid-column: 2 / -2; grid-column-gap: var(--space-m)}
    .rubrique .highlight .content, .rubrique.alter h3 {max-width: 100%}
    .rubrique header, .rub--list-entries, .rubrique.alter .content {grid-gap: var(--space-m)}
    h1 {font-size: var(--size-step-4)} 
    .art-content {grid-column: 2 / span 8}
    .page_simple .art-content {grid-column: 3 / -3}
    .scoot--imgX2 picture {grid-column: 1 / -1}
    .scoot--imgX2 :is(.colLeft, .colRight) {--count-column: 11}
    .scoot--imgX2 :is(h3,p,.image) {grid-column-end: -2}
    .scoot--toggle h2 {grid-column-end: span 9} 
    }

@media only screen and (max-width: 71.9375rem) {
    .page_sommaire .slogan p {font-size: var(--size-step-7)}
    .page_sommaire .video .content {margin-left: var(--space-xl);margin-bottom: var(--space-xl)}
    .page_form form, .article.page_form header {grid-column:content}
    .scoot--spec :is(h2,ul,.link) {grid-column: 1 / -1}
    .scoot--spec ul {padding-right: 0}   
    .scoot--spec .link {grid-row: 3}   
    .scoot--toggle h2 + p,.block > .content {grid-column-start: span 7}
    .scoot--prosCons h2 {font-size: var(--size-step-5)}
    .pros, .cons {grid-column: span 6 / -2}  
    }