@charset "utf-8";
/* CSS Document */
html, body {
margin: 0;
padding: 0;
overflow: hidden;
}
/* ============================================================
CSS du container bootstrap?
============================================================ */
.container{display:flex; flex-direction:column;background-color:#fff;}
/* ============================================================
CSS pour monter les menus déroulant en avant plan
============================================================ */
.dropdown-menu {
z-index: 2000 !important; /* au-dessus de Leaflet (1000) */
position: absolute; /* nécessaire pour que le z-index soit actif */
}
#comid {
z-index: 1001 !important;
}
.SumoSelect, /* le conteneur du select */
.SumoSelect > .optWrapper, /* le menu déroulant */
.SumoSelect.open > .optWrapper {
z-index: 1001 !important; /* mettez une valeur > Leaflet (souvent 1000) */
}
option.optionall { color: #ccc; font-style: italic; }
/* ============================================================
CSS styles de la barre des menus
============================================================ */
.nav-link.active {
background-color: #0d6efd !important;
color: white !important;
}
div.menuindexbas {
display: flex;
position: relative;
flex-direction: row;
box-shadow: 2px 2px 5px 1px rgba(88,88,88,0.70);
-webkit-box-shadow: 2px 2px 5px 1px rgba(88,88,88,0.70);
line-height: 1.5em;
color: #444444;
padding-left: 0px;
max-width: 100%;
align-items: left;
}
/* ============================================================
CSS du menu recherche
============================================================ */
.marech {/* pour indiquer le contenu jaune de la recherche actuelle*/
line-height: 20px;
position: relative;
text-align: left;
top:19px;
margin: auto;
padding:2px;
min-width: 330px;
max-width: 800px;
border:#9F9F9F solid 1px;
border-radius: 0 0 6px 6px;
background-color: hsla(60,85%,68%,1);
box-shadow: 0 1px 6px -2px rgba(0,0,0,.3);
z-index: 1999;
font-family: arial;
font-size: 14px;
}
.marechtxt{
padding-top:3px;
}
/* ============================================================
CSS menu Où?
============================================================ */
#val_distance{
width:160px;
text-align:center;
font-family: arial;
font-size: 14px;
}
#curs_distance{
width:160px;
height:15px;
}
div.labeldist{
text-align:center;
}
/* ============================================================
CSS du menue quand ?
============================================================ */
.epocline{
display:flex; flex-direction:row;
}
.epoc{/* époque non cliquée*/
cursor: pointer;
text-align:center;
flex-basis:10%;
border:#AFAFAF solid 1px;
padding:2px;
font-family: arial;
font-size: 14px;
}
.epocon{/* époque cliquée*/
cursor: pointer;
text-align:center;
flex-basis:10%;
border:#000 solid 4px;
box-shadow: 0 1px 6px -2px rgba(0,0,0,.3);
padding:2px;
font-family: arial;
font-size: 14px;
font-weight:600;
}
/* ============================================================
CSS menu Trier?
============================================================ */
.select1gauchemid{
font-family: arial;
font-size: 14px;
margin:7px;
z-index:2000;
}
/* ============================================================
CSS de la zone B
============================================================ */
.zoneB {
display: flex;
position: relative;
margin-top:5px;
line-height: 1.5em;
color: #444444;
background-color: #fff;
}
/* ============================================================
CSS de la carte un id et un css??
============================================================ */
#map{ /* la carte DOIT avoir une hauteur sinon elle n'apparaît pas */
display:block;
height: calc(100vh - 90px);
}
.carte {
position: relative;
color: #444444;
background-color: #fff;
width: 100%;
font-family: arial;
font-size: 14px;
}
/* ============================================================
/* Conteneur principal pour la carte et le graphique
============================================================ */
/* ---- Conteneur vertical CARTE + PROFIL ---- */
.map-container {
display: flex;
flex-direction: column;
width: 100%; /* oui */
height: calc(100vh - 50px);
}
/* ---- La carte prend tout l’espace restant ---- */
#map {
flex: 1;
}
/* ---- Zone du profil ---- */
#elevation-panel {
width: 100%;
height: 300px;
position: relative;
overflow: hidden;
background: #fff;
border-top: 1px solid #ccc;
transition: height 0.3s ease;
}
/* ============================================================
CSS des résultats à gauche et du tableau
============================================================ */
.resultat {
display:flex;
flex-direction: column;
position: relative;
margin-top:3px;
align-items: left;
overflow-y: scroll;
overflow-x:hidden;
min-width:360px;
font-family: arial;
font-size: 14px;
height:calc(100vh - 50px);
}
/* État initial : sidebar masquée AVANT rendu */
#res {
transform: translateX(-100%);
display: none; /* ou width:0 selon votre logique */
}
/* État visible */
body:not(.sidebar-hidden) #res {
transform: translateX(0);
display: block;
}
/* ============================================================
CSS chaque ligne du div le plus grand la ligne au plus petit div dans la ligne
============================================================ */
.containerligne{
display: flex;
flex-direction: row;
}
.ligne {
justify-content:center;
border-radius:6px;
margin: 5px;
color: #444444;
background-color: #FFF;
min-height : 250px;
width:330px;
box-shadow: 2px 2px 5px 1px rgba(88,88,88,0.70);
-webkit-box-shadow: 2px 2px 5px 1px rgba(88,88,88,0.70);
}
.i{/* le div avec e détail des resultats*/
overflow-y:auto;
overflow-x:hidden;
position: relative;
margin: 5px;
display: none;
background: #2c3e50;
width:1410px;
min-height: 250px;
border-radius: 6px;
box-shadow: 2px 2px 5px 1px rgba(88,88,88,0.70);
-webkit-box-shadow: 2px 2px 5px 1px rgba(88,88,88,0.70);
}
.line{display:flex; flex-direction:row;margin:2px;}
.cell{ border-right:1px solid #fff;margin:0px; text-align: center;font-size: 12px;font-family: arial;}
/*div.cell.aff{flex-basis:254px}*/
.cell.age{width:25%;}
.cell.gdeven{width:25%;}
.cell.gdevunit{width:25%;}
.cell.cle{
width:25%;
cursor: pointer;
}
/*div.cell.hom{flex-basis:150px}
div.cell.prog{flex-basis:300px;border-right:0px;}*/
.soustxt{
color:#000;
max-width: 290px;
text-align: center;
margin :2px;
font-size: 12px;
font-weight:100;
padding : 2px;
border-radius:10px;
cursor: pointer;
}
.soustxttab{
color:#fff;
max-width: 290px;
text-align: center;
margin :2px;
font-size: 14px;
font-weight:600;
padding : 2px;
border-radius:10px;
}
/* ============================================================
CSS image, des textes, icones des popup sur la carte et des début de ligne de résultats
============================================================ */
/* CSS */
/* pour atteindre le popu de leaf let par la classe carte */
.carte .leaflet-popup-content-wrapper {
width:600px;
max-height:auto;
background:#2c3e50;
line-height:normal;
color:#fff;
}
.carte .leaflet-popup-content-wrapper a {
color:rgba(255,255,255,0.5);
}
.carte .leaflet-popup-content {
margin:0px;
}
.carte .leaflet-popup-tip-container {
}
.carte .leaflet-popup-tip {
background:#2c3e50;
}
.carte .leaflet-marker-icon marker-cluster marker-cluster-small leaflet-zoom-animated leaflet-interactive {background:#2c3e50;}
.pop{
height:auto;
color:#fff;
display:flex;
flex-direction: row;
}
.gdev{font-weight:700;
max-width: 290px;
text-align: center;
margin :2px;
font-size: 12px;
padding : 2px;
border-radius:10px;
border:solid 1px #FFFFFF;
}
.popupimage{
margin-left:0px;
width :150px;
height:auto;
border-radius:8px;
}
.popuptext{
display: flex;
flex-direction: column;
margin-left : 10px;
}
.popuptitre{
color:#fff;
font-size: 15px;
font-family: arial;
font-weight: 700;
max-width: 420px;
}
.corps{
display: flex;
flex-direction: row;
flex-wrap:wrap;
width: 420px;
}
.rond{/* espace*/
width : 10px;
max-height:3px;
border-radius:3px;
background:#2c3e50;
}
.image{
/* [disabled]border-bottom-left-radius: 15px; */
/* [disabled]border-bottom-right-radius: 15px; */
border-top-right-radius: 6px;
border-top-left-radius: 6px;
max-height: 180px;
width: 330px;
}
.text{
margin: auto;
display:flex;
vertical-align:central;
width: 330px;
}
.aff{
margin-left: 10px;
text-align: left;
font-size: 14px;
font-weight:700;
font-family: arial;
flex-basis:70%
}
.icone{
cursor: pointer;
margin-left:2px;
margin-top:15px;
flex-basis:12%
}
.geo {/* pour indiquer le dep et la communnne pour chaque res*/
position: absolute;
text-align: center;
top: 0px;
left: 0px;
height: 24px;
width: 150px;
border-radius: 6px 0 6px 0;
background-color: hsla(60,85%,95%,0.83);
box-shadow: 0 1px 6px -2px rgba(0,0,0,.3);
z-index: 999;
}
.jd-slider {/* pour contenir le dep et la communnne pour chaque res*/
overflow: hidden;
position: relative;
width: 100%;
margin: 0 auto;
padding: 0;
}
a,
a:visited,
a:hover,
a:active,
a:focus {
outline: none;
text-decoration: none;
color: #444444;
}
a.btn .gdev {
text-decoration: none;
}
/* ============================================================
CSS du menu Lcontrol de leaflet à droite
============================================================ */
.lcontro {/* icone des cartes du menu lcontrol */
cursor: pointer;
height: 30px;
border-radius: 5px;
box-shadow: 2px 2px 5px 1px rgba(112,112,112,0.69);
-webkit-box-shadow: 2px 2px 5px 1px rgba(112,112,112,0.69);
margin:2px;
}
.lcontro_b {/* icone des mouvements de terrain, les ronds */
cursor: pointer;
height: 30px;
border-radius: 0px;
}
/* Conteneur du panneau */
.leaflet-control-layers {
font-family: Arial, sans-serif;
font-size: 13px;
background: white;
padding: 8px;
border-radius: 6px;
box-shadow: 0 2px 6px rgba(0,0,0,0.3);
max-height: 100vh;
width:auto;
overflow-y: auto; /* scroll si trop de couches */
overflow-x: hidden;
}
/* Titre des groupes */
.leaflet-control-layers-group-label {
font-size: 15px; /* plus gros */
font-weight: bold; /* gras */
margin-top: 6px;
margin-bottom: 3px;
cursor: pointer; /* main au survol */
user-select: none; /* évite la sélection de texte */
display: flex;
align-items: center;
}
/* Icône du toggle (+/-) */
.leaflet-control-layers-group-label span {
font-size: 16px; /* taille plus grande */
margin-right: 4px;
color: #0078A8; /* bleu feuille de style IGN, modifiable */
}
/* Couches individuelles */
.leaflet-control-layers-overlays label {
font-size: 13px;
padding-left: 4px;
}
/* ============================================================
CSS du /* bloc style l'échelle chrono
============================================================ */
.containerstrati{
position: relative;
display:flex;
flex-direction:column;
min-height: 25px;
min-width:850px;
}
.containerchrono {/* bouton pour affichier l'échelle chrono*/
display:flex; flex-direction:column;background-color:#fff;overflow-y: scroll;overflow-x:hidden;
cursor: pointer;
position: relative;
text-align: center;
top: 0px;
right: 0px;
height:85vh;
min-width: 400px;
z-index: 1000;
}
/* ============================================================
CSS du /*gestion des marqueurs des seismes json
============================================================ */
.leaflet-marker-mvt1 {
color: #000;
font-size: 12px;
font-weight:bold;
line-height: 20px;
text-align: center;
background: #F7AB3E;
box-shadow: 2px 1px 4px rgba(0,0,0,0.2);
border: 1px solid #000;
opacity: .8;
}
.leaflet-marker-mvt2 {
color: #000;
font-size: 12px;
font-weight:bold;
line-height: 20px;
text-align: center;
background: #F2F74C;
box-shadow: 2px 1px 4px rgba(0,0,0,0.2);
border: 1px solid #000;
opacity: .8;
}
.leaflet-marker-mvt3 {
color: #000;
font-size: 12px;
font-weight:bold;
line-height: 20px;
text-align: center;
background: #B78337;
box-shadow: 2px 1px 4px rgba(0,0,0,0.2);
border: 1px solid #000;
opacity: .8;
}
.leaflet-marker-mvt4 {
color: #000;
font-size: 12px;
font-weight:bold;
line-height: 20px;
text-align: center;
background: #FF83FA;
box-shadow: 2px 1px 4px rgba(0,0,0,0.2);
border: 1px solid #000;
opacity: .8;
}
.leaflet-marker-mvt5 {
color: #000;
font-size: 12px;
font-weight:bold;
line-height: 20px;
text-align: center;
background: #26CBFD;
box-shadow: 2px 1px 4px rgba(0,0,0,0.2);
border: 1px solid #000;
opacity: .8;
}
.leaflet-marker-icon3,
.leaflet-marker-icon4,
.leaflet-marker-icon5,
.leaflet-marker-icon6,
.leaflet-marker-icon7,
.leaflet-marker-icon8,
.leaflet-marker-icon9 {
color: #000;
font-size: 12px;
font-weight: bold;
line-height: 20px;
text-align: center;
width: 30px;
height: 30px;
box-shadow: 2px 1px 4px rgba(0,0,0,0.2);
border-radius: 30px;
border: 1px solid #000;
opacity: .8;
display: flex;
align-items: center;
justify-content: center;
}
.leaflet-marker-icon3 { background:#26c6da; }
.leaflet-marker-icon4 { background:#8bc34a; }
.leaflet-marker-icon5 { background:#ffeb3b; }
.leaflet-marker-icon6 { background:#ffc107; }
.leaflet-marker-icon7 { background:#ff5722; }
.leaflet-marker-icon8 { background:#FD32FC; }
.leaflet-marker-icon9 { background:#AC30FF; }
.leaflet-marker-icon-materiaux {
color: #000;
font-size: 12px;
font-weight:bold;
padding-top:3px;
text-align: center;
background: #fff;
box-shadow: 2px 1px 4px rgba(0,0,0,0.2);
border-radius: 4px;
border: 1px solid #000;
opacity: .8;
}
/* ============================================================
CSS des légendes à gauche couches szlectionnées du menu leaflet
============================================================ */
/* Slider d’opacité */
.opacity-slider {
width: 100px;
margin-top: 3px;
accent-color: #0078A8; /* couleur du curseur (Chrome/Edge/Firefox récents) */
}
/* Conteneur unique de toutes les légendes */
.legend-container {
background: rgba(255, 255, 255, 0.9);
border: 1px solid #ccc;
border-radius: 6px;
padding: 6px;
max-width: 420px;
font-family: Arial, sans-serif;
font-size: 12px;
line-height: 1.4em;
box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
/* Chaque bloc de légende */
.legend-block {
margin-bottom: 10px;
border-bottom: 1px solid #ddd;
padding-bottom: 6px;
}
.legend-block:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
/* Titre de la légende */
.legend-block h4 {
margin: 0 0 6px;
font-size: 13px;
font-weight: bold;
color: #222;
}
/* Image de la légende */
.legend-block img {
max-width: 100%;
border: 1px solid #eee;
background: #fff;
display: block;
}
/* Conteneur scrollable pour les images */
.legend-img-wrapper {
max-height: 300px; /* hauteur max visible */
overflow-y: auto; /* scroll vertical */
overflow-x: auto;
border: 1px solid #eee;
padding: 2px;
background: white;
}
/* L’image peut être grande : pas de redimensionnement */
.legend-img-wrapper img {
width: auto;
height: auto;
max-width: none; /* très important */
display: block;
}
/* ============================================================
CSS de la légende de la cart au 1m de geol
============================================================ */
/* Fenêtre principale */
.pop1M {
visibility: hidden;
opacity: 0;
position: absolute;
border-radius: 6px;
background: white;
display: inline-block;
transition: all 0.3s;
border: 2px solid #666;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
z-index: 1001;
}
/* Barre de titre */
.pop1Mbarre {
background: linear-gradient(to bottom, #e0e0e0, #c8c8c8);
color: #222;
font-weight: bold;
padding: 5px 10px;
cursor: move;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #999;
border-radius: 4px 4px 0 0; /* coins arrondis en haut seulement */
}
.pop1Mtitre {
font-family: Arial, sans-serif;
font-size: 14px;
}
/* Boutons de la barre de titre */
.pop1Mboutons {
display: flex;
gap: 4px;
}
.pop1Mboutons button {
background: #f4f4f4;
border: 1px solid #888;
border-radius: 3px;
width: 22px;
height: 22px;
font-weight: bold;
cursor: pointer;
line-height: 18px;
}
.pop1Mboutons button:hover {
background: #ddd;
}
/* Corps de la fenêtre (images) */
.pop1Mcorps {
overflow: auto;
max-width: 60vw;
max-height: 70vh;
padding: 10px;
}
.pop1M_content {
display: block;
margin-bottom: 10px;
}
/* Animation douce lors de l’ouverture / fermeture */
.pop1M,
.pop1Mcorps {
transition: all 0.3s ease;
}
/* ============================================================
CSS /* le css pour adpater les menu onglet de bootstrap
============================================================ */
.nav-tabs .nav-item .nav-link.active {
background-color: #002B66;
color: #FFF;
border:1px solid #505050;
border-bottom:none;
}
.nav-tabs .nav-item .nav-link:hover {
background-color: #002B66;
color: #FFF;
}
.nav-tabs .nav-item .nav-link {
margin:1px;
border:1px solid #DADADA;
border-bottom:none;
}
.tab-content {
width:100%;
border-top:1px solid #002B66;
padding: 10px;
background-color: #F8F8F8;
}
.tab-content .tab-pane {
background-color: #F8F8F8;
font-weight:500;
font-family:arial;
color: #4D4D4D;/*
min-height: 200px;
height: auto;*/
}
/* ============================================================
CSS la modale pour afficher la litthotheque dans le iframe
============================================================ */
.modal-content{
width:100%;
}
/* ============================================================
CSS /*taille des logos acceuil
============================================================ */
.partenaires{
width:150px;
}
/* ============================================================
POPUPS LEAFLET — STYLE UNIFIÉ (KMZ + BDD)
============================================================ */
/* ------------------------------------------------------------------
1) STRUCTURE GLOBALE DU POPUP LEAFLET
------------------------------------------------------------------ */
/* Conserve ton thème bleu foncé */
.leaflet-popup-content-wrapper {
max-width: 560px !important;
background: #2c3e50 !important;
color: #fff !important;
border-radius: 10px !important;
overflow-x: hidden !important;
}
/* Contenu interne (scroll vertical seulement) */
.leaflet-popup-content {
margin: 0 !important;
padding: 12px !important;
max-width: 560px !important;
max-height: 420px !important;
overflow-y: auto !important;
overflow-x: hidden !important;
white-space: normal !important;
}
/* Empêche toute largeur dépassant et tout scroll horizontal */
.leaflet-popup-content * {
max-width: 100% !important;
white-space: normal !important;
overflow-wrap: break-word !important;
word-wrap: break-word !important;
}
/* ------------------------------------------------------------------
2) KMZ/KML — STYLE DÉDIÉ
------------------------------------------------------------------ */
.kmz-popup {
width: 100%;
color: #fff !important;
line-height: 1.4em;
}
/* TITRE popup */
.popuptitre {
font-size: 1.3em;
font-weight: bold;
margin-bottom: 10px;
color: #fff;
}
/* CORPS du texte */
.popup-corps {
margin-bottom: 10px;
font-size: 0.95em;
}
/* ExtendedData (tableaux) */
.popup-ext table {
width: 100% !important;
table-layout: fixed !important;
border-collapse: collapse !important;
}
.popup-ext td,
.popup-ext th {
padding: 4px !important;
vertical-align: top;
border: 1px solid #455a64 !important;
}
/* ------------------------------------------------------------------
3) IMAGES (KMZ + BDD)
------------------------------------------------------------------ */
/* Images grandes : responsives et sans doublons */
.kmz-popup-container img,
.popupimage {
display: block !important;
margin: 10px auto !important;
max-width: 100% !important;
height: auto !important;
border-radius: 6px;
border: none !important;
background: none !important;
}
/* Empêche les mini-images fantômes (1px) des vieux KMZ */
.kmz-popup-container img[width="1"],
.kmz-popup-container img[height="1"],
.kmz-popup-container img[width="0"],
.kmz-popup-container img[height="0"] {
display: none !important;
}
/* Empêche les superpositions via align HTML */
.kmz-popup-container p img,
.kmz-popup-container td img,
.kmz-popup-container font img {
float: none !important;
}
/* ------------------------------------------------------------------
4) LIENS
------------------------------------------------------------------ */
.leaflet-popup-content a {
color: #8cc7ff !important;
font-weight: bold;
text-decoration: underline !important;
word-break: break-all !important;
}
.leaflet-popup-content a:hover {
color: #c6e3ff !important;
}
/* ------------------------------------------------------------------
5) pour la réduction des légendes WMS
------------------------------------------------------------------ */
.legend-block {
position: relative;
}
/* Bouton rond de réduction */
.legend-toggle-btn {
position: absolute;
top: 0;
right: 0;
width: 18px;
height: 18px;
cursor: pointer;
background: #ddd;
border-radius: 50%;
font-size: 12px;
line-height: 18px;
text-align: center;
border: 1px solid #999;
}
.legend-collapsed img,
.legend-collapsed .legend-image,
.legend-collapsed .legend-content {
display: none !important;
}
.legend-block h4 {
margin-right: 24px; /* espace réservé pour le bouton */
}
.legend-container {
width: 240px;
max-width: 240px;
}
.legend-block {
transition: width 0.2s ease;
}
.legend-block.legend-collapsed {
width: 160px !important;
}
/* Cacher totalement la zone si aucun bloc légende */
.legend-container:empty {
display: none !important;
}
/* ============================================================
RESTAURATION DU STYLE DES POPUPS BDD (Affleurements)
— empêche les styles KMZ d'interférer
============================================================ */
/* Neutralise la règle globale destructrice pour la partie BDD */
.leaflet-popup-content .pop *,
.leaflet-popup-content .popuptext *,
.leaflet-popup-content .corps * {
max-width: none !important;
white-space: normal !important;
overflow-wrap: break-word !important;
}
/* Image BDD à gauche comme avant */
.leaflet-popup-content .popupimage {
width: 150px !important;
height: auto !important;
margin: 0 !important;
flex-shrink: 0 !important;
border-radius: 8px !important;
display: block !important;
}
/* Structure du popup BDD (flex horizontal normal) */
.leaflet-popup-content .pop {
display: flex !important;
flex-direction: row !important;
align-items: flex-start !important;
margin: 0 !important;
}
/* La colonne de texte à droite */
.leaflet-popup-content .popuptext {
flex: 1 1 auto !important;
margin-left: 10px !important;
max-width: 420px !important;
}
/* Conteneur des petits blocs colorés */
.leaflet-popup-content .corps {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
width: 420px !important;
max-width: 420px !important;
}
/* POPUP BDD largeur correcte */
.bdd-popup .leaflet-popup-content-wrapper {
max-width: 560px !important;
}
.bdd-popup .leaflet-popup-content {
max-width: 560px !important;
width: auto !important;
}
/* === Correction définitive popups BDD tronquées === */
.bdd-popup .leaflet-popup-content-wrapper {
width: 600px !important;
max-width: 600px !important;
}
.bdd-popup .leaflet-popup-content {
width: 600px !important;
max-width: 600px !important;
}
/* Colonne texte stable */
.bdd-popup .popuptext {
max-width: 430px !important;
}
/* Empêche Leaflet de réduire les colonnes */
.bdd-popup .pop *,
.bdd-popup .popuptext *,
.bdd-popup .corps * {
max-width: none !important;
}
/* ============================================================
la banque des situations
============================================================ */
#tabNiveaux {
white-space: nowrap; /* Empêche les retours à la ligne */
overflow-x: auto; /* Scroll horizontal si VRAIMENT nécessaire */
scrollbar-width: thin; /* Scroll fin */
}
#tabNiveaux .nav-link {
padding: 6px 12px; /* Onglets plus compacts */
font-size: 0.9rem;
}
#listePropositions {
max-height: 60vh; /* 60% de la hauteur d’écran */
overflow-y: auto;
scrollbar-width: thin;
}
.banque-card {
cursor: pointer;
transition: transform 0.1s ease, box-shadow 0.2s ease;
}
.banque-card:hover {
box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}
/* Carte grisée si déjà importée */
.banque-card.deja-charge {
opacity: 0.55;
pointer-events: none;
border-left: 4px solid #28a745 !important;
background-color: #e9f9ee !important;
}
/* Titre vert */
.banque-card .deja-icone {
color: #28a745;
margin-right: 6px;
font-weight: bold;
}
/* ============================================================
les boutons +/-déplier les wms
============================================================ */
.layer-toggle-icons {
display: flex;
justify-content: flex-end;
gap: 6px;
margin: 3px 4px;
}
/* tout dépier menu +/- des couches WMS */
.layer-toggle-icons button {
background: #ffffff;
border: 1px solid #ccc;
border-radius: 4px;
width: 22px;
height: 22px;
cursor: pointer;
font-size: 13px;
line-height: 18px;
padding: 0;
transition: background 0.2s;
}
.layer-toggle-icons button:hover {
background: #f0f0f0;
}
/* ============================================================
le bouton unique +/- pour tout déplier les wms
============================================================ */
.layer-toggle-single-container {
display: flex;
justify-content: flex-start;
margin: 4px 6px;
}
/* bouton [ + ] ou [ – ] */
.layer-toggle-single {
background: #ffffff;
border: 1px solid #ccc;
border-radius: 6px;
width: 30px;
height: 30px;
cursor: pointer;
font-size: 20px; /* plus grand, bien visible */
line-height: 30px;
text-align: center;
padding: 0;
transition: background 0.2s;
}
.layer-toggle-single:hover {
background: #f0f0f0;
}
.banque-svg-ico {
display: block;
}
.banque-card.deja-charge .banque-svg-ico {
opacity: 0.7;
}
.detail-icone {
width: 40px;
height: 40px;
object-fit: contain;
}
#loader-kmz {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.8);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 9999;
font-size: 18px;
color: #333;
}
/* ============================================================
/*le logo de patienter oendant le chargement kmz
============================================================ */
.spinner {
width: 50px;
height: 50px;
border: 6px solid #ccc;
border-top: 6px solid #0077ff;
border-radius: 50%;
animation: spin 1s linear infinite;
margin-bottom: 15px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* ============================================================
/* gestionnaire de couche importées gpx, kml, kmz*/
/* ----- Bouton flottant translucide -----
============================================================ */
.glass-button {
position: absolute;
top: 8px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 6px;
background: rgba(255, 255, 255, 0.55);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
color: #000;
font-weight: 600;
font-size: 14px;
padding: 8px 14px;
border-radius: 12px;
border: 1px solid rgba(255,255,255,0.4);
cursor: pointer;
z-index: 1999;
box-shadow: 0 3px 10px rgba(0,0,0,0.25);
transition: all 0.2s;
}
.glass-button:hover {
background: rgba(255, 255, 255, 0.8);
transform: translateX(-50%) scale(1.05);
}
.glass-button .icon {
font-size: 18px;
}
/* ----- Panneau chargé ----- */
#filePanel {
position: absolute;
top: 55px;
left: 50%;
transform: translateX(-50%);
width: 290px;
max-height: 350px;
overflow-y: auto;
background: rgba(255,255,255,0.92);
border-radius: 10px;
border: 1px solid #aaa;
padding: 10px;
display: none;
z-index: 1999;
box-shadow: 0 2px 5px rgba(0,0,0,0.25);
}
/* ---- Ligne de fichier ---- */
.import-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 4px 0;
font-size: 13px;
}
/* ---- Nom du fichier ---- */
.import-name {
flex: 1;
margin-right: 6px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ---- Boutons ronds minimalistes ---- */
.import-btn {
width: 26px;
height: 26px;
border-radius: 50%;
border: none;
cursor: pointer;
margin-left: 4px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: white;
transition: 0.15s;
}
/* afficher/masquer */
.btn-toggle {
background: #2196f3;
}
.btn-toggle:hover {
background: #0a73c0;
}
/* supprimer */
.btn-delete {
background: #e53935;
}
.btn-delete:hover {
background: #b71c1c;
}
/* Forcer les icônes Google Earth (mapfiles/kml) à 32x32 centrées */
img.leaflet-marker-icon[src*="mapfiles/kml"] {
width: 32px !important;
height: 32px !important;
margin-left: -16px !important; /* pour centrer sur la position */
margin-top: -16px !important;
}
/* Panneaux overlay (comme déjà fait) */
#menu {
position: relative;
}
.collapse-panel {
overflow: visible !important;
position: absolute;
left: 0;
right: 0;
width: 100%;
z-index: 2000;
}
#m_quoi .magicsearch-wrapper {
width: 100% !important;
min-height: 38px !important;
display: block !important;
position: relative;
}
#m_quoi .multi-items {
position: absolute !important;
top: 7px !important;
left: 12px !important;
right: 7px !important;
bottom: auto !important;
min-height: 30px !important;
display: flex !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 4px !important;
padding: 0 !important;
margin: 0 !important;
box-sizing: border-box !important;
}
#m_quoi input.magicsearch {
margin-left: 10px !important; /* valeur à ajuster */
width: 100% !important;
height: 36px !important;
left: 14px !important;
box-sizing: border-box !important;
}
/* Les dropdown doivent passer au-dessus de tout */
.dropdown-menu {
z-index: 9999 !important;
}
/* Désactiver la transition Bootstrap sur tes panneaux */
#menu .collapse,
#menu .collapsing {
transition: none !important;
height: auto !important;
overflow: visible !important;
}
/* A partir de là les modification poru la couleur et le s bouton de DRAW Style pour le bouton de couleur (ressemblant à ceux de Leaflet.draw) */
/* ============================================================
BOUTON COULEUR – ALIGNEMENT PARFAIT STYLE LEAFLET.DRAW
============================================================ */
.leaflet-draw-toolbar a.custom-draw-color-toggle {
width: 30px;
height: 30px;
padding: 0 !important;
margin: 0 !important;
background: #fff !important;
background-image: none !important;
box-shadow: none !important;
border-bottom: 1px solid #ccc;
border-radius: 0;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
/* Supprime toute pollution Draw */
.leaflet-draw-toolbar a.custom-draw-color-toggle::before,
.leaflet-draw-toolbar a.custom-draw-color-toggle::after {
content: none !important;
display: none !important;
}
/* Effet hover identique aux autres boutons */
.leaflet-draw-toolbar a.custom-draw-color-toggle:hover {
background: #f4f4f4 !important;
}
/* ============================================================
CARRÉ COULEUR (CENTRÉ PARFAITEMENT)
============================================================ */
.custom-draw-color-toggle .color-indicator-draw {
width: 14px;
height: 14px;
border-radius: 2px;
box-shadow: inset 0 0 0 1px #444;
}
/* ============================================================
PALETTE
============================================================ */
.color-palette-draw {
position: absolute;
top: 0;
left: -180px;
display: none;
gap: 6px;
padding: 6px;
background: #fff;
border: 1px solid #999;
border-radius: 4px;
z-index: 1000;
}
.custom-draw-color-toggle.open .color-palette-draw {
display: flex;
}
.color-palette-draw button {
width: 18px;
height: 18px;
padding: 0;
border: 1px solid #666;
cursor: pointer;
}
.custom-delete-lines,
.custom-delete-shapes {
width: 26px;
height: 26px;
display: block;
background: #fff;
border-bottom: 1px solid #ccc;
cursor: pointer;
text-align: center;
line-height: 26px;
}
.custom-delete-lines:hover,
.custom-delete-shapes:hover {
background: #f4f4f4;
}
.custom-delete-lines svg,
.custom-delete-shapes svg {
pointer-events: none;
}
.elevation-control .elevation-time,
.elevation-control .mouse-time {
display: none !important;
}
/* Masquer le bouton natif Leaflet-Elevation */
.elevation-toggle-icon {
display: none !important;
}
/* Bouton profil perso dans la toolbar Leaflet.Draw */
.leaflet-draw-toolbar .custom-elevation-toggle {
display: block;
width: 26px;
height: 26px;
padding: 0 !important;
margin: 0;
background: #fff !important;
background-image: none !important; /* ⬅️ tue la spritesheet */
background-position: 0 0 !important;
background-repeat: no-repeat !important;
border-radius: 4px;
text-align: center;
}
/* Le SVG prend toute la place sans bord gris */
.leaflet-draw-toolbar .custom-elevation-toggle svg {
display: block;
width: 100%;
height: 100%;
}
/* Option : effet au survol sur la ligne de profil */
.custom-elevation-toggle:hover svg path[stroke] {
stroke: #000;
}
/* ============================================================
remplacemnt bouton polylone toolbar Leaflet.Draw
============================================================ */
/* Icône bouton "draw polyline" */
.leaflet-draw-toolbar .leaflet-draw-draw-polyline {
background-image: url("data:image/svg+xml;utf8,");
background-size: 30px 24px;
background-position: center;
background-repeat: no-repeat;
/* Supprime le sprite d'origine */
width: 30px;
height: 30px;
display: block;
}
/* ============================================================
NETTOYAGE TOTAL bouton couleur dans toolbar Leaflet.Draw
============================================================ */
.leaflet-draw-toolbar a.custom-draw-color-toggle {
background: #fff !important;
background-image: none !important;
background-position: initial !important;
background-repeat: no-repeat !important;
box-shadow: none !important;
border-radius: 4px;
padding: 0 !important;
width: 30px;
height: 30px;
}
/* Supprime TOUT pseudo-élément Draw */
.leaflet-draw-toolbar a.custom-draw-color-toggle::before,
.leaflet-draw-toolbar a.custom-draw-color-toggle::after {
content: none !important;
display: none !important;
}
/* Le carré couleur */
.custom-draw-color-toggle .color-indicator-draw {
width: 14px;
height: 14px;
margin: 6px auto;
border-radius: 2px;
box-shadow: inset 0 0 0 1px #444;
}
/* ============================================================
resize du graph svg altitude
============================================================ */
/* Conteneur principal */
.elevation-control {
height: 30vh; /* au lieu de 336px */
display: flex;
flex-direction: column;
/* optionnel : sécurités pour les extrêmes */
min-height: 350px;
max-height: 500px;
}
.custom-elevation-toggle {
display: block;
width: 26px;
height: 26px;
padding: 2px;
background-color: #fff;
}
/* Bloc statistiques */
#profil-stats {
/* on peut laisser 36px si tu veux absolument cette hauteur fixe : */
/* height: 36px; */
/* flex: 0 0 36px; */
/* version un peu plus souple : */
flex: 0 0 auto;
}
#profil-stats-panel:empty {
display: none;
}
/* Zone graphique Leaflet-elevation */
.elevation-control.elevation-expanded {
flex: 1 1 auto; /* prend tout l'espace restant */
height: auto; /* plus de calc() en px */
overflow: hidden;
}
/* SVG et canvas s’adaptent à la zone visible */
.elevation-control svg.background,
.elevation-control canvas.canvas-plot {
width: 100%;
height: 100%; /* remplit la zone graphique */
max-width: 100%; /* évite de rétrécir plus que le conteneur */
}
/* ============================================================
STYLE SPÉCIFIQUE POUR LES POPUPS DE DONNÉES SHAPEFILE
=========================================================== */
/* Cible uniquement les popups contenant des données shapefile */
.leaflet-popup-donnees-wrapper .leaflet-popup-content {
width: 540px !important; /* Force la largeur à 560px */
max-width: 560px !important; /* Supprime toute autre contrainte de largeur */
padding: 12px !important; /* Espacement interne pour rendre le contenu plus aéré */
}
/* Le tableau dans le popup prend toute la largeur du popup */
.leaflet-popup-donnees-wrapper table {
width: 100% !important; /* Utilise toute la largeur disponible */
table-layout: fixed !important; /* Fixe la taille des colonnes */
border-collapse: collapse;
}
/* Style des cellules du tableau */
.leaflet-popup-donnees-wrapper th,
.leaflet-popup-donnees-wrapper td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
/* Styles des cellules du tableau */
.leaflet-popup-donnees-wrapper td {
word-wrap: break-word;
overflow-wrap: break-word;
text-align: left;
}
/* Reintroduire la croix de fermeture avec un style spécifique */
.leaflet-popup-donnees-wrapper .leaflet-popup-close-button {
position: absolute;
top: 5px;
right: 5px;
background-color: transparent;
border: none;
color: #fff;
font-size: 20px;
cursor: pointer;
font-weight: bold;
}
/* Effet de survol sur la croix de fermeture */
.leaflet-popup-donnees-wrapper .leaflet-popup-close-button:hover {
color: #f39c12; /* Change la couleur de la croix lors du survol */
}
/* Masquer toute l'application au départ */
#app {
visibility: hidden;
}
#loading-overlay {
position: fixed;
inset: 0;
z-index: 9999;
background-color: #0e1116;
/* Filigrane */
background-image: url("img/logo-geosciences-paca.svg");
background-repeat: no-repeat;
background-position: center;
background-size: 280px;
background-blend-mode: luminosity;
opacity: 1;
display: flex;
align-items: center;
justify-content: center;
}
#loading-overlay::before {
content: "";
position: absolute;
inset: 0;
background: rgba(14, 17, 22, 0.85);
}
.loader-box {
position: relative;
z-index: 1;
width: 380px;
text-align: center;
}
.loader-bar {
width: 100%;
height: 30px;
background: rgba(255, 255, 255, 0.15);
border-radius: 3px;
overflow: hidden;
}
.loader-progress {
height: 100%;
width: 0%;
background: linear-gradient(
90deg,
#2ecc71,
#58d68d
);
transition: width 0.25s ease;
}
.loader-text {
margin-top: 14px;
font-size: 14px;
line-height: 1.4;
color: rgba(255, 255, 255, 0.85);
}
.tooltip.show {
opacity: 1 !important;
pointer-events: none;
}