/*************************************************/
/* Generic                                       */
/*************************************************/
body {
	font-family: PT Sans Caption;
	line-height: 1;
	margin: 20px;
}
a {
	text-decoration: none;
	cursor: pointer;
}
a:any-link  {
}
a:any-link:hover  {
	text-decoration: underline;
}
a:any-link:focus  {
	text-decoration: underline;
}
a:any-link:active  {
	color: red;
}
.page {
    margin-left: auto;
    margin-right: auto;
    padding: 0 15px;
	display: grid;
    gap: 10px;
}
/****** Titre de la page ******/
.titre {
	text-align: center;
	border-radius: 10px;
	background-repeat: no-repeat;
	background-size: 100%;
	padding: 5px;
	aspect-ratio: 16 / 4.6;
}
/****** Menu ******/
.menu {
	display: grid;
    width: 100%;
	border-radius: 10px;
}
.mcol {
	margin: auto;
	padding: 5px;
}
.mcol:hover{
}
/****** AGENDA ******/
.agenda {
	text-align: center;
	border-radius: 10px;
}
.agenda iframe{
	border-radius: 10px;
}
/****** Articles du club ******/
.blog {
	overflow-y: scroll;
	margin: 0px;
	padding: 5px;
	text-align: justify;
	border-radius: 10px;
}
.blog h1 {
	text-align: center;
	margin: 5px;
	font-size: x-large;
}
.blog img {
}
.blog p {
	text-align: justify;
	font-size: medium;
	margin: 5px;
}
/****** Nouvelles par Trimag ******/
.news {
    margin: 0px;
    overflow: auto;
	padding: 5px;
	border-radius: 10px;
}
.news h1 {
	text-align: center;
    font-size: larger;
}
/****** titre le bureau ******/	
.le_bureau {
	display: grid;
	text-align: center;
	border-radius: 10px;
	padding-bottom: 10px;
}
	.titreb {
	}
	.membrep {
	}
	.membres {
	}
	.membret {
	}
/************/	
/****** logo bas de page ******/
.logobas {
	text-align: center;
	align-content: center;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	aspect-ratio: 1 / 1;
}
/****** Formulaire de contact ******/
.formcontact {
	text-align: center;
	display: grid;
	padding-left: 5px;
	padding-right: 5px;
	border-radius: 10px;
}
.formcontact form {
	margin: 10px;
	grid-row: 3;
	display: grid;
}
.formcontact form label {
	text-align: left;
	margin-top: 5px;
	grid-column: 1;
}
.formcontact form input {
	grid-column: 1;
}
.formcontact form textarea {
	grid-column: 1;
}
.btcontact {
	padding: 12px 20px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	margin-left: auto;
	margin-top: 5px;
}
.btcontact:hover {
}
.message {
    margin-top: 20px;
    padding: 10px;
    border-radius: 4px;
    text-align: center;
}
.success {
}
.error {
}
/****** Logos de partenaire ******/
.partenaires {
	text-align: center;
}
	.colpat01 {}
	.colpat02 {}
/************/	
/****** Mentions légales ******/
.ML {
	text-align: center;
	font-size: smaller;
    margin-bottom: 5px;
    margin-top: 15px;
}
/****** Remonter en haut ******/
.enhaut {
	position: fixed;
	bottom: 20px;
	right: 20px;
	padding: 2px 10px;
	border-radius: 5px;
	z-index: 1000;
	cursor: pointer;
	font-size: x-large;
}
/* Bannière cookies */
.cookie-banner {
	display: none; 
	position: fixed; 
	bottom: 0; 
	left: 0; 
	right: 0; 
	padding: 15px; 
	text-align: center; 
	z-index: 1000; 
	font-size: 14px;
}
.accept-cookies {
	margin-left: 10px; 
	padding: 5px 10px; 
	border: none; 
	cursor: pointer;
}					 
/*************************************************/
/* Extra small devices (phones, 600px and down) */
/*************************************************/
@media only screen and (max-width: 799px) {
	.page {
    	max-width: 100%;
	    grid-template-columns: 1;
	}
	/****** Titre de la page ******/
	.titre {
		grid-column: 1;
		grid-row: 1;
		font-size: xx-small;
	}
	/****** Menu ******/
	.menu {
		grid-column: 1;
		grid-row: 2;
	}
	.mcol {
		grid-column: 1;
	}
	/****** AGENDA ******/
	.agenda {
		grid-row: 4;
	}
	/****** Articles du club ******/
	.blog {
		grid-row: 3;
		height: 400px;
	}
	.blog img {
	    width: 50px;
	    height: auto;
	}
	/****** Nouvelles par Trimag ******/
	.news {
		grid-row: 6;
		height: 250px;
	}
	/****** titre le bureau ******/	
	.le_bureau {
		grid-row: 5;
	}
		.titreb {
		}
		.membrep {
		}
		.membres {
		}
		.membret {
		}
	/************/	
	/****** logo bas de page ******/
	.logobas {
		grid-row: 9;
	}
	/****** Formulaire de contact ******/
	.formcontact {
		grid-row: 8;
	}
	/****** Logos de partenaire ******/
	.partenaires {
		grid-row: 7;
	}
		.colpat01 {}
		.colpat02 {}
	/************/	
	/****** Mentions légales ******/
	.ML{
		grid-row: 10;
		margin-left: auto;
    	margin-right: auto;	
    	width: 90px;
    }
}
/***************************************************************************/
/* Screen large devices (portrait tablets and large phones, 800px and up) */
/*************************************************************************/
@media only screen and (min-width: 800px) {
	.page {
	    max-width: 90%;
	    grid-template-columns: repeat(5, 1fr);
	    grid-template-rows: repeat(6);
	}
	/****** Titre de la page ******/
	.titre {
		grid-area: 1 / 1 / 2 / 6;	
	}
	/****** Menu ******/
	.menu {
		grid-area: 2 / 1 / 3 / 6;	
	}
	.mcol {
		grid-row: 1;
	}
	/****** AGENDA ******/
	.agenda {
		grid-area: 3 / 1 / 4 / 2;	
	}
	/****** Articles du club ******/
	.blog {
		grid-area: 3 / 2 / 5 / 6;	
		height: 550px;
	}
	.blog img {
	}
	/****** Nouvelles par Trimag ******/
	.news {
		grid-area: 4 / 1 / 5 / 2;	
		height: 186px;
	}
	/****** titre le bureau ******/	
	.le_bureau {
		grid-area: 5 / 1 / 6 / 6;
		grid-template-areas:
			"titreb titreb titreb"
			"membre1 membre2 membre3";
	}
		.titreb {
			grid-area: titreb;
		}
		.membre1 {
			grid-area: membre1;
		}
		.membre2 {
			grid-area: membre2;
		}
		.membre3 {
			grid-area: membre3;
		}
	/************/	
	/****** logo bas de page ******/
	.logobas {
		grid-area: 6 / 1 / 6 / 2;
	}
	/****** Formulaire de contact ******/
	.formcontact {
		grid-area: 6 / 2 / 6 / 4;
	}
	/****** Logos de partenaire ******/
	.partenaires {
		grid-area: 6 / 4 / 6 / 6;
	}
		.colpat01 {}
		.colpat02 {}
	/************/	
	/****** Mentions légales ******/
	.ML{
		grid-area: 7 / 1 / 7 / 6;
	    margin-left: 5px;
		margin-right: 5px;
	}
}