/* ==========================================================================
GROUP PERFORMANCE (Full Page) - DESIGN BOURSE (TradingView / Bloomberg)
========================================================================== */
:root {
--fin-bg: #131722;
--fin-panel: #1e222d;
--fin-border: #2a2e39;
--fin-text-muted: #787b86;
--fin-text: #d1d4dc;
--fin-text-light: #ffffff;
--fin-green: #089981;
--fin-red: #f23645;
--fin-blue: #2962ff;
}
.etea-gp-hidden-row {
display: none;
}
.etea-group-performance-wrapper {
width: 100%;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--fin-text);
}
.etea-gp-desc {
color: var(--fin-text-muted);
font-size: 14px;
margin-bottom: 30px;
}
.etea-gp-section-title {
color: var(--fin-text-light);
font-size: 1.3em;
font-weight: 600;
margin-top: 40px;
margin-bottom: 25px;
padding-bottom: 10px;
border-bottom: 1px solid var(--fin-border);
}
.etea-gp-new-section {
border-top: 1px dashed var(--fin-border);
padding-top: 30px;
}
/* Bi-directional Chart */
.etea-gp-chart {
background-color: var(--fin-bg);
border: 1px solid var(--fin-border);
border-radius: 8px;
padding: 20px;
margin-bottom: 25px;
}
.etea-gp-chart-title {
color: var(--fin-text-muted);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
margin: 0 0 20px 0;
}
.etea-gp-bar-container {
display: flex;
align-items: center;
margin-bottom: 14px;
font-size: 13px;
}
.etea-gp-bar-label {
flex-basis: 30%;
padding-right: 15px;
min-width: 120px;
}
.etea-gp-group-link {
color: var(--fin-text);
text-decoration: none;
transition: color 0.2s;
font-weight: 500;
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.etea-gp-group-link:hover { color: var(--fin-blue); }
.etea-gp-bar-wrapper {
flex-grow: 1;
position: relative;
height: 18px;
background-color: transparent;
cursor: pointer;
}
.etea-gp-bar {
position: absolute;
top: 0;
bottom: 0;
border-radius: 4px;
transition: width 0.3s ease, background-color 0.3s ease;
}
.etea-gp-bar.positive { background-color: var(--fin-green); }
.etea-gp-bar.negative { background-color: var(--fin-red); }
.etea-gp-bar-zero-line {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 1px;
background-color: var(--fin-border);
transform: translateX(-50%);
}
.etea-gp-bar-value {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-weight: 600;
font-size: 12px;
padding: 0 8px;
white-space: nowrap;
}
.etea-gp-bar-value.positive { color: #ffffff; text-shadow: 0 0 5px rgba(0,0,0,0.7); }
.etea-gp-bar-value.negative { color: #ffffff; text-shadow: 0 0 5px rgba(0,0,0,0.7); }
.value-align-right { right: 51%; }
.value-align-left { left: 51%; }
.etea-gp-show-all-btn {
display: block;
margin: 20px auto 0 auto;
background-color: transparent;
border: 1px solid var(--fin-blue);
color: var(--fin-blue);
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
font-weight: 600;
transition: all 0.2s ease;
}
.etea-gp-show-all-btn:hover {
background-color: var(--fin-blue);
color: #ffffff;
}
/* MODAL STYLES (réutilisés et préfixés) */
.etea-gp-modal {
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
background: rgba(19, 23, 34, 0.8); backdrop-filter: blur(5px);
z-index: 9999; display: flex; align-items: center; justify-content: center;
}
.etea-gp-modal-content {
background: var(--fin-panel); border: 1px solid var(--fin-border);
border-radius: 8px; padding: 30px; width: 90%; max-width: 550px;
position: relative; box-shadow: 0 15px 40px rgba(0,0,0,0.5);
max-height: 80vh; display: flex; flex-direction: column;
}
.etea-gp-modal-close {
position: absolute; top: 15px; right: 20px; font-size: 24px;
color: var(--fin-text-muted); cursor: pointer; transition: color 0.2s;
}
.etea-gp-modal-close:hover { color: var(--fin-red); }
#etea-gp-modal-title {
color: var(--fin-text-light); font-size: 1.2em; font-weight: 600;
margin-top: 0; margin-bottom: 20px; border-bottom: 1px solid var(--fin-border);
padding-bottom: 15px;
}
#etea-gp-modal-list {
list-style: none; padding: 0; margin: 0; overflow-y: auto;
flex-grow: 1;
}
/* --- BLOC TOP MOVER (MODALE) --- */
.etea-gp-tm-box {
    background: var(--fin-bg);
    padding: 20px;
    border-radius: 8px;
    border: 1px dashed var(--fin-blue);
    margin-bottom: 25px;
    position: relative;
}

.etea-gp-tm-label {
    font-size: 9px;
    text-transform: uppercase;
    color: var(--fin-text-muted);
    display: block;
    margin-bottom: 12px;
    letter-spacing: 1px;
}

.etea-gp-tm-content {
    display: flex;
    align-items: center;
    gap: 15px;
}

.etea-gp-tm-img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #ffffff !important;
    padding: 4px;
    object-fit: contain;
    border: 1px solid var(--fin-border);
}

.etea-gp-tm-ticker {
    font-size: 1.5em;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
}

.etea-gp-tm-ticker:hover { color: var(--fin-blue); }

.etea-gp-tm-val {
    font-weight: bold;
    margin-left: 10px;
    font-size: 1.2em;
}

.etea-gp-tm-val.positive { color: var(--fin-green); }
.etea-gp-tm-val.negative { color: var(--fin-red); }

/* Lignes de la modale */
.etea-gp-modal-li {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 15px;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid var(--fin-border);
}
.etea-gp-modal-li:last-child {
border-bottom: none;
}
.etea-gp-modal-li.header {
color: var(--fin-text-muted);
font-size: 11px;
text-transform: uppercase;
font-weight: 600;
}
.etea-gp-modal-asset { display: flex; align-items: center; }
.etea-gp-modal-asset img { width: 28px; height: 28px; border-radius: 50%; background: #fff; padding: 2px; margin-right: 12px; object-fit: contain; }
.etea-gp-modal-asset a { color: var(--fin-text-light); font-weight: 600; text-decoration: none; transition: color 0.2s; }
.etea-gp-modal-asset a:hover { color: var(--fin-blue); }
.etea-gp-modal-sec { display: block; font-size: 11px; color: var(--fin-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.etea-gp-modal-move { text-align: right; font-weight: 600; font-size: 13px; }
.etea-gp-modal-move.positive { color: var(--fin-green); }
.etea-gp-modal-move.negative { color: var(--fin-red); }
.etea-gp-modal-pred { text-align: right; font-size: 14px; }
.etea-gp-modal-pred.positive { color: var(--fin-green); }
.etea-gp-modal-pred.negative { color: var(--fin-red); }
.etea-gp-modal-pred.neutral { color: var(--fin-text-muted); }
/* RESPONSIVE */
@media (max-width: 768px) {
.etea-gp-bar-container { flex-wrap: wrap; }
.etea-gp-bar-label { flex-basis: 100%; margin-bottom: 8px; }
.etea-gp-bar-wrapper { flex-basis: 100%; }
}