/* ============================================================
   components.css — composants reutilisables (header, boutons, cards,
   pills, badges, footer). Tous les etats UI couverts.
   ============================================================ */

/* ---------- Header sticky ---------- */
.site-header {
  position: sticky; inset-block-start: 0; z-index: var(--z-header);
  block-size: var(--nav-h);
  display: flex; align-items: center;
  background: var(--surface-glass);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-block-end: 1px solid var(--line);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: var(--bg-2); }
}
.site-header .container { display: flex; align-items: center; gap: var(--space-4); inline-size: 100%; }

.brand { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand-mark { inline-size: 30px; block-size: 30px; flex: none; filter: drop-shadow(0 0 8px var(--brand-glow)); }
.brand-name { font-family: var(--font-display); font-size: 1.02rem; letter-spacing: -0.01em; line-height: 1; }
.brand-sub { font-size: var(--fs-micro); color: var(--ink-mute); letter-spacing: 0.04em; text-transform: uppercase; }

.header-spacer { flex: 1 1 auto; }
.header-actions { display: flex; align-items: center; gap: var(--space-2); }
/* Le rappel clavier Ctrl/K n'a aucun sens sur un appareil tactile et, sous ~348px, la largeur
   intrinseque du bouton (white-space:nowrap) deborde le header (clippe par body{overflow-x:hidden},
   sans scrollbar pour l'atteindre). On masque le hint sur petits ecrans : le bouton garde son
   libelle "Rechercher" (donc son nom accessible) et tient dans le viewport. */
@media (max-width: 480px) {
  [data-cmdk-open] kbd { display: none; }
}

/* ---------- Boutons ---------- */
.btn {
  --_pad-i: var(--space-4);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-block-size: 44px; padding-block: var(--space-2); padding-inline: var(--_pad-i);
  font-family: var(--font-body); font-size: var(--fs-small); font-weight: 600;
  border-radius: var(--radius-pill); border: 1px solid transparent;
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: transform var(--t-fast) var(--ease-out), background var(--t) var(--ease-out),
              border-color var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out), color var(--t) var(--ease-out);
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

.btn-primary {
  background: linear-gradient(135deg, var(--cta-grad-a), var(--cta-grad-b));
  color: var(--cta-text); font-weight: 700; box-shadow: var(--glow-brand);
}
.btn-primary:hover { color: var(--cta-text); box-shadow: var(--glow-brand-hover); transform: translateY(-1px); }

.btn-ghost { background: var(--surface-2); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--surface-3); border-color: var(--line-strong); color: var(--ink); }

.btn-icon {
  inline-size: 44px; block-size: 44px; min-block-size: 44px; padding: 0;
  background: var(--surface-2); color: var(--ink-soft); border: 1px solid var(--line);
}
.btn-icon:hover { background: var(--surface-3); color: var(--ink); border-color: var(--line-strong); }
.btn-icon svg { inline-size: 18px; block-size: 18px; }

@media (forced-colors: active) {
  .btn { border: 1px solid ButtonText; }
  .btn-primary { background: ButtonFace; color: ButtonText; }
}

/* ---------- Cards ---------- */
.card {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--space-5);
  box-shadow: var(--shadow-1);
  transition: transform var(--t) var(--ease-out), border-color var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out);
}
.card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-2); }
.card-link { color: var(--ink); display: block; }
.card-link:hover { color: var(--ink); transform: translateY(-3px); border-color: var(--brand-dim); box-shadow: var(--shadow-2), var(--glow-soft); }

/* Lien retour + carte/texte d'etat annule. Definis ici (feuille GLOBALE), pas dans session.css/hub.css :
   la page seance ANNULEE est servie sans page-CSS (pageCss:[], SPEC §6.6 = stub minimal), donc ces
   classes — reutilisees par la page seance et les cartes du hub — doivent etre globales pour rester
   stylees. min-block-size 32px = cible tactile confortable (>= plancher WCAG 2.5.8). `.cancelled-card`
   est posterieure a `.card` -> son padding/centrage l'emporte (specificite egale, ordre source). */
.back-link { display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: 32px; padding-block: var(--space-1); font-size: var(--fs-small); color: var(--ink-mute); margin-block-end: var(--space-3); }
.back-link:hover { color: var(--ink); }
.cancelled-card { padding: var(--space-6); text-align: center; color: var(--ink-mute); }
.ses-desc { font-size: var(--fs-small); color: var(--ink-mute); }

/* ---------- Pills / badges ---------- */
.pill {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding-block: 0.3rem; padding-inline: var(--space-3);
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.02em;
  border-radius: var(--radius-pill); border: 1px solid var(--line);
  background: var(--surface-2); color: var(--ink-soft); white-space: nowrap;
}
.pill[data-tone="brand"] { color: var(--brand-bright); border-color: var(--brand-dim); background: var(--brand-mist); }
.pill[data-tone="bull"]  { color: var(--bull); border-color: var(--bull-dim); background: var(--bull-dim); }
.pill[data-tone="bear"]  { color: var(--bear); border-color: var(--bear-dim); background: var(--bear-dim); }
/* PAS de .pill[data-tone="gold"] : --gold est RESERVE a XAU/USD (porte par .asset-card[data-symbol="XAUUSD"]).
   Un pill dore generique fuirait l'or hors de l'unique actif autorise -> regle volontairement absente. */
.pill[data-tone="violet"]{ color: var(--violet); border-color: var(--violet-dim); background: var(--violet-dim); }
.pill[data-tone="muted"] { color: var(--ink-mute); }

.dot { inline-size: 7px; block-size: 7px; border-radius: 50%; flex: none; background: currentColor; }
.dot-live { position: relative; color: var(--bull); }
.dot-live::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: currentColor;
  animation: pulse-ring 2.4s var(--ease-out) infinite;
}
@keyframes pulse-ring { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(3.4); opacity: 0; } }
/* halo continu du point "en direct" : coupe aussi sous reduced-motion OS (le toggle manuel
   data-motion est traite dans animations.css). Sans ca, le pulse tournait encore pour ces users. */
@media (prefers-reduced-motion: reduce) { .dot-live::after { animation: none; } }

kbd {
  font-size: 0.78rem; padding: 0.15rem 0.4rem; border-radius: 6px;
  background: var(--surface-3); border: 1px solid var(--line-strong);
  color: var(--ink-soft); box-shadow: 0 1px 0 rgba(0,0,0,0.4);
}

/* ---------- Footer ---------- */
.site-footer {
  margin-block-start: var(--space-9); padding-block: var(--space-7) var(--space-6);
  border-block-start: 1px solid var(--line); background: var(--bg-2);
}
.site-footer .container { display: flex; flex-direction: column; gap: var(--space-4); }
.footer-top { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; justify-content: space-between; }
.disclaimer {
  font-size: var(--fs-small); color: var(--ink-mute); max-width: var(--measure);
  padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); border-inline-start: 3px solid var(--brand-dim);
}
.footer-meta { font-size: var(--fs-micro); color: var(--ink-mute); }
.footer-bottom { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; }
.motion-toggle {
  display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: 32px;
  padding-block: 0.3rem; padding-inline: var(--space-3); font-size: var(--fs-micro); font-weight: 600;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-pill);
  color: var(--ink-mute); cursor: pointer; transition: color var(--t) var(--ease-out), border-color var(--t) var(--ease-out);
}
.motion-toggle:hover { color: var(--ink); border-color: var(--line-strong); }
/* Etat disabled (pose par common.js quand l'OS demande deja reduced-motion : le controle est fige).
   .motion-toggle n'a PAS la classe .btn -> la regle .btn:disabled ne l'atteint pas. On garde le bouton
   focusable/annoncable par les AT (pas de pointer-events:none) mais on coupe l'affordance de clic
   trompeuse : curseur par defaut + neutralisation du :hover (qui changeait color/border-color). */
.motion-toggle:disabled, .motion-toggle:disabled:hover { cursor: default; color: var(--ink-mute); border-color: var(--line); }
.motion-toggle .motion-ico { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 8px var(--brand-glow); }
.motion-toggle[aria-pressed="true"] { color: var(--ink-soft); }
.motion-toggle[aria-pressed="true"] .motion-ico { background: var(--ink-mute); box-shadow: none; }
@media (forced-colors: active) { .motion-toggle { border: 1px solid ButtonText; } }

/* ---------- Section heading ---------- */
.kicker {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand-soft);
}
.section-head { display: flex; flex-direction: column; gap: var(--space-3); margin-block-end: var(--space-6); }
.section-head p { color: var(--ink-soft); font-size: var(--fs-lead); }