:root {
    --header-height:75px;
    }

a{transition: all .15s ease-in-out}
:is(.mainNav, .subNav) a:hover {color: black}
.show--mobile {display: none}

.mainGrid--desktop, .autoGrid--desktop, .countGrid--desktop {display: grid}
.mainGrid, .mainGrid--desktop {grid-template-columns: [full-start] minmax(var(--min-column-size), .75fr) [content-start] repeat(12, minmax(var(--min-column-size), 1fr)) [content-end] minmax(var(--min-column-size), .75fr) [full-end]}
.autoGrid--desktop {grid-template-columns: repeat(auto-fit, minmax(min(var(--min-column-size), 100%), 1fr))}
.countGrid--desktop {grid-template-columns: repeat(var(--count-column), 1fr)}

.mainNav, .subNav, .socialNav,.sidebar .btn--group, .langue {margin-left: var(--space-2xl)}
.btn--primary,
.btn--secondary { font-size: 1.250rem}
.btn--primary.order {
    margin-right: var(--space-s);
    border-radius: var(--border-radius);
    line-height: 40px}    
.openBtn {
    padding-left: var(--space-m);
    padding-right: var(--space-m)}
.openBtn span {display: block}
.openBtn svg {margin-left: var(--space-2xs)}      
.subNav a {font-size: var(--size-step--1)}

.reason {padding: var(--space-3xl) 0}
.reason > * {grid-column:3 / -3}
.reason ul {
    --count-column:5;
    grid-gap: var(--space-m)}
.reason li {margin-top: var(--space-xl)}    
.reason h2 {font-size: var(--size-step-7)}
.page_accueil .slogan {grid-column: 3 / -3}
.overlay {grid-column: span 5 / -2}
.page_accueil .slogan, .overlay {grid-row: 2}
.overlay {margin-bottom: calc(-1 * var(--space-2xl))}
.page_accueil .slogan h2,
.page_accueil .slogan h2 strong {font-size: var(--size-step-6)}
.zoom {
    padding-top: var(--space-3xl);
    padding-bottom: var(--space-3xl)}
.zoom .content {
    grid-column: span 6 / -2;
    z-index: 5}
.zoom :is(.content,.first) {grid-row: 1}
.zoom > picture {grid-column: 2 / span 7}
.zoom h2 {margin-top: var(--space-xl)}
.zoom :is(h2,.description) {
    position: relative;
    z-index: 5;
    margin-left: auto;
    max-width:70%}
.zoom .description {
    padding-left: var(--space-l);
    padding-right: var(--space-s);
    margin-top: calc(-1 * var(--space-2xl))}

.footer--content {
    --count-column:10;
    padding-top: var(--space-2xl)}    
footer :is(.contact,.social,.logo) {
    grid-column-start: span 2;
    margin-bottom: var(--space-2xl)}
footer .logo {
    grid-column-start: span 6;
    align-self: end}    
footer li {line-height: var(--line-height-large)}
.footer_actus section {--count-column: 3}
.footer_actus header {grid-column: span 3}  
.footer_actus article {margin-bottom: var(--space-xl)}    

/* ARTICLE RUBRIQUE
/* -------------------------- */
.rubrique section {
    --count-column:3;
    grid-gap: var(--space-xl)}
    
.article .stickyNav {
    display: block;
    grid-column: 3 / span 2;
    grid-row: 3 / span 20;
    padding: var(--space-l) var(--space-s) var(--space-xs) 0}
.stickyNav nav {
    top:calc(var(--header-height) + var(--space-l));
    position: sticky}
.stickyNav .parent {
    text-transform: uppercase;
    line-height: var(--line-height-small)}
.stickyNav .parent svg {display: inline;margin-right: .375rem}    
.stickyNav ul > ::marker {content: "";line-height: 0}
.stickyNav ul {margin-top: var(--space-s);padding-left: .625em}        
.stickyNav li {
    padding-left: .375em;
    margin-bottom: .250em;
    line-height: var(--line-height-small)}        
.stickyNav li a {
    vertical-align: top;
    font-size:.875rem;
    line-height: var(--line-height-medium);
    color: var(--gris);
    text-decoration: none}
.stickyNav ul > .current::marker {
    content: "\2022";
    color:var(--bleu)}      
.stickyNav li.current a {color:var(--bleu)}  

h1,.h1 {font-size: var(--size-step-7)}
h1,.h1 {text-wrap: balance}
:is(.rubrique,.article,.rampes) h1 {margin: var(--space-2xl) 0 var(--space-l)}
.rubrique h1:has(+ p) {margin-bottom: 0}        
.rubrique p.rub-chapo {margin-bottom: var(--space-xl)}
.rubrique .actus--list-article h2 {margin-top: var(--space-xs)}

.rubrique .loop {grid-gap:var(--space-3xl);padding-bottom:var(--space-3xl)}
.rubrique .loop article {display: flex;align-items: center} 
.rubrique .loop article > * {width: 50%} 
.rubrique .loop article h2 {
    font-size: var(--size-step-3);
    text-wrap: pretty}
.rubrique .loop article div {
    max-width: 40%;
    padding-left: var(--space-xl);
    padding-right: var(--space-xl);
    margin-right: auto}  
.rubrique .loop article.even div {
    order: 1;
    margin-left: auto;
    margin-right: 0;
    text-align: right} 
.rubrique .loop article.even picture {order: 2} 

.article h1 {
    grid-column: 3 / span 10;
    z-index: 5;
    margin-bottom: calc(-1 * var(--space-l))}   
.article .arrowDown {grid-column: 3 / span 2}
.art-logo {
    grid-column: 5 / -1;
    margin-bottom: calc(-1 * var(--space-xl))}
.article .arrowDown, .art-logo {grid-row: 2}
.article .arrowDown {
    align-self: start;
    margin-top: var(--space-3xl)}

.rampes h1 {grid-column: 3 / -3}
.rampes--moto, .rampes .rub-logo {grid-row: 3}
section.rampes--moto,
.vehicle--types article {grid-column:span 4 / -3;z-index: 5}
.vehicle--types :is(article,picture) {grid-row:1}

.rampes--moto,
.vehicle--types article {
    align-self: center;
    padding: var(--space-l);
    background-color: hsl(from var(--orange) h s l / .85)}    
.rampes--moto a {display: flex; align-items: center;justify-content: space-between}    
.rampes--moto h2 {max-width: 75%;font-size: var(--size-step-1)}    
.rampes--moto h3 {min-width:225px;margin-right:10px;font-size: var(--size-step-5)}    
.rampes--moto :is(h2,h3) {text-transform: uppercase}    
.rampes--moto p {font-size: .875rem}  
.rampes--moto span {margin-left: 10px}

.rampes--list {
    --count-column:6;
    grid-gap: var(--space-m);
    margin-top: var(--space-3xl);
    padding-bottom: var(--space-3xl)}
.rampes--list h2 {grid-column: span 6}
.rampes--list h3 {font-size: var(--size-step--1)}

.rubrique p.rub-chapo,
.article p.art-chapo,
.rampes p.rub-chapo,
.acc-chapo,
.form-chapo {
    z-index: 5;
    padding-top: var(--space-l);
    margin-right: 0 !important;
    background-color: var(--beige);
    border-right: var(--space-m) solid var(--beige)}

.rubrique p.rub-chapo,.article p.art-chapo,
.article > :is(h2,h3,h4,h5,h6,p,ul,blockquote,pre),
.article > :is(.toggleBtn,.block,.download,.btn--group),
.art-img,.art-youtube,.option,.acc-chapo,.form-chapo  {
    grid-column: 5 / -5;
    margin-right: var(--space-m)}
.art-img {
    grid-column-end: -1;
    margin: var(--space-m) 0  var(--space-l)}

.rampes p.rub-chapo {
    padding-left: var(--space-m);
    padding-right: 0;
    margin-top: 0;
    margin-bottom: var(--space-xl)}
.rubrique p.rub-chapo,
.rampes p.rub-chapo {grid-column: span 6 / -3 }
.rampes .thumbnail {display: none}

.article :is(p, ul, blockquote) a:hover {background-color: white}
.article :is(p, ul, blockquote) a:active {background-color: white}
/*.btn--group > * {flex:0}*/

.block > .content {grid-column: span 5 / -2}
.article button svg {margin-right: inherit}
.article .toggleBtn {padding: var(--space-m) 2.5rem; padding-left: 0}
.article .toggleBtn :is(h2,h3,h4,span) {text-wrap: balance}

.page_simple .article h1 {margin-bottom: 0}
.page_simple .article h1:has(+ h2) {margin-bottom: var(--space-xl)}

.faq {
    background-position: top var(--space-3xl) right;
    background-repeat: no-repeat;
    background-size: contain}
.faq .article {grid-column: 5 / -5}
.faq .decoration {grid-column: 3 / -3}
.faq .article :is(h2,.h2) {font-size: var(--size-step-5)}
.faq .article :is(h2,.h2) strong {margin-top: var(--space-2xs)}
.faq .circle {width: 90px;height: 90px} 

.article .fullVideo {margin-top: var(--space-2xl);margin-right: 0}
.article.rampes--fiche .fullVideo {grid-column: 3 / -3}

.accessoires section,
.detail {
    grid-gap: 0;
    background-position: left bottom;
    background-repeat: no-repeat;
    background-size: contain}
.accessoires section > div {
    --count-column:3;
    grid-column: 3 / -3;
    margin-top: var(--space-2xl);
    margin-bottom: var(--space-l)}  
.accessoires h1 {grid-column: 3 / -3}
.accessoires article h2 {
    margin-left: var(--space-s);
    margin-top: -1.5rem}    
.page_art--fiche .thumbnail {
    grid-column: 1 / span 4;
    grid-row: 2;
    align-self: center;
    margin-top: var(--space-xl);
    padding-right: var(--space-xl)}
.diptyque {
    grid-column: content;
    grid-gap: var(--space-2xl);
    --count-column:2}
.diptyque .left {margin-top: var(--space-3xl)}    
.diptyque .right {margin-bottom: var(--space-3xl)}

.techSpecs {
    --count-column:2;
    grid-column-gap: var(--space-2xl);
    margin-top: var(--space-2xl)}
.techSpecs .colLeft {border-top: 1px solid rgba(0, 0, 0, .2)}
.techSpecs h2 {
    padding-top: var(--space-m);
    max-width: 75%}
.techSpecs p {
    max-width: 60%;
    margin-top: var(--space-l);
    margin-bottom:0}
.techSpecs ul {
    font-size: var(--size-step-1);
    border-bottom: 1px solid rgb(0,0,0,.2)}
.techSpecs li {
    padding-top: var(--space-m);
    padding-bottom: var(--space-m)}

.detail {
    margin-top: var(--space-2xl);
    padding-bottom: 0}
.detail .colLeft {
    grid-column: 3 / span 3;
    align-self: center;
    padding-top: var(--space-l);
    padding-bottom: var(--space-l)}  
.detail .colRight {grid-column: span 6 / -2;grid-gap: var(--space-m)}
.detail h2, .page_accueil .detail h3 {margin-bottom: var(--space-l)}
.gammes {
    --count-column:2;
    padding-top: var(--space-2xl);
    padding-bottom: var(--space-3xl)}
.rampes .gammes {margin-top: 0} 
.gammes h2 {
    z-index: 5;
    grid-column: span 2;
    margin-bottom: -5.250rem;
    color:var(--orange)}
.gammes a + a h3 {
    right: 0;
    left: inherit;
    padding-left: var(--space-s);
    padding-right: 0;
    text-align: right}     

.accessoires--list {
    --count-column:4;
    grid-column-gap: var(--space-2xl);
    grid-row-gap: var(--space-xl);
    transform: translateY(calc(2 * var(--space-3xl)));
    margin-top: calc(-3.250* var(--space-2xl))}
.accessoires--list h3 {
    grid-column: span 4;
    margin-top: var(--space-3xl);
    font-size: var(--size-step-2);
    line-height: var(--line-height-medium)}
.accessoires--list h3 strong {font-size: var(--size-step-5)}
.accessoires--list h4 {font-size: var(--size-step--1)}
.accessoires--list div {grid-column: span 4}
.article.rampes--fiche:has(.accessoires--list) + .faq {padding-top: calc(2 * var(--space-3xl))}

.page_form, .page_form_success {padding-bottom: var(--space-3xl)}   
.page_form form {
    grid-column: 5 / -5;
    justify-content: space-between;
    gap: var(--space-l)}
.page_form h1  {grid-column: 5 / -5}     
form :is(.name, .email) {width: calc(50% - (var(--space-l)) / 2)}   
.article .success a:hover {
    padding-left: .5rem;
    background-color: transparent}

@media only screen and (max-width: 99.9375rem) {
    .mainGrid, .mainGrid--desktop {grid-template-columns: [full-start] minmax(var(--min-column-size), .35fr) [content-start] repeat(12, minmax(var(--min-column-size), 1fr)) [content-end] minmax(var(--min-column-size), .35fr) [full-end]}
    .article > :is(h2,h3,h4,h5,h6,p, p.art-chapo,ul,blockquote,pre,.art-youtube,.toggleBtn,.block,.download),.option,.acc-chapo,.form-chapo {grid-column-end: -4}
    .article .art-youtube.fullVideo {grid-column-end: -3}
    .rubrique section {--count-column: 3}
    section.rampes--moto,.vehicle--types article {grid-column-start:span 6}
    .faq .article {grid-column: 4 / -4}
    .rubrique .loop article h2 {font-size: var(--size-step-2)}
    .rubrique .loop article div {padding-left: var(--space-l);padding-right: var(--space-l)}
    .detail .colLeft {grid-column-end: span 4}
    .accessoires--list {grid-column-gap: var(--space-xl)}
    .overlay {grid-column-start: span 6}
    .zoom h2 {font-size: var(--size-step-6);margin-bottom: calc(-.65* var(--space-xl))}
    .page_form form, .page_form h1, .form-chapo { grid-column: 4 / -4}
    .gammes {padding-bottom: var(--space-xl)}
    .rampes .gammes {margin-top: var(--space-xl)}
    .rampes--list {margin-top: var(--space-xl);padding-bottom: var(--space-xl)}  
    }

@media only screen and (max-width: 89.9375rem) {
    .reason > *, .page_accueil .slogan {grid-column:content}
    .overlay {grid-column-start: span 7}
    .rampes--moto a {padding: var(--space-xs) 0}
    .article .arrowDown {grid-column-start: 2;margin-top: var(--space-2xl)}
    .article h1 {grid-column: content}
    .article .stickyNav {grid-column-start: 2}
    .article .art-youtube.fullVideo {grid-column: content}
    .faq .decoration {grid-column: content}
    .rubrique .loop article div {max-width: 50%;padding-left: var(--space-m);padding-right: var(--space-m)}
    .techSpecs h2 {padding-top: var(--space-s)}
    .techSpecs ul {font-size: var(--size-step-0)}
    .techSpecs li {padding-top: var(--space-s);padding-bottom: var(--space-s)}
    .detail h2 {font-size: var(--size-step-3)}
    .detail .colLeft {grid-column-start: 2}
    .detail .colRight {grid-column-start: span 7}
    .detail h2 {margin-bottom: var(--space-s)}
    .accessoires--list {grid-column-gap: var(--space-m)}
    .page_form h1  {grid-column: 4 / -4} 
    }

@media only screen and (max-width: 79.9375rem) {
    .dropbtn {
        font-size: 1rem;
        padding: 0 .750rem}
    .article > :is(h2,h3,h4,h5,h6,p, p.art-chapo,ul,blockquote,pre,.art-youtube,.toggleBtn,.block,.download),.option,.acc-chapo,.form-chapo  {grid-column: 4 / -3}
    h1,.h1 {font-size: var(--size-step-6)}
    h2 {font-size: var(--size-step-4)}  
    h3 {font-size: var(--size-step-2)} 
    h4 {font-size: var(--size-step-1)} 
    h5 {font-size: var(--size-step-0)}
    .rubrique p.rub-chapo {padding-right: 0}
    .rubrique p.rub-chapo,.rampes p.rub-chapo {grid-column: span 7 / -2}
    .rampes h1, .accessoires h1, .accessoires section > div {grid-column:content}
    .rampes--moto a {padding: var(--space-2xs) 0}
    .art-logo, .art-img {grid-column-start: span 11}
    .page_art--fiche .thumbnail {padding-right: var(--space-m)}
    section.rampes--moto,.vehicle--types article {grid-column:span 7 / -2;padding: var(--space-m)}
    .techSpecs :is(h2,p) {max-width: 100%}
    .zoom > picture {grid-column: 1 / span 7}
    .zoom .content {grid-column: span 8 / -1}
    .zoom :is(h2,.description) {max-width: 75%}
    .zoom h2 {margin-top: var(--space-m)}
    .zoom .description {padding-top: var(--space-s);padding-left: var(--space-m)}
    .page_form form, .page_form h1, .form-chapo {grid-column: 3 / -3}  
    }

@media only screen and (max-width: 71.9375rem) {
    .mainGrid, .mainGrid--desktop {grid-template-columns: [full-start] minmax(var(--min-column-size), var(--space-m)) [content-start] repeat(12, minmax(var(--min-column-size), 1fr)) [content-end] minmax(var(--min-column-size), var(--space-m)) [full-end]}
    .rampes p.rub-chapo, section.rampes--moto,.vehicle--types article {grid-column-start: 6}
    .rubrique p.rub-chapo {grid-column-start: 7;grid-column-end: -2}
    .rampes--moto h2 {font-size: var(--size-step-0)}    
    .rampes--moto h3 {min-width:inherit;font-size: var(--size-step-4)}  
    .rampes--moto p {margin-right: auto}
    .detail h2, .page_accueil .detail h3 {font-size: var(--size-step-3)}
    .overlay {grid-column-start: span 8}  
    .zoom, .gammes, .reason {padding-top: var(--space-xl);padding-bottom: var(--space-xl)}
    .acc-chapo {margin-bottom: 0}
    }