/*
Theme Name: Jean-Marie Piemme
Theme URI: https://jeanmariepiemme.be
Description: Thème custom pour le site de l'auteur Jean-Marie Piemme. Modernisé en 2026 avec ACF Pro et jQuery 3.7.
Version: 2.2.0
Author: Nicolas Belayew
Author URI: https://tchiktchak.be
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jmp
Tags: custom, author, literature, acf
*/
/*global*/
body{
	font-family: 'Helvetica Neue', helvetica, verdana, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: #000;
	width: 100%;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

a{
	color: #000;
	text-decoration: none;
	transition: color 0.2s ease;
}
a:hover{
	color: #666;
}
/*fin global*/


/*zones*/
#wrapper{
	margin-top: 40px;
	margin-left: auto;
	margin-right: auto;
}
#wrapper .texte{
		font-family: Georgia, 'Times New Roman', Times, serif;
		
	
}

/*fin zones*/

/* Responsive 2021 */
.test{
	background-color: red;
	height: 250px;

	display: block;
}


/*home Boxes*/
.homeBox{

	float: left;
	margin: 1px;
background:#eaeaea;
}

.actu h1{
	text-transform: uppercase;
	font-weight: normal;
	font-size: 1.5em;
	line-height: 1.2;
}
.actu h1, .actu p{
	padding-bottom: 10px;
}
.actu h3{
	padding-bottom: 5px;
	font-weight: normal;
	font-size: 0.75em;
}
.actu p{
	font-size: 0.85em;
	line-height: 1.4;
}
.white{
	color: white;
}



	

.legende{
	text-transform: uppercase;
	font-weight: bold;
	font-size: 1.3em;
}

.debut {
	font-size: 0.9em;
}
.debut p{
	margin-bottom: 10px;
}

.JMP{
	height: 100%;
	width: 100%;
	display: table-cell;
	vertical-align: middle;
	text-transform: uppercase;
	font-size: 2.5em;
	font-weight: bold;
}
.JMP p{
padding: 10px;
		text-align: center;
	}
.over{
	margin-top: -190px;
	z-index: 3;
}


.actu div{
	padding:10px;
	
}
.quote{
	font-size: 1.6em;
}
.colone{
	float: left;
padding: 10px;
padding-left: 20px;
padding-right: 20px;

}

#colones a{
	border-bottom: 1px solid #000;
}
#colones a:hover{
	color: #666;
}
#centre{
	font-family: Georgia, 'Times New Roman', Times, serif;
	font-size: 1.3em;
	line-height: 1.5;
	width: 340px;
}
#centre.large{
	width: 652px;
	
}
#centre p{
	margin-bottom: 20px;
}

#droite p{margin-bottom: 10px;
	
}
#droite h2{margin-bottom: 10px;
		text-transform: uppercase;
	
}
#droite h3{margin-bottom: 10px;
		text-transform: uppercase;
	
}
#droite ul{
	list-style-type: none;
	margin-bottom:10px;
	text-transform: uppercase;
	list-style-image: url(assets/images/fleche.png);
	list-style-position: outside;
	opacity: 1;
	margin-left: 27px;
}
#droite ul li{
	margin-bottom: 4px;
}
#gauche{
	font-size: 0.8em;
	width: 180px;
}
#gauche ul{list-style-type: none;
}
#gauche ul li{
	text-transform: uppercase;
	margin-bottom: 4px;
	
}

span.inedit {
background-color: yellow;
margin-left: 2px;
padding-left:2px ;
padding-right: 2px;
}
span.epuise 
{
	background-color: red;
padding-left:2px ;
padding-right: 2px;
	margin-left: 2px;
}


#slideshow img{
	width: 100%;
	height: auto;

}
object, object embed{
	outline: 0;
}
#slideshow{
	position: relative;
	width: 100%;
	height: 600px;
	overflow: hidden;
	background-color: black;
    display: flex;
	align-items: center;
	justify-content: center;
}
#slideshow #picture{
	position: relative;
	width: 100%;
	height: 100%;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}
#slideshow #picture img{
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	cursor: pointer;
}
#slider_pics{
	width: 100%;
	height: 80px;
	padding: 10px 20px;
	text-align: center;
	font-size: 0.85em;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
#slider_pics #captionstitre h3{
	font-weight: normal;
	font-size: 1em;
	margin-bottom: 5px;
	text-transform: uppercase;
}
#slider_pics #captionsdetails{
	font-size: 0.9em;
	color: #666;
}
#captions h3{
	font-size: 1em;
	margin-bottom: 5px;
}
#miniatures .thumb{
	display: block;
	width: 100%;
	height: auto;
	cursor: pointer;
}

#signature{
	margin-top: auto;
	padding: 3rem 0 20px 0;
	font-size: 0.75em;
	color: #999;
	text-align: center;
	text-transform: uppercase;
}
#signature a{
	color: #999;
	text-decoration: none;
}
#signature a:hover{
	color: #666;
}
#ecran{
	clear: both;
}
#infos{
	padding-top: 10px;
	font-size: 0.8em;
}

#nav-time{
	margin-top: 10px;
	width: 100%;
	clear: both;
}
#nav-time .left{
	float: left;
}
#nav-time .right{
	float: right;
}

.player audio{
  width: 60vw;
}
.player{
 margin-top: 20px; 
}

audio:focus{
  outline: none; }
.videobox{
  background-color: black
}

/* Navigation arrows for gallery */
.arrow-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    font-size: 1.8em;
    padding: 12px 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0;
    z-index: 15;
    font-weight: bold;
}

#prev-photo {
    left: 10px;
}

#next-photo {
    right: 10px;
}

#slideshow:hover .arrow-nav {
    opacity: 0.8;
}

.arrow-nav:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.9);
    transform: translateY(-50%) scale(1.1);
}

/* Lightbox */
#lightbox-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}
#lightbox-overlay.active {
    display: flex;
}
#lightbox-content {
    max-width: 90vw;
    max-height: 85vh;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#lightbox-img {
    max-width: 90vw;
    max-height: 80vh;
    object-fit: contain;
}
#lightbox-caption {
    color: #fff;
    margin-top: 15px;
    font-size: 0.9em;
    text-align: center;
}
#lightbox-caption h3 {
    font-weight: normal;
    font-size: 1em;
    text-transform: uppercase;
    margin-bottom: 5px;
}
#lightbox-caption .details {
    font-size: 0.85em;
    color: #aaa;
}
#lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    background: none;
    border: none;
    color: #fff;
    font-size: 2.5em;
    cursor: pointer;
    z-index: 10001;
    transition: opacity 0.3s;
}
#lightbox-close:hover {
    opacity: 0.7;
}
.lightbox-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    font-size: 3em;
    padding: 10px 20px;
    cursor: pointer;
    z-index: 10001;
    transition: background 0.3s;
}
.lightbox-arrow:hover {
    background: rgba(255, 255, 255, 0.25);
}
#lightbox-prev {
    left: 20px;
}
#lightbox-next {
    right: 20px;
}