/* -- index */
:root {
		/* colors */
		--cDark: #18534F;
		--cMed: #226D68;
		--cLight: #ECF8F6;
		--cAccent: #D6955B;
		--cAccentLight: #FEEAA1;
		--cBackGround: #D4D3DC;
		--cBlack: #111;
		--cBrown: brown;
		--cRed: #e2001a;
		--cWhite: #eee;
		--cBlue: #1E90FF;
		--cBlue_dark: #1669c4;
		--cTitle: brown;
		--cSubtitle: grey;
		--cLink: #78414a; /*blue;*/
		--menuHover: #e0e0e0;
		--smColor: #90d8b2; /*#feeeef;#F7E1D7; */
		--smWidth: 260px; /*side-menu width*/
		--hoverColor: invert(48%) sepia(71%) saturate(5754%) hue-rotate(188deg) brightness(88%) contrast(101%);
		--artMargin: 15px;
		--border: 0px;
		--topMargin: 50px;
	}
	body {
		position: relative;
		margin: 0;
		padding: 0;
		width: 100%;
		background-color: var(--cBackGround);
	}
	header {
		margin: 0 auto;
	}


	h2 {
		font-family: 'Montserrat'; 
		font-size: 18px;
		color: var(--cDark);
		padding: 0;
		margin: 0;
	}
	h3 {
		color: var(--cMed);
	}
	h4 {
		margin-bottom:5px;
		margin: 1em 0 .25em;
		border-bottom: 2px solid #AAA;
	}
	blockquote {
		font-style: italic;
		color: grey;
		margin-left: 32px;
		border-left: 4px solid #CCC;
		padding-left: 8px;
		font-family: Georgia, "Times New Roman", serif;
	}
	a {
		color: var(--cLink);
		text-decoration:none;
	}
	a:hover {
		color: var(--cBlue);
		/*text-decoration:underline;*/
	}

	.article {
	position: relative;
    font-family: 'Lato'; 
	background: linear-gradient(#fff, var(--cLight));
	/*width: 95%;*/
	min-height:300px;
    border: 3px solid var(--cLight);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	padding: 15px 20px 20px 20px;
	margin: var(--artMargin) var(--artMargin) calc(var(--artMargin)/2) calc(var(--artMargin)/2);
    box-sizing: border-box; 
	transition: all .5s ease; 
	}

	#main {
	outline: var(--cBorder) solid red;
	display: grid; grid-template-columns: 1fr 260px; gap: 0px; padding: 0px; position: relative; 
	position:relative;
	width: 80%; 
	margin: 0 auto;
	transition: all 0.5s ease;
	}

	*,
	*::before,
	*::after {
	  /*box-sizing: border-box;*/
	}

	#fileFilter {float: right;}
	select {
	  background-color: transparent;
	  border: 1px solid #ccc;
	  padding: 0.3em 0.5em 0.3em 0.5em;
	  margin: 0;
	  /*width: 100%;*/
	  font-family: Roboto, Arial, sans-serif;
	  font-size: inherit;
	  cursor: inherit;
	  line-height: inherit;
	}

#newArticle, #newArticle a {
    position: fixed; 
    bottom: 36px; 
    right: 25px; 
    color: white;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); 
    padding: 10px; 
    background-color: var(--cBlue); 
    border-radius: 50%; 
    font-size: 32px; 
    font-weight: 600;
    width: 36px; 
    height: 36px; 
    display: flex;
    justify-content: center;
    align-items: center;
	opacity: 0.75;
    transition: opacity 0.3s ease; /* Transition pour une animation fluide */
}

#newArticle:hover {
    opacity: 1;
    cursor: pointer;
	color: white;
}

.my-button, .my-button a {
    background-color: var(--cBlue);
    border-radius: 5px;
    font-weight: 600;
    color: #fff;
    font-family: 'Roboto';
    font-size: 18px;
    padding: 10px;
    border: none;
    cursor: pointer;
    transition: transform 0.25s ease;
    display: inline-block; 
    text-decoration: none; 
}


.my-button:hover, .my-button a:hover {
    transform: scale(1.025);
	background-color:#1669c4;
}

.page {
	display:block;
	position:relative;
	background: var(--cWhite);
	color: var(--cBlack);
	max-width:640px;
	border-radius: 10px;
	text-align:center;
	margin: 0 auto;
	padding: 20px;
	margin-top: 20px;
}
#updated {
	display:none;
	font-family: monospace;
	text-align:center; 
	font-weight:bold;
	color:var(--cWhite);
	padding:5px;
	background-color:var(--cBlue);
}
/* end INDEX */


/* /////////////////////////////////////////////////////// */



/* TOP MENU */
/* TOP MENU /////////////////////////////////////////////////// */
#site-header {
    height: var(--topMargin); /* Réglez la hauteur selon vos besoins */
    z-index: 100;
    /*box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);*/
    /*font-family: 'Montserrat', sans-serif;
    display: flex;
    align-items: center;
    justify-content: space-between;*/
}

/* USER ICON /////////////////////////////////////////////////*/
#user-icon {
	margin-right: 10px;
	margin-left: 10px;
}
#user-icon img {
	outline: 2px solid var(--cAccent);
	width: 30px;
	border-radius: 50%;
	/*align: center;*/
	vertical-align: middle;
}
.user-icon a {
    text-decoration: none;
}
.user-icon a:hover {

    /*color: orange;*/
}
.user-icon:hover {
    opacity: 1;
    /*filter: drop-shadow(16px 16px 20px blue);*/
    /*filter: sepia(100%);*/
}
#user-icon .tooltip {
	position: absolute;
	top: 40px;
	/*left: 50%;*/
	color:white;
	transform: translateX(-100%);
	background-color: var(--cBlack);
	padding: 5px 10px;
	border-radius: 5px;
	opacity:0;
	/*visibility: hidden;*/
	transition: opacity 0.25s ease-in-out;
		}
#user-icon:hover .tooltip {
	display: inline-block; /* Afficher le texte */
	opacity: 1;/* Rendre le texte complètement visible */
	/*height: 30px; width: 30px;
	width: 80%; height:10%;*/
	/*filter: var(--hoverColor);*/
	
}
.user-icon a:hover {
	/*filter: invert(88%) sepia(13%) saturate(845%) hue-rotate(314deg) brightness(109%) contrast(93%);*/
	/*filter: invert(99%) sepia(0%) saturate(2%) hue-rotate(101deg) brightness(109%) contrast(100%);*/
	
	/*filter: invert(63%) sepia(83%) saturate(5446%) hue-rotate(165deg) brightness(100%) contrast(101%); */
}

/* ................ MENUS ............................................... */
#top-menu {
    border: var(--border) solid grey;
    position: fixed;
	display: flex;
    top: 0;
    left: 0;
    width: 100%;
    min-height: var(--topMargin);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.75) 100%);
    z-index: 100;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     justify-content: space-between;
    align-items: center;
    /*font-family: 'Lato', sans-serif;*/
}
#center-menu {
    outline: var(--border) red solid;
    text-transform: uppercase;
    text-align: center;
}
#top-menu ul {
    list-style-type: none;
    margin: 0;
}
#top-menu ul li {
    display: inline;
    font-weight: bold;
}
#top-menu ul li a {}
#top-menu ul li a:hover {}
#menu-left {
    border: var(--border) dotted grey;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
	font-family: 'Lato', sans-serif;
	font-size: 1.0em;
    text-transform: uppercase;
    font-weight: bold;
	transition: all .5s ease;

}
#menu-left ul {
    /*display: flex;*/
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#menu-left li {
    /*margin-right: 20px;*/
    position: relative;
	width: 100%;
}
#menu-left a, #menu-left .submenu-parent {
    text-decoration: none;
    transition: color 0.3s;
    color: var(--cBlack);
	padding: 4px 4px 4px 4px;/*10px;*/
	/*min-width: 150px;*/
}
#menu-left a:hover {	background-color: var(--menuHover);  transition: .5s;  }
#menu-left .submenu-parent:hover {	    }
#menu-left li:hover .submenu {
    display: block;
    position: absolute;
}
#menu-left .menu-item {
    position: relative;
    display: block;
    /*margin-bottom: 10px;*/
}
#menu-left .submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0%;
    background-color: #fff;
    z-index: 1;
    padding: 0 4px 0 4px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    /*min-width: 150px;*/
    /*margin-top: -10px;*/
}
#menu-left .menu-item:hover .submenu {
    display: block;
}
/* SUBMENU*/
.submenu li {
	float: left;
	padding: 0 0px 0 0px;
    min-width: 100px;
    vertical-align: middle;
    text-align: left;
	cursor: pointer;
}
.submenu li:hover, .submenu li:focus {
	background-color: var(--menuHover); transition: .5s;
	cursor: pointer;
}
.submenu li a {
    display: block; 
    /*padding: 10px;*/
    text-decoration: none;
    color: inherit;
}
.submenu ul {
	display: flex;
	align-items: center;
	cursor: pointer;
	/*padding: 20px;*/
}
.submenu-parent {
    color: var(--cBlack);
    text-decoration: none;
    cursor: pointer;
}
.submenu a {
    color: var(--cBlack);
    text-decoration: none;
	cursor: pointer;
}
.submenu a:hover {
	cursor: pointer;
    /*color: #eee;*/
}
.menu-right { /* Style pour la barre de menu à droite */
	border: var(--border) dotted red;
    /*margin-right: 20px;*/
    display: flex;
    align-items: center;
}

/*//////////////////////////////////////////////////////////////////////////////////////////////////////*/

#menu-icon {	
	
}		
#menu-icon img { 
	height: 30px;	
	display:none;
}	
#menu-icon a:hover {
	filter: var(--hoverColor); /*invert(48%) sepia(71%) saturate(5754%) hue-rotate(188deg) brightness(88%) contrast(101%);*/
	transition: filter 0.5s ease-in-out;
}	
#logo, #logo a {
    margin-left: 5px;
	font-size: 20px;
    font-weight: bold;
	border: var(--border) blue solid;
	text-decoration: none;
}
#logo a:hover {
	/*color:#aaa;*/
	text-decoration:none;
	opacity: 1;
	transition: 0.3s;
	filter: var(--hoverColor);
}
#logo img {
	width:40px;
}

/*/// == MENU MOBILE == //////////////////////////////////////////////////////////////////////////////////////////////////////*/
#menu-mobile2 {
    /*display: none;*/
    text-align: center;
    align-items: center;
    font-family: 'Lato', sans-serif;
    text-transform: uppercase;
    font-weight: bold;
	max-height: 0;
	font-size: 1.0em;
    /*border: 2px solid pink;*/
	/*max-height: 20px; */ /* Ajoutez cette ligne pour initialement masquer le menu */
    overflow: hidden;  /* Assurez-vous de masquer tout contenu qui dépasse la hauteur maximale */
	/*max-height: 100px;*/
    transition: max-height 0.2s;
}
#menu-mobile2.open {
    max-height: 500px; /* Ajustez la hauteur maximale en fonction de vos besoins */
}
#menu-mobile2 ul.submenu2 {
    margin-left: 0;
	display: block;
	max-height: 0;
    transition: max-height 0.2s ease-out;
    overflow: hidden;
	background: #eee;
}
#menu-mobile2 ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
#menu-mobile2.hidden {
    /*display: none;*/
}
#menu-mobile2 li {
    margin: 5px;
}
#menu-mobile2 li.submenu2-parent.expanded ul.submenu {
    display: block;
    max-height: 500px;
}
#menu-mobile2 a {
    text-decoration: none;
    color: black;
}
#menu-mobile2 a:hover {
    text-decoration: none;
    color: black;
}
#menu-mobile2 span {
    cursor: pointer;
}
/* LANGUAGE BAR //////////////////////////////////////// */
#lang-switch {
    /*margin-right: 20px;*/
	border: var(--border) solid green;
	font-family: 'Lato', sans-serif;
    
	/*position: absolute;
	right: 10px;*/
}
#lang-switch a {
	padding: 2px;
    font-size: 10px;
	color: var(--cBlack);	/*color:#666;*/
	text-decoration: none; 
}
#lang-switch a:hover {
	/*color: blue;*/
	background-color: #eee;
	/*color: var(--cWhite);*/
	text-decoration: none; 
}

/* end TOP MENU */




/* /////////////////////////////////////////////////// */	

/* BANNER */
.points {
    position: absolute;
    bottom: 10px;
    right: 10px;
}
.points span {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #666;
    border-radius: 50%;
    margin-right: 5px;
    cursor: pointer;
}
.points span:hover {
    background-color: var(--cAccent);
}
.points span.active {
    background-color: var(--cAccent);
}

#my_banner {
	position: relative;
    margin: 0;
	width:100%;
	min-width:350px;
	height:150px;
	background: var(--cBlack);
	transition: all 0.5s ease;

}
#my_banner img{
	position: absolute;
	top:0;
	left:0;
    width: 100%;height:100%;
	object-fit: cover;
	display: block;
	object-position: 50% 50%;
	opacity: 0;
	display:block;
	transition: all 3s ease-out;
}
#copyright{
	position: absolute;
	bottom: 5px;
    left: 5px;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    opacity: 0.5;
    color: white;
    background-color: black;
    padding: 3px 5px;
    border-radius: 3px
}

/* end BANNER */

/* /////////////////////////////////////////////////// */	

/********************* STYLE ARTICLES ******************************/
.full-width {
    width: 100%;
}
#background {
	background: var(--cBackGround);
	border:0 dotted blue;
}

.pages {
	padding:20px;
	margin:0 auto;
	margin-top:20px; margin-bottom:20px;
	width: 85%;
	font-family: 'Lato',sans-serif;
	background-color: #fff;
	border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
#articles {
	
	display: grid; 
	grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); 
	grid-auto-rows: min-content; 
	gap: 0px; 
	max-width: 99%; 
	margin: 0em; 
	position: relative; height: 100%;
}
.preview {
	overflow:hidden;
	max-height: 500px;
	
}
.more {
    display: block;
	position: absolute;
	bottom:0px;
	width:100%;
	background: linear-gradient(to top, var(--cLight) 50%, transparent); 
	text-align:left;
	padding:30px 0 5px 0px;
}

.article {
	break-inside: avoid-column;
}
.article img {
    max-width: 90%; 
}

.article a:hover{
	color:var(--cBlack);
}

.imgHeader img {
	border-radius: 5px;
}
.article-body {
    overflow: hidden;
}

.article h2 {
    font-family: 'Montserrat'; 
    font-size: 16px;
	padding:0;
	margin: 0;
}
.article h3 {
    font-family: 'Montserrat'; 
	font-style: italic;
    font-size: 14px;
	padding: 0;
	margin: 0;
}
#article-title {
	width: 90%;
	padding: 5px;
	margin: 5px;
	font-family: 'Montserrat'; 
    font-size: 16px;
    color: black;
	color: var(--cDark);
	font-weight: bold;
}
#article-subtitle {
	width: 90%;
	padding: 5px;
	margin: 5px;
	font-family: 'Montserrat'; 
    font-size: 12px;
    color: black;
	color: var(--cDark);
}

/************  BOOKMARK ***************/
.bookmark {
	position: absolute; 
	top:-5px;
	overflow-y:hidden;
	right:5px;
	width:30px; height:30px;
	background-image: url("img/svg/bkm2.svg");
	background-size: contain;
	filter: invert(86%) sepia(17%) saturate(198%) hue-rotate(201deg) brightness(79%) contrast(84%) drop-shadow(2px 2px 1.5px teal); 
	
}



/* /////////////  STYLES ARTICLES //////////////////////////////////////////////// */
.unpublished {
	opacity: 0.75;
	filter: invert(0%) sepia(10%) saturate(50%) brightness(100%) contrast(100%);
}
.sEdito {
	outline: 3px solid var(--cRed);
}
.sUnPublished {
	border: 3px dashed #ccc;
	opacity: 0.75;
}
.sSIRFFnews {
	background: var(--cAccentLight);
	border-radius: 10px;
}
.sSIRFFevents {
	background: #D4D3DC;
	border-radius: 10px;
}

/* CATEGORIES ////////////////////////////////////////////////////// */
.category {
	font-family: 'Lato', 'sans-serif'; 
    font-size: 16px;
    font-weight: 600; 
    color: #7B6954;
    border-bottom: 1px solid #D9D9D9; /* Ligne sous la catégorie */
	display:flex;
	align-items: center;
	vertical-align: middle;
	margin-bottom: 10px;
	/*min-height: 30px;*/
	overflow:hidden;
	white-space: nowrap;
}
.category img {
  width: 32px;
  height: 32px;
  margin-right: 5px;
}
  
/* AUTEURS /////////////////////////////*/  
.auteur, .auteur a {
	font-size: 14px;
	margin-top: 5px;
	margin-bottom: 10px;
	color: #a5acb2;
}
.auteur :hover {
	color: var(--cLink);
}

/******** COMMENTS *********/
#comments {
	position:relative;
	outline:0px solid black;
	transition: all .3s ease;
	height: 0;
	overflow-y:hidden;
	}
.comment_icon {
	position:relative;
	text-align:right;
	margin-right:15px;
	font-family:Lato, sans-serif;
	right:15px;
	padding:5px;
}
.comment_icon img {
	height:40px;
	cursor:pointer;
}
.comment {
	position:relative;
	background:#EEE;
	padding:10px;
	margin:10px 20px 10px 20px;
	border-radius:5px;
	font-family:Lato, sans-serif;
}

#commentLink, #commentLink a {
    opacity: .75;
    font-family: 'Lato', sans-serif;
	font-weight:600;
    border-radius: 5px;
    color: var(--cWhite);
    padding: 10px;
    background: var(--cBlue);
    max-width: 210px;
    margin: 0 auto;
    margin-top: 10px;
    outline: 0px solid red;
    text-align: center; 
}

#commentLink:hover, #commentLink a:hover {
    opacity: 1;
}
#commentForm {
	margin:0 auto;
	width:100%;
}
#commentText {
	width: 95%; 
	height: 100px; 
	margin: 0 auto;
	/*margin-top: 10px;*/

}	

/* ************************************************************ */


.open_SM {
	position: absolute;
	/*display:block;*/
	right: 0 !important;
	width: 260px !important;
	padding: 20px !important;
	}	
.close_SM {
	width: 0 !important;
	/*padding: 0 !important;*/
	right: 0 !important;
	/*transition: padding 5s !important;*/
}	

#side-menu {
	/*position: absolute;*/
	outline: var(--border) solid red;
	width: 260px;
	font-family: "Lato", Helvetica, Arial, sans-serif;
	font-size: 1.0em;
	color: var(--cBlack);
	background-color: var(--cAccentLight); 
	padding: 20px;
	overflow-x: hidden;
	box-sizing: border-box;
	transition: all .25s ease-out;
	/*transition: padding 0s;*/
	/*overflow:hidden;*/
}
#side-menu li,#side-menu ul {
	list-style-type: none;
	font-weight: 600;
	font-size: 14px;
	text-transform: uppercase;
	font-family: "Lato", Helvetica, Arial, sans-serif;
	
}
#side-menu-button{
	display:none;
	color:var(--cAccent);
	background-color:var(--cAccentLight);
	height: 140px;
	width: 20px;
	top:40px;
	border-radius: 10px 0px 0px 10px;
	position:absolute;
	right:0px;
	font-family: 'Lato', Helvetica, Arial, sans-serif;
	font-size:30px;
	cursor:pointer;
	vertical-align: center;
	box-shadow:0 2px 4px rgba(0, 0, 0, 0.1);
	transition: all .51s ease-out;
}
#side-menu-button:hover{
	color:red;
}
.categories-menu ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.categories-menu li {
    margin-left: 2px;
    margin-bottom: 5px;
	/*font-weight: 200;*/
}
.categories-menu a {
    text-decoration: none;
    color: #333; /* Couleur du texte */
}
.categories-menu a:hover {
    color: #007bff; /* Couleur du texte au survol */
}
.categories-menu ul {
    margin-left: 0; /* ou la valeur que vous préférez pour l'indentation */
	font-family: 'Roboto',sans-serif; 
}
input::placeholder {
    /*text-align: right;*/
}
#side-menu h4 {	
	/*outline: 1px solid blue;*/
	font-family: 'Poppins',sans-serif;
	font-weight:600;
	color: var(--cBlack);
	border-bottom: 0.5px solid var(--cAccent);
}


/* ************************************************************ */

footer {	
	display:flex;
	justify-content: center;
    align-items: center;
	position:relative;
    background-color: var(--cBlack);
    color: #fff;
    text-align: center;
    font-family: 'Montserrat'; 
    font-size: 24px;
	}
footer a {
    display: inline-block;
	color: #fff;
    margin: 0 10px;
}	
#toTop {
	position: absolute;
    right: 10px;
	bottom:0px;
    transform: rotate(270deg);
}	

/* ************************************************************ */
.form-control {
  width: 100%;
  border-radius: 5px;
  padding: 10px;
}
.btn {
  background-color: #000;
  color: #fff;
  border-radius: 5px;
  padding: 10px;
  cursor: pointer;
}
.btn input {margin:50px;}
.btn-primary {
  background-color: #007bff;
}

	
/* ////////////////////// RESPONSIVE DESIGN //////////////////////////////////// */
/*
@media (min-width: 20px) {
	#articles{display:grid;grid-template-columns: repeat(1, 1fr);}
	#main {width: 100%;margin: auto;}
	#banner img {min-height: 100px;}
	#banner {min-height: 100px;}
	#menu-icon img {width: 30px;}
	#logo {display:block;}
	#logo {text-align:center;}
	#side-menu {display:none;}
	.menu-left ul {display:none; flex-direction: column;}
	.menu-left {display:none; }
	#lang-switch {flex-direction: column;}
	#editArticle {display:block;}
	#options {width:100%;min-width:400px;border:0px solid blue; order: 2;background:#fff;}
	#article-zone {border:0px solid green; flex-grow: 1; order: 1;}
} 
@media (min-width: 820px) {
	#articles{  display:grid;grid-template-columns: repeat(1, 1fr);}
	#main {width: 90%;margin: auto;}
	#banner img {height: 200px;}
	#banner {height: 200px;}
	#side-menu {min-width: var(--smWidth);}
	#side-menu {position:relative;display:block;}
	#open-side-menu {display:none;}
	#menu-icon img {display:none;}
	#menu-mobile {display:none;}
	#menu-mobile2 {font-family: serif;display: none;}
	#logo {display:block;}
	.menu-left ul {display:block;}
	.menu-left {display:block; }
	#editArticle {display:flex;}
	#options {margin-left:20px;width:400px;border:0px solid blue; order: 2;}
	#article-zone {border:0px solid green; flex-grow: 1; order: 1;}
}
@media (min-width: 1200px) {
	#articles{  
		display:grid;
		grid-template-columns: repeat(2, 1fr);
		}
	.article.full-width {
		border: var(--border);
        width: 100%;
		display:grid;
		grid-template-columns: repeat(1, 1fr);
    }
	#main {width: 80%;margin: auto;}
	#banner {min-height: 300px;}
	#banner img {max-height: 300px;}
	#side-menu {min-width: var(--smWidth);}
	#menu-mobile {display:none;}
}
@media (min-width: 1900px) {
#articles{  display:grid;grid-template-columns: repeat(3, 1fr);}
	#banner img {max-height: 350px;}
	#banner {min-height: 300px;}
	#menu-mobile {display:none;}
}
*/