/********************************************************\
 *
 * AKTONE — CSS de visualisation (gviz / cviz)
 * Chargé pour les pages de type viz et full
 *
\********************************************************/

/******************************************************************************/
/* TYPOGRAPHIE
/******************************************************************************/
body.dist-page-full  { background-color: var(--primary-base); color: var(--ak-body-color); }
body.dist-page-print { background-color: var(--ak-div-bg); }

/* Scoped aux pages viz pour éviter d'écraser le framework global */
body.dist-page-viz h5,
body.dist-page-full h5 { font-weight: 600; }
body.dist-page-viz a,
body.dist-page-full a  { color: var(--ak-body-color); }

/******************************************************************************/
/* STRUCTURE DE PAGE
/******************************************************************************/
/* Ratio carré pour les blocs géo */
.viz-carre { aspect-ratio: 1 / 1; }

/* Bloc de contrôle (latéral) */
body.dist-page-full #aktone-page-lateral {
	z-index: var(--ak-zindex-over);
	background-color: var(--ak-div-bg);
	overflow: hidden;
	box-shadow: 10px 0px 5px 0px rgba(50,50,50,0.35);
}
body.dist-page-full #aktone-page-principal { z-index: var(--zindex-second); }

/******************************************************************************/
/* BANDEAU VERTICAL
/******************************************************************************/
#gvBlocBandeauV {
	z-index: 1000;
	background-color: var(--primary-base) !important;
	background-image: url(fondv);
	background-repeat: no-repeat;
	background-clip: border-box;
	background-size: clip;
	background-position: bottom;
	overflow: hidden;
	width: 5vw;
	max-width: 5vw;
}
body.dist-page-full #gvBlocBandeauV {
	height: 100vh;
	max-height: 100vh;
	overflow: hidden;
}
#gvBlocBandeauV .navstack-menu {
	position: relative;
	z-index: 1000;
}
#gvBlocBandeauV #titre-site {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 1vw;
	font-size: 1.3vw;
	line-height: 1.5vw;
	height: 5vw;
	color: #000;
	z-index: 999;
	width: 100vh;
	transform: translateY(2.5vw) translateX(2.5vw) translateY(-50vh) translateX(-50vh) rotate(-90deg);
}
#gvBlocBandeauV #titre-site span {
	background: #FFF;
	opacity: 0.6;
	padding: 0 0.5vw;
}

/******************************************************************************/
/* BANDEAU HORIZONTAL
/******************************************************************************/
#titre-site {
	padding: 15px;
	width: 100%;
	margin: 0;
	font-size: 1.3vw;
	font-weight: bold;
	height: auto;
	background-color: var(--primary-base);
	text-align: center;
	color: #FFF;
}
#sstitre-site {
	margin-top: 10px;
	font-size: 1vw;
	color: #FFF;
	text-transform: uppercase;
}
#sstitre {
	margin-top: 10px;
	font-size: 1vw;
	font-weight: normal;
	color: #FFF;
}

/******************************************************************************/
/* BLOC DE CONTRÔLE (#gvBlocControle)
/******************************************************************************/
#gvBlocControle { font-size: 12px; }

#gvBlocControle .multipan-contenu,
#gvBlocControle .multipan-nav ul,
#gvBlocControle .multipan > .multipan-tete { margin: 0; padding: 0; }

#gvBlocControle #panelRecherche { padding-bottom: 300px; }

/* Bouton flottant de recherche/annulation */
#gvBlocControle #bouton_rechercher,
#gvBlocControle .cvizBtnAnnuler {
	position: absolute;
	padding-bottom: 15px;
	font-size: 1.5em;
	line-height: 0.8em;
	color: var(--primary-base);
	font-weight: bold;
	cursor: pointer;
	background: var(--ak-div-bg);
	opacity: 0.8;
}
#gvBlocControle #bouton_rechercher {
	bottom: 0;
	right: 15px;
	text-align: right;
	width: 50%;
}
#gvBlocControle .cvizBtnAnnuler {
	bottom: 0;
	left: 15px;
	text-align: left;
	width: 50%;
}

/* Onglets de navigation (défaut) */
#gvBlocControle ul.bs_navtab li,
#gvBlocControle ul.bs_navtab li a,
#gvBlocControle ul.bs_navtab li .fa-inverse {
	background-color: var(--primary-base);
	color: var(--primary-texte);
	border-color: var(--primary-base);
}
#gvBlocControle ul.bs_navtab .nav-link.active,
#gvBlocControle ul.bs_navtab .nav-link.active a,
#gvBlocControle ul.bs_navtab .nav-link.active .fa-inverse {
	background-color: var(--primary-base);
	color: var(--primary-texte);
	border-color: var(--primary-base);
	font-weight: bolder;
}
#gvBlocControle ul.bs_navtab .nav-link:hover { border-color: var(--primary-base); }

/* Onglets de navigation (vertical) */
#gvBlocControle ul.navstack-menu li { background-color: var(--primary-base) !important; }
#gvBlocControle ul.navstack-menu a  { text-align: center; }

#gvBlocControle ul.bs_navtab li {
	margin-bottom: 0;
	font-weight: bold;
	text-transform: uppercase;
	border-radius: 0;
}

/* Tab-content */
#gvBlocControle .tab-content {
	border-width: 0 !important;
	border-color: transparent;
	padding: 0;
	width: 100%;
	margin: 0;
}
#gvBlocControle .tab-content.tab-content-horizontal { border-width: 0; border-color: transparent; }
#gvBlocControle .nav,
#gvBlocControle .tab-content     { float: none; }
#gvBlocControle .multipan-contenu { padding-right: 0; padding-left: 0; }

/* Contenu scrollable */
#gvBlocControle .contenu {
	position: relative;
	overflow-y: scroll;
	padding: 0 5px 0 0;
}
#gvBlocControle h4 {
	width: 100%;
	text-transform: uppercase;
	font-weight: 300;
	font-size: 12px;
}
#gvBlocControle label.control-label           { color: var(--default-base); }
#gvBlocControle label.checkbox.html-coche-main { font-weight: bold; }
#gvBlocControle label.checkbox.html-coche-sub  { font-weight: 300; }
#gvBlocControle label.checkbox.html-coche-main input,
#gvBlocControle label.checkbox.html-coche-sub input { margin-top: 0; }
#gvBlocControle label.checkbox i              { width: 30px; text-align: center; padding-right: 5px; }
#gvBlocControle span.label-default           { font-weight: 100; margin-left: 15px; padding-top: 3px; }
#gvBlocControle .corePageBtn i               { background-color: var(--primary-base); }
#gvBlocControle .list-group-item             { width: 100%; }
#gvBlocControle .list-group-item-heading     { width: 100%; }
#gvBlocControle .list-group-item-text        { width: 100%; }
#gvBlocControle .gvNbResultats               { font-weight: bold; }

/******************************************************************************/
/* PANNEAUX (gvPanneau)
/******************************************************************************/
#gvBlocControleFlottant {
	position: absolute;
	top: 0;
	left: 0;
	z-index: var(--ak-zindex-over);
	visibility: hidden;
}

.gvPanneau {
	width: 100%;
	margin: 0;
}
.gvPanneau.aktone-bloc-composant       { flex: none; display: block; }
#gvBlocControle .tab-pane .aktone-bloc-composant,
#gvBlocControle .tab-pane h4           { width: 100%; }
#gvBlocControle .tab-pane .aktone-bloc-composant { padding: var(--ak-ecart-unite); }
#gvBlocControle form                   { margin-bottom: 40px; }

.gvPanneau .gvPanneau-titre {
	font-size: 1.2em;
	text-transform: uppercase;
	font-weight: 300;
	padding: 0 0 var(--ak-ecart-unite);
	margin: 0;
}
#gvPanneau-texte p,
#gvPanneau-texte li                    { text-align: justify; }
.gvPanneau .control-label              { text-transform: uppercase; font-weight: 300; }
.gvPanneau label.checkbox              { font-weight: 300; }
.gvPanneau input[type=text]            { border-radius: 4px; margin-bottom: 10px; }
.gvPanneau form i.fas                  { width: 20px; margin-right: 5px; }
.gvPanneau .bs_form_label {
	text-transform: uppercase;
	font-size: 1.2rem;
	padding-top: 25px;
}
.gvPanneau abbr                        { margin-left: 20px; }
#gvBlocControle fieldset               { margin: 0; padding: 0; }
.ak-icon-bloc                          { width: 25px; margin: 5px; text-align: left; display: inline; }

/******************************************************************************/
/* RÉSULTATS (#gvResultats)
/******************************************************************************/
#gvResultats .gvPanneau-titre          { padding-left: var(--ak-ecart-unite); padding-right: var(--ak-ecart-unite); }
#gvResultats .list-group {
	width: 100%;
	margin-top: 0;
	border-top: 1px solid var(--ak-filet-color);
}
#gvResultats .list-group i.fa          { width: 1em; margin-right: 4px; text-align: center; }
#gvResultats a .list-group-item-heading { font-size: 15px; font-weight: 900; }
#gvResultats .list-group-item {
	padding: var(--ak-ecart-unite);
	border-radius: 0;
}
#gvResultats .list-group-item:first-child { border-top: none; }
#gvResultats a.list-group-item span.activite,
#gvResultats a.list-group-item span.ville  { font-weight: bolder; }

/******************************************************************************/
/* BLOC DE VISUALISATION (.htmlViz)
/******************************************************************************/
.htmlViz {
	position: relative;
	z-index: var(--zindex-first); /* défini dans les cssvars du module ; auto sur les autres modules */
	overflow: auto;
	width: 100%;
}
/* En flux : le corps viz ne doit pas s'effondrer à zéro */
body.ak-page-flux   .aktone-bloc-corps.htmlViz { min-height: 1px; }
/* En noflux : la viz remplit son conteneur et se réduit plutôt que de scroller */
body.ak-page-noflux .aktone-bloc-corps.htmlViz { overflow: hidden; }

.htmlViz .btnsvg {
	z-index: var(--ak-zindex-top);
	position: absolute;
	top: 0;
	right: 0;
}

/* Légende */
.htmlViz .legende {
	position: absolute;
	width: 300px;
	z-index: var(--ak-zindex-over);
}
.htmlViz .legende-item {
	display: flex;
	align-items: center;
	height: 25px;
	text-align: left;
}
.htmlViz .legende-couleur {
	flex: 0 0 15px;
	width: 15px;
	height: 15px;
	margin: 10px;
}
.htmlViz .legende-nom {
	flex: 1 1 auto;
	height: 25px;
	padding: 10px 10px 10px 0;
	overflow: hidden;
}

/******************************************************************************/
/* LEAFLET / CARTO
/******************************************************************************/
.leaflet-container svg text {
	font-size: 40px;
	color: #FFF;
}
.leaflet-popup-content-wrapper,
.insights-tooltip,
.interaction-conteneur {
	border-left: 5px solid var(--ak-filet-color);
	border-radius: 0 !important;
	background-color: var(--ak-div-bg);
	max-width: 120px;
}
.leaflet-popup-content,
.interaction-contenu              { margin: 5px !important; }
.leaflet-popup-content a:hover    { color: var(--ak-body-color); }

/* Markers */
.mydivicon {
	width: 2px;
	height: 2px;
	border-radius: 10px;
	background: transparent;
	border-width: 3px;
	border-style: solid;
	opacity: 0.6;
}

/* Positionnement des contrôles Leaflet sur page viz */
body.dist-page-viz .leaflet-top.leaflet-left  { top: 100px; }
body.dist-page-viz .leaflet-top.leaflet-right { top: 20px; }
body.dist-page-viz .leaflet-left              { left: 20px; }
body.dist-page-viz .leaflet-right             { right: 20px; }

/******************************************************************************/
/* BOUTONS FLOTTANTS DE PAGE
/******************************************************************************/
#gv-btn-csv   { position: fixed; right: 150px; bottom: 30px; z-index: var(--ak-zindex-over); }
#gv-btn-print { position: fixed; right: 90px;  bottom: 30px; z-index: var(--ak-zindex-over); }
#gv-btn-redim { position: fixed; right: 30px;  bottom: 30px; z-index: var(--ak-zindex-over); }

/******************************************************************************/
/* MODALES ET DIVERS
/******************************************************************************/
h2.modal-title { font-size: 1.5em; }

/* Boutons spéciaux */
.bouton_glyphe  { display: inline-block; }
.btnmultiligne  { white-space: normal; }
a[data-bs-toggle='collapse'],
a[data-bs-toggle='collapse']:hover { text-decoration: none; }

/* Barre de logos */
.divlogos {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 50px;
	padding: 10px;
	background: var(--ak-div-bg);
	display: flex;
	align-items: center;
}
.divlogos img                { margin-right: 30px; }
.divlogos .float-end         { margin-left: auto; padding-top: 7px; }

/* Utilitaires */
.text-justify                { text-align: justify; }