/*********************************************************************/
/*************** Styles généraux au site *****************************/
/*************** dépend des themes de couleur chargés indépendamment */
/*********************************************************************/

body {
    display: inline-block;
    margin: 0px auto;
    text-align: center;
		max-width:100%; /* important pour que overflow sur tableaux fonctionne */
	background-color: rgba(var(--bg-rgb-color), 0.8);
}
html {
  text-align: center;
}
/**/
a:hover {
	text-decoration: none; 
	color: white !important;
	background-color: #008CBA !important;
}

.trflags a:hover {
	background: transparent !important;	
}
/**/
/**/
img a:hover {   background-color: white !important; }
a:hover img {
  outline: 3px solid #008CBA;
  background-color: white;
}
input[type=button],input[type=submit],input[type=reset] { 
  cursor:pointer;
}
input[type=button]:hover,input[type=submit]:hover,input[type=reset]:hover {
	background-color: #008CBA;
	color: white;
}

.vcenter {
	height: 100%;
	margin: auto;
/*	text-align: center;*/
}

#topwindow {
	background: var(--bg-color);
  display: inline-block;
  margin: 0px auto;
  text-align: center;
	width: 100%;
}
.maincontents {
/*
	background: rgba(var(--bg-rgb-color), 0.8);
  background-color: var(--bg-color);
*/
	background: transparent;	
}

/**/
.maincontents {
/*
	font-size:1.2em;
	font-weight:400;
*/
/**/
	font-size:16pt;
	font-weight:300;
/**/
  color: var(--fg-color);
}
@media screen and (max-width: 576px) {
.maincontents {
	font-size: 1em;
}
}
.maincontents b {
  color: var(--fg-hl-color);
	font-weight:600;
}
.maincontents strong, .maincontents mystrong {
  color: var(--fg-hl-color);
	font-variant:small-caps;
	font-weight:600;
}
.maincontents a:link , .maincontents a:visited {
	color: var(--cust-link-color);
}

.maincontents .packdesc table a:link {
  color: var(--primary);
}

.maincontents .table td, .maincontents .table th {
  color: var(--fg-color);
}

/*********************************************************
* Header de la page avec titre
**********************************************************/
/* texte du titre <h1> */
#hdrtitle {
	font-family: Arial ;
	font-variant: small-caps;
	font-size: 6vw; /* Taille de la font proportionnelle à la largeur de l'écran (en dessous de 700 pixels)*/
	font-weight: bold;
	color: white ;
	/*color: #336699;*/
	margin-bottom: 0pt; margin-top: 0pt; margin-left: 0px; text-align: center;
	/* tests pour détourer le texte du titre... bof... */
	-webkit-text-stroke: 0.5px #336699; /* non standard, mais marche sur firefox et IE et meilleur rendu... */
}

/* on limite la Taille de la font à 2.5em au delà de 700pixels de large */
@media screen and (min-width: 700px) {
	#hdrtitle {
		font-size: 2.5em;
	}
}

/* arrière plan de la bannière, et couleur/alignement du texte */
div.hdrtitle {
	display:flex;
	/*background-image: url(/img/toptxtr.gif);*/
	background-image: url(/img/header1.jpg);
	/*background-image: url(/img/testbandeau.png);*/
	background-repeat: no-repeat;
	background-size: 100% 100%; /* pour stretch de l'image */
	background-color: #111e36; 
	
/* en attente d'une meilleur image
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: center center;
	background-size: cover;
*/		
	color: white ;
	width: 100%;
	min-height: 104px;
  text-align: center;
	border: 0;
	cellpadding: 0;
	margin-left: 0;
	margin-right: 0;
	padding:0;
}
/* pour sous-titre à droite "maj..." */
div.hdrdate {
	color: white ;
	font-size:7pt;
	/*width: 100%;height: 100%;*/
  text-align: right;
	border: 0;
	cellpadding: 0;
	margin-left: 0;
	margin-right: 0;
	padding:0;
}
.logoleft {
	float:left; 
	margin:auto;
	margin-left:5px;
}
.logoleft img{
	max-width:25vw;
}
.logoindex {
	color: #111e36 ;
	font-size:8pt;
}
.logoindex img{
	max-width:140px;
}
.logoright {
	display:flex;
	flex-direction:column;
	float:right; 
	/*margin:auto;*/
}
.logoright img{
	max-width:8vw;
}
/*********************************************************
* Fin Header de la page avec titre
**********************************************************/

/*************** MENU HORIZONTAL utilisé pour packs cartes*************/
/****************************************************************/
.menu-horiz a{
	font-size:0.8rem;
}
.menubar{
	width: 100%;
	display:inline-block;
}
.menubar , .menubar div {
  background-color: RGB(0,54,82);
	background: #1c5079 !important;
}
.menu-horiz, .menu-horiz ul{
padding:0;
margin:0;
list-style:none;
text-align:center;
}

/*** ***/
.menu-horiz li{
display:inline-block;
position:relative;
border-radius:8px 8px 0 0;
margin-top: 2px;
margin-bottom: 0px;
border: 1px solid #333A40;
}
.menu-horiz {
	font-size: 0px; /* 6px; /* controle l'espacemetn entre les items... */
	width : 100%;
	display:inline-block;
}
/* background des liens menus */
.menu-horiz li {
background-color: #729EBF;
background-image:linear-gradient(to bottom, #729EBF 0%, #333A40 100%);
color: white;
}

/* background des liens menus et sous menus au survol */
.menu-horiz li:hover, .menu-horiz li li:hover, .menu-horiz A:hover{
background:#729EBF;
/*background:red; /*POUR TEST!!*/
}

/* les a href */
/*** ***/
.menu-horiz a {
text-decoration:none;
display:block;
/*padding:8px 32px;*/
padding:8px 8px;
color:#fff; /* voir commentaire dans redéfinition plus bas */
}
.menu-horiz li:hover a{
	background: transparent !important;
/*
color:#0F0;
color:#000;
*/
}
/*************** FIN MENU HORIZONTAL utilisé pour packs cartes*************/
/****************************************************************/

/****************************************************************/
/*************** Styles de l'annonce en haut de page ************/
/****************************************************************/
#annonce {
	display:inline-block;
 color: #ffffff; background-color: #333333; 
 text-align: center; 
  margin: 0px auto;
}
.annonce {
	font-size: 0.8em;
  margin: 0px auto;
	color: #ffffff;
	background: black;
}
.annonce.strong {
	font-size: 1em;
	font-weight: 600;
}
.annonce.strong2 {
	font-size: 1.1em;
	font-weight: 600;
	color: #ffffff;
  /*background-color: #336699;*/
  background-color: #28a745;
  max-width:90%;
}
.annonce a , .annonce a:link, .annonce a:visited {
	color: #ffff00;
}
.annonce a:hover { color: #993366 !important;; background-color: #ffffa0 !important;}

/****************************************************************/
/*************** Styles internes de la Home Page ****************/
/****************************************************************/
mystrong {
  font-weight: bold;
  font-size: 1.1em;
}
#idprestable {
	width: 100%;
	/*align: center;*/
	border: 0;
	/*cellpadding: 2px;*/
}


/******************/
#idpage {
  align: left;
  text-align: justify;
	padding:2px 10px;
}

#XXidpage {
  align: center;
  text-align: center;
}	

/******************/
.chapter {
	width: 100%;
	border:0;
}

/******************/
.header{ 
	width:100%;
	text-align: center;
	color: #ffff80;
	color: #ffffff;
/*	font-size: 1.5em;*/
	font-size: 1.3em;
	font-variant:small-caps;
	font-style:italic;
	font-weight: normal;
	/*font-weight: 100;*/
	/*font-weight: 400;*/
	/*font-weight: 500;*/
	/*font-weight: 600;*/
	/*font-weight: bold;*/
	background-color: #336699;
	background-image: -webkit-linear-gradient(top, #003652 0%, #336699 20%);
	padding-top: 0.2em;
}

/*
.header::before {
  content: "";
	display: block;
	height: 10px;
	background-image: linear-gradient(45deg, transparent, #222);
	background-image: linear-gradient(0deg, #336699, #003652);	
}
*/
sep1 {
	display: block;
	height: 20px;
}

.smallheader{ width:100%; text-align: center; color: yellow; background-color: RGB(0,54,82);}
.smallheader{ width:100%; font-size: 1em; text-align: center; color: #ffff80; background-color: #336699;}

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

.descript {
	padding-left : 10px;
	padding-right : 10px;
	padding-top : 2px;
	padding-bottom : 2px;
	text-align : justify;
}
.img , .img td {
	padding: 0;
}

.packdesc { background-color: white;}

/* !important en attendant de rapatrier ici tout chartdescript de home.hdr */
.chartdescript {
	border-color: rgba(var(--fg-rgb-color),0.3) !important;
}

/* On doit redefinir la couleur des links des menus
 * APRES la définition des classes chapter et autres  
 * pour annuler ceux définis dans .chapter, au cas ou le menu est dans un .chapter ...
 * car à priori, l'ordre d'imbrication des classes n'est pas pris en compte...
 * Ou il y a quelque-chose que je n'ai pas compris!...
 * autre alternative serait d'utiliser !important, mais il faudrait le faire également
 * dans les sous-menus si on veux mettre des couleurs spécifiques...
 */
.menu-horiz a:link, .menu-horiz a:visited, .menu-accordeon a:link, .menu-accordeon a:visited {
color:#fff;
}

/* styles de la barre de menu */
/******************************/
.navbar-nav .nav-link {
		text-align: right; 
}
.navbar-nav .dropdown-menu {
    width: fit-content;
    float: right;
}
.nav-item {
    padding-left: 1rem;
    padding-right: 1rem;
}
@media (max-width: 850px)
{
	.nav-item {
		padding-left: 0.5rem;
    padding-right: 0.5rem;
	}
}
.logomenu {
	max-height:40px;
	max-width:40vw;
	margin:3px;
  outline: 3px solid transparent;
}
.logomenu:hover {
    outline: 3px solid #008CBA;
    background-color: transparent;
}
.logomenu-small {
	display:inline;
}
.logomenu-large {
	display:none;
}

.navbar-dark .logomenu {
	content:url("/img/logopourfondnoir.png");
}
.navbar-light .logomenu {
	content:url("/img/logopourfondblanc.png");
}
@media (max-width: 767px)
{
	.navbar-dark .logomenu {
		content:url("/img/logoscannavpourfondnoir.png");
	}
	.navbar-light .logomenu {
		content:url("/img/logoscannavpourfondblanc.png");
	}
	.logomenu-small {
		display:none;
	}
	.logomenu-large {
		display:inline;
	}
}
@media (min-width: 768px)
{
	.logomenu {
		max-width:20vw;
		padding-right:0px;
	}
}
.navbar-brand {
	margin-right: 0.5rem;
	padding:0;
}
.navbar-brand:hover {
	margin-right: 0.5rem;
}

.navbar-brand:hover , .navbar-brand:hover img, .nohl:hover, a.nohl:hover img
{
  background-color: transparent !important;
}
.navbar {
  padding-top:0;
  padding-bottom:0;
	font-weight:500;
}
.navbar a {
	background: transparent;
}
/*
 * Formulaires
 */
form {
	background: var(--form-background);
	color: var(--form-color);
	padding: 10px;
	font-size:1rem;
}

/* On rétabli les paramètres de couleur par défaut de BOOTSTRAP 
/* pour les cards, à savoir noir sur blanc, 
/* pour éviter le blanc sur blanc ...
/* Bootstrap applique en effet un fond mais pas une couleur de fg.
/* L'alternative étant de forcer les fg et bg des card à ceux du thème
/* même problème pour les couleurs de liens dans les boutons
/* notamment btn-primary
/************************************************/
.card {
/*
	background: var(--bg-color);
	color: var(--fg-color);
*/
	background: var(--light);
	color:var(--dark);
}
.card b {
	color:var(--dark);	
}

.card a:link:not([class*="primary"]), .card a:visited:not([class*="primary"]) {
	color:var(--primary);	
}
.btn-primary {
	color:white !important;	
}