:root {
    --body-background: url(../images/background.JPG);

    --header-background: linear-gradient(90deg, rgba(255,102,0,1) 0%, rgba(255,192,0,1) 50%, rgba(255,102,0,1) 100%) !important;
    --header-background-hover: rgba(255, 255, 255, 0.466);

    --menu-font: 'Quicksand', sans-serif;
    --menu-font-size: 14px;
    --menu-font-weight: none;
    --menu-color: #ffffff;

    --body_page-background: rgba(255,255,255,0.85);
    --body_page-font: 'Quicksand', serif;
    --body_page-font-size: 16px;
    --body_page-font-weight: none;
    --body_page-color: #605957;

    --fil_ariane-font: 'Cinzel', serif;
    --fil_ariane-font-size: 18px;
    --fil_ariane-font-weight: bold;
    --fil_ariane-color: #0033ff;

    --footer-background: #ff6600 !important;
    --footer-font: 'Quicksand', sans-serif;
    --footer-font-size: 14px;
    --footer-font-weight: none;
    --footer-color: #ffffff;

    --title_colRight-color: #8B0000 !important;
    --link_colRight-color: #8B0000 !important;
    --underLink_colRight-color: #006621 !important;

    --link-color: #006621 !important;
}

body{
    background-image: var(--body-background);
    background-position: center center;
    background-repeat: no-repeat; 
    background-attachment: fixed;
    background-size: cover;
}

header{
    display: flex;
    align-items: center;
    flex-direction: row;
    border-bottom: 1px solid black;
    background: var(--header-background);
}

main{
    min-height: 100vh;
    width: 70%;
    margin:auto;
}

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

#content a
{
    color : var(--link-color);
}

.right0
{
    right: auto;
}

.displayNone
{
    display: none;
}

.displayNoneResponsive
{
    display: block;
}

/*##############################################################################
########################## Interface g?n?rale ##################################
##############################################################################*/

.clearFloat {
    clear:both;
    font-size:1px;
}

.asterisque {
    color:#FF0000;
}
.fil_ariane{
	float:left;
    margin-bottom:10px;
	width:auto;
	border-bottom:1px solid #0033ff;
    font-family:var(--fil_ariane-font);
    font-size: var(--fil_ariane-font-size);
    font-weight: var(--fil_ariane-font-weight);
    color:var(--fil_ariane-color);
}

.btnPage {
	float:left;
	margin-bottom:10px;
	width:34px;
	text-align:right;
}

.pagination {
	text-align:center;
	padding:20px;
	font-size:14px;
}

.erreur {
	background:#FF0000;
	color:#FFFFFF;
	font-weight:bold;
	padding:2px;
	text-align:center;
	margin-bottom:10px;
}

/*################ Popup d'affichage de l'article #################*/
#pop_article {
	position:fixed;
	background:#ffffff;
	width:600px;
	/* height:400px; */
	top:50px;
	left:50%;
	margin-left:-300px;
	z-index: 500;
	color:#000000;
	display:none;
	border: 4px solid #525252;
	text-align:left;
	text-align:center;
	vertical-align:middle;
	padding-top:2px;
}

.popupFermer {
	text-align:right;
	position:absolute;
	top:2px;
	right:2px;
}


/*##############################################################################
############################## Banniere ########################################
##############################################################################*/

#banniere {
    height:200px;
	background:white; /*background:url(../images/banniere.jpg) no-repeat;*/
    margin:auto;
}

/*
#banniere {
    width:960px;
    height:263px;
	background:url(../images/banniere.jpg) no-repeat;
    margin:auto;
}

#banniereGlobe {
	width:200px;
	height:200px;
	position:relative;
	left:754px;
}

#cadreSearch {
	position:relative;
	top:35px;
	left:190px;
	width:250px;
}

#controlPlayer {
	position:relative;
	top:15px;
	left:865px;
	width:55px;
	text-align:right;
}

*/


/*##############################################################################
################################ Body Page ##########################################
##############################################################################*/

#body_page {
    padding:25px;
    background: var(--body_page-background);
    font-family: var(--body_page-font);
    font-size: var(--body_page-font-size);
    font-weight: var(--body_page-font-weight);
    color: var(--body_page-color);
}

/*##############################################################################
################################ Menu ##########################################
##############################################################################*/

header p
{
    text-align: center;
    font-family: var(--menu-font);
    font-size: var(--menu-font-size);
    font-weight: var(--menu-font-weight);
    color: var(--menu-color);
}

#boutonmenu
{
    display: none;
}

#menu
{
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
}


#menu img
{
    max-width: 600px;
}

#menu > ul li:hover ul
{
    display : block;
    position : absolute;
    border: 1px solid black;
    background: var(--header-background);
}

#menu ul a
{ 
	display:block;
    padding: 20px 8px;
    text-align: center;
    font-family:var(--menu-font);
    font-size: var(--menu-font-size);
    font-weight: var(--menu-font-weight);
    color:var(--menu-color);
}

#li_accueil a
{ 
    background: url(../images/house-solid.png) no-repeat 0px 20px;
    padding: 20px 8px 20px 30px !important;
}

#menu ul ul a
{ 
    display:block;
    padding: 8px;
    text-align: start;
    font-family:var(--menu-font); 
    font-size: var(--menu-font-size);
    font-weight: var(--menu-font-weight);
    color:var(--menu-color);
}

#menu ul
{
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    list-style-type: none;
    width: 1333px;
}

#menu ul ul
{
    display:none;
    z-index: 2;
    width: 310px;
    margin-left:-1px;
}

#menu li:hover
{
    background: var(--header-background-hover);
}

/*##############################################################################
################################ Contenu #######################################
##############################################################################*/

#content img.displayNoneResponsive
{
    max-width: 800px;
    margin-bottom: 25px;
}

#content {
    width:70%;
    text-align:justify;
    float:left;
}

.titrePage {
	margin:20px 0px;
	font-size:18px;
	text-align:center;
	font-weight:bold;
	color:#0033ff;
}


#content .lienRetour{
    text-align:center;
    /*margin-top:15px;*/
}
.bleu{
    color:#0033ff;
}
.orange{
    color:#FF6600;
}
.rouge{
    color:#ff0000;
}
.italic{
    font-style:italic;
}
.center{
    text-align:center;
}
.gras{
    font-weight:bold;
}
.legendeImage{
    font-style:italic;
    text-align:center;
	margin:10px 0px;
}

.lecteurPDF {
	border:1px dashed #CCCCCC;
	padding:5px 10px;
}
.articleMusic {
	padding-top:1px;
}

.articleMusicTitre {
    float:left;
    width:284px;
    color:#FF6600;
    font-weight:bold;
    border:1px solid #FF6600;
    height:18px;
}

.articleMusicPlayer {
    float:left;
    width:200px;
    background:#FF6600;
}

/*#########################Page des bienheureux###############################*/
#content .bienheureux{
    border:1px dashed gray;
    padding:10px;
    margin-bottom:20px;
}
#content .bienheureux .titre {
    color:#0033ff;
	margin-bottom:10px;
	font-size:14px;
	font-weight:bold;
}
#content .bienheureux img {
	float:left;
	margin:0px 10px 10px 0px;	
}

/*###################### Page des bulletins #####################################*/
#content .bulletin{
    margin-bottom:10px;
}

#content .an_bulletin{
    text-align:center;
    margin-top:20px;
}

.bulletinImg {
	float:left; 
	width:102px;
	text-align:center;
	padding:0px 10px 10px 0px;
}

.bulletinTitre {
	font-weight:bold;
	color:#FF6600;
	margin-bottom:5px;
}

.bulletinDate {
	font-weight:bold;
}

.bulletinDescription {
	margin-bottom:5px;
}

.bulletinLien {
	text-align:right;
}

/*###################### Page de contact #####################################*/
.contact_fieldset {
    padding:20px 35px;
    border:1px solid #FF6600;
    margin:auto;
    width:415px;
}
.contact_legend {
    color:#FF6600;
    font-weight:bold;
    margin:0px 0px 15px -20px;
    padding:0px 10px;
}
.contact_form label {
    display:inline;
    float:left;
    font-weight:bold;
    width:95px;
}
.contact_form input, .contact_form textarea{
    background-color:#FFFFCC;
    border:1px solid #999999;
    width:312px;
}
input.contact_form_submit {
    display:block;
    margin:20px 36px;
    width:415px;
    color:#FF6600;
    font-weight:bold;
}
input.contact_form_submit:hover {
    background-color:#CCCCCC;
}
.asterisque {
    color:#FF0000;
}
.contact_confirm {
    color:#FF6600;
    text-align:center;
    padding:10px;
}
.contact_form_msg {
    font-size:11px;
    color:#666666;
    font-style:italic;
    margin-left:100px;
}
/*###################### Page adresses centres ###############################*/
#content .centre{
    margin-bottom:20px;
}
#content .centre .nomCentre{
    text-align:center;
}
#content .centre .infoDirecteur{
    float:left;
    width:260px;
}
#content .centre .infoZelatrice{
    float:left;
    width:260px;
}
/*###################### Page calendrier ###############################*/
#content .listeEvent .titre_event{
    color:#ff6600;
    font-weight:bold;
    margin-bottom:5px;
}
/*###################### Page page.php ###############################*/
#content .article{
    margin-bottom:30px;
}
	.titreArticle {
		color:#FF6600;
		font-size:16px;
		border-bottom:1px solid #FF6600;
	}
	
	.imgBorder img {
		border:1px solid #006699;
	}

	
/*###################### Page boutique ###############################*/
#content .titre_categorie{
    text-align:center;
}

.boutique_message {
	text-align:center;
	font-weight:bold;
	color:#FF0000;
	font-size:12px;
	border:1px solid #FF0000;
	background:#DDDDDD;
	padding:5px;
}

#content #entete_tab_produit{
    border-top:1px solid #999999;
    margin-top:15px;
}
#content #liste_produit{
    margin-bottom:35px;
}
#content .code{
    width:100px;
    padding:5px;
    text-align:center;
    border:1px solid #999999;
}
#content .designation{
    width:221px;
    padding:5px;
    border:1px solid #999999;
}
#content .prix_unitaire{
    width:50px;
    padding:5px;
    text-align:center;
    border:1px solid #999999;
}
#content .observation{
    width:68px;
    padding:5px;
    border:1px solid #999999;
}

#content .produit{
   /* height:157px;*/
}
#content .categorie{
    width:220px;
    height:130px;
    padding:5px;
    margin:5px;
    float:left;
    border: 1px dashed #999999;
    color:black;
}
#content .categorie:hover{
    border: 1px solid #ff6600;
}
#content .categorie .titre {
    font-weight:bold;
}
#content .retour_boutique{
    margin:0px 0px;
    text-align:center;
}
#content .btn_commande{
    
}
/*###################### Page panier ###############################*/
#content .code_panier{
    float:left;
    text-align:center;
    width:75px;
    padding:5px;
    border-bottom:1px solid #999999;
	border-top:1px solid #999999;
    border-left:1px solid #999999;
}
#content .desc_panier{
    float:left;
    width:185px;
    padding:5px;
    border-bottom:1px solid #999999;
	border-top:1px solid #999999;
    border-left:1px solid #999999;
}
#content .quantite{
    float:left;
    width:50px;
    text-align:center;
    padding:5px;
    border-bottom:1px solid #999999;
	border-top:1px solid #999999;
    border-left:1px solid #999999;
}
#content .total_ligne{
    float:left;
    width:40px;
    text-align:center;
    padding:5px;
    border:1px solid #999999;
}
#content .suppr_ligne{
    float:left;
    width:20px;
    text-align:center;
    padding:2px;
    border-bottom:1px solid #999999;
	border-top:1px solid #999999;
    border-right:1px solid #999999;
}
#content .total{
    text-align:center;
    border:1px solid #999999;
    font-weight:bold;
}
#content .hauteur_panier{
    height:70px;
}
#content .titre_commande{
    text-align:center;
}
#content #bon_commande{
    margin:auto;
    width:484px;
}
#content .form_panier input, #content .form_panier textarea {
	float:left;
    margin-left:5px;
    width:378px;
	border:1px solid #999999;
	margin-bottom:1px;
}
#content .form_panier label{
	float:left;
    width:103px;
	text-align:right;
}

#content .btn_imprimer{
    font-style:italic;
    margin-top:15px;
    text-align:center;
}
/*############################Page impression commande########################*/
#content #body_print{
    width:463px;
}
#content #body_print .inf_perso_commande .champ{
    float:left;
    padding-right:10px;
}
#content #body_print .inf_perso_commande .ville{

}
/*##############################################################################
########################### Colonne de droite ##################################
##############################################################################*/

#colRight {
    width:25%;
    min-height: 100vh;
    margin:auto;
    float:right;
    display: flex;
    flex-direction:column;
    justify-content: space-evenly;
    list-style-type: none;
}

#colRight li a {
    color:var(--link_colRight-color);
}

#colRight li li a {
    color:var(--underLink_colRight-color);
}

#colRight .cadre{
    border-radius:24px;
    margin-bottom: 25px;
    border:1px solid #FF6600;
}

#colRight .cadre .bandeau_haut {
    height:20px;
}

#colRight .cadre .bandeau_haut .titre_bloc{
    margin-top:3px;
    display:block;
    text-align: center;
}

#colRight .cadre .texte_cadre{
    padding:10px;
    color:gray;
}

#colRight .cadre .bandeau_haut .titre_cadre{
    border-radius:24px;
    float:left;
    height:20px;
    width:100%;
    color:var(--title_colRight-color);
    font-weight:bold;
}

/*
#colRight .cadre .bandeau_haut .carre_gauche{
    width:10px;
    height:20px;
    background-image:url('../images/paveHeaderLeft.gif');
    float:left;
}

#colRight .cadre .bandeau_haut .carre_droit{
    width:10px;
    height:20px;
    background-image:url('../images/paveHeaderRight.gif');
    float:left;
}

#colRight .cadre .foot {
    height:10px;
}

#colRight .cadre .bas_gauche{
    width:10px;
    height:10px;
    background-image:url('../images/paveFooterLeft.gif');
    background-repeat:no-repeat;
    float:left;
    font-size:1px;
}

#colRight .cadre .bas{
    float:left;
    border-bottom:1px solid #FF6600;
    height:9px;
    width:172px;
    font-size:1px;
}

#colRight .cadre .bas_droit{
    width:10px;
    height:10px;
    background-image:url('../images/paveFooterRight.gif');
    background-repeat:no-repeat;
    float:left;
    font-size:1px;
}
*/
/*##############################################################################
############################# Pied de page #####################################
##############################################################################*/

footer
{
    display:block;
    border: 1px solid black;
    background: var(--footer-background);
}

footer #contact
{ 
    display:flex;
    flex-direction:row;
    align-items: center;
    justify-content: center;
}

footer p
{
    padding: 20px;
    text-align: center;
    font-family: var(--footer-font);
    font-size: var(--footer-font-size);
    font-weight: var(--footer-font-weight);
    color: var(--footer-color);
}

/*
#footer {
    width:960px;
    height:55px;
    background:url(../images/footerFondTop.png) repeat-y;
    margin:auto;
}
#footerContent {
    width:960px;
    height:45px;
    background:url(../images/footerFondBottom.png) no-repeat bottom;
    text-align:center;
    padding-top:10px;
    color:#FFFFFF;
    margin:auto;
}
#footerContent a {
    color:#FFFFFF;
}
#footerContent a:hover {
    color:#006699;
}
*/

/*##############################################################################
######################### Calendrier des fetes #################################
##############################################################################*/
.calendar {
    width:90%;
    text-align:center;
    padding:10px;
}
.calendar_header {
    width:100%;
    /*border-bottom:1px solid #3399CC;*/
}
.calendar_header_btn {
    width:11px;
    padding:4px;
}
.calendar_header_month {
    text-align:center;
}
a.calendar_prev:link, a.calendar_prev:visited, a.calendar_prev:active {
    background:url(../images/calendar-prev.png) no-repeat 0px 0px;
    text-decoration:none;
    width:11px;
    height:12px;
    display:block;
}
a.calendar_prev:hover {
    background:url(../images/calendar-prev.png) no-repeat 0px -12px;
}
a.calendar_next:link, a.calendar_next:visited, a.calendar_next:active {
    background:url(../images/calendar-next.png) no-repeat 0px 0px;
    text-decoration:none;
    width:11px;
    height:12px;
    display:block;
}
a.calendar_next:hover {
    background:url(../images/calendar-next.png) no-repeat 0px -12px;
}
.calendar_form select {
    background-color:#FFFFFF;
    font-size:10px;
    color:#3399CC;
}
.calendar_body {
    margin:auto;
}
.calendar_body_td {
    width:21px;
    height:21px;
    text-align:center;
}
a.calendar_body_blank {
    background:url(../images/calendar-td.gif) no-repeat 0px 0px;
    width:21px;
    height:18px;
    color:#999999;
    display:block;
    text-decoration:none;
    padding-top:3px;
}
a.calendar_body_blank:hover {
    background:url(../images/calendar-td.gif) no-repeat 0px -21px;
    color:#FFFFFF;
}
a.calendar_body_valid {
    background:url(../images/calendar-valid.gif) no-repeat 0px 0px;
    width:21px;
    height:18px;
    color:#999999;
    display:block;
    text-decoration:none;
    padding-top:3px;
}
a.calendar_body_valid:hover {
    background:url(../images/calendar-valid.gif) no-repeat 0px -21px;
    color:#FFFFFF;
}
a.calendar_body_today {
    color:#FF0000;
	font-weight:bold;
}
.calendar_manif_liste_content {
    border:1px solid #CCCCCC;
    text-align:left;
    margin:0;
    padding:0px;
    padding-left:20px;
}
.calendar_manif_liste_content li {
    list-style-type:square;
    list-style-position:outside;
    padding:2px 5px 2px 5px;
}


/*##############################################################################
######################### Page des méditations #################################
##############################################################################*/
#meditationAjax {
	width:300px; 
	height:220px; 
	border:1px solid #FF6600;
	padding:20px;
	margin:auto;
	font-size:14px;
}

/*##############################################################################
######################### Page des recherches ##################################
##############################################################################*/
.formSearch_button {
	vertical-align:middle;
	margin-left:5px;
}

.formSearch_input {
	border:1px solid #FF6600;
	width:120px;
	height:11px;
	font-size:11px;
	color:#666666;
}

.search_keyword {
	font-weight:bold;
	background:#FFFF66;
}

.search_liste li {
	list-style:square;
	margin-bottom:10px;
}

	.search_titre {
		color:#FF6600;
		font-weight:bold;
	}

	a.search_ensavoirplus {
		color:#666666;
		font-style:italic;
		padding-top:10px;
	}
	
	a.search_ensavoirplus:hover {
		color:#FF6600;
	}



/*##############################################################################
######################### Page du cadran ##################################
##############################################################################*/
#cadranImg {
	text-align:center;
	margin-bottom:15px;
	height:478px;
}

.cadranInitiales {
	position:absolute;
	background:#fff;
	padding:0px 3px;
	color:#FF3300;
	font-size:14px;
	font-weight:bold;
}

.formCadran {
	border:1px solid #666666;
	width:150px;
	background:#CCCCCC;
}

.commentaire {
	border:1px solid #993300;
	color:#993300;
	padding:5px;
	margin-bottom:15px;
}

.protecteur {
	border:1px solid #0033FF;
	color:#0033FF;
	padding:5px;
	margin-bottom:15px;
}

.cadranErreur {
	background:#FF0000;
	color:#FFFFFF;
	font-weight:bold;
	text-align:center;
	padding:2px;
	margin-bottom:15px;
}


/*##############################################################################
########################### Page du diaporama ##################################
##############################################################################*/
.diaporama_item {
	width:160px;
	height:160px;
	display:block;
	float:left;
	margin:0px 5px 5px 0px;
	border:1px solid #CCCCCC;
}

.diaporama_photo {
	height:160px;
	width:160px;
	text-align:center;
	vertical-align:middle;
}

/*##############################################################################
########################### RESPONSIVE ##################################
##############################################################################*/

@media (max-width:1800px)
{ 
    .right0
    {
        right: 0;
    }

    #content img.displayNoneResponsive
    {
        max-width: 575px;
        margin-bottom: 25px;
    }
}

@media (max-width:1170px)
{     
    /*----------Config----------*/

    .right0
    {
        left:0;
    }

    .displayNone
    {
        display: block;
    }

    .displayNoneResponsive
    {
        display: none;
    }

    /*----------Menu----------*/

    #menu
    {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: start;
        width: 100%;
    }

    #menu > ul li:hover ul
    {
        transform: translateX(0);
        margin-left:310px;
    }

    #menu ul a
    { 
        display:block;
        padding: 8px;
        text-align: start;
        font-family:var(--menu-font);
        font-size: var(--menu-font-size);
        font-weight: var(--menu-font-weight);
        color:var(--menu-color);
    }

    #li_accueil a
    { 
        background: none;
        padding: 8px !important;
    }

    #menu ul ul a
    { 
        display:block;
        padding: 8px;
        text-align: start;
        font-family:var(--menu-font);
        font-size: var(--menu-font-size);
        font-weight: var(--menu-font-weight);
        color:var(--menu-color);
    }

    #menu ul
    {
        border: 1px solid black;
        width: 310px;
        display: block;
        position:absolute;
        background: var(--header-background);
        transform: translateX(-200%);
        transition: transform 0.5s ease-in-out;
        margin-top: 352px;
        margin-left:197px;
        list-style:none;
        z-index: 1;
    }

    #menu ul ul
    {
        display: block;
        position:absolute;
        width: 310px;
        border: 1px solid black;
        background: var(--header-background);
        transform: translateX(-200%);
        transition: transform 0.5s ease-in-out;
        margin-top: -35px;
        margin-left:280px;
        list-style:none;
        z-index: 2;
    }

    /*----------Bouton du menu----------*/

    #boutonmenu-span
    {
        position:absolute;
        left:calc(25.5px + 2px); 
        top:calc(35.5px + 60px/2 - 13px);
        width: 59px;
        height: 10px;
        background-color:var(--menu-color);
        border-radius: 24px;
        transition: transform 0.5s ease-in-out;
        z-index: 0;
    }

    #boutonmenu-span::before
    {
        content:"";
        position:absolute; 
        top:calc(-27px + 5px - 4px);
        left:0px;
        width: 59px;
        height: 10px;
        background-color: var(--menu-color);
        border-radius: 24px;
        transition: transform 0.5s ease-in-out;
        z-index: 0;
    }

    #boutonmenu-span::after
    {
        content:"";
        position:absolute;
        top:calc(27px - 2px);
        left:0px;
        width: 59px;
        height: 10px;
        background-color:var(--menu-color);
        border-radius: 24px;
        transition: transform 0.5s ease-in-out;
        z-index: 0;
    }

    #boutonmenu
    {
        display: block;
        opacity:0;
        position: relative;
        width: 60px;
        height: 60px; 
        margin:27px;  
        z-index: 1;
    }

    #boutonmenu:checked ~ span
    {
        transform: rotate(90deg);
        transition: transform 0.5s ease-in-out;
    }
    
    /*----------Body Page----------*/

    #content 
    {
        width:100%;
        text-align:justify;
    }
        
    #colRight 
    {
        width:100%;
        margin:auto;
        display: flex;
        flex-direction:column;
        justify-content: space-evenly;
    }  

    /*----------Footer----------*/

    footer #contact
    { 
        display:flex;
        flex-direction:column;
        align-items: center;
        justify-content: center;
    }
}