.z_top{ position: absolute; left: 0; top: 0; }

.z_bg-white{ background-color: rgba(250,250,200, 0.5); }

.z_cursor{ cursor: pointer; pointer-events: auto; }

.z_fit{ 
	object-fit: fill;/* cover*/
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-webkit-box-sizing: border-box;}


.z_scroll-right { right = 0;
	-webkit-transition: right 0.3s ease-out;
	-moz-transition: right 0.3s ease-out;
	-ms-transition: right 0.3s ease-out;
	transition: right 0.3s ease-out; }

.z_scroll {
	-webkit-transition: all 0.3s;
	/*-moz-transition: all 0.7s ease-out;
	-ms-transition: all 0.7s ease-out;*/
	transition: all 0.3s; }

:root {
    --bg-color: 
    radial-gradient(at 0 50%, #bb8, #886 71%, transparent 71%) no-repeat 0.75em 50%,
    linear-gradient(90deg, #ffe, #886) no-repeat 0 50%, 
    linear-gradient(#666, #ffd, #cca, #888);
}

.bt_onoff,
.box_onoff{ float: left; }
.bt_onoff { box-shadow: -.125vw 0 .25vw #928886, inset -1px 0 1px #fff;
background: var(--bg-color); background-size: 0.825vw 100%; }

/* ---------------------------------------------------*/
/* contour container */
input[type='range'] { cursor: pointer; }

input[type='range'], input[type='range']::-webkit-slider-runnable-track, input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none; }

/* barre centrale focus*/
input[type='range']:focus { outline: none; }
input[type='range']:focus::-webkit-slider-runnable-track { background: #ecce79; }
input[type='range']:focus::-moz-range-track { background: #ecce79; }
input[type='range']:focus::-ms-track { background: #ecce79; }


/* ------------------------------------------------- */
/* bouton poussoir */
@media all and (min-width: 800px) {
	
	.box_onoff{ width: 4vw; margin: .05em;}
	.bt_onoff { width: 2.5vw; }
	.box_onoff,
	.bt_onoff { height: 1vw; border-radius: .4vw; }

	input[type='range']::-webkit-slider-runnable-track { position: relative; height: 0.2vw; background: #2d0303b3; }
	input[type='range']::-moz-range-track { height: 0.2vw; background: #2d0303b3; }
	input[type='range']::-ms-track { height: 0.2vw; background: #2d0303b3; }

	input[type='range']::-webkit-slider-thumb { border: none; width: 2.5vw; height: 1vw; /*1.5 0.75*/
	  box-shadow: -.125vw 0 .25vw #928886, inset -1px 0 1px #fff;
	  background: var(--bg-color); background-size: 0.825vw 100%;}

	input[type='range']::-moz-range-thumb { border: none; width: 2.5vw; height: 1vw;
	  box-shadow: -.125vw 0 .25vw #928886, inset -1px 0 1px #fff;
	  background: var(--bg-color); background-size: 0.825vw 100%;}*/

	input[type='range']::-ms-thumb { border: none; width: 2.5vw; height: 1vw;
	  box-shadow: -.125vw 0 .25vw #928886,  inset -1px 0 1px #fff;
	  background: var(--bg-color); background-size: 0.825vw 100%;} }

@media all and (max-width: 800px) { 
	
	.box_onoff{ width: 12vw; }
	.bt_onoff { width: 7vw; }
	.box_onoff,
	.bt_onoff { height: 4vw; border: none; border-radius: 2vw;}

	input[type='range']::-webkit-slider-runnable-track { position: relative; height: 0.8vw; background: #2d0303b3; }
	input[type='range']::-moz-range-track { height: 0.8vw; background: #2d0303b3; }
	input[type='range']::-ms-track { height: 0.8vw; background: #2d0303b3; }

	input[type='range']::-webkit-slider-thumb { border: none; width: 6vw; height: 4vw; /*1.5 0.75*/
	  box-shadow: -.125vw 0 .25vw #928886, inset -1px 0 1px #fff;
	  background: var(--bg-color); background-size: 0.825vw 100%; }

	input[type='range']::-moz-range-thumb { border: none; width: 6vw; height: 4vw; /*1.5 0.75*/
	  box-shadow: -.125vw 0 .25vw #928886, inset -1px 0 1px #fff;
	  background: var(--bg-color); background-size: 0.825vw 100%;}

	input[type='range']::-ms-thumb { border: none; width: 6vw; height: 4vw; /*1.5 0.75*/
	  box-shadow: -.125vw 0 .25vw #928886, inset -1px 0 1px #fff;
	  background: var(--bg-color); background-size: 0.825vw 100%;} }


/** -------------------------------
* ## commun ##
----------------------------------- */
.z_shadow-box{	
	-webkit-box-shadow: 5vw 0 10vw #201103;
	-moz-box-shadow: 5vw 0 10vw #201103;
	/*-ms-transition: 5vw 0 10vw #201103;*/
	box-shadow: 5vw 4vw 5vw #000c0c99;
}

.z_text-shadow{ text-shadow: black 1px 1px 4px; }
.z_uppercase{ text-transform: uppercase; }

.z_color-white{color:#ffd;}
.z_color-brun {color:rgba(64,0,0,0.85);}
.z_color-red{color:#f00}

.bouton-liste, .z_bouton, .comment-reply-link,
.comment-form input[type="submit"] { border-radius: .5em; background-color: #444;
width: auto; padding: .1vw 1vw!important; }

.z_bouton{ font-size: 100%; text-align: center; margin: .25vw;
line-height: 1.25vw; padding: .1vw 1vw!important;}

.mobile_bt-max,
.med_bt-max, 
.z_bouton,
.z_fade{ 

	-webkit-transition: visibility .7s ease-out, opacity .7s ease-out; 
	-moz-transition: visibility .7s ease-out, opacity .7s ease-out;
    transition: visibility .7s ease-out, opacity .7s ease-out; }

.bouton-liste{ position: absolute; top: .1em; right: 2vw; }

@media all and (min-width: 800px) { 
	.z_texte-justify{text-indent: 1em; } }
@media all and (max-width: 800px) { 
	.z_texte-justify{text-indent: 0.5em; } }

/** -------------------------------
* ## html ##
----------------------------------- */

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }


/* body html v2 */
body,
html{ width:100%; height: 100%; scroll-behavior: smooth;}

body { position: absolute; left: 0;top: 0; margin: 0; padding: 0; background-size: cover; }

p { margin-bottom: 0; font-size: inherit; text-indent: inherit; }
p: empty { display: none; }

span{ display:inline;}

h1,h2,h3,h4,h5,h6 { clear: unset; line-height: 0; }

@media all and (min-width: 800px) {

a { font-size: 1em }

h1 { font-size: 2em }
h2 { font-size: 1.4em }
h3 { font-size: 1.25em }
h4 { font-size: 1em }
h5 { font-size: .8em; }
h6 { font-size: .7em; font-weight: 500;} }

/*	

h1 { font-size: 2vw }
h2 { font-size: 1.5vw }
h3 { font-size: 1.25vw }
h4 { font-size: 1vw }
h5 { font-size: .8vw; }
h6 { font-size: .7vw; font-weight: 500;} }*/

@media all and (max-width: 800px) { 

/*h1 { font-size: 1em }
h2 { font-size: 4.5vw }
h3 { font-size: 3.75vw }
h4 { font-size: 3vw }
h5 { font-size: 2.4vw; }
h6 { font-size: 2.1vw; font-weight: 500;} */
a { font-size: .5em }

h1 { font-size: 1em }
h2 { font-size: .75em }
h3 { font-size: .625em }
h4 { font-size: .5em }
h5 { font-size: .4em; }
h6 { font-size: .35em; font-weight: 500;} }



/** -------------------------------
* ## responsive ## 

bandeau 
-----------------------------------*/
#masthead{ position: fixed;top: 0; width: 100vw; visibility: hidden; z-index: 5;}
.bandeau-fixe{ position: relative; /*line-height: 85%;*/ display: flex; justify-content: center; visibility: visible; }
.bandeau-fond{ height:87.5%; top: 5%; right: 0; margin: 0 auto; }

@media all and (min-width: 800px) { 

	html { font-size: 62.5%; }

	.bandeau-fixe{  top: 1.25rem; }
	.bandeau-fond{ width: 100vw; }

	.bandeau-media{ width: 60vh; min-width: 25vw;} }


@media all and (max-width: 800px) { 

	html { font-size: 40.5%; }

	.bandeau-fixe{ top: 0; }
	.bandeau-media{ width: 100vw; } 

}

@media (orientation: landscape) {
  .bandeau-fond { display: none;}
}

@media (orientation: portrait) {
  .bandeau-fond { display: block; scale: 1; }
}



/** -------------------------------
* ## responsive ## 

slide 
-----------------------------------*/
.media-selector{ position:relative; pointer-events: none; }


/** -------------------------------
* ## responsive ## 

media(s)
-----------------------------------*/

/* zb_lock zl_iste v2 */ 

.zl_iste,
.zb_lock{ display: block ;height: fit-content; }

@media all and ( max-width: 800px ) and ( orientation: portrait ) {
	.zb_lock{ min-width: 27vw; font-size: 200% } /* 85 / 3 */
	.zl_iste{ min-width: 40vw; font-size: 200% }}

@media all and ( max-width: 800px ) and ( orientation: landscape ) { 
	.zb_lock{ min-width: 27vh; font-size: 250% }
	.zl_iste{ min-width: 40vh; font-size: 250% }}

/* zp_ortraitvideo zl_andscapevideo v2 */
/*
.zp_ortraitvideo,
.zl_andscapevideo{  }*/

@media all and ( max-width: 800px ) and ( orientation: portrait ) {
	.zp_ortraitvideo{ width: 100vw; height: 100vh; transform: rotate( 0deg)} /* 85 / 3 */
	.zl_andscapevideo{ width: 100vh; height: 100vw; transform: rotate(90deg) }}

@media all and ( max-width: 800px ) and ( orientation: landscape ) { 
	.zp_ortraitvideo{ width: 100vw; height: 100vh; transform: rotate(90deg) }
	.zl_andscapevideo{ width: 100vh; height: 100vw; transform: rotate(0deg) }}


/*@media all and (min-width: 800px), (orientation: portrait) { }

font-size: 62.5%;

@media all and (max-width: 800px), (orientation: landscape) { }
@media all and (max-width: 800px), (orientation: portrait) { }*/


/** -------------------------------
* ## responsive ## 

media
-----------------------------------*/
.media-mask,
.media-canvas,
.media-fake{ position: absolute; width: 100%; height: auto; margin: 0;}
.media-mask,
.media-fake{ top: 0; }

.media-mask{ height: 100%; width: 100%}
.media-canvas{ left: 0; height: 50%; opacity: 0.6; }

@media all and (min-width: 800px) { 
	.media-canvas{ bottom: 2vh; max-height: 16vh; }
	.media-mask{
		background-image: url("assets/mask.jpg");
		background-position: center; background-size: 2px 2px; 
		background-color: #9c8d79;
		mix-blend-mode: overlay; }  }

@media all and (max-width: 800px) { 
	.media-canvas{ bottom: 2.5vw; max-height: 16vh; }
	.media-mask{ display: none; } }

/** -------------------------------
* ## responsive ## 

bt avance recule 
-----------------------------------*/
.media-bt_right,
.media-bt_left{ position: absolute; top: 40%; width: 15%; min-width: 32px; max-width: 96px; z-index: 1; }
.media-bt_right{ right: 0; }
.media-bt_left { left: 0; }

/** -------------------------------
* ## responsive ## 

info 
-----------------------------------*/

#media_info_title{ text-align: center;}

.media-info{ position: relative; width: 40%; max-width: 8vw; z-index: 1; } /*font-size: 1.5vh; top: 7vh; */

.media-listerouge,
.media-liste{ font-size: .6em; padding-left: .5em; border-left: .2em solid; max-width: max-content;}





/*@media all and (min-width: 800px) { 
	.media-info{ font-size: 1.5vh; top: 3.5vh;  left: -20%; display: flex; } }

@media all and (max-width: 800px) { 
	.media-info{ font-size: 1vh; top: 1.75vh; }
	.media-listerouge{ display: none; } }*/

/** -------------------------------
* ## responsive ## 

barre 
-----------------------------------*/

/*.barre-volume,
.barre-menu { position: absolute; width: 100%; visibility: hidden; z-index: 2;
	-webkit-transition: all 0.3s; transition: all 0.3s;}*/

.barre-volume { position: absolute; width: 100%; visibility: hidden; z-index: 2;
	-webkit-transition: all 0.3s; transition: all 0.3s;}

.barre-menu { position: fixed; top: .7vw; left: 0; right: 0; margin: 0 auto; z-index: 99;}


/*.equalizer-box{ position: absolute; color: #ffd; visibility: visible; }*/

.equalizer-range:focus,
.equalizer-range{ width: 75%; float: left; height: 80%; background-color: #4448; padding: 0 2%; border: 1px solid #4448}
.equalizer-bt{ align-items: center; }


/*@media all and (min-width: 800px) { 

	.equalizer-range{ width: 90%; }}

@media all and (max-width: 800px) {
	.equalizer-range{ width: 75%; }}*/

/** -------------------------------
* ## responsive ## 

boutons
-----------------------------------*/

.liste-jaune{ background-color: rgba( 216, 216,   0, 0.5 );}
.liste-bleu { background-color: rgba(   0,   0, 216, 0.5 );}
.liste-vert { background-color: rgba( 216,   0,   0, 0.5 );}

.liste-jaune:hover{ background-color: rgba( 216, 216,   0, 0.75 );}
.liste-bleu:hover { background-color: rgba(   0,   0, 216, 0.75 );}
.liste-vert:hover { background-color: rgba( 216,   0,   0, 0.75 );}


.bt-rouge{ background-color: rgba(216,32,11,0.5); }
.bt-jaune,
.bt-vert,
.bt-gris{ background-color: rgba(128,128,128,0.5); }

.bt-vert,
.bt-jaune,
.bt-gris{ text-shadow: #000 -1px 1px; }

.bt-rouge:hover{ background-color: rgba(255,64,11,0.75); }
.bt-vert:hover{ background-color: rgba(64,255,11,0.75); }
.bt-jaune:hover{ background-color: rgba(255,220,32,.75); }
.bt-gris:hover{ background-color: rgba(160,160,160,0.75); }

.footer-bt, 
.mobile_bt-max, 
.med_bt-max, 
.media-bt_volume,
.media-bt_menu{ position: relative; text-align: center;  
	border: 1px solid rgba(244,244,235)!important; 
	border-radius: 5em;
	visibility: visible; }

.footer-bt,
.media-bt_menu{ width: 12em; height: 2rem; }


.lignes-menu{height: .25em; background: #fffc; margin: .5em;}

.mobile_menu{ position: relative; text-align: center; width: 6em; height: 8em;float: right; right: 5vw; visibility: visible; overflow: hidden;}

/** -------------------------------
* ## responsive ## 

roller-menu
-----------------------------------*/
.footer-roller_menu,
.med-roller_menu{ position: absolute; background-color: rgba(128,128,128,.5); min-width: 22.5vw; overflow: hidden; }
	
.footer-roller_menu { bottom: 0; left: 0; right: 0; margin: 0 auto; width:35%; }/* display: flex; flex-direction: column;*/ /*}	*/

.med-roller_menu{ top: 2vw; width: 60%; visibility: visible; }

.vignette{ display: flex;}

.vignette-fake{ visibility: hidden; }
.vignette-img{ /*position: absolute; left: 0; top: 0; */object-fit:cover; margin: 0; }

.vignette-titre{ background-color: #841; margin: .25vw; border-radius: 10%; color: #dda;
text-align: center;
font-size: 1em; font-weight: 700; line-height: 1.4em; }
.vignette-info{ border-left: .2em solid #841; color: #200; 
font-size: .8em; font-weight: 500; line-height: 1em; }

.menu-info { overflow: hidden; }
.submed_roller-titre{ display: flex; justify-content: space-around; align-items: center; background-color: #eaefbf; 
	margin: .5vw; font-size: 75%; }
.submed_roller-titre:hover{ background-color: #751a1a; color: #eaefbf;}


@media all and (min-width: 800px) { 
	.barre-menu,
	.barre-volume { line-height: 1.1vw; } 
	.barre-volume { bottom: 2vw; transform: translate(-105%, 25%); } 

	.media-bt_volume{ width: 15em; height: 1.25em; }

	.equalizer-bt,
	.equalizer-box{ background-color: #edb8; }

	.equalizer-bt{ height: 3em; }
	.equalizer-box{ font-size: 75%; bottom: 2em; right: -4%; padding: 0 1%; width: 25em;} }

@media all and (max-width: 800px) { 

/** -------------------------------
* ## responsive ## 

equalizer-menu
-----------------------------------*/
	.barre-menu,
	.barre-volume { line-height: 4vw; } 
	.barre-volume { bottom: 4vw; transform: translate( -60%, 5%); } 


	.media-bt_volume{ width: 12em; }

	.equalizer-bt{ background-color: rgba(0,0,0,.7) }
	.equalizer-bt{ height: 10vw; }
	.equalizer-box{ font-size: 100%; bottom: 100%; padding: 0  5%; width: 90%; max-height: 30vw; right: 0;} }


.med_bt-max{ width: 2em; height: .75em; float: left; margin: 0.05em 0.25em; }

.mobile_bt-max{ width: 2.5em; height: 2.5em; float: left; margin: 0.05em 1em; }

/** -------------------------------
* ## responsive ## 

footer
-----------------------------------*/
.footer-fixemobile,
.footer-fixe{ position: fixed; width: 100%; z-index: 2; background-color: rgba( 64, 64, 64, 0.5 ); }

.footer-fixe{ bottom: 0;  padding: .5vw; }	
.footer-fixemobile{ bottom: .5em; padding: .25em; }


.footer-box{ position: relative; margin: 0 auto; line-height: 1em; }
/*.footer-boxmoble{ position: relative; margin: 0 auto; line-height: 1vw; }*/
/*.footer-bt { padding: .1vw 1vw; min-width: 10vw; margin: 0 .5vw 1vw; }*/
/** -------------------------------
* ## responsive ## 

jauge
-----------------------------------*/
.z_jauge-fond:hover,
.media-bt_volume:hover,
.z_med_bt-menu:hover{ background-color: rgba(255,255,192,.9); }

.z_jauge-fond{ position: absolute; margin-left: 5%; width: 90%; 
	border: 0.1em solid #444; background-color: rgba(128, 128, 128, 0.5); overflow: hidden; }

.z_jauge-load { background-color: rgba( 32, 128, 32, 0.25 ); }
.z_jauge{ background-color: rgba( 214, 108, 144, 0.5 ); }

.z_jauge-load,
.z_jauge{ position: absolute; top: 0; height: 100%; 
	-webkit-transition: width 0.7s ease-out; transition: width 0.7s ease-out; }

@media all and (min-width: 800px) { 
	.z_jauge-load, .z_jauge, 
	.z_jauge-fond{ border-radius: .5vw;}

	.z_jauge-fond{ bottom: .25vw; height: .65vw;} }

@media all and (max-width: 800px) { 
	.z_jauge-load, 
	.z_jauge, .z_jauge-fond{  border-radius: 1.5vw;}

	.z_jauge-fond{ bottom: 0; height: 2.5vw;} }

/** -------------------------------
* 
----------------------------------- */
/* site Main v2 */

.site-main { margin: 0; padding: 0; }



/** -------------------------------
* ## barres & footer menu ##
----------------------------------- */
.z_page-info { position: absolute; z-index: 2; min-width: 15vw; background-color: rgba(32,32,32,0.5); }

/** -------------------------------
* ## menu ##
----------------------------------- */
.z_med_roller-titre{ position: absolute; padding: 0 .7vw; }

.secondary{ position: absolute; z-index: 10; }
@media all and (min-width: 800px) { 
	.secondary{ padding: 0 1em; }}
@media all and (max-width: 800px) { 
	.secondary{ padding: 0 .5em; }}



/** -------------------------------
* ## header ## */

/*body::before{ padding:0; border: 0; background-color:rgba(32,32,32,.75)!important; }

body::before{ width:0;}*/

.site-content,
.site-footer { margin: 0 !important; padding: 0 !important; width: 100% !important; }

.site-right_menu{ position: relative; }

.site-branding{ z-index:10; min-height: 0; }

@media all and (min-width: 800px) { .show-pc{ display: flex; width: 100%; } .show-portable{ display: none; }}
@media all and (max-width: 800px) { .show-pc{ display: none; } .show-portable{ display: box; }}


.container_foot{ position: fixed; }

.container_foot{ bottom: 2em; width: 100%; z-index: 10; }

.pe_oplay{ border: 2px solid #fff!important; border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.5); }


.z_info-titre{ position: absolute; top: 0.2vw; left: 1vw; }
.z_click { position: absolute; top: 0; width: 100%; height: 100%; cursor: pointer;}

/** -------------------------------
* ## logo ##
----------------------------------- */
.z_logo-fond, .z_logo,
.z_logo-pos { position: absolute; top: 0; left: 0;  z-index: 2;visibility: visible; } /*max-width: max-content; visibility: hidden;*/

.z_logo-fond,
.z_logo { width: 62.5%; max-width: max-content; 
	-webkit-transform-origin: 0px 0px; transform-origin: 0px 0px;
	-webkit-transform: scale(0,0); transform: scale(0,0); 
	-webkit-transition: all 0.75s; transition: all 0.75s; }

.z_logo-fond { -webkit-transition-duration: 0.75s; transition-duration: 0.75s; }
.z_logo { -webkit-transition-duration: 0.5s; transition-duration: 0.5s; }


.z_logo-playfixe { left: -50%; bottom: -10%; width: 12.5%; }
.z_logo-play { left: 0; bottom: 0; width: 25%; }
.z_logo-playfixe,
.z_logo-play { position: absolute; right: 0; margin: 0 auto; }



/*.y_gallery-box,*/
.z_flex{ 
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flexbox;
	display: -o-flex;
	display: flex; flex-wrap: wrap; justify-content: space-around;}

.gallery-box,
.gallery-next { position: absolute; bottom: 0; right: 0; left: 0; }
.gallery-box { top: 0; margin: 15% auto; width: 50%; height: 30%; }
.gallery-next { z-index: 4; }
/** ---------------------------------------
* commentaires
------------------------------------------- */
.z_blog-quit{ min-width: 10%; line-height: 1vw; padding: 0 .5em; float: right; }

.z_blog-texte,
.z_blog-date,
.z_blog-author{ padding-left: .5em; float: left; }
.z_blog-date { padding-top: .5em; }
.z_blog-texte { text-indent: .5em; }

.comment-respond{ padding: .5vw 0 0; border-bottom: .2em solid rgba(64,0,0,0.85);}

.logged-in-as{ margin: .5vw; }
.comment-reply-title { font-size: 1em; padding-left: 1em; }

.comment-form-input{ width: 60%; margin: .5vw auto 0; }

.contact-box{ position: relative; width: 100%; }
.comment-form,
.contact-container{ background-color: #433; color: #ffd; }
.comment-form{ padding: 1vw 5vw; margin: .5vw 0 0;}

.contact-comments{ width:100%; display: inline-block; background-color: #eed; color: #433; }

.blog-form-input,
ol.forms input, 
ol.forms textarea {	border: 1px solid #7E8AA2; padding: 0 .5vw; width: 60%; background-color: #eed;
	border-radius: .5vw; -moz-border-radius: .5vw;-webkit-border-radius: .5vw; }

ol.forms textarea { height: 10vw; max-width: 82.5%; width: 82.5%;}
.comment-form-input{ line-height: 1vw;}

.blog-input{ padding: 0.1vw 1vw!important;}