@layer reset {
    
    * {
        margin: 0;
        padding: 0;
        border: none;
    }

    dialog {
        margin: revert;
    }
    
    h1, h2, h3, h4, h5, h6 {
        /*line-height: calc(var(--espace) * 2);*/
        line-height: 1.2;
        overflow-wrap: break-word;
    }
    
    body { scroll-behavior: smooth; }
    
    p, ul {line-height: 1.5}

    ul, ol {list-style: none}
    
    input, button, textarea, select {
        font: inherit;
        letter-spacing: inherit;
        word-spacing: inherit;
        color: currentColor;
        background: inherit;
    }
    
    img {vertical-align : bottom}
    
}

:root {
    
    --html-font-size: 16;
    --font-size-base: 18;
    
    --blanc : #fff;
    --noir : #000;
    --gris-clair: #A0A0A0;
    --gris-fonce: #3e3e3d;
    --rouge: #C22b28;
    --vert: #1e5d1d;
    --taupe: #a49381;
    --filet-noir : #000;
    --espace: 1rem;
    
                                    --default-color-link: var(--noir);
                                    
                                    --btn-default-bg: #f6f6f6;
                                    --btn-default-color: black;
                                    
                                    --btn-default-bg-hover: #d6d6d6;
                                    --btn-default-color-hover: black;
                                    
    --btn-primary-bg: var(--rouge);
    --btn-primary-color: var(--blanc);
                                    
    --btn-primary-bg-hover: var(--rouge);
    --btn-primary-color-hover: var(--blanc);
    
}

h1 {margin-bottom: calc(var(--espace) * 2)}
h2 {margin-bottom: calc(var(--espace) * 1.5)}
h3 {margin-bottom: var(--espace)}

p, ul, form {
    margin-bottom: var(--espace)
}

a:link, a:visited {text-decoration: none}

a.underline,
a:focus,a:hover {text-decoration: underline}

a.defaut:link,
a.defaut:visited,
a:link:not([class]),
a:visited:not([class]) {
    color: var(--default-color-link)
}

a.inherit:link, a.inherit:visited {color: inherit}

a.defaut + a.defaut::before {
    content: ' • ';
    color: var(--noir)
}

/*
:not(.btn):link,
:not(.btn):visited {
    color: var(--noir);
    text-decoration: underline;
}
*/

/* website (largeur page) */
.ws, .ws-min {
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--espace);
    padding-right: var(--espace);
}
    .ws {max-width: 1280px}
    .ws-min {max-width: 900px}

/* boites */
.flex {
    display: flex;
    flex-wrap: wrap;
    --gap: 0px;
}

    /* direction */
    .flex.reverse {flex-direction: row-reverse}     
    .flex.column {flex-direction: column}
    .flex.column.reverse {flex-direction: column-reverse}     

    /* nowrap */
    .flex.no-wrap {flex-wrap: nowrap}
    
    /* axe principal */
    .flex.between {justify-content: space-between}
    .flex.center {justify-content: center}
    .flex.end {justify-content: end}

    /* axe secondaire */
    .flex._center {align-items: center}
    
    /* separator */
    .flex.separator > *, .separator {
        position: relative;
        line-height: 1.2em; 
        --border-color: currentcolor;
        --border-width: 1px;
    }
    
    .flex.separator--double > *,
    .separator.separator--double {--border-width: 2px}
    
    .flex.separator--rouge > *,
    .separator.separator--rouge {--border-color: var(--rouge)}
    
    .flex.separator > *:not(:last-child), :not(.flex).separator {padding-right: var(--gap)}
    .flex.separator > *:not(:last-child):after, :not(.flex).separator::after {
        position: absolute;
        top: 0;
        bottom: auto;
        right: 0;
        width: 0;
        height: 100%;
        content: '';
        border-right: var(--border-width) solid var(--border-color);
    }
    
    /* tailles */
    .grow {flex-grow: 1}
    
/*
 * colonnes
 * 
 * .colx2 = 50% 50%
 * .colx3 = 33% 33% 33%
 * .colx4 = 25% 25% 25% 25%
 * .colx5 = 20% 20% 20% 20% 20%
 * .colx6 = 16% 16% 16% 16% 16% 16%
 * 
 * .colx1-2 = 33% 66%
 * .colx2-1 = 66% 33%
 * 
 */
.colx2,
.colx3,
.colx4,
.colx5,
.colx6,
.colx1-2,
.colx2-1,
.colx2-1-1 {
    display: flex;
    flex-wrap: wrap;
    --gap: 0px;
    container-type: inline-size;
    container-name: col;
}

.ws-glue {flex-wrap: nowrap}

[class*="columns"] {
    container-type: inline-size;
    container-name: columns;
    --gap: 0px;
}

[class*="columns"] > div {
    padding-block-end: var(--espace);
    column-count: 1;
    column-gap: var(--gap);
}

[class*="columns"] > div > :last-child {margin-bottom: 0}
    
/* goutière (après flex ou col !) */
.gap {
    gap: var(--espace);
    --gap: var(--espace);
}
.gap2 {
    gap: calc(var(--espace) * 2);
    --gap: calc(var(--espace) * 2);
}
.gap4 {
    gap: calc(var(--espace) * 4);
    --gap: calc(var(--espace) * 4);
}
.gap6 {
    gap: calc(var(--espace) * 6);
    --gap: calc(var(--espace) * 6);
}

    @container col (width < 600px) {
        [class*="colx"] > * {flex: 1 0 100%}
    }
    
    @container col (width >= 600px) {
        
        [class*="colx"] > * {flex: 0 1 calc((100% - var(--gap)) / 2)}
        
        /* bordure */
        .f-border > *:not(:first-child),
        .f2-border > *:nth-child(even) {
            position: relative;
            box-sizing: border-box;
            padding-left: var(--gap);
        }
        
        .f-border > *:not(:first-child)::before {
            height: 100%;
            content: '';
            border-left: 1px solid currentcolor;
            display: block;
            width: 0;
            position: absolute;
            left: 0;
        }
        
        .f2-border > *:nth-child(even)::before {
            height: 100%;
            content: '';
            border-left: 1px solid currentcolor;
            display: block;
            width: 0;
            position: absolute;
            left: 0;
        }
    
    }
    
    @container col (width >= 700px) {

        .colx3 > *, 
        .colx4 > *{
            flex: 0 1 calc((100% - (var(--gap) * 2)) / 3)
        }

        .colx5 > *,
        .colx6 > * {
            flex: 0 1 calc((100% - (var(--gap) * 3)) / 2)
        }
        .colx1-2 > :first-child,
        .colx2-1 > :last-child {
            flex: 0 1 calc(33% - var(--gap) / 2)
        }

        .colx1-2 > :last-child, 
        .colx2-1 > :first-child {
            flex: 0 1 calc(66% - var(--gap) / 2)
        }

        .colx2-1-1 > :first-child {
            flex: 0 1 calc(50% - (var(--gap) * 2))
        }

        .colx2-1-1 > :not(:first-child) {
            flex: 0 1 calc(25% - (var(--gap) * 2))
        }
          .article__img_content .article__img_vignette {
            box-shadow: none!important;
          }

    }

    @container col (width >= 900px) {
         .colx5 > *,
        .colx6 > * {
            flex: 0 1 calc((100% - (var(--gap) * 3)) / 3)
        }
    }

    @container col (width >= 1150px) {

        .colx3 > * {flex: 0 1 calc((100% - (var(--gap) * 2)) / 3)}
        .colx4 > * {flex: 0 1 calc((100% - (var(--gap) * 3)) / 4)}
        .colx5 > * {flex: 0 1 calc((100% - (var(--gap) * 4)) / 5)}
        .colx6 > * {flex: 0 1 calc((100% - (var(--gap) * 5)) / 6)}

    }
    

    @container col (width > 1280px) {
        
        .colx2.ws-glue > :first-child > * {padding-left: calc(calc(100vw - 1280px) / 2); padding-right: calc(var(--espace) * 2);}
        .colx2.ws-glue > :last-child > * {padding-right: calc(calc(100vw - 1280px) / 2); padding-left: calc(var(--espace) * 2);}
        
    }
    
    
    @container columns (width >= 700px) {
        
        .columnsx2 > div,
        .columnsx3 > div {column-count: 2}
        
    }
    
    @container columns (width >= 900px) {
        
        .columnsx3 > div {column-count: 3}
        
    }

/* position */
.absolute {position: absolute}
    .absolute.top {top: 5%}
    .absolute.right {right: 5%}
    .absolute.bottom {bottom: 5%}
    .absolute.left {left: 5%}

    .foreground {z-index: 100000}

.relative {position: relative}
.block {display: block;}

/* overflow */
.over-x-hide {overflow-x: hidden}
.over-x-clip {overflow-x: clip}

/* display */
.dhide {display: none!important}
.dblock {display: block!important}
.dblock-i {display: inline-block!important}

/* marging */
.no-marg {margin: 0}

.mb0 {margin-bottom: 0}
.mb {margin-bottom: var(--espace)}
.mb2 {margin-bottom: calc(var(--espace) * 2)}

.mh-auto {
    margin-left: auto;
    margin-right: auto;
}

/* padding */
.pad05, .padT05, .padV05 {padding-top: calc(var(--espace) / 2)}
.pad05, .padB05, .padV05 {padding-bottom: calc(var(--espace) / 2)}
.pad05, .padL05, .padH05 {padding-left: calc(var(--espace) / 2)}
.pad05, .padR05, .padH05 {padding-right: calc(var(--espace) / 2)}

.pad, .padT, .padV {padding-top: calc(var(--espace) * 1)}
.pad, .padB, .padV {padding-bottom: calc(var(--espace) * 1)}
.pad, .padL, .padH {padding-left: calc(var(--espace) * 1)}
.pad, .padR, .padH {padding-right: calc(var(--espace) * 1)}

.pad2, .padT2, .padV2 {padding-top: calc(var(--espace) * 2)}
.pad2, .padB2, .padV2 {padding-bottom: calc(var(--espace) * 2)}
.pad2, .padL2, .padH2 {padding-left: calc(var(--espace) * 2)}
.pad2, .padR2, .padH2 {padding-right: calc(var(--espace) * 2)}

.pad4, .padT4, .padV4 {padding-top: calc(var(--espace) * 4)}
.pad4, .padB4, .padV4 {padding-bottom: calc(var(--espace) * 4)}
.pad4, .padL4, .padH4 {padding-left: calc(var(--espace) * 4)}
.pad4, .padR4, .padH4 {padding-right: calc(var(--espace) * 4)}

.pad6, .padT6, .padV6 {padding-top: calc(var(--espace) * 6)}
.pad6, .padB6, .padV6 {padding-bottom: calc(var(--espace) * 6)}
.pad6, .padL6, .padH6 {padding-left: calc(var(--espace) * 6)}
.pad6, .padR6, .padH6 {padding-right: calc(var(--espace) * 6)}

/* largeur */
.w50 {width: 50%}
.w100 {
    width: 100%;
    height: auto;
}
.m-w100 {max-width: 100%; height: auto;}
img.m-w100 {display: block;line-height: 1}

/* centrage */
.txtcenter {text-align: center}
.txtright {text-align: right}
.tocenter {
    display: grid;
    align-content: center;
    justify-content: center;
}

/* boutons */
.btn {
    padding: calc(var(--espace) / 4) var(--espace);
    display: inline-block;
    line-height: calc(var(--espace) * 2);
    /*border-radius: calc(var(--espace) / 2);*/
    background-color: var(--btn-default-bg);
    text-transform: uppercase;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: normal;
    text-align: center;
    align-content: center;
    color: var(--btn-default-color);
    border: none;
    cursor: pointer;
}

    .btn.btn__small {
        padding: calc(var(--espace) / 4) calc(var(--espace) / 2);
        line-height: calc(var(--espace) * 1.5);
        font-size: 1rem;
        
    }

    .btn:focus,
    .btn:hover {
        text-decoration-line: none;
        background-color: var(--btn-default-bg-hover);
        color: var(--btn-default-color-hover);
    }
    
    .btn.btn__primary {
        font-weight: bold;
        background-color: var(--btn-primary-bg);
        color: var(--btn-primary-color);
    }

    .btn.btn__primary:focus,
    .btn.btn__primary:hover {
        background-color: var(--btn-primary-bg-hover);
        color: var(--btn-primary-color-hover);
    }

    .btn.btn__inline {
        line-height: inherit;
        font-size: inherit;
    }
    
    .btn.btn__center {
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
    
    .btn.btn__close {
        position: absolute;
        right: 0;
        top: 0;
    }

/* taille & graisse */
.small {font-size: 85%}
.big {font-size: 110%}
.bigx2 {font-size: 120%}
.bigx6 {font-size: 160%}

.light {font-weight: 300}
.bolder {font-weight: 600}
.bold {font-weight: 700}

.word-break {word-wrap: break-word}

/* disabled */
*[disabled] {
    opacity: 0.5;
    pointer-events: none;
}

/*events */
.no-event {pointer-events: none}

/* casse */
.upper {text-transform:uppercase}
.lower {text-transform:lowercase}

/* print */
@media print {
   .no-print {display: none!important}
}

/* breadcrumb */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    font-size: 100%;
    color: var(--gris-clair);
}

    .breadcrumb > * {white-space: nowrap}

    .breadcrumb > *:not(:last-child):after {
        display: inline-block;
        padding: 0 0.5rem;
        content: "\3E";
    }
    
        .breadcrumb a:link,
        .breadcrumb a:visited {
            text-decoration: none;
            color: var(--gris-clair);
        }

/* pagination */
.pagination {padding: calc(var(--espace) * 2) 0}

    .pagination > span {
        display: block;
        padding-bottom: var(--espace);
        text-align: center;
    }
    
    .pagination > ul {
        display:flex;
        gap: var(--espace);
        justify-content: center;
    }
    
    .pagination .cp {font-weight: bold}

/* +/- */
.plus {display: none}
.plus[type="checkbox"] {display: inline-block;}
.plus[type="checkbox"]:checked + .plus {display: initial}
.moins[type="checkbox"]:checked + .moins {display: none}

.more + .more {display:none}
.more:has(:checked) + .more {display:inherit}

/* dialog */
dialog {
    padding: var(--espace);
    width: auto;
    max-width: 1120px;
    position: relative;
}

dialog::backdrop {
    background-color: rgba(0,0,0,0.5);
}

    .dialog--close {
        position: absolute;
        top: 1rem;
        right: 1rem;
    }
    
/* articles */
.articles img {
    width: 100%;
    height: 210px;
    object-fit: contain;
}

.articles h2 {
    margin: 0;
    padding: var(--espace) 0;
    text-align: center;
    text-transform: uppercase;
    font-size: 1.2rem;
    font-weight: normal;
}

.articles .article__stock {
    padding-bottom: var(--espace);
    text-align: center;
    text-transform: uppercase;
    font-size: 0.8rem;
    font-weight: 300;
}

    .articles .article__stock-in {color: var(--vert)}
    .articles .article__stock-out {color: var(--rouge)}


    .articles .article__cdt, .articles .art__extraArtistes{display: block; padding-bottom: 5px;}

.articles .article__tarif {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
}

.articles .article__add {/*btn btn--primary*/}

.articles .art__extraArtistes  {
    font-size: 120%;
}

.articles picture {
    display: block;
    max-height: 210px;
}

.article__img_content  {
    display: block;
    position: relative;
    padding-right: 85px;
}


.articles img.article__img_nouveaute, .art__img .article__img_nouveaute {
    width: 110px;
    position: absolute;
    top: 10px;
    left: 10px;
    display: block;
    height: 32px;
    z-index: 80;
}
    
.article__img_content .article__img_vignette {
    display: block;
  
     z-index : 60;
    position: relative;

}
    .article__img_content .article__img_more {
        position: absolute;
        right: 20px;
        top : 50%; 
        transform: translateY(-50%);
        z-index : 50;
        pointer-events: none;
        transition: all 0.5s;
    }

    .article__img_content:hover .article__img_more {
        right: 2px;
    }

.tourneinfini {
    animation-duration: 1.5s;
    animation-name: tourneinfini;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    transform-origin: 39px 47px;
}
@keyframes tourneinfini {
  from { transform: rotate(0); }
  to   { transform: rotate(360deg); }
}

/*
    responsive video
    
    16:9 aspect ratio : 9 / 16 * 100% = 56.25%
    4:3 aspect ratio : 3 / 4 * 100% = 75%;
    1:1 aspect ratio : 1 / 1 * 100% = 100%.
    
    .video-container {
        position: relative;
        height: 0;
        padding-bottom: 100%;
        overflow: hidden;
    }
        .video-container.ratio16-9 {padding-bottom: 56.25%}
        .video-container.ratio4-3 {padding-bottom: 75%}
        
    .video-container > iframe,
    .video-container > object,
    .video-container > embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    
*/



    .nav-artistes.flex.separator li {padding:0  calc(var(--espace)* 3)}

/* site */

@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    size-adjust: 100%;
    src:
        local("Montserrat"),
        local("MontSerrat"),
        url("/font/montserrat/montserrat-variable-font.ttf") format("truetype");
}

body {background-color: var(--noir);   font-family: "Montserrat", sans-serif; line-height: 1.4em;}
.rouge {color: var(--rouge)}

header {
    font-size: 1rem;
    background-color: var(--noir);
    position: sticky;
    z-index : 500;
    top: 0;
    color: var(--blanc);
}

    header > * {margin: 0}
    header > h1,
    header > .h1-header {
        font-size: 1rem;
        font-weight: 700;
    }
    header > ul {
        display: flex;
        gap: var(--espace);
    }
    
#header {
    background: var(--noir) url(/fond/gris.jpg) top center/cover no-repeat;
    color: var(--blanc);
    position: sticky;
    z-index : 500;
    top: 40px;
}

#rheader{
    background: var(--noir) url(/fond/gris.jpg) top center/cover no-repeat;
}

footer {
    background-color: var(--gris-fonce);
    color: var(--blanc);
}

    footer .colx5 {
        align-items: center;
    }
    
        footer .colx5 div {
            min-height: 100px;
            display: grid;
            align-content: center;
            justify-content: center;
        }
        
    footer > ul {
        background-color: var(--noir);
        color: var(--blanc);
        font-size: 0.8rem;
    }
    
main {
    background-image: url(/fond/fond.jpg);
    background-position: top center;
    background-repeat: repeat-y;
    background-size: 100% auto;
    background-color: #fff;
    /*min-height: 800px;*/
}

.to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: block;
    font-size: 200%;
    color : grey!important;
}

.symbol {
  width:1.5em;
  height:1.5em
}
.symbol.min {
  width:1em;
  height:1em
}
.svg {
  vertical-align:middle
}
/*
svg:hover {
  fill:var(--orange)
}
*/

/* slider */
.slider-container {content-visibility: hidden}

/* nav */
#nav--active {color: var(--rouge)}
  #nav--main {
    display:none
  }

#rnav ul.rnav--content {
  position:absolute;
  display:flex;
  flex-direction:column;
  right:0;
  transform:translateX(100%);
  overflow:hidden;
  z-index:1000000;
  width: min(100vw,620px);
  height: 100vh;
  top: 41px;
  transition: .5s;
 background: var(--noir) url(/fond/gris.jpg) top center/cover no-repeat;
}
#rnav li {
    padding : 10px 30px;
    border-bottom : 1px solid #505050;
}
.rnav--boutique {background: var(--rouge)}
#rnav a {
  color:#fff;
  text-transform: uppercase;
  transition:.5s;;
}
#form-recherche input,
#nav--main>ul>li>a {
  text-transform: uppercase;
}
#rnav ul.rnav--second {
  position:fixed;
  z-index:2;
  display:flex;
  flex-direction:column;
  right:-100%;
  transform:none
}
#rnav a.rnav--explore::after {
  content:'>';
  position:absolute;
  top:50%;
  right:10px;
  transform:translateY(-50%)
}
#rnav a.rnav--back::before {
  content:'<';
  position:absolute;
  top:50%;
  left:var(--espace);
  transform:translateY(-50%)
}
#rnav a.rnav--opened+ul.rnav--second {
  right:0
}
#rnav--burger {
  display:block;
  padding:10px
}
#rnav--burger label {
  z-index:100;
  cursor:pointer;
  position:relative;
  display:block;
}
#rnav--burger label::after,
#rnav--burger label::before {
  content:''
}
#rnav--burger label span,
#rnav--burger label::after,
#rnav--burger label::before {
  width:20px;
  height:2px;
  background-color:#fff;
  transition:.5s;
  margin-top:5px;
  display:block;
  transform-origin:left
}
#rnav--open:checked~#rnav--burger~ul {
  transform:none
}
#rnav--open:checked+#rnav--burger label:before {
  transform:rotate(45deg)
}
#rnav--open:checked+#rnav--burger label span {
  opacity:0
}
#rnav--open:checked+#rnav--burger label:after {
  transform:rotate(-45deg)
}

#header, #nav--top, .icone-mail-header span {display: none;}
/* titres */
.h1 {
    font-size: 280%;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.2;
        overflow-wrap: break-word;
}

    .h1.etoiles {
        text-align: center;
        background: transparent url(/fond/trait-etoile-noire.png) no-repeat center bottom;
        padding-bottom: 50px;
        margin-bottom: 40px;
    }
    
.fond-rouge {
    margin-bottom: 0;
    background: var(--rouge) url(/fond/rouge.jpg) top center no-repeat;
    color: var(--blanc);
}

    .fond-rouge > span {
        display: inline-block;
        padding: calc(var(--espace) / 3) calc(var(--espace) * 3);
        background-color: var(--blanc);
        color: initial;
    }

/* actualites */
.actu {margin-bottom: 30px;}

    .actu--blocImg {
        display: block;
     /*   height: 325px;*/ 
        margin-bottom: 5px;
        overflow: hidden;
        position: relative;
    }
    
    .actu--img {
   /*     margin : 0 auto;	
        position : absolute; 
        top : 50%; 
        left : 50%; 
        transform : translate(-50%,-50%);*/
    }

    .actu--desc:not(:first-child) {
      margin-top: calc(var(--espace) * 2);
    }

    .actu--desc{
      border-top: 1px solid var(--gris-fonce);
      padding-top: calc(var(--espace) * 2);
    }
    
    .actu--desc a{
     color : var(--rouge)!important;
     text-decoration: underline;
    }
    
    .actu--titre {
        margin : 10px 0;
        font-size: 120%;
        font-weight: 600;
        text-decoration: uppercase;
    }
    
    h1.actu--titre {
       font-size: 230%;
      font-weight: 700;
      text-transform: uppercase;
      line-height: 1.2;
      overflow-wrap: break-word;
      margin-bottom: var(--espace);
    }
    
    .actu--date {font-size : 90%;}

/* artistes */
.artiste {}

    .artiste--carre {
        display: grid;
        height: 100%;
        align-content: center;
        justify-content: center;
        position: relative;
        background-color: var(--noir);
    }
    
    .artiste--carre h2 {
        position : absolute;
		top : 0; 
		width : 100%;
        height : 100%;
		font-size : 110%;
		font-weight : 600;
		text-transform : uppercase;
        background : rgba(0,0,0,0.7);
        color : var(--blanc);
	    transition: background-color 1000ms linear;
	}

		
		.artiste--carre h2:hover, .artiste--carre h2:focus {
            background : rgba(0,0,0,0);
        }

		.artiste--carre h2 span{
			top : 50%; 
			position : absolute;
			display: block;
			width : 100%;
			text-align : center;
			transform : translateY(-50%); 
		}

.albums {
    row-gap: calc(var(--espace) * 4);
}

.album {font-size : 90%;}

    .album--type {color: var(--rouge)}
    .album--titre {
        margin-bottom: 0;
        font-size: 130%;
    }
    
.fiche-technique {
    background-color: var(--taupe);
    color: var(--blanc);
}

    .fiche-technique--label {
        text-transform: uppercase;
        font-weight: 300;
    }
    
    audio {
      width: 100%;
    }
    
.concerts {}

    .concerts li {
        border-bottom: 1px solid;
        padding: calc(var(--espace) / 2) 0;
        font-size: 1.2rem;
    }

    .concerts li:first-child {border-top: 1px solid}
    
        .concerts li .concert--date {
        display: block;
        width: 100%;
        max-width: inherit;
    }
    
    .concerts strong {
       display: block;
    }

    
.revendeurs {}

    .revendeur {
        width: 100%;
        border : 1px solid var(--rouge);
        font-size: 90%;
    }
    
@media (min-width: 768px) {
    
    /* accueil */
      
.article__img_content .article__img_vignette {   box-shadow: 2px 2px 20px rgba(0,0,0,0.4);}
     .concerts li  .concert--date {
        display: inline-block;
        width: 25%;
        max-width: 205px;
    }

    .concerts .concert--nom::after {
        content : " / ";
        font-weight: 300;
    }

    .concerts strong {
       display: inline-block;
    }

  #rheader {
    display:none
  }
.icone-mail-header span {display: block;}
#header, 
#nav--top {display: flex;}
/*  #nav--top {
    display:flex;
    width:calc(50% + 125px);
    margin-left:50%;
    transform:translateX(-125px)
  }
  #nav--top>a {
    position:relative;
    top:-1rem
  }*/

  #nav--main {
    display:block
  }

    a.btn.btn__concerts {
        background : transparent url(/fond/etiquette.png) no-repeat top left;
        width :538px;
        height : 70px;
        font-size : 150%;
        padding: 0;
        align-content: baseline;
        line-height: 50px;
    }
    
    a.btn.btn__concerts:focus,
    a.btn.btn__concerts:hover {
        background-color: transparent;
    }

    /* slider */
    
    .slider-container {
        content-visibility: auto;
        max-width: 2500px;
        margin: 0 auto;
        overflow: hidden;
        position: relative;
        isolation: isolate;
    }

    .slider {
        display: flex;
        transition: 300ms ease;
    }

    .slider .slide {
        flex-shrink: 0;
        width: 100%;
    }

    .slider .slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .slider-container .arrows {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 98%;
        left: 1%;
        display: flex;
        justify-content: space-between;
    }

    .slider-container .arrows button {
        border: none;
        color: white;
        width: 40px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        transition: 300ms ease;
        cursor: pointer;
    }

    .slider-container .arrows img {
        max-width: 100%;
        height: auto;
    }
    
    .slider-container .arrows .prev {transform: rotate(-90deg)}
    .slider-container .arrows .next {transform: rotate(90deg)}

    .slider-container .dots {
        display: flex;
        gap: 0.5rem;
        justify-content: center;
        align-items: center;
        position: absolute;
        bottom: 0.5rem;
        width: 100%;
    }

    .slider-container .dots .dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
        background-color: rgba(255, 255, 255, 0.3);
        transition: 200ms ease;
        cursor: pointer;
    }

    .slider-container .dots .dot.active {
        background-color: white;
        transform: scale(1.3);
    }

    .slider-container .dots .dot:hover {
        background-color: white;
    } 
    
}

#encartPanier {
    border : 2px solid var(--rouge); 
    padding : var(--espace);
}
#encartPanier h4{
    font-size: 150%;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.2em;
    margin-bottom : var(--espace);
}


/*** responsive **/
@media (max-width: 700px) {
    #accueil h1 {
        font-size: 140%;
    }

    .flex.separator {font-size: 80%}
    .nav-artistes.flex.separator li {padding:0  5px}

    .fond-rouge.h1 {font-size : 200%;}
}