:root {
 	--primary-blue: #172969;
 	--text-grey: #8a8a8a;
 	--content-width: 1040px;
 	--slide-control-bottom: 30px;
 }

 body {
 	margin: 0;
 	padding: 0;
 	background: linear-gradient(to bottom, #ffffff, #1a4594);
 	/* Dégradé blanc vers bleu */
 	min-height: 100vh;
 	font: 14px/1.5 "Helvetica", "Arial", "Source Sans Pro", sans-serif;
 	color: #343434;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
 	font-family: 'Marcellus', serif;
 }

 a {
 	color: #0788ca;
 	text-decoration: none;
 }

 a:hover {
 	text-decoration: underline;
 }


 .top-bar {
 	background-color: white;
 	padding: 4px 0 10px 0;
 	text-align: center;
 }

 .top-bar .titre {
 	font-family: 'Marcellus', serif;
 	color: var(--primary-blue);
 	font-size: 30px;
 	font-weight: bold;
 	margin: 0;
 	line-height: 40px;
 	text-transform: uppercase;
 }

 .top-bar .sstitre {
 	font-family: 'Marcellus', serif;
 	color: #e00a1d;
 	font-size: 16px;
 	font-weight: bold;
 	margin: 0;
 	text-transform: uppercase;
 }

 .top-bar .description {
 	font-size: 14px;
 	font-style: italic;
 	color: #999;
 }

 .navbar-custom {
 	/* background: linear-gradient(to right, #007bff, #ccc); */
 	background: url(/images/menu_bg.png);
 	height: 40px;
 	z-index: 1000;
 }

 .navbar-nav {
 	width: 100%;
 	max-width: var(--content-width);
 	margin: 0 auto;
 }

 .navbar-nav a {
 	background-image: url(/images/menu_bg.png);
 	height: 40px;
 	padding-left: 2px;
 	padding-right: 2px;
 }

 .navbar-nav a:hover,
 .navbar-nav a.active {
 	background-image: url(/images/menu-hover.png);
 	color: #fff;
 }

 /* .navbar-nav a.home {
    overflow: hidden;
    text-indent: -99em;
    line-height: 0;
}
.navbar-nav a.home:after {
    font: 1em / 1 "RockSolid Icons";
    content: "\2302";
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
    text-indent: 0;
    display: inline-block;
    position: relative;
    line-height: 1.5;
    display: block;
	color: #fff;
} */


 /* Réduire la taille du bouton burger */
 .custom-toggler.navbar-toggler {
 	width: 40px;
 	height: 40px;
 	border: none;
 	margin: -8px auto;
 	/* centre horizontalement */
 }

 /* Rendre l'icône burger blanche */
 .custom-toggler .navbar-toggler-icon {
 	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%28255,255,255,1%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
 }

 /* Supprime le contour noir au focus */
 .custom-toggler:focus {
 	outline: none;
 	box-shadow: none;
 	/* supprime l'ombre par défaut */
 }

 /* Optionnel : ajouter un effet visuel plus doux au focus pour l'accessibilité */
 .custom-toggler:focus-visible {
 	outline: 2px solid rgba(255, 255, 255, 0.7);
 	outline-offset: 2px;
 }


 /* CONTENU CENTRAL */

 .content-wrapper {
 	width: 100%;
 	max-width: var(--content-width);
 	margin: 0 auto;
 	background-color: white;
 	padding: 2rem;
 }

 .content-wrapper h1 {
 	color: #3d566e;
 	margin-bottom: 1rem;
 }

 .content-wrapper h2 {
 	font-size: 1.75em;
 }

 .home h1 {
 	font-size: 28px;
 }


 /* CSS RUFFFLE */

 /* Conteneur responsive */
 .ruffle-wrapper {
 	position: relative;
 	width: 100%;
 	max-width: 980px;
 	margin: auto;
 	background: #fff;
 	/* couleur de fond par défaut */
 	overflow: hidden;
 }

 /* Maintien du ratio */
 .ruffle-wrapper::before {
 	content: "";
 	display: block;
 	padding-top: 45%;
 }

 /* Image de chargement */
 .loading-image {
 	position: absolute;
 	top: 0;
 	left: 0;
 	width: 100%;
 	height: 100%;
 	object-fit: cover;
 	/* Remplit le conteneur */
 	object-position: center;
 	z-index: 1;
 	transition: opacity 0.4s ease;
 }

 /* Canvas Ruffle */
 .ruffle-wrapper ruffle-player {
 	position: absolute;
 	top: 0;
 	left: 0;
 	width: 100%;
 	height: 100%;
 	border: none;
 	display: block;
 	z-index: 2;
 }

 /* Masque l’image après chargement */
 .ruffle-wrapper.loaded .loading-image {
 	opacity: 0;
 	pointer-events: none;
 }



 /* CSS SLIDER rigth col */
 .slider {
 	position: relative;
 	max-width: 380px;
 	margin: 50px auto;
 	overflow: hidden;
 	/* border-radius: 10px; */
 	aspect-ratio: 140%;
 	background: #fff;
 }

 .slides {
 	display: flex;
 	transition: transform 0.5s ease-in-out;
 	width: 100%;
 }

 .slide {
 	min-width: 100%;
 	flex-shrink: 0;
 }

 .slide img {
 	display: block;
 	width: 100%;
 	height: auto;
 }

 /* Bloc de contrôle intégré au bas de l'image */
 .controls {
 	position: absolute;
 	bottom: var(--slide-control-bottom);
 	left: 0;
 	width: 100%;
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
 	padding: 0 4px;
 }

 /* Boutons flèches carrés */
 .prev,
 .next {
 	background: rgba(0, 0, 0, 0.5);
 	color: #fff;
 	border: none;
 	font-size: 10px;
 	padding: 8px 12px;
 	cursor: pointer;
 	border-radius: 0;
 	/* carré parfait */
 }

 .prev:hover,
 .next:hover {
 	background: rgba(0, 0, 0, 0.8);
 }

 /* Indicateurs carrés centrés */
 .dots {
 	position: absolute;
 	bottom: var(--slide-control-bottom);
 	left: 50%;
 	transform: translateX(-50%);
 	text-align: center;
 }

 .dot {
 	display: inline-block;
 	width: 7px;
 	height: 7px;
 	margin: 0 2px 4px 2px;
 	background: #bbb;
 	border-radius: 50%;
 	cursor: pointer;
 }

 .dot.active {
 	background: #333;
 }



 /* Conteneur lightbox caché par défaut */
 .lightbox {
 	display: none;
 	position: fixed;
 	top: 0;
 	left: 0;
 	width: 100%;
 	height: 100%;
 	background: rgba(0, 0, 0, 0.8);
 	justify-content: center;
 	align-items: center;
 	z-index: 9999;
 }

 .lightbox img {
 	max-width: 90%;
 	max-height: 90%;
 	border: 3px solid white;
 	border-radius: 4px;
 }

 .lightbox:target {
 	display: flex;
 	/* s'affiche quand on clique sur le lien */
 }

 .close {
 	position: absolute;
 	top: 20px;
 	right: 30px;
 	color: white;
 	font-size: 30px;
 	text-decoration: none;
 	font-weight: bold;
 }



 .footer-inside {
 	border-top: 1px solid #ccc;
 	padding-top: 1rem;
 	display: flex;
 	justify-content: space-between;
 	flex-wrap: wrap;
 	font-size: 0.7em;
 	font-weight: 600;
 	color: var(--text-grey);
 	text-transform: uppercase;
 }

 .footer-inside a {
 	color: var(--text-grey);
 	text-decoration: none;
 }

 .footer-inside a:hover {
 	text-decoration: underline;
 }

 .footer-outside {
 	width: 100%;
 	max-width: var(--content-width);
 	/* border: 1px solid red; */
 	margin: 0 auto;
 	text-align: right;
 	padding: 4px 0 40px 0;
 	font-size: 0.7em;
 	font-weight: 600;
 	color: white;
 	text-transform: uppercase;
 }

 .footer-outside a {
 	color: white;
 	text-decoration: none;
 }

 .footer-outside a:hover {
 	text-decoration: underline;
 }