/* CSS Document */

/* Media Queries pour les ordinateurs de bureau */
@media only screen and (min-width: 769px) {
    /* Styles spécifiques pour les ordinateurs de bureau */

#mobile-header {
    display: none; /* Hide by default */
    position: relative; /* For positioning text relative to image */
}

#mobile-header img {
    width: 100%; /* Fit image to screen width */
    height: auto; /* Maintain aspect ratio */
}

.header-text {
    position: absolute; /* Position text absolutely */
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Center perfectly */
    color: white; /* Text color */
    text-align: center; /* Center text */
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background for readability */
    padding: 10px;
    border-radius: 5px;
    width: 80%; /* Adjust width to fit nicely */
}	
	
html {
    font-size: 62%;
}
html, body {
 margin:0;
 padding:0;
 }
body {
	background-image: url(images/fd.jpg);
	background-repeat: repeat-x;
	background-position: top;
	margin: 0;
	padding:0;
	font-family: "Trebuchet MS", Arial, sans-serif, Helvetica;
	background-color: #E7E5E0;
	font-size: 14px;
	font-size: 1.4rem;
	background-color: #FFFFFF;
}
.mobile-header-image {
    display: none;
}
.mt0, .mtn {
    margin-top: 0;
}
.mt1, .mts {
    margin-top: 10px;
}
.mt2, .mtm {
    margin-top: 20px;
}
.mt3, .mtl {
    margin-top: 30px;
}
.mr0, .mrn {
    margin-right: 0;
}
.mr1, .mrs {
    margin-right: 10px;
}
.mr2, .mrm {
    margin-right: 20px;
}
.mr3, .mrl {
    margin-right: 30px;
}
.mb0, .mbn {
    margin-bottom: 0;
}
.mb1, .mbs {
    margin-bottom: 10px;
}
.mb2, .mbm {
    margin-bottom: 20px;
}
.mb3, .mbl {
    margin-bottom: 30px;
}
.ml0, .mln {
    margin-left: 0;
}
.ml1, .mls {
    margin-left: 10px;
}
.ml2, .mlm {
    margin-left: 20px;
}
.ml3, .mll {
    margin-left: 30px;
}
.pt0, .ptn {
    padding-top: 0;
}
.pt1, .pts {
    padding-top: 10px;
}
.pt2, .ptm {
    padding-top: 20px;
}
.pt3, .ptl {
    padding-top: 30px;
}
.pr0, .prn {
    padding-right: 0;
}
.pr1, .prs {
    padding-right: 10px;
}
.pr2, .prm {
    padding-right: 20px;
}
.pr3, .prl {
    padding-right: 30px;
}
.pr4, .prl {
    padding-right: 40px;
}
.pb0, .pbn {
    padding-bottom: 0;
}
.pb1, .pbs {
    padding-bottom: 10px;
}
.pb2, .pbm {
    padding-bottom: 20px;
}
.pb3, .pbl {
    padding-bottom: 30px;
}
.pl0, .pln {
    padding-left: 0;
}
.pl1, .pls {
    padding-left: 10px;
}
.pl2, .plm {
    padding-left: 20px;
}
.pl3, .pll {
    padding-left: 30px;
}
.relative {
    position: relative;
}
.center {
    margin-left: auto;
    margin-right: auto;
}
.txtleft {
    text-align: left;
}
.txtright {
    text-align: right;
}
.txtcenter {
    text-align: center;
}
.txtjustify {
    text-align: justify;
}
	
.titre-paroisse {
    transform: translateY(-40px);
}

.clear {
    clear: both;}
	
#photoHt {
	background-image: url(images/photoHt.jpg);
	background-repeat: no-repeat;
	background-position: top;
	height: 49px;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
	padding-top: 320px;
	font-size: 40px;
	font-size: 4rem;
	color: #FFFFFF;
	font-family: Georgia, "Times New Roman", Times, serif;
	width: 1060px;
}
	
#photoHt .txt2 {
	font-size: 50px;
	font-size: 5rem;
	line-height: 10px;
	line-height: 1rem;
}

#mobile-header {
    display: none; /* Masquer par défaut */
}

#photoBas {
	background-image: url(images/photoBas.jpg);
	background-repeat: no-repeat;
	background-position: top;
	padding-bottom: 0px;
    width: 1060px;
	margin: 0 auto;
}
	
#contener {
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #C8C3BF;
	margin-left: auto;
    margin-right: auto;
	padding-top:20px;
}
	
#menuG {
	width: 120px;
	padding-bottom: 10px;
	float: left;
	color: #665a51;
	font-size: 12px;
	text-transform: none;
	font-variant: normal;
	text-decoration: none;
	border-right-style: dotted;
	border-right-width: 1px;
	border-right-color: #665A51;
	margin-right: 5px;
}
#menuG a{
	color: #665a51;
	text-transform: none;
	font-variant: normal;
	text-decoration: none;
}
#menuG a:hover{
	color: #A76760;
}

#menuG ul{
	padding-right: 10px;
	padding-left: 10px;
}
#menuG li {
	padding-top: 10px;
	padding-bottom: 10px;
}
#menuG li + li{
	border-top-style: solid;
	border-top-width: 1px;
	border-top-color: #C8C3BF;
}
#contenu {
    padding-bottom: 0px;
    width: 1060px;
    margin: 0 auto;
}

.txt {
	color: #000000;
}
.txt a{
	color: #000000;
    text-decoration: none;
	font-weight: bold;
}
.txt a:hover{
	color:#905450;
	font-weight: none;
}
.txt1 {
	font-size: 12px;
	font-size: 1.2rem;
	color: #000000;
	font-weight: normal;
}
.txt1 a:link{
	color: #000000;
}
.txt1 a:hover{
	color:#905450;
}

.txt2 {
	font-size: 18px;
	font-size: 1.8rem;
}
.txt3   {
	font-size: 12px;
	font-size: 1.2rem;
}
.txt3 a{
	color:#000;
}
.txt3 a:hover{
	color:#905450;
}
.legende  {
	font-size: 1rem;
	font-size: 10px;
	font-style: italic;
	color: #665a51;
}
.photo  {
	border: 1px solid #000;
}
.photoL  {
	border: 1px solid #000;
	float: left;
	margin-right: 10px;
}
	
#contenu #col1 {
	float: left;
	width: 400px;
	/*background-color: #E7E5E0;*/
	
	margin-right: 20px;
	padding-bottom: 30px;	/*padding-left: 15px;
	border: 1px solid #C8C3BF;*/
}
.margeG {
	float: right;
	margin-bottom: 10px;
	margin-left: 10px;
}

#contenu #colActu {
	float:left;
	/*background-color: #CA9B89;*/
	margin: 0px;
	padding-bottom: 70px;
	/*background-image: url(images/actu.png);*/
	background-repeat: no-repeat;
	background-position: bottom;
	border: 1px solid black;
}
#contenu  .col2L {
	background-color: #E7E5E0;
}
#contenu  #col3R {
	float: left;
	width: 300px;
	/*font-size: 0.8rem;*/
	margin-left: 10px;
}
#contenu #col4 {
	float: left;
	/*font-size: 0.8rem;*/
	padding-right: 20px;
	padding-bottom: 25px;
	padding-left: 20px;
	background-color: #E7E5E0;
	border: 1px solid #C8C3BF;
}
#contenu #col7 {
	/*font-size: 0.8rem;*/
	border: 1px solid #C8C3BF;
	background-repeat: no-repeat;
	background-position: bottom;
	padding-bottom: 50px;
	width: 805px;
	float: left;
}
#contenu #col5 {
	float: left;
	width: 425px;
	margin-right: 10px;
	background-color: #E7E5E0;
	border: 1px solid #C8C3BF;
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	margin-top: 0px;
	margin-bottom: 20px;
}
#contenu #col6 {
	float: left;
	padding-top: 20px;
	padding-bottom: 20px;
	margin-right: 10px;
	width: 380px;
}
#contenu #col8 {
    float: left;
    /*background-color: #bf8e78;*/
    padding-top: 0px;
    padding-right: 10px;
    padding-bottom: 0px;
    padding-left: 10px;
    width: 480px;
}
#contenu #col8R {
	float: left;
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 0px;
	padding-left: 10px;
	width: 480px;
}
#contenu  #col9 {
	float:left;
	margin: 0px;
	padding-bottom: 30px;
	padding-bottom: 100px;
	width: 296px;
	padding-top: 20px;
}	
#contenu #col10 {
	/*font-size: 0.8rem;*/
	padding-bottom: 5px;
	width: 800px;
	float: left;
}	
h1 {
	font-size: 24px;
	font-size: 2.4rem;
	color: #A76760;
	float:none;
	line-height: 18px;
	font-weight: normal;
	text-transform: uppercase;
	margin-top:0.9rem;
}
#contenu ul {
	text-transform: none;
	font-variant: normal;
}
h2 {
	font-size: 20px;
	font-size: 2rem;
	clear: both;
	float: none;
	color: #665a51;
	margin-top:0.7rem;
}
h3 {
	font-size: 16px;
	font-size: 1.6rem;
	margin-bottom: 0.3rem;
	margin-top:0.5rem;
}
h4 {
	font-size: 14px;
	font-size: 1.4rem;
	margin-bottom: 0.2rem;
	margin-top:0.4rem;
	text-align: center;
}
.couleur1{
	color: #A76760;
	}
.ligne {
	border-bottom: 1px dotted #847D85;
	padding-top: 10px;
	width: 100%;
	padding-bottom: 10px;
}
#footer {
	box-sizing: border-box; /* Ensures padding does not affect the total width */
    text-align: center; /* Centrer le texte */
    font-size: 14px; /* Taille de la police pour une meilleure lisibilité */
    color: #333; /* Couleur du texte pour un bon contraste */
	padding-bottom: 0px;
    width: 1060px;
    margin: 0 auto;
}
	
#footer p {
    margin: 10px 0; /* Espacement entre les paragraphes */
}

#footer a {
    color: #bf8e78; /* Couleur des liens */
    text-decoration: none; /* Enlever la soulignement par défaut des liens */
}

#footer a:hover {
    text-decoration: underline; /* Ajouter une soulignement au survol pour indiquer qu'il s'agit de liens */
}

#col7 #col6 ul li {
	font-variant: normal;
}
#contenu #img {
display:block;
width:auto;
margin-left:auto;
margin-right:auto;
}
	
/* Par défaut, pour les écrans plus grands */
.pdf-container {
    width: 480px;
    height: 640px;
}

/* Embedding PDF to fill the container */
#pdf-embed {
    width: 100%;
    height: 100%;
}

.hidden-desktop {  /* Use class selector */
   	display: none;
}
	
.centered-table {
margin-left: auto;
margin-right: auto;
}
	
/* Ajout de la règle CSS pour centrer le diaporama */
#slideShowImages {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: fit-content; /* S'assure que le conteneur a une largeur adaptée au contenu */
}
/* Styles pour image recto/verso */	
.photo-container {
     text-align: center;
     margin-top: 20px;
}
        
#photo {
     cursor: pointer;
	
}
	
}


/* Styles spécifiques pour les appareils mobiles */
@media only screen and (max-width: 768px) {
    
	#photoHt {
            display: none;
     }
	
    #mobile-header {
        display: block; /* Show on mobile */
    }
	
	#mobile-header a {
    	text-decoration: none; /* Enlever la soulignement par défaut des liens */
	}

	#mobile-header a:hover {
		text-decoration: underline; /* Ajouter une soulignement au survol pour indiquer qu'il s'agit de liens */
	}

    .nav-container-mobile {
        display: block;
        background-color: #bf8e78;
        position: relative; /* Relative to place it just below the image */
        width: 100%;
        z-index: 1000;
        max-height: 100vh;
        overflow-y: auto;
        margin-top: 10px; /* Space between image and menu */
    }
	
	#menuG {
            display: none;
    }
	
	.txt2 {
	font-size: 18px;
	font-size: 1.8rem;
	}
	
	.hidden-mobile {  /* Use class selector */
        display: none;
    }
	
     #menuG ul {
        display: block; /* Affichage vertical */
    }

    #menuG li {
        display: block; /* Chaque élément de liste sur une nouvelle ligne */
        margin: 5px 0; /* Espacement entre les éléments */
    }
    #contenu {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    
    #colActu,
	#col8	{
        background-color: #bf8e78;
    }

    #contenu #col1, 
    #contenu #colActu {
        width: 100%;
        float: none; /* Ensure they take full width */
        padding: 10px; /* Add padding for better spacing */
        box-sizing: border-box; /* Ensure padding does not affect total width */
    }

    #contenu #col1 {
        order: 1; /* S'assurer que col1 apparaît en premier */
    }

    #contenu #colActu,
	#contenu #col8R	{
        order: 2; /* S'assurer que colActu apparaît en second */
    }
	
	/* Footer styles for mobile */
    #footer {
        font-size: 12px; /* Ajuster la taille de la police pour les petits écrans */
        padding: 15px; /* Réduire le padding pour les petits écrans */
		text-align: center; /* Center the text for better appearance */
    }
	
	/* Réduire la taille des liens dans le footer pour les mobiles */
    
	#footer a.mailto {
        font-size: 10px; /* Réduire la taille de la police pour les liens mailto */
    }

	#footer a {
        text-decoration: none !important; /* Forcer la suppression de la soulignement des liens */
    }

    #footer a:hover {
        text-decoration: underline !important; /* Forcer la soulignement au survol pour indiquer qu'il s'agit de liens */
    }
	
    /* Ajustements supplémentaires pour une meilleure lisibilité sur mobile */
    #body {
		max-width: 100%;
        font-size: 16px; /* Taille de police adaptée pour la lecture sur mobile */
        line-height: 1.5; /* Espacement des lignes pour améliorer la lisibilité */
        padding: 0;
        margin: 0;
    }

    /* Styles pour des liens et des boutons plus grands sur mobile */
    a, button {
        padding: 10px;
        font-size: 16px;
    }

    /* Assurer que les images s'ajustent bien à la largeur de l'écran */
    img {
        max-width: 100%;  /* Corrected max-width to 100% */
        height: auto;
    }

    /* Optimiser les marges et paddings pour un meilleur espacement */
    .content {
        padding: 15px;
    }

	/* Ensure the title appears below the menu on mobile */
    .site-title {
        display: none; /* Initially hidden */
        text-align: center;
        font-size: 18px;
        padding: 10px 0;
        background-color: #f1f1f1; /* Optional: background color for the title */
        margin: 0;
    }

    .nav-container-mobile + .site-title {
        display: block; /* Show title after the mobile menu */
    }
	
    .nav-container-outer {
    display: none; /* Masquer le menu desktop sur les petits écrans */
    }
	
	.pdf-container {
        width: 100%;
        height: auto; /* La hauteur sera ajustée pour conserver le ratio */
    }

    #pdf-embed {
        width: 100%;
        height: 100vh; /* Utiliser la hauteur de la vue pour une meilleure visualisation */
    }
	
    h1 {
        font-size: 1.5rem; /* Slightly larger font size for mobile */
		color: #A76760;
        line-height: 1.4; /* Increase line-height for better readability */
        margin-top: 1rem; /* Adjust top margin if needed */
        text-align: center; /* Center the text for better appearance */
    }
	
	h2 {
	font-size: 1.4rem;
	color: #665a51;
	margin-top:0.5rem;
}
	
	h3 {
	font-size: 16px;
	font-size: 1.3rem;
	margin-bottom: 0.3rem;
	margin-top:0.5rem;
	text-align: center; /* Center the text for better appearance */
}
	h4 {
	font-size: 14px;
	font-size: 1.4rem;
	margin-bottom: 0.2rem;
	margin-top:0.4rem;
}
	ul, li {
	margin-left: 5px;
	padding: 0;
}
    .row {
    flex-direction: column;
}
	#col1 {
    order: 1;
}
	#col8 {
    order: 2;
}
	iframe {
    width: 100%;
    height: auto;
}
	.social-media {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}
	.facebook-icon {
    width: 30px; /* Adjust size as needed */
    height: auto;
}
    .social-media {
    position: absolute;
    right: 10px;
    top: 60px; /* Adjust based on your menu height */
}
	.centered-table {
	margin-left: auto;
	margin-right: auto;
}
.menu-text {
    margin-left: 8px; /* Ajustez l'espacement selon vos besoins */
    font-size: 16px;  /* Ajustez la taille selon vos préférences */
	color: white; 
}
	/* Ajout de la règle CSS pour centrer le diaporama */
	#slideShowImages {
		display: block;
		margin-left: auto;
		margin-right: auto;
		width: fit-content; /* S'assure que le conteneur a une largeur adaptée au contenu */
}
}