*,::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}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:var(--color-grey-blue);line-height:var(--line-height)}#root,#__next{isolation:isolate}

:root {
  --color-grey-light : #d1d1d1;
  --color-grey : #9a9a9a;
  --color-grey-dark : #6b6b6b;
  --color-grey-darker : #202020;
  --color-grey-blue : #273238;
  --color-green : #83d13e; 
  --color-green-darker : #06763d; 
  --color-orange : #eb5a3c;
  --color-yellow : #f0a04b; 
  --success : green;
  --error : red;  

  --font-primary: 'Poppins', system-ui, sans-serif;
  --font-secondary: 'DM sans', system-ui, sans-serif;
  /*--font-secondary: 'Source Serif 4', 'Bitstream Charter', 'Sitka Text', Cambria, serif;*/
  --text-base-size: 1.125rem;
  --body-line-height: 0;
  
  --ratio: 1.4;
  --line-height-large: 1.75;
  --line-height: 1.5;
  --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;
  --header-height-scroll:50px;
  --border-radius-small:15px;
  --border-radius:20px;
  --border-radius-large:40px;
  --border-radius-big:70px;
  --min-column-size:10px;
  --count-column:1}

body {
    min-height: 100svh;	
    background: #fff;
    font:normal 400 var(--text-base-size) var(--font-primary);
    line-height: var(--body-line-height);
    color:var(--color-grey-blue);
    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}
.no-list-style {list-style: none}
.overflow-hidden {overflow: hidden}

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

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

.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} 
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}
.grid-column--full {grid-column: full}
.grid-column--content {grid-column: content}

.banner--rgpd {
    position: fixed;
    display: none;
    z-index: 100;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    padding: var(--space-m);
    background-color: black}
.banner--rgpd > * {
    max-width: 40em;
    margin:0 auto;
    text-align: center}
.banner--rgpd p {
    font-family: var(--font-primary);
    color: white;
    line-height: var(--line-height-medium)}
.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 {
    color: white;
    border-color: var(--success);
    background-color: var(--success)}
.banner--rgpd .btn--decline {
    border-color:#333;
    background: none;
    color: grey}

/* MENU SIDEBAR
/* -------------------------- */
.openBtn {
    display: grid;
    place-items: center;
    background: var(--color-green);
    height:50px;
    width:50px;
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
    color: var(--color-grey-blue)}
.openBtn span {display: none}      
.sidebar {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 20;
    top: 0;
    right: 0;
    background-color: var(--color-green);
    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;
    padding: var(--space-xs);
    display: flex;
    align-items: center;
    color:white}
.closeBtn span {display: none}    
:is(.mainNav, .subNav) a {display:inline-block}    
.mainNav, .subNav, .socialNav {list-style: none}
.mainNav, .subNav, .socialNav, .langue, .search-content {
    margin-left: var(--space-l);
    width:calc(425px - var(--space-l))}
.mainNav {margin-top: var(--space-2xs)}  
.subNav {margin-top: var(--space-s)}  
.search-content {margin-top: var(--space-m)}     
.mainNav a {
    font-family: var(--font-primary);
    font-size: var(--size-step-3);
    font-weight: 600;
    line-height: var(--line-height-medium);
    letter-spacing: -.025em;
    color:var(--color-grey-blue)}
.subNav a {
    font-family: var(--font-primary);
    font-weight: 400;
    color: var(--color-grey-blue)} 
.socialNav a {
    display:inline-block;
    vertical-align: middle;
    padding:.625rem}
.supTitleNav {
    display: inline-block;
    margin-top: var(--space-m);
    margin-bottom: var(--space-3xs);
    font-size: .875rem;
    font-weight: 600;
    line-height: var(--line-height-medium);
    text-transform: uppercase} 
li + .supTitleNav {margin-top: var(--space-m)}      
.sidebar a.on {color:white}
.sidebar .btn--group {
    width: calc(425px - (2 * var(--space-l)));
    margin: var(--space-s) var(--space-l)}
@media only screen and (min-width: 30rem) {.sidebar .btn--group {max-width: 420px}}

/* HEADER
/* -------------------------- */
.mainHeader {
    position: fixed;
    z-index: 20;
    top: 0;
    left: 0;
    right: 0}
.contentHeader {
    grid-column: content;
    display: flex;
    align-items: center;
    padding-left: var(--space-xs);
    background-color: var(--color-grey-blue)}
.contentHeader .list--button {
    display: flex;
    align-items: center;
    margin-left: auto}
.list--button a {
    margin-right: var(--space-3xs);
    padding: 0 var(--space-2xs);
    line-height: 31px;
    border-color: var(--color-grey);
    color: white}
.list--button a.last {margin-right: var(--space-2xs)}

/* LANGUES
/* -------------------------- */
.dropDown--btn {
    display: flex;
    align-items: center;
    cursor: pointer;
    border:none}        
.languebtn {
    font-size: .75rem;
    color: white;
    line-height: var(--line-height);
    text-transform: uppercase;
    background: none;
    margin-top: .875rem;
    padding: .250rem .5rem}
.dropDown--btn.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}      

/* SEARCH
/* -------------------------- */
.page_search .rubrique.models h1 {font-weight:600}   
.page_search .rub--list-entries {padding-top:var(--space-xl)}   
.page_search h1 span {
    display: block;
    line-height: var(--line-height-small)}
.page_search h1 i {
    font-style: normal;
    font-size: var(--size-step-1);
    color:var(--color-green-darker)}
.page_search .noResult {
    grid-column:content;
    padding: var(--space-xl) 0;
    font-size: var(--size-step-0);
    text-align: center}
.search-form {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 240px;
    overflow: hidden;
    border-radius: 25px;
    border: 1px solid var(--color-grey-blue);
    background-color: transparent}
.search-input {
    padding: 0 0 0 .875rem;
    width: calc(100% - 40px);
    border: none;
    outline: none;
    font-size: .9375rem;
    color: var(--color-grey-blue)}  
.search-button {
    display: grid;
    place-content: center;
    width: 40px;
    padding: 0;
    transition: background-color 0.3s;
    color: var(--color-grey-blue)}
.search-input, .search-button {background: rgb(0,0,0,0.08)}
.search-form, .search-input, .search-button {height: 43px}      
.search-content input::placeholder {
    opacity: 0.65;
    color: var(--color-grey-blue)}

/* ACCUEIL
/* ---------------------------------------------------- */
.page_sommaire main {background-color:#efefef}
.page_sommaire main:has(:is(.carousel,.background-video,.image-single)) {padding-top: var(--header-height)}
.page_sommaire :is(.carousel,.background-video,.image-single) {
    grid-column: full;
    position: relative} 
.background-video {
    background-color: black;
    min-height: 50svh;
    position: relative}
.youtube-background {opacity: .8}
.carousel-cell picture,
.image-single picture {
    overflow: hidden;
    background-color: black}    
.catchPhrase {
    --count-column:14;
    padding-top: var(--space-s);
    padding-bottom: var(--space-s);
    border-bottom: 1px solid hsl(from var(--color-grey-darker) h s 80%)}
.catchPhrase p, .catchPhrase .buttons {grid-column: 2 / -2} 
.catchPhrase p {
    font-size:var(--size-step-2);
    font-weight: 600;
    line-height:var(--line-height-small);
    color:var(--color-grey-darker)}
.catchPhrase .buttons {margin-top: var(--space-xs)}
.catchPhrase .buttons a:not(:last-child) {margin-right: var(--space-3xs)}

.page_sommaire .slogan {
    overflow: hidden;
    grid-column: full;
    background-color: var(--color-grey-blue);
    text-align: center}
.page_sommaire .slogan :is(p, picture) {
    grid-column: content;
    grid-row: 1}
.page_sommaire .slogan p {    
    z-index: 5;
    align-self: center;
    padding-top: var(--space-m);
    padding-bottom: var(--space-m);
    font-size: var(--size-step-4);
    line-height: var(--line-height-small);
    color: var(--color-green)}
.page_sommaire .slogan p strong {
    display: block;
    font-size: var(--size-step-2)}
.page_sommaire .slogan picture {
    grid-column: 4 / -4;
    margin-top: -20%;
    margin-bottom: -20%;
    opacity: .3}    

.page_sommaire .video {
    grid-column: full;
    padding: var(--space-m)}
.page_sommaire .video picture {background-color: black}
.page_sommaire .video img {opacity: .75}

.page_sommaire .alter {
    z-index: 5;
    grid-column: full;
    padding: 0}

.banner--club {
    position: relative;
    padding-top: var(--space-l);
    padding-bottom: var(--space-l);
    background-color: #d7e630}
.banner--club::before {
    background-size: 65% auto;
    background-repeat: no-repeat;
    background-position: top 50% right -25%;
    opacity: 0.15}
.banner--club > * {
    z-index: 5;
    grid-column: content}
.banner--club img {margin-bottom: var(--space-s)}
.banner--club :is(h2, .h2) {
    display: block;
    margin-bottom: var(--space-2xs);
    font-size: var(--size-step-4);
    line-height: var(--line-height-medium)}
.banner--club :is(h3, .h3) {
    display: block;
    margin-bottom: var(--space-s);
    font-weight: 600}
.banner--club .button {margin-top: var(--space-s)}    

.banner--actus {
    --count-column: 2;
    grid-column: content;
    grid-gap: var(--space-s);
    padding-bottom: var(--space-m)}                                                   
.banner--actus header,
.banner--actus .logo,
.rubrique article .logo {
    display: block;
    overflow: hidden;
    border-radius: var(--border-radius)}
.banner--actus header {
    padding: var(--space-m) var(--space-s);
    background-color: var(--color-grey-light)}
.banner--actus header > a {margin-top: var(--space-s)}
.banner--actus .arrow {margin-right: 0}    
.banner--actus :is(h2, .h2, h3, .h3) {line-height: inherit}                    
.banner--actus :is(h2, .h2) a {
    font-size: var(--size-step-3);
    font-weight: 600;
    line-height: var(--line-height-small);
    color: var(--color-green-darker)}
.banner--actus :is(h3, .h3) a {
    font-size: var(--size-step-0);
    line-height:var(--line-height-small)}
.date {
    display: inline-block;
    margin-bottom: var(--space-xs);
    padding: var(--space-3xs) var(--space-2xs);
    border-radius: 5px;
    background-color: var(--color-green);
    font-size: .750rem;
    font-weight: 600;
    line-height: var(--line-height-small);
    color:var(--color-grey-blue)}
.article .date {
    font-size: .875rem;
    line-height: var(--line-height)}  
.banner--actus .date,
.rub--list-entries .date {
    margin-top:0;
    margin-bottom: var(--space-2xs)}

.page_sommaire .zoom {
    --count-column:1;
    grid-column: full;
    background-color: var(--color-green-darker)}
.page_sommaire .zoom .logo,
.page_sommaire .test picture {mix-blend-mode:darken}
.page_sommaire :is(.zoom,.video,.accessoires) :is(h2,h3) {
    line-height: var(--line-height-medium);
    color:white}
.page_sommaire .supTitle {
    display: inline-block;
    margin-bottom: var(--space-s);
    text-transform: uppercase;
    font-size:.875rem;
    line-height: var(--line-height-medium);
    color: white}
.page_sommaire .zoom h3 strong {
    display: block;
    text-transform: uppercase;
    color:var(--color-green)}
.page_sommaire .zoom a {background:linear-gradient(90deg,var(--color-green-darker) 0%, #2e9942 100%)}    
.page_sommaire .zoom .content {
    padding: var(--space-m) var(--space-l);
    background-color: var(--color-green-darker)}    
.page_sommaire .zoom .content img {
    display: none;
    max-width: 300px;
    align-self: flex-end;
    margin-right: calc(-1 * var(--space-l))}
.page_sommaire .video .content {
    margin-left: var(--space-m);
    margin-right: var(--space-m);
    text-align: center}
.page_sommaire .video svg {margin-bottom: -14px}

.page_sommaire .accessoires {
    grid-column: full;
    padding-top: var(--space-m);
    padding-bottom: var(--space-m);
    background-color: var(--color-orange)}
.page_sommaire .accessoires > * {grid-column: content}
.page_sommaire .accessoires header {margin-bottom: var(--space-m)}
.page_sommaire .accessoires .content {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs)}
.page_sommaire .accessoires .content > * {flex:0 1 calc((100% - var(--space-xs)) / 2)}
.page_sommaire .accessoires .content a {
    position: relative;
    background-color: black;
    border-radius: var(--border-radius)}
.page_sommaire .accessoires h2 a {
    line-height: var(--line-height-small);
    color:white}
.page_sommaire .accessoires .content h3 {
    position: absolute;
    z-index: 5;
    left:var(--space-s);
    right:var(--space-s);
    bottom:var(--space-s);
    font-size: var(--size-step-1);
    line-height: var(--line-height-medium);
    color: white}
.page_sommaire .accessoires .content img {opacity: .75}
.page_sommaire .accessoires .content .button {
    display: grid;
    place-content: center;
    width: 100%;
    background-color: rgb(0 0 0 / .2)}
.page_sommaire .accessoires .btn--primary {
    background-color: var(--color-yellow);    
    border-color: var(--color-yellow);
    color:var(--color-grey-blue)}
.page_sommaire .test {margin-top: var(--space-xs)}
.page_sommaire .test a {
    position: relative;
    display: block}
.page_sommaire .test picture {
    background-color: rgb(0 0 0 / .15);
    border-radius: var(--border-radius)}
.page_sommaire .test h2 {
    margin-top: var(--space-m);
    margin-bottom: var(--space-xs)}
.page_sommaire .test h3 {
    z-index: 5;
    position: absolute;
    left: var(--space-s);
    right: var(--space-s);
    bottom: var(--space-s);
    font-size: var(--size-step-1)}
.page_sommaire .test h3 strong {
    display: block;
    text-transform: uppercase}       

.page_sommaire .infos {
    grid-column: content;
    padding-top: var(--space-m);
    padding-bottom: var(--space-m)} 
.page_sommaire .infos .content {
    max-width: 60rem;
    margin-inline: auto;
    text-align: center}
.page_sommaire .infos h2 {
    font-size: var(--size-step-4);
    text-align: center;
    line-height: var(--line-height-medium)}
.page_sommaire .infos h2 strong {
    display: block;
    font-size: var(--size-step-0);
    text-transform: uppercase}
.page_sommaire .infos ul {
    margin-top: var(--space-m);
    margin-bottom: var(--space-m);
    border-top:1px solid rgb(0 0 0 / .2)}    
.page_sommaire .infos li {
    border-bottom:1px solid rgb(0 0 0 / .2);
    font-size: var(--size-step-0);
    text-align: left}     
.page_sommaire .infos li a {
    display: flex;
    align-items: center;
    padding-top: var(--space-xs);
    padding-bottom: var(--space-xs);
    line-height: var(--line-height-medium)}
.page_sommaire .infos li svg {
    flex:0 0 calc(25px + var(--space-2xs));
    margin-left: auto;
    padding-left: var(--space-2xs);
    color:var(--color-green-darker)}         
.page_sommaire .infos li span {
    display: inline-block;
    margin-right: var(--space-xs);
    font-size: var(--size-step-3);
    font-weight: 600;
    color:var(--color-green-darker)} 

.page_sommaire .banner:has(+ .alter) {margin-bottom: 0}

.footer--pub {
    padding: var(--space-xl) 0;
    background: var(--color-grey-blue)}
.footer--pub .square {margin-inline: auto}
.footer--pub .square > * {flex:1 1 calc(33.3333% - (2 * var(--space-s)))}
@media only screen and (max-width: 479px) {
    .footer--pub .square {max-width: 320px}
    .footer--pub .square > * {flex:1 1 calc(50% - (2 * var(--space-s)))}
    } 

.footer--pub .content {
    grid-column: full;
    padding-left: 7.14285%;
    padding-right: 7.14285%;
    text-align: center}    
.footer--pub + footer {border-top: 1px solid hsl(from var(--color-grey-blue) h s 25%)}
.footer--pub .square {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
    margin-top: var(--space-s)}

footer {background: var(--color-grey-blue)}
footer .logo-main {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-m);
    text-align: center}
footer .content {
    grid-column: content;
    text-align: center}
footer .line {
    width: 100%;
    height: 1px;
    background: hsl(from var(--color-grey-blue) h s 25%)}
footer ul {margin-bottom: var(--space-m)}   
footer ul li {line-height: 1.8em}   
footer .mainNavFooter li a {
    font-family: var(--font-primary);
    font-size: .750rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-grey-light)} 
.social span {
    display: inline-block;
    margin-bottom: var(--space-2xs);
    font-family: var(--font-secondary);
    font-size: .875rem;
    line-height: var(--line-height-medium);
    color: white;}
.social a {
    font-family: var(--font-primary);
    font-size: var(--size-step-1);
    color: var(--color-green)}           
.subFooter {
    font-family: var(--font-secondary);
    font-size: .750rem;
    color: var(--color-grey)}
.subFooter a {color: var(--color-grey);text-decoration: underline}
.subFooter.colLeft {padding-top: var(--space-m)}    
.subFooter.colRight {padding-bottom: var(--space-m)}    

/* BOUTONS
/* -------------------------- */
:is(.btn--primary, .btn--secondary, .btn--outline):focus {outline: none}
:is(.btn--primary, .btn--secondary, .btn--outline):active {transform: scale(.95)}

.btn--primary,
.btn--secondary,
.btn--outline {
    display: inline-block;   
    vertical-align: middle;
    padding: 0 var(--space-xs);
    font-size: .750rem;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    color: white;	
    line-height: 38px;
    background-color: var(--color-grey-blue);	
    border: 1px solid var(--color-grey-blue);
    border-radius: var(--border-radius)}
.btn--secondary {
    background-color: var(--color-green);
    border-color: var(--color-green);
    color: var(--color-grey-blue)}
.btn--outline {
    background: none;
    border-color: currentColor;
    border-radius: var(--border-radius);
    text-transform: none;
    color:var(--color-grey-blue)}    
.btn--underline {
    font-family: var(--font-secondary);
    font-size: 1.125rem;
    text-decoration: underline}

.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
/* -------------------------- */
::selection {
  background: hsl(from var(--color-green) h s 80%);	
  color:black}

.error_404 .article {
    text-align: center;
    padding-bottom: 0}
.return {
    grid-column: content;
    margin-top: var(--space-xl)}  
 
.page_simple .art-content {
    margin-top: var(--space-l);
    margin-bottom: var(--space-l)}
.page_simple article h1 {
    margin-bottom: var(--space-m);
    font-size: var(--size-step-4)}

.rubrique, .article, .card--scooter {
    background-color: #efefef;
    padding-top: var(--header-height)}
.categorie nav.btn--group {
    grid-column: content;
    background-color: #ddd;
    padding: var(--space-2xs);
    border-radius: 5px;
    margin-top: 0;
    margin-bottom: var(--space-xl)}
.categorie span:has(+ nav) {
    grid-column: content;
    display: inline-block;
    margin-bottom: var(--space-3xs);
    font-family: var(--font-secondary);
    font-weight: 600;
    line-height: var(--line-height-medium);
    color: #666}
.categorie nav :is(.btn--primary, .btn--outline) {
    padding: 0 var(--space-xs);
    line-height: 33px}
.categorie nav .btn--outline {border-color: var(--color-grey)}
.categorie nav .btn--primary.active {
    background-color: var(--color-green);
    border-color: var(--color-green);
    color: var(--color-grey-blue)}

.rubrique header {
    --count-column:1;
    grid-column: content;
    padding-top: var(--space-m);
    padding-bottom: var(--space-m)}
.rub--list-entries {
    grid-column: content;
    grid-gap: var(--space-s);
    overflow: hidden}
.rub--list-entries:not(:has(+ nav)) {padding-bottom: var(--space-xl)}  
@media only screen and (min-width:  37.5rem) {.rub--list-entries {--count-column:2}} 

.rubrique.models {padding-top: 0}
.rubrique.models header {
    grid-column: full;
    position: relative;
    padding-top: 0;
    background-color: var(--color-grey-light)}
.rub--list-models {
    --count-column:2;
    padding-top: var(--space-xl)} 
.rubrique.models :is(h1,.rub-chapo,.rub-chapo--suite) {
    margin-inline: auto;
    padding-left: 7.14285%;
    padding-right: 7.14285%}
.rubrique.models :is(.rub-chapo,.rub-chapo--suite) {max-width: 48rem}
.rubrique.models h1 {
    max-width: 64rem;
    margin-top: calc(var(--header-height) + var(--space-l));
    text-align: center;
    font-size: var(--size-step-4);
    font-weight: 600}
.premium {border:5px solid var(--color-green-darker)}    
.rubrique .highlight picture {background-color:black}
.rubrique .highlight span a {
    font-size: .750rem;
    color:var(--color-grey);
    line-height: var(--line-height-medium)}   
.rubrique .highlight img {opacity: .8}
.rubrique .highlight h2 a {
    display: block;
    color:var(--color-green)}
.rubrique .highlight h2 a strong {color:white}  
@media only screen and (max-width: 63.9375rem) {
    .rubrique .highlight .logo {border-radius: 0}
    .rubrique .highlight {
        overflow: hidden;
        border-radius: var(--border-radius-small);
        background-color: var(--color-grey-blue)}
    .rubrique .highlight .content {padding: var(--space-xs) var(--space-2xs) var(--space-2xs)}
    .rubrique .highlight span a {
        margin-bottom: var(--space-2xs);
        text-transform: uppercase;}
    }
.rub--list-models .normal h2 strong,
.page_search .rub--list-entries h2 strong,
.rubrique.alter :is(h3, .h3) strong {
    display: block;
    margin-bottom: var(--space-3xs);
    font-size: .750rem;
    text-transform: uppercase;
    color:var(--color-green-darker)}
.rubrique.models .banner {margin-bottom: var(--space-s)}
.rubrique.models .banner:has(+ div) {margin-bottom: var(--space-l)}
.rubrique.models .rub-chapo--suite {grid-column: full}

.rubrique.models:has(+ .rubrique.alter) .rub--list-models:last-of-type {border-bottom: 1px solid hsl(from var(--color-grey-darker) h s 80%) }
.rubrique.models + .rubrique.alter {padding-top: 0}
.rubrique.models + .rubrique.alter header {padding-bottom: var(--space-m)}
.rubrique.alter header :is(h2,.h2) {
    font-size:var(--size-step-3);
    font-weight: 600}
.rubrique.alter .content {
    grid-column: content;
    grid-gap: var(--space-s);
    padding-bottom: var(--space-l)}
.rubrique.alter :is(h3, .h3) {
    margin-top: var(--space-s);
    font-size: var(--size-step-1)}    
.rubrique.alter :is(h3, .h3),
.rubrique.alter :is(h3, .h3) a {line-height: var(--line-height-small)}    
.rubrique.alter .logo {margin-bottom: 0}    

.rubrique.alter .content.rowTop {
    padding-top: var(--space-l);
    padding-bottom: 0}
.rubrique.alter .content.rowBottom {padding-bottom: var(--space-l)}
.rubrique .rowTop +  h2 {
    grid-column: content;
    margin-top: var(--space-l);
    margin-bottom: var(--space-s);
    font-size: var(--size-step-2);
    font-weight: 600}

.rubrique h2 {font-size:var(--size-step-1)}
.rubrique h2 a {line-height: var(--line-height-medium)} 
.rubrique article .logo:has(+ h2) {margin-bottom: var(--space-s)}

h1 {font-size: var(--size-step-3);
    font-weight: 600;
    line-height: var(--line-height-medium)}
h2 {font-size: var(--size-step-3)}
h3 {font-size: var(--size-step-2)} 
h4 {font-size: var(--size-step-1)} 
h5 {font-size: var(--size-step-0)}
h2,h3,h4,h5 {
    font-weight: 400;
    line-height: var(--line-height)}
p,li,blockquote,pre {
    font-size: var(--text-base-size);
    font-family: var(--font-secondary);
    text-wrap: pretty;
    line-height: var(--line-height)}

strong {font-weight:600}
.article strong {color:var(--color-green-darker)}
.article i {
    font-style: normal;
    background-color: hsl(from var(--color-green) h s 75%)}

.progress {height: 3px;background: var(--color-green);position: fixed;top: 0;left: 0;width: 100%;z-index: 30;transform-origin: 0 50%;animation: scaleProgress auto linear;animation-timeline: scroll(root)}
@keyframes scaleProgress {
    0% {transform: scaleX(0)}
    100% {transform: scaleX(1)}}  

hr {width: 100%;border:none;border-top:1px solid rgb(0,0,0,.2);margin: var(--space-m) 0}

.art-content {grid-column: content}    
.art-logo {grid-column: full} 
.article .art-diptyque {
    grid-column: content;
    grid-gap: var(--space-m);
    margin-bottom: var(--space-xl)}
.art-diptyque picture,
.art-img picture {border-radius: var(--border-radius)}   

.banner--actus .logo:has(+ .date),
.rubrique .logo:has(+ .date) {margin-bottom: var(--space-s)}

.article :is(h2, h3, h4, h5,p, ul, blockquote, .art-img, .download, .table, .toggleBtn, .block, .art-frame,.art-moreArticle) {
    grid-column: content;
    width: 100%;
    max-width: 54rem;
    margin-inline: auto}
.article :is(p, ul, blockquote, .download, .table, .art-frame, .art-img, .art-youtube, .block, .carousel) + :is(h2, h3, h4, h5) {margin-top: var(--space-l)}
.article :is(p, ul, h2, h3, h4, h5, .table) {margin-bottom:var(--space-s)}
.article :is(h2, h3, h4, h5) strong {font-weight:400}

span[style="background-color:hsl(90,75%,60%);"] {
    font-weight: 600;
    background-color: hsl(from var(--color-green) h s 80%)!important}

.art-img picture, lite-youtube  {border-radius:var(--border-radius)}
.art-img picture + picture  {margin-top:var(--space-m)}
.art-img {margin:var(--space-s) 0}
.art-youtube {
    grid-column: content;
    margin:var(--space-l) 0}
.art-youtube + .art-youtube {padding-top: 0}

.article ul {padding-left: .375em}
.article ul > li {padding-left:.375em}
.article ul > li:not(:last-child) {margin-bottom: .250em}
.article ul > ::marker {font-size:var(--text-base-size);color:var(--color-grey);content: "\2022"}
.article blockquote ul > ::marker {color:black}

.block > .content {grid-column: span 12}
.block :is(p,figure) {margin-bottom: var(--space-m)}
.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) {
    font-size: var(--size-step-0);
    font-weight: 600;
    margin-bottom: 0;
    line-height: var(--line-height)}
.article .block :is(h2,h3,h4) {font-size: var(--size-step-0)}          
.article :is(h2,h3,h4):has(+ .toggleBtn) {margin-bottom: 0}          
.toggleBtn button {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 0;
    border:none;
    background: none;
    cursor: pointer}
.toggleBtn button svg {
    margin-left: auto;
    margin-right: 5px;
    transition: all .275s linear}
.toggleBtn button.down svg {transform:rotate(45deg)}                 
.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)}
.block + :is(.art-img, .art-youtube) {margin-top:var(--space-xl)}

blockquote {
    padding: var(--space-m) var(--space-m) calc(var(--space-m) - var(--space-s));
    margin: var(--space-s) 0;
    margin-left: 0;	
    background-color: var(--color-green);
    border-radius: var(--border-radius);
    font-weight: 600}
.article blockquote :is(h2,h3,h4,h5) {
    text-transform: uppercase;
    font-size: var(--size-step-1);
    font-weight: 600;
    line-height: var(--line-height-medium)}
.article blockquote :is(h2,h3,h4,h5) strong {font-weight: 600}   
.article blockquote :is(h2,h3,h4,h5,p,ul) {color: black}   

.article :is(p, ul, blockquote) a {text-decoration-line: underline}
a { text-underline-offset: 0.1em;
    text-decoration-thickness: 2px;
    text-decoration-color: var(--color-green-darker)}      
a:is(:hover, :focus) {outline: none}

.article .carousel {grid-column: full}
.article .carousel-cell {border-radius: var(--border-radius-small)}
.article :is(p,ul):has(+ .carousel)  {margin-bottom: 0}

.art-frame {
    padding: var(--space-m);
    margin: var(--space-s) 0;
    border-radius: var(--border-radius);
    background-color: var(--color-orange)}
.art-frame span {
    display: block;
    padding: var(--space-m) var(--space-m) calc(var(--space-m) - var(--space-s));
    border-radius: var(--border-radius);
    border:4px solid var(--color-grey-blue)}    
.art-frame :is(h2,h3,h4,h5,p,ul),
.article .art-frame ul > ::marker {color: var(--color-grey-blue)}
.art-frame :is(h2,h3,h4,h5,p,ul) {font-weight: 600}
.art-frame a { text-decoration-color: var(--color-grey-blue)} 

.download a {
    grid-column: content;
    display: flex;
    align-items: center;
    border-radius: 8px;
    overflow: hidden;
    margin: var(--space-2xs) 0;
    padding: var(--space-2xs);
    background-color: hsl(from var(--color-green-darker) h s 75%);
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: var(--size-step-0);
    text-transform: uppercase}   
.download svg {margin-right:var(--space-2xs)}   
.article .download + :is(h2, h3, h4, h5, figure) {margin-top: var(--space-xl)}
.article .download + .download a {margin-top: 0}

.article .art-moreArticle h3 {
    margin-top: var(--space-l);
    padding-bottom: var(--space-s);
    border-bottom: 4px solid hsl(from var(--color-grey-blue) h s 25%);
    font-size: .9375rem;
    letter-spacing: .125em;
    text-transform: uppercase;
    font-weight: 600}
.article .art-moreArticle h4 {
    margin-bottom: 0;
    font-size: var(--size-step-0)}
.article .art-moreArticle article a {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid hsl(from var(--color-grey-blue) h s 75%)}
.article .art-moreArticle article a img {
    margin-right: var(--space-s);
    width: 100px}

.article .editor {
    grid-column: full;
    background-color: #f6e4b2;
    margin-top: var(--space-l);
    padding-top: var(--space-l);
    padding-bottom: var(--space-l);
    text-align: center}
.article .editor a {text-decoration-color: hsl(from var(--color-grey-blue) h s 40%)}
.article .editor a:hover {
    background-color: hsl(from #b38b2e h s 75%)}
.article .editor img {
    margin-inline: auto;
    max-width: 150px;
    border-radius: 50%;
    margin-bottom: var(--space-s)}
.article .editor h3 {
    font-size: .750rem;
    letter-spacing: .250em;
    text-transform: uppercase;
    color: #b38b2e}
.article .editor h3 strong {
    display: block;
    font-size: 1.5rem;
    letter-spacing: normal;
    color:var(--color-grey-blue)}
.article .editor :is(h3, p) {
    padding-left: var(--space-l);
    padding-right: var(--space-l)}  
.article .editor h3::after {
    display: block;
    margin: 20px auto;
    content: '';
    width: 40px;
    height: 2px;
    background-color: #b38b2e}
.article .editor p {line-height: var(--line-height)}
.article .editor p + p {
    font-family: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
    font-size: .875rem}
.article .editor p:last-of-type {margin-bottom: 0}    

table {
    overflow-x: auto;
    margin: 0;
    padding: 0;
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    font-size: .875rem;    
    line-height: 1.35em;
    background-color: hsl(from var(--color-grey-blue) h s 87%)}
th {
    vertical-align: top;
    background-color: hsl(from var(--color-grey-blue) h s 65%);
    font-size: 1rem;
    font-weight: 700}
th,td {
    padding:.575rem;
    text-align: center;
    line-height: 1.3em}
tr:nth-child(even) {background-color:hsl(from var(--color-grey-blue) h s 79%)}

.next-prev {
    grid-gap: var(--space-xs);
    grid-column: content;
    margin:var(--space-m) 0}
@media only screen and (max-width: 63.9375rem) {
    article .next-prev:not(:has(.next a)),
    article .next-prev:not(:has(.prev a)) {grid-gap:0}
    }     
.prev,.next {background-color: #e7e7e7}
.next-prev .back  {
    margin-top:var(--space-s);
    margin-bottom:var(--space-s)}
.next-prev .back a > * {vertical-align: middle}
.next-prev .back svg {
    display: inline-block;
    margin-right: .250rem}
.next-prev div a {
    display: flex;
    flex-wrap: wrap;
    background-color: var(--color-grey-light);
    line-height: var(--line-height-medium);
    color: var(--color-grey-blue)}
.next-prev span {
    display: block;
    font-weight: 600;
    font-size: .750rem;
    text-transform: uppercase;
    color:var(--color-grey-blue)}
:is(.prev,.next) img {width:140px}       
:is(.prev,.next) div {
    width:calc(100% - 140px);
    align-self: flex-end;
    padding: var(--space-xs)}

.rubrique .next-prev {
    --count-column:2;
    grid-gap: var(--space-s);
    grid-column: content}
.rubrique .next-prev:has(div) {margin:var(--space-xl) 0}   
.rubrique :is(.prev,.next) {background: none}       
.rubrique .prev {justify-self: self-end}       
.rubrique .next {justify-self: self-start}       
.rubrique .next-prev div a,
.rubrique .next-prev span {
    display: grid;
    place-items: center;
    background-color: var(--color-grey-dark);
    padding: 0;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    color: white}
.rubrique .next-prev span {
    background: var(--color-grey-light)}


.page_form header, .page_form_success header {text-align: center}
.page_form header .art-chapo, .page_form_success header .art-chapo,
.error_404 .art-chapo {margin-top: var(--space-m)}
.page_contact hr {grid-column:content; margin-bottom: 0}               
.page_form form {
    grid-column: content;
    display: flex;
    flex-wrap: wrap;
    row-gap: var(--space-m);
    margin-bottom: var(--space-2xl)} 
.page_form form > * {
    width: 100%;
    line-height: 0}       
.page_art .page_form h2 {
    max-width: inherit;
    margin-bottom: .5rem;
    font-size: var(--size-step-1);
    font-weight: 400}
.page_form :is(input[type=email],
input[type=text],
select,textarea) {
    width: 100%;
    padding: .5rem;
    background-color:white;
    height: 60px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1.250rem;
    font-family: var(--font-secondary);
    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(--color-green-darker);
    font-size: var(--size-step-1);
    font-weight: 700;
    color: white;
    text-transform: uppercase}

.search-banner {
    grid-column: full;
    background-color: white}
.search-select {
    max-width: 64rem;
    margin-inline: auto;
    padding-left: 7.14285%;
    padding-right: 7.14285%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2xs)}   
.search-select :is(select,button) {
    min-width: 20ch;
    border: none;
    border-radius: 5px;
    padding: 0.375rem 0.5rem;
    font-size: .875rem;
    color: white;
    cursor: pointer;
    line-height: var(--line-height);
    background-color: var(--color-green-darker)}
@media only screen and (max-width: 63.9375rem) {
    .search-select :is(select,button) {
        flex:1 1 0;
        min-width: fit-content}
    }
@media only screen and (max-width: 26.5rem) {
    .search-select :is(select,button) {
        flex-basis:calc(50% - (var(--space-2xs) / 2))}
    } 
.search-select button {
    min-width: inherit;
    background-color: var(--color-grey-blue);
    color:white;
    font-weight: 600;
    text-transform: uppercase}    
.search-banner .search-select {
    padding-top: var(--space-xs);
    padding-bottom: var(--space-xs)}
.search-banner .search-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: var(--space-xs);
    width: inherit}
.search-banner .search-content span {
    margin-right: var(--space-2xs);
    line-height: var(--line-height-large)}   
.search-banner .search-content .search-form {border-color: var(--color-grey)} 

.banner {
    grid-column:full;
    z-index:2;
    margin-bottom: var(--space-xl);
    padding: var(--space-m);
    background-color: #d4d6d7;
    text-align: center}

.scoot--logo {grid-column: full}
.scoot--catchphrase {
    z-index: 5;
    grid-column: content;
    align-self: center;
    display: inline-block;
    max-width: 50%;
    font-size: var(--size-step-2);
    font-weight: 600;
    line-height: var(--line-height-medium);
    color: white}
.scoot--logo, .scoot--catchphrase {grid-row: 1}
.card--scooter header,
.article header {
    --count-column:1;
    grid-column: content;
    padding: var(--space-xl) 0}
.card--scooter h1,
.rubrique h1,
.rubrique header :is(h2,.h2),
.article h1 {margin-bottom: var(--space-s)}    
.card--scooter :is(p,figure) {margin-bottom: var(--space-s)}
.card--scooter p:last-of-type,
.article .art-chapo p {margin-bottom: 0}
.card--scooter header a {margin-top: var(--space-s)}

.card--scooter :is(.lite-youtube,.poster) {
    grid-column: content;
    margin-bottom: var(--space-xl)}
.poster {
    display: grid;
    place-items: center}
.poster :is(picture, svg, .content) {grid-row: 1; grid-column: 1} 
.poster picture {border-radius: var(--border-radius)} 
.poster :is(svg, .content) {z-index: 5} 
.poster svg {display: inline-block} 

.scoot--imgX3 {
    grid-column: full;
    padding: var(--space-xl) 0;
    background-color: var(--color-grey-blue)}
.scoot--imgX3 .album {
    --count-column:2;
    grid-gap: var(--space-m);
    margin-top: var(--space-m)}  
.scoot--imgX3 .thumbnail {grid-column: span 2}               
.scoot--imgX3 img {border-radius: var(--border-radius)}               
.scoot--imgX3 h2,
.scoot--imgX2 h3 {
    margin-bottom: var(--space-m);
    font-size: var(--size-step-2)}
.scoot--imgX3 :is(h2,p) {color: white}
.scoot--imgX3 :is(.content,.album) {
    grid-column: content;
    z-index: 5}

.scoot--spec {
    grid-column: content;
    align-items: end;
    padding:var(--space-xl) 0}    
.scoot--spec ul {
    grid-row: 2;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    margin-top: var(--space-m);
    margin-bottom: auto;
    list-style: none}        
.scoot--spec ul li {
    padding: .750rem 1.125rem;
    border-radius: var(--border-radius);
    background-color: var(--color-green);
    font-family: var(--font-primary);
    line-height: var(--line-height-medium)}
.scoot--spec ul i {font-family: var(--font-secondary)}
.scoot--spec .link {
    align-self: start;
    margin-top: var(--space-m)}    
.scoot--spec a {
    display: flex;
    align-items: center;
    line-height: var(--line-height-medium)}
.scoot--spec a:not(:last-child) {margin-bottom: var(--space-xs)}   
.arrow {
    display: inline-block;
    padding: .125rem .750rem;
    margin-right: .750rem;
    border-radius: var(--border-radius);
    border: 1px solid #aaa}   
.arrow.color-gree-darker {
    color: white;
    background-color: var(--color-green-darker);
    border: 1px solid var(--color-green-darker)}    

.scoot--imgX2 {
    grid-column: full;
    padding-bottom: var(--space-xl)}
.scoot--imgX2 :is(.colLeft, .colRight) {
    --count-column: 14;
    align-content: start}
.scoot--imgX2 picture {
    grid-column: 1 / -1;
    margin-bottom: var(--space-xl)}                  
.scoot--imgX2 :is(h3,p,.image) {grid-column: 2 / -2}
.scoot--imgX2 .colLeft p:last-of-type {margin-bottom: var(--space-xl)}
.scoot--imgX2 .image,
.scoot--toggle .image {
    overflow: hidden;
    border-radius: var(--border-radius)}

.card--scooter .carousel {grid-column: full}

.scoot--toggle {
    --count-column:12;
    grid-column: content;
    padding-bottom: var(--space-xl)}
.scoot--toggle .toggleBtn {
    padding: var(--space-s) 2.5rem;
    padding-left: 0}    
.scoot--toggle > :is(h2,p, picture),
.scoot--toggle :is(.toggleBtn, .block),
.scoot--toggle .block > .content {grid-column: span 12}
.scoot--toggle h2 {margin-bottom:var(--space-m)}
.scoot--toggle p + .toggleBtn {margin-top:var(--space-m)}
.scoot--toggle h3 {
    font-size: var(--size-step-0);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: -0.015em;
    line-height:var(--line-height-small)}
.scoot--toggle .image img {width:100%}
.card--scooter .scoot--toggle p:last-of-type:has(+ .image) {margin-bottom: var(--space-s)}
.number {
    margin-right: var(--space-2xs);
    font-weight: 600;
    color: var(--color-green-darker)}
    
.scoot--prosCons {
    grid-column: full;
    padding-top:var(--space-xl);
    padding-bottom:var(--space-xl);
    background-color: var(--color-grey-light);
    background-repeat: no-repeat;
    background-position: bottom left;
    /*background-blend-mode: multiply*/}
@media only screen and (max-width: 63.9375rem) {.scoot--prosCons {background-image: none !important}}
.scoot--prosCons > * {grid-column: content}
.scoot--prosCons h2 {
    margin-bottom: var(--space-m);
    font-size: var(--size-step-4);
    font-weight: 400}
.scoot--prosCons h2 strong {
    display: block;
    font-size: var(--size-step--1);
    text-transform: uppercase}
.scoot--prosCons br {display: none}    
.pros, .cons {
    padding: var(--space-m);
    border-radius: var(--border-radius)}
.pros {
    margin-bottom: var(--space-m);
    background: var(--color-green)}    
.cons {background: var(--color-orange)}
:is(.pros, .cons) ul {list-style: none}
.icon {
    display: grid;
    place-content: center;
    width: 80px;
    height: 80px;
    margin-bottom: var(--space-m);
    border-radius: var(--border-radius);
    background: var(--color-grey-blue);
    color:var(--color-green)}    
.cons .icon { color:var(--color-orange)}
:is(.pros,.cons) ul > ::marker {font-size:var(--text-base-size);color:var(--color-grey-blue);content: "\2022"}
:is(.pros,.cons) li {
    padding-left:.375em;
    margin-bottom: var(--space-2xs);
    line-height: var(--line-height-medium);}

.hide--mobile {display: none}