/* ============================================================================
 * IndicesPro Frontend — Design System (v0.8.1)
 *
 * Architecture :
 *   1. Tokens (variables CSS) — toutes les couleurs, espacements, rayons
 *   2. Mode sombre (auto via prefers-color-scheme + override [data-theme])
 *   3. Layout & typo
 *   4. Composants V0.6 (heading, text, html, ad)
 *   5. Composants data (subtitle, status_banner, value_block, variations,
 *      chart, history_table, meta_list, predecessors, related, source_footer,
 *      legacy_content)
 *   6. États (erreur, focus, hover)
 *   7. Responsive
 *
 * Toutes les couleurs passent par var(). Aucune valeur en dur dans les composants.
 * Pour changer la palette, voir le bloc 🎨 PALETTE ci-dessous.
 * ============================================================================ */

/* ============================================================================
 * 🎨 PALETTE — POINT UNIQUE DE BASCULE
 *
 * Pour changer la palette du plugin, modifier UNIQUEMENT ce bloc et son
 * équivalent dans le bloc "TOKENS — Mode sombre" plus bas (recherche : 🎨).
 * Toutes les autres règles utilisent var(--ip-*) et héritent automatiquement.
 *
 * Référentiel des palettes : voir indicespro-child/PALETTES.md du child theme.
 *
 * Palette actuelle (v0.8.1) : indigo institutionnel #29458f
 * Cohérent avec child theme v1.1.0+
 * ============================================================================ */

:root {
    /* — Accent (indigo institutionnel) - 🎨 PALETTE MODE CLAIR -------------- */
    --ip-accent:          #29458f;     /* couleur signature */
    --ip-accent-hover:    #1f356f;     /* hover sur l'accent */
    --ip-accent-active:   #1d3167;     /* active/pressed */
    --ip-accent-bg:       rgba(41, 69, 143, 0.08);  /* fonds accent transparents */
    --ip-accent-bg-hover: rgba(41, 69, 143, 0.12);
    --ip-accent-border:   rgba(41, 69, 143, 0.20);  /* bordures accent */
    /* — Fin du bloc PALETTE clair — */
}

/* ============================================================================
   1. TOKENS — Mode clair (par défaut)
   ============================================================================ */

:root {
    /* — Surfaces (backgrounds) ----------------------------------------------- */
    --ip-bg-primary:    #ffffff;       /* fond principal de la page */
    --ip-bg-secondary:  #fafafa;       /* fond des cartes douces */
    --ip-bg-tertiary:   #f4f4f5;       /* fond des éléments encore plus doux */
    --ip-bg-code:       #f4f4f5;       /* fond des <code> */
    --ip-bg-hover:      #f4f4f5;       /* fond au hover des items cliquables */

    /* — Texte ---------------------------------------------------------------- */
    --ip-text-primary:    #18181b;     /* corps de texte, titres, valeurs */
    --ip-text-secondary:  #52525b;     /* texte secondaire, descriptions */
    --ip-text-muted:      #a1a1aa;     /* méta, hints, placeholders */
    --ip-text-on-accent:  #ffffff;     /* texte sur fond accent */

    /* — Bordures ------------------------------------------------------------- */
    --ip-border-subtle:   #e4e4e7;     /* séparations douces */
    --ip-border-default:  #d4d4d8;     /* bordures par défaut */
    --ip-border-strong:   #a1a1aa;     /* bordures appuyées */

    /* — Sémantique (success/warning/danger/info) ----------------------------- */
    --ip-success:        #16a34a;
    --ip-success-bg:     rgba(22, 163, 74, 0.08);
    --ip-success-border: rgba(22, 163, 74, 0.20);

    --ip-warning:        #ca8a04;
    --ip-warning-bg:     rgba(202, 138, 4, 0.08);
    --ip-warning-border: rgba(202, 138, 4, 0.20);

    --ip-danger:         #dc2626;
    --ip-danger-bg:      rgba(220, 38, 38, 0.08);
    --ip-danger-border:  rgba(220, 38, 38, 0.20);

    --ip-info:           #0284c7;
    --ip-info-bg:        rgba(2, 132, 199, 0.08);
    --ip-info-border:    rgba(2, 132, 199, 0.20);

    /* — Variations (couleurs +/- pour les chiffres financiers) -------------- */
    --ip-var-up:         var(--ip-success);
    --ip-var-down:       var(--ip-danger);
    --ip-var-flat:       var(--ip-text-muted);

    /* — Espacement (échelle 4px) -------------------------------------------- */
    --ip-space-1:  4px;
    --ip-space-2:  8px;
    --ip-space-3:  12px;
    --ip-space-4:  16px;
    --ip-space-5:  20px;
    --ip-space-6:  24px;
    --ip-space-8:  32px;
    --ip-space-10: 40px;
    --ip-space-12: 48px;
    --ip-space-16: 64px;

    /* — Rayons -------------------------------------------------------------- */
    --ip-radius-sm:   6px;
    --ip-radius-md:   8px;
    --ip-radius-lg:   12px;
    --ip-radius-pill: 999px;

    /* — Ombres (très subtiles, mode clair) ---------------------------------- */
    --ip-shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.04);
    --ip-shadow-md:  0 2px 6px rgba(0, 0, 0, 0.06);
    --ip-shadow-lg:  0 4px 16px rgba(0, 0, 0, 0.08);

    /* — Typographie --------------------------------------------------------- */
    --ip-font-sans:
        ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, "Inter", "Helvetica Neue", Arial, sans-serif;
    --ip-font-mono:
        ui-monospace, "SF Mono", Menlo, Monaco, Consolas,
        "Liberation Mono", "Courier New", monospace;

    --ip-text-xs:   12px;
    --ip-text-sm:   13px;
    --ip-text-base: 15px;
    --ip-text-md:   16px;
    --ip-text-lg:   18px;
    --ip-text-xl:   24px;
    --ip-text-2xl:  32px;
    --ip-text-3xl:  56px;  /* la grande valeur */

    --ip-leading-tight:  1.25;
    --ip-leading-snug:   1.4;
    --ip-leading-normal: 1.6;

    --ip-weight-light:    300;
    --ip-weight-regular:  400;
    --ip-weight-medium:   500;
    --ip-weight-semibold: 600;

    /* — Animation ----------------------------------------------------------- */
    --ip-transition-fast: 100ms ease;
    --ip-transition:      150ms ease;
    --ip-transition-slow: 250ms ease;

    /* — Layout -------------------------------------------------------------- */
    --ip-content-max:  960px;
    --ip-content-pad:  20px;

    /* — Chart.js (utilisés en JS via getComputedStyle) --------------------- */
    --ip-chart-line:        var(--ip-accent);
    --ip-chart-fill:        rgba(79, 70, 229, 0.08);
    --ip-chart-grid:        rgba(0, 0, 0, 0.04);
    --ip-chart-tick:        var(--ip-text-muted);
    --ip-chart-tooltip-bg:  #18181b;
    --ip-chart-tooltip-fg:  #fafafa;
    --ip-chart-point-last:  var(--ip-accent);
    --ip-chart-point-max:   var(--ip-success);
    --ip-chart-point-min:   var(--ip-danger);
}

/* ============================================================================
   2. MODE SOMBRE (auto via prefers-color-scheme + override manuel)
   ============================================================================ */

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        /* Surfaces */
        --ip-bg-primary:    #0a0a0a;
        --ip-bg-secondary:  #18181b;
        --ip-bg-tertiary:   #27272a;
        --ip-bg-code:       #27272a;
        --ip-bg-hover:      #27272a;

        /* Texte */
        --ip-text-primary:    #fafafa;
        --ip-text-secondary:  #d4d4d8;
        --ip-text-muted:      #71717a;

        /* Bordures */
        --ip-border-subtle:   #27272a;
        --ip-border-default:  #3f3f46;
        --ip-border-strong:   #52525b;

        /* — Accent — 🎨 PALETTE MODE SOMBRE (légèrement éclairci pour rester lisible) */
        --ip-accent:          #889fdc;
        --ip-accent-hover:    #afbfe8;
        --ip-accent-active:   #b7c5ea;
        --ip-accent-bg:       rgba(136, 159, 220, 0.10);
        --ip-accent-bg-hover: rgba(136, 159, 220, 0.16);
        --ip-accent-border:   rgba(136, 159, 220, 0.25);
        /* — Fin du bloc PALETTE sombre (auto) — */

        /* Sémantique — éclaircies pour le mode sombre */
        --ip-success:        #4ade80;
        --ip-success-bg:     rgba(74, 222, 128, 0.10);
        --ip-success-border: rgba(74, 222, 128, 0.25);

        --ip-warning:        #facc15;
        --ip-warning-bg:     rgba(250, 204, 21, 0.10);
        --ip-warning-border: rgba(250, 204, 21, 0.25);

        --ip-danger:         #f87171;
        --ip-danger-bg:      rgba(248, 113, 113, 0.10);
        --ip-danger-border:  rgba(248, 113, 113, 0.25);

        --ip-info:           #38bdf8;
        --ip-info-bg:        rgba(56, 189, 248, 0.10);
        --ip-info-border:    rgba(56, 189, 248, 0.25);

        /* Ombres invisibles en sombre (on s'appuie sur les bordures) */
        --ip-shadow-sm: none;
        --ip-shadow-md: 0 2px 6px rgba(0, 0, 0, 0.4);
        --ip-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.5);

        /* Chart */
        --ip-chart-line:        var(--ip-accent);
        --ip-chart-fill:        rgba(136, 159, 220, 0.12);
        --ip-chart-grid:        rgba(255, 255, 255, 0.05);
        --ip-chart-tooltip-bg:  #fafafa;
        --ip-chart-tooltip-fg:  #18181b;
    }
}

/* Override manuel du thème (force light/dark via [data-theme]) */
:root[data-theme="dark"] {
    --ip-bg-primary:    #0a0a0a;
    --ip-bg-secondary:  #18181b;
    --ip-bg-tertiary:   #27272a;
    --ip-bg-code:       #27272a;
    --ip-bg-hover:      #27272a;
    --ip-text-primary:    #fafafa;
    --ip-text-secondary:  #d4d4d8;
    --ip-text-muted:      #71717a;
    --ip-border-subtle:   #27272a;
    --ip-border-default:  #3f3f46;
    --ip-border-strong:   #52525b;
    --ip-accent:          #889fdc;
    --ip-accent-hover:    #afbfe8;
    --ip-accent-active:   #b7c5ea;
    --ip-accent-bg:       rgba(136, 159, 220, 0.10);
    --ip-accent-bg-hover: rgba(136, 159, 220, 0.16);
    --ip-accent-border:   rgba(136, 159, 220, 0.25);
    --ip-success:        #4ade80;
    --ip-success-bg:     rgba(74, 222, 128, 0.10);
    --ip-success-border: rgba(74, 222, 128, 0.25);
    --ip-warning:        #facc15;
    --ip-warning-bg:     rgba(250, 204, 21, 0.10);
    --ip-warning-border: rgba(250, 204, 21, 0.25);
    --ip-danger:         #f87171;
    --ip-danger-bg:      rgba(248, 113, 113, 0.10);
    --ip-danger-border:  rgba(248, 113, 113, 0.25);
    --ip-info:           #38bdf8;
    --ip-info-bg:        rgba(56, 189, 248, 0.10);
    --ip-info-border:    rgba(56, 189, 248, 0.25);
    --ip-shadow-sm: none;
    --ip-shadow-md: 0 2px 6px rgba(0, 0, 0, 0.4);
    --ip-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.5);
    --ip-chart-fill:       rgba(136, 159, 220, 0.12);
    --ip-chart-grid:       rgba(255, 255, 255, 0.05);
    --ip-chart-tooltip-bg: #fafafa;
    --ip-chart-tooltip-fg: #18181b;
}

/* ============================================================================
   3. LAYOUT & TYPO
   ============================================================================ */

.ip-main {
    max-width: var(--ip-content-max);
    margin: var(--ip-space-12) auto var(--ip-space-16);
    padding: 0 var(--ip-content-pad);
    font-family: var(--ip-font-sans);
    font-size: var(--ip-text-base);
    line-height: var(--ip-leading-normal);
    color: var(--ip-text-primary);
    background: var(--ip-bg-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "ss01", "cv01";  /* glyphes alternatifs propres si la fonte les supporte */
}

.ip-indice {
    background: transparent;
}

/* Forcer les chiffres tabulaires partout où ça compte (tables, valeurs) */
.ip-num,
.ip-value-big,
.ip-var-value,
.ip-obs-table td,
.ip-meta-list dd,
.ip-related-value {
    font-feature-settings: "tnum", "lnum";
    font-variant-numeric: tabular-nums lining-nums;
}

/* Sélection de texte */
.ip-main ::selection {
    background: var(--ip-accent-bg);
    color: var(--ip-text-primary);
}

/* ============================================================================
   4. COMPOSANTS V0.6 — Heading / Text / HTML / Ad
   ============================================================================ */

/* — Headings ---------------------------------------------------------------- */
.ip-heading {
    color: var(--ip-text-primary);
    line-height: var(--ip-leading-tight);
    letter-spacing: -0.01em;
}

.ip-heading-h1 {
    font-size: var(--ip-text-2xl);
    font-weight: var(--ip-weight-semibold);
    margin: 0 0 var(--ip-space-2);
    letter-spacing: -0.02em;
}

.ip-heading-h2 {
    font-size: var(--ip-text-lg);
    font-weight: var(--ip-weight-semibold);
    margin: var(--ip-space-12) 0 var(--ip-space-4);
}

.ip-heading-h3 {
    font-size: var(--ip-text-md);
    font-weight: var(--ip-weight-semibold);
    margin: var(--ip-space-8) 0 var(--ip-space-3);
}

.ip-heading-h4 {
    font-size: var(--ip-text-sm);
    font-weight: var(--ip-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ip-text-secondary);
    margin: var(--ip-space-6) 0 var(--ip-space-2);
}

/* Premier H2 d'une page : pas de gros margin top */
.ip-indice > .ip-heading-h2:first-child,
.ip-indice > .ip-heading-h1 + .ip-heading-h2 {
    margin-top: var(--ip-space-8);
}

/* — Text block (intro IA, paragraphes éditoriaux) -------------------------- */
.ip-text-block {
    margin: var(--ip-space-4) 0;
    color: var(--ip-text-primary);
    line-height: var(--ip-leading-normal);
    font-size: var(--ip-text-base);
}
.ip-text-block p {
    margin: 0 0 var(--ip-space-3);
}
.ip-text-block p:last-child { margin-bottom: 0; }
.ip-text-block a {
    color: var(--ip-accent);
    text-decoration: none;
    border-bottom: 1px solid var(--ip-accent-border);
    transition: border-color var(--ip-transition);
}
.ip-text-block a:hover {
    border-bottom-color: var(--ip-accent);
}
.ip-text-block strong { font-weight: var(--ip-weight-semibold); }

/* — HTML libre -------------------------------------------------------------- */
.ip-html-block {
    margin: var(--ip-space-4) 0;
}

/* — Ad placeholder (seulement visible aux admins quand non configuré) ----- */
.ip-ad-placeholder {
    margin: var(--ip-space-6) 0;
    padding: var(--ip-space-4);
    background: var(--ip-warning-bg);
    border: 1px dashed var(--ip-warning-border);
    border-radius: var(--ip-radius-md);
    text-align: center;
    color: var(--ip-warning);
    font-size: var(--ip-text-sm);
}
.ip-ad-placeholder code {
    background: transparent;
    padding: 0;
    color: inherit;
}

/* ============================================================================
   5. COMPOSANTS DATA
   ============================================================================ */

/* — Code inline (idbank, codes CPF/COICOP, etc) --------------------------- */
.ip-indice code {
    font-family: var(--ip-font-mono);
    font-size: 0.875em;
    background: var(--ip-bg-code);
    color: var(--ip-text-primary);
    padding: 2px 6px;
    border-radius: var(--ip-radius-sm);
    font-weight: var(--ip-weight-medium);
}

/* — Subtitle (ligne sous le H1 avec idbank, famille, fréquence) ----------- */
.ip-subtitle {
    margin: 0 0 var(--ip-space-6);
    color: var(--ip-text-secondary);
    font-size: var(--ip-text-sm);
    line-height: var(--ip-leading-snug);
    display: flex;
    flex-wrap: wrap;
    gap: var(--ip-space-2) var(--ip-space-4);
}
.ip-subtitle > span,
.ip-subtitle > strong {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ip-subtitle code {
    font-size: var(--ip-text-xs);
}
.ip-subtitle strong {
    color: var(--ip-text-primary);
    font-weight: var(--ip-weight-medium);
}

/* — Status banner (série active / arrêtée / remplacée) -------------------- */
.ip-status-banner {
    margin: var(--ip-space-4) 0 var(--ip-space-8);
    padding: var(--ip-space-4) var(--ip-space-5);
    border-radius: var(--ip-radius-md);
    border: 1px solid;
    font-size: var(--ip-text-sm);
    line-height: var(--ip-leading-snug);
    display: flex;
    align-items: flex-start;
    gap: var(--ip-space-3);
}
.ip-status-banner-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}
.ip-status-banner-body { flex: 1; min-width: 0; }
.ip-status-banner-body strong { font-weight: var(--ip-weight-semibold); }
.ip-status-banner-body p {
    margin: var(--ip-space-2) 0 0;
}
.ip-status-banner-body a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.ip-status-banner-help {
    color: var(--ip-text-muted);
    font-size: var(--ip-text-xs);
    margin-top: var(--ip-space-1);
}

/* Variante "active" : encart informatif, fond clair, accent neutre */
.ip-status-banner--active {
    background: var(--ip-bg-tertiary);
    border-color: var(--ip-border-subtle);
    color: var(--ip-text-primary);
}
.ip-status-banner--active .ip-status-banner-icon {
    background: var(--ip-accent);
    color: var(--ip-text-on-accent);
}

/* Variantes "inactive" : encart d'alerte */
.ip-status-banner--stopped,
.ip-status-banner--superseded {
    background: var(--ip-warning-bg);
    border-color: var(--ip-warning-border);
    color: var(--ip-text-primary);
}
.ip-status-banner--stopped .ip-status-banner-icon,
.ip-status-banner--superseded .ip-status-banner-icon {
    background: var(--ip-warning);
    color: var(--ip-text-on-accent);
}

.ip-status-banner--suspended {
    background: var(--ip-info-bg);
    border-color: var(--ip-info-border);
    color: var(--ip-text-primary);
}
.ip-status-banner--suspended .ip-status-banner-icon {
    background: var(--ip-info);
    color: var(--ip-text-on-accent);
}

/* Compatibilité ascendante (anciennes classes .ip-status-stopped sur le banner) */
.ip-status-banner.ip-status-stopped,
.ip-status-banner.ip-status-superseded {
    background: var(--ip-warning-bg);
    border-color: var(--ip-warning-border);
    color: var(--ip-text-primary);
}
.ip-status-banner.ip-status-suspended {
    background: var(--ip-info-bg);
    border-color: var(--ip-info-border);
    color: var(--ip-text-primary);
}

/* — Value block — règles partagées (le wrapper + le block sont redéfinis
 *    en mode "premium" plus bas, lignes 1435+, pour le layout hero + spark) */
.ip-value-label {
    font-size: var(--ip-text-xs);
    font-weight: var(--ip-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ip-text-muted);
    margin-bottom: var(--ip-space-2);
}
.ip-value-big {
    font-size: var(--ip-text-3xl);
    font-weight: var(--ip-weight-light);
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--ip-text-primary);
    margin: var(--ip-space-1) 0;
}
.ip-value-period {
    font-size: var(--ip-text-sm);
    color: var(--ip-text-secondary);
    margin-top: var(--ip-space-2);
}

/* — Variations (1m / 1y) -------------------------------------------------- */
.ip-variations {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--ip-space-3);
    margin: var(--ip-space-4) 0 var(--ip-space-8);
}
.ip-var {
    padding: var(--ip-space-4);
    background: var(--ip-bg-secondary);
    border-radius: var(--ip-radius-md);
}
.ip-var-label {
    font-size: var(--ip-text-xs);
    font-weight: var(--ip-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ip-text-muted);
    margin-bottom: var(--ip-space-2);
}
.ip-var-value {
    font-size: var(--ip-text-lg);
    font-weight: var(--ip-weight-medium);
    line-height: 1.2;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}
.ip-var-up   { color: var(--ip-var-up); }
.ip-var-down { color: var(--ip-var-down); }
.ip-var-flat { color: var(--ip-var-flat); }
.ip-var-neutral { color: var(--ip-text-muted); }

/* — Chart (graphique Chart.js) ------------------------------------------- */
/* ============================================================================
 * Composant: chart — refonte v1.4.6 (header + segmented + toggle + footer)
 *
 * Structure HTML générée par PHP :
 *   .ip-chart-section
 *   ├── .ip-chart-header
 *   │   ├── .ip-chart-title-wrap (titre + sous-titre)
 *   │   └── .ip-chart-controls
 *   │       ├── .ip-chart-periods-slot (rempli par JS avec .ip-period-toolbar)
 *   │       └── .ip-chart-type-toggle (bar/line)
 *   ├── .ip-chart-wrap > canvas.ip-chart-canvas
 *   └── .ip-chart-footer
 *       ├── .ip-chart-legend (swatches + labels)
 *       └── .ip-chart-source (Source INSEE · base 100…)
 * ============================================================================ */
.ip-chart-section {
    margin: var(--ip-space-6) 0 var(--ip-space-8);
}

/* Header : titre à gauche, contrôles à droite */
.ip-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ip-space-4);
    flex-wrap: wrap;
    margin-bottom: var(--ip-space-3);
}
.ip-chart-title-wrap {
    display: flex;
    align-items: baseline;
    gap: var(--ip-space-2);
    flex-wrap: wrap;
}
.ip-chart-title {
    font-size: var(--ip-text-md);
    font-weight: var(--ip-weight-semibold);
    color: var(--ip-text-primary);
}
.ip-chart-subtitle {
    font-size: var(--ip-text-sm);
    color: var(--ip-text-muted);
}

.ip-chart-controls {
    display: flex;
    align-items: center;
    gap: var(--ip-space-2);
    flex-wrap: wrap;
}

/* Wrap canvas */
.ip-chart-wrap {
    position: relative;
    height: 360px;
    padding: var(--ip-space-4);
    background: var(--ip-bg-secondary);
    border: 1px solid var(--ip-border-subtle);
    border-radius: var(--ip-radius-lg);
}
.ip-chart-canvas {
    width: 100% !important;
    height: 100% !important;
}

/* Footer : légende à gauche, source à droite */
.ip-chart-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ip-space-4);
    flex-wrap: wrap;
    margin-top: var(--ip-space-3);
    font-size: var(--ip-text-xs);
    color: var(--ip-text-muted);
}
.ip-chart-legend {
    display: flex;
    align-items: center;
    gap: var(--ip-space-4);
    flex-wrap: wrap;
}
.ip-chart-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ip-legend-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
}
.ip-chart-source {
    text-align: right;
}
.ip-chart-source strong {
    color: var(--ip-text-secondary);
    font-weight: var(--ip-weight-semibold);
}

/* Legacy : conserve .ip-legend-dot pour compat éventuelle */
.ip-legend-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

/* — History table -------------------------------------------------------- */
.ip-history {
    margin: var(--ip-space-4) 0 var(--ip-space-8);
}
.ip-obs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ip-text-sm);
}
.ip-obs-table thead th {
    text-align: left;
    padding: var(--ip-space-3) var(--ip-space-3);
    font-size: var(--ip-text-xs);
    font-weight: var(--ip-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ip-text-muted);
    border-bottom: 1px solid var(--ip-border-subtle);
    white-space: nowrap;
}
.ip-obs-table tbody td {
    padding: var(--ip-space-3);
    border-bottom: 1px solid var(--ip-border-subtle);
    color: var(--ip-text-primary);
}
/* Zebra strip très douce (1 ligne sur 2) */
.ip-obs-table tbody tr:nth-child(even) td {
    background: var(--ip-bg-secondary);
}
.ip-obs-table tbody tr:last-child td {
    border-bottom: none;
}
.ip-obs-table .ip-num {
    text-align: right;
    white-space: nowrap;
}
.ip-obs-table tbody tr:first-child td {
    color: var(--ip-text-primary);
    font-weight: var(--ip-weight-medium);
}
.ip-obs-meta {
    margin: var(--ip-space-3) 0 0;
    color: var(--ip-text-muted);
    font-size: var(--ip-text-xs);
}

/* — Meta list ------------------------------------------------------------ */
.ip-meta-list {
    margin: var(--ip-space-4) 0 var(--ip-space-6);
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 2fr;
    gap: var(--ip-space-3) var(--ip-space-6);
    font-size: var(--ip-text-sm);
}
.ip-meta-list dt {
    color: var(--ip-text-muted);
    font-weight: var(--ip-weight-regular);
}
.ip-meta-list dd {
    margin: 0;
    color: var(--ip-text-primary);
}

/* — Predecessors (séries précédentes) + Successors (séries qui remplacent) — */
/* v1.4.74 : sélecteurs groupés pour que `.ip-successors` partage exactement
   la même mise en forme que `.ip-predecessors`. Composants jumeaux : l'un
   liste les indices qui ont précédé celui-ci, l'autre liste les indices qui
   le remplacent (pour les séries non-actives). Même structure visuelle. */
.ip-predecessors,
.ip-successors {
    margin: var(--ip-space-4) 0 var(--ip-space-8);
}
.ip-section-desc {
    color: var(--ip-text-secondary);
    font-size: var(--ip-text-sm);
    margin: 0 0 var(--ip-space-4);
}
.ip-pred-list,
.ip-succ-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ip-space-2);
}
.ip-pred-item,
.ip-succ-item {
    padding: var(--ip-space-4);
    background: var(--ip-bg-secondary);
    border-radius: var(--ip-radius-md);
    transition: background var(--ip-transition);
}
.ip-pred-item:hover,
.ip-succ-item:hover {
    background: var(--ip-bg-hover);
}
.ip-pred-main,
.ip-succ-main {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--ip-space-2) var(--ip-space-3);
    margin-bottom: var(--ip-space-2);
}
.ip-pred-main a,
.ip-succ-main a {
    color: var(--ip-accent);
    text-decoration: none;
    font-weight: var(--ip-weight-medium);
    transition: color var(--ip-transition);
}
.ip-pred-main a:hover,
.ip-succ-main a:hover { color: var(--ip-accent-hover); }
.ip-pred-meta,
.ip-succ-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ip-space-2);
}
.ip-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: var(--ip-bg-tertiary);
    border-radius: var(--ip-radius-pill);
    font-size: var(--ip-text-xs);
    color: var(--ip-text-secondary);
    font-weight: var(--ip-weight-medium);
    white-space: nowrap;
}

.ip-no-link {
    color: var(--ip-text-secondary);
}

/* v1.4.75 — Liens vers d'autres indices avec gestion des états
 * (publié / brouillon / corbeille / manquant). Le helper PHP
 * IP_Successors::render_indice_link_html produit ces classes. */
.ip-indice-link {
    color: var(--ip-accent);
    text-decoration: none;
    font-weight: var(--ip-weight-medium);
}
.ip-indice-link--published {
    transition: color var(--ip-transition);
}
.ip-indice-link--published:hover {
    color: var(--ip-accent-hover);
    text-decoration: underline;
}
.ip-indice-link--draft,
.ip-indice-link--trash,
.ip-indice-link--missing {
    color: var(--ip-text-secondary);
    font-style: italic;
}

/* Badge admin (visible uniquement par les utilisateurs avec edit_posts).
 * Couleurs hardcodées dans le helper PHP pour cohérence WP-admin. */
.ip-admin-only {
    /* Marqueur sémantique : ces éléments ne sont rendus que pour l'admin.
     * Pas de style propre (le helper PHP injecte le style inline). */
}

/* Variantes d'état pour les cartes related_indices (v1.4.75) */
.ip-related-card--draft,
.ip-related-card--trash,
.ip-related-card--missing {
    opacity: 0.7;
    border-style: dashed;
}
.ip-related-nodispo--draft   { background: #fff3cd; color: #856404; }
.ip-related-nodispo--trash   { background: #f8d7da; color: #721c24; }
.ip-related-nodispo--missing { background: #e2e8f0; color: #1f2328; }
.ip-related-edit-link {
    display: inline-block;
    margin-top: 4px;
    font-size: 11px;
    color: var(--ip-accent);
    text-decoration: none;
}
.ip-related-edit-link:hover {
    text-decoration: underline;
}

/* v1.4.76 — Bouton "➕ Créer" pour les related_indices manquants */
.ip-related-create-btn {
    display: inline-block;
    margin-top: 4px;
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 11px;
    background: #2271b1;
    color: #fff;
    border: 1px solid #135e96;
    border-radius: 3px;
    cursor: pointer;
    line-height: 1.4;
}
.ip-related-create-btn:hover {
    background: #135e96;
}
.ip-related-create-btn:disabled,
.ip-related-create-btn.is-loading {
    background: #c3c4c7;
    border-color: #c3c4c7;
    cursor: wait;
}
.ip-create-missing-done {
    /* Badge "✓ Créé" inline-style depuis le JS, classe utilitaire au cas où */
}
.ip-no-link em {
    color: var(--ip-text-muted);
    font-style: normal;
    font-size: var(--ip-text-xs);
    margin-left: var(--ip-space-2);
}

/* — Successors (composant standalone, hors status_banner) --------------- */
.ip-successors {
    margin: var(--ip-space-6) 0;
    padding: var(--ip-space-5) var(--ip-space-5);
    background: var(--ip-info-bg);
    border-radius: var(--ip-radius-md);
}
.ip-successors h3 {
    margin: 0 0 var(--ip-space-2);
    font-size: var(--ip-text-md);
    font-weight: var(--ip-weight-semibold);
    color: var(--ip-text-primary);
}
.ip-successors ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ip-successors li {
    padding: var(--ip-space-1) 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--ip-space-2);
    align-items: center;
}
.ip-successors a {
    color: var(--ip-accent);
    text-decoration: none;
}
.ip-successors a:hover { text-decoration: underline; }

/* — Related indices ----------------------------------------------------- */
.ip-related-list {
    list-style: none;
    margin: var(--ip-space-4) 0 var(--ip-space-8);
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--ip-space-2);
}
.ip-related-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ip-space-3);
    padding: var(--ip-space-3) var(--ip-space-4);
    background: var(--ip-bg-secondary);
    border-radius: var(--ip-radius-md);
    transition: background var(--ip-transition);
}
.ip-related-list li:hover {
    background: var(--ip-bg-hover);
}
.ip-related-list a {
    color: var(--ip-accent);
    text-decoration: none;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: var(--ip-space-2);
    font-weight: var(--ip-weight-medium);
}
.ip-related-list a:hover { color: var(--ip-accent-hover); }
.ip-related-list code {
    font-size: var(--ip-text-xs);
}
.ip-related-list .ip-no-link {
    flex: 1;
    min-width: 0;
}
.ip-related-value {
    text-align: right;
    color: var(--ip-text-primary);
    font-weight: var(--ip-weight-medium);
    font-size: var(--ip-text-sm);
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
}
.ip-related-value small {
    color: var(--ip-text-muted);
    font-size: var(--ip-text-xs);
    font-weight: var(--ip-weight-regular);
    margin-top: 2px;
}

/* — Source footer ------------------------------------------------------- */
.ip-source-footer {
    margin: var(--ip-space-12) 0 0;
    padding-top: var(--ip-space-4);
    border-top: 1px solid var(--ip-border-subtle);
    color: var(--ip-text-muted);
    font-size: var(--ip-text-xs);
}
.ip-source-footer a {
    color: var(--ip-accent);
    text-decoration: none;
    transition: color var(--ip-transition);
}
.ip-source-footer a:hover {
    color: var(--ip-accent-hover);
}

/* — Source globale (du modèle global) ----------------------------------- */
.ip-source-global {
    margin: var(--ip-space-6) 0 0;
    color: var(--ip-text-muted);
    font-size: var(--ip-text-xs);
}

/* — Source liée à meta_list (ancien comportement compat) --------------- */
.ip-source {
    margin: var(--ip-space-3) 0 0;
    color: var(--ip-text-muted);
    font-size: var(--ip-text-xs);
}
.ip-source a {
    color: var(--ip-accent);
    text-decoration: none;
}
.ip-source a:hover { text-decoration: underline; }

/* — Legacy content (contenu hérité des pages migrées) ------------------- */
.ip-legacy-content {
    margin: var(--ip-space-6) 0;
    padding: var(--ip-space-5) var(--ip-space-6);
    background: var(--ip-bg-secondary);
    border-radius: var(--ip-radius-md);
    color: var(--ip-text-secondary);
    font-size: var(--ip-text-sm);
    line-height: var(--ip-leading-normal);
}
.ip-legacy-content > *:first-child { margin-top: 0; }
.ip-legacy-content > *:last-child  { margin-bottom: 0; }
.ip-legacy-content a {
    color: var(--ip-accent);
}

/* ============================================================================
   6. ÉTATS — Erreur, focus, hover, archive
   ============================================================================ */

.ip-error {
    padding: var(--ip-space-8) var(--ip-space-6);
    background: var(--ip-bg-secondary);
    border-radius: var(--ip-radius-lg);
    margin: var(--ip-space-8) 0;
    text-align: center;
}
.ip-error h1 {
    margin: 0 0 var(--ip-space-3);
    color: var(--ip-text-primary);
    font-size: var(--ip-text-xl);
    font-weight: var(--ip-weight-semibold);
}
.ip-error p {
    margin: 0;
    color: var(--ip-text-secondary);
    font-size: var(--ip-text-base);
}
.ip-error a {
    color: var(--ip-accent);
    text-decoration: none;
}
.ip-error a:hover {
    color: var(--ip-accent-hover);
    text-decoration: underline;
}
.ip-error code {
    background: var(--ip-bg-tertiary);
}

/* Focus accessible sur tous les éléments interactifs */
.ip-main a:focus-visible,
.ip-main button:focus-visible,
.ip-main input:focus-visible,
.ip-main select:focus-visible {
    outline: 2px solid var(--ip-accent);
    outline-offset: 2px;
    border-radius: var(--ip-radius-sm);
}

/* ============================================================================
   7. PAGE ARCHIVE (liste des indices)
   ============================================================================ */

.ip-archive {
    max-width: var(--ip-content-max);
    margin: var(--ip-space-12) auto var(--ip-space-16);
    padding: 0 var(--ip-content-pad);
    font-family: var(--ip-font-sans);
    color: var(--ip-text-primary);
}
.ip-archive-title {
    font-size: var(--ip-text-2xl);
    font-weight: var(--ip-weight-semibold);
    margin: 0 0 var(--ip-space-2);
    letter-spacing: -0.02em;
}
.ip-archive-desc {
    color: var(--ip-text-secondary);
    font-size: var(--ip-text-base);
    margin: 0 0 var(--ip-space-8);
}
.ip-archive-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ip-space-3);
    margin-bottom: var(--ip-space-6);
    padding: var(--ip-space-4);
    background: var(--ip-bg-secondary);
    border-radius: var(--ip-radius-md);
    align-items: center;
}
.ip-archive-filters label {
    font-size: var(--ip-text-sm);
    color: var(--ip-text-secondary);
    font-weight: var(--ip-weight-medium);
    margin-right: var(--ip-space-2);
}
.ip-archive-filters select,
.ip-archive-filters input[type="text"] {
    padding: 6px 10px;
    border: 1px solid var(--ip-border-default);
    border-radius: var(--ip-radius-sm);
    background: var(--ip-bg-primary);
    color: var(--ip-text-primary);
    font-family: inherit;
    font-size: var(--ip-text-sm);
    transition: border-color var(--ip-transition);
}
.ip-archive-filters select:focus,
.ip-archive-filters input[type="text"]:focus {
    border-color: var(--ip-accent);
    outline: none;
}
.ip-archive-filters button {
    padding: 6px 14px;
    background: var(--ip-accent);
    color: var(--ip-text-on-accent);
    border: none;
    border-radius: var(--ip-radius-sm);
    font-family: inherit;
    font-size: var(--ip-text-sm);
    font-weight: var(--ip-weight-medium);
    cursor: pointer;
    transition: background var(--ip-transition);
}
.ip-archive-filters button:hover { background: var(--ip-accent-hover); }

.ip-archive-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ip-space-1);
}
.ip-archive-list li {
    padding: var(--ip-space-4);
    background: var(--ip-bg-secondary);
    border-radius: var(--ip-radius-md);
    transition: background var(--ip-transition);
}
.ip-archive-list li:hover {
    background: var(--ip-bg-hover);
}
.ip-archive-list a {
    color: var(--ip-text-primary);
    text-decoration: none;
    display: block;
}
.ip-archive-list .ip-archive-title-line {
    font-weight: var(--ip-weight-medium);
    color: var(--ip-accent);
    margin-bottom: var(--ip-space-1);
}
.ip-archive-list .ip-archive-meta {
    font-size: var(--ip-text-xs);
    color: var(--ip-text-muted);
    display: flex;
    flex-wrap: wrap;
    gap: var(--ip-space-3);
}

.ip-pagination {
    margin-top: var(--ip-space-8);
    display: flex;
    justify-content: center;
    gap: var(--ip-space-1);
}
.ip-pagination a,
.ip-pagination .current {
    padding: var(--ip-space-2) var(--ip-space-3);
    border-radius: var(--ip-radius-sm);
    color: var(--ip-text-secondary);
    text-decoration: none;
    font-size: var(--ip-text-sm);
    font-weight: var(--ip-weight-medium);
    transition: background var(--ip-transition);
}
.ip-pagination a:hover { background: var(--ip-bg-hover); }
.ip-pagination .current {
    background: var(--ip-accent);
    color: var(--ip-text-on-accent);
}

/* ============================================================================
   8. RESPONSIVE
   ============================================================================ */

@media (max-width: 640px) {
    .ip-main {
        margin: var(--ip-space-6) auto var(--ip-space-12);
        padding: 0 var(--ip-space-4);
    }
    .ip-heading-h1 { font-size: var(--ip-text-xl); }
    .ip-heading-h2 { font-size: var(--ip-text-md); margin: var(--ip-space-8) 0 var(--ip-space-3); }
    .ip-value-big   { font-size: 44px; }
    .ip-variations  { grid-template-columns: 1fr 1fr; }
    .ip-meta-list   {
        grid-template-columns: 1fr;
        gap: var(--ip-space-1) 0;
    }
    .ip-meta-list dt {
        margin-top: var(--ip-space-2);
        font-size: var(--ip-text-xs);
    }
    .ip-meta-list dd { margin-bottom: var(--ip-space-2); }
    .ip-related-list { grid-template-columns: 1fr; }
    .ip-chart-wrap   { height: 240px; padding: var(--ip-space-3); }
    .ip-chart-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .ip-chart-controls {
        width: 100%;
        justify-content: space-between;
    }
    .ip-chart-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--ip-space-2);
    }
    .ip-chart-source { text-align: left; }
    .ip-obs-table {
        font-size: var(--ip-text-xs);
    }
    .ip-obs-table th,
    .ip-obs-table td {
        padding: var(--ip-space-2);
    }
}

/* ============================================================================
   9. PRINT (impression propre — bonus, peu de coût)
   ============================================================================ */

@media print {
    .ip-main {
        max-width: 100%;
        margin: 0;
        padding: 0;
        font-size: 11pt;
    }
    .ip-value-big { font-size: 36pt; }
    .ip-chart-section,
    .ip-ad-placeholder { display: none; }
    a { color: inherit; text-decoration: none; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #666; }
}

/* ============================================================================
   10. PAGE ARCHIVE — Styles spécifiques (cartes, filtres)
   ============================================================================ */

.ip-archive-header {
    margin-bottom: var(--ip-space-6);
}
.ip-archive-header h1 {
    font-size: var(--ip-text-2xl);
    font-weight: var(--ip-weight-semibold);
    margin: 0 0 var(--ip-space-2);
    letter-spacing: -0.02em;
    color: var(--ip-text-primary);
}
.ip-archive-meta {
    color: var(--ip-text-secondary);
    font-size: var(--ip-text-sm);
    margin: 0;
}
.ip-archive-meta strong {
    color: var(--ip-text-primary);
    font-weight: var(--ip-weight-semibold);
}

/* Filtres — barre horizontale moderne */
.ip-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ip-space-2);
    align-items: center;
}

.ip-filter-search,
.ip-filter-select {
    padding: 8px 12px;
    border: 1px solid var(--ip-border-default);
    border-radius: var(--ip-radius-md);
    background: var(--ip-bg-primary);
    color: var(--ip-text-primary);
    font-family: inherit;
    font-size: var(--ip-text-sm);
    transition: border-color var(--ip-transition), box-shadow var(--ip-transition);
}
.ip-filter-search { flex: 1 1 240px; min-width: 160px; }

.ip-filter-search:focus,
.ip-filter-select:focus {
    border-color: var(--ip-accent);
    outline: none;
    box-shadow: 0 0 0 3px var(--ip-accent-bg);
}
.ip-filter-search::placeholder {
    color: var(--ip-text-muted);
}

.ip-filter-btn {
    padding: 8px 16px;
    background: var(--ip-accent);
    color: var(--ip-text-on-accent);
    border: 1px solid var(--ip-accent);
    border-radius: var(--ip-radius-md);
    font-family: inherit;
    font-size: var(--ip-text-sm);
    font-weight: var(--ip-weight-medium);
    cursor: pointer;
    transition: background var(--ip-transition), border-color var(--ip-transition);
}
.ip-filter-btn:hover {
    background: var(--ip-accent-hover);
    border-color: var(--ip-accent-hover);
}

.ip-filter-reset {
    padding: 8px 12px;
    color: var(--ip-text-muted);
    text-decoration: none;
    font-size: var(--ip-text-sm);
    transition: color var(--ip-transition);
}
.ip-filter-reset:hover {
    color: var(--ip-text-primary);
}

/* Empty state */
.ip-empty {
    padding: var(--ip-space-12) var(--ip-space-6);
    text-align: center;
    background: var(--ip-bg-secondary);
    border-radius: var(--ip-radius-lg);
    margin: var(--ip-space-8) 0;
}
.ip-empty p {
    color: var(--ip-text-muted);
    margin: 0;
    font-size: var(--ip-text-base);
}

/* Cartes — liste des indices */
.ip-cards {
    list-style: none;
    margin: var(--ip-space-6) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ip-space-2);
}

.ip-card {
    padding: var(--ip-space-5);
    background: var(--ip-bg-secondary);
    border-radius: var(--ip-radius-md);
    transition: background var(--ip-transition);
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: var(--ip-space-1) var(--ip-space-6);
    align-items: start;
}
.ip-card:hover {
    background: var(--ip-bg-hover);
}

.ip-card-meta {
    grid-column: 1 / 2;
    grid-row: 1;
    display: flex;
    flex-wrap: wrap;
    gap: var(--ip-space-2);
    align-items: center;
    font-size: var(--ip-text-xs);
    color: var(--ip-text-muted);
    margin-bottom: var(--ip-space-1);
}
.ip-card-meta code {
    font-size: var(--ip-text-xs);
    padding: 2px 6px;
}
.ip-card-family,
.ip-card-subcode {
    font-weight: var(--ip-weight-medium);
    color: var(--ip-text-secondary);
}
.ip-card-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: var(--ip-bg-tertiary);
    border-radius: var(--ip-radius-pill);
    font-size: 11px;
    color: var(--ip-text-secondary);
    font-weight: var(--ip-weight-medium);
}
.ip-card-status {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--ip-radius-pill);
    font-size: 11px;
    font-weight: var(--ip-weight-medium);
    text-transform: capitalize;
}
.ip-card-status.ip-status-active {
    background: var(--ip-success-bg);
    color: var(--ip-success);
}
.ip-card-status.ip-status-stopped,
.ip-card-status.ip-status-superseded {
    background: var(--ip-warning-bg);
    color: var(--ip-warning);
}
.ip-card-status.ip-status-suspended {
    background: var(--ip-info-bg);
    color: var(--ip-info);
}

.ip-card-title {
    grid-column: 1 / 2;
    grid-row: 2;
    font-size: var(--ip-text-base);
    font-weight: var(--ip-weight-medium);
    line-height: var(--ip-leading-snug);
    margin: 0;
}
.ip-card-title a {
    color: var(--ip-text-primary);
    text-decoration: none;
    transition: color var(--ip-transition);
}
.ip-card:hover .ip-card-title a {
    color: var(--ip-accent);
}
.ip-no-page {
    color: var(--ip-text-muted);
    font-style: normal;
    font-size: var(--ip-text-xs);
    font-weight: var(--ip-weight-regular);
    margin-left: var(--ip-space-2);
}

.ip-card-value {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
    text-align: right;
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    white-space: nowrap;
}
.ip-card-num {
    font-size: var(--ip-text-xl);
    font-weight: var(--ip-weight-light);
    color: var(--ip-text-primary);
    line-height: 1;
    letter-spacing: -0.02em;
    font-feature-settings: "tnum", "lnum";
    font-variant-numeric: tabular-nums lining-nums;
}
.ip-card-period {
    font-size: var(--ip-text-xs);
    color: var(--ip-text-muted);
}

/* Pagination archive */
.ip-pagination {
    margin-top: var(--ip-space-8);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--ip-space-3);
}
.ip-pagination .ip-page-prev,
.ip-pagination .ip-page-next {
    padding: var(--ip-space-2) var(--ip-space-4);
    border-radius: var(--ip-radius-md);
    color: var(--ip-text-secondary);
    text-decoration: none;
    font-size: var(--ip-text-sm);
    font-weight: var(--ip-weight-medium);
    background: var(--ip-bg-secondary);
    transition: background var(--ip-transition), color var(--ip-transition);
}
.ip-pagination .ip-page-prev:hover,
.ip-pagination .ip-page-next:hover {
    background: var(--ip-bg-hover);
    color: var(--ip-text-primary);
}
.ip-pagination .ip-page-info {
    color: var(--ip-text-muted);
    font-size: var(--ip-text-sm);
    font-weight: var(--ip-weight-medium);
}

@media (max-width: 640px) {
    .ip-card {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }
    .ip-card-value {
        grid-column: 1 / 2;
        grid-row: 3;
        text-align: left;
        flex-direction: row;
        align-items: baseline;
        gap: var(--ip-space-2);
    }
    .ip-card-num {
        font-size: var(--ip-text-lg);
    }
}

/* ============================================================================
 * Composant indice_list (data_source: list)
 * ============================================================================ */
.ip-indice-list {
    margin-top: 12px;
}
.ip-indice-list-card {
    background: var(--ip-surface);
    border: 1px solid var(--ip-border);
    border-radius: var(--ip-radius-md);
    padding: 14px 16px;
    display: flex; flex-direction: column; gap: 6px;
    transition: border-color 0.15s, box-shadow 0.15s;
    text-decoration: none; color: inherit;
}
.ip-indice-list-card--linked:hover {
    border-color: var(--ip-accent);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.ip-ilc-code {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.ip-ilc-code code {
    font-family: var(--ip-font-mono, monospace);
    font-size: 10px;
    color: var(--ip-text-muted);
    background: var(--ip-bg-subtle);
    padding: 1px 5px; border-radius: 3px;
}
.ip-ilc-code strong { font-size: 13px; font-weight: 600; }
.ip-ilc-title       { font-size: 12px; color: var(--ip-text-muted); line-height: 1.4; }
.ip-ilc-value       { font-size: 20px; font-weight: 700; letter-spacing: -0.02em;
                      display: flex; align-items: baseline; gap: 6px; }
.ip-ilc-period      { font-size: 12px; font-weight: 400; color: var(--ip-text-muted); }
@media (max-width: 640px) { .ip-indice-list { grid-template-columns: repeat(2,1fr) !important; } }
@media (max-width: 420px)  { .ip-indice-list { grid-template-columns: 1fr !important; } }

/* ============================================================================
 * Chart — barre de périodes
 * ============================================================================ */
/* ============================================================================
 * Segmented period selector (24 mois / 5 ans / 10 ans / Max)
 *
 * Style: pilule arrondie avec boutons collés à l'intérieur, l'actif a un fond
 * blanc et une ombre subtile pour ressortir du conteneur.
 * ============================================================================ */
.ip-period-toolbar {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    background: var(--ip-bg-secondary);
    border: 1px solid var(--ip-border-subtle);
    border-radius: var(--ip-radius-md);
}
.ip-period-btn {
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--ip-text-secondary);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--ip-text-xs);
    font-weight: var(--ip-weight-medium);
    padding: 4px 10px;
    line-height: 1.4;
    transition: background 0.12s ease, color 0.12s ease;
    white-space: nowrap;
}
.ip-period-btn:hover {
    color: var(--ip-text-primary);
    background: var(--ip-bg-hover);
}
.ip-period-btn.is-active {
    background: var(--ip-bg-primary);
    color: var(--ip-text-primary);
    font-weight: var(--ip-weight-semibold);
    box-shadow: var(--ip-shadow-sm);
}

/* ============================================================================
 * Toggle type de graphique (bar / line)
 *
 * Style identique au segmented period (pilule + boutons collés à l'intérieur)
 * mais boutons carrés avec icône SVG.
 * ============================================================================ */
.ip-chart-type-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    background: var(--ip-bg-secondary);
    border: 1px solid var(--ip-border-subtle);
    border-radius: var(--ip-radius-md);
}
.ip-chart-type-btn {
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--ip-text-muted);
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s ease, color 0.12s ease;
}
.ip-chart-type-btn svg {
    width: 14px;
    height: 14px;
    display: block;
}
.ip-chart-type-btn:hover {
    color: var(--ip-text-primary);
    background: var(--ip-bg-hover);
}
.ip-chart-type-btn.is-active {
    background: var(--ip-bg-primary);
    color: var(--ip-text-primary);
    box-shadow: var(--ip-shadow-sm);
}

/* ============================================================================
 * Composant: breadcrumb
 * ============================================================================ */
.ip-breadcrumb {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    font-size: var(--ip-text-sm); color: var(--ip-text-muted);
    margin-bottom: var(--ip-space-4);
}
.ip-breadcrumb a { color: var(--ip-text-muted); text-decoration: none; }
.ip-breadcrumb a:hover { color: var(--ip-accent); }
.ip-breadcrumb-sep { opacity: 0.5; }
.ip-breadcrumb-archive {
    /* Segment "Indices" rendu en non-cliquable tant que l'archive est admin-only.
     * Garde la couleur muted pour rester visuellement intégré au fil. */
    color: var(--ip-text-muted);
    cursor: default;
}

/* ============================================================================
 * Composant: pills
 * ============================================================================ */
.ip-pills {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-bottom: var(--ip-space-4);
}
.ip-pill {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: var(--ip-text-xs); font-weight: 500;
    padding: 3px 10px; border-radius: var(--ip-radius-pill);
    background: var(--ip-bg-tertiary); color: var(--ip-text-secondary);
    border: 1px solid var(--ip-border-subtle);
}
.ip-pill--active {
    background: var(--ip-success-bg); color: var(--ip-success);
    border-color: var(--ip-success-border);
}
.ip-pill code {
    font-family: var(--ip-font-mono); font-size: 11px;
    background: transparent; border: none; padding: 0;
    color: inherit;
}

/* ============================================================================
 * Composant: value_block — hero premium (v1.4.2 — card unique mise en valeur)
 * ============================================================================
 *
 * Structure :
 *   .ip-value-block-wrapper            ← card englobante (bg, border, shadow)
 *   ├── .ip-value-block                ← bloc gauche : valeur + variation + meta + actions
 *   │   ├── .ip-value-label            ← "DERNIÈRE VALEUR PUBLIÉE"
 *   │   ├── .ip-value-row              ← grande valeur + chip variation
 *   │   ├── .ip-value-period           ← "2026-02 · base 100 en 2010"
 *   │   └── .ip-hero-actions           ← favori + copier + partager
 *   └── .ip-hero-spark                 ← bloc droit : "Tendance 12 points" + sparkline
 *
 * Sur >960px : hero à gauche (flex: 0 0 auto, ~340px), spark à droite (flex: 1, max 480px).
 * Sur <=640px : empilé verticalement, spark passe pleine largeur.
 * ============================================================================ */
.ip-value-block-wrapper {
    display: flex;
    align-items: flex-start;
    gap: var(--ip-space-8);
    flex-wrap: wrap;
    background: var(--ip-bg-primary);
    border: 1px solid var(--ip-border-subtle);
    border-radius: var(--ip-radius-lg);
    padding: var(--ip-space-6);
    box-shadow: var(--ip-shadow-sm);
    margin-bottom: var(--ip-space-6);
}
.ip-value-block {
    flex: 0 0 auto;
    min-width: 280px;
    max-width: 480px;
}
.ip-value-row {
    display: flex;
    align-items: baseline;
    gap: var(--ip-space-3);
    flex-wrap: wrap;
}
.ip-var-inline {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: var(--ip-text-sm); font-weight: var(--ip-weight-semibold);
    padding: 3px 10px;
    border-radius: var(--ip-radius-pill);
    white-space: nowrap;
}
.ip-var-inline.up   { color: var(--ip-success); background: var(--ip-success-bg); }
.ip-var-inline.down { color: var(--ip-danger);  background: var(--ip-danger-bg); }
.ip-var-inline.flat { color: var(--ip-text-muted); background: var(--ip-bg-tertiary); }

.ip-hero-actions {
    display: flex; gap: var(--ip-space-2); flex-wrap: wrap;
    margin-top: var(--ip-space-4);
}
.ip-action-btn {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: var(--ip-text-xs); font-weight: var(--ip-weight-medium);
    padding: 6px 12px; border-radius: var(--ip-radius-md);
    background: var(--ip-bg-secondary); color: var(--ip-text-secondary);
    border: 1px solid var(--ip-border-subtle); cursor: pointer;
    text-decoration: none; transition: background .12s, border-color .12s, color .12s;
}
.ip-action-btn:hover { background: var(--ip-bg-hover); border-color: var(--ip-accent); color: var(--ip-accent); }
.ip-action-btn svg { width: 14px; height: 14px; }

/* — Bouton favori (Lot 4) ------------------------------------------------- */
.ip-favorite-btn {
    position: relative;
}
.ip-favorite-btn .ip-favorite-icon { transition: fill .15s, opacity .15s; }
.ip-favorite-btn .ip-favorite-icon--filled  { display: none;   fill: #f59e0b; }
.ip-favorite-btn .ip-favorite-icon--outline { display: inline-block; fill: none; stroke: currentColor; }

.ip-favorite-btn[data-is-favorite="true"],
.ip-favorite-btn--active {
    color: #f59e0b;
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.08);
}
.ip-favorite-btn[data-is-favorite="true"] .ip-favorite-icon--filled,
.ip-favorite-btn--active .ip-favorite-icon--filled {
    display: inline-block;
}
.ip-favorite-btn[data-is-favorite="true"] .ip-favorite-icon--outline,
.ip-favorite-btn--active .ip-favorite-icon--outline {
    display: none;
}

.ip-favorite-btn--loading {
    opacity: 0.5;
    pointer-events: none;
}
.ip-favorite-btn--loading::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(255,255,255,0.4);
}

/* Animation pulse à l'ajout */
@keyframes ip-fav-pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.15); }
    100% { transform: scale(1); }
}
.ip-favorite-btn[data-is-favorite="true"] .ip-favorite-icon--filled {
    animation: ip-fav-pulse .35s ease-out;
}

.ip-hero-spark {
    flex: 1 1 320px;
    min-width: 280px;
    max-width: 520px;
    align-self: stretch;
    display: flex;
    flex-direction: column;
}
.ip-hero-spark-label {
    font-size: var(--ip-text-xs);
    font-weight: var(--ip-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ip-text-muted);
    margin-bottom: var(--ip-space-2);
}
.ip-hero-spark-canvas { width: 100% !important; height: 80px !important; }
.ip-hero-spark-meta {
    font-size: var(--ip-text-sm);
    margin-top: var(--ip-space-2);
    color: var(--ip-text-secondary);
}

/* ============================================================================
 * Composant: variations — KPI cards avec sparklines (v1.4.4 — étirement plein)
 *
 * Layout :
 *   - Grid : `repeat(auto-fit, minmax(180px, 1fr))` → les cards s'étirent
 *     uniformément sur toute la largeur disponible. Sur 1140px avec 4 KPI →
 *     ~270px par card. Sur 720px → 2x2. Sur 480px → 1 colonne.
 *   - Padding et typo compacts par rapport au hero pour bien marquer la
 *     hiérarchie visuelle (le hero domine, les KPI sont en support).
 * ============================================================================ */
.ip-variations--kpi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--ip-space-3);
    margin-bottom: var(--ip-space-6);
}
.ip-var-card {
    background: var(--ip-bg-secondary);
    border: 1px solid var(--ip-border-subtle);
    border-radius: var(--ip-radius-md);
    padding: var(--ip-space-4);
    display: flex; flex-direction: column; gap: var(--ip-space-2);
    min-width: 0;
}
.ip-var-card .ip-var-label {
    font-size: 11px;
    margin-bottom: 0;
}
.ip-var-card .ip-var-pct {
    /* v1.4.5 : pourcentage plus visible — text-xl (24px) au lieu de text-lg (18px) */
    font-size: var(--ip-text-xl);
    font-weight: var(--ip-weight-semibold);
    line-height: 1.1;
    letter-spacing: -0.01em;
}
.ip-var-value-row { display: flex; align-items: center; gap: 6px; }
.ip-kpi-spark {
    /* v1.4.5 : sparkline KPI plus haute pour mieux voir la courbe (28→40px) */
    width: 100% !important;
    height: 40px !important;
    margin-top: var(--ip-space-1);
}

/* ============================================================================
 * Composant: history_table — mini-bars + export
 * ============================================================================ */
.ip-history { margin-bottom: var(--ip-space-6); }
.ip-history-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: var(--ip-space-3);
}
.ip-history-title { font-size: var(--ip-text-md); font-weight: 600; }
.ip-export-csv { font-size: var(--ip-text-xs); }

.ip-mini-bar-wrap {
    height: 8px; background: var(--ip-bg-tertiary);
    border-radius: var(--ip-radius-pill); overflow: hidden; min-width: 60px;
}
.ip-mini-bar-fill {
    height: 100%; background: var(--ip-accent);
    border-radius: var(--ip-radius-pill); transition: width .3s;
}
.ip-status-tag {
    display: inline-block; font-size: 11px; padding: 1px 6px;
    border-radius: var(--ip-radius-pill);
    background: var(--ip-bg-tertiary); color: var(--ip-text-muted);
}
/* Variantes par statut (scope sur .ip-status-tag pour éviter de toucher les banner) */
.ip-status-tag.ip-status-normal     { background: var(--ip-bg-tertiary); color: var(--ip-text-secondary); }
.ip-status-tag.ip-status-provisoire { background: var(--ip-warning-bg);  color: var(--ip-warning); }
.ip-status-tag.ip-status-estime     { background: var(--ip-info-bg);     color: var(--ip-info); }
.ip-status-tag.ip-status-rupture    { background: var(--ip-danger-bg);   color: var(--ip-danger); }
.ip-status-tag.ip-status-manquant   { background: var(--ip-bg-tertiary); color: var(--ip-text-muted); font-style: italic; }

/* ============================================================================
 * Composant: related_indices — cards premium
 * ============================================================================ */
.ip-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--ip-space-3);
    margin-bottom: var(--ip-space-6);
}
.ip-related-card {
    background: var(--ip-bg-secondary);
    border: 1px solid var(--ip-border-subtle);
    border-radius: var(--ip-radius-md);
    padding: var(--ip-space-4);
    display: flex; flex-direction: column; gap: 6px;
    text-decoration: none; color: inherit;
    transition: border-color .15s, box-shadow .15s;
}
.ip-related-card--linked:hover {
    border-color: var(--ip-accent);
    box-shadow: var(--ip-shadow-md);
}
.ip-related-card-top { display: flex; justify-content: space-between; align-items: center; }
.ip-related-idbank { font-family: var(--ip-font-mono); font-size: 10px; color: var(--ip-text-muted); }
.ip-related-code { font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 3px; }
.ip-related-code--dim { color: var(--ip-text-muted); }
.ip-related-code svg { width: 11px; height: 11px; }
.ip-related-name { font-size: 11px; color: var(--ip-text-muted); line-height: 1.4; }
.ip-related-nodispo { font-size: 10px; color: var(--ip-warning); display: none; }
.ip-related-grid--admin .ip-related-nodispo { display: block; }
.ip-related-spark-wrap canvas { width: 100% !important; height: 32px !important; }
.ip-related-value-row { display: flex; align-items: baseline; gap: 6px; }
.ip-related-value { font-size: var(--ip-text-lg); font-weight: 700; }
.ip-related-period { font-size: 11px; color: var(--ip-text-muted); }

@media (max-width: 900px) {
    .ip-value-block { max-width: none; }
    .ip-hero-spark { max-width: none; }
    .ip-variations--kpi { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}

@media (max-width: 640px) {
    .ip-value-block-wrapper {
        flex-direction: column;
        gap: var(--ip-space-5);
        padding: var(--ip-space-5);
    }
    .ip-hero-spark { min-width: unset; width: 100%; }
    .ip-variations--kpi { grid-template-columns: repeat(2, 1fr); }
    .ip-related-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ─────────────────────────────────────────────────────────────────────────
 * v1.4.78 — Composants pour les pages CPT indice_family
 * ───────────────────────────────────────────────────────────────────────── */

/* family_meta_card : panneau de métadonnées de la famille */
.ip-family-meta-card {
    background: var(--ip-bg-secondary);
    border-radius: var(--ip-radius-md);
    padding: var(--ip-space-4) var(--ip-space-6);
    margin: var(--ip-space-4) 0 var(--ip-space-6);
}
.ip-family-meta-list {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ip-space-2);
}
.ip-family-meta-row {
    display: flex;
    align-items: baseline;
    gap: var(--ip-space-3);
    padding: var(--ip-space-2) 0;
    border-bottom: 1px solid var(--ip-border-subtle);
}
.ip-family-meta-row:last-child { border-bottom: none; }
.ip-family-meta-row dt {
    flex: 0 0 200px;
    color: var(--ip-text-secondary);
    font-size: var(--ip-text-sm);
    font-weight: var(--ip-weight-medium);
}
.ip-family-meta-row dd {
    flex: 1;
    margin: 0;
    color: var(--ip-text-primary);
}
.ip-family-insee-link {
    color: var(--ip-accent);
    text-decoration: none;
    font-weight: var(--ip-weight-medium);
}
.ip-family-insee-link:hover {
    text-decoration: underline;
    color: var(--ip-accent-hover);
}

/* family_indices_list : tableau des indices de la famille */
.ip-family-indices-wrap {
    margin: var(--ip-space-4) 0 var(--ip-space-8);
    overflow-x: auto;
}
.ip-family-indices-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--ip-bg-primary);
    font-size: var(--ip-text-sm);
}
.ip-family-indices-table thead {
    background: var(--ip-bg-secondary);
}
.ip-family-indices-table th {
    text-align: left;
    padding: var(--ip-space-3) var(--ip-space-4);
    font-weight: var(--ip-weight-semibold);
    color: var(--ip-text-primary);
    border-bottom: 2px solid var(--ip-border-subtle);
}
.ip-family-indices-table td {
    padding: var(--ip-space-3) var(--ip-space-4);
    border-bottom: 1px solid var(--ip-border-subtle);
    vertical-align: middle;
}
.ip-family-indices-table tbody tr {
    transition: background var(--ip-transition);
}
.ip-family-indices-table tbody tr:hover {
    background: var(--ip-bg-hover);
}
.ip-fi-col-code { width: 100px; }
.ip-fi-col-code code {
    background: var(--ip-bg-tertiary);
    padding: 2px 8px;
    border-radius: var(--ip-radius-sm);
    font-size: var(--ip-text-xs);
    font-weight: var(--ip-weight-semibold);
}
.ip-fi-col-status { width: 100px; text-align: center; }
.ip-fi-col-value { width: 120px; text-align: right; font-weight: var(--ip-weight-medium); }
.ip-fi-col-period { width: 110px; color: var(--ip-text-secondary); }
.ip-fi-status-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--ip-radius-pill);
    font-size: var(--ip-text-xs);
    font-weight: var(--ip-weight-medium);
}
.ip-fi-status-active   { background: #d1fae5; color: #065f46; }
.ip-fi-status-inactive { background: #f3f4f6; color: #6b7280; }

/* Variantes pour les lignes non publiées (cohérent avec resolve_indice_link) */
.ip-fi-row--draft   td,
.ip-fi-row--trash   td,
.ip-fi-row--missing td {
    opacity: 0.75;
}
.ip-fi-link--published {
    color: var(--ip-accent);
    text-decoration: none;
    font-weight: var(--ip-weight-medium);
}
.ip-fi-link--published:hover {
    text-decoration: underline;
}
.ip-fi-link--draft,
.ip-fi-link--trash,
.ip-fi-link--missing {
    color: var(--ip-text-secondary);
    font-style: italic;
}

.ip-family-no-indices {
    padding: var(--ip-space-4);
    background: var(--ip-bg-secondary);
    border-radius: var(--ip-radius-md);
    color: var(--ip-text-secondary);
    text-align: center;
    margin: var(--ip-space-4) 0;
}

@media (max-width: 720px) {
    .ip-family-meta-row { flex-direction: column; gap: 2px; }
    .ip-family-meta-row dt { flex: none; }
    .ip-fi-col-period { display: none; }
}

/* ============================================================================
 * v1.5.3 — Composant family_hero
 * v1.5.11 — Lifting CSS : utilisation des tokens --ip-* unifiés pour cohérence
 * avec les autres composants du plugin (breadcrumb, pills, value_block...).
 * Bannière d'entête pour les pages famille avec titre, chips meta et lien INSEE.
 * 3 variantes de style : default (accent IndicesPro), minimal (fond blanc), accent.
 * ============================================================================ */

.ip-family-hero {
    margin: 0 0 var(--ip-space-5) 0;
    border-radius: var(--ip-radius-lg);
    overflow: hidden;
    position: relative;
}

.ip-family-hero-inner {
    padding: var(--ip-space-5) var(--ip-space-5);
}

/* Variante par défaut : couleur signature --ip-accent (cohérence breadcrumb/pills) */
.ip-family-hero--default {
    background: linear-gradient(135deg,
        var(--ip-accent) 0%,
        var(--ip-accent-hover) 60%,
        var(--ip-accent-active) 100%);
    color: var(--ip-text-on-accent);
}
.ip-family-hero--default .ip-family-hero-title,
.ip-family-hero--default .ip-family-hero-subtitle,
.ip-family-hero--default .ip-family-hero-description {
    color: var(--ip-text-on-accent);
}
.ip-family-hero--default .ip-family-hero-chip {
    background: rgba(255, 255, 255, 0.15);
    color: var(--ip-text-on-accent);
    border: 1px solid rgba(255, 255, 255, 0.25);
}
.ip-family-hero--default .ip-family-hero-chip-label {
    color: rgba(255, 255, 255, 0.85);
}
.ip-family-hero--default .ip-family-hero-insee-btn {
    background: var(--ip-bg-primary);
    color: var(--ip-accent);
}
.ip-family-hero--default .ip-family-hero-insee-btn:hover {
    background: var(--ip-accent-bg);
    color: var(--ip-accent-hover);
}

/* Variante minimal : fond clair, bordure douce (cohérent avec ip-meta-list) */
.ip-family-hero--minimal {
    background: var(--ip-bg-primary);
    border: 1px solid var(--ip-border-subtle);
    color: var(--ip-text-primary);
}
.ip-family-hero--minimal .ip-family-hero-title {
    color: var(--ip-text-primary);
}
.ip-family-hero--minimal .ip-family-hero-subtitle,
.ip-family-hero--minimal .ip-family-hero-description {
    color: var(--ip-text-secondary);
}
.ip-family-hero--minimal .ip-family-hero-chip {
    background: var(--ip-bg-tertiary);
    border: 1px solid var(--ip-border-subtle);
    color: var(--ip-text-primary);
}
.ip-family-hero--minimal .ip-family-hero-chip-label {
    color: var(--ip-text-secondary);
}
.ip-family-hero--minimal .ip-family-hero-insee-btn {
    background: var(--ip-accent);
    color: var(--ip-text-on-accent);
}
.ip-family-hero--minimal .ip-family-hero-insee-btn:hover {
    background: var(--ip-accent-hover);
    color: var(--ip-text-on-accent);
}

/* Variante accent : pour mettre une famille en avant (orange chaleureux) */
.ip-family-hero--accent {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 50%, #c2410c 100%);
    color: var(--ip-text-on-accent);
}
.ip-family-hero--accent .ip-family-hero-title,
.ip-family-hero--accent .ip-family-hero-subtitle,
.ip-family-hero--accent .ip-family-hero-description {
    color: var(--ip-text-on-accent);
}
.ip-family-hero--accent .ip-family-hero-chip {
    background: rgba(255, 255, 255, 0.18);
    color: var(--ip-text-on-accent);
    border: 1px solid rgba(255, 255, 255, 0.3);
}
.ip-family-hero--accent .ip-family-hero-chip-label {
    color: rgba(255, 255, 255, 0.85);
}
.ip-family-hero--accent .ip-family-hero-insee-btn {
    background: var(--ip-bg-primary);
    color: #c2410c;
}
.ip-family-hero--accent .ip-family-hero-insee-btn:hover {
    background: #fff7ed;
}

/* Header (titre + subtitle) */
.ip-family-hero-header {
    margin-bottom: var(--ip-space-4);
}
.ip-family-hero-title {
    font-size: var(--ip-text-2xl, 1.875rem);
    font-weight: var(--ip-weight-bold, 700);
    line-height: 1.2;
    margin: 0 0 var(--ip-space-2) 0;
    display: flex;
    align-items: center;
    gap: var(--ip-space-2);
}
.ip-family-hero-icon {
    font-size: 1.5rem;
    line-height: 1;
}
.ip-family-hero-subtitle {
    font-size: var(--ip-text-lg, 1.0625rem);
    font-weight: var(--ip-weight-regular, 400);
    margin: 0;
    opacity: 0.92;
}

/* Chips row : chips + bouton INSEE */
.ip-family-hero-chips-row {
    display: flex;
    align-items: center;
    gap: var(--ip-space-3);
    flex-wrap: wrap;
    justify-content: space-between;
}

.ip-family-hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ip-space-2);
}

.ip-family-hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: var(--ip-space-2) var(--ip-space-3);
    border-radius: var(--ip-radius-pill);
    font-size: var(--ip-text-sm);
    font-weight: var(--ip-weight-medium);
    line-height: 1;
}
.ip-family-hero-chip-icon {
    font-size: var(--ip-text-base, 1rem);
    line-height: 1;
}
.ip-family-hero-chip-label {
    font-weight: var(--ip-weight-regular, 400);
    opacity: 0.85;
}
.ip-family-hero-chip-value {
    font-weight: var(--ip-weight-bold, 700);
}

/* Bouton INSEE */
.ip-family-hero-insee-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: var(--ip-space-3) var(--ip-space-4);
    border-radius: var(--ip-radius-md);
    font-size: var(--ip-text-sm);
    font-weight: var(--ip-weight-semibold);
    text-decoration: none;
    transition: background var(--ip-transition), color var(--ip-transition), transform var(--ip-transition);
}
.ip-family-hero-insee-btn:hover {
    transform: translateY(-1px);
    text-decoration: none;
}

/* Description riche */
.ip-family-hero-description {
    margin-top: var(--ip-space-4);
    padding-top: var(--ip-space-4);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    font-size: var(--ip-text-sm);
    line-height: 1.6;
}
.ip-family-hero--minimal .ip-family-hero-description {
    border-top-color: var(--ip-border-subtle);
}
.ip-family-hero-description p {
    margin: 0 0 var(--ip-space-2) 0;
}
.ip-family-hero-description p:last-child {
    margin-bottom: 0;
}
.ip-family-hero-description a {
    color: inherit;
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 720px) {
    .ip-family-hero-inner {
        padding: var(--ip-space-4) var(--ip-space-4);
    }
    .ip-family-hero-title {
        font-size: var(--ip-text-xl, 1.5rem);
    }
    .ip-family-hero-subtitle {
        font-size: var(--ip-text-sm, 0.9375rem);
    }
    .ip-family-hero-chips-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .ip-family-hero-chip {
        font-size: var(--ip-text-xs, 0.8125rem);
        padding: 6px 12px;
    }
    .ip-family-hero-insee-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================================
 * v1.5.4 — Composant family_faq
 * v1.5.11 — Lifting CSS : tokens --ip-* + accent unifié
 * FAQ accordéons accessible avec <details>/<summary>, zéro JS.
 * ============================================================================ */
.ip-family-faq {
    margin: var(--ip-space-5) 0;
}
.ip-family-faq-title {
    margin: 0 0 var(--ip-space-4) 0;
}
.ip-family-faq-list {
    display: flex;
    flex-direction: column;
    gap: var(--ip-space-2);
}
.ip-family-faq-item {
    border: 1px solid var(--ip-border-subtle);
    border-radius: var(--ip-radius-md);
    background: var(--ip-bg-primary);
    overflow: hidden;
    transition: border-color var(--ip-transition), box-shadow var(--ip-transition);
}
.ip-family-faq-item[open] {
    border-color: var(--ip-accent);
    box-shadow: 0 2px 8px var(--ip-accent-bg);
}
.ip-family-faq-q {
    cursor: pointer;
    padding: var(--ip-space-3) var(--ip-space-4);
    font-weight: var(--ip-weight-semibold);
    font-size: var(--ip-text-base, 1rem);
    color: var(--ip-text-primary);
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--ip-space-2);
    transition: background var(--ip-transition);
}
.ip-family-faq-q::-webkit-details-marker { display: none; }
.ip-family-faq-q:hover {
    background: var(--ip-bg-tertiary);
}
.ip-family-faq-q-icon {
    font-size: 0.9rem;
    color: var(--ip-accent);
    flex-shrink: 0;
}
.ip-family-faq-q-text {
    flex: 1;
}
.ip-family-faq-q::after {
    content: '▶';
    font-size: 0.7rem;
    color: var(--ip-accent);
    transition: transform 0.2s ease;
}
.ip-family-faq-item[open] .ip-family-faq-q::after {
    transform: rotate(90deg);
}
.ip-family-faq-a {
    padding: 0 var(--ip-space-4) var(--ip-space-4) var(--ip-space-8, 36px);
    color: var(--ip-text-secondary);
    line-height: 1.6;
    font-size: var(--ip-text-sm);
}
.ip-family-faq-a p:first-child { margin-top: 0; }
.ip-family-faq-a p:last-child { margin-bottom: 0; }
.ip-family-faq-a a { color: var(--ip-accent); }
.ip-family-faq-a a:hover { color: var(--ip-accent-hover); }

/* ============================================================================
 * v1.5.4 — Composant family_kpis
 * v1.5.11 — Lifting CSS : tokens --ip-* + couleurs sémantiques success/danger
 * Cards de KPI synthétiques sur la famille.
 * ============================================================================ */
.ip-family-kpis {
    margin: var(--ip-space-5) 0;
}
.ip-family-kpis-title {
    margin: 0 0 var(--ip-space-4) 0;
}
.ip-family-kpis-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--ip-space-3);
}
.ip-family-kpi-card {
    background: var(--ip-bg-primary);
    border: 1px solid var(--ip-border-subtle);
    border-radius: var(--ip-radius-md);
    padding: var(--ip-space-4) var(--ip-space-4);
    text-align: center;
    transition: border-color var(--ip-transition), transform var(--ip-transition), box-shadow var(--ip-transition);
}
.ip-family-kpi-card:hover {
    border-color: var(--ip-accent);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px var(--ip-accent-bg);
}
.ip-family-kpi-icon {
    font-size: 1.5rem;
    margin-bottom: var(--ip-space-2);
    line-height: 1;
}
.ip-family-kpi-value {
    font-size: var(--ip-text-xl, 1.5rem);
    font-weight: var(--ip-weight-bold);
    color: var(--ip-text-primary);
    line-height: 1.2;
    margin-bottom: 4px;
}
/* Couleurs sémantiques success/danger — préservées car ne suivent pas l'accent */
.ip-family-kpi-value--positive {
    color: #16a34a; /* success */
}
.ip-family-kpi-value--negative {
    color: #dc2626; /* danger */
}
.ip-family-kpi-label {
    font-size: var(--ip-text-xs, 0.8125rem);
    color: var(--ip-text-secondary);
    font-weight: var(--ip-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.ip-family-kpi-trend-up     { color: #16a34a; }
.ip-family-kpi-trend-down   { color: #dc2626; }
.ip-family-kpi-trend-stable { color: var(--ip-text-secondary); }

/* ============================================================================
 * v1.5.4 — Composant family_cards
 * v1.5.11 — Lifting CSS : tokens --ip-* + accent unifié
 * Grille de cards par indice avec valeur, variation, sparkline.
 * ============================================================================ */
.ip-family-cards {
    margin: var(--ip-space-5) 0;
}
.ip-family-cards-title {
    margin: 0 0 var(--ip-space-4) 0;
}
.ip-family-cards-grid {
    display: grid;
    gap: var(--ip-space-3);
}
@media (max-width: 720px) {
    .ip-family-cards-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}
@media (max-width: 480px) {
    .ip-family-cards-grid {
        grid-template-columns: 1fr !important;
    }
}
.ip-family-card {
    background: var(--ip-bg-primary);
    border: 1px solid var(--ip-border-subtle);
    border-radius: var(--ip-radius-md);
    padding: var(--ip-space-3) var(--ip-space-4);
    transition: border-color var(--ip-transition), box-shadow var(--ip-transition), transform var(--ip-transition);
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-decoration: none;
    color: inherit;
}
.ip-family-card--linked {
    cursor: pointer;
}
.ip-family-card--linked:hover {
    border-color: var(--ip-accent);
    box-shadow: 0 4px 12px var(--ip-accent-bg);
    transform: translateY(-2px);
    text-decoration: none;
}
.ip-family-card-subcode {
    font-size: 0.75rem;
    font-weight: var(--ip-weight-bold);
    color: var(--ip-accent);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.ip-family-card-title {
    font-size: var(--ip-text-sm, 0.875rem);
    font-weight: var(--ip-weight-semibold);
    color: var(--ip-text-primary);
    line-height: 1.3;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ip-family-card-value {
    font-size: 1.25rem;
    font-weight: var(--ip-weight-bold);
    color: var(--ip-text-primary);
    line-height: 1.2;
}
.ip-family-card-period {
    font-size: 0.6875rem;
    font-weight: var(--ip-weight-regular);
    color: var(--ip-text-secondary);
    margin-left: 4px;
}
.ip-family-card-var {
    font-size: var(--ip-text-sm, 0.875rem);
    font-weight: var(--ip-weight-semibold);
}
/* Couleurs sémantiques (variation positive/négative) — préservées */
.ip-family-card-var--positive { color: #16a34a; }
.ip-family-card-var--negative { color: #dc2626; }
.ip-family-card-sparkline {
    width: 100%;
    height: 30px;
    margin-top: 4px;
    display: block;
}