/* castellana — feuille de style COMMUNE (version locale et version cloud).
   Source unique : css/app.css ; cloud/public/css/app.css en est la copie (npm run sync:cloud).
   Les règles propres à un mode : css/mode-local.css (local seulement), css/mode-cloud.css (cloud seulement). */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  body.ds-root { padding: 2rem 1rem; line-height: 1.6; }
  /* Largeur de l'application — une seule pour tous les onglets et les Réglages (Réglages → Personnalisation).
     Défaut « large » (1400 px) ; « étroite » = l'ancienne largeur de 900 px héritée des prototypes. */
  :root { --app-max: 1400px; }
  :root[data-app-width="etroite"] { --app-max: 900px; }
  :root[data-app-width="pleine"] { --app-max: none; }
  .container { max-width: var(--app-max); margin: 0 auto; }
  /* Liens : sans cette règle le navigateur impose son bleu (#0000EE), quasi invisible sur fond sombre. Spécificité 0 : toute classe de lien reste prioritaire. */
  a:where(:link, :visited) { color: var(--accent); }
  h1 { font-size: 22px; font-weight: 600; margin-bottom: 4px; }
  .subtitle { font-size: 13px; color: var(--text-2); margin-bottom: 1.5rem; }

  .tabs { display: flex; gap: 4px; margin-bottom: 1.5rem; border-bottom: 1px solid var(--border); }
  .tab-btn {
    font: inherit; font-size: 14px; font-weight: 600; padding: 10px 16px;
    background: none; border: none; border-bottom: 2px solid transparent;
    color: var(--text-2); cursor: pointer;
  }
  .tab-btn:hover { color: var(--text); }
  .tab-btn.is-active { color: var(--accent); border-bottom-color: var(--accent); }
  .tab-panel { display: none; }
  .tab-panel.is-active { display: block; }

  .ds-card { margin-bottom: 1rem; }

  /* ---- Repères d'interface (27/9/2026) : lettre par onglet, lettre+numéro
     par carte — voir js/ui-ids.js. Rendu en ::before piloté par un attribut,
     jamais un noeud enfant : plusieurs cartes réécrivent leur innerHTML au
     complet (js/fcf-card.js, js/ticker-section.js…), ce qui effacerait un
     badge inséré comme enfant. OFF par défaut (comme les autres feature
     flags du produit), activable dans Réglages → Personnalisation. ---- */
  :root[data-ui-ids="off"] .tab-btn[data-ui-tab]::before,
  :root[data-ui-ids="off"] .ds-card[data-ui-card]::before { display: none; }
  .tab-btn[data-ui-tab]::before {
    content: attr(data-ui-tab);
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; margin-right: 6px; vertical-align: middle;
    border-radius: 50%; background: var(--text-3); color: var(--surface);
    font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  }
  .tab-btn.is-active[data-ui-tab]::before { background: var(--accent); }
  /* Réglages : même mécanisme, repères préfixés « R- » (js/ui-ids.js). */
  :root[data-ui-ids="off"] .settings-tab-btn[data-ui-tab]::before { display: none; }
  .settings-tab-btn[data-ui-tab]::before {
    content: attr(data-ui-tab);
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 16px; height: 16px; padding: 0 4px; margin-right: 6px; vertical-align: middle;
    border-radius: 8px; background: var(--text-3); color: var(--surface);
    font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  }
  .settings-tab-btn.is-active[data-ui-tab]::before { background: var(--accent); }
  .ds-card[data-ui-card] { position: relative; }
  .ds-card[data-ui-card]::before {
    content: attr(data-ui-card);
    font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .02em; line-height: 1.5;
    z-index: 2;
  }
  /* Apparence des cartes, 4 choix (Réglages → Personnalisation, <html data-ui-ids-style>) :
     a = étiquette discrète en coin bas, b = pastille au-dessus du titre (défaut),
     c = marge extérieure, d = languette sur le coin du cadre. Repris de toledo. */
  :root[data-ui-ids-style="a"] .ds-card[data-ui-card] { padding-bottom: calc(1rem + 14px); }
  :root[data-ui-ids-style="a"] .ds-card[data-ui-card]::before {
    position: absolute; right: 8px; bottom: 5px; padding: 0 5px; border-radius: 4px;
    color: var(--text-3); border: 1px solid var(--border); background: var(--surface);
  }
  :root[data-ui-ids-style="b"] .ds-card[data-ui-card]::before {
    display: block; width: fit-content; margin: 0 0 6px; padding: 0 6px; border-radius: 4px;
    color: var(--accent); background: var(--accent-bg);
  }
  :root[data-ui-ids-style="c"] .ds-card[data-ui-card]::before {
    position: absolute; left: -34px; top: 10px; color: var(--text-3);
  }
  @media (max-width: 1000px) {
    :root[data-ui-ids-style="c"] .ds-card[data-ui-card] { padding-bottom: calc(1rem + 14px); }
    :root[data-ui-ids-style="c"] .ds-card[data-ui-card]::before {
      left: auto; top: auto; right: 8px; bottom: 5px; padding: 0 5px; border-radius: 4px;
      border: 1px solid var(--border); background: var(--surface);
    }
  }
  :root[data-ui-ids-style="d"] .ds-card[data-ui-card]::before {
    position: absolute; top: -1px; right: -1px; padding: 1px 8px; border-radius: 0 var(--ds-radius-lg, 8px) 0 var(--ds-radius-lg, 8px);
    color: var(--accent); background: var(--accent-bg); border: 1px solid var(--border);
  }
  .reperes-choix { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; margin-top: 12px; }
  button.reperes-option, button.largeur-option {
    display: flex; align-items: center; gap: 10px; text-align: left; padding: 8px 10px; margin: 0;
    background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
    color: var(--text); font: inherit; font-size: 13px; cursor: pointer;
  }
  button.largeur-option b { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--accent); }
  button.largeur-option.is-active { border-color: var(--accent); background: var(--accent-bg); }
  button.reperes-option b { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--accent); }
  button.reperes-option.is-active { border-color: var(--accent); background: var(--accent-bg); }

  /* Interrupteur rond — recréation du « 16. Switch button » (Mojtaba
     Seyedi), recensé sur prismic.io/blog/css-button-animations : silhouette
     ronde en relief, grille de points sur le bouton, texte ON/OFF qui
     bascule. Couleur ramenée à l'accent de castellana plutôt que le doré
     de l'original. Composant propre à cette carte, pas ajouté au design
     system partagé. */
  .ui-switch { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: 0 0 auto; }
  .ui-switch .ui-switch-state { font-size: 10px; font-weight: 700; letter-spacing: .08em; color: var(--text-3); min-height: 12px; transition: color .2s ease; }
  .ui-switch.is-on .ui-switch-state { color: var(--accent); }
  .ui-switch input { position: absolute; left: -9999px; }
  .ui-switch-knob {
    position: relative; display: block; width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
    background: radial-gradient(circle, var(--border) 1px, transparent 1.3px) 0 0/6px 6px, linear-gradient(var(--surface-2), var(--surface));
    border-bottom: 3px solid var(--border);
    box-shadow: inset 0 2px 2px rgba(255,255,255,.6), inset 0 -2px 3px rgba(0,0,0,.18), 0 2px 4px rgba(0,0,0,.18);
    transition: box-shadow .2s ease, border-color .2s ease;
  }
  .ui-switch.is-on .ui-switch-knob {
    border-bottom-color: var(--accent);
    box-shadow: inset 0 2px 2px rgba(255,255,255,.6), inset 0 -2px 3px rgba(0,0,0,.18), 0 0 0 3px var(--accent-bg), 0 0 10px -1px var(--accent);
  }
  .ui-switch-knob:active { transform: translateY(1px); }

  .section-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-2); margin-bottom: 1rem; }
  .row { display: flex; align-items: center; gap: 12px; margin-bottom: 0.85rem; flex-wrap: wrap; }
  .row label { font-size: 13px; color: var(--text-2); width: 260px; flex-shrink: 0; }
  /* T2/T4 (12/9/2026) — un .ds-input de valeur (texte/nombre) n'a jamais
     besoin de toute la largeur restante de la ligne : avec flex:1, un champ
     comme SMA50/VIX/ATR s'étirait jusqu'au bord de la carte alors que son
     libellé tient sur une ligne. Les select gardent flex:1 (certaines
     options, ex. "Mince / très volatil (ex. SMCI, CRWV, ASML CDR)", ont
     besoin de place). */
  .row .ds-select { flex: 1; min-width: 140px; }
  .row .ds-input { flex: 0 1 180px; min-width: 100px; }
  input[type=range] { flex: 1; accent-color: var(--green); height: 4px; cursor: pointer; min-width: 120px; }
  .val { font-size: 13px; font-weight: 600; color: var(--text); min-width: 90px; text-align: right; }
  .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 1rem; }
  .grid-4 .ds-metric { text-align: center; }
  .grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 1rem; }
  .grid-5 .ds-metric { text-align: center; }
  .grid-6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 1rem; }
  .grid-6 .ds-metric { text-align: center; }
  .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 1rem; }
  .grid-3 .ds-metric { text-align: center; }
  .field-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px 10px; align-items: end; margin-bottom: 0.75rem; }
  .field-grid .field { min-width: 0; }
  .field-grid .field > label { display: block; font-size: 12px; color: var(--text-2); width: auto; margin: 0 0 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .field-grid .field .ds-input, .field-grid .field .ds-select { width: 100%; max-width: none; min-width: 0; flex: none; box-sizing: border-box; height: 34px; padding-top: 5px; padding-bottom: 5px; }
  .field-grid .span-2 { grid-column: span 2; }
  .field-grid .span-3 { grid-column: span 3; }
  .field-grid .span-4 { grid-column: span 4; }
  .field-inline { display: flex; align-items: center; gap: 8px; height: 34px; }
  .field-inline input[type=range] { flex: 1; min-width: 0; }
  .field-inline .val { min-width: 3.2em; text-align: right; }
  .metric-band .ds-metric__label { display: block; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; margin: 0; }
  .metric-band .ds-metric__value { display: block; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; margin: 0; }
  .metric-band .ds-metric__sub { display: block; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
  .field-grid .field-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
  .field-grid .field .val { display: inline-block; min-height: 34px; line-height: 34px; }
  .metric-band { display: grid; grid-template-columns: repeat(var(--cols, 10), minmax(0, 1fr)); border: 0.5px solid var(--border); border-radius: 8px; overflow: hidden; margin-bottom: 0.75rem; }
  .metric-band > div { padding: 6px 8px; border-right: 0.5px solid var(--border); min-width: 0; }
  .metric-band > div:last-child { border-right: none; }
  .metric-band--rows > div { border-top: 0.5px solid var(--border); }
  /* Bande sur 2 rangées de 5 (10 tuiles) : première rangée sans filet du haut, 5e colonne sans filet de droite. */
  .metric-band--rows > div:nth-child(-n+5) { border-top: none; }
  .metric-band--rows > div:nth-child(5n) { border-right: none; }
  .metric-band .mb-label { display: block; font-size: 11px; color: var(--text-3, var(--text-2)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .metric-band .mb-value { display: block; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .metric-band .mb-sub { display: block; font-size: 10px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .signal-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .signal { border: 0.5px solid var(--border); border-radius: 8px; padding: 8px 10px; min-width: 0; }
  .signal .colhead { margin-bottom: 6px; }
  .signal .field-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr); margin-bottom: 4px; }
  .signal .field .val .ds-badge { white-space: nowrap; }
  .signal .metric-sub { margin: 0; text-align: left; }
  @media (max-width: 700px) {
    .field-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .metric-band { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .metric-band > div:nth-child(5n) { border-right: none; }
    .metric-band > div:nth-child(n+6) { border-top: 0.5px solid var(--border); }
    .signal-pair { grid-template-columns: minmax(0, 1fr); }
  }
  .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
  @media (max-width: 620px) {
    .grid-4, .grid-5, .grid-6 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .grid-2 { grid-template-columns: 1fr; }
    .row label { width: 100%; }
  }
  .ok { color: var(--green); } .warn { color: var(--amber); } .bad { color: var(--red); }
  .banner { border-radius: var(--ds-radius-sm); padding: 0.85rem 1rem; font-size: 13px; font-weight: 600; margin-bottom: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
  .banner .ds-btn { font-weight: 600; }
  .banner.ready, .banner.add { background: var(--green-bg); color: var(--green); }
  .banner.notready, .banner.skip { background: var(--red-bg); color: var(--red); }
  .banner.watch { background: var(--amber-bg); color: var(--amber); }
  /* 11/9/2026 : état "rien à évaluer". Volontairement neutre et discret —
     une bannière ambre ou verte sur des champs vides ressemblerait à un
     verdict, ce qui est exactement le défaut corrigé ce jour-là. */
  .banner.unknown { background: var(--surface-2); color: var(--text-2); font-weight: 500; }
  .checklist { display: flex; flex-direction: column; gap: 8px; }
  .checklist label { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text); cursor: pointer; width: auto; }
  .checklist input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--green); flex-shrink: 0; }
  .order-rec { background: var(--surface-2); border-radius: var(--ds-radius-sm); padding: 1rem; font-size: 13px; }
  .order-rec strong { color: var(--text); }
  .rtable { width: 100%; font-size: 13px; border-collapse: collapse; }
  .rtable td { padding: 6px 4px; border-bottom: 0.5px solid var(--border); }
  .rtable td:last-child { text-align: right; font-weight: 600; }
  .colhead { font-size: 11px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; }
  /* Lignes d'état « améliorée / visée pour suppression » (#437) : visibles seulement si l'onglet Roue est actif. */
  /* Onglet Roue, carte Semaine (H2) : tableaux en pleine largeur, puis en bas « Semaine suivante » à gauche
     et « À surveiller » à droite, en colonne étroite (16/10/2026). */
  .roue-wk-bottom { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1rem; align-items: start; margin-top: 0.75rem; }
  .roue-wk-main { min-width: 0; }
  @media (max-width: 900px) { .roue-wk-bottom { grid-template-columns: minmax(0, 1fr); } }
  .roue-watch { background: var(--amber-bg); border: 1px solid var(--amber); border-radius: 8px; padding: 8px 10px; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
  .roue-watch__title { font-weight: 600; margin-bottom: 4px; }
  .roue-watch ul { margin: 0; padding-left: 16px; }
  .roue-watch li { margin: 3px 0; }
  .roue-etat { display: none; }
  html.roue-on .roue-etat { display: block; }
  .roue-lien { display: none; }
  /* Boutons d'action toujours visibles au bord droit d'un tableau large (Journal des positions). */
  .ds-table .roue-act-col { position: sticky; right: 0; z-index: 1; background: var(--surface); box-shadow: -6px 0 6px -6px rgba(0,0,0,0.35); }
  /* En plein écran, les cellules sont plafonnées à 105 px (texte coupé) : pas celle des boutons. */
  #table-overlay .ds-table td.roue-act-col { max-width: none; overflow: visible; }
  html.roue-on .roue-lien { display: inline; }
  /* Formulaires repliables de la Roue (H4, H5) : un vrai bouton plutôt qu'un lien discret (17/10/2026). */
  .roue-add > summary { list-style: none; display: inline-flex; align-items: center; cursor: pointer; }
  .roue-add > summary::-webkit-details-marker { display: none; }
  .roue-add .roue-add__close { display: none; }
  .roue-add[open] .roue-add__open { display: none; }
  .roue-add[open] .roue-add__close { display: inline; }
  .roue-add[open] > summary { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
  .roue-add__hint { margin-left: 10px; }
  #tab-roue .ds-table td { white-space: nowrap; } /* montants et dates sur une ligne ; le tableau défile */
  .tab-intro > summary { cursor: pointer; margin-bottom: 0; list-style-position: inside; }
  .tab-intro[open] > summary { margin-bottom: 0.5rem; }
  .tab-intro .subtitle { margin-bottom: 0.5rem; }
  .tab-intro .note { margin-top: 0.5rem; padding-top: 0.5rem; }
  .note { font-size: 12px; color: var(--text-2); margin-top: 1rem; padding-top: 1rem; border-top: 0.5px solid var(--border); line-height: 1.6; }
  .metric-sub { font-size: 12px; color: var(--text-2); margin-top: 4px; }
  .univers-switch { display: inline-flex; gap: 0; border: 1px solid var(--border); border-radius: var(--ds-radius-sm); overflow: hidden; }
  .univers-switch .ds-btn { border: none; border-radius: 0; }
  .univers-switch .ds-btn.is-active { background: var(--accent); color: #fff; }
  .screen-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 1rem; flex-wrap: wrap; }
  .screen-table-wrap { overflow-x: auto; }
  #screen-tbody tr, .janl-screener-row { cursor: pointer; }
  #screen-tbody tr:hover { background: var(--surface-2); }
  #sectors-tbody tr:not(.sector-row-benchmark) { cursor: pointer; }
  #sectors-tbody tr:not(.sector-row-benchmark):hover { background: var(--surface-2); }
  #sector-top-tbody tr { cursor: pointer; }
  #sector-top-tbody tr:hover { background: var(--surface-2); }

  /* En-têtes de colonne triables (T5, 12/9/2026) — tableau Screening et
     "Titres les plus performants du secteur". Stop/Taille-charge en restent
     exclus : dérivés au rendu (sizingForCandidate), pas une valeur stockée
     sur la ligne. */
  .sortable-th { cursor: pointer; user-select: none; white-space: nowrap; }
  .sortable-th:hover { color: var(--accent); }
  .sort-arrow { font-size: 10px; margin-left: 2px; color: var(--accent); }

  /* Flash de mise en évidence quand un ticker "arrive" depuis le screening */
  @keyframes flashHighlight {
    0%, 100% { box-shadow: none; }
    20% { box-shadow: 0 0 0 3px var(--accent); }
  }
  .flash-highlight { animation: flashHighlight 1.1s ease-out; }

  .status-bar { display: flex; align-items: center; gap: 16px; margin-bottom: 1rem; flex-wrap: wrap; font-size: 12px; color: var(--text-2); }
  .status-item { display: flex; align-items: center; gap: 6px; }
  .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); flex-shrink: 0; }
  .status-dot.is-ok { background: var(--green); }
  .status-dot.is-down { background: var(--red); }
  .status-dot.is-checking { background: var(--amber); }
  /* « Désactivé » n'est pas « en panne » : gris neutre + contour, jamais du
     rouge, pour un composant optionnel que l'utilisateur n'a pas installé. */
  .status-dot.is-off { background: transparent; border: 1.5px solid var(--text-3); }
  .status-refresh { font-size: 11px; color: var(--text-2); background: none; border: none; text-decoration: underline; cursor: pointer; padding: 0; }
  .cv { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; white-space: nowrap; margin-left: 4px; }
  .cv--ok   { background: var(--green-bg, rgba(46,160,90,.15)); color: var(--green); }
  .cv--warn { background: var(--amber-bg, rgba(200,150,30,.15)); color: var(--amber); }
  .cv--bad  { background: var(--red-bg,  rgba(200,60,60,.15));  color: var(--red); }
  .cv--na   { background: transparent; color: var(--text-3); font-weight: 500; }
  .pref-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin: 12px 0; }
  .pref-grid label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--text-2); }
  .pref-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
  .pref-status { margin-top: 10px; font-size: 13px; min-height: 1.2em; }
  .pref-status.is-ok { color: var(--green); }
  .pref-status.is-bad { color: var(--red); }
  .update-banner { margin: -0.5rem 0 1rem; padding: 10px 14px; background: var(--accent-bg, rgba(80,140,255,.12)); border: 1px solid var(--accent); border-radius: var(--ds-radius-sm); font-size: 13px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  .update-banner__text { flex: 1 1 320px; line-height: 1.5; }
  .update-banner__notes { color: var(--text-2); }
  .status-issues { margin: -0.5rem 0 1rem; padding: 8px 12px; background: var(--red-bg); border-radius: var(--ds-radius-sm); font-size: 12px; color: var(--red); line-height: 1.6; }
  .status-issues strong { font-weight: 700; }

  /* Menu Réglages — overlay plein écran, même principe que essen/nemesis-retaliation */
  .icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: var(--ds-radius-sm); border: 1px solid var(--border);
    background: var(--surface); color: var(--text); font-size: 16px; cursor: pointer;
  }
  .icon-btn:hover { border-color: var(--accent); color: var(--accent); }
  .settings-overlay {
    position: fixed; inset: 0; z-index: 50; background: var(--surface);
    display: flex; flex-direction: column;
  }
  .settings-topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); flex-shrink: 0;
  }
  .settings-topbar h2 { font-size: 16px; font-weight: 700; }
  .settings-main { flex: 1; overflow-y: auto; padding: 1.25rem; max-width: var(--app-max); margin: 0 auto; width: 100%; }
  .settings-main pre { background: var(--surface-2); border-radius: var(--ds-radius-sm); padding: 8px 10px; font-size: 12px; overflow-x: auto; font-family: var(--font-mono); margin: 4px 0; }
  /* Onglets internes du panneau Réglages (T8, 6/9/2026) */
  .settings-tabs { display: flex; gap: 4px; margin-bottom: 1rem; border-bottom: 1px solid var(--border); }
  .settings-tab-btn { font: inherit; font-size: 13px; font-weight: 600; padding: 8px 14px; background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-2); cursor: pointer; }
  .settings-tab-btn:hover { color: var(--text); }
  .settings-tab-btn.is-active { color: var(--accent); border-bottom-color: var(--accent); }
  .settings-tab-panel { display: none; }
  .settings-tab-panel.is-active { display: block; }

  /* Overlay plein écran "Agrandir le graphique" (refonte 11/9/2026) — même
     principe que .settings-overlay ci-dessus, gardé indépendant pour ne pas
     coupler les deux features. Le bloc #sector-chart-block est DÉPLACÉ ici
     au clic (re-parenting DOM, pas de duplication d'état/d'écouteurs) et
     remis à sa place d'origine à la fermeture. */
  .chart-overlay {
    position: fixed; inset: 0; z-index: 50; background: var(--surface);
    display: flex; flex-direction: column;
  }
  .chart-overlay-topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); flex-shrink: 0;
  }
  .chart-overlay-topbar h2 { font-size: 16px; font-weight: 700; }
  .chart-overlay-main { flex: 1; overflow-y: auto; padding: 1.25rem; }
  .expand-btn { margin-left: auto; }

  /* « Agrandir » un tableau (A3, B4, F3, F4…) — mode compact (8/10/2026) : le tableau de
     screening a ~24 colonnes (≈2000 px en usage normal) et ne tenait pas dans la fenêtre
     agrandie. Dans l'overlay : marges réduites, police et cellules resserrées, lignes sur UNE
     ligne (les badges ne se cassent plus : 100 px → ~30 px par ligne), en-têtes sur plusieurs
     lignes, et défilement dans le cadre avec en-tête ET colonne Symbole figés — on garde le
     repère en parcourant les colonnes. */
  #table-overlay .chart-overlay-topbar { padding: 0.5rem 0.9rem; }
  #table-overlay .chart-overlay-main { padding: 0.5rem 0.75rem; overflow: hidden; display: flex; flex-direction: column; }
  #table-overlay .screen-table-wrap { overflow: auto; max-height: calc(100vh - 78px); }
  #table-overlay .ds-table { font-size: 11px; }
  #table-overlay .ds-table th { padding: 4px 6px; white-space: normal; line-height: 1.25; vertical-align: bottom; position: sticky; top: 0; z-index: 2; background: var(--surface); }
  #table-overlay .ds-table td { padding: 3px 5px; white-space: nowrap; max-width: 105px; overflow: hidden; text-overflow: ellipsis; }
  #table-overlay .ds-table td:first-child { max-width: none; }
  #table-overlay .ds-table td .ds-badge, #table-overlay .ds-table td .badge { font-size: 10px; padding: 1px 5px; }
  #table-overlay .ds-table th:first-child, #table-overlay .ds-table td:first-child { position: sticky; left: 0; background: var(--surface); z-index: 1; box-shadow: 1px 0 0 var(--border); }
  #table-overlay .ds-table th:first-child { z-index: 3; }
  #table-overlay .ds-table tbody tr:hover td:first-child { background: var(--surface-2); }

  /* Bouton "Partager une idée" (6/9/2026) — popup repris de iecho.ca
     (src/components/FeedbackWidget.astro), adapté aux jetons de castellana
     (--surface/--text/--accent au lieu des variables --fond/--texte/
     --accent propres au thème d'iecho.ca). Même formulaire Formspree que
     iecho.ca (voir js/feedback-widget.js) — seule différence demandée :
     "Produit concerné" est pré-sélectionné sur castellana au lieu de vide. */
  .feedback-bouton {
    position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 55;
    display: flex; align-items: center; gap: 0.5rem;
    font: inherit; font-size: 13px; font-weight: 600; color: #fff;
    background: var(--accent); border: none; border-radius: var(--ds-radius-pill);
    padding: 0.65rem 1.1rem; cursor: pointer; box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  }
  .feedback-bouton:hover { filter: brightness(1.08); }
  .feedback-dialogue {
    border: 1px solid var(--border); border-radius: var(--ds-radius-lg);
    background: var(--surface); color: var(--text); padding: 0; width: min(92vw, 26rem);
  }
  .feedback-dialogue::backdrop { background: rgba(0,0,0,0.6); backdrop-filter: blur(2px); }
  .feedback-inner { padding: 1.5rem; }
  .feedback-inner h2 { font-size: 16px; font-weight: 700; }
  .feedback-inner .feedback-intro { color: var(--text-2); font-size: 13px; margin: 0.4rem 0 1rem; }
  .feedback-inner label { display: block; font-size: 12px; color: var(--text-3); margin: 0.8rem 0 4px; }
  .feedback-inner textarea.ds-textarea { min-height: 6.5rem; }
  .feedback-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 1.1rem; }
  .feedback-message { margin-top: 0.8rem; font-size: 13px; min-height: 1.2em; }
  .feedback-message.ok { color: var(--green); }
  .feedback-message.erreur { color: var(--amber); }

  /* Onglet "Concepts" du panneau Réglages (6/9/2026) — 15 fiches
     pédagogiques repliables, transcrites de investment-dashboard/. */
  .concept-card { margin-bottom: 10px; }
  .concept-card summary { cursor: pointer; font-weight: 600; color: var(--text); padding: 4px 0; }
  .concept-card summary:hover { color: var(--accent); }
  .concept-body { margin-top: 10px; }
  .concept-body p { font-size: 13px; color: var(--text); line-height: 1.6; margin: 0 0 8px; }
  .concept-body ul { margin: 0 0 8px; padding-left: 20px; }
  .concept-body li { font-size: 13px; color: var(--text); line-height: 1.6; margin-bottom: 4px; }
  .opt-table td, .opt-table th { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .opt-table .opt-group { text-align: center; }
  .opt-table .opt-strike { text-align: center; background: var(--surface-2); }
  .opt-table tr.opt-atm td { border-top: 2px solid var(--accent); border-bottom: 2px solid var(--accent); }
  /* Styles de F3/G2 (8/10/2026) — js/table-styles.js, choix dans Réglages → Personnalisation */
  .opt-table.tsx td.opt-rule-limit { outline: none; background: none; font-weight: inherit; }
  .opt-table.tsx td.good { color: var(--green); font-weight: 700; }
  .ts-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; background: var(--border); }
  .ts-dot.ok { background: var(--green); box-shadow: 0 0 0 3px var(--green-bg, rgba(46,160,67,.18)); }
  .ts-tag { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; border-radius: 4px; padding: 1px 6px; margin-left: 8px; background: var(--accent); color: #fff; vertical-align: 2px; font-weight: 600; }
  .ts-tag-g { background: var(--text-2); } .ts-tag-w { background: var(--amber); }
  .ts-pill { background: var(--green); color: #fff; border-radius: 999px; padding: 1px 8px; font-size: 11px; margin-left: 6px; font-weight: 600; }
  .ts-gauge { position: relative; height: 18px; min-width: 110px; background: var(--surface-2); border-radius: 4px; overflow: hidden; text-align: right; }
  .ts-gauge b { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, rgba(150,150,150,.35), rgba(150,150,150,.55)); }
  .ts-gauge.ok b { background: linear-gradient(90deg, rgba(46,160,67,.35), rgba(46,160,67,.8)); }
  .ts-gauge u { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--text); opacity: .7; }
  .ts-gauge span { position: relative; z-index: 1; padding-right: 6px; font-weight: 600; line-height: 18px; }
  .ts-sig { display: inline-block; width: 150px; height: 20px; vertical-align: middle; }
  .ts-spot { display: flex; align-items: center; gap: 10px; color: var(--accent); font-weight: 700; font-size: 12px; }
  .ts-spot::before, .ts-spot::after { content: ''; flex: 1; border-top: 2px solid var(--accent); }
  .opt-table.tsx tr.spot td { padding: 2px 8px; background: none; }
  /* 1 — thermomètre */
  .opt-table.tsx1 tr.itm td.opt-strike { box-shadow: inset 3px 0 0 var(--accent); }
  /* 2 — ligne du prix */
  .opt-table.tsx2 tr.otm td { background: linear-gradient(90deg, rgba(46,160,67,.10), transparent 70%); }
  .opt-table.tsx2 tr.itm td { background: linear-gradient(90deg, rgba(60,110,255,.14), rgba(60,110,255,.04)); }
  .opt-table.tsx2 tr.lim td { border-top: 1px dashed var(--green); border-bottom: 1px dashed var(--green); font-weight: 700; }
  /* 3 — carte thermique */
  .opt-table.tsx3 tr.itm td.opt-strike { text-decoration: underline dotted var(--accent) 2px; text-underline-offset: 4px; }
  .opt-table.tsx3 td.heat { font-weight: 600; }
  /* 4 — rails */
  .opt-table.tsx4 { border-collapse: separate; border-spacing: 0 3px; }
  .opt-table.tsx4 td { background: var(--surface-2); }
  .opt-table.tsx4 td:first-child { border-radius: 8px 0 0 8px; border-left: 5px solid var(--border); font-size: 15px; font-weight: 700; text-align: left; }
  .opt-table.tsx4 td:last-child { border-radius: 0 8px 8px 0; }
  .opt-table.tsx4 tr.ok td:first-child { border-left-color: var(--green); }
  .opt-table.tsx4 tr.warn td:first-child { border-left-color: var(--amber); }
  .opt-table.tsx4 tr.itm td { background: var(--accent-bg); }
  .opt-table.tsx4 tr.under td { opacity: .55; }
  .opt-table.tsx4 tr.lim td { box-shadow: inset 0 2px 0 var(--accent), inset 0 -2px 0 var(--accent); opacity: 1; }
  .opt-table.tsx4 tr.opt-atm td { border-top: 0; border-bottom: 0; }
  /* 5 — échelle de σ */
  .opt-table.tsx5 tr.lim td { background: var(--green-bg, rgba(46,160,67,.18)); }
  .opt-table.tsx5 tr.itm td.opt-strike { color: var(--accent); }
  /* Réglages → Personnalisation */
  .settings-main.is-wide { max-width: none; }
  .settings-main.is-wide .perso-grid { grid-template-columns: repeat(auto-fit, minmax(560px, 1fr)); }
  .perso-grid { display: grid; gap: 12px; }
  .perso-card { display: block; border: 2px solid var(--border); border-radius: 10px; padding: 10px 12px; cursor: pointer; background: var(--surface); }
  .perso-card:hover { border-color: var(--text-2); }
  .perso-card.is-selected { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
  .perso-head { display: flex; gap: 8px; align-items: center; }
  .perso-pitch { font-size: 12px; color: var(--text-2); margin: 4px 0 8px; }
  .perso-prev { overflow-x: auto; pointer-events: none; }
  .perso-prev .opt-table { font-size: 12px; }
  .opt-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 4px 0 8px; font-size: 12px; color: var(--text-2); }
  .opt-legend-item { display: inline-flex; align-items: center; gap: 6px; }
  .opt-legend-sw { width: 14px; height: 14px; border-radius: 3px; display: inline-block; flex: none; }
  .opt-legend-sw.sw-green { background: var(--green-bg, rgba(46,160,67,.18)); box-shadow: inset 0 -2px 0 var(--green); }
  .opt-legend-sw.sw-blue { background: var(--accent-bg); }
  .opt-legend-sw.sw-blueline { background: var(--accent-bg); outline: 2px solid var(--accent); outline-offset: -2px; }
  .opt-legend-sw.sw-atm { border-top: 2px solid var(--accent); border-bottom: 2px solid var(--accent); }
  .opt-legend-sw.sw-grey { background: var(--surface-2); opacity: .6; }
  .opt-legend-sw.sw-amber { background: var(--amber-bg, rgba(217,119,6,.18)); box-shadow: inset 0 -2px 0 var(--amber); }
  .opt-table td.opt-itm { background: var(--accent-bg); }
  .janl-under-rule td { opacity: .62; }
  .janl-top { position: relative; min-height: 165px; }
  .janl-filters-box { position: absolute; top: 0; right: 0; width: 330px; display: flex; flex-direction: column; gap: var(--ds-space-2); }
  .janl-pr { padding-right: 350px; }
  @media (max-width: 900px) { .janl-filters-box { position: static; width: auto; margin-bottom: var(--ds-space-3); } .janl-pr { padding-right: 0; } }
  .opt-table td.opt-rule-limit { outline: 2px solid var(--accent); outline-offset: -2px; font-weight: 700; background: var(--accent-bg); }
  .opt-table td.opt-rule-ok { background: var(--green-bg, rgba(46,160,67,.18)); box-shadow: inset 0 -2px 0 var(--green); font-weight: 600; }
  .concept-note { background: var(--accent-bg); border-radius: var(--ds-radius-sm); padding: 8px 10px; font-size: 13px; color: var(--text); }
  .concept-note--piege { background: var(--amber-bg); }
  .concept-intro-note { background: var(--amber-bg); border-radius: var(--ds-radius-sm); padding: 8px 10px; font-size: 13px; color: var(--text); margin-bottom: 1rem; }

  /* Bascule de thème (feature 321) — positionnée en haut à droite du header */
  .header-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
  /* Banderole VIX/COR1M/VIXEQ/DSPX (28/9/2026) — sa propre ligne sous le
     titre, plus sur la même ligne que .header-top (trop serré). */
  .header-indices { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0.75rem 0 0; }

  /* Disclaimer bilingue (30/8/2026) — même patron que marbella (calc-retirement) */
  .disclaimer { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1rem 0; }
  @media (max-width: 620px) { .disclaimer { grid-template-columns: 1fr; } }
  .disclaimer-block { background: var(--amber-bg); border-radius: var(--ds-radius-sm); padding: 0.75rem 1rem; }
  .disclaimer-lang { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--amber); margin-bottom: 4px; }
  .disclaimer-text { font-size: 12px; color: var(--amber); line-height: 1.5; }
  /* Disclaimer réductible (27/9/2026, demande de JP) — <details> natif, même
     patron que .tab-intro (« À propos de cet onglet ») : ouvert par défaut,
     l'état replié/déplié est persisté en localStorage (comme le thème et les
     repères d'interface) plutôt que redemandé à chaque rechargement. */
  .disclaimer-wrap { margin: 1rem 0; }
  .disclaimer-wrap .disclaimer { margin: 0.5rem 0 0; }
  .disclaimer-summary { cursor: pointer; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--amber); list-style: none; }
  .disclaimer-summary::-webkit-details-marker { display: none; }
  .disclaimer-summary::before { content: '▸'; display: inline-block; margin-right: 6px; transition: transform .15s; }
  .disclaimer-wrap[open] > .disclaimer-summary::before { transform: rotate(90deg); }
  .disclaimer-summary-hint { font-weight: 400; text-transform: none; letter-spacing: normal; color: var(--text-2); margin-left: 6px; }

  /* Info-bulle pédagogique par indicateur (feature 321, glossaire) */
  .info-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--border);
    background: var(--surface-2); color: var(--text-2); font-size: 11px; font-weight: 700;
    cursor: pointer; margin-left: 4px; vertical-align: middle; line-height: 1; padding: 0;
  }
  .info-btn:hover { color: var(--accent); border-color: var(--accent); }
  #glossaire-pop {
    position: fixed; z-index: 100; max-width: 340px; display: none;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--ds-radius-lg);
    box-shadow: 0 8px 24px rgba(0,0,0,.28); padding: 14px 16px; font-size: 13px;
  }
  #glossaire-pop h4 { font-size: 13px; font-weight: 700; margin-bottom: 6px; }
  #glossaire-pop .gp-quoi { color: var(--text); margin-bottom: 6px; }
  #glossaire-pop .gp-pourquoi { color: var(--text-2); margin-bottom: 8px; }
  #glossaire-pop .gp-bande { display: flex; gap: 8px; align-items: baseline; margin: 3px 0; }
  #glossaire-pop .gp-seuil { font-weight: 600; min-width: 92px; flex-shrink: 0; }
  #glossaire-pop .gp-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
  #glossaire-pop .gp-close { float: right; cursor: pointer; color: var(--text-2); border: none; background: none; font-size: 15px; line-height: 1; }
  .gp-vert { background: var(--green); } .gp-amber { background: var(--amber); } .gp-rouge { background: var(--red); }

  /* Filtres de screening (feature 322) */
  .screen-filters { display: flex; flex-wrap: wrap; gap: 10px 16px; margin: 10px 0; padding: 10px 12px; background: var(--surface-2); border-radius: var(--ds-radius-sm); font-size: 12px; }
  .screen-filters label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; color: var(--text-2); }
  .screen-filters .filter-title { font-weight: 600; color: var(--text); width: 100%; margin-bottom: 2px; }
  /* T5/T6 (6/9/2026) — configuration des plages Prix/Float, en haut du bloc de filtres */
  .screen-filter-ranges { display: flex; flex-wrap: wrap; gap: 16px; width: 100%; margin-bottom: 6px; padding-bottom: 10px; border-bottom: 0.5px solid var(--border); }
  .sfr-field label { display: block; cursor: default; color: var(--text-2); margin-bottom: 4px; }
  .sfr-inputs { display: flex; align-items: center; gap: 6px; }
  .sfr-inputs .ds-input { width: 90px; }
  .num-dim { color: var(--text-2); }
  tr.row-filtered { opacity: .32; }

  /* Encadré "Comment lire les colonnes" (T1/T2, 12/9/2026) — au-dessus des
     deux tableaux qui partagent Variation/Contexte/Setup/Signal (Screener
     et "Titres les plus performants du secteur"). Un seul générateur HTML,
     columnLegendHTML(), injecté aux deux endroits — pas de contenu dupliqué
     à la main qui pourrait diverger. */
  .column-legend { background: var(--surface-2); border-radius: var(--ds-radius-sm); padding: 10px 12px; margin: 10px 0; font-size: 12px; }
  .column-legend-title { font-weight: 600; color: var(--text); margin-bottom: 6px; }
  .column-legend-grid { display: grid; grid-template-columns: max-content 1fr; gap: 4px 10px; margin: 0; }
  .column-legend-grid dt { font-weight: 600; color: var(--text); white-space: nowrap; }
  .column-legend-grid dd { margin: 0; color: var(--text-2); line-height: 1.5; }
  @media (max-width: 620px) { .column-legend-grid { grid-template-columns: 1fr; } .column-legend-grid dt { margin-top: 6px; } }

  /* Journal de trades (feature 323) */
  .journal-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 1rem; }
  .journal-form label { display: block; font-size: 12px; color: var(--text-2); margin-bottom: 3px; }
  .journal-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
  .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 1rem; }
  .stats-block h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); margin-bottom: 6px; }
  .stats-row { display: flex; justify-content: space-between; font-size: 13px; padding: 3px 0; border-bottom: 1px solid var(--border); }
  .stats-row .sr-val { font-weight: 600; }
  .win-good { color: var(--green); } .win-bad { color: var(--red); }
  .muted-empty { color: var(--text-2); font-style: italic; font-size: 13px; }

  /* Line graph de performance sectorielle (feature — 29/8/2026). 11 couleurs
     catégorielles (les 8 premières issues de la palette dataviz de
     référence, validée CVD ; les 3 suivantes ajoutées pour couvrir les 11
     secteurs — non passées par le validateur, mitigé par les libellés en
     bout de ligne + la légende + l'infobulle, jamais la couleur seule). Le
     benchmark S&P 500 est volontairement hors palette catégorielle (encre
     neutre + trait pointillé) : c'est un repère, pas un secteur de plus. */
  :root {
    --sc-1: #2a78d6; --sc-2: #eb6834; --sc-3: #1baf7a; --sc-4: #eda100;
    --sc-5: #e87ba4; --sc-6: #008300; --sc-7: #4a3aa7; --sc-8: #e34948;
    --sc-9: #0e7c86; --sc-10: #8a5a2b; --sc-11: #5b6b8c;
    /* Grands indices régionaux + USD (refonte 11/9/2026) — palette DÉDIÉE,
       hors des 11 teintes de secteurs GICS ci-dessus, pour qu'une ligne ne
       soit jamais confondue visuellement avec un secteur. Les lignes de
       marché portent en plus leur propre style de trait (voir
       .sector-chart-line.is-market) — jamais la couleur seule. */
    --mkt-dxy: #b8890a; --mkt-world: #2f9e8f; --mkt-europe: #c04fae;
    --mkt-japan: #d13b3b; --mkt-em: #4f6fd1; --mkt-china: #7a9b1f;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --sc-1: #3987e5; --sc-2: #d95926; --sc-3: #199e70; --sc-4: #c98500;
      --sc-5: #d55181; --sc-6: #15a815; --sc-7: #9085e9; --sc-8: #e66767;
      --sc-9: #29a7b3; --sc-10: #c98a4a; --sc-11: #8fa0c4;
      --mkt-dxy: #d4a637; --mkt-world: #4bc2b0; --mkt-europe: #dd7bcd;
      --mkt-japan: #e56767; --mkt-em: #7d95e6; --mkt-china: #a3c445;
    }
  }
  :root[data-theme="dark"] {
    --sc-1: #3987e5; --sc-2: #d95926; --sc-3: #199e70; --sc-4: #c98500;
    --sc-5: #d55181; --sc-6: #15a815; --sc-7: #9085e9; --sc-8: #e66767;
    --sc-9: #29a7b3; --sc-10: #c98a4a; --sc-11: #8fa0c4;
    --mkt-dxy: #d4a637; --mkt-world: #4bc2b0; --mkt-europe: #dd7bcd;
    --mkt-japan: #e56767; --mkt-em: #7d95e6; --mkt-china: #a3c445;
  }
  .period-btn.is-active { background: var(--accent); color: var(--surface); border-color: var(--accent); }
  .sector-chart-wrap { position: relative; margin: 4px 0; }
  #sector-chart { width: 100%; height: auto; display: block; }
  .sector-chart-grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 3; opacity: .8; }
  .sector-chart-axis-label { fill: var(--text-2); font-size: 10px; }
  .sector-chart-line { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  /* Épaisseur CONSTANTE à l'écran (8/10/2026) : en vue agrandie, le viewBox du SVG (1400×560) est étiré
     à la fenêtre et épaississait lignes, grille et repères. non-scaling-stroke garde les traits à leur
     taille de la vue normale (trait et pointillés en pixels d'écran). */
  .sector-chart-line, .sector-chart-grid, .sector-chart-crosshair, .perf-dot { vector-effect: non-scaling-stroke; }
  .sector-legend-pct { font-weight: 600; font-variant-numeric: tabular-nums; }
  .perf-dot { stroke: var(--surface); stroke-width: 2; pointer-events: none; }
  .period-select { height: 34px; }
  .sector-chart-line.is-benchmark { stroke-dasharray: 5 4; stroke-width: 2; }
  /* Grands indices régionaux/USD (refonte 11/9/2026) — trait pointillé fin,
     distinct du tiret long du S&P 500 et du plein des secteurs GICS : la
     catégorie se lit au style du trait, pas seulement à la couleur. */
  .sector-chart-line.is-market { stroke-dasharray: 1.5 3; stroke-width: 1.75; }
  /* RSP (S&P 500 équipondéré) : petits points ronds (trait de longueur nulle + bouts arrondis), autre tracé que le S&P 500 (SPY, tirets). */
  .sector-chart-line.is-equal { stroke-dasharray: 0.01 4; stroke-width: 2.25; }
  .sector-chart-endlabel { font-size: 10px; font-weight: 600; }
  .sector-chart-endlabel.is-fallback { font-style: italic; }
  .sector-chart-crosshair { stroke: var(--text-2); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
  .sector-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 4px; font-size: 12px; }
  .sector-legend-item { display: flex; align-items: center; gap: 6px; cursor: pointer; color: var(--text-2); user-select: none; }
  .sector-legend-item.is-off { opacity: .35; text-decoration: line-through; }
  .sector-legend-swatch { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; display: inline-block; }
  .sector-tooltip {
    position: absolute; pointer-events: none; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--ds-radius-sm); padding: 8px 10px; font-size: 12px;
    box-shadow: 0 4px 14px rgba(0,0,0,.22); z-index: 5; min-width: 160px;
  }
  .sector-tooltip .st-date { font-weight: 600; margin-bottom: 4px; color: var(--text); }
  .sector-tooltip .st-row { display: flex; justify-content: space-between; gap: 10px; padding: 1px 0; }
  .sector-tooltip .st-row .st-val { font-weight: 600; }

  /* Onglet Labo (5/9/2026) — séquence pas-à-pas d'une stratégie d'options */
  .labo-step { margin-bottom: 1.1rem; padding-bottom: 1.1rem; border-bottom: 0.5px solid var(--border); }
  .labo-step:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
  /* Case à cocher par étape (T9, 12/9/2026, demande de JP) — greffier, pas
     un arbitre : ne fait que barrer visuellement, aucun état n'est requis
     pour avancer. État en mémoire (checkbox du DOM), pas persisté — recharger
     les données du titre régénère la séquence et réinitialise, ce qui est
     attendu (nouvelle analyse). */
  .labo-data-wrap > summary { cursor: pointer; margin-bottom: 0.75rem; }
  .labo-explain { background: var(--surface-2); border-radius: var(--ds-radius-sm); padding: 0.6rem 0.85rem; }
  .labo-explain h4 { margin: 0.4rem 0 0.2rem; font-size: 13px; }
  .labo-explain p, .labo-explain li { font-size: 13px; line-height: 1.55; }
  .labo-explain ul { padding-left: 1.1rem; margin: 0 0 0.4rem; }
  .labo-pt { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
  .labo-pt input[type=checkbox] { margin-top: 3px; width: 14px; height: 14px; accent-color: var(--green); flex-shrink: 0; cursor: pointer; }
  .labo-pt.is-done > span { color: var(--text-2); text-decoration: line-through; opacity: .6; }
  .labo-step-titre { display: flex; align-items: flex-start; gap: 8px; font-weight: 700; font-size: 14px; margin-bottom: 6px; color: var(--text); cursor: pointer; }
  .labo-step-titre input[type=checkbox] { margin-top: 2px; width: 15px; height: 15px; accent-color: var(--green); flex-shrink: 0; cursor: pointer; }
  .labo-step.is-done .labo-step-titre { color: var(--text-2); text-decoration: line-through; }
  .labo-step.is-done ul { opacity: .55; }
  .labo-step ul { padding-left: 1.1rem; display: flex; flex-direction: column; gap: 4px; }
  .labo-step li { font-size: 13px; color: var(--text); line-height: 1.5; }
  /* T1 (5/9/2026) — distingue visuellement une valeur DYNAMIQUE (calculée à
     partir du ticker/des données chargées) du texte STATIQUE de la règle. */
  .labo-dyn { font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
  /* Paramètres éditables d'une stratégie (feature « Options », 19/9/2026) :
     un vrai champ, souligné en pointillé, distinct du dynamique (gras) et du
     statique. Modifié = trait plein + fond ambre + ↺ pour revenir au défaut. */
  .labo-param-wrap { display: inline-flex; align-items: baseline; gap: 2px; white-space: nowrap; }
  .labo-param { font: inherit; font-weight: 700; color: var(--accent); background: transparent; border: none; border-bottom: 1px dashed var(--accent); border-radius: 0; padding: 0 2px; text-align: center; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
  .labo-param::-webkit-outer-spin-button, .labo-param::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  .labo-param:hover { background: var(--surface-2); }
  .labo-param:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-bottom-color: transparent; }
  .labo-param-wrap.is-modified .labo-param { border-bottom-style: solid; background: var(--amber-bg); }
  .labo-param-unit, .labo-param-sep { color: var(--text-2); font-weight: 400; margin: 0 2px; }
  .labo-param-reset { border: none; background: transparent; color: var(--amber); cursor: pointer; font-size: 12px; padding: 0 2px; line-height: 1; }
  .labo-param-reset:hover { color: var(--text); }
  .labo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 0.85rem; }
  .labo-export { margin-top: 0.6rem; padding: 10px 12px; background: var(--surface-2); border-radius: var(--ds-radius-sm); font-size: 13px; }
  .labo-export summary { cursor: pointer; font-weight: 600; }
  .labo-export label { display: block; margin: 4px 0; cursor: pointer; }
  /* Panneau "Comment ces prix sont calculés" (T2) — <details> natif */
  .labo-analyse { margin-top: 0.5rem; padding: 10px 12px; background: var(--surface-2); border-radius: var(--ds-radius-sm); font-size: 13px; }
  .labo-analyse summary { cursor: pointer; font-weight: 600; color: var(--text); }
  .labo-analyse table { margin-top: 8px; }
  /* T3 (5/9/2026) — les 3 paramètres SMA doivent être au même niveau visuel :
     un .row générique donne 260px au 1er label et laissait les 2 autres en
     largeur auto (surchargée en ligne), d'où le décalage. Grille dédiée,
     3 colonnes égales, label au-dessus de son champ. */
  .labo-sma-params { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .labo-sma-field label { display: block; font-size: 13px; color: var(--text-2); margin-bottom: 4px; }
  .labo-sma-field .ds-input { width: 100%; }
  @media (max-width: 620px) { .labo-sma-params { grid-template-columns: 1fr; } }

.ai-block ul { margin: 4px 0 8px 18px; padding: 0; }
.ai-block li { margin-bottom: 4px; }
.ai-warn { color: var(--amber); font-weight: 600; margin: 0 0 8px; }

  /* TD Sequential (24/10/2026) : badge, bloc de la section Symbole, graphique à chandelles. */
  .td-badge {
    display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700;
    border: 1.5px solid currentColor; background: transparent; cursor: pointer; font-family: inherit;
    font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.5;
  }
  .td-badge.td-buy { color: var(--green); }
  .td-badge.td-sell { color: var(--red); }
  .td-badge.td-done.td-buy { background: var(--green-bg); }
  .td-badge.td-done.td-sell { background: var(--red-bg); }
  .td-badge:hover { filter: brightness(1.15); }
  .td-none { color: var(--text-3); font-size: 12px; }
  .td-block { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--ds-radius-sm, 6px); }
  .td-block.td-clickable { cursor: pointer; }
  .td-block.td-clickable:hover { border-color: var(--accent); }
  .td-block-main { display: flex; align-items: center; gap: 0.7rem; flex: 1 1 260px; min-width: 0; }
  .td-block-main .td-badge { font-size: 15px; padding: 4px 14px; }
  .td-block-text { font-size: 12px; color: var(--text-2); }
  .td-mini { flex: 0 1 360px; min-width: 200px; }
  .td-mini-note { font-size: 11px; color: var(--text-3); }
  .td-controls { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.5rem; font-size: 12px; color: var(--text-2); }
  .td-controls select { margin-left: 4px; }
  .td-explain { font-size: 13px; line-height: 1.55; padding: 10px 12px; margin-bottom: 0.75rem; border: 1px solid var(--border); border-radius: var(--ds-radius-sm, 6px); background: var(--surface-2, var(--surface)); }
  .td-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; font-size: 11.5px; color: var(--text-2); margin: 0.5rem 0; }
  .td-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; }

  /* Rangée « Symbole évalué · Récupérer · Entreprise · Industrie » (24/10/2026) : le bouton garde son texte sur une ligne. */
  .field-grid--sym { grid-template-columns: minmax(0, 1.1fr) auto minmax(0, 1.5fr) minmax(0, 1.5fr); }
  .field-grid--sym .ds-btn { white-space: nowrap; }
  @media (max-width: 700px) { .field-grid--sym { grid-template-columns: repeat(2, minmax(0, 1fr)); } }