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

:root {
  --beige : #aa8358;
  --beige-clair : #e1a665;
  --beige-texte : #6C5232;
  --vert : #545547;
  --vert-clair : #a2aa95;
  --vert-fonce : #242e20;
  --vert-texte: #36372f;
  --gris : #bdbdb6;
  --gris-fonce: #0f0f0f;
  --bleu-clair : #a9c5c9;
  --orange: #ff4710;          
  
  --grid-gap-xlarge:1.5rem;
  --grid-gap-large:1.375rem;
  --grid-gap-medium:1.250rem;
  --grid-gap:.9375rem;
  --grid-gap-small:.5rem;
      
  --font-primary: 'DM Sans', system-ui, sans-serif;
  --text-base-size: 1.125rem;
  --body-line-height: 1.5em;
  
  --font-size-150: 9.375rem;
  --font-size-125: 7.8125rem;
  --font-size-75: 4.6875rem;
  --font-size-40: 2.5rem;
  --font-size-30: 1.875rem;
  --font-size-24: 1.5rem;
  --font-size-22: 1.375rem; 
  --font-size-20: 1.125rem;
  --font-size-18: 1.125rem;    
  --font-size-16: 1rem;
  --font-size-14: .875rem;
  --font-size-12: .750rem;  
  --ratio: 1.4;
  --s0: clamp(1.125rem,1rem + 0vw,1rem);
  --s1: clamp(1.375rem,1.19rem + 0.32vw,1.41rem);
  --s2: clamp(1.625rem,1.39rem + 0.85vw,2rem);
  --s3: clamp(2rem,1.61rem + 1.7vw,2.83rem);
  --s4: clamp(2.5rem,1.83rem + 3.04vw,4rem);
  --s5: clamp(3.0rem,2.04rem + 5.07vw,5.65rem);
  --line-height: 1.65;
  --line-height-medium: calc(1*var(--ratio));
  --line-height-small: calc(0.9*var(--ratio));

  --navbar-normal:55px;
  --navbar-reduce:55px;
  --min-column-size:10px;
  --count-column:1}

body {
    min-height: 100svh;	
    background: #eee;
    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}

.button {touch-action: manipulation; inline-size: fit-content; user-select: none;cursor: pointer}
.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; background-color:white}

.banner--rgpd {
    position: fixed;
    display: none;
    z-index: 100;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    padding: var(--grid-gap-medium);
    background-color: var(--vert-fonce);}
.banner--rgpd > * {
    max-width: 40em;
    margin:0 auto;
    text-align: center}
.banner--rgpd p {
   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(--grid-gap-small) auto 0}
.banner--rgpd .btn--accept {
    font-weight: 700;
    color: black;
    border-color: var(--beige);
    background-color: var(--beige)}
.btn--decline {
    border:none;
    background: none}    

.navbar {
    z-index: 10;
    width: 100%;
    max-width:120rem;
    height: var(--navbar-normal);
    background-color: transparent;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin-inline: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    will-change: background-color, color;
    backface-visibility: hidden;
    transition: all .15s ease-in-out}

.navbar :is(a, div) {
    cursor: pointer;
    padding-left: var(--grid-gap-large);
    padding-right: var(--grid-gap-large);
    font-size: var(--font-size-16);
    font-weight: 700;
    text-transform: uppercase;
    color: white;
    line-height: var(--navbar-normal);
    text-decoration: none}
.navbar .logo {padding:var(--grid-gap) var(--grid-gap-large)}
.navbar svg {fill: white}

.logo .default,
:is(.reduce,.page_blog,.page_article) .logo .white {display:none}
:is(.reduce,.page_blog,.page_article) .logo .default {display:block}

:is(.page_article,.page_blog) .navbar :is(a, div) {color: black}
.navbar :is(.menuTxt, .contact) {display: none}

.navbar.reduce {
    height:var(--navbar-reduce);
    background-color: white}
.navbar.reduce :is(a, div) {
    color:black;
    line-height:var(--navbar-reduce)}          

.sidebar {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 20;
    top: 0;
    right: 0;
    background-color: var(--beige);
    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%}}    
.sidebar .closebtn {
    position: absolute;
    top: 0;
    right: 0;
    height: var(--navbar-normal);
    padding-left: var(--grid-gap-medium);
    padding-right: var(--grid-gap-medium);
    display: flex;
    align-items: center}
.closebtn span {display: none}    
:is(.mainNav, .subNav) a {display:inline-block}    
.mainNav, .subNav, .socialNav {
    margin-left: var(--grid-gap-xlarge);
    width: 500px;
    list-style: none}
.mainNav {margin-top: var(--navbar-reduce)}
.subNav, .socialNav {margin-top: var(--grid-gap-medium)}
.socialNav {margin-left: calc(var(--grid-gap-xlarge) - .625rem)}
.mainNav a {
    font-size: var(--s4);
    line-height: 1.4em;}
.subNav a {
    font-size: var(--s1);
    font-weight: 700} 
.socialNav a {
    display:inline-block;
    vertical-align: middle;
    padding:.625rem}    
.sidebar a.on {
    text-decoration-line:underline;
    text-decoration-thickness: 4px}


/* ACCUEIL
/* -------------------------- */
.background-video {
    background-color: black;
    min-height: 50svh;
    position: relative}
.background-video iframe {
    transition: opacity 500ms ease-in-out;
    transition-delay: 250ms}
.tag p,
.edito :is(h1,.chapo,.link),
.gamme :is(h2,hr,.items),
.gamme p, .gamme > img,
.workshop .content, .eshop .content {grid-column: content}
.tag {
    padding: var(--grid-gap-xlarge) 0;
    background-color: black;
    background-repeat: no-repeat;
    background-position: right 10% top 0;
    background-size: auto 100% }
.tag p, .gamme h2, .workshop h2 {
    font-size: var(--s4);
    line-height: var(--line-height-small);
    color: white}
.tag p {position: relative}    
.edito h1 {
    margin-top: var(--grid-gap-xlarge);
    margin-bottom: var(--grid-gap-medium);
    font-size: var(--s3);
    font-weight: 700}    
.edito .chapo {margin-bottom: var(--grid-gap-medium)}
.edito .link,
.page_sommaire .carousel,
.gamme h2 {margin-bottom: var(--grid-gap-xlarge)}
.edito img {display: none}
.carousel {min-height: 765px}
@media only screen and (max-width: 71.9375rem) {.carousel {min-height: 700px}}
@media only screen and (max-width: 37.4375rem) {.carousel {min-height: 450px}}
.carousel a {position:relative}
.carousel :is(.title, .subTitle) {
    position:absolute;
    top: var(--grid-gap-medium);   
    left: var(--grid-gap-medium);
    color: white}
.carousel .title {
    font-size: var(--font-size-40);
    line-height: .75em}
.carousel .subTitle {
    top: inherit;
    bottom: var(--grid-gap-medium)}
.diptyque .art-album {margin: 0}    
.img-album_2 .content,
.gamme .content {
    z-index: 5;
    position: absolute;
    top:50%;
    transform: translateY(-50%);
    left: var(--grid-gap-xlarge)} 
.img-album_2 h2 {
    font-size: var(--font-size-24);
    color:white;
    font-weight: 700}
.img-album_2 h3 {
    font-size: var(--s3);
    color:white}
.gamme, .workshop {
    padding-top: var(--grid-gap-xlarge);
    padding-bottom: var(--grid-gap-xlarge)}
.gamme, .gamme a {
    position: relative;
    background-color: black;
    color: white}
.gamme hr {
    margin-top: var(--grid-gap-xlarge);
    margin-bottom: var(--grid-gap-xlarge);
    border-color: rgb(255, 255, 255, .15)}    
.gamme .items {
    grid-gap: var(--grid-gap-large);
    text-align: center}
.gamme .content {right: var(--grid-gap-xlarge)}
.gamme h3 {font-size: var(--s4)}
.gamme .btn--primary {margin-top: var(--grid-gap)}
.gamme > img {display: none}
.item_2 span, .item_3 span {opacity: .3}
.workshop .content {grid-gap: var(--grid-gap-xlarge)}
.workshop h2 {
    margin-bottom: var(--grid-gap-medium);
    color: black}
.workshop h3 {
    font-size:var(--font-size-20);
    text-transform: uppercase}
.workshop ul, .list {
    margin-top: var(--grid-gap-large);
    margin-bottom: var(--grid-gap-large);
    list-style: none;
    border-top: 1px solid rgb(0 0 0 / .2)}
.workshop li, .list .list-item {border-bottom: 1px solid rgb(0 0 0 / .2)}
.workshop a, .list a {
    display: flex;
    align-items: center;
    padding-top: var(--grid-gap-medium);
    padding-bottom: var(--grid-gap-medium);
    line-height: var(--line-height-small)}
.workshop span {
    margin-right: var(--grid-gap);
    font-weight: 700;
    color: var(--gris)}    
.workshop svg, .list svg {margin-left: auto}
.workshop figure {
    position: relative;
    display: flex;
    flex-wrap:wrap;
    gap: var(--grid-gap-medium)}
.workshop figure img:not(:last-child) {width: calc(50% - (var(--grid-gap-medium) / 2))}
.workshop figure img:nth-child(2) {margin-top: auto}
.workshop figure img:nth-child(3) {margin-bottom: auto}
.workshop figure img:last-child{
    position: absolute;
    z-index: 5;
    max-width: 44.32%;
    transform: translateY(-50%);
    left: 27.84%;
    top: 50%}
.eshop {
    background-color: #3c4852;
    background-repeat: no-repeat;
    background-size: cover;
    color: white}
.eshop img {
    grid-column: full;
    justify-self: center}          
.eshop .content {
    max-width: 480px;
    justify-self: center;
    padding-top: var(--grid-gap-xlarge);
    padding-bottom: var(--grid-gap-xlarge)}
.eshop h2 {
    margin-bottom: var(--grid-gap);
    font-weight: 700;
    text-transform: uppercase}
.eshop a {
    margin-top: var(--grid-gap-medium);
    background-color: var(--beige);
    border-color: var(--beige)}     

footer {
    padding-top: var(--grid-gap-xlarge);
    padding-bottom: var(--grid-gap-xlarge)}
footer .column {grid-column: content}
footer .title {
    font-size: var(--font-size-40);
    line-height: 1em}
footer :is(p, .title) {margin-bottom: 1.250rem}
footer p:last-child {margin-bottom:0}
footer p + p {position: relative}
footer p + p::before {
    position: absolute;
    content: '';
    left: 1px;
    top:-10px;
    width: 20px;
    height: 1px;
    background: black;}
.countries > * {margin-top: var(--grid-gap-large)}    
:is(.france, .usa) a, .langue {text-decoration-line: underline}
.france a {color: var(--beige-texte)}
.usa a, .langue {color: var(--vert)}
.social {
    margin-top: var(--grid-gap-large);
    margin-left: -.625rem}
.social a {
    display:inline-block;
    padding:.625rem;}
.legal {
    margin-top: var(--grid-gap);
    font-size: var(--font-size-16);
    line-height: 1em}

.socialNav .dropdown {
    display: inline-block;
    margin-left: 1rem}
.dropbtn {
    display: flex;
    align-items: center;
    cursor: pointer;
    border:1px solid rgb(0,0,0,.2);
    border-radius: 3px;
    font-weight: 700;
    font-size: .875rem;
    color: black;
    line-height: var(--line-height);
    text-transform: uppercase;
    background: none;
    margin-top: .5rem;
    padding: .250rem .5rem}
.dropbtn svg {margin-right: .5rem}          
.dropdown-content {
    display: none;
    position: absolute;
    min-width: 118px;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1}   
.dropdown-content a {
    font-size:.975rem;
    color: black;
    padding: .375rem .5rem;
    display: block}   
.dropdown-content a:hover {background-color: #ddd}
.sidebar .dropdown-content a:hover {color: black}
.show {display: block} 

.block-club {display:grid}
.block-club :is(h2,.h2,img,span) {
    grid-row: 1;
    grid-column: 1}
.block-club :is(h2,.h2) {
    padding: var(--grid-gap-large);
    text-align: center;
    font-size: var(--s5);
    line-height: var(--line-height-small);
    letter-spacing: .2em;
    text-transform: uppercase}
.block-club strong {
    font-size: var(--s2);
    display:block;}           
.block-club :is(h2,.h2,span) {
    z-index: 1;
    color:white}
.block-club :is(h2,.h2) {place-self: center}
.block-club span {
    place-self: end;
    justify-self: center;
    margin-bottom: var(--grid-gap-large)}

.block-actus {
    container-type: inline-size;
    container-name: block-actus;
    padding: var(--grid-gap-large);
    background-color: var(--gris)}
.block-actus :is(header, article) {display:flex}
.block-actus article {margin-top:var(--grid-gap-medium)}
.block-actus header {
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--grid-gap-medium);
    border-bottom: 1px solid rgb(0 0 0 / .2)}
.block-actus .logo {width: 150px}    
.block-actus .content {
    flex:1 1 0;
    display: flex;
    flex-direction: column;
    padding-left: var(--grid-gap)}                       
.block-actus :is(h2, .h2) {
    font-size: var(--font-size-30);
    font-weight: 700;
    text-transform: uppercase}
.block-actus :is(h2, .h2) a {color: var(--vert)}
.block-actus :is(h3, .h3) {font-size: var(--font-size-20)}
.block-actus :is(h3, .h3) a {line-height:1.3em}      
.block-actus p {
    margin-top: .250rem;
    font-size: var(--font-size-14);
    line-height: var(--line-height-medium);
    color: var(--vert-texte)}
.block-actus .btn--secondary {color: var(--vert-fonce)}    
.block-actus hr {margin-top: auto}

@container block-actus (max-width: 600px) {
    .block-actus .content {
        width: 100%;
        flex: inherit}   
    .block-actus p {display: none}    
}     

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

.btn--primary {
display: inline-block;   
vertical-align: middle;
padding: .750rem var(--grid-gap-medium);	
font-size: var(--font-size-18);
text-transform: uppercase;
text-align: center;
font-weight: 400;	
line-height: var(--line-height-small);	
border: 2px solid currentColor;
border-radius: 30px}

.btn--secondary {
    font-size: var(--font-size-18);
    font-weight: 700;	
    color: black}
.btn--secondary.underline {text-decoration: underline}
.btn--secondary svg {
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;}    

/* RUBRIQUE ARTICLE BLOG
/* -------------------------- */
::selection {
  background: rgb(18 21 108 / .5);	
  color:white}

.page_rubrique .rubrique {padding-bottom: var(--grid-gap-xlarge)}
.page_rubrique .rubrique section {--count-column: 2}
.page_rubrique .rubrique section.fullMobile {--count-column: 1}
.page_rubrique .rubrique .large-column {
    grid-column: span 2;
    align-content: center;
    overflow: hidden}
.large-column > * {grid-column:1}
.large-column :is(.content,.preview) {z-index:1}
.large-column .preview {
    grid-row:1;
    margin-top: var(--grid-gap)}
.large-column .content {
    grid-row:2;
    padding: var(--grid-gap)}
.large-column .background {
    grid-row: 1 /span 2;
    height: 100%}
.large-column h2 {margin-bottom: var(--grid-gap-small)}
.large-column .btn--primary {
    margin-top: var(--grid-gap);
    background-color:var(--beige);
    border-color: var(--beige)}

.page_rubrique .rubrique {background-color: var(--gris-fonce)}  
.rub-logo,.mod-logo,.mod-logo-bis,.art-logo {
    grid-column: full;
    margin-top: 0}
.art-logo {margin-bottom: var(--grid-gap-xlarge)}

.page_rubrique :is(h1,.rubrique p,article h2) {color: white}
.page_rubrique .illustration {grid-column: content;align-self: end}
.page_rubrique p.art-chapo {margin-bottom:0}
.page_rubrique article a {place-items: center}  
.page_rubrique article a :is(h2,img) {
    grid-column: 1;
    grid-row: 1}
.page_rubrique article h2 {
    z-index: 1;
    padding-left: var(--grid-gap-small);
    padding-right: var(--grid-gap-small);
    font-size: var(--font-size-22);
    text-align: center;
    text-transform: capitalize}
.page_rubrique article h2 strong {
    display: block;
    margin-top: .375rem;
    font-size: var(--font-size-12);
    line-height: var(--line-height-small);
    text-transform: uppercase;
    letter-spacing: 1px}
.page_rubrique .fullMobile article h2 {font-size: var(--s4)}
.page_rubrique .fullMobile article h2 strong {font-size: var(--font-size-14)}        
.page_rubrique .large-column h2 {
    padding: 0;
    text-align: left}

.page_rubrique--modele main {background-color: black}    
.rub-logo--modele {display: none}
.page_rubrique--modele .rubrique h1 {
    font-size: var(--s4);
    text-transform: capitalize}
.signature h1 {color:var(--vert-clair)}
.series h1 {color:var(--bleu-clair)}
.unholy h1 {color:var(--beige-clair)}
.page_rubrique--modele .rubrique section {
    --count-column: 2;
    grid-column: full;
    grid-gap: inherit}
.page_rubrique--modele article {grid-column: span 1}
.page_rubrique--modele .highlight {grid-column: span 2}
.page_rubrique--modele article a {
    position:relative;
    color: white}
.highlight a :is(h2, span) {position: absolute; z-index: 5}
.highlight a h2 {
    bottom: calc(2 * var(--grid-gap-xlarge));
    left: var(--grid-gap);
    font-size: var(--font-size-16)}
.highlight a span {
    bottom: var(--grid-gap);
    left: var(--grid-gap-medium);
    font-size:var(--s1);
    line-height: var(--line-height-small)}
article.default {
    position: relative;
    background-color:var(--gris-fonce)}
article.default::before {
    position: absolute;
    z-index: 2;
    content: "";
    height: 100%;
    border-left: 1px solid rgb(255 255 255 / .15)}       
.default .content {padding: var(--grid-gap)}
article.default picture {position: relative;z-index: 5}    
.default .content span {
    display: inline-block;
    margin-top: .250rem;
    line-height: var(--line-height-small)}    
article.default:nth-of-type(2n + 1)::before {border-left: none}
.default h2 {
    font-size: var(--font-size-14);
    text-transform: uppercase}
.modele-chapo {
    grid-column: content;
    margin-top: var(--grid-gap-xlarge);
    margin-bottom: var(--grid-gap-xlarge);
    line-height: var(--line-height);
    color: white}
.modele-chapo p + p {margin-top: var(--grid-gap-medium)}                   
.page_rubrique--modele .illustration {
    grid-column: content;
    margin-bottom: var(--grid-gap-xlarge)}

.modele .h1 {
    grid-column: content;
    margin: var(--grid-gap-xlarge) 0}
.modele h1 strong {font-weight: 400}
.modele h1 em {
    display: block;
    font-size: var(--font-size-22);
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase}
.modele .h1 a {
    margin-bottom: var(--grid-gap);
    font-size: var(--font-size-14);
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--beige-texte)}
.modele .h1 a.Signature {color: var(--vert-clair)}
.mod-chapo {
    grid-column: content;
    padding-bottom: var(--grid-gap-xlarge)}
.mod-chapo p + p {margin-top: .75em}    
.mod-logo-bis,.mod-illustration {grid-row: 4}
.mod-illustration {
    grid-column: content;
    position: relative}
.mod-illustration img {
    display: none;
    position:absolute;
    z-index: 5}            
.mod-detail {
    grid-column: full;
    padding-top: var(--grid-gap-xlarge);
    padding-bottom: var(--grid-gap-xlarge);
    background-color: black}
.mod-detail .album {
    --count-column:2;
    grid-gap: var(--grid-gap-medium)}  
.mod-detail .thumbnail {grid-column: span 2}               
.mod-chapo h2,
.mod-detail h3,
.mod-detail-end h3 {
    margin-bottom: var(--grid-gap);
    font-size: var(--s2);
    font-weight: 700;
    line-height: 1.35em}
.mod-detail :is(h3,p) {color: white}
:is(.mod-detail, .mod-detail-end) :is(h3,p),
.mod-detail-end figure, .block :is(p,figure) {margin-bottom: var(--grid-gap)} 
.mod-detail :is(.content,.album) {
    grid-column: content;
    z-index: 5}
.mod-detail blockquote {
    font-weight: 400;
    color: #999;
    border-color: var(--beige)}
.mod-spec {
    grid-column: content;
    align-items: end;
    padding-top:var(--grid-gap-xlarge)}    
.mod-spec h2,
.mod-more h2 {
    margin-bottom: var(--grid-gap);
    font-size: var(--s2);}
.mod-spec ul {
    grid-row: 2;
    display: flex;
    flex-wrap: wrap;
    gap: var(--grid-gap-small);
    margin-top: var(--grid-gap-small);
    margin-bottom: auto;
    list-style: none}        
.mod-spec ul li {
    padding: .250rem .375rem;
    border: 1px solid black;
    border-radius: 5px;
    font-size: var(--font-size-14)}             
.modele .art-album {
    grid-column: full;
    margin: 0}
.modele :is(.col1,.col2) {
    grid-column: content;
    padding-top: var(--grid-gap-xlarge);
    padding-bottom: var(--grid-gap-xlarge)}
.modele :is(.col1,.col2) p:last-child,
.block p:last-child {margin-bottom:0}
.modele .carousel {grid-column: full}  

.mod-more {
    --count-column:12;
    grid-column: content;
    padding-top:calc(2.5 * var(--grid-gap-xlarge))}
.mod-more > :is(h2,p, picture),
.toggleBtn, .block,
.block > .content {grid-column: span 12}
.mod-more h2 + p,
.mod-more picture {margin-bottom:var(--grid-gap-large)}        
.toggleBtn {
    position: relative;
    display: flex;
    align-items:center;
    padding: var(--grid-gap) 2.5rem;
    padding-left: 0}
.toggleBtn :is(h3) {
    font-size: var(--font-size-20);
    font-weight: 700;
    text-transform: uppercase;
    line-height: var(--line-height-small)}
.article .toggleBtn :is(h2,h3,h4) {
    margin-bottom: 0;
    font-size: var(--font-size-20);
    font-weight: 700;
    line-height: var(--line-height-small)}  
.number {
    margin-right: var(--grid-gap-small);
    font-size:var(--font-size-12);
    font-weight: 700;
    color: grey}        
.toggleBtn button {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 0;
    border:none;
    background: none;
    cursor: pointer}
button svg {
    margin-left: auto;
    margin-right: 5px;
    transition: all .275s linear}
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(--grid-gap-large)}

.expert {background-color: #3a464f}
.expert > * {
    z-index: 5;
    grid-column: content;
    color: white}
.expert .background {display: none}
.expert p strong {
    font-size: var(--s2);
    font-weight: 700;
    line-height: var(--line-height-small)}
.expert p:first-of-type {
    padding-top: var(--grid-gap-xlarge);
    margin-bottom:var(--grid-gap-small)}
.expert .btn--primary {
    justify-self: start;
    align-self: start;
    margin-top: var(--grid-gap-medium);
    margin-bottom: var(--grid-gap-xlarge)}
.block-expert {
    grid-row-gap: var(--grid-gap-large);
    padding-bottom: var(--grid-gap-xlarge);}    
.block-expert a {
    position: relative;
    color:white}                  
.block-expert .content {
    position: absolute;
    left: 0;
    right: 0;
    padding: var(--grid-gap);
    top: 50%;
    transform: translateY(-50%);
    text-align: center}
.expert span {
    display: block;
    line-height: var(--line-height-small)}
.expert .surtitre {
    font-size:var(--font-size-18);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px}
.expert .titre {font-size:var(--s3)}       

.article :is(h2,h3,h4,h5,h6) {font-weight: 700}
h1,.h1 {text-wrap: balance}
p,li,blockquote,pre {
    max-inline-size: 60ch;
    text-wrap: pretty;
    line-height: var(--line-height)}

h1 {font-size: var(--s4); line-height: 1.2em} 
h2 {font-size: var(--s3); line-height: 1.25em}   
h3 {font-size: var(--s2); line-height: 1.35em} 
h4 {font-size: var(--s1); line-height: 1.35em} 
h5 {font-size: var(--s0)} 

strong {font-weight:700}
i {font-style: normal;color:var(--beige)}

.progress {height: 1px;background: black;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)}}

:is(.page_rubrique--modele, .page_blog) .rubrique, .article {padding-top: var(--navbar-normal)}
.rubrique section {
    grid-column: content;
    grid-gap: var(--grid-gap-xlarge);
    overflow: hidden}

.page_blog article .content {margin-top: var(--grid-gap-medium)}
.page_blog .block-actus .content {margin-top: 0}    
.page_blog article h2 {font-size:var(--font-size-24)}
.page_blog article h2 a {line-height: var(--line-height-medium)}
.page_blog article :is(h2, p) {margin-bottom: var(--grid-gap)}    
.page_blog article p {
    max-width: 50ch;
    font-size: var(--font-size-16);
    line-height: var(--line-height-medium)}    

hr {
    width: 100%;
    border:none;
    border-top:1px solid rgb(0,0,0,.2)}
.rubrique hr {
    grid-column: content;
    margin-bottom: var(--grid-gap-xlarge)}
.page_rubrique hr {border-color:rgb(255,255,255,.15)}

.article :is(h2,h3,h4,h5,h6,p,ul,blockquote,pre),
.article :is(.toggleBtn,.block,.download,.btn-group) {grid-column: content}     
.article .art-album {
    grid-column: full;
    margin: var(--grid-gap-xlarge) auto} 
.img-album_1, .img-album_2 {
    position:relative;
    display: inline-block;
    overflow: hidden}    
:is(.img-album_1, .img-album_2)::before {
    position: absolute;
    content: '';
    z-index: 5;
    bottom: 0;
    left: 0;
    height: 35px;
    width: 100% ;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover}    
.img-album_2::before {
    top: 0;
    bottom: inherit}

:is(.rubrique,.article) h1 {
    grid-column: content;
    margin: var(--grid-gap-xlarge) 0}
.article :is(p, ul, blockquote,.download) + :is(h2, h3, h4, h5) {margin-top: 1.25em}
.article :is(p, ul, h2, h3, h4, h5) {margin-bottom:.5em}
.heading, p.art-chapo, p.rub-chapo {
    grid-column: content;
    margin-bottom: var(--grid-gap-xlarge);
    line-height: var(--line-height)}
.rubrique .heading {margin-top: var(--navbar-normal)}
.heading p.rub-chapo {margin-bottom: 0}         
.img-text, .art-youtube  {grid-column: content; padding:var(--grid-gap-xlarge) 0}
.art-youtube + .art-youtube {padding-top: 0}
.prev-youtube + .art-youtube {padding-top: var(--grid-gap-medium)}

.img-text picture + picture  {margin-top:var(--grid-gap-large)}
.img-text + .art-album  {margin-top:0}
.art-album + .img-text  {padding-top:0}

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

blockquote {
    padding-left: var(--grid-gap-medium);
    margin: var(--grid-gap-medium);
    margin-left: 0;	
    border-left: 5px solid var(--beige-clair);
    font-weight: 700;
    color: black}

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

.article :is(p, ul, blockquote) a {
    color: var(--vert-fonce);
    text-decoration-line: underline;
    text-decoration-color: var(--vert-clair)}
a { text-underline-offset: 0.1em;
    text-decoration-thickness: 1px}      
a:is(:hover, :focus) {outline: none}
.download a {
    display: block;
    padding-top: .875rem;
    padding-bottom: .875rem;
    margin-bottom: .750rem;
    border-color: var(--vert-clair);
    font-size: var(--text-base-size);
    text-transform: none;
    line-height: 1.125rem;}

.next-prev {
    grid-gap: var(--grid-gap-large);
    grid-column: content;
    margin:var(--grid-gap-xlarge) 0}   
.art-logo + .next-prev {margin-top: 0}
.prev,.next {background-color: #eee;}
.next-prev a {
    display: flex;
    flex-wrap: wrap;
    background-color: var(--vert);
    line-height: 1.25em;
    color: white;}
.next-prev span {
    display: block;
    font-size: var(--font-size-12);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color:var(--vert-clair)}
:is(.prev,.next) img {width:140px}       
:is(.prev,.next) div {
    width:calc(100% - 140px);
    align-self: flex-end;
    padding: var(--grid-gap)}

.page_form .article,
.page_simple .article {padding-bottom:calc(1.75 * var(--grid-gap-large))}
.page_simple h1 {text-align: center}
.art-chapo small {
    display: block;
    margin-top: .75rem;
    font-size: var(--font-size-16);
    color:#555}
form {
    grid-column: content;
    display: flex;
    flex-wrap: wrap;
    row-gap: var(--grid-gap-medium);
    margin-bottom: 0} 
form > * {
    width: 100%;
    line-height: 0}
.article form h2 {
    margin-bottom: .5rem;
    font-size: var(--s2);
    font-weight: 400}
input[type=email],
input[type=text],
select,textarea {
    width: 100%;
    padding: .5rem;
    background-color: #eee;
    height: 60px;
    border: none;
    border-radius: 5px;
    font-size: var(--font-size-22);
    line-height: var(--line-height);
    color:black}
textarea {min-height: 300px}
button[type="submit"] {
    cursor: pointer;
    width: 100%;
    height: 80px;
    line-height: 80px;
    border: none;
    border-radius: 5px;
    background: var(--vert-fonce);
    font-size: var(--s2);
    font-weight: 700;
    text-transform: uppercase;
    color: white}
.form-logo {display: none}
.success span {display: block}
.article .success a {
    text-decoration: none;
    font-weight: 700;
    font-size: var(--font-size-18);
    text-transform:uppercase}