/* ==========================================================================
   components.css — Composants communs (chevrons, accordéons, onglets, stubs)
   Nettoyage 2025-11-02 : unifie onglets + [hidden], sticky offset partagé
   ========================================================================== */

/* ===== Variables mappées vers tes tokens si présents ===== */
:root{
  --color-text:         var(--color-fg, var(--text, #e8ecf1));
  --color-muted:        var(--color-muted, #9fb0ca);
  --color-primary:      var(--color-primary, var(--accent, #6aa8ff));
  --color-primary-glow: var(--color-primary-glow, rgba(106,168,255,.25));

  --color-surface:   var(--surface,   #111827);
  --color-surface-2: var(--surface-2, #162135);
  --color-surface-3: var(--surface-3, #1b2944);
  --color-border:    var(--border,    #314162);

  --radius-sm: var(--radius-sm, 10px);
  --radius-md: var(--radius-md, 12px);
  --radius-lg: var(--radius-lg, 14px);

  --transition-fast: var(--transition-fast, .16s ease);

  /* Chevron globals */
  --hit-min: 40px;              /* zone cliquable tactile min */
  --chevron-radius: var(--radius-sm);
  --chevron-bg: var(--color-surface-2);
  --chevron-bg-hover: var(--color-surface-3);
  --chevron-border: var(--color-border);

  /* Header partagé (sert au sticky offset global) */
  --header-height: 64px;
}

/* Réduction des animations si demandé */
@media (prefers-reduced-motion: reduce) {
  :root { --transition-fast: 0s; }
}

/* ======================= Icône générique (si SVG inline) ================== */
.icon{
  display:inline-block; width:1em; height:1em;
  vertical-align:-0.125em;
  stroke:currentColor; fill:none; stroke-width:2;
}

/* ============================ CHEVRONS GLOBAUX ============================ */
.btn--icon,
.chevron-btn,
.chevron-link{
  min-height:auto !important; min-width:auto !important; padding:0 !important;
  font:inherit; line-height:1;
}
.btn--icon,
.chevron-btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  width:1.25em; height:1.25em; min-width:1.25em;
  background:var(--chevron-bg);
  border:1px solid var(--chevron-border);
  border-radius:var(--chevron-radius);
  color:var(--color-text);
  cursor:pointer;
  transition:background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.btn--icon:hover,
.chevron-btn:hover{
  background:var(--chevron-bg-hover);
  border-color: color-mix(in srgb, var(--chevron-border), #fff 15%);
}
.btn--icon:active,
.chevron-btn:active{ transform:scale(.98); }
.btn--icon::before,
.chevron-btn::before{
  content:""; position:absolute; inset:0;
  transform: translate(calc((var(--hit-min) - 1.25em)/-2), calc((var(--hit-min) - 1.25em)/-2));
  width:var(--hit-min); height:var(--hit-min);
}
.btn--icon .chev,
.chevron-btn .chev,
.chevron-link .chev{
  width:0; height:0;
  border-top:.33em solid transparent;
  border-bottom:.33em solid transparent;
  border-left:.48em solid currentColor;
  transition:transform var(--transition-fast);
}
.btn--icon[aria-expanded="true"] .chev,
.chevron-link[aria-expanded="true"] .chev,
[aria-expanded="true"] > .chev,
.chev.open{
  transform:rotate(90deg);
}
.chevron-link{
  position:relative;
  display:inline-grid; place-items:center;
  width:1.15em; height:1.15em; min-width:1.15em;
  background:var(--chevron-bg);
  border:1px solid var(--chevron-border);
  border-radius:calc(var(--chevron-radius) - 2px);
  color:var(--color-text); text-decoration:none;
  transition:background var(--transition-fast), border-color var(--transition-fast);
}
.chevron-link:hover{
  background:var(--chevron-bg-hover);
  border-color: color-mix(in srgb, var(--chevron-border), #fff 15%);
}
.chevron-link::before{
  content:""; position:absolute; inset:0;
  transform: translate(calc((var(--hit-min) - 1.15em)/-2), calc((var(--hit-min) - 1.15em)/-2));
  width:var(--hit-min); height:var(--hit-min);
}
.chevron-link .chev{
  border-top:.3em solid transparent; border-bottom:.3em solid transparent; border-left:.44em solid currentColor;
}

/* Focus visible (accessibilité) */
.btn--icon:focus-visible,
.chevron-btn:focus-visible,
.chevron-link:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px var(--color-primary-glow);
}

/* =========================== ACCORDÉON GÉNÉRIQUE ========================== */
.accordion{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
}
.accordion__summary{
  display:flex; align-items:center; justify-content:space-between;
  gap:.75rem; padding:.6rem .9rem;
  cursor:pointer; font-weight:600; color:var(--color-text);
  transition: background var(--transition-fast);
}
.accordion__summary:hover{
  background: color-mix(in srgb, var(--color-surface), #fff 6%);
}
.accordion__title{ display:flex; align-items:center; gap:.5rem; }
.accordion__panel{
  display:none; padding:.75rem .9rem;
  border-top:1px solid var(--color-border);
  background:var(--color-surface-2);
}
.accordion.is-open .accordion__panel{ display:block; }

/* ================================ ONGLETS ================================ */
.tabs{
  display:flex;
  gap:.5rem;
  border-bottom:1px solid var(--color-border);
}
/* Variante moderne (.tab-btn) — utilisée par Insights */
.tab-btn{
  appearance:none;
  background:var(--color-surface-2);
  border:1px solid var(--color-border);
  color:var(--color-text);
  padding:.4rem .75rem;
  border-radius:.5rem .5rem 0 0;
  cursor:pointer; font-size:12.5px;
  transition:background var(--transition-fast), border-color var(--transition-fast);
}
.tab-btn:hover{ background:var(--color-surface-3); }
.tab-btn.active{
  background:var(--color-surface-3);
  border-bottom-color:var(--color-surface-3);
}
/* Règle unique et autoritaire pour “hidden” (centralisée) */
.tab-panel[hidden]{ display:none !important; }

/* ============================ STUBS / BOUCHONS ============================ */
.strategy-relationship{ display: contents; }
.stub-block{
  background:var(--color-surface-2);
  border:1px solid var(--color-border);
  border-radius:12px;
  padding:10px 12px;
  margin:8px 0;
}
.stub-head{ font-weight:600; color:var(--color-text); margin:0 0 4px; }
.stub-endpoint{
  font-size:12px; color: color-mix(in srgb, var(--color-text), #000 45%);
  margin:0 0 6px;
}
.stub-endpoint code{
  padding:.1em .35em; border-radius:6px;
  background:var(--color-surface-3);
  border:1px solid var(--color-border);
  color:var(--color-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", "Courier New", monospace;
}
.stub-endpoint em{ opacity:.85; margin-left:.25rem; }
.stub-desc{
  margin:0; line-height:1.5;
  color: color-mix(in srgb, var(--color-text), #000 30%);
}

/* ===================== CONTEXTE INLINE (Portfolio + Insights) ===================== */
.ctx-inline{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap, 16px);
  align-items: end;
}
.ctx-inline .ctx-row,
.ctx-inline .context-item{
  display:flex; flex-direction:column; gap:6px;
}
.ctx-inline .ctx-label,
.ctx-inline label{
  font-size: 12px; color: var(--muted,#9fb0ca); text-transform: uppercase; letter-spacing: .04em;
}
@media (max-width: 640px){
  .ctx-inline{
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* ===== Détails “Résumé …” + chevron ===== */
.summary-head{
  display:flex; align-items:center; justify-content:space-between;
  width:100%; background:transparent; border:0; color:inherit; cursor:pointer;
  padding:0; margin:0;
}
.summary-head .summary-title{ font-weight:600; }
.summary-head .chev{
  width:0; height:0;
  border-top:.33em solid transparent; border-bottom:.33em solid transparent; border-left:.48em solid currentColor;
  transition: transform .16s ease;
}
.summary-head[aria-expanded="true"] .chev{ transform: rotate(90deg); }

/* Détail consolidé – look carte */
.rules-details{
  margin-top:.5rem;
  border:1px solid var(--border, #314162);
  border-radius: 10px;
  background: var(--panel-3, #1b2944);
  padding: 10px 12px;
}

/* ==================== Spécifique page Insights: Sticky helper ==================== */
/* La barre de filtres sticky doit se caler sous le header partagé */
.insights-page .filters-v2.sticky {
  position: sticky;
  top: calc(var(--header-height) + 8px);
  z-index: 10;
}