html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;}body {line-height: 1;}ol, ul {list-style: none;}blockquote, q {quotes: none;}:focus {outline: 0;}ins {text-decoration: none;}del {text-decoration: line-through;}table {border-collapse: collapse;border-spacing: 0;}



body {font-family: "Arial";font-size: 13px;}


.spacer{ clear: both}

.nowrap{ white-space: nowrap; }
.icon{ position: absolute; left: 20px; top: 10px; height: 28px; width: 28px; opacity: 0.8; }

/* Style du switch */
.theme-switch-wrapper {
	display: inline-flex;
	align-items: center;
	margin-left: 15px;
}

.theme-switch {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 34px;
}

.theme-switch input {
	opacity: 0;
	width: 0;
	height: 0;
}
.slider .light-icon,
.slider .dark-icon {
	font-size: 18px;
	color: #fff;
	z-index: 1;
	/* Réinitialisation des styles Material Icons par défaut */
	position: static !important; 
	bottom: auto !important;
	left: auto !important;
	line-height: normal !important;
	margin: 0 !important;
}


.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	transition: .4s;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 5px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 5px;
}

.slider:before {
	position: absolute;
	content: "";
	height: 26px;
	width: 26px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	transition: .4s;
	z-index: 2;
}

.slider .light-icon,
.slider .dark-icon {
	font-size: 18px;
	color: #fff;
	z-index: 1;
}

input:checked + .slider {
	background-color: #2196F3;
}

input:checked + .slider:before {
	transform: translateX(26px);
}

.slider.round {
	border-radius: 34px;
}

.slider.round:before {
	border-radius: 50%;
}
.view-switch {
	padding: 4px 8px;
}

.view-switch .material-icons {
	font-size: 20px;
	margin: 0;
	position: static;
}

.nav-view-switch {
	height: 31px; /* Hauteur exacte des autres éléments de la navbar */
	margin-top: 1px; /* Ajustement fin */
}

.nav-view-switch .btn {
	padding: 2px 8px;
	line-height: 25px;
	display: flex;
	align-items: center;
}

.nav-view-switch .material-icons {
	font-size: 20px;
	line-height: 1;
	position: static;
	margin: 0;
}

[data-theme="dark"] .btn-outline-secondary {
	color: var(--text-color);
	border-color: var(--border-color);
}

[data-theme="dark"] .btn-outline-secondary:hover,
[data-theme="dark"] .btn-outline-secondary.active {
	background-color: var(--border-color);
	color: var(--text-color);
}
/* Ajouter au début des styles */
:root {
	/* Light theme (default) */
	--bg-color: #ffffff;
	--text-color: #000000;
	--navbar-bg: #f8f9fa;
	--card-bg: #ffffff;
	--border-color: #dee2e6;
	--input-bg: #ffffff;
	--input-text: #495057;
	
}

[data-theme="dark"] {
	--bg-color: #121212;
	--text-color: #ffffff;
	--navbar-bg: #1e1e1e;
	--card-bg: #1e1e1e;
	--border-color: #2d2d2d;
	--input-bg: #2d2d2d;
	--input-text: #ffffff;
	--nav-link-color: #ffffff;
	--nav-link-hover: #cccccc;
	--dropdown-bg: #1e1e1e;
	--dropdown-hover: #2d2d2d;
	--dropdown-border: #2d2d2d;
}
[data-theme="dark"] .navbar-light .navbar-nav .nav-link {
	color: var(--nav-link-color);
}

[data-theme="dark"] .navbar-light .navbar-nav .nav-link:hover {
	color: var(--nav-link-hover);
}

[data-theme="dark"] .dropdown-menu {
	background-color: var(--dropdown-bg);
	border-color: var(--dropdown-border);
}

[data-theme="dark"] .dropdown-item {
	color: var(--nav-link-color);
}

[data-theme="dark"] .dropdown-item:hover {
	background-color: var(--dropdown-hover);
	color: var(--nav-link-color);
}

[data-theme="dark"] .navbar-light .navbar-toggler-icon {
	filter: invert(1);
}

[data-theme="dark"] .navbar-brand {
	color: white !important;
}

[data-theme="dark"] .navbar-brand svg {
	stroke: white !important;
}

[data-theme="dark"] .navbar-brand strong {
	color: white !important;
}

/* Styles pour la card du générateur de vidéos en mode dark */
[data-theme="dark"] .card {
	background-color: var(--card-bg);
	border-color: var(--border-color);
}

[data-theme="dark"] .card-header {
	background-color: var(--navbar-bg);
	border-bottom-color: var(--border-color);
}

[data-theme="dark"] .card-header h3 {
	color: var(--text-color);
}

/* Styles pour les inputs et select */
[data-theme="dark"] .form-control,
[data-theme="dark"] select.form-control {
	background-color: var(--input-bg);
	border-color: var(--border-color);
	color: var(--text-color);
}

/* Styles pour les labels */
[data-theme="dark"] .form-group label {
	color: var(--text-color);
}

/* Styles pour le datepicker en mode dark */
[data-theme="dark"] .ui-datepicker {
	background-color: var(--card-bg);
	border-color: var(--border-color);
}

[data-theme="dark"] .ui-datepicker-header {
	background-color: var(--navbar-bg);
	border-color: var(--border-color);
	color: var(--text-color);
}

[data-theme="dark"] .ui-datepicker a {
	color: var(--text-color);
}

[data-theme="dark"] .ui-datepicker-calendar {
	color: var(--text-color);
}

[data-theme="dark"] .ui-datepicker-calendar thead {
	border-bottom: 1px solid var(--border-color);
}

[data-theme="dark"] .ui-datepicker-calendar th {
	color: var(--text-color);
}

[data-theme="dark"] .ui-state-default {
	background-color: var(--input-bg);
	border-color: var(--border-color);
	color: var(--text-color);
}

[data-theme="dark"] .ui-state-highlight {
	background-color: var(--navbar-bg);
	color: var(--text-color);
}

[data-theme="dark"] .ui-state-active {
	background-color: #2196F3;
	color: white;
}

/* Styles jQuery UI Datepicker pour le mode dark */
[data-theme="dark"] .ui-widget.ui-widget-content {
	background-color: var(--card-bg);
	border-color: var(--border-color);
}

[data-theme="dark"] .ui-datepicker {
	background-color: var(--card-bg);
	color: var(--text-color);
}

[data-theme="dark"] .ui-datepicker-header {
	background-color: var(--navbar-bg);
	border-color: var(--border-color);
}

[data-theme="dark"] .ui-datepicker-title {
	color: var(--text-color);
}

[data-theme="dark"] .ui-datepicker th {
	color: var(--text-color);
}

[data-theme="dark"] .ui-datepicker td span, 
[data-theme="dark"] .ui-datepicker td a {
	background-color: var(--input-bg) !important;
	color: var(--text-color) !important;
}

[data-theme="dark"] .ui-datepicker-prev,
[data-theme="dark"] .ui-datepicker-next {
	background-color: var(--input-bg) !important;
	border-color: var(--border-color) !important;
}

[data-theme="dark"] .ui-datepicker-prev span,
[data-theme="dark"] .ui-datepicker-next span {
	filter: invert(1); /* Pour blanchir les flèches de navigation */
}

[data-theme="dark"] .ui-state-highlight {
	background-color: #2196F3 !important;
	color: white !important;
}

[data-theme="dark"] .ui-state-active {
	background-color: var(--navbar-bg) !important;
	border-color: var(--border-color) !important;
}

[data-theme="dark"] .ui-state-hover {
	background-color: var(--dropdown-hover) !important;
	border-color: var(--border-color) !important;
}


[data-theme="dark"] .ui-datepicker {
	background-color: var(--card-bg);
	border-color: var(--border-color);
}

[data-theme="dark"] .ui-widget-header {
	background: var(--navbar-bg);
	color: var(--text-color);
	border-color: var(--border-color);
}

[data-theme="dark"] .ui-datepicker-calendar {
	background: var(--card-bg);
}

[data-theme="dark"] .ui-state-default {
	background: var(--input-bg);
	color: var(--text-color);
	border-color: var(--border-color);
}

[data-theme="dark"] .ui-state-hover {
	background: var(--dropdown-hover) !important;
	color: var(--text-color) !important;
	border-color: var(--border-color) !important;
}

[data-theme="dark"] .ui-state-active {
	background-color: #2196F3 !important;
	color: white !important;
}

[data-theme="dark"] .ui-datepicker th {
	color: var(--text-color);
}

[data-theme="dark"] .ui-datepicker-calendar td {
	background: var(--card-bg);
}

[data-theme="dark"] .ui-datepicker-calendar td a {
	color: var(--text-color) !important;
}

[data-theme="dark"] .ui-datepicker-title {
	color: var(--text-color);
}

[data-theme="dark"] .ui-datepicker .ui-datepicker-prev span,
[data-theme="dark"] .ui-datepicker .ui-datepicker-next span {
	filter: invert(1);
}
/* Assurons-nous que tous les éléments héritent de la transition */


/* Forcer l'application des styles sur body */
body {
	background-color: var(--bg-color) !important;
	color: var(--text-color) !important;
}

/* Forcer l'application sur la navbar */
.navbar.navbar-light {
	background-color: var(--navbar-bg) !important;
	color: var(--text-color) !important;
}

.navbar {
	background-color: var(--navbar-bg) !important;
}

.card {
	background-color: var(--card-bg);
	border-color: var(--border-color);
}

.form-control {
	background-color: var(--input-bg);
	color: var(--input-text);
	border-color: var(--border-color);
}



	
/* --- POSITIONNEMENT GLOBAL DU SITE --- */

#global {
	width: 100vw;
	/*min-width: 1150px;*/
	margin: 0;
	padding: 0;
}

/* Bloc central */
#centre {
	position: relative; 
	width: 100%;
}

/* Menu de navigation */
#left_sidebar {
	position: absolute; 
	top: 0;
	left: 0;
	width: 240px;
}


/* Contenu principal */
#main_sidebar {
	margin-left: 240px; 
	margin-right: 240px;
	
	background-repeat: no-repeat;
	background-position: center top;
	height: auto;

}


/* Contenu secondaire */
#right_sidebar {
	position: absolute; 
	top: 0;
	right: 0;
	width: 240px;
	margin-top: 6px
}


#footer {
	

	text-align: center;
	line-height: 45px;
	color: #FFFFFF;
	font-size: 14px;
	clear: both;
	
}


/* header*/
.header{ height:100px; margin-bottom: 20px}
.header div{padding: 30px 25px 0 0; text-align: right}
.header h1{font-size:20px;color:#80BDEA;margin-top:10px;}

/* content */
.content{ position: relative; height: auto }


/*-- menu GAUCHE ET DROITE */
.menu{ margin: 0 0 10px 0; z-index: 30; position: relative}
.menu a{text-decoration: none;} .menu a:link {color: #504e4e;text-decoration: none} .menu a:visited {color: #504e4e;}.menu a:hover,.menu a:focus {color: #010000;text-decoration: none;}.menu a:active {}
.menu .bottom{ background-image: url("../images/tab_bottom.png"); height:12px; width: 224px; background-repeat: no-repeat;}
.menu .middle{ background-image: url("../images/tab_middle.png"); width: 224px; background-repeat: repeat-y; }
.menu ul{ margin-left: 60px; padding-top: 5px}
	

.menu #pdv .top{  background-image: url("../images/tab_pdv.png"); background-repeat: no-repeat; background-position: top;width: 224px; height: 41px}
.menu #pdv ul li { list-style-image : url("../images/puce_pdv.jpg") ; line-height: 20px }

.menu #chercher{
	font-size: 11px;
}	
.menu #chercher .top{  background-image: url("../images/tab_chercher.png"); background-repeat: no-repeat; background-position: top;width: 224px; height: 34px;border:0px solid red;font-size:12px;}
.menu #chercher ul li { list-style-image : url("../images/puce_pdv.jpg") ; line-height: 20px }	
	
	
.menu #menu .top{  background-image: url("../images/tab_menu.png"); background-repeat: no-repeat; background-position: top;width: 224px; height: 39px}
.menu #menu ul li { list-style-image : url("../images/puce_menu.jpg") ; line-height: 20px;border: 0px solid red;text-align: left; }

.menu ul ul{ margin-left: 6px; padding-top: 5px;}
.menu #menu ul li ul li{ list-style-image : url("../images/puce_menu.jpg") ; line-height: 20px }


.menu #annees .top{  background-image: url("../images/tab_annees.png"); background-repeat: no-repeat; background-position: top; width: 224px; height: 46px}
.menu #annees ul li { list-style-image : url("../images/puce_annees.jpg") ; line-height: 20px; }

.menu #photos .top{  background-image: url("../images/tab_photos.png"); background-repeat: no-repeat; background-position: top; width: 224px; height: 42px}
.menu #photos .middle{ height: 490px;}
.menu #photos #content_photos{height:490px; width: 210px; overflow-y: auto;overflow-x:none;position:relative;}
.menu #photos ul{margin-left: 30px; height: auto;}
.menu #photos ul li {border: 0px solid red;list-style: none; width: 150px; height: 45px; margin:5px 0 5px 0; position:relative;}
.menu #photos ul li img{ margin: 7px 3px 7px 3px; }
.menu #photos ul li span{border: 0px solid red;font-size:11px;position:absolute;top:19px;left:55px;width: 100px;height:15px;}
.menu #photos a{ display: block; width: 100%;text-decoration: none;} 
.menu #photos a:link {background-color: #FFFFFF;text-decoration: none} 
.menu #photos a:visited {background-color: #FFFFFF;}
.menu #photos a:hover,.menu #photos a:focus {background-color: #d1d1d1;text-decoration: none;border:0px solid red;}
.menu #photos a:active {background-color:#b2b2b2;}	

.menu #videos .top{  background-image: url("../images/tab_videos.png"); background-repeat: no-repeat; background-position: top; width: 224px; height: 45px}
.menu #videos .middle{ height: 490px;}
.menu #videos #content_photos{height:490px; width: 210px; overflow-y: auto;overflow-x:none;position:relative;}
.menu #videos ul{margin-left: 30px; height: auto;}
.menu #videos ul li {border: 0px solid red;list-style: none; width: 150px; height: 45px; margin:5px 0 5px 0; position:relative;}
.menu #videos ul li img{ margin: 7px 3px 7px 3px; }
.menu #videos ul li span{border: 0px solid red;font-size:11px;position:absolute;top:19px;left:55px;width: 100px;height:15px;}
.menu #videos a{ display: block; width: 100%;text-decoration: none;} 
.menu #videos a:link {background-color: #FFFFFF;text-decoration: none} 
.menu #videos a:visited {background-color: #FFFFFF;}
.menu #videos a:hover,.menu #photos a:focus {background-color: #d1d1d1;text-decoration: none;border:0px solid red;}
.menu #videos a:active {background-color:#b2b2b2;}	

.menu #zoom .top{  background-image: url("../images/tab_zoom.png"); background-repeat: no-repeat; background-position: top; width: 224px; height: 34px}

.menu #calendar .top{  background-image: url("../images/tab_calendar.png"); background-repeat: no-repeat; background-position: top; width: 224px; height: 42px}


/*-- PAGE CENTRALE formulaire login */
#form_login{position: absolute; left:0px;width: 360px; height: 188px; margin-left: calc(50% - 180px); margin-top: calc(30vh - 100px); color: #353535;  }
#form_login .top{background-image: url("../images/form_bienvenu.png"); background-repeat: no-repeat; background-position: top; width: 321px; height: 62px}
#form_login .bottom{background-image: url("../images/form_bottom.png"); height:24px; width: 321px; background-repeat: no-repeat;}
#form_login label { text-align: right; margin-right: 5px;width: 130px; display: block;float:left; line-height: -14px }
#form_login input{ margin-bottom: 5px }
#form_login p{ width: 81px; padding:13px 0 13px 40%;}
#form_login	.middle{ background-image: url("../images/form_middle.png"); width: 321px; background-repeat: repeat-y; }

#form_login input{
	width: 140px;
}
#form_login table{
	font-size: 11px;
	color: #666666;
	
}
#form_login a{
	color: #666666;
}
#form_login p{
	border: 0px solid red;
	padding: 0;
	margin: 0;
	margin-left: 55px;
	margin-bottom: 10px;
	width: 100%;
}
/* Ajouts Gui Login */
#form_login #login-ctnr label.col-form-label-sm { font-size: 0.95rem; }
#form_login #login-ctnr a { font-size: 0.85rem; }
#form_login #login-ctnr .icon {
    left: 20px;
    top: 10px;
    height: 29px;
    width: 29px;
}


/*--PAGE CENTRALE Mulitmedia : */
#block {
	width: 100%;
	margin-top: 31px;
}

.joker{

	background:black;
	height:16px;
	margin:auto;

}

html:not([lang*=""]) .joker{
	width:99%;
}


@media screen and (-webkit-min-device-pixel-ratio:0) {

	.joker{
	width:99%;
	}

}


#top-border {
	width: 100%;
	float: left;
	height: 16px;

}

#top-left-corner {
	float: left;
	width: 16px;
	height: 16px;
	background: url(../images/corners/top-left-corner.png) top left no-repeat;
}

#top-right-corner {
	float: right;
	width: 16px;
	height: 16px;
	background: url(../images/corners/top-right-corner.png) top right no-repeat;
}

#contentMedia {
	float: left;
	clear: left;
	width: 94.9%;
	padding: 2.5%;
	background-color: black;
	color: white;
	/**height: 600px;**/
}
html[xmlns*=""] body:last-child #contentMedia{
	width: 95%;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
#contentMedia {
	width: 95.2%;
}

}

#contentMedia , x:-moz-any-link, x:default{
	width: 95%;

}

/**ie7**/
*+html #contentMedia {
	width: 94.9%;
}



#bottom-border {
	float: left;
	clear: left;
	width: 100%;
}

#bottom-left-corner {
	float: left;
	width: 16px;
	height: 16px;
	background: url(../images/corners/bottom-left-corner.png) top left no-repeat;
}

#bottom-right-corner {
	float: right;
	width: 16px;
	height: 16px;
	background: url(../images/corners/bottom-right-corner.png) top right no-repeat;
}

#image_centrale{
	margin-top: 5px;
	text-align: center;
	
}

#image_centrale>img{
	width:100%;
}


/**la pagination**/
div.pagination 
{
    padding: 3px;
    margin: 3px;
}

div.pagination a 
{
    padding: 2px 5px 2px 5px;
    margin: 2px;
    border: 1px solid #AAAADD;
    text-decoration: none; /* no underline */
    color: #FFFFFF;
}

div.pagination a:hover, div.pagination a:active 
{
    border: 1px solid #000099;
    background-color: #FFFFFF;
    color: #000000;
}

div.pagination span.current 
{
    padding: 2px 5px 2px 5px;
    margin: 2px;
    border: 1px solid #000099;
    font-weight: bold;
    background-color: #993300;
    color: #FFF;
}
div.pagination span.disabled 
{
    padding: 2px 5px 2px 5px;
    margin: 2px;
    border: 1px solid #EEE;
    color: #DDD;
} 


#liste_mots{
	font-size: 14px;
	width: 160px;
	border: 0px solid red;
	margin-left: 0;
	text-align: right;

	
}

#date_debut{
	font-size: 8px;
}
#date_fin{
	font-size: 8px;
}

a.telecharger,a.telecharger:hover,a.telecharger:visited{
	color:white;
}


.containerspace{
	padding: 60px 15px 0;
}

.centered-title {
	margin-top: 20px;
  text-align: center;
}
/* Create four equal columns that sits next to each other */
.column {
  flex: 25%;

  padding: 0 4px;
}

/* .column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
} */

.column img {
  margin-top: 8px;
  vertical-align: middle;
   height: 20vw; /* Hauteur basée sur la largeur de la fenêtre */
   max-height: 300px; /* Hauteur maximale pour éviter que les images deviennent trop grandes */
   min-height: 150px; /* Hauteur minimale pour garantir lisibilité sur petits écrans */
   width: 100%; /* Les images remplissent leur conteneur */
   object-fit: cover; /* Recadre l'image sans la déformer */
   display: block; /* Supprime l'espace en dessous */
}

.sep{
	margin-top: 6px;
}
/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}



/* GA 12/2021 */

.fancybox-content {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}



/******* MATERIAL ICONS *******/


body .material-icons, body .material-icons-outlined {
	font-size: 24px;
	line-height: 0.5;
	position: relative;
    bottom: -6px;
    left: -2px;
    margin-right: 1px;
}
body .btn-sm .material-icons, body .btn-sm .material-icons-outlined {
    font-size: 22px;
    bottom: -5px;
}

body .material-icons.mi-title, body .material-icons-outlined.mi-title {
    font-size: inherit;
    bottom: -4px;
    left: 0px;
    margin: 0;
}
body h5 .material-icons.mi-title, body h5 .material-icons-outlined.mi-title { bottom: -3px; }

body .material-icons.mi-15, body .material-icons-outlined.mi-15 {
    font-size: 15px;
    bottom: -2px;
    left: 0px;
    margin: 0;
}

body .material-icons.mi-20, body .material-icons-outlined.mi-20 {
    font-size: 20px;
    bottom: -4px;
    left: 0px;
    margin: 0;
}

body .mi-button {
    padding-left: 6px;
    padding-right: 6px;
}
body .mi-button .material-icons, body .mi-button .material-icons-outlined {
    margin: 0;
    left: -1px;
}
body .btn.btn-sm.mi-button { padding: 6px 3px 5px 6px; }
body .btn.btn-mini.mi-button { padding: 4px 4px 4px 6px; }

body .material-icons.mi-small, body .material-icons-outlined.mi-small {
    font-size: 19px;
    bottom: -4px;
    left: -1px;
}

body input.checkbox-btn {
    height: 15px;
    width: 15px;
    cursor: pointer;
    position: relative;
    top: 1px;
}

body input.checkbox-btn:hover, body input.checkbox-btn:focus {
    box-shadow: 2px 2px 0 0 rgb(38 143 255 / 40%), -1px -1px 0 0 rgb(38 143 255 / 40%) inset;
}

/******* END MATERIAL ICONS ********/



.input-group.nav-item { margin-left:12px; }

/******** RESPONSIVE DESIGN *********/
.ctnr-responsive {
	
	width: 100%; /* Largeur fluide */
	  max-width: 1200px; /* Largeur maximale */
	  margin: 0 auto; /* Centre horizontalement */
	  padding: 0 15px; /* Ajoute un peu d'espace sur les côtés */
	
}
/* Conteneur principal */
.list-responsive {
  display: grid; /* Utilisation de la grille */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Colonnes flexibles */
  gap: 20px; /* Espacement entre les items */
  justify-content: center; /* Centre la grille horizontalement */
  align-items: start; /* Aligne les items en haut */
  max-width: 100%; /* Limite la largeur */
  padding: 20px; /* Espacement interne */
  margin: 0 auto; /* Centre le conteneur sur la page */
 
}

/* Images */
img.img-responsive {
  width: 100%; /* Images prennent 100% de leur conteneur */
  height: auto; /* Conservent les proportions */
  border-radius: 8px; /* Coins arrondis pour une meilleure esthétique */
}

/* Divs pour chaque colonne */
.list-responsive > div {
  text-align: center; /* Centre le contenu */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Boutons d'action */
.photo-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px; /* Espacement entre les icônes et le texte */
}
/* Exemple de points de rupture */
@media screen and (min-width: 1200px) { /* Écrans larges */
 
}
@media (max-width: 768px) {
  .list-responsive > div {
	flex: 0 0 calc(50% - 15px); /* Pour les petits écrans, 50% de largeur par colonne */
  }
}

@media (max-width: 576px) {
  .list-responsive > div {
	flex: 0 0 calc(100% - 15px); /* Sur mobile, 100% de largeur */
  }
}

.thumbnail-caption { }
.thumbnail-link {margin-left: 5px;}

#contact_form form {
	width: 100% !important;
}

/**infos pour une photo**/
.photo-info {
	margin-top: 8px;
	font-size: 0.9rem;
}

.photo-info .photo-date {
	font-weight: bold;
}

.photo-info .photo-download i,
.photo-info .photo-info-icon i {
	font-size: 1.2rem;
	cursor: pointer;
}

.photo-info .photo-info-icon {
	color: #007bff;
}

.photo-info .photo-info-icon:hover {
	color: #0056b3;
}

/* Barre d'infos en overlay pour le mode slider */
.photo-info-overlay {
	position: absolute;
	bottom: 20px;
	left: 20px;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	padding: 8px 12px;
	border-radius: 4px;
	font-size: 0.9rem;
	z-index: 10;
	display: flex;
	align-items: center;
	gap: 10px;
}

.photo-info-overlay .photo-date {
	font-weight: bold;
	color: #fff;
}

.photo-info-overlay .photo-download i,
.photo-info-overlay .photo-info-icon i {
	font-size: 1.2rem;
	color: #fff;
	cursor: pointer;
}

.photo-info-overlay .photo-info-icon:hover {
	color: #f0f0f0;
}

/* --- POINTS DE VUE --- */

/* Conteneur des colonnes */
.centered-title {
  margin-top: 20px;
  text-align: center;
  font-size: 2rem; /* Augmente la taille du titre */
  font-weight: bold;
  color: #333; /* Ajuste la couleur si nécessaire */
}

.row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Centre les colonnes horizontalement */
  gap: 15px; /* Ajoute un espacement uniforme entre les colonnes et les rangées */
  margin: 20px auto; /* Espacement autour de la grille */
  max-width: 1200px; /* Largeur maximale de la grille */
}

.column {
  flex: 0 0 23%; /* Chaque colonne prend environ 23% de la largeur */
  max-width: 23%; /* Empêche les colonnes de dépasser 23% */
  margin: 0; /* Supprime les marges inutiles */
  text-align: center; /* Centre le texte sous les images */
}

.column img {
  margin-top: 8px;
  height: auto;
  max-width: 100%; /* Les images remplissent leur conteneur */
  object-fit: cover; /* Ajuste les proportions sans déformer l'image */
  border-radius: 10px; /* Ajoute des coins arrondis */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ajoute une ombre douce */
  display: block; /* Supprime les espaces blancs sous l'image */
}

.column span {
  display: block;
  margin-top: 5px; /* Ajoute un peu d'espace entre l'image et le texte */
  font-size: 0.9rem;
  color: #333; /* Couleur du texte */
}

/* Espacement responsive */
@media screen and (max-width: 800px) {
  .column {
	flex: 0 0 48%; /* Deux colonnes par rangée */
	max-width: 48%;
  }
}

@media screen and (max-width: 500px) {
  .column {
	flex: 0 0 100%; /* Une seule colonne par rangée */
	max-width: 100%;
  }
}


.titalbum {
	font-size: 1.2rem; /* Taille légèrement plus grande */
	font-weight: bold; /* Texte en gras */
	color: #ffffff !important; /* Texte en blanc */
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Ombre portée pour le contraste */
	background-color: rgba(0, 0, 0, 0.6); /* Fond noir semi-transparent */
	padding: 8px 12px; /* Espacement autour du texte */
	border-radius: 5px; /* Coins arrondis */
	text-align: center; /* Centré */
	display: inline-block; /* Largeur ajustée au texte */
	max-width: 90%; /* Pour éviter les débordements */
	margin: 5px auto; /* Centré horizontalement */
	position: relative; /* Positionnement relatif pour ajustements */
	z-index: 1; /* Assure que le texte reste visible au-dessus */
}

.row {
  display: flex;
  flex-wrap: wrap; /* S'empile si manque d'espace */
  justify-content: space-between; /* Équilibre entre colonnes */
  margin: 0 auto;
  max-width: 1200px;
}

.w-100 {
  flex-basis: 100%;
  height: 0;
}

.fotorama{
	width:100%;
}

.fotorama__wrap {
  height: 100vh !important;
}

.fotorama__stage {
  height: 100vh !important;
  padding-bottom: 20px; /* Ajusté à 20px */
}

.fotorama__nav-wrap {
  padding: 5px 0;
  height: 70px;
}

.fotorama__nav--thumbs {
  background: transparent !important;
}

.fotorama__nav-wrap:hover {
  box-shadow: 0 -5px 15px rgba(0,0,0,0.3);
}


/* Style général du calendrier */
.ui-datepicker {
	font-family: Arial, sans-serif !important;
	font-size: 14px !important;
	background-color: #222 !important; /* Fond sombre */
	color: #fff !important; /* Texte blanc */
	border: 1px solid #444 !important; /* Bordure */
	border-radius: 10px !important; /* Coins arrondis */
	padding: 15px !important; /* Espacement interne */
	width: 340px !important; /* Largeur augmentée */
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.7) !important; /* Ombre */
}

/* Supprime le fond par défaut de jQuery UI */
.ui-state-default {
	background: none !important; /* Supprime le fond actuel */
	background-color: #2e2e2e !important; /* Fond sombre */
	color: #ffffff !important; /* Texte blanc pour contraste */
	border: 1px solid #444 !important; /* Bordure sombre */
	font-weight: normal !important;
	box-shadow: none !important;
	text-shadow: none !important; /* Supprime les ombres de texte */
}

/* État survol */
.ui-state-default:hover {
	background-color: #555 !important; /* Fond plus clair au survol */
	color: #ffffff !important; /* Texte blanc */
}

/* État actif ou sélectionné */
.ui-state-active {
	background-color: #007bff !important; /* Fond bleu pour jour actif */
	color: #ffffff !important; /* Texte blanc */
	font-weight: bold !important;
	border-color: #0056b3 !important; /* Bordure bleue */
}

#datepickercontainer{
	
	position: sticky;
	top: 10px; /* Distance par rapport au haut de l'écran */
	z-index: 1000; 
}