/* new color variables */
        :root {
            --dark-color: #1B2739;
            --light-color:#FCFDFF;
            --main-background: #E8EFF6;
            --primary-background: #41648C;
	        --primary-textColor: #FCFDFF;
            --secondary-background: #00AFB9;
            --secondary-textColor: #FCFDFF;
            --accent-background: #F07167;
            --accent-textColor: #FFFFFF;
            --primary-gradient: linear-gradient(180deg, #41648C, #234064);
            --secondary-gradient: linear-gradient(180deg, #00AFB9, #006a70);
        }

        body {
            background: var(--main-background); 		/* background of your website */
            color: none; 		/* color of your website */
        }

        a {
            color: var(--secondary-background); /* color of your links */
        }

        .container-header {
            background-color: var(--primary-background); /* Solid background of your header */
            background-image: none;  /* Set to none if you want to disable the gradient */
        }


        .mod-articlesnews-horizontal li, .no-card .newsflash-horiz li {
            background-color: var(--primary-background); /* Solid background of your articlesnews or newsflash modules */
            color: var(--primary-color);  /* Color of your articlesnews or newsflash modules */
			border: 1px solid var(--primary-background); /* Border of your articlesnews or newsflash modules */
        }

        .btn.btn-primary {
            background-color: var(--primary-background); /* background of your primary buttons */
            border-color: var(--primary-background); /* border color of your primary buttons */
            color: var(--primary-textColor); /* text color of your primary buttons */
        }

        .mod-articlesnews-horizontal li .btn.btn-secondary, .no-card .newsflash-horiz li .btn.btn-secondary {
            background-color: var(--accent-background); /* background of your primary buttons */
            border-color: var(--accent-background); /* border color of your primary buttons */
            color: var(--dark-color); /* text color of your primary buttons */
        }

        .btn.btn-secondary {
            background-color: var(--secondary-background); /* background of your secondary buttons */
            border-color: var(--secondary-background); /* border color of your secondary buttons */
            color: var(--secondary-textColor); /* text color of your secondary buttons */
        }

        .bg-info {
            color: var(--accent-textColor);
            background-color: var(--accent-background) !important;
        }

        .card {
            border: 1px solid var(--primary-background); /* border color of your cards */
	        border-radius: 0; /* border radius of your cards */
	        background-color: var(--primary-background); /* background color of your cards */
        }

        .card-header {
            background-color: var(--primary-background); /* background color of your card headers */
            border-bottom: 1px solid var(--primary-background); /* border color of your card headers */
            color: var(--primary-textColor); /* text color of your card headers */
        }

        .card-body {
            background-color: var(--primary-background); /* background color of your card bodies (Joomla Modules) */
            border-bottom: 3px solid var(--accent-background); /* border color of your card bodies */
            color: var(--primary-textColor); /* text color of your card bodies */
        }

        .card-body a {
            color: var(--primary-textColor); /* text color of your card body links */
        }

        .card.secondary {
            border: 1px solid var(--secondary-background); /* border color of your secondary cards */
            border-radius: 0; /* border radius of your secondary cards */
            background-color: var(--secondary-background); /* background color of your secondary cards */
        }

        .card-header.secondary {
            background-color: var(--secondary-background); /* background color of your secondary card headers */
            border-bottom: 1px solid var(--secondary-background); /* border color of your  secondary card headers */
            color: var(--secondary-textColor); /* text color of your card headers */
        }

        .card-body.secondary {
            background-color: var(--secondary-background); /* background color of your secondary card bodies (Joomla Modules) */
            border-bottom: 3px solid var(--secondary-background); /* border color of your secondary card bodies */
            color: var(--secondary-textColor); /* text color of your secondary card bodies */
        }

        .card-body.secondary a {
            color: var(--secondary-textColor); /* text color of your secondary card body links */
        }

        .plg_system_webauthn_login_button svg {
            fill: var(--primary-color); /* color of your webauthn login button icon */
        }

        .footer {
            background-color: var(--secondary-background); /* background color of your footer */
            background-image: none;  /* Set to none if you want to disable the gradient */
            color: var(--secondary-color); /* text color of your footer */
        }

        ::selection {
	        background-color: var(--accent-background); /* background color of your text selection */
			color: var(--dark-color); /* text color of your text selection */
        }

        .metismenu.mod-menu .metismenu-item > ul {
			background-color: var(--secondary-background); /* background color of your dropdown menu */
			border: 1px solid var(--secondary-background); /* border color of your dropdown menu */
	        color: var(--secondary-color); /* text color of your dropdown menu */
		}

        .metismenu.mod-menu .metismenu-item > ul a {
	        color: var(--secondary-color); /* text color of your dropdown menu links */
        }

        .main-top.card.colorpicker-module {
	        background-color: var(--main-background); /* if you want to change the background color of a specific module add a Module Class in the advanced module settings and define it in your css */
	        color: var(--dark-color); /* if you want to change the background color of a specific module add a Module Class in the advanced module settings and define it in your css */
            border: none;
        }

        .colorpicker-module .card-header, .colorpicker-module .card-body  {
            background-color: var(--main-background); /* if you want to change the background color of a specific module add a Module Class in the advanced module settings and define it in your css */
            color: var(--dark-color); /* if you want to change the background color of a specific module add a Module Class in the advanced module settings and define it in your css */
        }

        .article-info {
	        background-color: var(--main-background); /* background color of your article info */
	        padding: 15px 20px; /* padding of your article info */
        }

        .article-info dd {
	        color: var(--main-color); /* text color of your article info */
		}

        .btn.btn-info {
	        background-color: var(--primary-background); /* background color of your info buttons */
            border: 1px solid var(--main-background); /* border width, style and color of your info buttons */
	        color: var(--primary-color); /* text color of your info buttons */
        }

        .btn-primary .icon-white:before {
	        color: var(--primary-textColor); /* text color of your info buttons in primary */
        }

        .btn-secondary .icon-white:before {
            color: var(--secondary-textColor); /* text color of your info buttons in primary */
        }

        .form-control {
	        background-color: var(--main-background); /* background color of your form controls */
	        border: 1px solid var(--main-color); /* border color of your form controls */
	        color: var(--primary-color); /* text color of your form controls */
	        border-radius: 0; /* border radius of your form controls */
        }

        label {
	        font-weight: bold; /* font weight of your labels */
        }

        /* generate a clamp font size for h1, in small viewports it should have 18px in large viewports 28px */
		h1, .h1 {
			font-size: clamp(18px, 5vw, 28px);
		}

		/* generate a clamp font size for h2, in small viewports it should have 16px in large viewports 26px */
		h2, .h2 {
			font-size: clamp(16px, 5vw, 26px);
		}

		/* generate a clamp font size for h3, in small viewports it should have 14px in large viewports 24px */
		h3, .h3 {
			font-size: clamp(14px, 5vw, 24px);
		}

		/* generate a clamp font size for h4, in small viewports it should have 12px in large viewports 22px */
		h4, .h4 {
			font-size: clamp(12px, 5vw, 22px);
		}



ul.mod-menu, ul.mod-menu_dropdown-metismenu button {
  font-weight: bold;
  justify-content: center !important;
  margin-left: 10px;
  margin-top: 2em;
}

a {text-decoration: none !important;}

/*!* aligner logo et menu à gauche */
.container-header .container-nav {
   flex-wrap: wrap;
   justify-content: start;
   padding-bottom: 1em;
   border-bottom: 1px solid dimgrey;
}


/* Fond d'écran gris */
body.site {
	background-color:  	#303030;
}

/* Fond blanc pour la zone des articles / contenu principal */
.site-content, .container.site-content, .item-page {
	background-color: #ffffff;
	padding: 20px; 
	margin-top: 10px;
	margin-bottom: 20px;
	border-radius: 3px; 
}
.site-header {
  background-color: #fffC95; /* Remplacez par le code couleur de votre choix */
}



/*---------------------custom css J4-------------------------*/
.carte {
	padding: 5px 10px px 10px;
	border-style: solid;
	border-width: 1px; 
	border-color: #eaeaea;
	border-radius: 1px;}
.seven {
    padding: 10px 5px 5px 20px;
	border-style: solid;
    border-width: 1px; 
	border-color: #c8c8c8;
	background-color: #f5f5f5;
	border-radius: 10px;
	
}
.exo6{background-color:#ff6600; color: #ffffff;}
.exo6:link, .exo6:visited, .exo6:hover, .exo6:active {color: #ffffff; background-color:#ff6000;}
.titre6 {    
	padding: 5px 0px 5px 5px;
	border-width: 0px 0px 1px 4px;
  	border-style: solid;
  	border-color: #ff6600;
background-color :#f5f5f5;}
.seven6 {
    padding: 10px 5px 5px 20px;
	border-style: solid;
        border-width: 1px 1px 1px 5px; 
	border-color: #ff6600;
	background-color: #ffeddd;
	border-radius: 3px;}

.exo5{background-color:#008000; color: #ffffff;}
.exo5:link, .exo5:visited, .exo5:hover, .exo5:active {color: #ffffff; background-color:#008000;}
.titre5 {    
	padding: 5px 0px 5px 5px;
	border-width: 0px 0px 1px 4px;
  	border-style: solid;
  	border-color: #008000;
background-color :#f5f5f5;}
.seven5 {
 padding: 10px 5px 5px 20px;
	border-style: solid;
        border-width: 1px 1px 1px 5px; 
	border-color: #008000;
	background-color: #f3ffdd;
        border-radius: 3px;
}
.exo4{background-color:#0f6bad; color: #ffffff;}
.exo4:link, .exo4:visited, .exo4:hover, .exo4:active {color: #ffffff; background-color: #0f6bad;}
.titre4 {    
	padding: 5px 0px 5px 5px;
	border-width: 0px 0px 1px 4px;
  	border-style: solid;
  	border-color: #0f6bad;
background-color :#f5f5f5;}
.seven4 {
   padding: 10px 5px 5px 20px;
   border-style: solid;
   border-width: 1px 1px 1px 5px; 
   border-color: #0f6bad;
   background-color: #e5f3fd;
	border-radius: 3px;
}
.exo3{background-color:#ffdd33; color: #ffffff;}
.exo3:link .exo3:visited .exo3:hover, .exo3:active {color: #ffffff; background-color:#ffdd33; }
.titre3 {    
	padding: 5px 0px 5px 5px;
	border-width: 0px 0px 1px 4px;
  	border-style: solid;
  	border-color: #ffdd33;
background-color :#f5f5f5;}
.seven3 {
   padding: 10px 5px 5px 20px;
   border-style: solid;
   border-width: 1px 1px 1px 5px; 
   border-color: #ffdd33;
   background-color: #fffbe7;
	border-radius: 3px;
}
.titre
{padding: 5px 0px 5px 5px;
 background-color :#eeeeee;}

img.website{box-shadow:0 2px 2px 2px rgba(0,0,0,0.2); margin-bottom:10px;}
img.website:hover{box-shadow:0 3px 6px 4px rgba(0,0,0,0.4);}
/*Info-bulle*/
.IB {
  text-decoration: underline;
  text-decoration-style:dashed;
 background-color: #eaeaea;
}
/* Grow Shadow */
.hvr-grow-shadow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow, transform;
  transition-property: box-shadow, transform;
}
.hvr-grow-shadow:hover, .hvr-grow-shadow:focus, .hvr-grow-shadow:active {
  box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}