/* === Page Moteurs — galerie des composants === */

.exv-cat-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
}
.exv-cat-head .exv-page-title,
.exv-cat-head .exv-section-title { margin: 0; }
.exv-cat-link {
    margin-left: auto;
    font-size: var(--ht-texte-08);
    color: var(--theme-button-cl-blue);
    text-decoration: none;
    white-space: nowrap;
}
.exv-cat-link:hover { text-decoration: underline; }

.exv-comp-icon {
    display: inline-flex;
    align-items: center;
    color: var(--theme-button-cl-blue);
    font-size: 18px;
    line-height: 1;
}
.exv-comp-icon.big { font-size: 24px; }

.exv-comp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
    margin: 12px 0 8px;
}
.exv-comp-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--theme-bg-tertiaire);
    border: 1px solid var(--theme-border-color);
    border-radius: var(--border-radius-classic);
    padding: 14px;
    transition: border-color 0.15s, transform 0.15s;
}
.exv-comp-card:hover { border-color: var(--theme-button-cl-blue); transform: translateY(-2px); }
.exv-comp-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.exv-comp-ref { font-size: var(--ht-texte-115); font-weight: var(--wg-texte-semibold); }
.exv-comp-head .exv-badge { margin-left: auto; }
.exv-comp-strat { font-size: var(--ht-texte-08); color: var(--theme-texte-secondaire); margin-bottom: 6px; }
.exv-comp-summary {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Profil (carte d'identité) — barres horizontales. */
.exv-profile { display: flex; flex-direction: column; gap: 7px; margin-top: 14px; }
.exv-profile-row { display: flex; align-items: center; gap: 10px; }
.exv-profile-k { flex: 0 0 84px; font-size: var(--ht-texte-07); color: var(--theme-texte-tertiaire); }
.exv-profile-bar { flex: 1 1 auto; height: 7px; background: var(--theme-bg-quaterniaire); border-radius: 999px; overflow: hidden; }
.exv-profile-bar > span { display: block; height: 100%; background: var(--theme-button-cl-blue); border-radius: 999px; }
.exv-profile-v { flex: 0 0 22px; text-align: right; font-size: var(--ht-texte-07); color: var(--theme-texte-secondaire); }

/* Grille de métadonnées (détail). */
.exv-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
}
.exv-meta-k { font-size: var(--ht-texte-07); color: var(--theme-texte-tertiaire); }
.exv-meta-v { font-size: var(--ht-texte-09); font-weight: var(--wg-texte-medium); }

.exv-select {
    padding: 5px 8px;
    border: 1px solid var(--theme-border-color);
    background: var(--theme-bg-secondaire);
    color: var(--theme-texte-primaire);
    border-radius: var(--border-radius-classic);
    font-size: var(--ht-texte-08);
}
.exv-chart-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    margin-bottom: 12px;
}

/* Sélecteur de leviers à comparer + bascule Performance/Levier. */
.exv-lever-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.exv-segmented { display: inline-flex; border: 1px solid var(--theme-border-color); border-radius: var(--border-radius-classic); overflow: hidden; }
.exv-segmented button {
    background: var(--theme-bg-tertiaire);
    color: var(--theme-texte-secondaire);
    border: none;
    padding: 5px 16px;
    font-size: var(--ht-texte-08);
    font-weight: var(--wg-texte-medium);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.exv-segmented button.active { background: var(--theme-button-cl-blue); color: var(--cl-blanc-i1); }