/* ═══ PROMETHEUS — LA COQUILLE ═══════════════════════════════════════════════
   Chargée après style.css et theme3d.css. Elle ne touche QUE la coquille :
   barre supérieure, navigation, en-têtes de section, cartes cliquables, états
   vides, surfaces navigateur. Les tableaux de chiffres, les graphiques ECharts
   et les fiches de données ne sont pas dans son périmètre — c'est la décision
   prise avec l'utilisateur : coquille spectaculaire, données calmes.

   Un chiffre qu'on lit ne bouge pas. Cette règle prime sur tout le reste.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. SURFACES NAVIGATEUR ────────────────────────────────────────────────
   Barres de défilement, sélection, curseur de saisie, anneaux de focus : tout
   cela s'affichait aux valeurs par défaut de Chrome, qui n'appartiennent à
   aucun système de design. Sur un outil où l'on passe des heures à faire
   défiler des tableaux, la barre de défilement est un composant à part
   entière, pas un détail du navigateur.                                      */
* { scrollbar-width: thin; scrollbar-color: #2f3a55 transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #2f3a55; border-radius: 7px;
  border: 3px solid var(--bg);            /* marge optique : le pouce ne colle pas au bord */
  transition: background .18s ease;
}
::-webkit-scrollbar-thumb:hover { background: #47547a; }
::-webkit-scrollbar-corner { background: transparent; }
:root[data-theme="light"] * { scrollbar-color: #c2ccdc transparent; }
:root[data-theme="light"] ::-webkit-scrollbar-thumb { background: #c2ccdc; }
:root[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #a6b3c8; }

::selection { background: rgba(244, 164, 40, .28); color: var(--text); }
input, textarea, select { caret-color: var(--accent); }

/* Anneau de focus : visible au clavier, absent à la souris. Le contour par
   défaut de Chrome est bleu système et disparaît sous nos fonds sombres. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 5px;
}
a { text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ── 2. BARRE SUPÉRIEURE — la seule surface en verre de l'application ──────
   Le flou n'est pas une décoration ici : la barre reste au-dessus du contenu
   qui défile, et le voir passer dessous situe la profondeur. Ailleurs, aucun
   verre.                                                                     */
#topbar {
  position: sticky; top: 0; z-index: 60;
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  background: color-mix(in srgb, var(--bg2) 82%, transparent);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04), 0 10px 30px -20px rgba(0, 0, 0, .9);
}
/* Filet d'accent sous la barre : 1px, à l'échelle de la fenêtre. */
#topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent) 22%, var(--accent2) 55%, transparent);
  opacity: .5; pointer-events: none;
}

/* Le losange de marque tourne lentement sur lui-même en 3D. C'est le seul
   élément en mouvement permanent de l'interface, et il est minuscule. */
.brand .flame {
  transform-style: preserve-3d;
  animation: brand-spin 14s linear infinite;
  will-change: transform;
}
@keyframes brand-spin {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}

/* ── 3. NAVIGATION ─────────────────────────────────────────────────────────
   17 entrées : la lisibilité de l'onglet actif prime sur l'effet. Le
   soulignement animé vit déjà dans theme3d.css ; on ajoute ici l'icône et le
   comportement de survol.                                                    */
#main-nav .nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 7px; transition: color .16s ease, background-color .16s ease;
}
#main-nav .nav-link .ico { width: 15px; height: 15px; flex: 0 0 15px; opacity: .72;
  transition: opacity .16s ease, transform .16s ease; }
#main-nav .nav-link:hover .ico { opacity: 1; transform: translateY(-1px); }
#main-nav .nav-link.active .ico { opacity: 1; color: var(--accent); }
#main-nav .nav-link:hover { background: rgba(255, 255, 255, .04); }
:root[data-theme="light"] #main-nav .nav-link:hover { background: rgba(20, 30, 50, .05); }

.hdr-btn .ico { width: 16px; height: 16px; display: block; }

/* ── 4. ÉCHELLE TYPOGRAPHIQUE ──────────────────────────────────────────────
   L'interface utilisait SEPT tailles entre 11 et 15 px : 11, 11.5, 12, 12.5,
   13, 13.5, 15. Des pas d'un demi-pixel ne se voient pas — ce n'est pas une
   hiérarchie, c'est du bruit, et l'œil ne peut plus s'appuyer sur la taille
   pour savoir ce qui compte. Quatre marches, écartées d'un rapport ~1,2 :     */
:root {
  --t-micro: 11px;      /* étiquettes, unités, mentions de fraîcheur */
  --t-body:  13px;      /* texte courant, cellules de tableau        */
  --t-lead:  15px;      /* titres de panneau                          */
  --t-display: 19px;    /* titres de section et valeurs mises en avant */
}
.panel-head h3 {
  font-size: var(--t-lead); font-weight: 650; letter-spacing: -.012em;
  line-height: 1.25;
}
.panel.slim .panel-head h3 { font-size: var(--t-body); font-weight: 620; }
/* Les composants de la coquille s'alignent sur l'échelle. Les surfaces de
   données gardent leurs tailles propres : elles sont hors périmètre. */
.ic-name { font-size: var(--t-body); font-weight: 620; letter-spacing: -.008em; }
.ic-short { font-size: 12.5px; line-height: 1.5; }
.ic-status, .ic-stamp, .chip { font-size: var(--t-micro); }
.vcard .t { font-size: var(--t-micro); letter-spacing: .045em; text-transform: uppercase; }
.vcard .v { font-size: var(--t-display); font-weight: 660; letter-spacing: -.02em; }
.vcard .s { font-size: 11.5px; }
.chart-note { font-size: 11.5px; line-height: 1.55; }
/* Plus d'espace AU-DESSUS d'un titre qu'en dessous : il appartient à ce qui suit. */
.panel + .panel, .panel + .grid-2, .grid-2 + .panel { margin-top: 18px; }

/* ── 5. CARTES CLIQUABLES — vraie inclinaison 3D ───────────────────────────
   Les variables --rx / --ry sont écrites par shell.js à partir de la position
   du curseur DANS la carte. Ce n'est pas une imitation de relief : la carte
   pivote réellement autour de deux axes dans un espace en perspective, et le
   reflet suit le point de contact.                                           */
/* Spécificité : theme3d.css porte un `.olympe-card:hover { transform: … }`
   (0-2-0) qui écrasait `.tilt-3d` (0-1-0) — la carte se contentait donc de
   monter de 4 px, sans jamais pivoter. La coquille reprend la transformation à
   son compte, y compris à l'état survolé, et theme3d ne la dispute plus. */
.olympe-card.tilt-3d, .ind-card.tilt-3d,
.olympe-card.tilt-3d:hover, .ind-card.tilt-3d:hover,
.olympe-card.tilt-3d:active, .ind-card.tilt-3d:active {
  transform-style: preserve-3d;
  transform: perspective(900px)
             rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg))
             translate3d(0, var(--lift, 0px), 0);
  transition: transform .22s cubic-bezier(.16, .84, .44, 1);
}
.olympe-card.tilt-3d.is-tilting, .ind-card.tilt-3d.is-tilting {
  transition: transform .06s linear;                         /* suit le curseur sans traîner */
}
.tilt-3d > * { transform: translateZ(0.01px); }              /* évite le crénelage du texte */

/* Reflet directionnel : sa position vient du curseur (--mx / --my). */
.tilt-3d .sheen {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity .22s ease; z-index: 0;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%),
              rgba(244, 164, 40, .16), transparent 62%);
}
.tilt-3d:hover .sheen { opacity: 1; }

/* ── 5b. MÉTRIQUES DES CARTES DE STRATÉGIE ─────────────────────────────────
   `.oc-metrics` n'avait AUCUNE règle de mise en page : le libellé et la valeur
   étaient deux éléments inline collés l'un à l'autre, et on lisait
   « Sharpe net-0.07 », « Vol7.53 % ». Sur une carte dont l'unique fonction est
   de comparer huit chiffres d'un coup d'œil, c'est le défaut le plus coûteux
   de la page.
   Deux colonnes : libellé aligné à gauche, valeur alignée à droite en chiffres
   tabulaires — les décimales s'empilent donc verticalement d'une ligne à
   l'autre, ce qui est tout l'intérêt.                                        */
.oc-metrics {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 18px; padding: 2px 0;
}
.oc-metrics > div {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; min-width: 0;
  padding: 2.5px 0; border-bottom: 1px solid rgba(255, 255, 255, .035);
}
:root[data-theme="light"] .oc-metrics > div { border-bottom-color: rgba(20, 30, 50, .05); }
.oc-metrics > div > span { font-size: 11.5px; white-space: nowrap; }
.oc-metrics > div > b {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 620px) { .oc-metrics { grid-template-columns: 1fr; } }

/* ── 6. BORDURES D'ACCENT ──────────────────────────────────────────────────
   Le liseré coloré de 3 px sur les cartes et les encarts est un tic : il
   remplace une hiérarchie par une couleur. Ramené à 1 px, la couleur reste
   lisible et la carte retrouve son contour.                                  */
.ind-card { border-left-width: 1px !important; position: relative; }
.ind-card::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px;
  border-radius: 0 2px 2px 0; background: currentColor; opacity: .5;
  pointer-events: none;
}

/* ── 7. TRANSITION ENTRE VUES — le moment de mouvement de l'application ────
   Un seul geste, orchestré, au changement de section. Pas d'entrée animée
   répétée sur chaque bloc : ce serait 20 fois la même idée.
   L'API View Transitions le fait à l'échelle du document quand elle existe ;
   la règle @keyframes ci-dessous est le repli pour les navigateurs sans elle. */
@keyframes view-in {
  from { opacity: 0; transform: translate3d(0, 10px, 0) scale(.995); }
  to   { opacity: 1; transform: none; }
}
::view-transition-old(root) { animation: none; opacity: 0; }
::view-transition-new(root) { animation: view-in .34s cubic-bezier(.16, .84, .44, 1); }
.view-enter { animation: view-in .3s cubic-bezier(.16, .84, .44, 1) both; }

/* ── 8. CHAMP DE PROFONDEUR ────────────────────────────────────────────────
   Toile posée derrière toute l'application, dessinée par shell.js en
   projection perspective réelle. Elle ne capte jamais le pointeur et
   s'interrompt dès que l'onglet passe en arrière-plan.                       */
/* `inset:0` NE suffit PAS ici : <canvas> est un élément remplacé, sa largeur
   `auto` se résout à sa taille intrinsèque (300×150) au lieu de s'étirer entre
   left:0 et right:0. Il faut des dimensions explicites. */
#depth-field {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  z-index: 0; pointer-events: none;
  opacity: .55;
}
:root[data-theme="light"] #depth-field { opacity: .28; }
#topbar, main, section, footer, #notif-panel { position: relative; z-index: 1; }

/* ── 9. ÉTATS VIDES ────────────────────────────────────────────────────────
   Un panneau sans donnée disait « — ». Il dit maintenant pourquoi.           */
.empty-state {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 34px 18px; text-align: center; color: var(--dim); font-size: 12.5px;
}
.empty-state .es-ico { width: 26px; height: 26px; opacity: .35; }

/* ── 8b. BARRE DE POULS ────────────────────────────────────────────────────
   Bandeau de fraîcheur dans la barre supérieure. Il répond à la seule question
   qu'on se pose en arrivant : « ce que je regarde est-il à jour ? ». Une date
   seule ne le dit pas — « 5 août » peut être la dernière clôture possible ou
   deux jours de retard, et rien à l'écran ne permettait de trancher.          */
#pulse-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 9px;
  font-size: 11px; color: var(--dim); line-height: 1;
  padding: 5px 10px; margin-left: auto; margin-right: 8px;
  border: 1px solid var(--border); border-radius: 8px;
  background: color-mix(in srgb, var(--panel2) 60%, transparent);
  font-variant-numeric: tabular-nums;
  transition: border-color .4s ease, background-color .4s ease;
}
#pulse-bar .pulse-sep { opacity: .35; }
#pulse-bar .pulse-mkt { font-weight: 600; }
#pulse-bar .pulse-ok { color: #2ecc8f; }
#pulse-bar .pulse-cls, #pulse-bar .pulse-dem { cursor: help; white-space: nowrap; }
/* éclat bref quand la vue vient d'être rechargée toute seule : l'utilisateur doit
   savoir que quelque chose a changé sous ses yeux, sans être interrompu */
#pulse-bar.pulse-flash {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
@media (max-width: 1180px) {
  #pulse-bar .pulse-cls:nth-of-type(n+4) { display: none; }   /* on garde les 3 premières */
}
@media (max-width: 860px) {
  #pulse-bar { order: 5; flex: 1 1 100%; margin: 0; justify-content: flex-start; }
}

/* ── 9b. MOBILE ────────────────────────────────────────────────────────────
   La barre supérieure est une rangée flex qui, faute de place, repliait ses 17
   entrées en une COLONNE occupant toute la hauteur de l'écran : le contenu se
   retrouvait comprimé dans 185 px sur la gauche et la page devenait
   inutilisable sous 700 px.
   La barre s'empile désormais en deux rangées — marque + outils, puis la
   navigation en bande à défilement horizontal, qui est la convention native de
   ce cas et évite tout menu à tiroir.                                        */
@media (max-width: 860px) {
  #topbar {
    flex-wrap: wrap; align-items: center; gap: 8px;
    padding: 8px 12px;
  }
  #topbar .brand { order: 1; }
  #topbar .hdr-tools { order: 2; margin-left: auto; }
  #topbar .search-wrap { order: 3; flex: 1 1 100%; min-width: 0; }
  #topbar .search-wrap input { width: 100%; }
  #main-nav {
    order: 4; flex: 1 1 100%;
    display: flex; flex-wrap: nowrap; gap: 2px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scrollbar-width: none;                 /* la bande se fait glisser, elle n'a pas besoin d'ascenseur */
  }
  #main-nav::-webkit-scrollbar { display: none; }
  #main-nav .nav-link {
    flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start;
    padding: 7px 10px; font-size: 12.5px;
  }
  /* l'onglet actif se ramène toujours dans le champ de vision */
  #main-nav .nav-link.active { scroll-snap-align: center; }
  .grid-2 { grid-template-columns: 1fr; }
  #depth-field { opacity: .3; }            /* moins de décor sur petit écran */
}

/* ── 9 bis. LA RECHERCHE PASSE SUR SA PROPRE RANGÉE ────────────────────────
   Dix onglets de navigation + la marque + les outils réclament ~1130 px. En
   dessous de ~1500 px il ne reste plus de quoi loger une vraie barre de
   recherche à côté : elle se faisait écraser à sa largeur minimale, ce qui est
   précisément le défaut signalé. Plutôt que de la rétrécir, on lui donne une
   rangée entière — elle devient alors PLUS large que dans la disposition en
   ligne. La navigation garde sa bande à défilement horizontal.
   (Le bloc ≤ 860 px conserve en plus ses réglages de petit écran.)          */
@media (max-width: 1500px) {
  #topbar { flex-wrap: wrap; row-gap: 8px; column-gap: 16px; }
  #topbar .brand     { order: 1; }
  #topbar .hdr-tools { order: 2; margin-left: auto; }
  /* La nav prend une rangée ENTIÈRE et s'y étale sur autant de lignes qu'il
     faut. Partagée avec la marque et les outils, elle n'obtenait que 441 px
     pour 1553 px d'onglets : les treize derniers sortaient de l'écran. */
  #topbar #main-nav  { order: 3; flex: 1 1 100%; min-width: 0; flex-wrap: wrap; }
  #topbar .search-wrap {
    order: 4; flex: 1 1 100%; max-width: none; min-width: 0;
  }
}

/* ── 10. RESPECT DU MOUVEMENT RÉDUIT ───────────────────────────────────────
   Tout s'arrête, y compris le losange et le champ de profondeur.             */
@media (prefers-reduced-motion: reduce) {
  .brand .flame { animation: none; }
  #depth-field { display: none; }
  .tilt-3d { transform: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}