/* Minification failed. Returning unminified contents.
(1887,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1888,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1889,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1890,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1891,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1892,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1893,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1894,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1895,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1896,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1897,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1898,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1899,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1900,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1901,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1909,22): run-time error CSS1039: Token not allowed after unary operator: '-chart-surface'
(1910,28): run-time error CSS1039: Token not allowed after unary operator: '-chart-border'
(1911,25): run-time error CSS1039: Token not allowed after unary operator: '-chart-radius'
(1912,22): run-time error CSS1039: Token not allowed after unary operator: '-chart-shadow'
(1927,17): run-time error CSS1039: Token not allowed after unary operator: '-chart-text'
(1935,17): run-time error CSS1039: Token not allowed after unary operator: '-chart-muted'
(1948,17): run-time error CSS1039: Token not allowed after unary operator: '-chart-text'
(1967,22): run-time error CSS1039: Token not allowed after unary operator: '-chart-border'
(1975,20): run-time error CSS1039: Token not allowed after unary operator: '-chart-muted'
(1985,22): run-time error CSS1039: Token not allowed after unary operator: '-chart-grid'
(1996,20): run-time error CSS1039: Token not allowed after unary operator: '-chart-muted'
(2025,16): run-time error CSS1039: Token not allowed after unary operator: '-chart-primary'
(2058,16): run-time error CSS1039: Token not allowed after unary operator: '-chart-muted'
(2084,16): run-time error CSS1039: Token not allowed after unary operator: '-chart-text'
(2121,16): run-time error CSS1039: Token not allowed after unary operator: '-chart-muted'
(2127,16): run-time error CSS1039: Token not allowed after unary operator: '-chart-primary'
(2129,18): run-time error CSS1039: Token not allowed after unary operator: '-chart-primary'
(2138,17): run-time error CSS1039: Token not allowed after unary operator: '-chart-muted'
(2168,55): run-time error CSS1039: Token not allowed after unary operator: '-chart-surface-subtle'
(2169,28): run-time error CSS1039: Token not allowed after unary operator: '-chart-border'
(2176,21): run-time error CSS1039: Token not allowed after unary operator: '-chart-text'
(2185,17): run-time error CSS1039: Token not allowed after unary operator: '-chart-muted'
(2200,17): run-time error CSS1039: Token not allowed after unary operator: '-chart-text'
(2217,26): run-time error CSS1039: Token not allowed after unary operator: '-chart-surface-subtle'
(2218,39): run-time error CSS1039: Token not allowed after unary operator: '-chart-border'
(2219,21): run-time error CSS1039: Token not allowed after unary operator: '-chart-muted'
(2252,32): run-time error CSS1039: Token not allowed after unary operator: '-chart-grid'
(2280,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2281,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2282,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2283,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2284,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2285,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2286,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2287,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2296,22): run-time error CSS1039: Token not allowed after unary operator: '-chart-surface'
 */
.dc-chart path.dc-symbol,.dc-legend g.dc-legend-item.fadeout{fill-opacity:.5;stroke-opacity:.5}.dc-chart rect.bar{stroke:none;cursor:pointer}.dc-chart rect.bar:hover{fill-opacity:.5}.dc-chart rect.deselected{stroke:none;fill:#ccc}.dc-chart .pie-slice{fill:#fff;font-size:12px;cursor:pointer}.dc-chart .pie-slice.external{fill:#000}.dc-chart .pie-slice :hover,.dc-chart .pie-slice.highlight{fill-opacity:.8}.dc-chart .pie-path{fill:none;stroke-width:2px;stroke:#000;opacity:.4}.dc-chart .selected circle,.dc-chart .selected path{stroke-width:3;stroke:#ccc;fill-opacity:1}.dc-chart .deselected circle,.dc-chart .deselected path{stroke:none;fill-opacity:.5;fill:#ccc}.dc-chart .axis line,.dc-chart .axis path{fill:none;stroke:#000;shape-rendering:crispEdges}.dc-chart .axis text{font:10px sans-serif}.dc-chart .axis .grid-line,.dc-chart .axis .grid-line line,.dc-chart .grid-line,.dc-chart .grid-line line{fill:none;stroke:#ccc;shape-rendering:crispEdges}.dc-chart .brush rect.selection{fill:#4682b4;fill-opacity:.125}.dc-chart .brush .custom-brush-handle{fill:#eee;stroke:#666;cursor:ew-resize}.dc-chart path.line{fill:none;stroke-width:1.5px}.dc-chart path.area{fill-opacity:.3;stroke:none}.dc-chart path.highlight{stroke-width:3;fill-opacity:1;stroke-opacity:1}.dc-chart g.state{cursor:pointer}.dc-chart g.state :hover{fill-opacity:.8}.dc-chart g.state path{stroke:#fff}.dc-chart g.deselected path{fill:grey}.dc-chart g.deselected text{display:none}.dc-chart g.row rect{fill-opacity:.8;cursor:pointer}.dc-chart g.row rect:hover{fill-opacity:.6}.dc-chart g.row text{fill:#fff;font-size:12px;cursor:pointer}.dc-chart g.dc-tooltip path{fill:none;stroke:grey;stroke-opacity:.8}.dc-chart g.county path{stroke:#fff;fill:none}.dc-chart g.debug rect{fill:#00f;fill-opacity:.2}.dc-chart g.axis text{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none}.dc-chart .node{font-size:.7em;cursor:pointer}.dc-chart .node :hover{fill-opacity:.8}.dc-chart .bubble{stroke:none;fill-opacity:.6}.dc-chart .highlight{fill-opacity:1;stroke-opacity:1}.dc-chart .fadeout{fill-opacity:.2;stroke-opacity:.2}.dc-chart .box text{font:10px sans-serif;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none}.dc-chart .box line{fill:#fff}.dc-chart .box circle,.dc-chart .box line,.dc-chart .box rect{stroke:#000;stroke-width:1.5px}.dc-chart .box .center{stroke-dasharray:3,3}.dc-chart .box .data{stroke:none;stroke-width:0}.dc-chart .box .outlier{fill:none;stroke:#ccc}.dc-chart .box .outlierBold{fill:red;stroke:none}.dc-chart .box.deselected{opacity:.5}.dc-chart .box.deselected .box{fill:#ccc}.dc-chart .symbol{stroke:none}.dc-chart .heatmap .box-group.deselected rect{stroke:none;fill-opacity:.5;fill:#ccc}.dc-chart .heatmap g.axis text{pointer-events:all;cursor:pointer}.dc-chart .empty-chart .pie-slice{cursor:default}.dc-chart .empty-chart .pie-slice path{fill:#fee;cursor:default}.dc-data-count{float:right;margin-top:15px;margin-right:15px}.dc-data-count .filter-count,.dc-data-count .total-count{color:#3182bd;font-weight:700}.dc-legend{font-size:11px}.dc-legend .dc-legend-item{cursor:pointer}.dc-legend g.dc-legend-item.selected{fill:#00f}.dc-hard .number-display{float:none}div.dc-html-legend{overflow-y:auto;overflow-x:hidden;height:inherit;float:right;padding-right:2px}div.dc-html-legend .dc-legend-item-horizontal{display:inline-block;margin-left:5px;margin-right:5px;cursor:pointer}div.dc-html-legend .dc-legend-item-horizontal.selected{background-color:#3182bd;color:#fff}div.dc-html-legend .dc-legend-item-vertical{display:block;margin-top:5px;padding-top:1px;padding-bottom:1px;cursor:pointer}div.dc-html-legend .dc-legend-item-vertical.selected{background-color:#3182bd;color:#fff}div.dc-html-legend .dc-legend-item-color{display:table-cell;width:12px;height:12px}div.dc-html-legend .dc-legend-item-label{line-height:12px;display:table-cell;vertical-align:middle;padding-left:3px;padding-right:3px;font-size:.75em}.dc-html-legend-container{height:inherit}
.chart-xs {
    height:500px !important;
}
.whiteaxis .axis text {
    fill: #fff !important;
}
@media screen and (max-width: 480px) {
    .chart-xs {
        height:250px !important;
    }
}

.dc-text-filter-input {
    border-radius:10px;
    border:0;
    background-color: #f5f5f5;
    padding: 10px 10px;
}
.grid {
    width:100%;
}
.dc-data-grid {
    clear: both;
}

.dc-table-label {
    background: #F5F5F5;
    font-weight: bold;
}

.x line {
    stroke: none;
}

.dc-data-grid, .dc-grid-group {
    clear: both;
}

.dc-data-count {
    clear: both;
}

.dc-grid-group {
    /*background-color: #F5F5F5;
    border: 1px solid #E3E3E3;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05) inset;
    min-height: 20px;*/
    display:none;
}

.dc-grid-top {
}

.dc-grid-item {
    float: left;
    /*margin: 0 10px 10px 0;*/
    padding: 20px;
    width: 25%;
    /*background-color: #F8F8F8;*/
    border-color: #E7E7E7;
    border-radius: 4px;
    text-align: center;
    /*box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05) inset;*/
}

    .dc-grid-item img {
        width: 170px;
        height: 215px;
    }
    .dc-grid-item .vignette {
        /*margin-bottom:0 !important;*/
    }
    .dc-grid-item .vignette-footer {
        /*width:20%;
        text-align:center;
        margin-bottom:20px;*/
        display:inline-flex;
    }
    .dc-grid-item .vignette-footer .btn {
        border-radius:0;
    }
        .dc-grid-item .vignette-footer .btn.follow-toggle {
            margin-top:10px;
            border: #333 1px solid;
            background: #fff;
        }

.dc-grid-label {
    font-size: 14px;
    font-weight: 100;
    letter-spacing:5px;
    text-transform:uppercase;
    color:#4d4d5a;
    /*margin-top:150px;*/
}
.dc-grid-label .dc-risk-level {
    font-size:78px;
    font-weight:600;
    color:#fff;
    text-shadow:2px 2px 1px #888;
}
.dc-grid-top h2 {
    font-size: 14px;
}

.dc-grid-small .dc-grid-item {
    width:50%;
    padding:10px;
}

.dc-grid-small .vignette {
    /*height:300px;*/
}
.dc-grid-small .vignette .panel-body h4 {
    font-size:14px;
}
.dc-grid-small .vignette .return {
    font-size:16px;
}
.dc-grid-small .vignette-footer {
    display:none;
}
.dc-grid-small .dc-grid-item img {
    width: 80px;
    height: 80px;
}

@media (min-width: 320px) {
    .dc-grid-item { width: 100%; }
    .dc-grid-small .dc-grid-item { width: 100%; }
}
@media (min-width: 768px) {
    .dc-grid-item { width: 50%; }
    .dc-grid-small .dc-grid-item { width: 50%; }
}
@media (min-width: 1024px) {
    .dc-grid-item { width: 33.3333%; }
    .dc-grid-small .dc-grid-item { width: 50%; }
}
@media (min-width: 1200px) {
    .dc-grid-item { width: 25%; }
    .dc-grid-small .dc-grid-item { width: 33.3333%; }
}
 .waterfall-container {
    width:100%;
    height:400px;
}   
 .waterfall {
    width:100%;
    height:100%;
}
.waterfall .bar.total rect {
  fill: #b18849;
}

.waterfall .bar.positive rect {
  fill: #8fb082;
}
.waterfall .bar.negative rect {
  fill: #e28c92;
}

.waterfall .bar line.connector {
  stroke: grey;
  stroke-dasharray: 3;
}

.waterfall .bar text {
  font-size: 1em;
  font-weight:400;
  text-anchor: middle;
  fill:#666;
}

.waterfall .axis text {
  font-size: 10px;
}

.waterfall .axis path,
.waterfall .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

@media screen and (max-width: 480px) {
    .waterfall .bar text {
      font-size: 0.6em;
      font-weight:400;
    } 
    .waterfall .axis text {
      font-size: 6px;
    }
}
 .sunburst-container {
    width:100%;
    padding:50px;
}
    .sunburst-container .tooltip hr {
        margin-top:2px;
        margin-bottom:2px;
    }
 .sunburst {
    width: 100%;
    height: 100%;
}

    .sunburst path {
        stroke: #fff;
        fill-rule: evenodd;
    }

    .sunburst circle,
    .sunburst path {
        cursor: pointer;
    }

    .sunburst circle {
        fill: none;
        pointer-events: all;
    }

    .sunburst #tooltip {
        background-color: white;
        padding: 3px 5px;
        border: 1px solid black;
        text-align: center;
    }
    .sunburst .chart {
      display: block;
      margin: auto;
      margin-top: 40px;
    }
    .sunburst text {
      font-size: 14px;
      fill:#bbb;
    }

    .sunburst rect {
      fill: none;
    }

#explanation {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 25%;
  text-align: center;
  color: #666;
}

#tooltip {
    background-color: white;
    padding: 3px 5px;
    border: 1px solid black;
    text-align: center;
}

#percentage {
  font-size: 1em;
}

@media screen and (max-width: 480px) {
 .sunburst-container {
    padding:20px 5px;
}   
}
.treemap-container {
    height:50vh;
    width:100%;
}

.treemap {
    font-size: 10px;
    width: 100%;
    height: 100%;
    margin: 10px 0;
}

.treemap-container .treemap {
    margin:0;
}

.treemap .svg-container {
    display: inline-block;
    position: relative;
    width:100%;
    height:100%;
    padding-bottom: 100%; /* aspect ratio */
    vertical-align: top;
    overflow: hidden;
}
.treemap .svg-content-responsive {
    display: inline-block;
    position: absolute;
    top: 10px;
    left: 0;
}

.treemap text {
    pointer-events: none;
}

.treemap .grandparent text { /* header text */
    /*font-weight: bold;*/
    font-size: 1em;
    text-transform:uppercase;
    fill: #fff;
    /*font-family: "Open Sans", Helvetica, Arial, sans-serif;*/
}

.treemap rect {
    stroke: #ddd;
}

    .treemap .grandparent rect {
        stroke-width: 0px;
    }
    
    .treemap rect.parent {
        stroke-width: 1px;
    }

.treemap .grandparent rect {
    fill: #666;
}
.treemap .children rect.child {
  opacity: 0;
}

.treemap .children:hover rect.child {
  opacity: 1;
  stroke-width: 1px;
}
.treemap .children:hover rect.parent {
  opacity: 0;
}

.treemap .children rect.parent,
.treemap .grandparent rect {
    cursor: pointer;
}

.treemap rect.parent {
    pointer-events: all;
}

.treemap rect.child {
    box-sizing: border-box;
    overflow: hidden;
}

.treemap .grandparent:hover rect {
    fill: #180c51;
}
/****************************************/
/*.treemap .children:hover rect {
    fill: #bbb;
    fill-opacity: .5;
}*/

/*.treemap .children:hover rect.child {
    fill: #bbb;
}*/
/****************************************/
.treemap .textdiv { /* text in the boxes */
    font-size: 10px;
    color: #fff;
    padding: 5px;
    text-shadow:#333 1px 1px;
}

.treemap .foreignobj h5 {
    font-size:1rem;
    font-weight:400;
    margin:0;
}
.treemap .foreignobj tspan {
    font-size:2rem;
    font-weight:400;
}

.marketmap-container {
    height:450px;
    width:100%;
}

.marketmap {
    font-size: 10px;
    width: 100%;
    height: 100%;
    margin: 10px 0;
}

.marketmap-container .treemap {
    margin: 0;
}

.marketmap .svg-container {
    display: inline-block;
    position: relative;
    width: 100%;
    height: 100%;
    padding-bottom: 100%; /* aspect ratio */
    vertical-align: top;
    overflow: hidden;
}
.marketmap .svg-content-responsive {
    display: inline-block;
    position: absolute;
    top: 10px;
    left: 0;
}

.marketmap text {
    pointer-events: none;
}

.marketmap .grandparent text {
    font-size: 1em;
    text-transform: uppercase;
    fill: #fff;
}
.marketmap .grandparent rect {
    stroke-width: 0px;
}
.marketmap rect {
    stroke: #ddd;
}
    .marketmap rect.parent {
        stroke-width: 1px;
        fill-opacity: .5;
        cursor: pointer;
    }

.marketmap .children rect.parent {
    fill-opacity: 0;
    cursor: zoom-in;
}

.marketmap .children:hover rect.parent {
    fill-opacity: 0.1;
/*    opacity: 0;
*/}
.marketmap .children:hover rect.child {
    opacity: 1;
    stroke-width: 1px;
}
.marketmap .grandparent rect {
    fill: #666;
    cursor: zoom-out;
}

.marketmap rect.parent {
    pointer-events: all;
}

.marketmap rect.child {
    box-sizing: border-box;
    overflow: hidden;
}

.marketmap .grandparent:hover rect {
    fill: #180c51;
}

.marketmap .tooltip {
    position: absolute;
    background: rgba(255,255,255,1);
    text-align: left;
    border: 1px;
    border-radius: 5px;
    font: 12px sans-serif;
    width: auto;
    padding: 4px;
    color: black;
    opacity: 0;
    pointer-events: none;
}
    .marketmap .tooltip h3 {
        margin: 2px;
        font-size: 16px;
    }

    .marketmap .tooltip table {
        table-layout: fixed;
    }

    .marketmap .tooltip tr td {
        padding: 0;
        margin: 0;
    }

    .marketmap rect.parent:hover {
        fill: #bbb;
        fill-opacity: .2;
    }

    .marketmap .children:hover rect.parent {
        fill-opacity: .2;
    }
.sectormap-container {
    height:450px;
    width:100%;
}

.sectormap {
    width: 100%;
    min-height: 400px;
    margin: 10px 0;
}

.sectormap-container .sectormap {
    margin:0;
}

.sectormap .svg-container {
    display: inline-block;
    position: relative;
    width:100%;
    height:100%;
    padding-bottom: 100%; /* aspect ratio */
    vertical-align: top;
    overflow: hidden;
}

.sectormap rect {
    stroke: #ddd;
}

.sectormap rect:hover {
    cursor: pointer;
}

.sectormap .textdiv { /* text in the boxes */
    font-size: 8px;
    padding:1.4em;
}

.sectormap .textdiv h5 {
    font-size:1.5em;
    color: #000;
    font-weight:400;
    margin:0;
}
.sectormap .textdiv tspan {
    font-size:3em;
    font-weight:200;
    color: #fff;
    text-shadow:#333 1px 1px;
}
.hierarchy {
    width: 100%;
    min-height:600px;
}

.hierarchy .node circle {
    fill: #fff;
    stroke: steelblue;
    stroke-width: 3px;
}

.hierarchy .node text {
    font-size: 0.8em;
}
.dark-background .hierarchy .node text {
    fill: #fff;
}

    .hierarchy.hierarchy-large .node text {
        font-size: 1em;
    }

.hierarchy .link {
    fill: none;
    stroke: #b18849;
    stroke-width: 2px;
}

    .hierarchy  .tooltip {
        background-color: white;
        padding: 3px 5px;
        border: 1px solid black;
        text-align: center;
    }
.container-choropleth {
    width:100%;
    min-height:400px;
    padding:5px;
}
.container-choropleth  text {
  fill: #b18849;
  font-size: 12px; }

.container-choropleth .background {
  fill: none;
  pointer-events: all; }

.container-choropleth  .unit {
  cursor: pointer;
  fill: #ccc;
  stroke: #000;
  stroke-width: 0.4px; }

.container-choropleth .legend-bg {
  fill: #fff;
  fill-opacity: 0.8; }

.container-choropleth .legend-bar {
  stroke: #333;
  stroke-width: 1px; }

.container-choropleth .graticule {
  fill: none;
  stroke: #777;
  stroke-width: 0.5px;
  stroke-opacity: 0.5;
}

.container-choropleth .land {
  fill: #222;
}

.container-choropleth .boundary {
  fill: none;
  stroke: #fff;
  stroke-width: 0.5px;
}

.container-choropleth .tooltip {   
  position: absolute;           
  text-align: center;           
  width: 150px;                  
  height: 25px;                 
  padding: 2px;             
  font-size: 10px;     
  background: #FFFFE0;
  border: 1px;      
  border-radius: 8px;           
  pointer-events: none;         
}
  
.container-choropleth .legend {
  font-size: 12px;
}
.line-chart {
    width:100%;
    min-height:100px;
}

.line-chart path { 
    /*stroke: white;*/
    stroke-width:0;
    fill: #a2a2a2;
}

.line-chart .axis path,
.line-chart .axis line {
    fill: none;
    stroke: #ccc;
    stroke-width: 1;
    shape-rendering: crispEdges;
}

.line-chart .title {
    stroke: white;
    stroke-width: 1;
    shape-rendering: crispEdges;
}

.primary g.tick text, .panel-x g.axis text {
    /*fill: #ddd;*/
}

.primary .line-chart path { 
    /*stroke: white;*/
}
.container .lines-chart-container,
.container-fluid .lines-chart-container {
    height: calc(100vh - 180px);
}

.panel-body .lines-chart-container {
    height: 500px;
}

.lines-chart-container {
    position: relative;
    width: 100%;
    min-height: 300px;
}

    .lines-chart-container .dc-chart {
        width: 100%;
        height: 100%;
    }

    .lines-chart-container .overlay {
        fill: none;
        pointer-events: all;
    }

    .lines-chart-container .lines-chart path {
        stroke-width: 2px;
    }

        .lines-chart-container .lines-chart path.line {
            fill: none;
        }

        .lines-chart-container .lines-chart path.area {
            stroke: none;
        }

    .lines-chart-container .lines-chart .axis path,
    .lines-chart-container .lines-chart .axis line {
        stroke: grey;
        stroke-width: 1px;
        shape-rendering: crispEdges;
    }

    .lines-chart-container .lines-chart .axis path.line,
    .lines-chart-container .lines-chart .axis line {
        fill: none;
    }

    .lines-chart-container .lines-chart .legend {
        position: absolute;
        top: 10px;
        left: 10px;
	    background-color: hsla(0,0%,100%,.9);
        color:#666;
        padding: 5px 10px 5px 10px;
        border-radius: 5px;
        display:table;
    }

        .lines-chart-container .lines-chart .legend .title {
            margin-bottom: 2px;
            font-weight: 900;
        }

        .lines-chart-container .lines-chart .legend .item {
            display:table-row;
            margin-right: 5px;
            font-size: .75em;
        }
        .lines-chart-container .lines-chart .legend .swatch {
            width: 10px;
            height: 10px;
            margin-top: 3px;
            float: left;
            margin-right: 5px;
        }

    /* trackers minimalistes */
    .lines-chart-container .tracker .tracker-halo {
        opacity: .25;
    }

    .lines-chart-container.tracker .tracker-dot { /* déjà stylé via attributes */
    }

    .lines-chart-container .lines-chart .horizontalGrid {
        fill: none;
        shape-rendering: crispEdges;
        stroke: #c3c3c3;
        stroke-width: 1px;
    }
    .lines-chart-container .cursor-line {
        stroke: #333;
        stroke-width: 1px;
        shape-rendering: crispEdges;
        opacity: 0.6;
        stroke-dasharray: 3 3;
    }

    .commtip {
        position:absolute;
        padding:5px;
        background-color:#eee;
        opacity:0.9;
        border:1px solid #666;
        border-radius:5px;
        width:150px;
        height:100px;
    }

    .commtip h5 {
        font-size:14px;
        font-weight:600;
        margin:5px 0;
    }
        .commtip p {
            font-size: 12px;
        }



.context .brush .selection {
    fill: rgba(0, 132, 255, 0.16); /* bleu moderne très léger */
    stroke: rgba(0, 132, 255, 0.65); /* contour bleu */
    stroke-width: 1.4px;
    shape-rendering: crispEdges;
    rx: 3px;
    ry: 3px;
}

.context .brush .overlay {
    cursor: crosshair;
    fill: rgba(0, 0, 0, 0); /* transparent */
}

.context .brush .handle {
    fill: rgba(0, 132, 255, 0.90);
    stroke: white;
    stroke-width: 1.2px;
    rx: 3px;
    ry: 3px;
    cursor: ew-resize;
}

/* les zones à gauche / droite (éclairées pour context) */
.context .brush .handle--w,
.context .brush .handle--e {
    width: 6px; /* poignée moderne étroite */
}

/* Ligne verticale centrée dans la poignée */
.context .brush .handle line {
    stroke: white;
    stroke-width: 1.4px;
    shape-rendering: crispEdges;
}

/* Amélioration de lisibilité sur grands écrans */
.context .brush:hover .selection {
    stroke-width: 1.8px;
}

/* Couleur globale mini-chart */
.context .context-line {
    stroke: #b4bfd3;
    opacity: 0.9;
}

    .universe-container {
        /*background-color:#2C3E50 !important;*/
        width:100%;
        padding:10px 50px;
        display:block;
        clear:both;
    }
    .universe-container circle {
        opacity: .9;
    }
    .universe-container circle.white-circle {
        stroke: white;
        stroke-width:1px;
    }

    .universe-container .label {
        fill: #c97e13;
        font-size: 12px;
    }

    .universe-container .heading {
        height:20%;
        width:100%;
        position:relative;
    }
    .universe-container .universe {
        width:450px;
        height:450px;
        margin:auto;
    }
    .universe-container .universe text {
        font-size:6px;
    }
    .universe-container h3 {
        color:#fff;
    }
    
    .universe-container .popover {
        color:#333 !important;
    }

    .universe-tooltip {
      position: absolute;
      min-width: 150px;
      height: auto;
      padding:5px;
      font: 12px;
      background: lightsteelblue;
      color:#000;
      border: 0px;
      border-radius: 8px;
      pointer-events: none;
    }
@media screen and (max-width: 480px) {
    .universe-container {
        padding:20px 5px;
    }
    .universe-container .universe {
        width:300px;
        height:300px;
    }
}
.radar-chart .level {
    stroke: grey;
    stroke-width: 0.5;
}

.radar-chart .axis line {
    stroke: grey;
    stroke-width: 1;
}

.radar-chart .legend {
    font-size: 8px;
}

    .radar-chart .axis .legend.top {
        dy: 1em;
    }

    .radar-chart .axis .legend.left {
        text-anchor: start;
    }

    .radar-chart .axis .legend.middle {
        text-anchor: middle;
    }

    .radar-chart .axis .legend.right {
        text-anchor: end;
    }

.radar-chart .tooltip {
    font-family: sans-serif;
    font-size: 13px;
    transition: opacity 200ms;
    opacity: 0;
}

    .radar-chart .tooltip.visible {
        opacity: 1;
    }

/* area transition when hovering */
.radar-chart .area {
    stroke-width: 2;
    fill-opacity: 0.5;
}

.radar-chart.focus .area {
    fill-opacity: 0.1;
}

    .radar-chart.focus .area.focused {
        fill-opacity: 0.7;
    }

.radar-chart .circle {
    fill-opacity: 0.9;
}

/* transitions */
.radar-chart .area, .radar-chart .circle {
    transition: opacity 300ms, fill-opacity 200ms;
    opacity: 1;
}

.radar-chart .d3-enter, .radar-chart .d3-exit {
    opacity: 0;
}

.dark-background .radar-chart .legend {
    fill: #ddd;
}

.dark-background .radar-chart .axis .legend {
    fill: #b18849;
}
.container-sankey .sankey-chart {
    width: 100%;
    height: 800px;
}

.container-sankey .node rect {
    cursor: move;
    fill-opacity: .9;
    shape-rendering: crispEdges;
}

.container-sankey .node text {
    pointer-events: none;
    text-shadow: 0 1px 0 #fff;
}

.container-sankey .link {
    fill: none;
    stroke: #495b7c;
    stroke-opacity: .3;
}

    .container-sankey .link.loss {
        stroke: #a51515;
    }

    .container-sankey .link.profit {
        stroke: #217d20;
    }

.sankey-chart .tip {
    position: absolute;
    display: table;
    background-color: hsla(0,0%,100%,.8);
    padding: 10px;
    border-radius: 5px;
    font-size: 0.8em;
    width: 250px;
    min-height: 100px;
    pointer-events: none;
    color: #666;
}

.sankey-chart .tip table tr td:first-child{
    font-weight:400;
}
.sankey-chart .tip table tr td:last-child {
    font-weight: 800;
    text-align:right;
}

.legend-container .legend {
	position: absolute;
	top: 30px;
	left: 50px;
	background-color: hsla(0,0%,100%,.9);
	padding: 5px 10px 5px 10px;
	border-radius: 5px;
	max-height:350px;
	overflow:hidden;
}
.legend-container .legend .title {
	margin-bottom: 2px;
	font-weight: 900;
}
.legend-container .legend .item {
	font-size: .75em;
}
.legend-container .legend .swatch {
	width: 10px;
	height: 10px;
	margin-top: 3px;
	float: left;
	margin-right: 5px;
}
 .stacked-area-container {
    width:100%;
    height:400px;
}   
 .stacked-area {
    width:100%;
    height:100%;
}

.stacked-area .axis text {
  font: 10px sans-serif;
}

.stacked-area .axis path,
.stacked-area .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
.stacked-area .legend {
	position: absolute;
	left: 50px;
    top: 0px;
	padding: 5px 10px;
}
.modal .stacked-area .legend {
	top: -25px;
	left: 0px;
    bottom:unset;
}
.stacked-area .legend .title {
	margin-bottom: 2px;
	font-weight: 900;
}
.stacked-area .legend .item {
	font-size: .75em;
    color:#888;
    float:left;
    padding-left:10px;
}
.stacked-area .legend .swatch {
	width: 10px;
	height: 10px;
	margin-top: 3px;
	float: left;
	margin-right: 5px;
}

/*TIP*/
.stacked-area .tip {
	position:absolute;
	display:table;
	background-color: hsla(0,0%,100%,.8);
	padding: 10px;
	border-radius: 5px;
	font-size: 0.8em;
	width: 180px;
	height:30px;
	pointer-events:none;
	color:#666;
}
.stacked-area .tip .year {
	font-weight: 900;
	font-size: 1.25em;
	margin-bottom: 2px;
}
.stacked-area .tip .swatch {
  width: 11px;
  height: 11px;
  float: left;
  margin-top: 6px;
  margin-right: 4px;
}
.stacked-area .select {
    position:absolute;
    display:block !important;
    bottom:-15px;
}
.stacked-area .select.left {
    left:0;
}
.stacked-area .select.right {
    right:0;
}
.modal .stacked-area .select {
	top: -45px;
	right: 0;
}
.apps-chart-modern {
    position: relative;
    min-height: 240px;
    font-family: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

    .apps-chart-modern .apps-chart-svg {
        display: block;
        width: 100%;
        height: 100%;
        overflow: visible;
    }

.apps-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: 0 0 .7rem;
}

.apps-chart-legend-item {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 29px;
    padding: .27rem .62rem;
    border: 1px solid rgba(47, 72, 88, .10);
    border-radius: 999px;
    background: #fff;
    color: #2F4858;
    font-size: .77rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(47, 72, 88, .04);
    transition: opacity .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

    .apps-chart-legend-item:hover {
        border-color: rgba(47, 72, 88, .20);
        box-shadow: 0 4px 12px rgba(47, 72, 88, .07);
        transform: translateY(-1px);
    }

    .apps-chart-legend-item.is-muted {
        opacity: .38;
    }

.apps-chart-legend-swatch {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.apps-chart-axis text {
    fill: #758292;
    font-size: 10.5px;
}

.apps-chart-axis path,
.apps-chart-axis line {
    stroke: #D8DFE6;
}

.apps-chart-axis-y .domain {
    display: none;
}

.apps-chart-grid line {
    stroke: #EDF1F4;
    stroke-dasharray: 2 4;
}

.apps-chart-line {
    vector-effect: non-scaling-stroke;
    transition: opacity .12s ease, stroke-width .12s ease;
}

.apps-chart-cursor-line {
    stroke: #94A3B8;
    stroke-width: 1;
    stroke-dasharray: 3 4;
}

.apps-chart-tracker-dot {
    filter: drop-shadow(0 1px 2px rgba(47, 72, 88, .20));
}

.apps-chart-tooltip {
    max-width: 320px;
}

@media (max-width: 767.98px) {
    .apps-chart-legend {
        gap: .3rem;
    }

    .apps-chart-legend-item {
        padding: .24rem .5rem;
        font-size: .72rem;
    }
}

/* -------------------------------------------------------------------------
   Diversification radar
   ------------------------------------------------------------------------- */

.diversification-report {
    position: relative;
    padding: 24px;
    background: #fff;
    border: 1px solid #e4e9ee;
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(47, 72, 88, 0.08);
    color: #2f4858;
}

    .diversification-report > h3 {
        margin: 0 0 8px;
        color: #2f4858;
        font-size: 20px;
        font-weight: 700;
        line-height: 1.3;
    }

    .diversification-report > p:first-of-type {
        max-width: 760px;
        margin: 0 0 18px;
        color: #758292;
        font-size: 13px;
        line-height: 1.55;
    }

/* Score global ----------------------------------------------------------- */

.diversification-score {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    margin-bottom: 8px;
    padding: 10px 14px;
    background: #f6f8fa;
    border: 1px solid #e4e9ee;
    border-radius: 9px;
}

.diversification-score-value {
    color: #3a6f8f;
    font-size: 28px;
    font-weight: 750;
    line-height: 1;
}

.diversification-score > span:not(.diversification-rating) {
    color: #758292;
    font-size: 12px;
    font-weight: 600;
}

.diversification-rating {
    margin-left: 9px;
    padding-left: 10px;
    border-left: 1px solid #d8dfe6;
    color: #2f4858;
    font-size: 12px;
    font-weight: 700;
}

/* Graphique -------------------------------------------------------------- */

.diversification-radar-container {
    position: relative;
    width: 100%;
    min-height: 390px;
    margin-top: 6px;
    transition: opacity 160ms ease;
}

    .diversification-radar-container.buzy {
        min-height: 390px;
        opacity: 0.55;
        pointer-events: none;
    }

        .diversification-radar-container.buzy::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 26px;
            height: 26px;
            margin: -13px 0 0 -13px;
            border: 3px solid rgba(58, 111, 143, 0.18);
            border-top-color: #3a6f8f;
            border-radius: 50%;
            animation: diversification-spinner 700ms linear infinite;
        }

@keyframes diversification-spinner {
    to {
        transform: rotate(360deg);
    }
}

.diversification-radar-svg {
    display: block;
    width: 100%;
}

/* Synthese --------------------------------------------------------------- */

.diversification-summary {
    margin: 4px 0 22px;
    padding: 11px 14px;
    background: rgba(58, 111, 143, 0.06);
    border-left: 3px solid #3a6f8f;
    border-radius: 0 7px 7px 0;
    color: #566675;
    font-size: 12px;
    line-height: 1.5;
}

    .diversification-summary:empty {
        display: none;
    }

/* Findings --------------------------------------------------------------- */

.diversification-report > h4 {
    margin: 0 0 12px;
    color: #2f4858;
    font-size: 15px;
    font-weight: 700;
}

.diversification-findings {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
}

.diversification-finding {
    position: relative;
    min-width: 0;
    padding: 13px 14px 13px 17px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e4e9ee;
    border-radius: 9px;
}

    .diversification-finding::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 4px;
        background: #94a3b8;
    }

    .diversification-finding.is-strength::before {
        background: #4f8a78;
    }

    .diversification-finding.is-information::before {
        background: #3a6f8f;
    }

    .diversification-finding.is-attention::before {
        background: #d08a2e;
    }

    .diversification-finding.is-weakness::before {
        background: #b8664a;
    }

    .diversification-finding.is-dataquality::before {
        background: #7a6c91;
    }

.diversification-finding-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

    .diversification-finding-header strong {
        min-width: 0;
        color: #2f4858;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.35;
    }

    .diversification-finding-header span {
        flex: 0 0 auto;
        padding: 3px 7px;
        background: #f3f6f8;
        border-radius: 999px;
        color: #3a6f8f;
        font-size: 10px;
        font-weight: 700;
        white-space: nowrap;
    }

.diversification-finding p {
    margin: 0;
    color: #667788;
    font-size: 11px;
    line-height: 1.5;
}

.diversification-action {
    margin-top: 8px;
    color: #b8664a;
    font-size: 10.5px;
    font-weight: 700;
}

.diversification-report {
    display: block;
    width: 100%;
}

.diversification-score {
    float: none !important;
    clear: both;
}

.diversification-radar-container {
    display: block;
    clear: both;
    width: 100% !important;
    max-width: 760px;
    min-height: 480px;
    margin: 10px auto 0;
}


/* Responsive ------------------------------------------------------------- */

@media (max-width: 767px) {

    .diversification-report {
        padding: 18px 14px;
        border-radius: 9px;
    }

        .diversification-report > h3 {
            font-size: 18px;
        }

    .diversification-findings {
        grid-template-columns: 1fr;
    }

    .diversification-radar-container {
        min-height: 360px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .diversification-radar-container,
    .diversification-radar-container.buzy::after {
        transition: none;
        animation-duration: 1ms;
    }
}

.navschart-modern {
    position: relative;
    min-height: 320px;
    font-family: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

    .navschart-modern .navschart-svg {
        display: block;
        width: 100%;
        height: 100%;
        overflow: visible;
    }

.navschart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: 0 0 .75rem;
}

.navschart-legend-item {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 30px;
    padding: .28rem .65rem;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 999px;
    background: #fff;
    color: #334155;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    transition: opacity .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

    .navschart-legend-item:hover {
        border-color: rgba(15, 23, 42, .18);
        box-shadow: 0 4px 12px rgba(15, 23, 42, .07);
        transform: translateY(-1px);
    }

    .navschart-legend-item.is-muted {
        opacity: .38;
    }

.navschart-legend-swatch {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.navschart-axis text {
    fill: #64748b;
    font-size: 11px;
}

.navschart-axis path,
.navschart-axis line {
    stroke: #cbd5e1;
}

.navschart-axis-x .domain {
    stroke: #cbd5e1;
}

.navschart-axis-y .domain {
    display: none;
}

.navschart-grid line {
    stroke: #e2e8f0;
    stroke-dasharray: 2 4;
}

.navschart-y-label {
    fill: #64748b;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
}

.navschart-curve {
    vector-effect: non-scaling-stroke;
    transition: opacity .12s ease, stroke-width .12s ease;
}

.navschart-context-line {
    vector-effect: non-scaling-stroke;
}

.navschart-context-base {
    stroke: #e2e8f0;
}

.navschart-brush .selection {
    fill: #475569;
    fill-opacity: .10;
    stroke: #94a3b8;
    stroke-width: 1;
}

.navschart-brush .handle {
    fill: #94a3b8;
}

.navschart-cursor-line {
    stroke: #94a3b8;
    stroke-width: 1;
    stroke-dasharray: 3 4;
}

.navschart-tracker-halo {
    opacity: .15;
}

.navschart-tracker-dot {
    stroke: #fff;
    stroke-width: 2;
    filter: drop-shadow(0 1px 2px rgba(15, 23, 42, .25));
}

.navschart-tip-bg {
    fill: rgba(255, 255, 255, .98);
    stroke: #e2e8f0;
    stroke-width: 1;
    filter: drop-shadow(0 8px 18px rgba(15, 23, 42, .12));
}

.navschart-tip-title {
    fill: #0f172a;
    font-size: 12px;
    font-weight: 700;
}

.navschart-tip-name {
    fill: #475569;
    font-size: 11.5px;
    font-weight: 500;
}

.navschart-tip-value {
    fill: #0f172a;
    font-size: 11.5px;
    font-weight: 700;
}

.navschart-note-line {
    stroke: #cbd5e1;
    stroke-width: 1;
    stroke-dasharray: 2 3;
}

.navschart-note-dot {
    fill: #fff;
    stroke: #64748b;
    stroke-width: 2;
    cursor: pointer;
}

    .navschart-note-dot:hover {
        stroke: #0f172a;
    }

.navschart-note-tooltip {
    position: absolute;
    z-index: 1080;
    max-width: 300px;
    padding: .75rem .85rem;
    border: 1px solid #e2e8f0;
    border-radius: .65rem;
    background: rgba(255, 255, 255, .98);
    color: #475569;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .14);
    font-family: Inter, "Segoe UI", system-ui, sans-serif;
    font-size: .8rem;
    line-height: 1.4;
}

.navschart-note-tooltip-title {
    margin-bottom: .2rem;
    color: #0f172a;
    font-weight: 700;
}

.navschart-note-tooltip-text {
    color: #64748b;
}

@media (max-width: 767.98px) {
    .navschart-legend {
        gap: .3rem;
    }

    .navschart-legend-item {
        padding: .24rem .5rem;
        font-size: .72rem;
    }
}

/* ============================================================
   ACCOUNT - LAYOUT 2 COLONNES
   Utilisé uniquement si la vue définit @section accountVisual
   ============================================================ */

.account-shell-inner-split {
    width: 100%;
    max-width: 1240px;
}

.account-content {
    width: 100%;
}

/* Mode 2 colonnes */
.account-content-split {
    display: grid;
    grid-template-columns: minmax(380px, 460px) minmax(480px, 1fr);
    gap: 64px;
    align-items: center;
    width: 100%;
}

    /* Colonne formulaire */
    .account-content-split .account-card {
        width: 100%;
        min-width: 0;
        margin: 0;
    }

/* Colonne visuelle */
.account-visual {
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ============================================================
   SIGNIN VISUAL
   ============================================================ */

.signin-visual {
    position: relative;
    width: 100%;
    height: 520px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
}

.signin-visual-header {
    position: absolute;
    top: 28px;
    left: 0;
    right: 0;
    z-index: 2;
    text-align: center;
    pointer-events: none;
}

    .signin-visual-header h2 {
        margin: 0;
        color: #25364a;
        font-family: "Lato", sans-serif;
        font-size: 22px;
        font-weight: 600;
        line-height: 1.3;
    }

    .signin-visual-header p {
        margin: 7px 0 0;
        color: #8b98a8;
        font-family: "Lato", sans-serif;
        font-size: 12px;
        font-weight: 400;
        letter-spacing: .05em;
    }


/* ============================================================
   CONTENEUR D3
   ============================================================ */

.signin-allocation-chart,
#etfr-signin-allocation {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 520px;
}

    #etfr-signin-allocation svg {
        display: block;
        width: 100%;
        height: 100%;
        overflow: visible;
    }


/* ============================================================
   FOOTER
   ============================================================ */

.account-shell-inner-split .account-page-footer {
    width: 100%;
    text-align: center;
}


/* ============================================================
   RESPONSIVE
   Sur tablette/mobile on masque le visuel et on revient
   au formulaire classique.
   ============================================================ */

@media (max-width: 1099.98px) {

    .account-shell-inner-split {
        max-width: 520px;
    }

    .account-content-split {
        display: block;
    }

    .account-visual {
        display: none;
    }
}


/* ============================================================
   PETITS ÉCRANS
   ============================================================ */

@media (max-width: 575.98px) {

    .account-shell-inner-split {
        width: 100%;
        max-width: 100%;
    }

    .account-content-split .account-card {
        width: 100%;
    }
}

/* ========================================================================== 
   ETFREPORTING - Modern dc.js / D3 visual layer
   Shared stylesheet for portfolio and activity charts.
   Load after Bootstrap and dc.css.
   ========================================================================== */

:root {
    --chart-bg: #ffffff;
    --chart-surface: #ffffff;
    --chart-surface-subtle: #f8fafc;
    --chart-border: #e2e8f0;
    --chart-grid: #edf2f7;
    --chart-text: #0f172a;
    --chart-muted: #64748b;
    --chart-faint: #94a3b8;
    --chart-primary: #567793;
    --chart-primary-strong: #2563eb;
    --chart-positive: #16a34a;
    --chart-negative: #dc2626;
    --chart-warning: #f59e0b;
    --chart-radius: 14px;
    --chart-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .05);
}

/* --------------------------------------------------------------------------
   Cards / containers
   -------------------------------------------------------------------------- */
.portfolio-chart-card {
    position: relative;
    background: var(--chart-surface);
    border: 1px solid var(--chart-border);
    border-radius: var(--chart-radius);
    box-shadow: var(--chart-shadow);
    padding: 18px 18px 12px;
    overflow: hidden;
}

.portfolio-chart-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
}

.portfolio-chart-card__title {
    margin: 0;
    color: var(--chart-text);
    font-size: .95rem;
    font-weight: 650;
    letter-spacing: -.01em;
}

.portfolio-chart-card__subtitle {
    margin-top: 3px;
    color: var(--chart-muted);
    font-size: .78rem;
    line-height: 1.4;
}

/* --------------------------------------------------------------------------
   Shared dc.js / SVG foundation
   Supports the portfolio .pf-chart classes and existing activity .dc-modern
   classes without requiring a JS rewrite.
   -------------------------------------------------------------------------- */
.pf-chart,
.dc-modern {
    position: relative;
    color: var(--chart-text);
    font-family: inherit;
    font-variant-numeric: tabular-nums;
}

    .pf-chart svg,
    .dc-modern svg {
        overflow: visible;
        font-family: inherit;
    }

    .pf-chart .axis path,
    .pf-chart .axis line,
    .pf-chart .x.axis path,
    .pf-chart .y.axis path,
    .pf-chart .x.axis line,
    .pf-chart .y.axis line,
    .dc-modern .axis path.domain,
    .dc-modern .axis .tick line {
        stroke: var(--chart-border);
        shape-rendering: crispEdges;
    }

    .pf-chart .axis text,
    .pf-chart .x.axis text,
    .pf-chart .y.axis text,
    .dc-modern .axis text {
        fill: var(--chart-muted);
        font-size: 11px;
        font-weight: 500;
    }

    .pf-chart .grid-line line,
    .pf-chart g.grid-line line,
    .pf-chart .horizontal.grid-line line,
    .pf-chart .vertical.grid-line line,
    .dc-modern .grid-line line {
        stroke: var(--chart-grid);
        stroke-opacity: 1;
    }

    .pf-chart .grid-line path,
    .dc-modern .grid-line path {
        stroke: none;
    }

    .pf-chart .x-axis-label,
    .pf-chart .y-axis-label {
        fill: var(--chart-muted);
        font-size: 11px;
        font-weight: 600;
    }

/* --------------------------------------------------------------------------
   Lines / areas
   -------------------------------------------------------------------------- */
.pf-chart--lines path.line {
    filter: drop-shadow(0 1px 1px rgba(37, 99, 235, .08));
}

.pf-chart--lines path.area {
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   Bars
   -------------------------------------------------------------------------- */
.pf-chart--bars rect.bar,
.pf-chart--stacked rect.bar,
.pf-chart--sharpe rect.bar,
.dc-modern-bars rect.bar {
    stroke: none;
    opacity: .92;
    transition: opacity .16s ease, filter .16s ease;
}

.dc-modern-bars rect.bar {
    fill: var(--chart-primary);
}

    .pf-chart--bars rect.bar:hover,
    .pf-chart--stacked rect.bar:hover,
    .pf-chart--sharpe rect.bar:hover,
    .dc-modern-bars rect.bar:hover,
    .dc-modern-bars rect.bar.selected {
        opacity: 1;
        filter: brightness(.98);
    }

    .dc-modern-bars rect.bar.deselected {
        opacity: .25;
    }

/* --------------------------------------------------------------------------
   Donuts / pie charts
   -------------------------------------------------------------------------- */
.pf-chart--pie g.pie-slice path,
.dc-modern-pie g.pie-slice path {
    stroke: #fff;
    stroke-width: 2px;
    transition: opacity .16s ease, transform .16s ease;
}

.pf-chart--pie g.pie-slice:hover path,
.dc-modern-pie g.pie-slice:hover path {
    opacity: .88;
}

.pf-chart--pie .pie-slice text,
.dc-modern-pie g.pie-slice text {
    fill: var(--chart-muted);
    font-size: 11px;
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Rows
   -------------------------------------------------------------------------- */
.pf-chart--rows g.row rect,
.dc-modern-rows g.row rect {
    stroke: none;
    opacity: .92;
    transition: opacity .16s ease;
}

.pf-chart--rows g.row:hover rect,
.dc-modern-rows g.row:hover rect {
    opacity: 1;
}

.dc-modern-rows g.row.deselected rect {
    opacity: .22;
}

.pf-chart--rows g.row text,
.dc-modern-rows g.row text {
    fill: var(--chart-text);
    font-size: 11px;
    font-weight: 550;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   Scatter / bubbles
   -------------------------------------------------------------------------- */
.pf-chart--bubbles circle,
.pf-chart--plots circle {
    transition: opacity .15s ease, stroke-width .15s ease;
}

    .pf-chart--bubbles circle:hover,
    .pf-chart--plots circle:hover {
        opacity: 1;
        stroke-width: 3px;
    }

/* --------------------------------------------------------------------------
   Heat map
   -------------------------------------------------------------------------- */
.pf-chart--heatMap rect.heat-box {
    transition: opacity .16s ease, filter .16s ease;
}

    .pf-chart--heatMap rect.heat-box:hover {
        opacity: .88;
        filter: saturate(1.08);
    }

/* --------------------------------------------------------------------------
   Legend / brush / filters
   -------------------------------------------------------------------------- */
.dc-modern .dc-legend-item text,
.pf-chart .dc-legend-item text {
    fill: var(--chart-muted);
    font-size: 11px;
}

.dc-modern .brush .selection,
.pf-chart .brush .selection {
    fill: var(--chart-primary);
    fill-opacity: .12;
    stroke: var(--chart-primary);
    stroke-opacity: .45;
}

.dc-modern .reset,
.dc-modern .filter,
.pf-chart .reset,
.pf-chart .filter {
    font-size: 11px;
    color: var(--chart-muted);
}

/* dc.js selection state */
.pf-chart .selected path,
.pf-chart .selected rect,
.pf-chart .selected circle,
.dc-modern .selected path,
.dc-modern .selected rect,
.dc-modern .selected circle {
    opacity: 1;
}

.pf-chart .deselected path,
.pf-chart .deselected rect,
.pf-chart .deselected circle,
.dc-modern .deselected path,
.dc-modern .deselected rect,
.dc-modern .deselected circle {
    opacity: .22;
}

/* --------------------------------------------------------------------------
   KPI / number display
   -------------------------------------------------------------------------- */
.portfolio-kpi {
    min-height: 92px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(180deg, #fff 0%, var(--chart-surface-subtle) 100%);
    border: 1px solid var(--chart-border);
    border-radius: 12px;
    padding: 14px 16px;
}

    .portfolio-kpi .number-display,
    .portfolio-kpi .dc-number-display {
        color: var(--chart-text);
        font-size: clamp(1.45rem, 2.8vw, 2rem);
        font-weight: 700;
        letter-spacing: -.04em;
        line-height: 1;
    }

.portfolio-kpi-label {
    margin-top: 7px;
    color: var(--chart-muted);
    font-size: .72rem;
    font-weight: 650;
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */
.pf-chart--table table,
.portfolio-chart-table,
.activity-table-modern {
    width: 100%;
    margin-bottom: 0;
    color: var(--chart-text);
    border-collapse: separate;
    border-spacing: 0;
}

.pf-chart--table table,
.portfolio-chart-table {
    font-size: .82rem;
}

.activity-table-modern {
    font-size: 12px;
}

    .pf-chart--table thead th,
    .portfolio-chart-table thead th,
    .activity-table-modern thead th {
        background: var(--chart-surface-subtle);
        border-bottom: 1px solid var(--chart-border);
        color: var(--chart-muted);
        white-space: nowrap;
    }

.pf-chart--table thead th,
.portfolio-chart-table thead th {
    padding: 10px 12px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.activity-table-modern thead th {
    padding: .65rem .75rem;
    font-size: 11px;
    font-weight: 600;
}

.pf-chart--table td,
.portfolio-chart-table td,
.activity-table-modern tbody td {
    vertical-align: middle;
}

.pf-chart--table td,
.portfolio-chart-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #f1f5f9;
}

.activity-table-modern tbody td {
    padding: .55rem .75rem;
    border-top: 1px solid var(--chart-grid);
}

.pf-chart--table tbody tr:hover td,
.portfolio-chart-table tbody tr:hover td,
.activity-table-modern tbody tr:hover td {
    background: #fafbfd;
}

.activity-table-modern .img-td {
    width: 26px;
    height: 26px;
    object-fit: contain;
    border-radius: 4px;
}

.activity-table-modern .btn {
    line-height: 1.1;
}

.opacity-low {
    opacity: .42;
}

/* --------------------------------------------------------------------------
   Optional dark mode
   -------------------------------------------------------------------------- */
.theme-dark {
    --chart-bg: #0f172a;
    --chart-surface: #111827;
    --chart-surface-subtle: #172033;
    --chart-border: #293548;
    --chart-grid: #243044;
    --chart-text: #e5edf6;
    --chart-muted: #9aa9ba;
    --chart-faint: #718096;
}

    .theme-dark .portfolio-kpi {
        background: linear-gradient(180deg, #111827 0%, #172033 100%);
    }

    .theme-dark .pf-chart--pie g.pie-slice path,
    .theme-dark .dc-modern-pie g.pie-slice path {
        stroke: var(--chart-surface);
    }

    .theme-dark .pf-chart--table tbody tr:hover td,
    .theme-dark .portfolio-chart-table tbody tr:hover td,
    .theme-dark .activity-table-modern tbody tr:hover td {
        background: #172033;
    }


/* --------------------------------------------------------------------------
   Rich chart tooltips
   -------------------------------------------------------------------------- */
.chart-tooltip {
    position: absolute;
    z-index: 1080;
    min-width: 190px;
    max-width: 310px;
    padding: 0;
    overflow: hidden;
    background: rgba(15, 23, 42, .96);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 12px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .22), 0 4px 12px rgba(15, 23, 42, .14);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    pointer-events: none;
    font-size: 12px;
    line-height: 1.4;
    opacity: 0;
    transform: translateY(4px) scale(.985);
    transform-origin: top left;
    transition: opacity .10s ease, transform .10s ease;
}

    .chart-tooltip.is-visible {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

.chart-tooltip__header {
    padding: 10px 12px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.chart-tooltip__title {
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .01em;
}

.chart-tooltip__subtitle {
    margin-top: 2px;
    color: rgba(226, 232, 240, .66);
    font-size: 11px;
    font-weight: 500;
}

.chart-tooltip__body {
    padding: 8px 12px 10px;
}

.chart-tooltip__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 22px;
    padding: 3px 0;
}

.chart-tooltip__label {
    color: rgba(226, 232, 240, .62);
    white-space: nowrap;
}

.chart-tooltip__value {
    color: rgba(255, 255, 255, .96);
    font-variant-numeric: tabular-nums;
    font-weight: 650;
    text-align: right;
    white-space: nowrap;
}

    .chart-tooltip__value.is-positive {
        color: #86efac;
    }

    .chart-tooltip__value.is-negative {
        color: #fca5a5;
    }

    .chart-tooltip__value.is-warning {
        color: #fcd34d;
    }

.pf-tooltip-guide {
    stroke: #64748b;
    stroke-width: 1px;
    stroke-dasharray: 3 4;
    stroke-opacity: .58;
    pointer-events: none;
}

.pf-chart circle.dot,
.dc-modern circle.dot {
    transition: r .10s ease, fill-opacity .10s ease, stroke-opacity .10s ease;
    fill: #2563eb;
    stroke: #fff;
    stroke-width: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .chart-tooltip,
    .pf-chart circle.dot,
    .dc-modern circle.dot {
        transition: none;
    }
}


/* ==========================================================================
   Line chart interaction points
   Keep the hit area available for tooltips without drawing a marker on
   every observation. The active point is revealed by portfolio.charts JS.
   ========================================================================== */
.pf-chart--lines circle.dot {
    fill: #2563eb;
    stroke: #fff;
    stroke-width: 2px;
    fill-opacity: 0;
    stroke-opacity: 0;
}

/* Scatter plots remain understated when used independently. */
.pf-chart--plots circle {
    opacity: .30;
    stroke-width: 1px;
}

    .pf-chart--plots circle:hover,
    .pf-chart--plots circle.selected {
        opacity: .95;
        stroke-width: 2px;
    }

    .pf-chart--plots circle.deselected {
        opacity: .10;
    }


/* ==========================================================================
   Pie charts 5.4
   Centered, responsive, calmer labels and better one-slice / empty states.
   The JS still owns the dc.js radius; this layer only constrains presentation.
   ========================================================================== */
.dc-modern-pie {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 220px;
    overflow: hidden;
}

    .dc-modern-pie > svg {
        display: block;
        width: auto !important;
        height: auto !important;
        max-width: min(100%, 420px);
        max-height: 420px;
        margin: auto;
        overflow: visible;
    }

    .dc-modern-pie g.pie-slice path {
        stroke: rgba(255, 255, 255, .92);
        stroke-width: 1.5px;
        transition: opacity .14s ease, filter .14s ease, transform .14s ease;
    }

    .dc-modern-pie g.pie-slice:hover path {
        opacity: .96;
        filter: brightness(1.025);
    }

    .dc-modern-pie g.pie-slice text {
        font-size: 11px;
        font-weight: 600;
        fill: #52616f;
        pointer-events: none;
    }

    .dc-modern-pie .selected path {
        opacity: 1;
    }

    .dc-modern-pie .deselected path {
        opacity: .18;
    }

    .dc-modern-pie.is-single-slice g.pie-slice path {
        stroke-width: 1px;
    }

    .dc-modern-pie.is-single-slice g.pie-slice text {
        font-size: 12px;
        font-weight: 600;
    }

    .dc-modern-pie.is-empty::after {
        content: "Aucune donnée";
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        color: #8a97a4;
        font-size: 12px;
        font-weight: 500;
        pointer-events: none;
    }

    .dc-modern-pie.is-empty svg {
        opacity: .14;
    }

@media (max-width: 767.98px) {
    .dc-modern-pie {
        min-height: 180px;
    }

        .dc-modern-pie > svg {
            max-width: min(100%, 320px);
            max-height: 320px;
        }
}