:root {
    --text-base-size: 1.250rem;

    --grid-gap-xlarge:5.625rem;
    --grid-gap-large:3.750rem;
    --grid-gap-medium:1.875rem;
    --grid-gap:.9375rem;
    --grid-gap-small:.5rem;

    --navbar-normal:100px;
    --navbar-reduce:60px;
    }

a, .animation {transition: all .15s ease-in-out}
.animation--slow {transition: all .55s ease-in-out}
.sidebar a:hover {color: white}

.mainGrid {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]}

.navbar .menuBtn {display: none}
.navbar :is(.menuTxt, .contact) {display: block}

.background-video { min-height: 100svh}
.tag { padding: calc(1.5 * var(--grid-gap-xlarge)) 0}
.tag p, .gamme h2, .workshop h2 {
    font-size: var(--font-size-125);
    line-height: 1.15em}
.edito h1 {z-index: 1;font-size: var(--s2)}
.edito {position: relative}
.edito .chapo {
    grid-column: 2 / span 8;
    z-index: 1;
    max-inline-size:inherit;
    font-size: var(--font-size-18);
    column-count: 2;
    column-gap: var(--grid-gap-large)}
.edito img {
    display: block;
    position: absolute;
    top: 25%;
    right: calc(50% - 175px);
    z-index: 0;
    grid-row: 1 / span 3;
    grid-column: content}
.gamme, .workshop {
    padding-top: calc(2* var(--grid-gap-large));
    padding-bottom: calc(2* var(--grid-gap-large))}
.gamme p {grid-column: span 6 / -2}    
.gamme .items {--count-column: 3}
.gamme .btn--primary {margin-bottom: var(--grid-gap-xlarge)}
.gamme .content {position: inherit;right: 0;left: 0;top: 0;transform: none}
.item_1 h3 {color:var(--vert-clair)}                       
.item_2 h3 {color:var(--bleu-clair)} 
.item_3 h3 {color:var(--beige-clair)}
.gamme > img {
    display: block;
    grid-row:5;
    z-index: 5;
    position: absolute;
    left: 33.333%;
    transform: translate(-50%, -50%);
    max-width: 20.1%}
.workshop .content {--count-column: 2}   
.workshop h3 {font-size:var(--font-size-22)}                
.workshop a:hover h3 {margin-left: var(--grid-gap-small)}
.eshop {margin-top: var(--grid-gap-xlarge)}
.eshop img {
    grid-column:3 / span 3;
    margin-top: calc(-1 * var(--grid-gap-xlarge))}
.eshop .content {
    grid-column:span 5 / -4;
    max-width: inherit;
    align-self: center;
    padding-top: var(--grid-gap-medium);
    padding-bottom: var(--grid-gap-medium)}    
.page_sommaire .footer_entries {padding-top:var(--grid-gap-large)}

.block-actus {
    display:flex;
    flex-direction: column;
    justify-content: center;
    padding: 10%}
@container block-actus (max-width: 600px) {
    .block-actus :is(h3, .h3) {font-size: var(--font-size-22)}       
}    

.footer_entries {--count-column: 2}
.column:is(.copyright, .mentions) {
    display: flex;
    flex-direction: column}
.column.copyright {grid-column: 2 / span 3}           
.copyright a {margin-bottom: auto}
.column.countries {
    grid-column: 5 / -5;
    display: flex;
    justify-content: space-between}
.countries > * {margin-top: 0}
.column.mentions {
    grid-column: span 2 / -2;
    text-align: right}
.social {margin-top: 0}
.legal {
    margin-top: auto;
    font-size: var(--font-size-14)}
                

/* ARTICLE RUBRIQUE MODELES
/* -------------------------- */
.rub-logo,.mod-logo,.art-logo {margin-bottom: var(--grid-gap-xlarge)}
:is(.rubrique,.article,.modele) h1 {
    font-size: var(--font-size-75);
    font-weight: 400}
.rubrique .heading h1 {margin-bottom: var(--grid-gap-medium)}
.heading p.rub-chapo {padding-left: 0}

.page_rubrique--modele main {background-color: transparent}    
.rub-logo--modele {
    display: block;
    grid-column: full;
    position: fixed;
    top: 0;
    left: 0;
    right:0;
    z-index: -1}
.page_rubrique--modele .rubrique h1 {
    margin-bottom: calc(1.75* var(--grid-gap-xlarge));
    font-size: var(--font-size-150);
    text-align: center}
.page_rubrique--modele .rubrique section {--count-column: 4}
.highlight a h2 {
    bottom: var(--grid-gap-large);
    right: var(--grid-gap-large);
    left: inherit;
    font-size: var(--font-size-18)}
.highlight a span {
    top: var(--grid-gap-large);
    bottom: inherit;
    left: var(--grid-gap-large);
    font-size:var(--font-size-40)}
article.default {background-color: black}    
.default .content {padding: var(--grid-gap-medium);background-color: black}
article.default:nth-of-type(2n + 1)::before {border-left: 1px solid rgb(255 255 255 / .15)}
article.default:nth-of-type(4n + 1)::before {border-left: none}
.default span {font-size: var(--font-size-24)}
.modele-chapo {
    grid-column: 3 / span 5;
    align-self: center}
.page_rubrique--modele .illustration {
    grid-column: span 4 / -3;
    align-self: center;
    margin-top: var(--grid-gap-xlarge)}         

.modele h1 {color:white}
.modele .h1 a {color: var(--beige-clair)}      
.modele h1 :is(strong, em) {display:block}
.modele h1 em {font-size: var(--font-size-30)}
.mod-chapo,.mod-detail,.mod-spec {--count-column:12}
.mod-chapo,.mod-detail,.modele :is(.col1,.col2) {
    padding-top:calc(1.75 * var(--grid-gap-xlarge));
    padding-bottom: calc(1.75 * var(--grid-gap-xlarge))}
.mod-chapo h2 {
    grid-column: 2 / span 4;
    font-size: var(--font-size-30);
    line-height: 1.5em}
:is(.mod-detail, .mod-detail-end) :is(h3,p),
.mod-detail-end figure,
.block :is(p,figure) {margin-bottom: var(--grid-gap-medium)}    
.mod-chapo p {
    grid-column: span 5 / -2;
    font-size: var(--font-size-22)}
.mod-logo-bis,.mod-illustration {grid-row: 3}
.mod-illustration img {
    display: block;
    right: calc(25% - 150px);
    bottom: -35%;
    max-width: 25%}
.mod-detail :is(.content,.album) {z-index: 0} 
.mod-detail .content {grid-column: 3 / span 4}
.mod-detail .album {
    grid-column: span 6 / -2;
    place-content: center}
.mod-detail .right {
    grid-row: span 2;
    display: flex;
    align-items: center}         
.mod-detail .thumbnail {grid-column: span 1}
.mod-spec {padding-top: 0}
.mod-spec :is(h2,ul) {
    z-index: 5;
    grid-column: 2 / span 8}
.mod-spec h2,
.mod-more h2  {
    grid-row: 1;
    font-size: var(--s4)}
.mod-spec ul {
    gap: var(--grid-gap);
    margin-top: var(--grid-gap)}         
.mod-spec ul li {
    padding: .375rem .5rem;
    font-size: var(--font-size-20)}
.mod-spec picture {
    z-index: 0;
    grid-row: 1 / span 2;
    grid-column: 8 / span 5}

.modele .col1 {grid-column-start:3}   
.modele .col2 {grid-column-start: 9}   
.modele :is(.col1,.col2) {grid-column-end: span 4}                      

.mod-more {padding-top:calc(1.75 * var(--grid-gap-xlarge))}
.mod-more h2 {
    z-index: 1;
    grid-column: 1 / span 8;
    grid-row: 1;
    align-self: end;
    margin-bottom: var(--grid-gap-large)}
.mod-more h2 + p {
    z-index: 1;
    grid-column: span 5 / -2;
    grid-row: 2}
.mod-more picture {
    z-index: 0;
    grid-column: 1 / span 6;
    grid-row: 1 / span 2;
    justify-self: center}
.block > .content {grid-column: span 5 / -2}
button svg {margin-right: var(--grid-gap-large)}
.article button svg {margin-right: inherit}
.toggleBtn {padding: var(--grid-gap-large) 0}
.article .toggleBtn {padding: var(--grid-gap-medium) 2.5rem;padding-left: 0}
.toggleBtn h3 {font-size: var(--font-size-40)}
.article .toggleBtn :is(h2,h3,h4) {font-size: var(--font-size-24)}
.article .toggle {padding-bottom: var(--grid-gap-medium)}
.number {margin-right: var(--grid-gap-medium);font-size:var(--font-size-14);color: black} 

.expert > * {
    z-index: 5;
    grid-column: content;
    color: white}
.expert .background {
    display: block;
    z-index: 0;
    grid-column: full;
    grid-row: 1 / span 3}    
.expert p {
    grid-row: 1;
    grid-column: 2 / span 5;
    align-self: end}
.expert p:first-of-type {
    padding-top: calc(1.75 * var(--grid-gap-xlarge));
    margin-bottom: 0}
.expert p + p,
.expert .btn--primary {grid-column: span 5 / -2}
.expert .btn--primary {grid-row: 2}
.block-expert {
    --count-column:3;
    grid-row: 3;
    grid-column-gap: var(--grid-gap-large);
    padding-bottom: calc(1.75 * var(--grid-gap-xlarge))}
 .expert p strong {
    font-size: var(--s4);
    font-weight: 400} 

p.rub-chapo, .article p.art-chapo {font-size: var(--font-size-24)} 
.article :is(h2,h3,h4,h5,h6,p,ul,blockquote,pre),
.article :is(.toggleBtn,.block,.download,.btn-group) {grid-column: 5 / -5}

.page_rubrique .rubrique {padding-bottom: calc(2 * var(--grid-gap-large))}
.page_rubrique .rubrique section {--count-column: 3}
.page_rubrique .rubrique .large-column {
    grid-column: span 3;
    height: calc(400px + var(--grid-gap-xlarge));
    margin-top: calc(-1 * var(--grid-gap-xlarge));
    border-top: var(--grid-gap-xlarge) solid var(--gris-fonce);}
.large-column > * {align-self: center}
.large-column :is(.preview, .content, .background) {grid-row:1}
.large-column .preview {width: 40%; margin-top: 0}
.large-column .content {
    padding: 0;
    margin-left:50%;
    width: 45%}

.page_modele .h1 {
    z-index: 1;
    align-self: center}

.rub-logo,.page_modele .h1, .mod-logo {grid-row:1} 
.rub-logo, .mod-logo {margin-bottom: 0}
.page_rubrique .illustration {grid-column: 2 / span 5} 
.page_rubrique .heading {
    grid-column: span 6 / -2;
    align-self: center;
    margin-top: var(--grid-gap-xlarge)}
.page_rubrique :is(.illustration, .heading) {grid-row: 1}     
.page_rubrique .rubrique section,
.page_rubrique .rubrique section.fullMobile {--count-column:3}
.page_rubrique article h2 {
    padding-left: var(--grid-gap);
    padding-right: var(--grid-gap);
    font-size: var(--s3)}
.page_rubrique article h2 strong {font-size: var(--font-size-14)}     
:is(.page_rubrique, .page_rubrique--modele) article a {overflow: hidden}
:is(.page_rubrique, .page_rubrique--modele) article a:hover img {opacity: .6}

.page_rubrique .rubrique article {position: relative}
.page_rubrique .rubrique article::before {
    background-color: rgb(255,255,255,.1);
    display: block;
    height: 100%;
    left: calc(var(--grid-gap-xlarge) / -2);
    margin: auto;
    position: absolute;
    width: 1px}
    .page_rubrique .rubrique article::before {
    height: calc(100% + var(--grid-gap-xlarge));
    top: - var(--grid-gap-xlarge)}
.page_rubrique .rubrique :is(article:nth-child(3n+2),article:nth-child(3n+3))::before {content:''}

.page_blog .rubrique section {--count-column:4}
:is(.page_blog .rubrique,.article) h1 {grid-column: 3 / -3}
p.rub-chapo, .article p.art-chapo {grid-column: span 6 / -3}  

.art-album {
    grid-column: content;
    display: flex;
    justify-content: space-between}  
:is(.img-album_1, .img-album_2)::before {
    left: inherit;
    right: 0;
    top: -5px;
    height: calc(100% + 10px);
    width: 35px}
.img-album_2::before {left: 0}

.img-text, .art-youtube {grid-column: 4 / -4}
.art-youtube + .art-youtube {margin-top: calc(-1 * var(--grid-gap-medium))}

.article :is(p, ul, blockquote) a:hover {background-color: var(--vert-clair)}
.article :is(p, ul, blockquote) a:active {background-color: #dce0d2}
.btn-group > * {flex:0}

.next-prev {--count-column:2}
.next-prev a {padding: var(--grid-gap-medium)}
.next-prev a:hover {background-color: var(--vert-fonce);}
:is(.prev,.next) div {
    padding: 0;
    padding-left: var(--grid-gap-medium)}

form {
    justify-content: space-between;
    gap: var(--grid-gap-medium)}
form :is(.name, .email) {width: calc(50% - (var(--grid-gap-medium)) / 2)}
.form-logo {
    display: block;
    grid-row: 2 / span 2;
    grid-column: 3 / span 5;
    align-self: center}
.page_form p.art-chapo, form {grid-column: span 5 / -3}      
.article .success a:hover {
    padding-left: .5rem;
    background-color: transparent;}

@media only screen and (max-width: 99.9375rem) {
    .edito .chapo {grid-column-end: span 10}
    .tag p, .gamme h2, .workshop h2 {font-size: var(--s5)}
    .eshop img {grid-column: 2 / span 4;}
    .eshop .content {grid-column:span 7 / -2}  
    .column.countries {grid-column: 5 / span 7} 
    .block-club :is(h2,.h2) {letter-spacing: .1em;}
    .block-actus {padding: 7.5%}
    :is(.page_blog .rubrique,.article) h1 {grid-column: content}
    p.rub-chapo, .article p.art-chapo {grid-column: span 8 / -2}
    p.rub-chapo, .article p.art-chapo {grid-column-start:span 7;font-size: var(--font-size-22)} 
    .article :is(h2,h3,h4,h5,h6,p,ul,blockquote,pre),
    .article :is(.toggleBtn,.block,.download,.btn-group) {grid-column: 4 / -4}
    .mod-chapo h2 {grid-column: 1 / span 5}
    .mod-chapo p, .mod-more h2 + p, .block > .content {grid-column: span 6 / -1}
    .mod-detail .content {grid-column: 2 / span 5}
    .mod-illustration img {right: 13.5%;bottom: -55%}
    .mod-spec :is(h2,ul) {grid-column: 1 / span 9}
    .modele .col1 {grid-column-start:2}     
    .modele :is(.col1,.col2) {grid-column-end: span 5}
    .page_rubrique article h2,
    .page_rubrique .fullMobile article h2 {font-size: var(--s3)}
    .page_form p.art-chapo, form {grid-column: span 6 / -2}
    .form-logo {grid-column-start: 2}     
    }

@media only screen and (max-width: 89.9375rem) {
    .expert p {grid-column-end: span 6}
    .highlight a span {font-size:var(--s2)}
    .modele-chapo {grid-column: 2 / span 6}
    .page_rubrique--modele .illustration {grid-column: span 5 / -2}
    .art-youtube + .art-youtube {margin-top: 0}
    }

@media only screen and (max-width: 79.9375rem) {
    :root {
    --text-base-size: 1.125em;    
    --grid-gap-xlarge:1.875rem;
    --grid-gap-large:1.525rem;
    --grid-gap-medium:1.250rem}
    .edito .chapo {grid-column: content}
    .column.copyright {grid-column-end: span 2}
    .column.countries {grid-column: 4 / -4; justify-content: flex-end}
    .usa {padding-left: var(--grid-gap-large)}
    .page_rubrique .rubrique .large-column {height: calc(325px + var(--grid-gap-xlarge))} 
    :is(.rubrique,.article) h1 {font-size:var(--s4)}
    p.rub-chapo, .article p.art-chapo {font-size: var(--font-size-20)} 
    .img-text, .art-youtube {grid-column: 4 / -4}
    .mod-more h2 {grid-column-end: span 10}
    .toggleBtn h3 {font-size: var(--s2)}  
    }

@media only screen and (max-width: 71.9375rem) {
    .mainGrid {grid-template-columns: [full-start] minmax(var(--min-column-size), var(--grid-gap-large)) [content-start] repeat(12, minmax(var(--min-column-size), 1fr)) [content-end] minmax(var(--min-column-size), var(--grid-gap-large)) [full-end]}
    .edito img {display: none}
    .block-actus {padding: var(--grid-gap-medium)}
    .page_rubrique article h2,
    .page_rubrique .fullMobile article h2 {font-size: var(--s2)}
    .highlight a span {font-size:var(--s1)}
    .mod-spec :is(h2,ul) {grid-column-end: span 12}
    .modele .col1 {padding-right: var(--grid-gap)}   
    .modele .col2 {grid-column-start: 8;padding-left: var(--grid-gap)}   
    .modele :is(.col1,.col2) {grid-column-end: span 6}
    .mod-chapo h2 {padding-right: var(--grid-gap-xlarge)}
    .mod-chapo p, .mod-more h2 + p,.block > .content {grid-column-start: span 7}
    .page_rubrique--modele .rubrique h1 {font-size: var(--s5)}
    }