a {
					text-decoration: none !important;
					color: inherit !important;
				}
				#navbar {
				  margin-right: var(--f-scrollbar-compensate, -20px);
				}		
				
				/* Prevent layout shift when Fancybox hides the scrollbar */
				html,
				body {
				    scrollbar-gutter: stable;
				}

				/* Ensure body does not jump when Fancybox adds overflow:hidden */
				body {
				    overflow-y: scroll;
				}

				body {
					  margin: 0px;
				      min-height: 100vh;
				      max-width: 100vw;
				      overflow-x: hidden;
				      display: flex;
				      flex-direction: column;
				      align-items: center;
				      justify-content: start;
				      padding-top: 0;
				      color: #5e5e5e !important;
				      font-family: "Roboto", sans-serif !important;
				      }
			    .indie-flower-regular {
					  font-family: "Indie Flower", cursive !important;
					  font-weight: 400;
					  font-style: normal;
					}	
			    .sidenav {
					  height: 100vh;
					  z-index: 100;	  
					  background-color: #ececec;
					  padding:0px 20px;					 
					  }

				#sidenav  {
					  display: block;
					  margin: 0px;
					  width: auto;
					  /* background-color: #bfaece; */
				  	  }
				  	  
				
				#sidenav .nav-item{
					  display: inline-flex;
					  margin: 0px 6px 8px 0px;
					  }
					  
			    #sidenav .nav-item:last-of-type {
				      margin: 0px 6px 0px 0px;
			    	  }
					  	 				  	  
				#sidenav  ul {
					  margin: 20px 0px;
					  padding: 0px;
					  border: 1px solid transparent;	
					  width: 100%;			  
					  }
				  	
				#sidenav nav ul li {					  					  
					  }
				  
				#sidenav .nav-link {
					  font-family: "Roboto", sans-serif;
					  font-size: 0.8em;
					  font-weight: 600 !important;
					  letter-spacing: 0.08em;
					  display: inline-block;			  
					  text-transform: uppercase;
					  font-weight: 800;		
					  background-color: #446793;
					  padding: 6px 12px;					  
					  color: white !important;		  
				  	  }
				  	  
				#sidenav .nav-link.disabled {
					  background-color: rgba(67, 104, 148, 0.55) !important;
					  opacity: 0.4 !important;		  
				  	  }
				  	  
				#sidenav .nav-link:hover {
					  background-color: #5889c6;
					  color: white !important;
					  }
					  
				#sidenav .active_nav {
					  background-color: #ff913c !important;
					  color: #2c2c2c !important;
					  }
					 	
				#puddle, .puddle {
					background: linear-gradient(-45deg, #efd5ff, #515ada, #23a6d5, #23d5ab);
					background-size: 400% 400%;
					animation: gradient 20s ease infinite;
					height: auto;
					}
				.nav-underline .nav-link {
					border-bottom: 4px solid transparent !important;
				}
				.nav-underline .nav-link.active {
					border-bottom: 4px solid #446793 !important;
					color: #446793 !important;
				}
				
				#puddle .nav-link.active {
					border-bottom: 4px solid #ebeff3 !important;
					color: #f9fcff !important;
					font-weight: 400;
				}

				@keyframes gradient {
					0% {
						background-position: 0% 50%;
					}
					50% {
						background-position: 100% 50%;
					}
					100% {
						background-position: 0% 50%;
					}
				}
				
		
/* Styles boutons taille de text */
.text-size-controls .btn {
	width: 30px;   /* 50% de 60px */
	height: 30px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
	}
	
/* Icônes avec taille variable */
.btn-small i { font-size: 0.9rem; }
.btn-medium i { font-size: 1.1rem; }
.btn-large i { font-size: 1.3rem; }
	
/* Bouton actif */
.text-size-controls .btn.active {
	background-color: #0d6efd;
	color: #fff;
	border: none;  /* pas de grosse bordure */
	}
	
/* Hover sur icône */
.text-size-controls .btn:hover i {
	transform: scale(1.2);
	transition: transform 0.2s ease;
	}

	#text_increas { max-width: 100%; line-height: 1.6; border: 1px solid red; }
	.debug { margin-top: 16px; font-family: monospace; color: #555; width: 100%;}
  

#masonry-grid {
      margin: 0 auto;
    }
    .masonry-item {
      margin-bottom: 1rem;
      display: block;
    }
    .masonry-item img {
      width: 100%;
      height: auto;
      display: block;
    }
    .loading {
      text-align: center;
      padding: 1rem 0;
    }




footer {
	font-family: "Roboto", sans-serif;
	color: black !important;
	}

footer h6 {
	font-size: 32px;
	font-weight: 900;
	}

h6 {
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	}

h6.antidote {

	}

.my-card {
	position: absolute;
	top: -10px;
	right: -10px;
	}
	
ul.list-group, list-group {
	background-color: transparent !important;
	padding:  0px;
}
	
ul.list-group li:last {
	border: none !important;
	}
	
ul.list-group li:hover {
	background-color: #5daae6;
	color: white !important;
	}
.list-group-item {
	padding: 10px 0px;
	background-color: transparent !important;
	}	
.list-group-item:hover {
	padding: 10px 0px;
	background-color: #5daae6 !important;
	border-radius: 10px;
	}		
.date_add:hover {
	background-color: transparent !important;
	color: black !important;
	}
	
ul.list-group li i {
	font-size: 1.6rem;
	}
	
ul.list-group li:hover i {

	}

.justify p {
	text-align: justify !important;
}

/* This for podcast cover */

.cover { 
  background-repeat: no-repeat; background-size: contain;
  box-shadow: 0  2px -1px black, inset -1px 1px 2px rgba(255, 255, 255, 0.5);
  margin: auto !important;
  border: 1px solid gray !important;
  border-radius: 5px;

  width: calc(187px - 93px) ;
  height: calc(290px - 145px) ;
}

.cover_big2 { 
  background-repeat: no-repeat; background-size: contain;
  box-shadow: 0  2px -1px black, inset -1px 1px 2px rgba(255, 255, 255, 0.5);
  margin: auto !important;
  border: 1px solid gray !important;
  border-radius: 5px;
  
  width: calc(187px - 93px) ;
  height: calc(590px - 145px) ;

}




.ellipsis {
	height: 100px;
  overflow: hidden;
}

.elouan_1 {
	height: 100px;
  overflow: hidden;
}

 .elouan_2 {
      height: 120px !important;
      overflow: hidden;
    }


.image-wrapper {
    padding: 1.5rem;
    border-radius: 10px;
    margin-bottom: 2rem;
    font-family: sans-serif;
    font-size: 1.1rem;
    position: relative;
    transition: all 0.3s ease-in-out;
  }

  .color-palette {
    margin-top: 1rem;
    display: flex;
    gap: 0.5rem;
    display: bloc;
  }

  .color-swatch {
    width: 30px;
    height: 30px;
    border-radius: 4px;
    box-shadow: 0 0 4px rgba(0,0,0,0.2);
  }


.card-img-overlay h4 {
	font-size: 22px !important;
	text-transform: capitalize;
	letter-spacing: -1px;
	word-spacing: 2px;
}



.podcast h4 {
	font-size: 1rem !important;
}



/* This for the Howler custom CENAC Player */
	.audio-player, .podcast-player {
      width: auto;
      max-width: 600px;
      display: block;
      height: auto;
    }

    .player-button, .play-pause-btn {
      font-size: 4rem;
      border: none;
      background: transparent;
      color: #fff;
      transition: transform 0.3s ease;
    }

    .player-button:hover {
      transform: scale(1.1);
    }

    .pulsing {
      animation: pulse 1.8s ease-in-out infinite;
    }

    @keyframes pulse {
      0%, 100% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.1); opacity: 0.85; }
    }
    
	.progressContainer {
		width: 100%;
		height: 8px;
		background: rgba(255,255,255,0.2);
		border-radius: 4px;
		overflow: hidden;
		margin-top: 10px;
		cursor: pointer;
		}
		
	.progressBar {
		background: white;
		width: 0%;
		height: 100%;
		transition: width 0.1s linear;
		}
		
    .progress {
      	height: 6px;
      	background-color: rgba(255, 255, 255, 0.1);
      	cursor: pointer;
	  	margin-top: 1rem;
    	}

    .progress-bar {
      	background-color: #fff;
      	transition: width 0.1s linear;
    	}

   .time-counter {
		margin-top: 0.5rem;
		font-size: 0.95rem;
		color: #eee;
		font-family: monospace;
		text-align: center;  /* <-- Center horizontally */
		user-select: none;
		}
    
/* END MP3 PLAYER */

	ul.pagination li {
		display: inline-block;
		}
		
	ul.pagination li a {
		display: inline-block;
		border: 1px solid red;
		}
	
	ul.pagination li a.active {
		border: 1px solid blue !important;
		font-weight: bold !important;
		}
	
	footer a {
		color: black !important;
		padding: 0 10px 0 10px;
		}


/* Temporary page */

/* Animate the button, outside */
	.pulse:hover,
	.pulse:focus {
	  -webkit-animation: pulse 1s;
	          animation: pulse 1s;
	          animation-timing-function: ease-in-out;
	          animation-iteration-count: 20000000;
	  box-shadow: 0 0 0 1em transparent;
	}
	
	@-webkit-keyframes pulse {
	  0% {
	    box-shadow: 0 0 0 0 var(--hover);
	  }
	}
	
	@keyframes pulse {
	  0% {
	    box-shadow: 0 0 0 0 var(--hover);
	  }
	}
	
	.pulse {
	  --color: #ef6eae;
	  --hover: #089CCE;
	}



/* Buttons right */

.section-antidote::before {
	background: -webkit-linear-gradient(135deg, hsla(213, 91%, 47%, 1) 0%, hsla(160, 100%, 48%, 1) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-color: white;
	}

.section-antidote p, .section-btn p {
	font-weight: inherit;
	}

.section-antidote:hover {
	background: -webkit-linear-gradient(135deg, hsla(213, 91%, 47%, 1) 0%, hsla(160, 100%, 48%, 1) 100%);
	}
	
.section-antidote:hover h6, .section-antidote:hover p {
	color: white !important;
	-webkit-text-fill-color: white;
	}
	
.section-btn {

	}
	
.section-btn:hover {
	background-color: #446793 !important;
	color: white;
	}





.typography {
	font-family: "Roboto", sans-serif;
	}
	
.typography h1 {
	font-family: "Roboto", sans-serif;
	font-size: 3em;
	line-height: 0.8em !important;
	font-weight: 700;
	}
.typography h1 small {
	font-size: 0.5em !important;
	font-weight: 200;
	text-transform: lowercase;
}

.typography h5 {
	font-family: "Roboto", sans-serif;
	/* 	font-size: calc(12px + 2vh); */
	font-size: clamp(1.5rem, 5vw - 2rem, 1.833rem);
	font-weight: 500;
	letter-spacing: 0.0rem;
	line-height: 110%;
	}
	
.typography h6 {
	font-family: "Roboto", sans-serif;
	/* 	font-size: calc(12px + 2vh); */
	font-size: clamp(1.167rem, 4vw - 2rem, 1.233rem);
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 0.0rem;
	}
	
.typography p.lead {
	font-size: 1.2rem;
	line-height: 1.8rem;
	font-weight: 300 !important;
	}
	
.typography p {
	font-size: 1.1rem;
	line-height: 1.8rem;
	font-weight: 300 !important;
	}

.typography {
	font-size: 1rem;
	line-height: 1.8rem;
	}
	
.typography blockquote {
	padding: 10px 0 10px 10px;
	color: #808080 ;
/* 	background-color: #f9f9f9; */
	border-left: 4px solid #9EC4FE;
	border-radius: 0px;
/* 	box-shadow: 0px 10px 10px -3px rgba(0,0,0,0.1); */
	}
	
.typography blockquote p {
	font-size: 1.1rem !important;
	line-height: 1.8rem !important;
	font-style: italic;
	text-align: justify;
	padding-left: 10px;
	margin-top: -40px;
	}

.typography blockquote .blockquote-footer {
	font-size: 1.1rem !important;
	font-weight: 800;
	line-height: 1.8rem !important;
	font-style: italic;
	text-align: justify;
	padding-left: 10px;
	
}

.typography blockquote .blockquote-footer::before {
    content: "| ";
}

.typography blockquote::before{
  content: "\201C"; /*Unicode for Left Double Quote*/
  
  /*Font*/
  font-family: Georgia, serif;
  font-size: 2rem;
  font-weight: bold;
  color: #999;
  
  /*Positioning*/
  position: relative;
  left: -40px;
  top:0px;
  visibility: hidden !important;
}

.typography blockquote::after{
  /*Reset to make sure*/
  content: "";
}

.text-truncate-multiline {
  display: -webkit-box;
  -webkit-line-clamp: 3;      /* nombre de lignes */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.border-cornflower {
    --bs-border-opacity: 1;
    border-color: #ffacac !important;
}
.border-flesh {
    --bs-border-opacity: 1;
    border-color: #ffd5a5 !important;
}
.border-portafino {
    --bs-border-opacity: 1;
    border-color: #fdffb6 !important;
}
.border-snowFlurry {
    --bs-border-opacity: 1;
    border-color: #cbffbf !important;
}
.border-anakiwa {
    --bs-border-opacity: 1;
    border-color: #9bf6ff !important;
}
.border-anakiwa2 {
    --bs-border-opacity: 1;
    border-color: #9ec4fe !important;
}
.border-melrose {
    --bs-border-opacity: 1;
    border-color: #bdb2ff !important;
}
.border-pinkLace {
    --bs-border-opacity: 1;
    border-color: #ffc6ff !important;
}
.border-blackWhite {
    --bs-border-opacity: 1;
    border-color: #fffffc !important;
}
.border-pictonBlue {
    --bs-border-opacity: 1;
    border-color: #5ba9e6 !important;
}

.border-purpletrouble {
    --bs-border-opacity: 1;
    border-color: #9EC4FE !important;
}

.border-surfer {
    --bs-border-opacity: 1;
    border-color: #00CECB !important;
}
:root, .lgbtq-pastels {
    --cornflowerLilac: #ffacac;
    --flesh: #ffd5a5;
    --portafino: #fdffb6;
    --snowFlurry: #cbffbf;
    --anakiwa: #9cf7ff;
    --anakiwa2: #9ec4fe;
    --melrose: #bdb2ff;
    --pinkLace: #ffc6ff;
    --blackWhite: #fffffc;
    --pictonBlue: #5ba9e6;
}

@supports (color: color(display-p3 1 1 1)) {
    :root, .lgbtq-pastels {
        --cornflowerLilac: color(display-p3 1.0 0.676 0.675 / 1.0);
        --flesh: color(display-p3 0.999 0.837 0.646 / 1.0);
        --portafino: color(display-p3 0.99 1.0 0.714 / 1.0);
        --snowFlurry: color(display-p3 0.794 0.998 0.75 / 1.0);
        --anakiwa: color(display-p3 0.608 0.966 0.999 / 1.0);
        --anakiwa2: color(display-p3 0.622 0.769 0.995 / 1.0);
        --melrose: color(display-p3 0.741 0.697 1.0 / 1.0);
        --pinkLace: color(display-p3 0.999 0.776 0.998 / 1.0);
        --blackWhite: color(display-p3 1.0 1.0 0.987 / 1.0);
        --pictonBlue: color(display-p3 0.356 0.662 0.903 / 1.0);
    }
}



	
		.cenac, .engage, .actu, .donation, .antidote, .formation, .contact {
			padding: 0px;
		}

		.cenac {
			background-color: #D9ED92;
		} 
		
		.engage {
			background: #99D98C url(https://nova.non-violence.ch/images/uploads/test_pictures/screenshot_2025-04-26_a%CC%80_19.39.43-Photoroom_.png);
			background-size: 100%;
			background-color: #B5E48C;
			background-repeat: no-repeat;
			background-position-y: 60%;
		}
		.actu {
		    background-color: #99D98C;
			background: #99D98C url(https://nova.non-violence.ch/images/uploads/test_pictures/screenshot_2025-04-26_a%CC%80_19.38.18-Photoroom_.png);
			background-size: cover;
			background-color: #99D98C;
		}
		.donation {
			background: url(https://nova.non-violence.ch/images/uploads/test_pictures/screenshot_2025-04-27_a%CC%80_15.18.30-Photoroom_.png);
			background-size: 100%;
			background-repeat: no-repeat;
			background-position-y: 50%;
			background-color: #76C893;
		}
		.antidote {	
			background: url('https://nova.non-violence.ch/images/uploads/test_pictures/screenshot_2025-04-26_a%CC%80_19.37.27-Photoroom_.png');
			animation: pulse 2s infinite;
		/*
			background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
			animation: gradient 15s ease infinite;
		*/
			background-color: #168AAD;
			
			background-size: 100%;
			background-repeat: no-repeat;
			background-position-y: 20%;
			}
			
		.formation {		
			background: url(https://nova.non-violence.ch/images/uploads/test_pictures/screenshot_2025-04-27_a%CC%80_15.16.42-Photoroom_.png);
			background-size: cover;
			background-color: #52B69A;
			background-position-x: 45%;
		
		}
		
		.contact {
			background: url(https://nova.non-violence.ch/images/uploads/test_pictures/screenshot_2025-04-26_a%CC%80_19.36.05-Photoroom_.png);
			background-size: cover;
			background-color: #34A0A4;
		}
		
		
		
		
		.big {
			height: 50vh;
			overflow: hidden;
			}
			
		.big:hover {
			height: 50vh;
			background-color: #168AAD;
			overflow: hidden;
			}
		
		.medium {
			height: 33.333vh;
			overflow: hidden;
			}
		
		.medium:hover {
			height: 33.333vh;
			background-color: #168AAD;
			color: white;
			} 
		
		
		
		.bloc_titre_module {	 
			height: 100%;
		    position: relative;
			top: 19vh;
			bottom: 0;
			width: 100%;
			padding: 0px;
			 -webkit-backdrop-filter: blur(3px);
			 backdrop-filter: blur(3px);
			 border-top: 1px solid rgba(255, 255, 255, 0.47);	 
			} 
		
			.myDiv {
		    transition: transform 1s ease; /* Smooth animation */
		    position: relative;
		  }