*,::before,::after{box-sizing:border-box}*{margin:0;font:inherit;}html,body{height:100%}html{color-scheme: dark light;
    hanging-punctuation: first last;scroll-behavior:smooth}header,footer,main,section,article {container-type: inline-size}img,picture,svg,video{display:block;max-width:100%}img{vertical-align:middle;height:auto;object-fit:cover;line-height:0;font-style:italic;shape-margin:0.75rem;}input,button,textarea,select{font:inherit}button:focus,input:focus,select:focus{outline:none}p,h1,.h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}h1,.h1{hyphens:auto}ul{margin:0;padding:0}a{display:inline-block;text-decoration:none;color:black;line-height:var(--line-height)}#root,#__next{isolation:isolate}

:root {
  --bleu : #1380f9;
  --orange : #f78e51;   
  --gris : #4c4c4c;
  --beige : #edebe5;
  --whatApp : #31c554;
  --success : green;
  --error : red;  

  --font-primary: 'Oswald', system-ui, sans-serif;
  --font-secondary: system-ui, sans-serif;
  --text-base-size: 1.125rem;
  --body-line-height: 1.5em;
  
  --ratio: 1.4;
  --line-height-large: 2;
  --line-height: 1.6;
  --line-height-medium: 1.3;
  --line-height-small: 1.15;

  /* Fluid type scale */
  --size-step--2: clamp(0.6944rem, 0.6376rem + 0.284vi, 0.84rem);
  --size-step--1: clamp(0.8333rem, 0.7488rem + 0.4228vi, 1.05rem);
  --size-step-0: clamp(1rem, 0.878rem + 0.6098vi, 1.3125rem);
  --size-step-1: clamp(1.2rem, 1.028rem + 0.8598vi, 1.6406rem);
  --size-step-2: clamp(1.44rem, 1.2016rem + 1.1918vi, 2.0508rem);
  --size-step-3: clamp(1.728rem, 1.402rem + 1.6302vi, 2.5635rem);
  --size-step-4: clamp(2.0736rem, 1.6323rem + 2.2063vi, 3.2043rem);
  --size-step-5: clamp(2.4883rem, 1.8963rem + 2.9602vi, 4.0054rem);
  --size-step-6: clamp(2.986rem, 2.1974rem + 3.943vi, 5.0068rem);
  --size-step-7: clamp(3.5832rem, 2.5392rem + 5.2201vi, 6.2585rem);

  /* Fluid space scale */
  --space-3xs: clamp(0.25rem, 0.2256rem + 0.122vi, 0.3125rem);
  --space-2xs: clamp(0.5rem, 0.4268rem + 0.3659vi, 0.6875rem);
  --space-xs: clamp(0.75rem, 0.6524rem + 0.4878vi, 1rem);
  --space-s: clamp(1rem, 0.878rem + 0.6098vi, 1.3125rem);
  --space-m: clamp(1.5rem, 1.3049rem + 0.9756vi, 2rem);
  --space-l: clamp(2rem, 1.7561rem + 1.2195vi, 2.625rem);
  --space-xl: clamp(3rem, 2.6341rem + 1.8293vi, 3.9375rem);
  --space-2xl: clamp(4rem, 3.5122rem + 2.439vi, 5.25rem);
  --space-3xl: clamp(6rem, 5.2683rem + 3.6585vi, 7.875rem);

  --header-height:50px;
  --border-radius:40px;
  --min-column-size:10px;
  --count-column:1}


body {
    min-height: 100svh;	
    background: white;
    font:normal 400 var(--text-base-size) var(--font-primary);
    line-height: var(--body-line-height);
    color:black;
    text-rendering: optimizeSpeed;
    font-smooth: always;
    -webkit-font-smoothing: antialiased}

.full-width { width: 100%}
.full-height { height: 100%}
.full-height-viewport { min-height: 100vh; min-height: 100dvh}
.no-line-height {line-height: 0}

.fadein, .fadeinmoveup {
    transform: translate3d(0, 0, 0);
    will-change: transform, opacity;
    backface-visibility: hidden}

.animation, .push {transition: all .15s ease-in-out}
.animation--slow {transition: all .55s ease-in-out}

sup {font-size: .65em}

/* GRID
/* -------------------------- */
.mainGrid, .autoGrid, .countGrid, .grid {display: grid}
.mainGrid {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]}
.autoGrid {grid-template-columns: repeat(auto-fit, minmax(min(var(--min-column-size), 100%), 1fr))}
.countGrid {grid-template-columns: repeat(var(--count-column), 1fr)}
.max-width-1920 {max-width:120rem; margin-inline:auto}

.banner--rgpd {
    position: fixed;
    display: none;
    z-index: 100;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    padding: var(--space-m);
    background-color: var(--orange);}
.banner--rgpd > * {
    max-width: 40em;
    margin:0 auto;
    text-align: center}
.banner--rgpd p {
    font-family: var(--font-secondary);
    color: black;
    line-height: var(--line-height-small)}
.banner--rgpd a {color: white; text-decoration: underline}   
.banner--rgpd .btn-group {
    justify-content: center;
    margin: var(--space-xs) auto 0}
.banner--rgpd .btn--accept {
    font-weight: 500;
    color: var(--orange);
    border-color: black;
    background-color: black}
.btn--decline {
    border:none;
    background: none;
    color: black}

.mainHeader {
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    right: 0;
    height:var(--header-height);
    background-color: white}
.mainHeader .logo {
    grid-column: 2 / span 5;
    align-self: center}

.navigation {
    grid-column: span 7 / -1;
    display: flex;
    align-items: center;
    justify-content: end}
.btn--primary.order {
    padding-top: 0;
    padding-bottom: 0;
    border-radius: 0;
    border: none;
    font-size: 1rem;
    line-height: 50px} 
.openBtn {
    align-self: stretch;    
    display: flex;
    align-items: center;
    background: var(--bleu);
    padding-left: var(--space-s);
    padding-right: var(--space-s);
    font-size: 1rem;
    text-transform: uppercase;
    color: white}
.openBtn span {display: none}      

.sidebar {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 20;
    top: 0;
    right: 0;
    background: var(--bleu);
    background: linear-gradient(90deg, rgba(5,100,214,1) 0%, rgba(19,128,249,1) 100%);
    background-position:left top;
    background-repeat: no-repeat;
    background-size:cover;
    overflow-x: hidden;
    transition: width 0.5s}
.sidebar.open {width: 50%}
@media only screen and (max-width: 63.9375rem) {.sidebar.open {width: 100%}}  
.closeBtn {
    position: absolute;
    top: 0;
    right: 0;
    height: var(--header-height);
    padding-left: var(--space-m);
    padding-right: var(--space-m);
    display: flex;
    align-items: center;
    color:white}
.closeBtn span {display: none}    
:is(.mainNav, .subNav) a {display:inline-block}    
.mainNav, .subNav, .socialNav {
    margin-top: var(--header-height);
    margin-left: var(--space-l);
    width: 500px;
    list-style: none}
.subNav, .sidebar .btn--group {margin-top: var(--space-s)}    
.mainNav a {
    text-decoration-line:underline;
    text-decoration-thickness: 4px;
    font-size: var(--size-step-3);
    text-transform: uppercase;
    line-height: 1.45em;
    color: white}
.subNav a {
    font-family: var(--font-secondary);
    font-size: var(--size-step-0);
    line-height: var(--line-height-small);
    color: white} 
.socialNav a {
    display:inline-block;
    vertical-align: middle;
    padding:.625rem}    
.sidebar a.on {color:black}
.sidebar .btn--group {
    width: calc(100% - (2 * var(--space-l)));
    margin: var(--space-s) var(--space-l)}
@media only screen and (min-width: 30rem) {.sidebar .btn--group {max-width: 420px}}  
.sidebar .btn--primary {
    background-color: white;
    border-color: white;
    color: var(--bleu)}     
.sidebar .btn--secondary {
    border-color: white;
    color: white}

.langue {margin-left: var(--space-l)}
.languebtn {
    display: flex;
    align-items: center;
    cursor: pointer;
    border:none;
    font-size: .75rem;
    color: white;
    line-height: var(--line-height);
    text-transform: uppercase;
    background: none;
    margin-right: var(--space-xs);
    padding: .250rem .5rem}
.languebtn svg {margin-right: .5rem; margin-left: 0}          
.dropDown--content {display: none}
.langue .dropDown--content {
    position: absolute;
    min-width: 118px;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1}   
.langue .dropDown--content a {
    font-size:.975rem;
    color: black;
    padding: .375rem .5rem;
    display: block}   
.langue .dropDown--content a:hover {background-color: #ddd}
.dropDown--content.show {display: block}      


/* ACCUEIL
/* ---------------------------------------------------- */
.acc-chapo {grid-column: content; margin-bottom: var(--space-l)}
.acc-chapo h2 {margin-bottom: var(--space-2xs)}
.reason {
    padding: var(--space-l) 0;
    background-color: var(--beige)}
.reason > * {grid-column:content}
.reason h2 {
    text-wrap: balance;
    text-transform: uppercase;
    line-height: var(--line-height-small)}
.reason h2 strong {font-weight: 500; color: var(--gris)}
.reason ul {
    grid-gap: var(--space-m);
    list-style: none}
.reason li {margin-top: var(--space-m)}    
.reason .number {
    font-size: var(--size-step-4);
    color: var(--bleu)}   
.reason li:nth-child(2n) .number {color: var(--orange)}    
.reason p, .page_accueil .detail p {font-family: var(--font-secondary)}    
.page_accueil .detail {margin-top: 0; padding-bottom: 0}
.page_accueil .detail :is(h2,h3) {text-transform: uppercase}
.page_accueil .detail h2 {margin-bottom: 0}
.page_accueil .slogan, .overlay {grid-row: 3}
.page_accueil .slogan {
    z-index: 5;
    align-content: center;
    margin-top: var(--space-l);
    margin-bottom: var(--space-l)}
.overlay {
    z-index: 1;
    margin-top: var(--space-l);
    margin-bottom: calc(-1 * var(--space-xl));
    mix-blend-mode: overlay;
    opacity: .4}
    .page_accueil .slogan h2 {
    margin-bottom: 0;
    text-align: center;
    color: var(--orange)}
.page_accueil .slogan h2 strong {
    display: inline;
    font-size: var(--size-step-4);
    color: white}
.page_accueil .slogan a {
    margin-inline: auto;
    border-color: white;
    color:white}    
.gammes {
    padding-top: var(--space-l);
    padding-bottom: var(--space-l);
    background: var(--orange)}
.rampes .gammes {grid-column: full;margin-top: var(--space-l)} 
.gammes > * {grid-column:content; z-index: 2}
.gammes h2 {
    margin-bottom: var(--space-s);
    font-size: var(--size-step-7);
    text-align: center;
    text-transform: uppercase;
    line-height:1.1;
    color:var(--gris)}
.gammes h2 strong {
    display: block;
    font-size: var(--size-step-2);
    font-weight: 500;
    color: var(--gris)}
.gammes a {
    position: relative;
    margin-bottom: var(--space-s)}    
.gammes h3 {
    position: absolute;
    left: 0;
    bottom: 0;
    min-width: 50%;
    padding-top: var(--space-s);
    padding-right: var(--space-s);
    background-color: var(--orange);
    font-size: var(--size-step-3);
    text-transform: uppercase;
    color: var(--gris)}    
.gammes h3 svg {display: inline}
.zoom {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
    background-color: var(--beige)}
.zoom > * {grid-column: content}
.zoom h2 {
    position: relative;
    z-index: 5;
    margin-left: var(--space-xl);
    margin-bottom: calc(-1 * var(--space-l));
    font-size: var(--size-step-7);
    line-height: var(--line-height-small);
    text-transform: uppercase}
.zoom .description {
    padding-top: var(--space-m);
    padding-bottom: var(--space-m);
    background-color: var(--beige)}
.zoom h3 {margin-bottom: var(--space-2xs)}
.zoom p {font-family: var(--font-secondary)}
.zoom a {
    text-transform: uppercase;
    font-family: var(--font-primary)}

.reviews {
    grid-column: full;
    background: var(--gris);
    padding: var(--space-xl) var(--space-s);
    text-align: center;
    color: white}
.reviews > * {
    max-width: 65ch;
    margin-inline: auto }   
.subTitle {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: var(--space-m);
    text-transform: uppercase;
    font-size: var(--size-step-1);
    letter-spacing: 1px;
    color: var(--orange)}
.subTitle span {margin: 0 var(--space-s)}    
.reviews p {
    font-family: var(--font-secondary);
    font-size: var(--size-step-2);
    line-height: var(--line-height-medium);
    color: white}
.reviews a {
    margin-top: var(--space-m);
    color: white}

.footer_actus {background: var(--beige)}
.footer_actus section {
    --count-column: 1;
    grid-column-gap: var(--space-xl);
    grid-column: content}
.footer_actus header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-xl) 0}   
.footer_actus article {margin-bottom:var(--space-l)}                          
.footer_actus :is(h2, .h2) {font-size: var(--size-step-4);text-transform: uppercase}
.footer_actus :is(h2, .h2) a {color: var(--gris)}
.footer_actus :is(h3, .h3) {
    display: block;
    font-family: var(--font-secondary);
    font-size: var(--size-step-1)}
.footer_actus :is(h3, .h3) a {line-height:var(--line-height-small)}
.footer_actus .date {
    display: inline-block;
    margin: var(--space-xs) 0 var(--space-2xs);
    font-size:.875rem;
    text-transform: uppercase;}          

footer {
    background: var(--bleu);
    background-position: left top;
    background-repeat: no-repeat;
    background-size: cover}
.footer--content {
    grid-column: content;
    padding-top:var(--space-xl)}    
footer .logo {
    margin-bottom: var(--space-l);
    font-family: var(--font-secondary);
    font-size: .875rem;
    line-height: var(--line-height-small)}
.mentions, .webRacer {text-decoration: underline}            
footer :is(.contact,.social) {margin-bottom: var(--space-m)}            
footer ul {list-style: none}
footer span, footer li a {
    font-size: var(--size-step-2);
    text-transform: uppercase}
footer span {
    display: inline-block;
    margin-bottom: var(--space-xs)}
footer li a {font-size: var(--size-step--1)}    


/* BOUTONS
/* -------------------------- */
.button {touch-action: manipulation; inline-size: fit-content; user-select: none;cursor: pointer;border: none}
.button:focus {outline: none} 
.button:focus-visible {outline: 2px solid magenta; outline-offset: 2px}
.push:active {transform: scale(.95)} 

:is(.btn--primary, .btn--secondary):focus {outline: none}

.btn--primary,
.btn--secondary {
    display: inline-block;   
    padding: var(--space-2xs) var(--space-m);
    text-transform: uppercase;
    text-align: center;
    color: black;	
    line-height: var(--line-height-small);
    background-color: var(--orange);	
    border: 1px solid var(--orange);
    border-radius: 40px}
.btn--primary > *,
.btn--secondary > * {vertical-align: middle}
.btn--secondary {
    background-color: transparent;
    border-color: black;
    color: black}
.btn--secondary svg {
    display: inline-block;
    vertical-align: middle;
    margin-left: var(--space-s)}
.btn--underline {
    font-size: 1.125rem;
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: 0.15em;}

.btn--group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    margin: var(--space-m) 0}
.btn--group > * {
    flex:1;
    min-width: fit-content}      

/* RUBRIQUE ARTICLE
/* -------------------------- */
.progress {height: 2px;background: var(--bleu);position: fixed;top: 0;left: 0;width: 100%;z-index: 15;transform-origin: 0 50%;animation: scaleProgress auto linear;animation-timeline: scroll(root)}
@keyframes scaleProgress {
    0% {transform: scaleX(0)}
    100% {transform: scaleX(1)}}
::selection {
  background: var(--orange);	
  color:black}
.stickyNav {display: none}

.rubrique, .article, .rampes {
    background-color: var(--beige);
    padding-top: var(--header-height)}
.article {padding-bottom: var(--space-xl)}   
.rubrique section,
.rampes--list {
    grid-column: content;
    grid-gap: var(--space-l);
    overflow: hidden} 
@media only screen and (min-width:  37.5rem) {.rubrique section {--count-column:2}} 
@media only screen and (min-width:  37.5rem) {.rampes--list {--count-column:3}} 

.rubrique .loop {--count-column:1;padding-bottom:var(--space-xl)}
.rubrique .loop article h2 {
    margin-top: var(--space-xs);
    line-height: var(--line-height-medium)}
.loop .btn--secondary {margin-top: var(--space-xs)}

h1,.h1 {font-size: var(--size-step-4); line-height: var(--line-height-small);text-transform: uppercase}
h2,.h2 {font-size: var(--size-step-3); line-height: var(--line-height-medium)}  
h3 {font-size: var(--size-step-1); line-height: var(--line-height-medium)} 
h4 {font-size: var(--size-step-1); line-height: 1.35em} 
h5 {font-size: var(--size-step-0)}

p,li,blockquote,pre {
    text-wrap: pretty;
    line-height: var(--line-height)}

strong {font-weight:600}
i {display:inline-block;font-style: italic;color:var(--bleu)}
hr {width: 100%;border:none;border-top:1px solid rgb(0,0,0,.2);margin: var(--space-m) 0}

.rub-logo {grid-column: full}
.thumbnail {grid-column: content}
.rubrique h2 {
    font-family: var(--font-secondary);
    font-size:var(--size-step-1);
    line-height: var(--line-height-small)}
.rubrique h2 a {line-height: var(--line-height-small)}
.rubrique .actus--list-article h2 {margin-top: .250rem;font-size: var(--size-step-2)}

.article > :is(h2,h3,h4,h5,h6,p,ul,blockquote,pre),
.article > :is(.toggleBtn,.block,.download,.btn-group) {grid-column: content}    
.article .arrowDown {
    grid-column:content;
    align-self: end;
    margin-bottom: var(--space-m);
    z-index: 5}     
.article .arrowDown, .art-logo {grid-row: 2}     

:is(.rubrique,.article,.rampes) h1 {
    grid-column: content;
    margin: var(--space-m) 0 }
:is(.rubrique,.article,.rampes) h1 strong {
    font-weight: 500;
    color: var(--bleu)}    
.rubrique p.rub-chapo,.article p.art-chapo,
.rampes p.rub-chapo, .acc-chapo p, .form-chapo p {
    grid-column: content;
    margin-bottom: var(--space-m);
    font-family: var(--font-secondary);
    line-height: var(--line-height)}
.article p.art-chapo {
    margin-bottom: 0;
    font-size: 1.250rem;
    font-weight: 600}
.article p.art-chapo + :is(p, ul) {margin-top: var(--space-m)}

.rampes p.rub-chapo {
    z-index: 5;
    padding: var(--space-m) var(--space-m) 0;
    margin-top: calc(-1 * var(--space-l));
    background-color: var(--beige)} 
.rampes--moto,
.vehicle--types article {
    grid-column: content;
    padding: var(--space-m);
    background-color:var(--orange)}
.rampes--moto article:not(:last-child) {border-bottom: 1px solid rgb(0,0,0,.2)}  
.rampes--moto h2 {max-width: 85%;font-size: var(--size-step-1)}
.rampes--moto h3 {font-size: var(--size-step-5);line-height:var(--line-height-small)}
.rampes--moto :is(h2,h3) {text-transform: uppercase}   
.rampes--moto a {position:relative; width:100%;padding: var(--space-s) 0}       
.rampes--moto p {
    font-family: var(--font-secondary);
    font-size: var(--size-step-0);
    line-height: var(--line-height-small)}
@media only screen and (max-width:  63.9375rem) {
    .rampes--moto h3 {margin-bottom: 5px}
    .rampes--moto .btn--secondary {
        position: absolute;
        right: 0;
        top: calc(5px + var(--space-s))}
    } 

.rampes--list {
    --count-column:2;
    grid-gap: var(--space-s);
    margin-top: var(--space-l);   
    padding-bottom: var(--space-l)}   
.rampes--list h2,
.rampes--list h3 {
    font-size: var(--size-step-5);
    text-transform: uppercase}
.rampes--list h2, .rampes--list h3 a {line-height: var(--line-height-small)}    
.rampes--list h2 {
    grid-column: span 2;
    margin-bottom: var(--space-2xs)}
.rampes--list h2 strong {
    font-weight: 500;
    color: var(--gris)}
.rampes--list h3 {font-size: var(--size-step-0)}
@media only screen and (min-width:  37.5rem) {.rampes--list h2 {grid-column: span 3}} 

.art-logo {
    grid-column: full;
    overflow: hidden;
    margin-bottom: var(--space-m)}               
.article > :is(p, ul, blockquote,.download,.art-img,.art-youtube) + :is(h2, h3, h4, h5) {margin-top: var(--space-l)}
.article > :is(p, ul, blockquote,.download,.art-img,.art-youtube):has(+ :is(h2, h3, h4, h5)) {margin-bottom: 0}
.article > :is(p, ul, h2, h3, h4, h5) {margin-bottom:var(--space-2xs)}
.article > p:has(+ ul) {margin-bottom: 0}

.article :is(h2,.h2) {text-transform: uppercase}
.article :is(h3,h4,h5,h6) {font-weight: 500}
.article :is(p, ul, h3, h4, h5) {font-family: var(--font-secondary)}

.art-img picture {overflow: hidden}
.art-img picture + picture  {margin-top:var(--space-xs)}
.art-img, .art-youtube  {grid-column: content; margin:var(--space-s) 0}
.art-youtube + .art-youtube {padding-top: 0}
.article h2 + .art-youtube {margin-top: 0}

.article > ul {padding-left: .375em}
.article > ul > li {padding-left:.375em; margin-bottom: .250em}
.article > ul > ::marker {font-size:1.125em;content: "\2022"}

.toggleBtn, .block,.block > .content {grid-column: span 12}
.article .toggleBtn :is(h2,h3,h4,span) {
    font-family: var(--font-primary);
    font-size: var(--size-step-0);
    text-transform: uppercase}
.block :is(p,figure) {margin-bottom: var(--space-xs)}
.block :is(p,figure):last-child {margin-bottom:0}
.toggleBtn {
    position: relative;
    display: flex;
    align-items:center;
    padding: var(--space-s) 2.5rem;
    padding-left: 0}
.article .toggleBtn :is(h2,h3,h4,span) {
    margin-bottom: 0;
    line-height: var(--line-height-medium);
    transition: all .2s linear}         
.toggleBtn button {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 0;
    border:none;
    background: none;
    color: black;
    cursor: pointer}
.toggleBtn button svg {
    margin-left: auto;
    margin-right: 5px;
    transition: all .2s linear}
.toggleBtn button.down svg {
    color:var(--orange);
    transform:rotate(90deg)}
.block {
    --count-column:12;
    grid-template-rows: 0fr;
    transition: grid-template-rows 275ms;
    border-bottom: 1px solid rgb(0 0 0 / .2)}
.block > .content {overflow: hidden}    
.toggle {
    grid-template-rows: 1fr;
    padding-bottom:var(--space-m)}
    
blockquote {
    padding-left: var(--space-s);
    margin: var(--space-m);
    margin-left: 0;	
    border-left: 5px solid var(--bleu);
    color: var(--gris)}
blockquote p:last-child {margin-bottom: 0}    

.article :is(p, ul, blockquote) a {
    color: var(--bleu);
    text-decoration-line: underline;
    text-decoration-color: var(--gris)}
.article a { text-underline-offset: 0.1em;
    text-decoration-thickness: 1px}      
a:is(:hover, :focus) {outline: none}
.article a i {
    font-size: var(--size-step--1);
    font-family: var(--font-primary);
    font-style: normal;
    text-transform: uppercase}

.next-prev {
    --count-column:2;
    grid-gap: var(--space-s);
    grid-column: content;
    margin:var(--space-xl) 0}
.prev {justify-self: self-end}       
.next {justify-self: self-start}       
.next-prev a,
.next-prev span {
    display: grid;
    place-items: center;
    width: 78px;
    height: 78px;
    border: 1px solid var(--orange);
    border-radius: 50%;
    color: var(--orange)}
.next-prev span {
    border-color: hsl(from var(--gris) h s l / .25);
    color: hsl(from var(--gris) h s l / .25)}

.option,
.download a {
    grid-column: content;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-2xs);
    margin-bottom: var(--space-2xs);
    padding-left: var(--space-xs);
    background-color: hsl(from var(--beige) h s 85%);
    border-left: 5px solid var(--bleu)}   
.article .option p {
    margin-top: var(--space-2xs);
    margin-bottom: var(--space-2xs);
    font-size:var(--size-step-3);
    line-height: var(--line-height-small)}
.option p strong {font-family: var(--font-primary); font-weight: 500}
.article .option p:not(:has(strong)){font-size: inherit}
.option p i {
    color:black;
    font-size: var(--size-step--1);
    font-style: normal}

.option :is(.btn--primary,.btn--secondary), .download svg {margin-right: .9375rem}
.option .btn--secondary {margin-top: var(--space-xs);margin-bottom: var(--space-xs)} 

.option.order {border-color: var(--orange)}
.option.order .btn--primary {
    margin: .750rem .9375rem .750rem 0;
    font-size: var(--size-step-1);
    background-color: var(--orange)}
   
.article :is(.option, .download) + :is(h2, h3, h4, h5, figure) {margin-top: var(--space-xl)}
.article .fullVideo { grid-column:full; margin-top: var(--space-l)}
.article.rampes--fiche .fullVideo {margin-bottom: 0}

.download {border-top: 1px solid rgba(0,0,0,0.15)}
.download a {
    justify-content:start;
    padding-top: var(--space-3xs);
    padding-bottom: var(--space-3xs);
    background-color: transparent;
    border-color:crimson;
    text-transform: uppercase}
.option.order + .download {margin-top: var(--space-s)}

.faq {background-color: var(--beige)}
.faq .article {
    grid-column: content;
    background-color: transparent;
    padding-top: var(--space-m);
    padding-bottom: var(--space-2xl);}
.faq .article :is(h2,.h2) {
    margin-right: 0;
    margin-bottom: var(--space-l);
    font-size: var(--size-step-4);
    text-align: center}
.faq .article :is(h2,.h2) strong {
    display: block;
    margin-top: .250rem;
    font-family: var(--font-secondary);
    font-size: var(--size-step-1);
    line-height: var(--line-height-medium);
    text-transform: none}
.faq .circle {
    place-items: center;
    width: 75px;
    height: 75px;
    border-radius: 50%;
    background-color: hsl(from var(--gris) h s 50%);
    color: white}    
.faq .decoration {
    position: relative;
    z-index: 0;
    grid-column: content;
    display: flex;
    align-items: center;
    justify-content: center}
.faq hr {
    z-index: -1;
    position: absolute;
    margin: 0}    

.accessoires section {
    grid-column: full;
    grid-gap: 0;
    margin-bottom: var(--space-2xl);
    background-color: var(--bleu)}
.accessoires section > div {
    grid-column: content;
    --count-column:2;
    margin-top: var(--space-l);
    margin-bottom: var(--space-xs)}
.accessoires article {margin-bottom: var(--space-m)}
.accessoires article > a {background-color: black}
.accessoires article:nth-child(2n) > a {background-color: var(--gris)}

.accessoires article h2 {
    text-transform: uppercase;
    font-size: 1rem}
.accessoires article h2 a {color: white}
.accessoires article h2 strong {
    display: block;
    font-family: var(--font-primary);
    font-size: var(--size-step-3);
    font-weight: 500;
    text-transform: uppercase}

.page_art--fiche > article {padding-bottom: var(--space-2xl)}
.page_art--fiche .thumbnail {margin-bottom: var(--space-l)}
.page_accueil .thumbnail {margin-bottom: 0}  
.diptyque, .gallery, .carousel {grid-column: full}
.gallery, .carousel { margin-top: var(--space-2xl)}
.carousel {min-height: inherit}

.techSpecs {
    grid-column: content;
    margin-top: var(--space-m)}
.techSpecs h2 {
    font-size: var(--size-step-4);
    line-height: var(--line-height-small)}
.techSpecs p {
    background-position:left 5px center;
    background-repeat: no-repeat;
    background-size:22px 22px;
    margin-top: var(--space-m);
    margin-bottom: var(--space-m);
    padding-left: 40px;
    border-left: 5px solid var(--orange);
    line-height: var(--line-height-medium);
    color: var(--gris)}
.techSpecs ul {
    list-style: none;
    font-weight: 700}
.techSpecs li {
    display: flex;
    justify-content: space-between;
    padding-top: var(--space-s);
    padding-bottom: var(--space-s);
    border-top: 1px solid rgb(0,0,0,.2);
    text-align: right;
    line-height: var(--line-height-medium)}
.techSpecs li strong {
    padding-right: var(--space-s);
    font-family: var(--font-primary);
    font-weight: 500;
    text-transform: uppercase;
    text-align: left;
    color:var(--gris)}
.techSpecs sup {
    vertical-align: middle;
    font-size: 1.125em;
    color:var(--orange)}    

.detail {
    grid-column: full;
    background-color: var(--bleu);
    padding-bottom: var(--space-l)}
.detail > * {grid-column: content}
.detail .colLeft {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl)}    
.detail h2,
.page_accueil .detail h3 {
    margin-bottom: var(--space-s);
    font-size: var(--size-step-4);
    line-height: var(--line-height-small)} 
.detail h2 strong,
.page_accueil .colLeft h2 {
    display: block;
    font-size: var(--size-step-1);
    font-weight: 500}    
.detail .colRight {
    display: grid;
    grid-gap: var(--space-s);
    grid-template-areas:
    "columnLeft squareRight"
    "columnLeft columnRight"
    "squareLeft columnRight"} 
.detail .colRight picture:first-child {grid-area: columnLeft}
.detail .colRight picture:last-child {grid-area: columnRight}

.accessoires--list {
    --count-column:2;
    grid-column: content;
    grid-gap: var(--space-s)}
.accessoires--list article > a { background-color: black}   
.accessoires--list h3 {
    grid-column: span 2;
    margin-top: var(--space-xl);
    font-family: var(--font-primary);
    font-size: var(--size-step-1);
    text-transform: uppercase;
    text-align: center;
    line-height: var(--line-height-medium);
    color: #bbb}
.accessoires--list h3 strong {
    display: block;
    margin-bottom: .375rem;
    font-size: var(--size-step-4);
    font-weight: 500;
    line-height: var(--line-height-small);
    color: white} 
.accessoires--list h4 {
    margin-top: .250rem;
    font-size: var(--size-step-0)}
.accessoires--list h4 a {line-height: var(--line-height-medium)}
.accessoires--list div {
    grid-column: span 2;
    text-align: center}
.accessoires--list .btn--primary {padding:var(--space-xs) var(--space-l)}

.vehicle--types {background-color: var(--orange)}
.vehicle--types picture {grid-column: full}
.vehicle--types article {
    grid-column: content;
    padding-left: 0;
    padding-right: 0}
.vehicle--types article h2 {
    font-size: var(--size-step-1);
    text-transform: uppercase}
.vehicle--types article ul {
    margin-top: var(--space-2xs);
    margin-bottom: var(--space-s)}
.vehicle--types article ul li {
    list-style: none;
    font-size: var(--size-step-4);
    text-transform: uppercase;
    line-height: var(--line-height-small)}
.vehicle--types article p {font-family: var(--font-secondary)}
.vehicle--types article a,
.page_accueil .detail a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-s);
    font-size: 1.250rem;
    text-transform: uppercase;}
 
.page_form form {
    grid-column: content;
    display: flex;
    flex-wrap: wrap;
    row-gap: var(--space-m)} 
.page_form form > * {
    width: 100%;
    line-height: 0}
    .page_form h2 {
    margin-bottom: .5rem;
    font-size: var(--size-step-1);
    font-weight: 500}
.page_form h3 {margin-bottom: var(--space-l);font-size: var(--size-step-1)}
.page_form .form-chapo {border-right: 0}
.form-chapo {grid-column: content}
.form-chapo strong {
    font-family: var(--font-primary);
    font-size: var(--size-step--1);
    font-weight: 500;
    text-transform: uppercase}
.page_form :is(input[type=email],
input[type=text],
select,textarea) {
    width: 100%;
    padding: .5rem;
    background-color:white;
    height: 60px;
    border: none;
    border-radius: 5px;
    font-family: var(--font-secondary);
    font-size: 1.250rem;
    line-height: var(--line-height);
    color:black}
input {outline: 2px solid rgb(0,0,0,0)}
input:user-valid {outline-color: var(--success)}
input:user-invalid {outline-color: var(--error)}
.page_form textarea {min-height: 300px}
.page_form button[type="submit"] {
    cursor: pointer;
    width: 100%;
    height: 80px;
    line-height: 80px;
    border: none;
    border-radius: 5px;
    background: var(--orange);
    font-size: var(--size-step-1);
    font-weight: 500;
    text-transform: uppercase}
.article .success ul {list-style: none}
.article .success li {
    padding-top: var(--space-2xs);
    padding-bottom: var(--space-2xs);
    border-bottom:1px solid rgb(0 0 0 / .2)}
.article .success a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: var(--size-step-1);
    text-transform:uppercase}