@charset "utf-8";
/* CSS Document */

body
{
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
    margin:0px;
    padding:0px;
     /* #ffecd9 */
}
header
{
	width:100%;
	height:150px;
	background-color:#babfcd; /* #ffecd9 */
	box-shadow: 1px 2px 4px #FFF;
	text-align:center;
}
#blocHeader
{
	margin-left:auto;
	margin-right:auto;
}
#content
{
	margin-left: auto;
    margin-right: auto;
	border:1px solid #CCC;
	text-align:center;
	vertical-align:top;
}
article
{
	text-align:left;
	padding:15px;
	line-height:25px;
}
nav
{
    margin-left: auto;
    margin-right: auto;
	text-align:center;
	background-color:#4e6a8d;
}
ul 
{
    list-style: none; /* enlever les puces */
    margin: 0;
    padding: 0;
    margin-top:1px;
}
li
{
	display: inline-table;
}
.menu
{
	display: block;
	background-color:#57779d;
	color:#F4F4F4;
	cursor:pointer;
	line-height:35px;
	text-decoration:none;
	margin-left:-2px;
}
.menu:hover
{
	background-color:#6383a9;
}
#agendaAffichMenu
{
	line-height:25px;
	text-align:center;
	margin-top:4px;
	box-shadow: 1px 1px 2px #000;
	background: #fff;
	background: rgba(255,255,255,0.7);
	color: #111;
	text-shadow: -1px -1px 0 rgba(255,255,255,0.3);
}
#titreRubrique
{
	width:100%;
	height:30px;
	line-height:30px;
	margin-left:auto;
	margin-right:auto;
	margin-top:40px;
	text-align:center;
	background-color:#afbfd3;
	color: #111;
}
#motAsso
{
	margin-top:2px;
	margin-left:auto;
	margin-right:auto;
	background: #FFF;
	text-align:left;
	padding:14px;
	line-height:26px;
}
#boxEventRoot
{
	margin-left:auto;
	margin-right:auto;
	background: #FFF;
	border:1px solid #CCC;
}
#figureArticles
{
	background: rgba(11,11,11,0.20);
	border:1px solid rgba(11,11,11,0.20);
	text-align:center;
}
#legendArticles
{
	margin-left:auto;
	margin-right:auto;
	margin-top:-5px;
	text-align:center;
	box-shadow: 1px 1px 2px #000;
	background: #fff;
	background: rgba(255,255,255,0.7);
	color: #111;
	text-shadow: -1px -1px 0 rgba(255,255,255,0.3);
}
footer
{
	margin-top:8px;
	margin-bottom:50px;
    margin-left: auto;
    margin-right: auto;
    font-size:13px;
    background-color:#57779d;
    display: flex;
	flex-wrap: wrap;
}
#footLeft
{
	width:50%;
	float:left;
}
#footRight
{
	width:50%;
	float:right;
	text-align:right;
}
#footList
{
	width:80%;
	margin-left:20px;
	margin-top:15px;
	line-height:24px;
}
#footCopyright
{
	width:100%;
	font-size:13px;
    text-align:center;
}
#boutonValid
{
	display:block;
	width:150px;
	height:30px;
	margin-left: auto;
	margin-right: auto;
	font-weight:bold;
	text-align:center;
	line-height:30px;
	color:#F4F4F4;
	background-color:#57779d;
	border:1px solid #57779d;
	border-radius:8px;
	cursor: pointer;
	transition: background-color .4s;
	text-decoration:none;
	outline:none;
}
#boutonValid:hover
{
	background-color:#7d97b7;
	border:1px solid #7d97b7;
}
/* Page Connect */
#fieldsetLogin
{
	width:300px;
	height:240px;
	margin-top:30px;
	margin-left:auto;
	margin-right:auto;
	border:none;
	background: rgba(33,33,33,.4);
	border:1px solid #000;
	border-radius:4px;
	text-align:center;
}
#legendLogin 
{
	width:110px;
	height:25px;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	line-height:25px;
	background-color:#57779d;
	border-radius:4px;
	color:#F4F4F4;
}
#idUser
{
	width:140px;
	margin-top:20px;
	padding:5px;
	color:#000;
	border-radius:3px;
	box-shadow: 1px 1px 1px #000;
}
#pass
{
	width:140px;
	margin-top:15px;
	padding:5px;
	color:#000;
	border-radius:3px;
	box-shadow: 1px 1px 1px #000;
}
#logout
{
	width:30px;
	height:30px;
	background-color:#800;
	border-radius:4px;
	text-align:center;
}
#logout:hover
{
	background-color:#f20000;
	color:#111;
}
.msgErreurLogin
{
	width:114px;
	height:43px;
	margin-left:-2px;
	font-weight:bold;
	line-height:20px;
	text-align:center;
	background-color:#800;
	color:#FFF;
	box-shadow: 1px 1px 2px #000;
	border-radius:4px;
}
/* Page Contact */
#boxContact
{
	margin:0;
	padding:0;
	border:0;
	margin-left:auto;
	margin-right:auto;
	border:none;
	border:2px solid #7d97b7;
	border-radius:8px;
}
#legendContact
{
	width:160px;
	height:25px;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	line-height:25px;
	background-color:#57779d;
	border-radius:4px;
	color:#F4F4F4;
}
#mailContact
{
	width:240px;
	height:20px;
	padding:6px;
	box-shadow: 1px 1px 2px #000;
	border-radius:4px;
}
/****************/

a:link{text-decoration:none;outline:none;border:none;}






/* Petits téléphones de résolution 320x480 en mode portrait. *************************************/
/* Résolution mini 320 pixels */
/* Smartphone 360x640 +utilisé **************************************************************/
@media screen and (max-width: 480px){

header
{
	width:100%;
	height:100px;
}
#blocHeader
{
	width:330px;
}
#logoTOP
{
	width:100%;
	margin-top:10px;
}
#logoDiocese
{
	display:none;
}
#content
{
	width:330px;
    min-height: 700px;
    display:flex;
	flex-wrap: wrap;
}
article
{
	width:300px;
	min-height:800px;
}
aside
{
	width:330px;
	min-height:700px;
}
h1
{
	width:100%;
	font-size:20px;
	margin-top:10px;
	text-align:center;
	font-style: italic;
}
h2
{
	margin:0;
	font-size:16px;
	font-style: italic;
}
nav
{
	width:330px;
	height:125px;
}
.menu
{
	width:105px;
	height:35px;
	margin-top:5px;
}
#motAsso
{
	width:272px;
	min-height:90px;
}
#figureArticles
{
	max-height:330px;
	margin:0;
	margin-top:30px;
}
#legendArticles
{
	width:300px;
	height:30px;
	line-height:30px;
}
footer
{
	width:330px;
	height:195px;
}
/* Page Connect */
#fieldsetLogin
{
	width:260px;
	height:240px;
	margin-top:30px;
}
/* Page Contact */
#boxContact
{
	width:95%;
	height:480px;
}
/****************/

}


/* Smartphones paysage principalement *******************************************/
/* Certaines tablettes en portrait */
@media screen and (min-width: 481px) and (max-width: 640px){

#blocHeader
{
	width:480px;
}
#logoTOP
{
	width:100%;
	margin-top:10px;
}
#logoDiocese
{
	display:none;
}
#content
{
	width:480px;
    min-height: 700px;
    display:flex;
	flex-wrap: wrap;
}
article
{
	width:480px;
	min-height:800px;
}
aside
{
	width:480px;
	min-height:700px;
}
h1
{
	width:100%;
	font-size:20px;
	margin-top:10px;
	text-align:center;
	font-style: italic;
}
h2
{
	margin:0;
	font-size:16px;
	font-style: italic;
}
nav
{
	width:100%;
	height:85px;
}
.menu
{
	width:90px;
	height:35px;
	margin-top:5px;
}
#titreRubrique
{
	width:100%;
	height:30px;
	line-height:30px;
}
#motAsso
{
	width:422px;
	min-height:90px;
}
#figureArticles
{
	max-height:450px;
	margin:0;
	margin-top:30px;
}
#legendArticles
{
	width:450px;
	height:30px;
	line-height:30px;
}
footer
{
	width:480px;
	height:130px;
}
/* Page Contact */
#boxContact
{
	width:90%;
	height:480px;
}
/****************/
	

}

/* Smartphones en Paysage ************************************************************************/
/* Tablettes en Portrait */
@media screen and (min-width: 641px) and (max-width: 800px){

#blocHeader
{
	width:640px;
}
#logoTOP
{
	float:left;
	margin-top:10px;
}
#logoDiocese
{
	position:absolute;
	float:right;
	margin-left:-65px;
	margin-top:10px;
}
#content
{
	width:640px;
    min-height: 700px;
    display:flex;
	flex-wrap: wrap;
}
article
{
	width:640px;
	min-height:800px;
}
aside
{
	width:640px;
	min-height:700px;
}
h1
{
	width:100%;
	font-size:20px;
	margin-top:10px;
	text-align:center;
	font-style: italic;
}
h2
{
	margin:0;
	font-size:16px;
	font-style: italic;
}
nav
{
	width:100%;
	height:85px;
}
.menu
{
	width:125px;
	height:35px;
	margin-top:5px;
}
#motAsso
{
	width:582px;
	min-height:90px;
}
#figureArticles
{
	max-height:600px;
	margin:0;
	margin-top:30px;
}
#legendArticles
{
	width:600px;
	height:30px;
	line-height:30px;
}
footer
{
	width:640px;
	height:130px;
}
/* Page Contact */
#boxContact
{
	width:85%;
	height:480px;
}
/****************/

	
}

/* Tablettes en mode Portrait + Tablettes en mode Paysage *********************************************/
@media screen and (min-width: 801px) and (max-width: 1025px){

#blocHeader
{
	width:800px;
}
#logoTOP
{
	float:left;
	margin-top:10px;
}
#logoDiocese
{
	position:absolute;
	float:right;
	margin-top:10px;
}
#content
{
	width:800px;
    min-height: 700px;
    display:flex;
	flex-wrap: wrap;
}
article
{
	width:560px;
	min-height:800px;
}
aside
{
	width:210px;
	min-height:700px;
}
h1
{
	width:100%;
	font-size:24px;
	margin-top:10px;
	text-align:center;
	font-style: italic;
}
h2
{
	margin:0;
	font-size:18px;
	font-style: italic;
}
nav
{
	width:100%;
	height:85px;
}
.menu
{
	width:135px;
	height:35px;margin-top:5px;
}
#motAsso
{
	width:532px;
	min-height:90px;
}
#figureArticles
{
	max-height:520px;
	margin:0;
	margin-top:30px;
}
#legendArticles
{
	width:550px;
	height:30px;
	line-height:30px;
}
footer
{
	width:800px;
	height:130px;
	
}
/* Page Contact */
#boxContact
{
	width:85%;
	height:480px;
}
/****************/


}


/* Destkop dont 1366x768 majoritairement utilisé *******************************************/
/* Certaines tablettes en mode paysage comme Galaxy TAB 800x1280 */ 
@media screen and (min-width: 1026px) and (max-width: 1369px){

#blocHeader
{
	width: 1000px;
}
#logoTOP
{
	float:left;
	margin-top:10px;
}
#logoDiocese
{
	position:absolute;
	float:right;
	margin-left:65px;
	margin-top:10px;
}
#content
{
	width: 1000px;
    min-height: 700px;
    display:flex;
	flex-wrap: wrap;
}
article
{
	width:760px;
	min-height:800px;
}
aside
{
	width:210px;
	min-height:700px;
}
h1
{
	width:100%;
	font-size:28px;
	margin-top:10px;
	text-align:center;
	font-style: italic;
}
h2
{
	margin:0;
	font-size:18px;
	font-style: italic;
}
nav
{
	width:100%;
	height:35px;
}
.menu
{
	width:102px;
	height:35px;
}
#motAsso
{
	width:732px;
	min-height:90px;
}
#figureArticles
{
	max-height:520px;
	margin:0;
	margin-top:30px;
}
#legendArticles
{
	width:750px;
	height:30px;
	line-height:30px;
}
footer
{
	width: 1000px;
	height:130px;
	
}
/* Page Contact */
#boxContact
{
	width:70%;
	height:480px;
}
/****************/


}


/* DesktopGrand écrans *********************************************************************/
@media screen and (min-width: 1370px){

#blocHeader
{
	width: 1200px;
}
#logoTOP
{
	float:left;
	margin-top:10px;
}
#logoDiocese
{
	position:absolute;
	float:right;
	margin-left:65px;
	margin-top:10px;
}
#content
{
	width: 1200px;
    min-height: 700px;
    display:flex;
	flex-wrap: wrap;
}
article
{
	width:960px;
	min-height:800px;
}
aside
{
	width:210px;
	min-height:700px;
}
h1
{
	width:100%;
	font-size:28px;
	margin-top:20px;
	text-align:center;
}
h2
{
	font-size:18px;
}
nav
{
	width:100%;
	height:35px;
}
.menu
{
	width:115px;
	height:35px;
}
#motAsso
{
	width:932px;
	min-height:90px;
}
#figureArticles
{
	max-height:520px;
	margin:0;
	margin-top:30px;
}
#legendArticles
{
	width:850px;
	height:30px;
	line-height:30px;
}
footer
{
	width: 1200px;
	height:130px;
}
/* Page Contact */
#boxContact
{
	width:60%;
	height:480px;
}
/****************/


}