:Root {
    --OrangeLogo: #FF4023;
	--CouleurFieldset: #424242;
	--TextParDefaut: #F2F2F2
}

* {
	font-family: Calibri;
	font-size: 18px;
	color: var(--TextParDefaut)
}

.Body {
    padding-top: 24px;
	background: url('Fond.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover
}

fieldset {
	border-style: solid;
	border-width: 1px;
	border-color: var(--CouleurFieldset);
	border-radius: 8px;
	background-color: var(--CouleurFieldset);
	padding-top: 14px;
	padding-bottom: 14px
}

.Gallery {
	--s: 240px; /* Control the size */
	--g: 8px;   /* Control the gap */
	display: grid;
	grid: auto-flow var(--s)/repeat(2,var(--s));
	gap: var(--g);
}

.Gallery > img {
	width: 100%;
	aspect-ratio: 1;
	cursor: pointer;
	filter: grayscale();
	z-index: 0;
	transition: .25s,z-index 0s .25s;
}

.Gallery > img:hover {
	width: calc(200% + var(--g));
	filter: grayscale(0);
	z-index: 1;
	--_c: 50%;
	transition: .4s,z-index 0s;
}

.Gallery > img:nth-child(1){
	clip-path: circle(var(--_c,55% at 70% 70%));
	place-self: start;
}

.Gallery > img:nth-child(2){
	clip-path: circle(var(--_c,55% at 30% 70%));
	place-self: start end;
}

.Gallery > img:nth-child(3){
	clip-path: circle(var(--_c,55% at 70% 30%));
	place-self: end start;
}

.Gallery > img:nth-child(4){
	clip-path: circle(var(--_c,55% at 30% 30%));
	place-self: end;
}

.Gras {
	font-weight: bold
}

.MargeAuto {
	margin: auto
}

.PiedPage {
	color: var(--OrangeLogo);
    padding-top: 2px;
	font-size: 13px;
	text-align: center
}

table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0px;
	border-width: 0px
}

td {
	padding: 0px
}