/*
 * Extracteur d'entités (Dandelion) : styles dédiés, scopés sous .ee.
 * Aligné sur le patron des autres outils (cf. hreflang-auditor.css).
 */

.ee .ee-section-titre {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--brand-dark);
    margin: 0 0 1rem;
}
.ee .ee-section-titre > .bi:first-child { color: var(--brand-teal); }

/* Carte d'intro « Comment ca marche » en deux colonnes. */
.ee .ee-intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2rem; }
.ee .ee-intro-grid ul { padding-left: 1.2rem; margin: 0; font-size: 0.88rem; line-height: 1.6; color: var(--text-secondary); }
.ee .ee-intro-titre { font-weight: 700; color: var(--brand-dark); margin-bottom: 0.5rem; }

/* Formulaire soigne. */
.ee .form-control, .ee .form-select {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 15px;
    padding: 0.55rem 0.8rem;
}
.ee .form-control:focus, .ee .form-select:focus {
    outline: none;
    border-color: var(--brand-teal);
    box-shadow: 0 0 0 0.2rem rgba(102, 178, 178, 0.25);
}
.ee textarea.form-control { min-height: 150px; resize: vertical; }

.ee .ee-input-group { display: flex; align-items: stretch; }
.ee .ee-input-group .ee-input-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.85rem;
    background: var(--brand-teal-light);
    color: var(--brand-dark);
    border: 1px solid var(--border-color);
    border-right: none;
    border-radius: 6px 0 0 6px;
    font-size: 1.15rem;
}
.ee .ee-input-group .form-control { border-radius: 0 6px 6px 0; }

/* KPIs. */
.ee .kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; }
.ee .kpi-card {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    padding: 1.1rem 1.25rem;
    box-shadow: rgba(0, 76, 76, 0.06) 0 2px 8px, rgba(0, 0, 0, 0.04) 0 1px 3px;
}
.ee .kpi-value { font-size: 2rem; font-weight: 700; line-height: 1.1; color: var(--brand-dark); }
.ee .kpi-label { font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 0.3rem; }
.ee .kpi-gold .kpi-value { color: #c8860a; }
.ee .kpi-green .kpi-value { color: #198754; }

/* Tableau des entites. */
.ee .ee-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.ee .ee-table th, .ee .ee-table td { padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border-color); text-align: left; vertical-align: top; }
.ee .ee-table thead th { background: rgb(241, 245, 249); color: rgb(15, 23, 42); font-weight: 600; }
.ee .ee-table tbody tr:hover { background: rgba(102, 178, 178, 0.06); }
.ee .ee-barre { height: 6px; border-radius: 3px; background: var(--brand-teal-light); min-width: 56px; }
.ee .ee-barre > span { display: block; height: 100%; border-radius: 3px; background: var(--brand-teal); }
.ee .ee-badge-princ { display: inline-block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; background: var(--brand-gold-light); color: #b47800; border-radius: 4px; padding: 1px 6px; font-weight: 600; }
.ee .ee-type { display: inline-block; font-size: 0.78rem; background: var(--brand-teal-light); color: var(--brand-dark); border-radius: 4px; padding: 1px 6px; margin: 1px 2px 1px 0; }
.ee .ee-cluster { margin: 0.4rem 0; padding: 0.6rem 0.8rem; background: #fff; border: 1px solid var(--border-color); border-radius: 0.6rem; }
.ee .ee-filtres { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }

/* Carte de cross-link (bas de page). */
.ee .ee-crosslink {
    margin-top: 1.5rem;
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
    background: linear-gradient(135deg, var(--brand-teal-light) 0%, transparent 70%);
}

/* Dark mode. */
[data-theme="dark"] .ee .form-control, [data-theme="dark"] .ee .form-select { background: #1f2937; color: var(--text-primary); }
[data-theme="dark"] .ee .kpi-card, [data-theme="dark"] .ee .ee-cluster { background: #1f2937; }
[data-theme="dark"] .ee .ee-table thead th { background: #243244; color: var(--text-primary); }
[data-theme="dark"] .ee .ee-input-group .ee-input-icone { background: #243244; color: var(--text-primary); }

@media (max-width: 640px) {
    .ee .ee-intro-grid { grid-template-columns: 1fr; }
    .ee .kpi-row { grid-template-columns: repeat(2, 1fr); }
}