/* ==========================================================================
   Colonnes – Programme GPE Cameroun
   Thème : bleu institutionnel + vert GPE
   ========================================================================== */

/* --------------------------------------------------------------------------
   Mise en page multi-colonnes (float)
   -------------------------------------------------------------------------- */
.colonne      { float: left; }
.colonne2     { float: left; width: 50%; }
.colonne60    { float: left; width: 60%; }
.colonne40    { float: left; width: 40%; }
.colonne_suite { float: left; }
.colonne4     { float: left; width: 25%; }
.colonne5     { float: left; width: 20%; }
.colonne3     { float: left; width: 33%; }
.colonne10    { float: left; width: 10%; }
.colonne80    { float: left; width: 80%; }

/* --------------------------------------------------------------------------
   En-têtes de colonnes tableau
   -------------------------------------------------------------------------- */
.colonneth {
	background: var(--gpe-blue, #123b7a);
	border: 1px solid var(--gpe-blue-dark, #082955);
	border-top: 2px solid var(--gpe-blue-dark, #082955);
	border-bottom: 2px solid var(--gpe-blue-dark, #082955);
	color: #ffffff;
	font-weight: 700;
	overflow: hidden;
	padding: 7px 10px;
	text-align: left;
	white-space: nowrap;
}

/* Cellules de colonnes */
.colonnetd {
	border: 1px solid var(--gpe-line, #d9e2ec);
	border-top: 0;
	overflow: hidden;
	padding: 6px 10px;
	vertical-align: top;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Système d'onglets PMB – recolorisé GPE Cameroun
   Légende :
     .content    = zone de contenu de l'onglet actif
     .tabs       = conteneur des onglets
     .tab        = onglet inactif
     .tabHover   = onglet survol
     .tabActive  = onglet actif
   -------------------------------------------------------------------------- */

.content {
	background-color: #ffffff;
	border: 1px solid var(--gpe-line, #d9e2ec);
	border-top: 1px solid var(--gpe-line, #d9e2ec);
	border-radius: 0 5px 5px 5px;
	box-shadow: 0 2px 8px rgba(18, 59, 122, 0.06);
	font-family: Arial, Helvetica, sans-serif;
	margin-left: 0;
	padding: 12px 14px;
	position: relative;
	top: -1px;
	width: 100%;
	z-index: 500;
}

.content .padder { height: 200px; }

/* Positionnement des onglets */
div.tabs {
	cursor: default;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: 700;
	left: 174px;
	line-height: 16px;
	position: absolute;
	top: 11px;
	white-space: nowrap;
	z-index: 1000;
	-moz-user-select: none;
}

.content div.tabs {
	left: 52px;
	top: 20px;
}

/* Onglet inactif */
.tab {
	background-color: var(--gpe-soft-blue, #eaf2fb);
	border: 1px solid var(--gpe-blue, #123b7a);
	border-bottom-width: 0;
	border-radius: 4px 4px 0 0;
	color: var(--gpe-blue-dark, #082955);
	padding: 4px 10px;
	transition: background-color 0.12s ease, color 0.12s ease;
	z-index: 100;
}

/* Onglet survol */
.tabHover {
	background-color: var(--gpe-blue, #123b7a);
	border-bottom-width: 0;
	border-radius: 4px 4px 0 0;
	color: #ffffff;
	z-index: 1200;
}

/* Onglet actif */
.tabActive {
	background-color: #ffffff;
	border: 1px solid var(--gpe-line, #d9e2ec);
	border-bottom-color: #ffffff;
	border-radius: 4px 4px 0 0;
	color: var(--gpe-blue-dark, #082955);
	font-weight: 700;
	padding: 4px 10px;
	z-index: 10000;
}

/* Panneau source (viewsrc) */
#viewsrc {
	background-color: #ffffff;
	border: 1px solid var(--gpe-blue, #123b7a);
	border-radius: 4px;
	margin: 8px;
	position: absolute;
	width: 130px;
}