/* SUR PC : On force l'affichage du panneau des couches en permanence */
@media (min-width: 501px) {
    #menu-content {
        display: block !important;
        opacity: 1 !important;
        left: 0px !important; 
    }
}


/*~~~~~~~~~~~~~~~~~~~~~~~supprime les icones du menu~~~~~~~~~~~~~~~~~~~~~~~
img {
    display: none;
    image-orientation: from-image;
}
*/

/* force le texte en Oswald */
body {
    margin: 0;
    font-family: 'Oswald', sans-serif !important;
    font-size: 14px;
    line-height: 20px;
    color: #333;
    background-color: #fff;
}




/*~~~~~~~~~~~~~~~~~~~~~~~Modification de la barre du haut pour un rendu plus esthéthique~~~~~~~~~~~~~~~~~~~~~~~*/

/* Hauteur barre du haut */
/* Si on ne rajoute pas #headermenu, la barre d'outils de recherche d'adresses va être décalée */
#header,#headermenu {
	height: 0px;
	border-bottom: none;
}

/* désaffichage de la barre d'authentification et le logo*/
#auth.navbar-inner div.pull-right ul.nav,#logo {
	display: none;
}

/* Ajout d'une marge permettant de décaler le mini-dock vers le vas et éviter qu'il ne se superpose à la barre de recherche d'adresse */
/* + d'une marge vers la droite pour aligner le mini-dock avec la barre de recherche d'adresse */
#mini-dock,#navbar {
	margin-top: 40px;
	right: 22px;
}

/*~~~~~~~~~~~~~~~~~~~~~~~Changement outil recherche adresse~~~~~~~~~~~~~~~~~~~~~~~*/
/* On descend un peu l'image de la loupe pour qu'elle paraisse mieux centrée */
#headermenu .navbar-search .search-icon {
	top: 3px;
}
/* On modifie l'affichage du bouton pour réinitialisé */
#headermenu .btn-locate-clear.icon {
	background-color: white;
	background-position: -872px 1px;
	border-radius: 20px;
}

/* On agrandit la barre de recherche et on décale le bouton de réinitialisation et on change la police */
#headermenu .navbar-search .search-query {
	font-family: 'Oswald', sans-serif !important;	
	width: 375px;
}

#headermenu .navbar-search {
	width: 430px;
}

/* Sur carto-cccs, la z-index du content = 1 ce qui fait passer le résultat de la recherche d'adresse sous la fenêtre de recherche --> modification donc */
#content {
	z-index: auto;
}

/*~~~~~~~~~~~~~~~~~~~~~~~Modification du panneau des couches~~~~~~~~~~~~~~~~~~~~~~~*/

/* modifie le fond du menu*/
#toolbar div.menu-content, #menu div.menu-content, #dock div.menu-content, #sub-dock div.menu-content, #mini-dock div.menu-content, #right-dock div.menu-content, div.modal div.menu-content {
	background-color:#ffe5e5 ;
}

/* Désaffiche le bandeau en haut du panneau avec marqué Couches
ET le bouton pour fermer le panneau
ET les boutons en haut du panneau permettant de dérouler ou non les légendes
*/
#dock-tabs, #dock-close, #switcher-layers-actions {
	display: none;
}

/* Mise en transparence du fond du panneau et enlèvement de l'effet d'ombre et de la bordure*/
#dock {
	box-shadow: none;
	background-color: transparent !important;
	border: none;
}

/* supprime la bande sous le menu des couches*/
#switcher.active {
    background-color: transparent;
}

/* Changement de la position */
#docks-wrapper {
    left: 20px;
    top: 20px;
}

/* Changement de la police */
#dock {
    font-family: 'Oswald', sans-serif !important;
    top: 0px;
    left: 0px;
}

/* Masquage du bouton I au survol de la couche 
lizmap-treeview .layer-actions {
    display: none;
}
*/

/* Ajout d'une bordure  à demander si on l'ot veut une border autour du menu, si non, mettre border: 0px sol sinon mettre 1px */
#switcher-layers-container {
    border: 0px solid #ffe5e5;
    border-radius: 10px;
}

/* changement de couleur des case de sélection, avant #0094D6 aprés  #370F10FF*/
lizmap-treeview input[type=checkbox] {
    accent-color: #370F10FF;
    flex: 0 0 12px;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~Changer le style du pied de page~~~~~~~~~~~~~~~~~~~~~~~*/
#attribution-ol p{
	font-size: 7pt ;
}

/*~~~~~~~~~~~~~~~~~~~~~~~Modification du panneau de popup~~~~~~~~~~~~~~~~~~~~~~~*/

/*Fond et taille de minidocks et changement de police*/
#mini-dock{
	font-family: 'Oswald', sans-serif !important;
	background:transparent !important;
	box-shadow: 0px 0px 0px rgba( 0, 0, 0, 0.50 );
	border: 0px solid #a9be4d;
	max-height: 100%;
	overflow: auto;
}

#popupcontent div.menu-content{
	max-height: 100% !important;
}

/*Titres de minidocks (avec marqué Popup ou le nom de la couche)*/
#mini-dock h3 , #mini-dock h4 {
	display: none;
}

/*Fond et taille de l'objet contenant les infos de la popup (sinon ça fait un encart disgracieux autour de l'affichage de la popup*/
#mini-dock div.lizmapPopupDiv{
	background:transparent !important;
	padding: 0px 0px 0px 0px;
} 

#mini-dock div.menu-content {
	  background-color: transparent;
	  width: 95%;
}

/* On la police du bouton y aller */
input, button, select, textarea {
    font-family: 'Oswald', sans-serif !important;
}

/* test */
#popupcontent > div.popupcontent > div > div > div > div > div {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}


/* monter le sélectionneur d'images au dessus des crédits */
#content #baselayer-image-selector {
    width: 62px;
    height: 62px;
    position: absolute;
    bottom: 45px;
    right: 10px;
    z-index: 1000;
    border: 2px solid white;
    border-radius: 4px;
    background-image: url(/index.php/view/media/getMedia?repository=ot&project=marque_segala&path=media%2Fthemes%2Fmarque_segala%2Fcss%2F//index.php/view/media/getMedia?repository=ot&project=marque_segala&path=media%2Fthemes%2Fmarque_segala%2Fcss%2F/osm-toner.png);
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: 2px 2px 2px 2px #aaa;
    cursor: pointer;
}

/* je décale le menu pour qu'il sorte de l'écran*/
#mapmenu {
    left: -60px;
}

.icon-remove {
    background-position: -312px 0;
    background-color: #E80732FF;
}

#map-content {
    margin-left: 0px;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~AFFICHAGE MOBILE~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

@media only screen and (max-width: 500px) {
	
	/* Suppression de l'echelle */
	#overview-box {
    z-index: 999;
    position: absolute;
    right: 10px;
    bottom: 40px;
    border: solid 1px #606060;
    border-top: none;
	}	

	/* Suppression des boutons de navigation */

	#menu-content {
    display: none; /* Le JavaScript pourra le remplacer par display: block quand vous cliquerez */
	}	
	#navbar {
		display: none;
	}
	
	/* Déplacement de l'image pour sélectionner le fond de carte */
	#logo {
		display: none;
	}
	
	/* Déplacement de la barre de recherche d'adresse */
	#headermenu.mobile #auth form#nominatim-search {
        right: 26px;
		top: 0px;
    }
	
	/* Réduction de la taille de la barre de recherche d'adresse */
	#headermenu .navbar-search .search-query {
    width: 200px;
	}
	
	/* Réduction des marges autour du titre dans le panneau de gauche */
	#mapmenu > p {
        margin: 15px 0px 5px 0px !important;
    }
	
	#mapmenu {
		padding-top: 5px;
	}
	
	/* Réduction des marges au-dessus de noms de menu */
	#mapmenu > div {
        top: 0px;
    }
	
	/* déplacement des noms de menu + harmonisation des couleurs */
	#mapmenu > div > ul, #mapmenu > div > ul li {
        margin: 0px;
        background-color: transparent;
		padding-left: 10px;
    }
	
	/* diminution taille police et interligne nom de menu */
	#mapmenu .nav-list > li > a {
        font-size: 1em;
		height: 16px;
    }
	
	/* déplace les crédits en bas du menu des outils */
	#mapmenu > #footer_menu {
        top : auto;
		bottom: 5px !important;
    }
	
	/* déplace le dock des outils à gauche et en haut de manière à ce qu'il prenne tout l'écran */
	#docks-wrapper {
		left: 0px;
	}
	
	#dock {
        margin-top: 0px;
    }
	
	/* changer couleur fond menu actif */
	#mapmenu > div > ul li.active {
		background-color: #F0F0F0;
    }
	
	/* changer couleur icone menu actif */
	#mapmenu .nav-list > li.home.active .icon {
		background-position: 0px 0px;
	}
	#mapmenu .nav-list > li.projects.active .icon {
		background-position: -900px 0px;
	}
	#mapmenu .nav-list > li.metadata.active .icon {
		background-position: -100px 0px;
	}
	#mapmenu .nav-list > li.switcher.active .icon {
		background-position: -50px 0px;
	}
	#mapmenu .nav-list > li.legend.active .icon {
		background-position: -50px 0px;
	}
	#mapmenu .nav-list > li.locate.active .icon {
		background-position: -150px 0px;
	}
	#mapmenu .nav-list > li.print.active .icon {
		background-position: -350px 0px;
	}
	#mapmenu .nav-list > li.measure.active .icon {
		background-position: -250px 0px;
	}
	#mapmenu .nav-list > li.edition.active .icon {
		background-position: -450px 0px;
	}
	#mapmenu .nav-list > li.geolocation.active .icon {
		background-position: -300px 0px;
	}
	#mapmenu .nav-list > li.attributeLayers.active .icon {
		background-position: -500px 0px;
	}
	#mapmenu .nav-list > li.permaLink.active .icon {
		background-position: -650px 0px;
	}
	#mapmenu .nav-list > li.tooltip-layer.active .icon {
		background-position: -750px 0px;
	}
	#mapmenu .nav-list > li.timemanager.active .icon {
		background-position: -600px 0px;
	}
	.nav .active > a .icon-white, .nav li > a:hover .icon-white, .nav li > a:focus .icon-white {
    background-image: url(/index.php/view/media/getMedia?repository=ot&project=marque_segala&path=media%2Fthemes%2Fmarque_segala%2Fcss%2F/images/glyphicons-halflings.png);
	}
	
	/* changer couleur fond bouton pour fermer le panneau des outils quand il est ouvert */
	#menuToggle.opened {
		background: #094c67;
    }
	
	/* masquage de l'infobulle avec nom du fond de plan quand on a cliqué une fois sur le background selector */
	#map-content > div.tooltip.fade.top.in {
		display: none !important;
	}
	
	/* suppression de la boite d'attributioon en bas à droite */
	#attribution-box {
		display: none;
	}
	
	/* Masquage des menus inutiles */
	#button-metadata, nav-list .permaLink.nav-minidock {
		display: none;
	}
	
	/* agrandi menu-content pour obliger l'utilisateur à fermer la légende avant de cliquer sur la carte */
	#switcher.active {
   		background-color: #ffe5e5;
	}
	/* monter le sélectionneur d'images au dessus des crédits */
	#content.mobile #baselayer-image-selector {
    bottom: 10px;
    right: none;
    left: 10px;
    top: none;
	}
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ BOUTON MENU MOBILE ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/* Masqué par défaut sur les écrans d'ordinateur */
#mobile-menu-btn {
    display: none;
    position: fixed;
    top: 4px;       
    left: 5px;      
    z-index: 9999;
    background-color: #E80732FF; 
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;     
    height: 40px;    
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    font-size: 25px;
    cursor: pointer;
    /* Optionnel : pour centrer l'icône parfaitement */
    align-items: center;
    justify-content: center;
}

/* Affiché uniquement sur les écrans mobiles (moins de 500px de large) */
@media (max-width: 500px) {
    #mobile-menu-btn {
        display: flex; /* C'est ici que le bouton s'affiche pour les mobiles ! */
    }
}

/* Gestion du bouton d'origine Lizmap */
#menuToggle {
    position: absolute;
    top: -60px;
    left: 4px;
    z-index: 9000;
    user-select: none;
    padding: 7px;
    border-radius: 8px;
    background: #3a3c3d;
    transition: padding 0.3s cubic-bezier(0.77, 0.2, 0.05, 1.0);
}