#app{
max-width:736px;
margin:auto;
}

.controls{
display:flex;
flex-wrap:wrap;
align-items:flex-end;
gap:1rem;
margin-bottom:1rem;
}


/* ----------------------------- */
/* Carte */
/* ----------------------------- */

#map{
height:600px;
border:1px solid #ddd;
}

.leaflet-container{
background:#ffffff !important;
}

.leaflet-control-zoom a{
text-decoration:none !important;
background-image:none !important;
box-shadow:none !important;
border-bottom:none !important;
}

.leaflet-control-zoom a::before,
.leaflet-control-zoom a::after{
display:none !important;
}

.leaflet-container a:focus{
outline:2px solid #000091;
outline-offset:2px;
}

/* ----------------------------- */
/* Légendes */
/* ----------------------------- */

#circleLegend{
display:flex;
justify-content:center;
align-items:flex-end;
gap:40px;
margin-top:12px;
font-size:12px;
}

.legendItem{
display:flex;
flex-direction:column;
align-items:center;
}

.legendCircle{
border-radius:50%;
background:#000091;
opacity:0.7;
border:1px solid #ffffff;
}

.legendLabel{
margin-top:4px;
}

/* ----------------------------- */
/* Informations indicateur */
/* ----------------------------- */

#indicatorInfo,
#territoryIndicatorInfo{
margin-bottom:1rem;
}

#indicatorTitle,
#territoryIndicatorTitle{
font-size:1.5rem;
font-weight:700;
margin-bottom:0.75rem;
}

#indicatorMeta,
#territoryIndicatorMeta{
display:flex;
flex-direction:column;
gap:0.25rem;
margin-bottom:0.75rem;
}

#indicatorProducer,
#indicatorUnit,
#indicatorSource,
#territoryIndicatorProducer,
#territoryIndicatorUnit,
#territoryIndicatorSource{
font-size:0.95rem;
font-weight:400;
color:#555;
}

#indicatorDescription,
#territoryIndicatorDescription{
font-size:0.95rem;
line-height:1.5;
color:#444;
}

#indicatorSource a,
#territoryIndicatorSource a{
color:#000091;
text-decoration:none;
}

#indicatorSource a:hover,
#territoryIndicatorSource a:hover{
text-decoration:underline;
}

.metaLabel{
font-weight:600;
}

/* ----------------------------- */
/* Modale Superset */
/* ----------------------------- */

#supersetModal{
position:fixed;
inset:0;
background:rgba(0,0,0,0.45);
display:none;
align-items:center;
justify-content:center;
z-index:5000;
}

#supersetModalContent{
position:relative;
width:95%;
height:65vh;
background:#fff;
border-radius:6px;
overflow:hidden;
box-shadow:0 10px 30px rgba(0,0,0,0.3);
}

#supersetFrame{
width:100%;
height:100%;
border:none;
}

#closeSupersetModal{
position:absolute;
top:12px;
right:12px;
z-index:6000;
}

/* ----------------------------- */
/* Fullscreen */
/* ----------------------------- */

#mapPage{
background:#ffffff;
}

#mapPage:fullscreen{
background:#ffffff;
padding:1rem;
overflow:auto;
}

#mapPage:fullscreen #fullscreenBtn{
display:none;
}

/* ----------------------------- */
/* Iframe territoire */
/* ----------------------------- */

#territoryFrame{
margin-top:1rem;
height:80vh;
width:100%;
border:none;
}

/* ----------------------------- */
/* DSFR tabs */
/* ----------------------------- */

.fr-tabs{
margin-top:1rem;
}

#territoryFrame{
margin-top:1rem;
height:80vh;
width:100%;
border:none;
}

#territoryIndicatorInfo{
margin-bottom:1rem;
}

#territoryIndicatorTitle{
font-size:1.5rem;
font-weight:700;
margin-bottom:0.75rem;
}

#territoryIndicatorMeta{
display:flex;
flex-direction:column;
gap:0.25rem;
margin-bottom:0.75rem;
}

#territoryIndicatorProducer,
#territoryIndicatorUnit,
#territoryIndicatorSource{
font-size:0.95rem;
font-weight:400;
color:#555;
}

#territoryIndicatorDescription{
font-size:0.95rem;
line-height:1.5;
color:#444;
}

#territoryIndicatorSource a{
color:#000091;
text-decoration:none;
}

#territoryIndicatorSource a:hover{
text-decoration:underline;
}