/* new color variables 
            --6eme: #ff6600;
            --5eme: #008000;
            --4eme: #0f6bad; clair: #e7f0f7 sombre: #0a4b79
            --3eme: #ffdd33;*/
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");
:root {
            --niveau: #0f6bad;
            --border-color: var(--niveau);
}     
a {text-decoration: none !important;}
.btn.btn-secondary {background-color: var(--niveau); border-color: var(--niveau); color: white;}
.btn.btn-secondary:hover, .btn.btn-secondary:active .btn.btn-secondary:focus {background-color:var(--sombre); color: #ffffff;box-shadow:0px 0px 0px 3px var(--niveau);}


/* En-tête blanc*/
.container-header {
            background-color: white; /* Solid background of your header */
            background-image: none;  /* Set to none if you want to disable the gradient */
}

.container-header .navbar-toggler {
  margin-left: auto;
  margin-right: 1rem;
}
ul.mod-menu, ul.mod-menu_dropdown-metismenu button {
  font-weight: bold;
}

/* Liens de menu noirs dans l'entête */
.nav-item {color: #303030;  
           margin-left: auto;
           margin-right: 1rem;}


/*!* aligner logo et menu à gauche */
.container-header .container-nav {
   flex-wrap: wrap;
   justify-content: space-between;
   padding-right: 1rem;
   padding-bottom: 1em;
   border-bottom: 1px solid dimgrey;
   margin-top:0.5rem;
}

/* Changer la couleur de fond du bouton hamburger */
.container-header .navbar-toggler {
  background-color: #ffffff;
  color: #000000;
  border-color: #000000;
  border-radius: 4px;
  padding: 0.5rem;
}
/* Modifier l'effet au survol (hover) ou au focus */
.container-header .navbar-toggler:focus,
.container-header .navbar-toggler:hover {
  background-color: #303030;
  color: #ffffff;
  box-shadow: 0 0 0 0.2rem rgba(50, 86, 50, 0.25);
}

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

/* Fond blanc pour la zone des articles / contenu principal */
 .item-page {
	background-color: #ffffff;
	padding: 20px; 
	margin-top: 10px;
	margin-bottom: 20px;
	border-radius: 3px; 
}

.footer {
            background-color: black;
            background-image: none;  /* Set to none if you want to disable the gradient */
            color: #9f9f9f; 
}

/*---------------------custom css J4-------------------------*/
.carte {
	padding: 5px 10px px 10px;
	border-style: solid;
	border-width: 1px; 
	border-color: #eaeaea;
	border-radius: 1px;}

.citation {
     margin-left: 5rem;
     padding : 10px;
     border-left: 0.25rem solid gray;
     background-color: #f5f5f5;
     font-style: italic;
}
.seven {
    margin: 10px 10px 10px 30px;
    padding : 5px;
	border-style: solid;
    border-width: 1px; 
	border-color: #c8c8c8;
	background-color: #f5f5f5;
	border-radius: 10px;
	
}
/*---------------------------------6--------------*/
.exo6{background-color:var(--niveau); color: #ffffff;}
.exo6:link, .exo6:visited, .exo6:hover, .exo6:active {color: #ffffff; background-color:var(--niveau);}
.titre6 {    
	padding: 5px 0px 5px 5px;
	border-width: 0px 0px 1px 4px;
  	border-style: solid;
  	border-color: var(--niveau);
    background-color :#f5f5f5;}
.seven6 {
    padding: 10px 5px 5px 20px;
	border-style: solid;
    border-width: 1px 1px 1px 5px; 
	border-color: var(--niveau);
	background-color: #ffeddd;
	border-radius: 3px;}

/*---------------------------------5--------------*/
.exo5, .exo5:link {padding: 4px 10px 4px 10px; background-color:var(--niveau); color: #ffffff;}
.exo5:hover, .exo5:active .exo5:focus {background-color:var(--niveau); color: #ffffff;box-shadow:0px 0px 0px 3px var(--niveau);}
.exo5:visited {background-color:#005500; color: #ffffff;}
.titre5 {    
	padding: 5px 0px 5px 5px;
	border-width: 0px 0px 1px 4px;
  	border-style: solid;
  	border-color: var(--niveau);
    background-color :#f5f5f5;}
.seven5 {
 padding: 10px 5px 5px 20px;
	border-style: solid;
    border-width: 1px 1px 1px 5px; 
	border-color: var(--niveau);
	background-color: #f3ffdd;
    border-radius: 3px;}

/*---------------------------------4--------------*/
.exo4, .exo4:link {padding: 4px 10px 4px 10px; background-color:var(--niveau); color: #ffffff;}
.exo4:hover, .exo4:active {color: #ffffff; background-color: var(--niveau);}
.exo5:visited {background-color:#0a4b79; color: #ffffff;}
.titre4 {    
	padding: 5px 0px 5px 5px;
	border-width: 0px 0px 1px 4px;
  	border-style: solid;
  	border-color: var(--niveau);
background-color :#f5f5f5;}
.seven4 {
   padding: 10px 5px 5px 20px;
   border-style: solid;
   border-width: 1px 1px 1px 5px; 
   border-color: var(--niveau);
   background-color: #e7f0f7;
   border-radius: 3px;}

/*---------------------------------6--------------*/
.exo3, .exo3:link {padding: 4px 10px 4px 10px; background-color:var(--niveau); color: #ffffff;}
.exo3:visited .exo3:hover, .exo3:active {color: #ffffff; background-color:var(--niveau); }
.titre3 {    
	padding: 5px 0px 5px 5px;
	border-width: 0px 0px 1px 4px;
  	border-style: solid;
  	border-color: var(--niveau);
background-color :#f5f5f5;}
.seven3 {
   padding: 10px 5px 5px 20px;
   border-style: solid;
   border-width: 1px 1px 1px 5px; 
   border-color: var(--niveau);
   background-color: #fffbe7;
	border-radius: 3px;}

.titre
{padding: 5px 0px 5px 5px;
 background-color :#eeeeee;}
 
 /*--------------image accueil ------------------------*/
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);
}