/* ------------------------------------ planche ------------------------------------ */

.grid { /* grille planche suivant 'web_planche' issu de la DB : exception media-queries si nbre colonnes = 4 */
		display: grid;
		justify-content: space-between;
		justify-items: center;
		grid-template-columns: repeat(3, max-content);
	}
	.grid-1 {
		grid-template-columns: repeat(1, max-content);
		justify-content: center;
	}
	.grid-2 {
		grid-template-columns: repeat(2, max-content);
	}
	.grid-3 {
		grid-template-columns: repeat(3, max-content);
	}
	.grid-4 {
		grid-template-columns: repeat(4, max-content);
	}
	.grid-5 {
		grid-template-columns: repeat(5, max-content);
	}
	.grid-6 {
		grid-template-columns: repeat(6, max-content);
	}

/* voir les media-queries de main.css */
.thumbnail {}
	.thumbnail .blocVignette {
		padding: 7px;
		border: 1px solid #efefef;
		display: inline-block;
		line-height: 0;
		cursor: pointer;
	}
	.thumbnail .blocVignette:hover {
		border: 1px solid #C9BFAC;
	}
	
	.thumbnail .blocLienTexte {
		padding: 7px;
		border: 1px solid #efefef;
		display: inline-block;
		line-height: 0;
		cursor: pointer;
	}
	
	.thumbnail .blocLienTexte img {
		padding: 7px;
		background-color: #f9f8f3;
	}
	.thumbnail .blocLienTexte:hover {
		border: 1px solid #C9BFAC;
	}

/* ------------------------------------ visionneuse ---------------------------------- */
#visioZone {
	position: relative;
}

div#diaporama_fond {
	text-align: center;
	vertical-align: top;
}

#tableMain, #tableTemp {
		border-collapse: collapse;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		opacity: 0;
	}

.visio_navh { /* UNUSED */
	text-align: center;
	vertical-align: bottom;
	height: 24px;
}

.visio_navgd {
	vertical-align: middle;
	width: 22px;
}

.fleche_g { /* class car utilisé dans les 2 tables de la visionneuse */
		display: inline-block;
		cursor: pointer;
		width: 22px;
		height: 40px;
		background: url("../_pix/fleches_gd.gif") no-repeat 0 0;
		opacity: 0;
	}
	.fleche_g:hover {
		background-position: -22px 0;
	}
	.fleche_g:active {
		background-position: -44px 0;
	}

.fleche_d { /* class car utilisé dans les 2 tables de la visionneuse */
		display: inline-block;
		cursor: pointer;
		width: 22px;
		height: 40px;
		background: url("../_pix/fleches_gd.gif") no-repeat 0 -40px;
		opacity: 0;
	}
	.fleche_d:hover {
		background-position: -22px -40px;
	}
	.fleche_d:active {
		background-position: -44px -40px;
	}

.fleche_h { /* UNUSED : class car utilisé dans les 2 tables de la visionneuse */
		display: inline-block;
		cursor: pointer;
		width: 24px;
		height: 20px;
		background: url("../_pix/fleche_h.gif") no-repeat 0 0;
	}
	.fleche_h:hover {
		background-position: -24px 0;
	}
	.fleche_h:active {
		background-position: -48px 0;
	}

/* ------------------------------------- pour zoom ----------------------------------- */
.zoomFrame {
	position: relative;
	overflow: hidden;
	display: inline-block;
}

.pictImage {
	display: block;
	transform-origin: center center;
}

table#zoomBtns {
	z-index: 10;
	position: absolute;
	border-collapse: separate;
	border-spacing: 0;
	width: auto;
	white-space: nowrap;
	display: none;
}

td#visio_zoomText {
	text-align: left;
	padding-right: 20px;
}

td#zoomBtnsRight {
		text-align: right;
	}
	#zoomBtnsRight div {
		display: inline-block;
		margin-left: 10px;
	}

#visio_zoomPlus {
		text-align: center;
		vertical-align: bottom;
		height: 20px;
		width: 24px;
		cursor: pointer;
		background: url("../_pix/zoomPlus.gif") no-repeat 0 0;
	}
	#visio_zoomPlus:hover {
		background-position: -24px 0;
	}
	#visio_zoomPlus:active {
		background-position: -48px 0;
	}

#visio_zoomMoins {
		text-align: center;
		vertical-align: bottom;
		height: 20px;
		width: 24px;
		cursor: pointer;
		background: url("../_pix/zoomMoins.gif") no-repeat 0 0;
	}
	#visio_zoomMoins:hover {
		background-position: -24px 0;
	}
	#visio_zoomMoins:active {
		background-position: -48px 0;
	}