@layer components {


  .dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--gap-grid);
    padding: 0;
    min-width: 0;
  }

  @media (min-width: 768px) {
    .dashboard-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 1024px) {
    .dashboard-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }


  .dashboard-grid-section {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-3);
    min-width: 0;
  }
  .dashboard-grid-section:first-child {
    margin-top: 0;
  }

  .dashboard-grid-section-label {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tx2);
    white-space: nowrap;
  }

  .dashboard-grid-section-line {
    flex: 1 1 auto;
    height: 1px;
    background: var(--bd);
  }


  .col-1 {
    grid-column: span 1;
  }
  .col-2 {
    grid-column: span 2;
  }
  .col-3 {
    grid-column: span 3;
  }
  .col-4 {
    grid-column: span 4;
    min-width: 0;
  }


  @media (max-width: 1023.98px) {
    .col-3,
    .col-4 {
      grid-column: span 2;
    }
  }


  .card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;


    min-height: 100px;
    padding: var(--space-5);
    background: linear-gradient(180deg, var(--bg2), var(--bg2));
    border: 1px solid var(--bd);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);


    container-type: inline-size;
  }

  .card-h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    min-width: 0;
  }

  .card-h-lead {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
  }

  .card-title {
    font-size: var(--text-xs);
    color: var(--tx3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .kpi-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--ac2);
    color: var(--ac);
    flex: 0 0 auto;
  }

  .card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
  }


  .kpi-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-1);
    min-width: 0;
  }
  .kpi-value {
    font-family: var(--font-mono);
    font-size: var(--text-fluid-kpi);
    font-weight: 600;
    color: var(--tx);
    line-height: 1.05;
    letter-spacing: 0;

    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 0;
  }

  .kpi-trend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    font-weight: 500;
    border-radius: 99px;
    width: fit-content;
  }

  .trend-up {
    color: var(--ok);
    background: var(--ok2);
  }
  .trend-down {
    color: var(--dn);
    background: var(--dn2);
  }
  .trend-flat {
    color: var(--tx2);
    background: var(--bg3);
  }


  .live-row {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
  }
  .live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ac);
    box-shadow: 0 0 0 0 var(--ac2);
    animation: live-pulse 1.5s infinite ease-out;
  }
  @keyframes live-pulse {
    0% {
      box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.45);
    }
    70% {
      box-shadow: 0 0 0 10px rgba(var(--accent-rgb), 0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0);
    }
  }
  .live-sub {
    font-size: var(--text-xs);
    color: var(--tx2);
  }


  .tooltip-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    color: var(--tx3);
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition:
      color var(--t-fast),
      background-color var(--t-fast);
    flex: 0 0 auto;
  }
  .tooltip-trigger:hover {
    color: var(--ac);
    background: var(--ac2);
  }
  .tooltip-trigger[aria-expanded='true'] {
    color: var(--ac);
    background: var(--ac2);
  }

  .tooltip-popover {
    position: fixed;
    top: 0;
    left: 0;
    right: auto;
    z-index: 1000;
    width: max-content;
    max-width: min(320px, calc(100vw - 24px));
    padding: var(--space-3);
    background: var(--bg3);
    border: 1px solid var(--bd);
    border-radius: 8px;
    box-shadow: var(--shadow-3);
    color: var(--tx2);
    font-size: var(--text-sm);
    line-height: 1.5;
  }
  .tooltip-popover::before {
    content: '';
    position: absolute;
    top: -6px;
    left: var(--tooltip-arrow-left, auto);
    right: auto;
    width: 10px;
    height: 10px;
    background: var(--bg3);
    border-top: 1px solid var(--bd);
    border-left: 1px solid var(--bd);
    transform: rotate(45deg);
  }
  .tooltip-popover[data-placement='top']::before {
    top: auto;
    bottom: -6px;
    border-top: 0;
    border-left: 0;
    border-right: 1px solid var(--bd);
    border-bottom: 1px solid var(--bd);
  }
  .tooltip-line {
    margin: 0 0 var(--space-2);
  }
  .tooltip-line:last-child {
    margin-bottom: 0;
  }


  .card.is-loading .card-body,
  .card.is-error .card-body,
  .card.is-empty .card-body {
    justify-content: center;
    align-items: flex-start;
    color: var(--tx2);
  }

  .card-skeleton {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: 100%;
  }
  .card-skeleton-line {
    height: 12px;
    background: var(--bg3);
    border-radius: var(--radius-sm);


  }
  .card-skeleton-line.skel-w-50 {
    width: 50%;
  }
  .card-skeleton-line.skel-w-70 {
    width: 70%;
  }
  .card-skeleton-line.skel-w-90 {
    width: 90%;
  }
  .card-skeleton-line.skel-h-20 {
    height: 20px;
  }
  .card-skeleton-line.skel-h-32 {
    height: 32px;
  }
  @keyframes skeleton-shimmer {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
  }

  .card-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--bd);
    border-top-color: var(--ac);
    border-radius: 50%;
    animation: card-spin 0.8s linear infinite;
    vertical-align: middle;
    margin-right: 6px;
  }
  @keyframes card-spin {
    to {
      transform: rotate(360deg);
    }
  }
  .card-loading-text {
    font-size: var(--text-sm);
    color: var(--tx2);
  }

  .card-error {
    font-size: var(--text-sm);
    color: var(--tx2);
  }
  .card-error-title {
    font-weight: 500;
    color: var(--tx);
    margin-bottom: var(--space-1);
  }
  .card-error-code {
    display: inline-block;
    margin-right: var(--space-2);
    padding: 1px 6px;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--dn);
    background: var(--dn2);
    border-radius: var(--radius-sm);
  }
  .card-error-msg {
    margin-bottom: var(--space-2);
  }
  .card-error-retry {
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--ac);
    background: transparent;
    border: 1px solid var(--bd);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    transition:
      border-color var(--t-fast),
      background var(--t-fast);
  }
  .card-error-retry:hover {
    border-color: var(--ac);
    background: var(--ac2);
  }
  .card-error-retry:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
  }

  .card-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-3);
    text-align: center;
    width: 100%;
  }
  .card-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg3);
    color: var(--tx3);
  }
  .card-empty-title {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--tx);
    margin: 0;
  }
  .card-empty-text {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--tx2);
    line-height: 1.45;
  }


  .card-empty--kanon {
    max-width: 360px;
    margin: 0 auto;
    gap: var(--space-2);
  }
  .card-empty--kanon .card-empty-icon {
    background: var(--ac2);
    color: var(--ac);
    width: 44px;
    height: 44px;
  }
  .card-empty--kanon .card-empty-title {
    color: var(--tx);
  }
  .card-empty--kanon .card-empty-text {
    color: var(--tx2);
  }
  .card-empty--kanon .card-empty-text b {
    color: var(--tx);
    font-weight: 600;
  }
  .card-empty--kanon .card-empty-text:first-of-type {
    color: var(--tx);
    font-weight: 600;
  }
  .card-empty-subtext {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--tx2);
    line-height: 1.45;
  }
  .card-empty-progress {
    margin: var(--space-1) 0 0;
    font-size: var(--text-xs);
    color: var(--tx3);
  }
  .card-empty-progress b {
    color: var(--ac);
    font-weight: 600;
  }


  .card-empty-cardinality {
    margin: var(--space-1) 0 0;
    font-size: var(--text-xs);
    color: var(--tx2);
    line-height: 1.5;
    max-width: 360px;
    text-align: center;
  }
  .card-empty-cardinality b {
    color: var(--tx);
    font-weight: 600;
  }


  .overview-notices {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
  }
  .overview-notice {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--bg2);
    border: 1px solid var(--bd);
    border-radius: 8px;
    font-size: var(--text-sm);
    color: var(--tx);
    line-height: 1.45;
  }
  .overview-notice--crawlers {
    border-left: 3px solid var(--ac);
  }
  .overview-notice--widen {
    border-left: 3px solid var(--wr, var(--ac));
  }
  .overview-notice-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg3);
    color: var(--ac);
    flex-shrink: 0;
  }
  .overview-notice--widen .overview-notice-icon {
    color: var(--wr, var(--ac));
  }
  .overview-notice-body {
    flex: 1 1 auto;
    min-width: 0;
  }
  .overview-notice-text {
    margin: 0;
    color: var(--tx2);
  }
  .overview-notice-text b {
    color: var(--tx);
    font-weight: 600;
  }
  .overview-notice-cta {
    flex-shrink: 0;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--bd);
    border-radius: 6px;
    font-size: var(--text-sm);
    color: var(--ac);
    text-decoration: none;
    cursor: pointer;
    transition:
      border-color var(--t-fast),
      background var(--t-fast);
  }
  .overview-notice-cta:hover {
    border-color: var(--ac);
    background: var(--ac2);
  }


  .geo-map {
    margin-bottom: var(--space-3);
  }
  .geo-top3-title {
    font-size: var(--text-xs);
    color: var(--tx3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-2);
  }
  .top3 {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .top3 li {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) minmax(40px, 60px) auto;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    min-width: 0;
  }
  .top3 .flag {
    width: 20px;
    height: 15px;
    border-radius: 2px;
    object-fit: cover;
    border: 1px solid var(--bd);
  }

  .flag-inline {
    display: inline-block;
    vertical-align: middle;
    border-radius: 50%;
    object-fit: cover;
    margin-right: var(--space-2);
    flex-shrink: 0;
  }
  .cell-country {
    display: inline-flex;
    align-items: center;
    gap: 0;
    min-width: 0;
  }


  .cell-region {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
  }
  .cell-region-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }


  .country-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(var(--accent-rgb), 0.14);
    border: 1px solid rgba(var(--accent-rgb), 0.4);
    color: var(--ac);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    flex-shrink: 0;
    text-transform: uppercase;
  }


  .geo-view-toggle {
    display: inline-flex;
    gap: 4px;
    margin-bottom: var(--space-3);
  }
  .geo-view-toggle button {
    appearance: none;
    cursor: pointer;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--bg3);
    border: 1px solid var(--bd);
    color: var(--tx2);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.02em;
    transition:
      background var(--t-fast),
      border-color var(--t-fast),
      color var(--t-fast);
  }
  .geo-view-toggle button:hover {
    border-color: var(--ac);
    color: var(--tx);
  }
  .geo-view-toggle button[aria-pressed='true'] {
    background: var(--ac);
    border-color: var(--ac);
    color: #fff;
  }
  .geo-view-toggle button:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
  }


  .cell-referrer {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
  }
  .cell-referrer-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: var(--tx2);
    flex-shrink: 0;
  }

  .top3 .top3-name {
    color: var(--tx);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  .top3 .bar {
    display: block;
    position: relative;
    height: 4px;
    background: var(--bg3);
    border-radius: 2px;
    overflow: hidden;
  }
  .top3 .bar-inner {
    display: block;
    height: 100%;
    background: var(--ac);
    border-radius: 2px;
  }
  .top3 .num {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--tx2);
    text-align: right;
  }


  .data-table-wrap {
    width: 100%;
    min-width: 0;
  }
  .data-table-scroll {
    width: 100%;
    overflow-x: auto;

    -webkit-overflow-scrolling: touch;
  }

  .data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
  }
  .data-table thead th {
    text-align: left;
    padding: var(--space-2) var(--space-3);
    color: var(--tx3);
    font-weight: 500;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--bd);
    white-space: nowrap;
  }
  .data-table tbody td {
    padding: var(--space-2) var(--space-3);
    color: var(--tx);
    border-bottom: 1px solid var(--bd);
  }
  .data-table tbody tr:last-child td {
    border-bottom: 0;
  }
  .data-table tbody tr:hover td {
    background: var(--bg3);
  }


  .data-table tbody tr.dt-row-compare {
    cursor: help;
  }


  .data-table-compare-tooltip {
    position: absolute;
    z-index: 100;
    min-width: 180px;
    max-width: 280px;
    padding: 10px 12px;
    background: var(--bg2);
    border: 1px solid var(--bd);
    border-radius: 8px;
    box-shadow: var(--shadow-3);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--tx);
    pointer-events: none;
    animation: dt-tip-in 120ms var(--ease);
  }
  @keyframes dt-tip-in {
    from {
      opacity: 0;
      transform: translateY(-2px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .data-table-compare-tooltip .dt-tip-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--tx3);
    margin-bottom: 4px;
  }
  .data-table-compare-tooltip .dt-tip-value {
    font-weight: 500;
    color: var(--tx);
    font-variant-numeric: tabular-nums;
  }
  .data-table-compare-tooltip .dt-tip-delta {
    margin-left: 6px;
    font-size: 12px;
    font-weight: 600;
  }
  .data-table-compare-tooltip .dt-tip-delta.is-up {
    color: var(--ok);
  }
  .data-table-compare-tooltip .dt-tip-delta.is-down {
    color: var(--dn);
  }
  .data-table-compare-tooltip .dt-tip-new {
    font-weight: 600;
    color: var(--ac);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.05em;
  }


  @media (max-width: 640px) {
    .data-table-compare-tooltip {
      max-width: calc(100vw - 32px);
      pointer-events: auto;
    }
    .data-table tbody tr.dt-row-compare {
      cursor: pointer;
    }
  }

  .data-table .cell-text {
    color: var(--tx);
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .data-table .cell-num {
    font-family: var(--font-mono);
    color: var(--tx);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  .data-table .cell-primary {
    position: relative;
  }

  .data-table td.deviation-negative {
    color: var(--dn);
  }


  .list-expand {
    display: block;
    margin: var(--space-2) auto 0;
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    color: var(--ac);
    background: transparent;
    border: 1px solid var(--bd);
    border-radius: var(--r);
    padding: var(--space-1) var(--space-3);
    cursor: pointer;
    transition:
      border-color var(--t-fast),
      background var(--t-fast);
  }
  .list-expand:hover {
    border-color: var(--ac);
    background: var(--ac2);
  }


  .empty-placeholder {
    padding: var(--space-3) 0;
    color: var(--tx2);
    font-size: var(--text-sm);
    line-height: 1.5;
  }
  .empty-placeholder p {
    margin: 0 0 var(--space-2);
  }
  .empty-link {
    color: var(--ac);
    text-decoration: none;
  }
  .empty-link:hover {
    text-decoration: underline;
  }

  .card-subtitle {
    margin: 0 0 var(--space-2);
    font-size: var(--text-xs);
    color: var(--tx2);
    font-family: var(--font-mono);
  }

  .card-notice {
    margin: 0;
    padding: var(--space-3);
    background: var(--bg3);
    color: var(--tx2);
    border-radius: 6px;
    font-size: var(--text-sm);
  }

  .card-header-btn {
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    color: var(--ac);
    background: transparent;
    border: 1px solid var(--bd);
    border-radius: 6px;
    padding: 3px 8px;
    cursor: pointer;
    transition:
      border-color var(--t-fast),
      background var(--t-fast);
  }
  .card-header-btn:hover {
    border-color: var(--ac);
    background: var(--ac2);
  }

  /* Bouton « télécharger CSV » injecté dans le header par exportSlug.
     Icône seule (label en sr-only) pour rester discret à côté du titre. */
  .card-export-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    color: var(--tx3);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition:
      color var(--t-fast),
      border-color var(--t-fast),
      background var(--t-fast);
  }
  .card-export-btn:hover {
    color: var(--ac);
    border-color: var(--bd);
    background: var(--ac2);
  }
  .card-export-btn:focus-visible {
    outline: 2px solid var(--ac);
    outline-offset: 2px;
  }
  .card-export-btn .visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }


  .quartile-bars {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
  }
  .quartile-bar-row {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-sm);
    min-width: 0;
  }
  .quartile-bar-label {
    font-family: var(--font-mono);
    color: var(--tx2);
    font-size: var(--text-xs);
  }
  .quartile-bar-track {
    position: relative;
    height: 14px;
    background: var(--bg3);
    border-radius: 3px;
    overflow: hidden;
  }
  .quartile-bar-fill {
    height: 100%;
    transition: width 240ms ease;
    border-radius: 3px;
  }
  .quartile-bar-value {
    font-family: var(--font-mono);
    color: var(--tx);
    font-size: var(--text-xs);
    white-space: nowrap;
  }

  .scroll-abandon {
    margin-bottom: var(--space-3);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
    color: var(--tx2);
    background: var(--bg3);
    border: 1px solid var(--bd);
    border-radius: 6px;
  }
  .attention-notice {
    margin: var(--space-3) 0 0;
    font-size: var(--text-xs);
    color: var(--tx3);
    font-style: italic;
  }


  .behavior-selector-wrap {
    margin-bottom: var(--space-4);
  }


  .multi-tab-card-body > .behavior-selector-wrap {
    margin-bottom: 0;
    padding: var(--space-3) var(--space-4) 0;
  }

  .page-selector {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--bg2);
    border: 1px solid var(--bd);
    border-radius: var(--r);
    flex-wrap: wrap;
    min-width: 0;
  }
  /* Tuile sélecteur = une seule ligne (label + dropdown 32 px) : on annule le
     padding vertical généreux de .bento-tile (qui l'emporte sinon car bento.css
     charge après) pour réduire la barre à sa hauteur nécessaire. */
  .bento-tile.page-selector {
    padding: var(--space-2) var(--space-4);
  }
  .page-selector-label {
    font-size: var(--text-sm);
    color: var(--tx2);
    font-weight: 500;
  }
  .page-selector-select {
    flex: 1 1 240px;
    max-width: 100%;
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--tx);
    background: var(--bg);
    border: 1px solid var(--bd);
    border-radius: var(--r);
    padding: var(--space-1) var(--space-3);
    height: 32px;
    min-width: 0;
  }
  .page-selector-select:focus {
    outline: none;
    border-color: var(--ac);
  }
  .page-selector-status {
    font-size: var(--text-sm);
    color: var(--tx3);
  }


  .event-selector {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    flex-wrap: wrap;
    min-width: 0;
  }
  .event-selector-label {
    font-size: var(--text-xs);
    color: var(--tx2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .event-selector-select {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--tx);
    background: var(--bg);
    border: 1px solid var(--bd);
    border-radius: var(--r);
    padding: 2px var(--space-2);
    height: 28px;
    max-width: 100%;
    min-width: 0;
  }
  .event-timeline-chart {
    min-height: 180px;
  }


  .modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    background: rgba(0, 0, 0, 0.5);
  }
  .modal-panel {
    position: relative;
    width: 100%;
    max-width: 560px;
    padding: var(--space-5);
    background: var(--bg2);
    border: 1px solid var(--bd);
    border-radius: var(--r);
    box-shadow: var(--shadow-3);
  }
  .modal-title {
    margin: 0 0 var(--space-3);
    font-size: var(--text-lg);
    font-weight: 500;
    color: var(--tx);
  }
  .modal-close {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    width: 28px;
    height: 28px;
    font-size: 20px;
    line-height: 1;
    color: var(--tx2);
    background: transparent;
    border: 0;
    cursor: pointer;
  }
  .modal-close:hover {
    color: var(--tx);
  }
  .modal-step {
    margin: 0 0 var(--space-2);
    color: var(--tx);
    font-size: var(--text-sm);
    line-height: 1.5;
  }
  .modal-snippet-wrap {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-3) 0;
    padding: var(--space-3);
    background: var(--bg3);
    border: 1px solid var(--bd);
    border-radius: 6px;
    min-width: 0;
  }
  .modal-snippet {
    flex: 1 1 auto;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--tx);
    white-space: nowrap;
    overflow-x: auto;
    min-width: 0;
  }
  .modal-copy-btn {
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    color: var(--ac);
    background: transparent;
    border: 1px solid var(--bd);
    border-radius: 4px;
    padding: 2px 8px;
    cursor: pointer;
    flex: 0 0 auto;
  }
  .modal-copy-btn:hover {
    border-color: var(--ac);
  }
  .modal-help {
    margin: 0;
    color: var(--tx3);
    font-size: var(--text-xs);
  }


  .donut-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    min-width: 0;
  }
  .donut {
    display: block;
    max-width: 100%;
    height: auto;
  }
  .donut-segment {
    transition: transform 0.15s ease;
    transform-origin: center;
    cursor: pointer;
  }
  .donut-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    pointer-events: none;
    text-align: center;
  }
  .donut-center-big {
    font-family: var(--font-mono);
    font-size: var(--text-lg);
    color: var(--tx);
    font-weight: 500;
  }
  .donut-center-label {
    font-size: var(--text-xs);
    color: var(--tx2);
    text-transform: uppercase;
    letter-spacing: 0.4px;
  }


  .inline-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--bd);
    margin-bottom: var(--space-3);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .inline-tabs::-webkit-scrollbar {
    display: none;
  }

  .inline-tab {
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 6px 12px;
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--tx2);
    cursor: pointer;
    border-radius: 6px 6px 0 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    flex: 0 0 auto;
  }
  .inline-tab-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: 0.7;
    filter: grayscale(0.4);
    transition:
      opacity var(--t-fast),
      filter var(--t-fast);
  }
  .inline-tab.is-active .inline-tab-icon,
  .inline-tab:hover:not(.is-active):not(:disabled) .inline-tab-icon {
    opacity: 1;
    filter: none;
  }
  .inline-tab:hover:not(.is-active):not(:disabled) {
    color: var(--tx);
    background: var(--bg3);
  }
  .inline-tab.is-active {
    color: var(--ac);
    border-bottom-color: var(--ac);
    background: var(--ac2);
  }
  .inline-tab.is-disabled,
  .inline-tab[disabled] {
    color: var(--tx3);
    cursor: not-allowed;
    opacity: 0.55;
  }


  .brand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--tx2);
    flex: 0 0 auto;
  }
  .brand-icon-fallback {
    background: var(--bg3);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--tx2);
  }
  .brand-icon-fallback-wide {
    font-size: 9px;
    letter-spacing: -0.3px;
  }
  .brand-icon-svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }


  .channel-breakdown {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: var(--space-4);
    align-items: center;
    min-width: 0;
  }

  @container (max-width: 480px) {
    .channel-breakdown {
      grid-template-columns: 1fr;
    }
    .channel-donut {
      margin-inline: auto;
      max-width: 240px;
    }
  }

  .channel-donut {
    position: relative;
    min-width: 0;
  }
  .channel-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) max-content max-content max-content;
    column-gap: 10px;


    max-width: 23rem;
    min-width: 0;
  }


  .channel-row {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: center;
    padding: var(--space-2) 0;
    font-size: var(--text-sm);
    min-width: 0;
  }


  .channel-row:nth-child(even) {
    background: var(--bg);
  }
  .channel-swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    display: inline-block;
  }
  .channel-name {
    color: var(--tx);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  .channel-percent {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--tx2);
    min-width: 46px;
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .channel-visitors {
    font-family: var(--font-mono);
    color: var(--tx);
    min-width: 52px;
    text-align: right;
    font-variant-numeric: tabular-nums;
  }


  .header-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-xs);
    color: var(--tx2);
    cursor: pointer;
    user-select: none;
  }
  .header-checkbox input[type='checkbox'] {
    width: 14px;
    height: 14px;
    accent-color: var(--ac);
    margin: 0;
  }


  .header-select {
    font-size: var(--text-xs);
    color: var(--tx2);
    background: var(--bg2);
    border: 1px solid var(--bd);
    border-radius: var(--radius-sm);
    padding: 3px 8px;
    cursor: pointer;
    font-family: inherit;
  }
  .header-select:focus-visible {
    outline: 2px solid var(--ac);
    outline-offset: 1px;
  }


  .dt-row-clickable,
  .stat-bar-row.is-clickable,
  .devices-legend-row,
  .channel-row.is-clickable,
  .ai-agent.is-clickable {
    cursor: pointer;
  }
  .dt-row-clickable:hover,
  .stat-bar-row.is-clickable:hover,
  .devices-legend-row:hover,
  .channel-row.is-clickable:hover,
  .ai-agent.is-clickable:hover {
    background: var(--bg3);
  }
  .dt-row-active-filter,
  .stat-bar-row.is-active-filter,
  .devices-legend-row.is-active-filter,
  .channel-row.is-active-filter,
  .ai-agent.is-active-filter {
    background: var(--ac2);
    outline: 1px solid var(--ac);
    outline-offset: -1px;
  }
  .dt-row-active-filter .cell-text,
  .dt-row-active-filter .cell-country span:last-child,
  .dt-row-active-filter .cell-referrer span:last-child,
  .stat-bar-row.is-active-filter .stat-bar-label,
  .devices-legend-row.is-active-filter .devices-legend-label,
  .channel-row.is-active-filter .channel-name,
  .ai-agent.is-active-filter .ai-agent-name {
    color: var(--ac);
    font-weight: 600;
  }
  .dt-row-clickable:hover .cell-text,
  .dt-row-clickable:hover .cell-country span:last-child,
  .dt-row-clickable:hover .cell-referrer span:last-child,
  .stat-bar-row.is-clickable:hover .stat-bar-label,
  .devices-legend-row:hover .devices-legend-label,
  .channel-row.is-clickable:hover .channel-name,
  .ai-agent.is-clickable:hover .ai-agent-name {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .data-table-row-link,
  .stat-bar-link,
  .channel-link,
  .devices-legend-link,
  .ai-agent-link {
    color: inherit;
    text-decoration: none;
  }
  .data-table-row-link {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-width: 0;
  }
  .stat-bar-link,
  .channel-link,
  .devices-legend-link {
    min-width: 0;
  }
  .ai-agent-link {
    display: inline-flex;
    align-items: center;
    min-width: 0;
  }


  .dt-row-clickable,
  .stat-bar-row.is-clickable,
  .devices-legend-row,
  .channel-row.is-clickable,
  .ai-agent.is-clickable {
    position: relative;
  }
  .data-table-row-link::after,
  .stat-bar-link::after,
  .channel-link::after,
  .devices-legend-link::after,
  .ai-agent-link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
  }
  .dt-row-clickable:focus-visible,
  .stat-bar-row.is-clickable:focus-visible,
  .devices-legend-row:focus-visible,
  .channel-row.is-clickable:focus-visible,
  .ai-agent.is-clickable:focus-visible {
    outline: 2px solid var(--ac);
    outline-offset: -2px;
  }
  .drilldown-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    background: rgba(0, 0, 0, 0.55);
  }
  .drilldown-modal {
    width: 100%;
    max-width: 560px;
    max-height: 80vh;
    background: var(--bg2);
    border: 1px solid var(--bd);
    border-radius: var(--r);
    box-shadow: var(--shadow-3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .drilldown-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-5) var(--space-4);
    border-bottom: 1px solid var(--bd);
  }
  .drilldown-title {
    margin: 0;
    font-family: var(--font-ui);
    font-size: var(--text-lg);
    font-weight: 500;
    color: var(--tx);
  }
  .drilldown-subtitle {
    margin: 2px 0 0;
    font-size: var(--text-sm);
    color: var(--tx2);
    word-break: break-word;
  }
  .drilldown-close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--tx2);
    cursor: pointer;
  }
  .drilldown-close:hover {
    background: var(--bg3);
    color: var(--tx);
  }
  .drilldown-body {
    padding: var(--space-4) var(--space-5) var(--space-5);
    overflow-y: auto;
  }

  /* Rapport complet Présence IA : la grille IA a besoin de largeur. */
  .drilldown-modal:has(.ai-report-modal-body) {
    max-width: 1080px;
    max-height: 90vh;
  }


  .ai-agent-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
  }
  .ai-agent {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 2.5rem 7rem;
    align-items: center;
    column-gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--bg3);
    border-radius: 6px;
    min-width: 0;
  }
  .ai-agent-icon {
    width: 32px;
    height: 32px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ac);
  }
  .ai-agent-icon .brand-icon,
  .ai-agent-icon .brand-icon-svg {
    object-fit: contain;
  }
  .ai-agent-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .ai-agent-name {
    font-size: var(--text-sm);
    color: var(--tx);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ai-agent-provider {
    font-size: var(--text-xs);
    color: var(--tx2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ai-agent-visits {
    grid-column: 3;
    justify-self: end;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--tx);
    font-variant-numeric: tabular-nums;
  }
  .purpose-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    font-size: 10px;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-radius: 4px;
    white-space: nowrap;
  }
  .ai-agent .purpose-badge {
    grid-column: 4;
    justify-self: start;
  }
  .purpose-training {
    background: var(--wr2);
    color: var(--wr);
  }
  .purpose-search {
    background: var(--ac2);
    color: var(--ac);
  }
  .purpose-assistant {
    background: var(--ac2);
    color: var(--ac);
  }
  .purpose-other {
    background: var(--bg3);
    color: var(--tx3);
  }
  .purpose-human {
    background: var(--ok2, var(--ac2));
    color: var(--ok, var(--ac));
  }


  .ai-block {
    margin-top: var(--space-3);
  }
  .ai-block:first-child {
    margin-top: 0;
  }
  .ai-block-heading {
    margin-bottom: var(--space-2);
  }
  .ai-block-title {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--tx);
  }
  .ai-block-subtitle {
    margin: 2px 0 0;
    font-size: var(--text-xs);
    color: var(--tx2);
    line-height: 1.4;
  }
  .ai-block-empty {
    margin: 0;
    padding: var(--space-3);
    text-align: center;
    font-size: var(--text-xs);
    color: var(--tx3);
    background: var(--bg3);
    border-radius: 6px;
    border: 1px dashed var(--bd);
  }


  .ai-agent--zero {
    background: transparent;
  }
  .ai-agent--zero .ai-agent-icon {
    opacity: 0.4;
    filter: grayscale(100%);
  }
  .ai-agent--zero .ai-agent-name,
  .ai-agent--zero .ai-agent-provider,
  .ai-agent--zero .ai-agent-visits {
    color: var(--tx3);
  }
  .ai-agent--zero .purpose-badge {
    opacity: 0.5;
  }


  .ai-coverage-footer {
    margin: var(--space-2) 0 0;
    font-size: var(--text-xs);
    color: var(--tx3);
    line-height: 1.4;
  }


  .data-table td.cell-ai-sources {
    white-space: nowrap;
  }
  .ai-source-badges {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  .ai-timeline-title {
    margin-top: var(--space-4);
    font-size: var(--text-xs);
    color: var(--tx2);
    text-transform: uppercase;
    letter-spacing: 0.4px;
  }
  .ai-timeline {
    position: relative;
    width: 100%;
    min-height: 160px;
    min-width: 0;
  }


  @container (max-width: 480px) {
    .ai-agent {
      grid-template-columns: 28px minmax(0, 1fr) auto;
      grid-template-areas:
        'icon text   visits'
        'icon badge  badge';
      column-gap: var(--space-2);
      row-gap: 3px;
    }
    .ai-agent-icon { grid-area: icon; align-self: start; }
    .ai-agent-link,
    .ai-agent-text { grid-area: text; }
    .ai-agent-visits { grid-area: visits; justify-self: end; }
    .ai-agent .purpose-badge {
      grid-area: badge;
      justify-self: start;
      font-size: var(--text-xs);
    }
  }


  .geo-tabs-wrap {
    margin-bottom: var(--space-2);
  }
  .geo-content-wrap {
    position: relative;
    width: 100%;
    min-height: 480px;
    min-width: 0;
  }


  .card.is-empty .geo-content-wrap,
  .geo-content-wrap:has(> .empty-placeholder),
  .geo-content-wrap:has(> .card-notice),
  .geo-content-wrap:has(> .precision-limited-banner) {
    min-height: 0;
  }
  .devices-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-4);
    align-items: center;
    min-width: 0;
  }
  @container (max-width: 480px) {
    .devices-card {
      grid-template-columns: 1fr;
    }
    .devices-donut {
      margin-inline: auto;
      max-width: 240px;
    }
  }

  .devices-donut {
    position: relative;
    min-width: 0;
  }
  .devices-legend {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
  }
  .devices-legend-row {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto auto;
    align-items: center;
    column-gap: var(--space-2);
    font-size: var(--text-sm);
    min-width: 0;
  }
  .devices-legend-icon {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .devices-legend-icon svg {
    width: 18px;
    height: 18px;
  }
  .devices-legend-label {
    color: var(--tx);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .devices-legend-percent {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--tx2);
    font-variant-numeric: tabular-nums;
  }
  .devices-legend-value {
    font-family: var(--font-mono);
    color: var(--tx);
    min-width: 50px;
    text-align: right;
    font-variant-numeric: tabular-nums;
  }


  .stat-bar-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
  }
  .stat-bar-row {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) minmax(60px, 140px) 60px 50px;
    align-items: center;
    column-gap: 8px;
    font-size: var(--text-sm);
    min-width: 0;
  }
  .stat-bar-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--tx2);
  }
  .stat-bar-label {
    color: var(--tx);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }


  .lang-code {
    display: inline-block;
    width: 2.5ch;
    margin-right: 0.75rem;
    font-family: var(--font-mono);
    color: var(--tx2);
  }
  .stat-bar-bar {
    position: relative;
    height: 6px;
    border-radius: 3px;
    background: var(--bg3);
    overflow: hidden;
  }
  .stat-bar-bar-inner {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    height: 100%;
    background: var(--ac3);
    border-radius: 3px;
    transition: width 0.2s ease;
  }
  .stat-bar-value {
    font-family: var(--font-mono);
    color: var(--tx);
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .stat-bar-value--masked {
    color: var(--tx2);
    cursor: help;
  }
  .stat-bar-percent {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--tx2);
    text-align: right;
    font-variant-numeric: tabular-nums;
  }


  @container (max-width: 360px) {
    .stat-bar-row {
      grid-template-columns: 20px minmax(0, 1fr) 60px 45px;
      column-gap: 6px;
    }
    .stat-bar-bar {
      display: none;
    }
  }


  .card-success-empty {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--ok2);
    border: 1px solid var(--ok);
    border-radius: 8px;
    color: var(--ok);
  }
  .card-success-icon {
    flex: 0 0 auto;
    color: var(--ok);
    display: inline-flex;
  }
  .card-success-msg {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--ok);
  }


  .compliance-status-banner {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-6);
    border-radius: var(--r);
    border: 1px solid var(--ok);
    background: var(--ok2);
    margin-bottom: var(--space-5);
    min-width: 0;
  }
  .compliance-status-banner.status-needs_attention {
    border-color: var(--wr);
    background: var(--wr2);
  }
  .compliance-status-banner.status-non_compliant {
    border-color: var(--dn);
    background: var(--dn2);
  }
  .compliance-status-icon {
    display: inline-flex;
    flex: 0 0 auto;
  }
  .compliance-status-icon.icon-compliant {
    color: var(--ok);
  }
  .compliance-status-icon.icon-needs_attention {
    color: var(--wr);
  }
  .compliance-status-icon.icon-non_compliant {
    color: var(--dn);
  }

  .compliance-status-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
  }
  .compliance-status-title {
    margin: 0;
    font-family: var(--font-ui);
    font-size: var(--text-fluid-banner);
    font-weight: 500;
    color: var(--tx);
    line-height: 1.2;
    overflow-wrap: anywhere;
  }
  .compliance-status-sub {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--tx2);
  }
  .compliance-status-attention {
    margin: var(--space-2) 0 0;
    padding-left: var(--space-5);
    font-size: var(--text-sm);
    color: var(--tx);
  }


  .compliance-referentials {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    margin-bottom: var(--space-5);
    padding: var(--space-3) var(--space-4);
    background: var(--bg3);
    border: 1px solid var(--bd);
    border-radius: 8px;
    min-width: 0;
  }
  .compliance-referentials-heading {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--tx3);
    font-weight: 500;
    flex: 0 0 auto;
  }
  .compliance-referentials-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    min-width: 0;
  }
  .compliance-referential-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--bg);
    border: 1px solid var(--bd);
    border-radius: 999px;
    font-size: var(--text-xs);
    line-height: 1.3;
    color: var(--tx);
    white-space: nowrap;
  }
  .compliance-referential-flag {
    font-size: 14px;
    line-height: 1;
  }
  .compliance-referential-label {
    font-weight: 500;
    color: var(--tx);
  }
  .compliance-referential-version {
    font-family: var(--font-mono);
    color: var(--tx3);
    font-size: 11px;
  }
  .compliance-referentials-note {
    margin: var(--space-2) 0 0;
    flex-basis: 100%;
    font-size: var(--text-xs);
    color: var(--tx2);
    line-height: 1.45;
  }

  .compliance-documents {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .compliance-documents-note {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--tx2);
    line-height: 1.45;
  }
  .compliance-download-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }
  @container (max-width: 480px) {
    .compliance-download-grid {
      grid-template-columns: 1fr;
    }
  }

  .compliance-download-btn {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--bg3);
    border: 1px solid var(--bd);
    border-radius: 8px;
    color: var(--tx);
    text-decoration: none;
    transition:
      border-color var(--t-fast),
      background var(--t-fast);
    min-width: 0;
  }
  .compliance-download-btn:hover {
    border-color: var(--ac);
    background: var(--ac2);
  }
  .compliance-download-btn:focus-visible {
    outline: 2px solid var(--ac);
    outline-offset: 2px;
  }
  .compliance-download-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ac);
  }
  .compliance-download-btn.txt .compliance-download-icon {
    color: var(--wr);
  }
  .compliance-download-label {
    font-size: var(--text-sm);
    color: var(--tx);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .compliance-download-size {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--tx3);
  }


  .retention-policy {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
  }
  .retention-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
  }
  .retention-table thead th {
    text-align: left;
    padding: var(--space-2) var(--space-3);
    color: var(--tx3);
    font-weight: 500;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--bd);
  }
  .retention-table tbody td {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--bd);
    color: var(--tx);
  }
  .retention-table tbody tr:last-child td {
    border-bottom: 0;
  }
  .retention-cell-duration {
    font-family: var(--font-mono);
    color: var(--tx);
    white-space: nowrap;
  }
  @container (max-width: 480px) {
    .retention-cell-duration {
      white-space: normal;
    }
    .retention-table thead th,
    .retention-table tbody td {
      padding: var(--space-2) var(--space-2);
    }
  }
  .retention-notice {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--tx2);
    font-style: italic;
  }
  .retention-extra {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--tx3);
  }


  .export-erase-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  .export-erase-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-4) var(--space-5);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--tx);
    background: var(--bg3);
    border: 1px solid var(--bd);
    border-radius: 8px;
    cursor: pointer;
    transition:
      border-color var(--t-fast),
      background var(--t-fast),
      color var(--t-fast);
    min-width: 0;
  }
  .export-erase-btn:hover:not(:disabled) {
    border-color: var(--ac);
    background: var(--ac2);
  }
  .export-erase-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .export-erase-btn-warning {
    color: var(--wr);
    border-color: var(--wr);
    background: transparent;
  }
  .export-erase-btn-warning:hover:not(:disabled) {
    background: var(--wr2);
    border-color: var(--wr);
  }
  .export-erase-btn-danger {
    color: var(--dn);
    border-color: var(--dn);
    background: transparent;
  }
  .export-erase-btn-danger:hover:not(:disabled) {
    background: var(--dn2);
    border-color: var(--dn);
  }
  .export-erase-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
  }
  .export-erase-status {
    font-size: var(--text-xs);
    color: var(--tx3);
  }


  .confirm-dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    background: rgba(0, 0, 0, 0.55);
  }
  .confirm-dialog {
    width: 100%;
    max-width: 520px;
    padding: var(--space-6);
    background: var(--bg2);
    border: 1px solid var(--bd);
    border-radius: var(--r);
    box-shadow: var(--shadow-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }
  .confirm-dialog-warning {
    border-color: var(--wr);
  }
  .confirm-dialog-danger {
    border-color: var(--dn);
  }
  .confirm-dialog-title {
    margin: 0;
    font-family: var(--font-ui);
    font-size: var(--text-lg);
    font-weight: 500;
    color: var(--tx);
  }
  .confirm-dialog-desc {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--tx2);
    line-height: 1.5;
  }
  .confirm-dialog-checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--bg3);
    border-radius: 6px;
    font-size: var(--text-sm);
    color: var(--tx);
    cursor: pointer;
  }
  .confirm-dialog-checkbox input[type='checkbox'] {
    margin-top: 2px;
    accent-color: var(--dn);
  }
  .confirm-dialog-type {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: var(--text-sm);
    color: var(--tx);
  }
  .confirm-dialog-type-label {
    color: var(--tx2);
  }
  .confirm-dialog-type-input {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    padding: var(--space-2) var(--space-3);
    background: var(--bg3);
    color: var(--tx);
    border: 1px solid var(--bd);
    border-radius: 6px;
    outline: none;
    min-width: 0;
  }
  .confirm-dialog-type-input:focus {
    border-color: var(--dn);
  }
  .confirm-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    flex-wrap: wrap;
  }
  .confirm-dialog-btn {
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    padding: var(--space-2) var(--space-4);
    border-radius: 6px;
    cursor: pointer;
    transition:
      border-color var(--t-fast),
      background var(--t-fast),
      color var(--t-fast);
    border: 1px solid var(--bd);
    background: transparent;
    color: var(--tx);
  }
  .confirm-dialog-btn-cancel:hover {
    border-color: var(--tx2);
  }
  .confirm-dialog-btn-confirm.confirm-dialog-btn-normal {
    color: var(--ac);
    border-color: var(--ac);
  }
  .confirm-dialog-btn-confirm.confirm-dialog-btn-normal:hover:not(:disabled) {
    background: var(--ac2);
  }
  .confirm-dialog-btn-confirm.confirm-dialog-btn-warning {
    color: var(--wr);
    border-color: var(--wr);
  }
  .confirm-dialog-btn-confirm.confirm-dialog-btn-warning:hover:not(:disabled) {
    background: var(--wr2);
  }
  .confirm-dialog-btn-confirm.confirm-dialog-btn-danger {
    color: var(--dn);
    border-color: var(--dn);
  }
  .confirm-dialog-btn-confirm.confirm-dialog-btn-danger:hover:not(:disabled) {
    background: var(--dn2);
  }
  .confirm-dialog-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }


  .site-new-dialog-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: var(--space-3) 0 0;
  }
  .site-new-dialog-field > span {
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--tx2);
  }
  .site-new-dialog-input {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--tx);
    background: var(--bg2);
    border: 1px solid var(--bd);
    border-radius: var(--r);
    padding: var(--space-2) var(--space-3);
    outline: none;
    min-width: 0;
  }
  .site-new-dialog-input:focus {
    border-color: var(--ac);
  }
  .site-new-dialog-error {
    min-height: 1.25em;
    margin: var(--space-2) 0 0;
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--dn);
  }


  .toast-wrap {
    position: fixed;
    bottom: var(--space-6);
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    pointer-events: none;
    max-width: calc(100vw - 2 * var(--space-4));
  }
  .toast {
    pointer-events: auto;
    padding: var(--space-3) var(--space-4);
    background: var(--bg2);
    border: 1px solid var(--bd);
    border-radius: 8px;
    font-size: var(--text-sm);
    color: var(--tx);
    box-shadow: var(--shadow-3);
    cursor: pointer;
    max-width: 480px;
    animation: toast-enter 180ms ease-out;
  }
  .toast-success {
    border-color: var(--ok);
  }
  .toast-warning {
    border-color: var(--wr);
  }
  .toast-danger {
    border-color: var(--dn);
  }
  .toast-leave {
    opacity: 0;
    transition: opacity 200ms ease;
  }
  @keyframes toast-enter {
    from {
      transform: translateY(8px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }


  .dpo-contact {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
    min-width: 0;
  }
  @container (max-width: 720px) {
    .dpo-contact {
      grid-template-columns: 1fr;
      gap: var(--space-4);
    }
  }
  .dpo-contact-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
  }
  .dpo-contact-section-label {
    font-size: var(--text-xs);
    color: var(--tx3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .dpo-contact-email {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--text-lg);
    color: var(--ac);
    text-decoration: none;
    word-break: break-all;
  }
  .dpo-contact-email:hover {
    text-decoration: underline;
  }
  .dpo-contact-address {
    font-style: normal;
    color: var(--tx2);
    font-size: var(--text-sm);
    line-height: 1.6;
  }
  .dpo-contact-delay {
    margin: 0;
    color: var(--tx2);
    font-size: var(--text-sm);
  }

  .install-code-block {
    position: relative;
    background: var(--bg);
    border: 1px solid var(--bd);
    border-radius: var(--r);
    padding: var(--space-3);
    margin: 0;
    min-width: 0;
  }
  .install-code {
    margin: 0;
    padding: 0;
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: 1.5;
    color: var(--tx);
    white-space: pre;
    -webkit-overflow-scrolling: touch;
  }
  .install-code code {
    background: transparent;
    padding: 0;
    border: 0;
  }

  .install-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    padding: 6px 10px;
    font-size: var(--text-xs);
    background: var(--bg2);
    color: var(--tx);
    border: 1px solid var(--bd);
    border-radius: var(--r);
    cursor: pointer;
    transition:
      background var(--t-fast),
      color var(--t-fast);
  }
  .install-copy-btn:hover {
    background: var(--bg3);
  }
  .install-copy-btn.is-copied {
    background: var(--ok);
    color: #fff;
    border-color: var(--ok);
  }
  .install-copy-btn-sm {
    padding: 4px 6px;
  }


  .install-snippet-instructions,
  .install-snippet-empty {
    margin: 0 0 var(--space-3);
    font-size: var(--text-sm);
    color: var(--tx2);
    line-height: 1.5;
  }


  .install-snippet-adblock-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--space-3);
    padding: 6px 10px;
    font-size: var(--text-xs);
    color: var(--tx2);
    text-decoration: none;
    background: var(--bg2);
    border: 1px solid var(--bd);
    border-radius: var(--r);
    transition:
      color 0.15s ease,
      border-color 0.15s ease,
      background 0.15s ease;
  }
  .install-snippet-adblock-link:hover {
    color: var(--ac);
    border-color: var(--ac);
    background: var(--bg3);
  }
  .install-snippet-adblock-link-icon {
    display: inline-flex;
    color: var(--ac);
  }


  .install-snippet-test-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-3);
  }
  .install-test-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 12px;
    font-size: var(--text-xs);
    background: var(--bg2);
    color: var(--tx);
    border: 1px solid var(--bd);
    border-radius: var(--r);
    cursor: pointer;
    transition: background var(--t-fast);
  }
  .install-test-btn:hover:not(:disabled) {
    background: var(--bg3);
  }
  .install-test-btn:disabled {
    opacity: 0.6;
    cursor: progress;
  }
  .install-test-result {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--tx2);
    line-height: 1.4;
  }
  .install-test-result-text {
    color: var(--tx);
  }


  .install-optout-section {
    margin: 0 0 var(--space-4);
    padding: var(--space-3);
    border-radius: 6px;
    background: var(--bg3);
    border-left: 3px solid var(--bg2);
  }
  .install-optout-section:last-child {
    margin-bottom: 0;
  }
  .install-optout-section-why {
    border-left-color: var(--ac);
  }
  .install-optout-section-how {
    border-left-color: var(--tx);
    background: transparent;
    padding: 0;
  }
  .install-optout-section-constraints {
    border-left-color: var(--wr);
    background: var(--wr2);
  }
  .install-optout-section-advantages {
    border-left-color: var(--ok);
    background: var(--ok2);
  }
  .install-optout-section-title {
    margin: 0 0 var(--space-2);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--tx);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .install-optout-section-body {
    margin: 0 0 var(--space-2);
    font-size: var(--text-sm);
    color: var(--tx2);
    line-height: 1.5;
  }
  .install-optout-bullets {
    margin: 0;
    padding: 0 0 0 var(--space-4);
    font-size: var(--text-sm);
    color: var(--tx2);
    line-height: 1.6;
  }
  .install-optout-bullets li {
    margin: var(--space-1) 0;
  }
  .install-optout-where-label {
    margin: var(--space-3) 0 var(--space-1);
    font-size: var(--text-sm);
    color: var(--tx);
    font-weight: 500;
  }

  .install-bookmarklet-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-2) 0 var(--space-3);
  }
  .install-bookmarklet {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1;
    color: #fff;
    background: rgb(var(--accent-rgb));
    border: 1px solid rgb(var(--accent-rgb));
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
    cursor: grab;
    user-select: none;
    box-shadow: 0 2px 6px rgba(var(--accent-rgb), 0.35);
    transition:
      transform var(--t-fast),
      box-shadow var(--t-fast);
  }
  .install-bookmarklet:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(var(--accent-rgb), 0.45);
  }
  .install-bookmarklet:active {
    cursor: grabbing;
    transform: translateY(0);
  }
  .install-bookmarklet-grip {
    flex: none;
    opacity: 0.7;
  }

  .install-danger-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
  }
  .install-danger-info {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: var(--space-3);
    row-gap: var(--space-1);
    padding: var(--space-3);
    background: var(--bg3);
    border-radius: 6px;
    font-size: var(--text-sm);
    min-width: 0;
  }
  .install-danger-row {
    display: contents;
  }
  .install-danger-key {
    color: var(--tx2);
  }
  .install-danger-value {
    color: var(--tx);
    font-family: var(--font-mono);
    word-break: break-all;
    min-width: 0;
  }
  .install-danger-responsibility {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--tx2);
    line-height: 1.5;
  }
  .install-danger-export-hint {
    margin: var(--space-2) 0 0;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    color: var(--tx);
    line-height: 1.5;
    background: var(--wr2);
    border-left: 3px solid var(--wr);
    border-radius: var(--radius-sm);
  }
  .install-danger-actions {
    margin-top: var(--space-2);
  }


  .install-status-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
  }
  .install-status-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .install-status-dot.status-ok {
    background: var(--ok);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ok) 25%, transparent);
  }
  .install-status-dot.status-partial {
    background: var(--wr);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--wr) 25%, transparent);
  }
  .install-status-dot.status-no_data {
    background: var(--dn);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--dn) 25%, transparent);
  }
  .install-status-label {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--tx);
  }
  .install-check-metrics {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: var(--space-2);
    column-gap: var(--space-3);
    margin: 0 0 var(--space-3);
    font-size: var(--text-sm);
  }
  .install-check-metrics dt {
    color: var(--tx2);
    margin: 0;
  }
  .install-check-metrics dd {
    margin: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--tx);
    font-weight: 500;
  }
  .install-check-hint {
    margin: 0 0 var(--space-3);
    padding: var(--space-3);
    font-size: var(--text-xs);
    line-height: 1.5;
    color: var(--tx2);
    background: var(--bg);
    border: 1px solid var(--bd);
    border-radius: var(--r);
  }
  .install-check-hint.hint-ok {
    border-left: 3px solid var(--ok);
  }
  .install-check-hint.hint-partial {
    border-left: 3px solid var(--wr);
  }
  .install-check-hint.hint-no_data {
    border-left: 3px solid var(--dn);
  }
  .install-check-refresh {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 12px;
    font-size: var(--text-xs);
    background: var(--bg2);
    color: var(--tx);
    border: 1px solid var(--bd);
    border-radius: var(--r);
    cursor: pointer;
    transition: background var(--t-fast);
  }
  .install-check-refresh:hover {
    background: var(--bg3);
  }


  .install-trouble-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
  }
  .install-trouble-item {
    border: 1px solid var(--bd);
    border-radius: var(--r);
    background: var(--bg);
    min-width: 0;
  }
  .install-trouble-symptom {
    padding: var(--space-3);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--tx);
    cursor: pointer;
    list-style: none;
  }
  .install-trouble-symptom::-webkit-details-marker {
    display: none;
  }
  .install-trouble-symptom::before {
    content: '+';
    display: inline-block;
    width: 1em;
    font-weight: 600;
    color: var(--tx2);
  }
  .install-trouble-item[open] .install-trouble-symptom::before {
    content: '−';
  }
  .install-trouble-fix {
    margin: 0;
    padding: 0 var(--space-3) var(--space-3) calc(var(--space-3) + 1em);
    font-size: var(--text-xs);
    color: var(--tx2);
    line-height: 1.6;
  }
  .install-trouble-contact {
    margin: var(--space-4) 0 0;
    font-size: var(--text-xs);
    color: var(--tx2);
    text-align: center;
    font-style: italic;
  }


  .platforms-list-intro,
  .platforms-panel-intro {
    margin: 0 0 var(--space-3);
    font-size: var(--text-sm);
    color: var(--tx2);
    line-height: 1.5;
  }
  .platforms-tabs-host {
    margin-bottom: var(--space-3);
  }
  .platforms-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
  }
  .platforms-steps {
    margin: 0;
    padding-left: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: var(--text-sm);
    color: var(--tx);
    line-height: 1.5;
  }
  .platforms-step {
    padding-left: var(--space-1);
  }
  .platforms-snippet {
    margin-top: var(--space-2);
  }
  .platforms-panel-note {
    margin: var(--space-2) 0 0;
    padding: var(--space-2) var(--space-3);
    background: var(--bg2);
    border-left: 3px solid var(--dn);
    border-radius: 4px;
    font-size: var(--text-xs);
    color: var(--tx2);
    line-height: 1.5;
  }

  .wp-plugin-intro {
    margin: 0 0 var(--space-3);
    font-size: var(--text-sm);
    color: var(--tx);
    line-height: 1.5;
  }
  .wp-plugin-features {
    margin: 0 0 var(--space-3);
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }
  .wp-plugin-features li {
    padding-left: var(--space-4);
    position: relative;
    font-size: var(--text-sm);
    color: var(--tx2);
    line-height: 1.4;
  }
  .wp-plugin-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--ok);
    font-weight: bold;
  }
  .wp-plugin-download {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--dn);
    color: #fff;
    border-radius: var(--r);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: 500;
    transition: opacity var(--t-fast);
  }
  .wp-plugin-download:hover {
    opacity: 0.9;
  }
  .wp-plugin-download:focus-visible {
    outline: 2px solid var(--dn);
    outline-offset: 2px;
  }
  .wp-plugin-steps-title {
    margin: var(--space-3) 0 var(--space-2);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--tx);
  }
  .wp-plugin-steps {
    margin: 0;
    padding-left: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: var(--text-sm);
    color: var(--tx2);
    line-height: 1.5;
  }


  .adblock-why-title,
  .adblock-how-title,
  .adblock-steps-title {
    margin: var(--space-3) 0 var(--space-1);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--tx);
  }
  .adblock-why-title:first-child {
    margin-top: 0;
  }
  .adblock-why-body,
  .adblock-how-body {
    margin: 0 0 var(--space-2);
    font-size: var(--text-sm);
    color: var(--tx2);
    line-height: 1.5;
  }
  .adblock-steps {
    margin: 0;
    padding-left: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: var(--text-sm);
    color: var(--tx2);
    line-height: 1.5;
  }
  .adblock-activation {
    margin-top: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--bg2);
    border-radius: var(--r);
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    color: var(--dn);
  }
  .adblock-activation-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: var(--text-xs);
    color: var(--tx);
    line-height: 1.5;
    min-width: 0;
  }
  .adblock-activation-body strong {
    color: var(--tx);
    font-weight: 600;
  }


  .crawler-capture-title,
  .crawler-capture-platforms-title {
    margin: var(--space-3) 0 var(--space-1);
    font-size: var(--text-sm);
    color: var(--tx);
  }
  .crawler-capture-body {
    margin: 0;
    font-size: var(--text-xs);
    line-height: 1.5;
    color: var(--tx2);
  }
  .crawler-capture-auto {
    margin-top: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--bg2);
    border-radius: var(--r);
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    color: var(--ac);
  }
  .crawler-capture-auto-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: var(--text-xs);
    color: var(--tx);
    line-height: 1.5;
    min-width: 0;
  }
  .crawler-capture-auto-body strong {
    color: var(--tx);
    font-weight: 600;
  }
  .crawler-capture-platforms {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .crawler-capture-platforms li {
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-size: var(--text-xs);
    line-height: 1.45;
  }
  .crawler-capture-platforms li strong {
    color: var(--tx);
    font-weight: 600;
  }
  .crawler-capture-platforms li span {
    color: var(--tx2);
  }
  .crawler-capture-hosted {
    margin: var(--space-3) 0 0;
    font-size: var(--text-xs);
    line-height: 1.5;
    color: var(--tx3);
    font-style: italic;
  }


  .adblock-doc-cta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-3);
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.1), rgba(var(--accent-rgb), 0.04));
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    border-radius: var(--r);
    text-decoration: none;
    color: inherit;
    transition:
      border-color 0.15s ease,
      transform 0.15s ease;
  }
  .adblock-doc-cta:hover {
    border-color: rgba(var(--accent-rgb), 0.55);
    transform: translateY(-1px);
  }
  .adblock-doc-cta-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(var(--accent-rgb), 0.15);
    color: var(--ac);
  }
  .adblock-doc-cta-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .adblock-doc-cta-text strong {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--tx);
  }
  .adblock-doc-cta-text span {
    font-size: var(--text-xs);
    color: var(--tx2);
    line-height: 1.4;
  }
  .adblock-doc-cta-arrow {
    flex-shrink: 0;
    font-size: 18px;
    color: var(--ac);
    font-weight: 600;
  }

  @media (max-width: 767.98px) {

    [class*='col-'] {
      grid-column: span 1;
    }

    .tooltip-popover {
      max-width: calc(100vw - 24px);
    }

    .behavior-selector-wrap {
      position: sticky;
      top: 0;
      z-index: 5;
    }


    .multi-tab-card-body > .behavior-selector-wrap {
      position: static;
    }

    .data-table {
      font-size: var(--text-xs);
    }
    .data-table thead th,
    .data-table tbody td {
      padding: var(--space-1) var(--space-2);
    }

    .geo-content-wrap {
      min-height: 320px;
    }
    .card {
      padding: var(--space-4);
    }

    .compliance-status-banner {
      flex-direction: column;
      text-align: center;
      align-items: center;
      gap: var(--space-3);
      padding: var(--space-4);
    }
    .compliance-status-icon svg {
      width: 56px;
      height: 56px;
    }
    .compliance-status-text {
      align-items: center;
      width: 100%;
    }
    .compliance-status-attention {
      padding-left: 0;
      list-style-position: inside;
      text-align: left;
    }


    .compliance-referentials {
      padding: var(--space-3);
      gap: var(--space-2);
    }
    .compliance-referentials-list {
      flex-basis: 100%;
      min-width: 0;


      display: grid;
      grid-template-columns: 1fr;
      gap: 6px;
    }
    .compliance-referential-chip {

      display: grid;
      grid-template-columns: 24px minmax(0, 1fr);
      grid-template-rows: auto auto;
      align-items: center;
      column-gap: var(--space-3);
      row-gap: 0;
      padding: var(--space-2) var(--space-3);
      border-radius: var(--radius-sm);
      width: 100%;
      min-width: 0;

      white-space: normal;
      line-height: 1.4;
    }
    .compliance-referential-flag {
      grid-row: 1 / span 2;
      align-self: center;
      font-size: 18px;
    }
    .compliance-referential-label {
      grid-column: 2;
      grid-row: 1;
      font-size: var(--text-xs);
      font-weight: 600;
      color: var(--tx);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .compliance-referential-version {
      grid-column: 2;
      grid-row: 2;
      font-size: 10.5px;
      color: var(--tx2);


      overflow-wrap: anywhere;
    }
    .compliance-referentials-note {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      overflow-wrap: anywhere;
    }


    .dpo-contact-email {
      font-size: var(--text-md);
    }
    .dpo-contact-section-label {
      font-size: 10px;
    }

    .compliance-download-btn {
      padding: var(--space-3);
    }
    .compliance-download-label {
      font-size: var(--text-sm);
    }

    .confirm-dialog {
      padding: var(--space-4);
    }


    .card,
    .card-body,
    .card-h {
      max-width: 100%;
      min-width: 0;
      overflow-x: clip;
    }
    .card .data-table-scroll,
    .card .multi-tab-bar,
    .card .install-code {
      overflow-x: auto;
    }


    .data-table .cell-text {
      max-width: min(220px, 55vw);
    }


    .cell-host,
    .cell-path,
    .dpo-contact-email,
    .install-snippet-code,
    .compliance-download-label {
      overflow-wrap: anywhere;
      word-break: break-word;
    }


    .dashboard-section-title {
      font-size: 15px;
      overflow-wrap: anywhere;
    }


    .dashboard-toc nav {
      padding: var(--space-2) var(--space-3);
      gap: 2px;
    }
    .dashboard-toc-link {
      padding: 4px 8px;
      font-size: 12px;
    }


    .multi-tab-host {
      padding: var(--space-3) var(--space-2) var(--space-4);
    }
    .multi-tab-bar {
      padding: 0 var(--space-2);
    }
    .multi-tab-btn {
      padding: 6px 10px;
      font-size: 12px;
    }

  }


  @media (max-width: 375px) {
    .card {
      padding: var(--space-3);
    }
    .dashboard-section-title {
      font-size: 14px;
    }
    .data-table .cell-text {
      max-width: 45vw;
    }
    .multi-tab-btn {
      padding: 6px 8px;
      font-size: 11.5px;
    }
  }


  .login-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .login-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: var(--text-sm);
    color: var(--tx2);
  }

  .login-field input[type='text'],
  .login-field input[type='email'],
  .login-field input[type='password'],
  .login-field input[type='number'] {
    font-family: var(--font-ui);
    font-size: var(--text-base);
    color: var(--tx);
    background: var(--bg);
    border: 1px solid var(--bd);
    border-radius: var(--r);
    padding: var(--space-3);
    outline: none;
    transition:
      border-color var(--t-fast),
      box-shadow var(--t-fast);
  }
  .login-field input[type='text']:focus,
  .login-field input[type='email']:focus,
  .login-field input[type='password']:focus,
  .login-field input[type='number']:focus {
    border-color: var(--ac);
    box-shadow: 0 0 0 3px var(--ac2);
  }


  .login-field input.is-error,
  .login-field input.is-error:focus,
  .login-checkbox.is-error {
    border-color: var(--dn);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
  }
  .login-checkbox.is-error {


    color: var(--dn);
    box-shadow: none;
  }


  .login-field-radios {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
  }
  .login-field-radios label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    cursor: pointer;
    color: var(--tx);
  }

  .login-error {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--dn);
  }

  .login-submit {
    margin-top: var(--space-2);
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-ui);
    font-size: var(--text-base);
    font-weight: 500;
    color: #ffffff;
    background: var(--ac);
    border: 0;
    border-radius: var(--r);
    cursor: pointer;
    transition: filter var(--t-fast);
  }
  .light .login-submit {
    color: #ffffff;
  }
  .login-submit:hover:not(:disabled) {
    filter: brightness(1.08);
  }
  .login-submit:disabled {
    opacity: 0.6;
    cursor: default;
  }


  .login-secondary {
    margin-top: var(--space-2);
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-ui);
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--tx);
    background: transparent;
    border: 1px solid var(--bd);
    border-radius: var(--r);
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    transition:
      border-color var(--t-fast),
      background var(--t-fast);
  }
  .login-secondary:hover {
    border-color: var(--ac);
    background: var(--ac2);
  }


  .login-checkbox {
    display: flex;
    gap: var(--space-2);
    align-items: flex-start;
    font-size: var(--text-sm);
    color: var(--tx2);
    cursor: pointer;
    line-height: 1.5;
  }
  .login-checkbox input[type='checkbox'] {
    margin-top: 2px;
    flex-shrink: 0;
    cursor: pointer;
  }


  .dpa-signature-resign {
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--bd);
    border-radius: var(--r);
    background: var(--bg);
  }
  .dpa-signature-resign > summary {
    cursor: pointer;
    font-size: var(--text-sm);
    color: var(--tx2);
    padding: var(--space-1) 0;
    list-style: none;
    position: relative;
    padding-left: var(--space-5);
  }
  .dpa-signature-resign > summary::-webkit-details-marker {
    display: none;
  }
  .dpa-signature-resign > summary::before {
    content: '▸';
    position: absolute;
    left: 0;
    transition: transform var(--t-fast);
  }
  .dpa-signature-resign[open] > summary::before {
    transform: rotate(90deg);
  }
  .dpa-signature-resign[open] > summary {
    color: var(--tx);
  }
  .dpa-signature-resign > .login-form {
    margin-top: var(--space-3);
  }


  .dpa-ccpa-option {
    margin-bottom: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--bd);
    border-radius: var(--r);
    background: var(--bg);
  }
  .dpa-ccpa-help {
    display: block;
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--tx2);
  }
  .dpa-ccpa-help a {
    color: var(--ac);
    white-space: nowrap;
  }
  .dpa-ccpa-note {
    margin: var(--space-2) 0 0;
    font-size: var(--text-sm);
    color: var(--tx2);
    font-style: italic;
  }


  .multi-tab-card-body {
    padding: 0;
  }


  .card:has(> .card-body.multi-tab-card-body) {
    min-height: 0;
  }
  .card:has(> .card-body.multi-tab-card-body) .card-h {
    margin-bottom: 0;
    align-items: end;
  }
  .card:has(> .card-body.multi-tab-card-body) .card-title {
    line-height: 1;
  }
  .card:has(> .card-body.multi-tab-card-body) .multi-tab-btn {
    line-height: 1;
    padding-top: 4px;
  }
  .multi-tab-bar {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding: 0 var(--space-4);
    border-bottom: 1px solid var(--bd);
    scrollbar-width: thin;
  }


  @media (hover: none) {
    /* Cible tactile confortable (~44px) pour l'unique bouton « Afficher tout /
       Réduire » de la page, sans alourdir le rendu desktop. */
    .list-expand {
      min-height: 44px;
      padding: var(--space-2) var(--space-4);
    }
    .multi-tab-bar {
      scrollbar-color: var(--bd2) transparent;
    }
    .multi-tab-bar::-webkit-scrollbar {
      height: 4px;
      -webkit-appearance: none;
      display: block;
    }
    .multi-tab-bar::-webkit-scrollbar-track {
      background: transparent;
    }
    .multi-tab-bar::-webkit-scrollbar-thumb {
      background-color: var(--bd2);
      border-radius: 2px;
    }
  }
  .multi-tab-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    border: 0;
    background: transparent;
    color: var(--tx2);
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 6px 6px 0 0;
    border-bottom: 2px solid transparent;
    text-decoration: none;
    white-space: nowrap;
    transition:
      color var(--t-fast),
      border-color var(--t-fast),
      background var(--t-fast);
  }
  .multi-tab-btn:hover {
    color: var(--tx);
    background: var(--bg2);
  }
  .multi-tab-btn.is-active {
    color: var(--ac);
    border-bottom-color: var(--ac);
  }
  .multi-tab-btn:focus-visible {
    outline: 2px solid var(--ac);
    outline-offset: -2px;
  }
  .multi-tab-host {
    padding: var(--space-3) var(--space-4) var(--space-4);
  }


  .multi-tab-host > .card {
    border: 0;
    background: transparent;
    margin: 0;
    padding: 0;
    box-shadow: none;
  }
  .multi-tab-host > .card > .card-h {
    padding: 0 0 var(--space-2);
    border-bottom: 0;
  }
  .multi-tab-host > .card > .card-h .card-title {
    display: none;
  }
  .multi-tab-host > .card > .card-body {
    padding: 0;
  }


  .multi-tab-host .card-skeleton {
    display: none;
  }


  .dashboard-section-fullwidth {
    width: 100%;
    margin-bottom: var(--space-4);
  }
  .dashboard-section-fullwidth > .card {
    width: 100%;
  }


  .dashboard-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px;
    gap: var(--space-5);
    align-items: start;
  }
  .dashboard-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }
  .dashboard-section {
    scroll-margin-top: 80px;
    min-width: 0;
  }
  .dashboard-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 var(--space-3);
    min-width: 0;
  }
  .dashboard-section-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--tx);
    margin: 0;
    letter-spacing: 0;
    flex: 0 0 auto;
  }
  .dashboard-active-filters {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
  }
  .dashboard-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 220px;
    min-height: 28px;
    padding: 4px 8px;
    border: 1px solid var(--bd);
    border-radius: 999px;
    background: var(--bg2);
    color: var(--tx);
    font: inherit;
    font-size: var(--text-xs);
    cursor: pointer;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dashboard-filter-chip:hover {
    border-color: var(--ac);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .dashboard-filter-chip:disabled {
    cursor: default;
    color: var(--tx2);
  }
  .dashboard-filter-x {
    color: var(--tx2);
    font-size: 14px;
    line-height: 1;
  }
  .dashboard-filter-arrow {
    color: var(--tx3);
    font-size: 14px;
    flex: 0 0 auto;
  }
  .dashboard-filter-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border: 1px solid var(--bd);
    border-radius: 50%;
    background: var(--bg2);
    color: var(--tx2);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
  }
  .dashboard-filter-clear:hover {
    color: var(--dn);
    border-color: var(--dn);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .dashboard-toc {
    position: sticky;
    top: var(--space-4);
    align-self: start;


    min-width: 0;
  }
  .dashboard-toc nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--space-3);
    background: var(--bg2);
    border: 1px solid var(--bd);
    border-radius: 8px;
    font-size: 13px;
  }
  .dashboard-toc-link {
    color: var(--tx2);
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 4px;
    border-left: 2px solid transparent;
    transition:
      color var(--t-fast),
      background var(--t-fast),
      border-color var(--t-fast);
  }
  .dashboard-toc-link:hover {
    color: var(--tx);
    background: var(--bg);
  }
  .dashboard-toc-link.is-active {
    color: var(--ac);
    border-left-color: var(--ac);
    background: var(--bg);
  }
  @media (max-width: 1024px) {
    .dashboard-layout {


      grid-template-columns: minmax(0, 1fr);
    }
    .dashboard-toc {
      position: relative;
      top: 0;
      order: -1;


      max-width: 100%;
    }
    .dashboard-toc nav {
      flex-direction: row;
      overflow-x: auto;
      scrollbar-width: thin;
    }
    .dashboard-toc-link {
      border-left: 0;
      border-bottom: 2px solid transparent;
      white-space: nowrap;
    }
    .dashboard-toc-link.is-active {
      border-left: 0;
      border-bottom-color: var(--ac);
    }
  }


  .click-heatmap-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .click-heatmap-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: var(--bg2);
    border: 1px solid var(--bd);
    border-radius: 8px;
    overflow: hidden;
  }

  .click-heatmap-wireframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }
  .click-heatmap-wireframe-band {
    fill: var(--bg3);
    fill-opacity: 0.55;
    stroke: var(--bd);
    stroke-width: 0.15;
    stroke-dasharray: 0.6 0.4;
  }

  .click-heatmap-zone-labels {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .click-heatmap-zone-label {
    position: absolute;
    right: 8px;
    transform: translateY(-50%);
    font-size: 9px;
    font-family: var(--font-mono);
    color: var(--tx3);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.55;
  }

  .click-heatmap-grid {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(10, 1fr);
    gap: 2px;
    padding: 4px;
  }
  .click-heatmap-cell {
    border-radius: 3px;
    transition: transform 80ms var(--ease);
  }
  .click-heatmap-cell-empty {
    background: transparent;
  }
  .click-heatmap-cell-masked {
    background: repeating-linear-gradient(
      45deg,
      rgba(139, 145, 154, 0.22),
      rgba(139, 145, 154, 0.22) 3px,
      transparent 3px,
      transparent 6px
    );
  }
  .click-heatmap-cell-value:hover,
  .click-heatmap-cell-masked:hover {
    transform: scale(1.08);
    cursor: crosshair;
  }

  .click-heatmap-axis {
    position: absolute;
    font-size: 9px;
    font-family: var(--font-mono);
    color: var(--tx3);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    pointer-events: none;
    background: var(--bg2);
    padding: 1px 5px;
    border-radius: 2px;
    border: 1px solid var(--bd);
    line-height: 1.4;
  }
  .click-heatmap-axis-top {
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
  }
  .click-heatmap-axis-bottom {
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
  }
  .click-heatmap-axis-left {
    top: 50%;
    left: 4px;
    writing-mode: vertical-rl;
    transform: translateY(-50%) rotate(180deg);
  }
  .click-heatmap-axis-right {
    top: 50%;
    right: 4px;
    writing-mode: vertical-rl;
    transform: translateY(-50%);
  }

  .click-heatmap-legend {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--tx3);
    flex-wrap: wrap;
  }
  .click-heatmap-legend-label {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 10px;
    color: var(--tx3);
  }
  .click-heatmap-legend-min,
  .click-heatmap-legend-max {
    font-family: var(--font-mono);
    color: var(--tx2);
    font-variant-numeric: tabular-nums;
  }
  .click-heatmap-legend-bar {
    flex: 1 1 120px;
    height: 10px;
    border-radius: 5px;
    max-width: 220px;
    border: 1px solid var(--bd);
    background: linear-gradient(
      to right,
      rgba(var(--accent-rgb), 0.22) 0%,
      rgba(244, 189, 61, 0.6) 50%,
      rgba(216, 75, 34, 0.95) 100%
    );
  }
  .click-heatmap-legend-masked {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
  }
  .click-heatmap-legend-masked::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 10px;
    border-radius: 2px;
    border: 1px solid var(--bd);
    background: repeating-linear-gradient(
      45deg,
      rgba(139, 145, 154, 0.22),
      rgba(139, 145, 154, 0.22) 3px,
      transparent 3px,
      transparent 6px
    );
  }

  .click-heatmap-tooltip {
    position: absolute;
    z-index: 100;
    min-width: 140px;
    max-width: 240px;
    padding: 8px 10px;
    background: var(--bg2);
    border: 1px solid var(--bd);
    border-radius: 8px;
    box-shadow: var(--shadow-3);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--tx);
    pointer-events: none;
    animation: cht-tip-in 100ms var(--ease);
  }
  @keyframes cht-tip-in {
    from {
      opacity: 0;
      transform: translateY(-2px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .click-heatmap-tooltip .cht-tip-pos {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tx3);
    margin-bottom: 2px;
    font-family: var(--font-mono);
  }
  .click-heatmap-tooltip .cht-tip-val {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .click-heatmap-tooltip .cht-tip-val-masked {
    color: var(--tx2);
    font-weight: 500;
    font-style: italic;
  }
  .click-heatmap-tooltip .cht-tip-val-empty {
    color: var(--tx3);
    font-weight: 500;
  }

  @media (max-width: 640px) {
    .click-heatmap-axis-left,
    .click-heatmap-axis-right {
      display: none;
    }
    .click-heatmap-zone-label {
      font-size: 8px;
    }
    .click-heatmap-legend-masked {
      margin-left: 0;
    }
  }
}

@layer components {
  .segments-card {
    display: grid;
    gap: 12px;
  }

  .segments-active-line,
  .segments-shared-note {
    color: var(--tx2);
    font-size: 13px;
  }

  .segments-active-line strong {
    color: var(--tx);
    font-weight: 600;
  }

  .segments-row,
  .segments-form,
  .segments-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
  }

  .segments-select,
  .segments-input {
    min-height: 34px;
    border: 1px solid var(--bd);
    border-radius: 6px;
    background: var(--bg2);
    color: var(--tx);
    padding: 6px 9px;
    font: inherit;
    font-size: 13px;
  }

  .segments-select {
    min-width: min(100%, 360px);
    flex: 1 1 260px;
  }

  .segments-input {
    flex: 1 1 150px;
  }

  .segments-btn {
    min-height: 34px;
    border-radius: 6px;
    border: 1px solid var(--bd);
    padding: 6px 10px;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    background: var(--bg2);
    color: var(--tx);
  }

  .segments-btn-primary {
    border-color: var(--ac);
    background: var(--ac);
    color: #ffffff;
  }

  .segments-btn-ghost {
    background: transparent;
  }

  .segments-btn-danger {
    border-color: var(--dn);
    color: var(--dn);
    background: transparent;
  }

  .segments-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* ---- Sources externes (Search Console / Bing) — onglet Intégration ---- */
  .search-sources-disclaimer {
    margin: 0 0 var(--space-3);
    padding: var(--space-3);
    font-size: var(--text-xs);
    line-height: 1.5;
    color: var(--tx2);
    background: var(--bg2);
    border: 1px solid var(--bd);
    border-radius: var(--radius-md, 10px);
  }
  .search-sources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-3);
  }
  .search-provider {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--bd);
    border-radius: var(--radius-md, 10px);
    background: var(--bg);
    min-width: 0;
  }
  .search-provider.is-connected {
    border-color: color-mix(in oklab, var(--ok) 45%, var(--bd));
  }
  .search-provider-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }
  .search-provider-logo {
    display: inline-flex;
    flex-shrink: 0;
  }
  .search-provider-name {
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--tx);
    flex: 1 1 auto;
    min-width: 0;
  }
  .search-provider-badge {
    font-size: var(--text-xs);
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
  }
  .search-provider-badge.is-on {
    color: var(--ok);
    background: color-mix(in oklab, var(--ok) 14%, transparent);
  }
  .search-provider-badge.is-off {
    color: var(--tx2);
    background: var(--bg2);
  }
  .search-provider-detail {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: var(--space-3);
    margin: 0;
    font-size: var(--text-xs);
  }
  .search-provider-detail dt {
    color: var(--tx2);
    margin: 0;
  }
  .search-provider-detail dd {
    margin: 0;
    color: var(--tx);
    font-weight: 500;
    overflow-wrap: anywhere;
  }
  .search-provider-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--tx2);
    cursor: pointer;
  }
  .search-provider-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .search-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .search-field-label {
    font-size: var(--text-xs);
    color: var(--tx2);
  }
  .search-field-input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    font: inherit;
    font-size: var(--text-sm);
    color: var(--tx);
    background: var(--bg2);
    border: 1px solid var(--bd);
    border-radius: var(--radius-sm, 8px);
  }
  textarea.search-field-input {
    resize: vertical;
    font-family: var(--font-mono, monospace);
    font-size: var(--text-xs);
  }
  .search-field-input:focus {
    outline: none;
    border-color: var(--ac);
  }
  .search-provider-connect,
  .search-provider-disconnect {
    align-self: flex-start;
    padding: 8px 14px;
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 500;
    border-radius: var(--radius-sm, 8px);
    cursor: pointer;
    border: 1px solid var(--bd);
  }
  .search-provider-connect {
    color: #fff;
    background: var(--ac);
    border-color: var(--ac);
  }
  .search-provider-disconnect {
    color: var(--dn);
    background: transparent;
    border-color: color-mix(in oklab, var(--dn) 45%, var(--bd));
  }
  .search-provider-connect:disabled,
  .search-provider-disconnect:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .search-provider-hint {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--tx2);
  }
  .search-provider-property {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .search-provider-property .search-provider-connect {
    margin-top: var(--space-2);
  }
  .search-provider-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
  }
  .search-provider-reconnect {
    align-self: flex-start;
    padding: 8px 14px;
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 500;
    border-radius: var(--radius-sm, 8px);
    cursor: pointer;
    color: var(--tx2);
    background: transparent;
    border: 1px solid var(--bd);
  }
  .search-provider-reconnect:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* ---- Recherche (SEO) — onglet Analytics ---- */
  .search-kw-panels {
    margin-top: var(--space-3);
  }
  .search-kw-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-4, 20px);
  }
  .search-kw-col {
    min-width: 0;
  }
  .search-kw-col-title {
    margin: 0 0 var(--space-2);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--tx);
  }
  .search-kw-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-xs);
  }
  .search-kw-table th {
    text-align: left;
    color: var(--tx2);
    font-weight: 500;
    padding: 4px 6px;
    border-bottom: 1px solid var(--bd);
    white-space: nowrap;
  }
  .search-kw-table th.is-num,
  .search-kw-table td.is-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .search-kw-table td {
    padding: 5px 6px;
    color: var(--tx);
    border-bottom: 1px solid color-mix(in oklab, var(--bd) 55%, transparent);
  }
  .search-kw-term {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .search-kw-empty-title {
    margin: 0 0 4px;
    font-weight: 600;
    color: var(--tx);
  }
  .search-kw-empty-sub {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--tx2);
  }
  .search-kw-not-connected {
    padding: var(--space-3) 0;
  }
  .search-kw-sync {
    margin-top: var(--space-3);
    padding-top: var(--space-2);
    border-top: 1px solid var(--bd);
    font-size: var(--text-xs);
    color: var(--tx3);
  }
  .search-kw-sync.is-error {
    color: var(--wr);
  }

  /* ---- Abonnement SaaS (MRR + composition) ---- */
  .saas-mrr-net {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
  }
  .saas-mrr-net-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--tx);
    font-variant-numeric: tabular-nums;
  }
  .saas-mrr-net-label {
    font-size: 0.8rem;
    color: var(--tx2);
  }
  .saas-mrr-bars {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .saas-mrr-bar {
    display: grid;
    grid-template-columns: 5.5rem 1fr auto;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.82rem;
  }
  .saas-mrr-bar-label {
    color: var(--tx2);
  }
  .saas-mrr-bar-track {
    height: 8px;
    border-radius: 999px;
    background: var(--bg2);
    overflow: hidden;
  }
  .saas-mrr-bar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--ok);
  }
  .saas-mrr-bar.is-con .saas-mrr-bar-fill,
  .saas-mrr-bar.is-churn .saas-mrr-bar-fill {
    background: var(--dn);
  }
  .saas-mrr-bar-value {
    font-variant-numeric: tabular-nums;
    color: var(--tx);
  }
  .saas-mrr-bar.is-con .saas-mrr-bar-value,
  .saas-mrr-bar.is-churn .saas-mrr-bar-value {
    color: var(--dn);
  }
  .saas-note {
    margin: var(--space-3) 0 0;
    font-size: 0.75rem;
    color: var(--tx2);
    line-height: 1.5;
  }
  .saas-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-3);
  }
  .saas-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .saas-stat-value {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--tx);
    font-variant-numeric: tabular-nums;
  }
  .saas-stat-label {
    font-size: 0.75rem;
    color: var(--tx2);
  }
  .saas-mix-donut {
    margin-top: var(--space-2);
  }
}