::selection {
	background-color: rgba(0,0,0,0.25);
	color: white;
}

::-moz-selection {
	background-color: rgba(0,0,0,0.25);
	color: white;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-smooth: always;
	text-rendering: optimizeLegibility;
	margin: 0;

	background-color: var(--gris);
	

	font-family: 'Hind Siliguri', sans-serif;

	overflow: hidden;
}

h1,
h2{
	margin:0;
	
}


a {	text-decoration: none; }

*{
	box-sizing: border-box;
}

img{
	display: block;
}


.hidden{ 
	display: none !important; 
}

.invisible{ 
	visibility: hidden; 
}

.transparent { 
	opacity: 0;
}

.clear { clear: both; }

div{
	margin:0;
}
 /*//////////////////////////////////////////////////////////////////////////////*/

/* @font-face {
    font-family: suisse;
    src: url("SuisseIntl-Book.otf");
    font-weight: normal;
    font-style: normal;
} */



/*//////////////////////////////////////////////////////////////////////////////   variable*/

/* :root{
	--vert: #476950;
	--gris: Gainsboro;
	
	--fondsHome: #6e0900;
	--colorPoliceHome: white;
	
	--fondsPage: rgb(253,253,253);
	--fontePage: #4a4a4a;
	
	--couleurPresentationIntro:rgba(0, 0, 0, 0.15);
	--couleurPresentationTerrain:rgba(0, 0, 0, 0.15);
	--couleurPresentationForet:rgba(0, 0, 0, 0.15);
	--couleurPresentationSalle:rgba(0, 0, 0, 0.15);
} */




/*//////////////////////////////////////////////////////////////////////////////   */


main{
	position: absolute;
	top: 0;
	left: 300px;
	
	background-color: var(--fondsPage);
	
	width: calc(100vw - 300px);
	height: calc(var(--vh, 1vh) * 100);
	
	overflow: scroll;
	
	color: var(--fontePage);
	
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows:auto;

}


h1{
	position:relative;
	
	max-width: calc(100% - 40px);
	
	margin: 47px 20px 0px 20px;
	
	text-align: left;
	color: var(--fontePage);
	font-size: 40px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -0.4px;
	text-transform: uppercase;
}

h2{
	position:relative;
	
	max-width: calc(100% - 40px);
	
	margin: 40px 20px 0px 20px;
	
	text-align: left;
	color: var(--fontePage);
	font-weight: 700;
	font-size: 23px;
	word-spacing: -1px;
}

h3{
	position:relative;
	
	max-width: calc(100% - 40px);
	
	
	text-align: left;
	color: var(--fontePage);
	font-weight: 700;
	font-size: 16px;
	word-spacing: -1px;
}


p{
	/* max-width: 1000; */
	
	position:relative;
		
	width: calc(100% - 40px);
	
	text-align: left;
	font-size: 16px;
	line-height: 1.2;
		
	margin: 15px 20px;
}


main a{
	color: inherit;
	text-decoration: underline;
}



table{
	position: relative;
	
	width: calc(100% - 40px);
	
	margin: 0 20px;
	
	outline: 1px var(--fontePage) solid;
	outline-offset: -1px;
	
	background-color: #ffebb4;
	border-collapse: collapse;
}




th, td {
	outline: 0.5px var(--fontePage) solid;
	padding: 5px;
	line-height: 1.2;
}
	

main img{
	position: relative;
	top: 0;
		
	width:100%;
	/* height: 50vh;
	min-height: 400px; */
	
	margin: 29px 0 0 0;
	
	object-fit: cover;
	
}


/*//////////////////////////////////////////////////////////////////////////////   Home*/


#mainHome{
	display: block;
	background-color: var(--fondsHome);
}




#titreHome{
	color: var(--colorPoliceHome);
}



.texteHome{
	font-weight: 700;
	color: var(--colorPoliceHome);
}

#mainHome ul{
	color: var(--colorPoliceHome);
	font-weight: 700;
}

#mainHome ol{
	color: var(--colorPoliceHome);
	font-weight: 700;
}



/*//////////////////////////////////////////////////////////////////////////////   Le tir à l'arc*/



#mainTir{
	align-content: start;  
}


#imageTir{
	position: relative;
	top: 0;
	width: 100%;
}




/*//////////////////////////////////////////////////////////////////////////////   Activité*/

#mainActivite{
	align-content: start; 
}

#activiteListe{
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 20px;
	padding: 20px;
	
}

.activites{
	position: relative;
	
	padding:  10px 20px 10px 70px;
	
	border-radius: 3px;
	
	background-color: rgb(233,233,233);
}


/* .activites:nth-of-type(odd){
	background-color: rgb(233,233,233);
} */

.foret::before,
.indoor::before,
.fita::before,
.acy::before{
	position: absolute;
	content:"";
	
	width: 50px;
	height: 50px;
	
	top: 10px;
	left: 10px;
	
	background-size: contain;
}

.foret::before{
	background-image: url("../images/activite-01.png");
}

.indoor::before{
	background-image: url("../images/activite-03.png");
}

.fita::before{
	background-image: url("../images/activite-02.png");
}

.acy::before{
	background-image: url("../images/activite-04.png");
}


#mainActivite h3{
	padding: 0;
	margin:0;
}


.descriptionActivite{
	max-width: 700px;
}


.cancel::after{
	content:"ANNULÉ";
	
	position: absolute;
	top: 50%;
	left: calc(50% + 80px);
	transform: translate(calc(-50% - 80px), -50%) rotate(-10deg) scale(1.2);
	
	/* width: calc(100% - 120px); */
	
	font-size: 15pt;
	font-weight: 900;
	text-align: center;
	
	color: red;
	
	background-color: rgba(255, 0, 0, 0.0);
	
	padding: 5px 10px;
	border: 3px red solid;
	border-radius: 10px;
}

.modify::after{
	content:"MODIFIÉ";
	
	position: absolute;
	top: 15%;
	left: calc(90% + 80px);
	transform: translate(calc(-50% - 80px), -50%) rotate(10deg) scale(0.9);
	
	/* width: calc(100% - 120px); */
	
	font-size: 15pt;
	font-weight: 900;
	text-align: center;
	
	color: red;
	
	background-color: rgba(255, 0, 0, 0.0);
	
	padding: 5px 10px;
	border: 3px red solid;
	border-radius: 10px;
}

.new::after{
	content:"NOUVEAU!";
	
	position: absolute;
	top: 15%;
	left: calc(90% + 80px);
	transform: translate(calc(-50% - 80px), -50%) rotate(10deg) scale(0.9);
	
	/* width: calc(100% - 120px); */
	
	font-size: 15pt;
	font-weight: 900;
	text-align: center;
	
	color: rgb(19, 145, 0);
	
	background-color: rgba(255, 0, 0, 0.0);
	
	padding: 5px 10px;
	border: 3px rgb(19, 145, 0) solid;
	border-radius: 10px;
}




/*//////////////////////////////////////////////////////////////////////////////   News*/


#mainNews{
	display: block;
}

.newsContainer{
	position: relative;
	width: 100%;
	
	padding: 20px;
	
	display: grid;
	grid-template-columns: auto;
	grid-gap: 20px;
}

.newsItem{
	position: relative;
	width: 100%;
	
	background-color: rgb(233,233,233);
	border-radius: 3px;
}

.titreNews{	
	margin: 10px 0px 0px 20px;
}
.dateNews{	
	margin: -10px 20px 0px 20px;
	text-align: left;
}

.texteNews{
	width:calc(100% - 40px);
	margin: 0px 0px 15px 20px;	
}



.texteNews p{
	margin-right: 0;
	margin-left: 0;
}











/*//////////////////////////////////////////////////////////////////////////////   Indoor*/


#mainIndoor{
	display: block;
}



.introIndoor{	
	margin: 10px 0px 0px 20px;
}




.logosContainer{
	position: relative;
	width: 100%;
	
	padding: 20px;
	
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 20px;
}

.smallLogosContainer{
	position: relative;
	width: 100%;
	padding: 20px;
	display: grid;
	/* grid-template-columns: 1fr 1fr 1fr 1fr; */
	grid-template-columns: 1fr;
	grid-gap: 20px;
}

.logoItem{
	position: relative;
	width: 100%;
	
	max-height: 120px;
	object-fit: contain;
	
	place-self: center;
	
	min-height: unset;
	height: unset;
	margin:0;
}

.smallLogoItem{
	position: relative;
	width: 100%;
	
	max-height: 40px;
	object-fit: contain;
	
	place-self: center;
	
	min-height: unset;
	height: unset;
	margin:0;
}




.indoorContainer{
	position: relative;
	width: 100%;
	
	padding: 20px;
	
	display: grid;
	grid-template-columns: auto;
	grid-gap: 20px;
}


.indoorItem{
	position: relative;
	width: 100%;
	
	background-color: rgb(233,233,233);
	border-radius: 3px;
}


.titreIndoor{	
	margin: 10px 0px 0px 20px;
}


.galeriePhoto{
	position: relative;
	
	width: 100%;
	height: 60vh;
	
	padding: 20px;
	
	display: grid;
	grid-template-columns: 1fr;
	justify-content: center;
	
	overflow: hidden;
}

#galerie0 img{
	position: relative;
	
	width: 100%;
	height: 100%;
	
	min-height: unset;
	margin:0;
	
	object-fit: contain;

}





/*//////////////////////////////////////////////////////////////////////////////   galeries photos*/

/* c'est le id d'un main */
#galleryOnly{ 
	background-color: #353535;
	display:block;
}

#galleryOnly img{
	cursor: e-resize;
}

#galleryOnly h1{
	color: #FDFDFD;
}


.galerieOnly{
	height: auto;
	max-height: 90vh;

}









/*//////////////////////////////////////////////////////////////////////////////   adaptation (mobile et 27')*/

@media screen and (max-width: 640px) { 
	
	#hamburger{
		display: block;
		position: absolute;
		top: 20px;
		right: 20px;
		
		padding: 10px;
		background-color: var(--gris);
		border-radius: 5px;
		z-index: 10;
		cursor: pointer;
	}	
	
	nav{
		padding-top:70px;
		z-index: 1;
		left: -300px;
	}
	  
	main{
		padding-top: 50px;
		width: 100vw;
		left: 0;
	}
	
	
	.showNav{
		left: 0;
	}
	
	
	#imageTop{
		max-height: 300px;
	}
	
	
	h1{
		font-size:33px;
	}
	
	table{
		font-size:12px;
	}
	
	
	.logosContainer{

		grid-template-columns: 1fr;
	}

}

@media screen and (max-width: 570px){
	table{
		font-size:8px;
	}
}





@media screen and (min-width: 1480px) { 
	
	main{
		grid-template-columns: 1fr 1fr;
		grid-column-gap: 40px;
		/* grid-auto-flow: row; */
	}
	
	
	ul{
		padding-left: 40px;
	}
	

	
	
	/*//////////////////////////////////////////////////////////////////////////////   Presentation*/
	
	
	
	#mainPresentation {
		grid-template-areas: 
		"titre titre"
		"presentationIntro presentationPhoto1"
		"presentationPhoto4 presentationSalle"
		"presentationForet presentationPhoto3"
		"presentationPhoto2 presentationTerrain"
		"presentationInscription presentationInscription";
		padding: 0 40px 40px 40px;
	}
	//représentation textuel des colonnes et de la  mise en page
	
	.containerPresentation{
		position: relative;
		width: 100%;
		height: auto;
	}
	
	#mainPresentation h1{
		grid-area: titre;
	}
	
	#mainPresentation h1,
	#mainPresentation h2,
	#mainPresentation p{
		margin-left: 0;
	}

	
	#presentationIntro{
		grid-area: presentationIntro;
	}
	
	#presentationPhoto1{
		grid-area: presentationPhoto1;
	}
	
	
	#presentationTerrain{
		grid-area: presentationTerrain;
	}
	
	#presentationPhoto2{
		grid-area: presentationPhoto2;
	}
	
	#presentationForet{
		grid-area: presentationForet;
	}
	
	#presentationPhoto3{
		grid-area: presentationPhoto3;
	}
	
	#presentationSalle{
		grid-area: presentationSalle;
	}
	
	#presentationPhoto4{
		grid-area: presentationPhoto4;
	}
	
	#presentationInscription{
		grid-area: presentationInscription;
	}
	
	#presentationPhoto0 img,
	#presentationPhoto1 img,
	#presentationPhoto2 img,
	#presentationPhoto3 img,
	#presentationPhoto4 img{
		height: 100%;
		margin: 0;
	}
	
	#mainPresentation h2{
		/* margin-top: 23px; */
	}
	
	
	/*//////////////////////////////////////////////////////////////////////////////   Initiation*/
	
	
	#mainInitiation {
		grid-template-areas: 
		"titre titre"
		"initiationIntro initiationCurieux"
		"initInscription initiationPhoto";
		padding: 0 40px 40px 40px;
	}
	
	#mainInitiation h1{
		grid-area: titre;
	}
	
	#mainInitiation h1,
	#mainInitiation h2,
	#mainInitiation p{
		margin-left: 0;
	}
	
	
	#initiationIntro{
		grid-area: initiationIntro;
	}
	
	#initiationCurieux{
		grid-area: initiationCurieux;
	}
	
	#initiationPhoto{
		grid-area: initiationPhoto;
	}
	
	#initInscription{
		grid-area: initInscription;
	}
	
	#initiationPhoto img{
		height: 100%;
	}
	
	#mainInitiation h2{
		margin-top: 23px;
	}
	
	
	
	/*//////////////////////////////////////////////////////////////////////////////   Le tir à l'arc*/
	
	#mainTir{
		padding: 0 40px 40px 40px;
		grid-template-areas: 
		"titre titre"
		"img img"
		". ."
		". ."
		". .";
	}
	
	
	
	#mainTir h1{
		grid-area: titre;
	}
	
	#mainTir img{
		grid-area: img;
	}
	
	
	
	
	
	
	
	
	
	

	/*//////////////////////////////////////////////////////////////////////////////   Activités*/
	
	#mainActivite {
		grid-template-columns: 1fr;
		grid-template-areas: 
		"titre"
		"activiteCalendrier"
		"activiteListe";
	}
	
	.containerActivite{
		position: relative;
		width: 100%;
		height: auto;
	}
	
	#mainActivite h1{
		grid-area: titre;
	}
	
	#activiteCalendrier{
		grid-area: activiteCalendrier;
	}
	
	#activiteListe{
		display: grid;
		grid-area: activiteListe;
		
		grid-template-columns: 1fr 1fr;
		grid-gap: 20px;
	}
	
	.activites{
		background-color: rgb(233,233,233);
	}
	/* .activites:nth-of-type(odd){
		background-color: transparent;
	}
 */	
	
	/* .activites:nth-of-type(4n+0){
		background-color: rgb(233,233,233);
	}
	
	.activites:nth-of-type(4n+1){
		background-color: rgb(233,233,233);
	} */
	
	
	/*//////////////////////////////////////////////////////////////////////////////   news*/

	
	.newsContainer{
		grid-template-columns: 1fr 1fr;
	}






	/*//////////////////////////////////////////////////////////////////////////////   Indoor*/
	
	#indoorGrid{
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
	.indoorContainer{
		grid-template-columns: 1fr 1fr;
	}

	.logosContainer{
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}

}