@import url('https://fonts.cdnfonts.com/css/helvetica-neue-5');
	
	body { font-family: 'Helvetica Neue', sans-serif; 
	/* background-color: whitesmoke; */
	background-image: linear-gradient(55deg, rgba(208, 208, 208, 0.03) 0%, rgba(208, 208, 208, 0.03) 20%,rgba(55, 55, 55, 0.03) 20%, rgba(55, 55, 55, 0.03) 40%,rgba(81, 81, 81, 0.03) 40%, rgba(81, 81, 81, 0.03) 60%,rgba(208, 208, 208, 0.03) 60%, rgba(208, 208, 208, 0.03) 80%,rgba(191, 191, 191, 0.03) 80%, rgba(191, 191, 191, 0.03) 100%),linear-gradient(291deg, rgba(190, 190, 190, 0.02) 0%, rgba(190, 190, 190, 0.02) 14.286%,rgba(105, 105, 105, 0.02) 14.286%, rgba(105, 105, 105, 0.02) 28.572%,rgba(230, 230, 230, 0.02) 28.572%, rgba(230, 230, 230, 0.02) 42.858%,rgba(216, 216, 216, 0.02) 42.858%, rgba(216, 216, 216, 0.02) 57.144%,rgba(181, 181, 181, 0.02) 57.144%, rgba(181, 181, 181, 0.02) 71.42999999999999%,rgba(129, 129, 129, 0.02) 71.43%, rgba(129, 129, 129, 0.02) 85.71600000000001%,rgba(75, 75, 75, 0.02) 85.716%, rgba(75, 75, 75, 0.02) 100.002%),linear-gradient(32deg, rgba(212, 212, 212, 0.03) 0%, rgba(212, 212, 212, 0.03) 12.5%,rgba(223, 223, 223, 0.03) 12.5%, rgba(223, 223, 223, 0.03) 25%,rgba(11, 11, 11, 0.03) 25%, rgba(11, 11, 11, 0.03) 37.5%,rgba(86, 86, 86, 0.03) 37.5%, rgba(86, 86, 86, 0.03) 50%,rgba(106, 106, 106, 0.03) 50%, rgba(106, 106, 106, 0.03) 62.5%,rgba(220, 220, 220, 0.03) 62.5%, rgba(220, 220, 220, 0.03) 75%,rgba(91, 91, 91, 0.03) 75%, rgba(91, 91, 91, 0.03) 87.5%,rgba(216, 216, 216, 0.03) 87.5%, rgba(216, 216, 216, 0.03) 100%),linear-gradient(312deg, rgba(113, 113, 113, 0.01) 0%, rgba(113, 113, 113, 0.01) 14.286%,rgba(54, 54, 54, 0.01) 14.286%, rgba(54, 54, 54, 0.01) 28.572%,rgba(166, 166, 166, 0.01) 28.572%, rgba(166, 166, 166, 0.01) 42.858%,rgba(226, 226, 226, 0.01) 42.858%, rgba(226, 226, 226, 0.01) 57.144%,rgba(109, 109, 109, 0.01) 57.144%, rgba(109, 109, 109, 0.01) 71.42999999999999%,rgba(239, 239, 239, 0.01) 71.43%, rgba(239, 239, 239, 0.01) 85.71600000000001%,rgba(54, 54, 54, 0.01) 85.716%, rgba(54, 54, 54, 0.01) 100.002%),linear-gradient(22deg, rgba(77, 77, 77, 0.03) 0%, rgba(77, 77, 77, 0.03) 20%,rgba(235, 235, 235, 0.03) 20%, rgba(235, 235, 235, 0.03) 40%,rgba(215, 215, 215, 0.03) 40%, rgba(215, 215, 215, 0.03) 60%,rgba(181, 181, 181, 0.03) 60%, rgba(181, 181, 181, 0.03) 80%,rgba(193, 193, 193, 0.03) 80%, rgba(193, 193, 193, 0.03) 100%),linear-gradient(80deg, rgba(139, 139, 139, 0.02) 0%, rgba(139, 139, 139, 0.02) 14.286%,rgba(114, 114, 114, 0.02) 14.286%, rgba(114, 114, 114, 0.02) 28.572%,rgba(240, 240, 240, 0.02) 28.572%, rgba(240, 240, 240, 0.02) 42.858%,rgba(221, 221, 221, 0.02) 42.858%, rgba(221, 221, 221, 0.02) 57.144%,rgba(74, 74, 74, 0.02) 57.144%, rgba(74, 74, 74, 0.02) 71.42999999999999%,rgba(201, 201, 201, 0.02) 71.43%, rgba(201, 201, 201, 0.02) 85.71600000000001%,rgba(187, 187, 187, 0.02) 85.716%, rgba(187, 187, 187, 0.02) 100.002%),linear-gradient(257deg, rgba(72, 72, 72, 0.03) 0%, rgba(72, 72, 72, 0.03) 16.667%,rgba(138, 138, 138, 0.03) 16.667%, rgba(138, 138, 138, 0.03) 33.334%,rgba(54, 54, 54, 0.03) 33.334%, rgba(54, 54, 54, 0.03) 50.001000000000005%,rgba(161, 161, 161, 0.03) 50.001%, rgba(161, 161, 161, 0.03) 66.668%,rgba(17, 17, 17, 0.03) 66.668%, rgba(17, 17, 17, 0.03) 83.33500000000001%,rgba(230, 230, 230, 0.03) 83.335%, rgba(230, 230, 230, 0.03) 100.002%),linear-gradient(47deg, rgba(191, 191, 191, 0.01) 0%, rgba(191, 191, 191, 0.01) 16.667%,rgba(27, 27, 27, 0.01) 16.667%, rgba(27, 27, 27, 0.01) 33.334%,rgba(66, 66, 66, 0.01) 33.334%, rgba(66, 66, 66, 0.01) 50.001000000000005%,rgba(36, 36, 36, 0.01) 50.001%, rgba(36, 36, 36, 0.01) 66.668%,rgba(230, 230, 230, 0.01) 66.668%, rgba(230, 230, 230, 0.01) 83.33500000000001%,rgba(93, 93, 93, 0.01) 83.335%, rgba(93, 93, 93, 0.01) 100.002%),linear-gradient(90deg, #ffffff,#ffffff);
	margin: 0 auto;} 
	.lienBouton {     /*border-color: chocolate;   */     font-family: inherit; padding: 15px 20px 15px 20px;   border-radius: 20px;    background-color: aliceblue;	text-decoration:none;    line-height: 3.5rem;}
	button:active, .lienBouton:active { 	background-color:black; 		}
	
	/* ios */
	button {
  background-color: #326f6f; /* Couleur bleue typique iOS */
  color: white;
  border: none;
  border-radius: 10px; /* Coins arrondis */
  padding: 10px 18px;
  font-size: 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
button.secondary {
	
  padding: 6px 14px;
  background-color: transparent;
  color: #007AFF; /* Couleur bleue typique iOS */
  border: 2px solid #007aff14; /* Bordure bleue */
}

button:hover {
  background-color: #0051A8; /* Effet au survol */
  color:white;
}

button:active {
  background-color: #004080; /* Effet lors de l'appui */
}

	
	footer { border-width: 2px;    text-align: center;    padding: 5px 10px 10px 10px;	  color: white;	background-color:darkslategrey;     }
	#ouvrages {	margin-left: -15px;	}
	#ouvrages  tr { text-align: center; padding: 15px;}
	#ouvrages  td {   /*  padding-inline-end: inherit; */   padding-top: 5px; }
	#ouvrages  th {	padding-top: 20px;	  /*  font-family: 'AT Open Sans';*/}
	colgroup > col:first-child { width:110px;		}
	colgroup > col { width:130px;		}
	#imagedujour { max-width:450px;margin:-20px; }
	
	center {	max-width:900px;     margin: 0 auto;	}
	
	@font-face
	{
		 src: url('https://fonts.cdnfonts.com/css/helvetica-neue-5') format("sans-serif");
		font-family: Helvetica;
	}		
	 @font-face {
    font-family: Simple-colored;
    font-style:normal;
    font-weight:600;
    src: url(SimpleNaskhi-colored.ttf) format("truetype");
  }
	
	.arabe {	font-family: Simple-colored;	
    direction: rtl;}
		
	#dateRoza{
		padding:10px; 
		/* width: 100px; */

    background: transparent;
    border: dotted thin darkgrey;
	}
	
	#remplacerDonnees
	{
		/* color:midnightblue; */
		/* background-color: #FFFEFD; */
		/* padding:  3px 6px; */
		text-decoration:none;
		    letter-spacing: 0.4px;
	}
	
	iframe 	{	border-radius:	15px	;	}
	
	.lien_clair 	{	text-decoration:none;color:inherit;	}
	
	#aide
	{
	text-decoration: none;
    color: royalblue;
    background-color: azure;
    padding: 8px;
    border-radius: 8px;
    /* border-color: grey; */
    /* border-style: dashed; */
    /* border-width: thin; */

	}
	
	.lien { 
	text-decoration:none;
	 background-color: #fefefebf;
    padding: 10px;
	/* font-size:smaller;	 */
	display: inline-block;
	vertical-align: middle;
	
	border-radius: 3px;
	}
	
	#jourSuivant {	width: 120px;	    display: initial !important;	}
	
	#precisionJour	{	padding-inline:1em;	}
	
	.lien:active { 
		box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24);
		background-color:brown;
		color:white;
		
	}
	
	#TableauHoraires {	min-height:360px;	    margin-top: 30px; 
	/* margin-bottom:-6px; */
	
	}
	
	
	.icone-region	{
	/* si texte: */
	
	color: grey;
    font-weight: 100;
    padding-left: 5px; 
	
    /*font-size: small; /* si icône */
	 float: left;
	}
	
	audio {	    max-width: -webkit-fill-available;		}
	.iconePDF {
		max-width: 160px;
		max-height: 150px;
	}
	
	#horairesTab {
		font-family: Calibri Light;
		font-size: 1rem; /* 2025 */
		padding: 10px;
		background-color:white;
		box-shadow: 0px 1px 4px 2px  #5c5c5c9e;
	}
		
		@-o-keyframes fadeIt {
		0% { background-color: #6eb9f7;	}
		}
		@keyframes fadeIt {
			0%  { background-color: #6eb9f7; }
		}

		.backgroundAnimated {    
			background-image:none !important; 
			-o-animation: fadeIt 1s ease-in-out; 
			animation: fadeIt 1s ease-in-out; 
		}
	
	
	.titre {
    font-weight: bold;
    font-size: larger;
    padding: 18px;
    margin: -15px;	
	box-shadow: 0px 4px 4px 0px rgb(0 0 0 / 20%);
	    background: #0000001a;
	}
	
	
	
	.tg  {border-collapse:collapse;    margin-top: 8px;	text-align:center;	width:90%;box-shadow: 0px 1px 7px 2px #a4a9a4;}
	.tg td{padding:17px 5px;}
	.tg th{    padding: 10px;
    line-height: 1.3em;background-color:brown;color:white;}
	.tg tr td:first-child {   
	border-bottom-width: 1px;
    font-weight: bold;
    border-right-style: solid;
    border-right-width: medium;
    text-align: right;
    padding-right: 15px;	}
	.tg td:not(:first-child) { font-size: large;     font-family: 'Muli', sans-serif;}
	.tg tr td:last-child {   /*border-left-style: dashed;border-left-color: darkgrey;*/	 
	border-left-style: dashed;
    border-left-color: grey;
    border-left-width: thin;}
	
	#nuit_impaire	{	color:white;	font-size:initial;font-weight:initial;	padding: 5px; background-color:steelblue;border-radius:8px;}
	.fadjr {	color:white; /*font-weight:bold;	*/}
	.fond_fadjr	{	background-color: darkslategray;  border: solid thin white;}
	
	
	.ripple {
	background-position: center;
	transition: background 1s;
	}
	.ripple:hover {
	  background: white radial-gradient(circle, transparent 1%, #47a7f5 1%) center/15000%;
	}
	.ripple:active {
	  background-color: #6eb9f7;
	  background-size: 100%;
	  transition: background 0s;
	}
	
	.large {	font-size: x-large;	}

	#reseaux_sociaux
	{background-color:#bbb2b287;	padding-block:	2em;}

/* Modal Content */
	.overlay {
	  position: fixed;
	  top: 0;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  background: rgba(0, 0, 0, 0.7);
	  transition: opacity 500ms;
	  visibility: hidden;
	  opacity: 0;
	  overflow: auto; /* pour le scroll */
	  z-index: 2;/*  pour que audio passe pas dessus */
	}
	.overlay:target {
	  visibility: visible;
	  opacity: 1;
	}

	.popup {
	margin: 25px auto;
    padding: 25px;
    background: #fff;
    border-radius: 40px;
    width: 45%;
    position: relative;
    transition: all 1s ease-in-out;
	font-size: small;
	}

	.popup h2 {
	  margin-top: 0;
	  color: #333;
	}
	.popup .close {
	  position: absolute;
	  top: 20px;
	  right: 30px;
	  transition: all 200ms;
	  font-size: 30px;
	  font-weight: bold;
	  text-decoration: none;
	  color: red;
	}
	.popup .close:hover {
	  color: #06D85F;
	}
	.popup .content {
	  max-height: 30%;
	  overflow: auto;
	  text-align: left;
}
	
	.textPopup {	text-align: justify !important;  padding-inline: 20px;}
	.carte
	{
	padding: 15px;
    margin-inline: 7px;
	}

	#documents	{	 background-color: skyblue;	}
	#centralisation {	background-color:#bbf8bb;	}
	#tarawih {	background-color:tan;	}
	#doua {	background-color:lightgoldenrodyellow;	}


	#islam_re, #info_date, #info_tampon
	{
		font-size: xx-small;
		font-weight: lighter;
	}
	
	#islam_re {
		position:inherit;
		top: 31px;
		left: 46px;
		color: lightgrey;
		font-style: italic;
	}
	#info_date {
	position: relative;
    color: #476247;
  /*  z-index: -1; */
	display: block; /* si on mets <br> yaura trop d'espace verticale */
	}
	
	#info_tampon 	{	
	position: relative;
	display: block;
	    margin-bottom: -5px;
	}
	
	.more {	cursor:pointer;
    font-size: larger;	}
	
	@media screen and (max-width: 768px){

	  .popup{
		width: 80%;
	  }
	  
	  footer {	margin-bottom:50px;	}
	  
	  body {		/*margin-bottom: 60px; /* Ajustez cette valeur selon la hauteur de votre menu */	}
	  
	  	#info_date {    margin-top: -6px;	}
		
		iframe
	  {
		  max-width: 95%;
	  }
	}
	
	@media screen and (min-width: 768px){



	  .tg {
		width: 500px;
	  }
	  
	  iframe
	  {
		 width:450px;
		  /* height: 200px; */
		  /* margin-left:  */
	  }
	  
	  #titre {	display:	none;	}
	  
	  td  {	    padding-inline: 15px;	}
	  
	  
	}