/* ═══ Prometheus Terminal — couche visuelle « profondeur & mouvement » ════════
   Générée avec v0 (chat « Prometheus Terminal — couche visuelle 3D/animations »),
   puis revue et amputée de ce qui aurait cassé l'application existante.

   Chargée APRÈS style.css : elle ne remplace rien, elle surcharge. Aucun HTML n'a
   été modifié — tout passe par les classes déjà présentes dans les ~20 sections.

   CE QUI A ÉTÉ ÉCARTÉ DE LA PROPOSITION GÉNÉRÉE, ET POURQUOI
   • `text-align: right` forcé sur tous les `td`/`th` : la moitié des tableaux de
     l'app ont des colonnes de texte (épisodes de crise, noms de sociétés,
     libellés de modèles). Aligner tout à droite les aurait rendus illisibles.
   • pulsation permanente sur `.chip.neg` : il y a des dizaines de chips négatifs
     à l'écran (tests de rejet, verdicts). Une page entière qui clignote est un
     bruit, pas une alerte. La pulsation est réservée à `.chip.alert`, posé
     explicitement quand quelque chose demande une action.
   • `will-change: transform` sur chaque `.vcard` : avec 20 à 60 cartes par page,
     cela force autant de calques de composition en permanence. Il n'est activé
     qu'au survol, là où il sert réellement.
   • redéfinition de `.pos` / `.neg` / `.dim` : ces classes portent déjà des
     couleurs contextuelles ailleurs ; les réécrire ici aurait écrasé des choix
     locaux volontaires.

   Toutes les animations n'utilisent que `transform` et `opacity`, et sont
   neutralisées sous `prefers-reduced-motion`.                                 */

:root {
  /* ombres en deux couches : contact (courte et nette) + diffuse (large et molle) */
  --sh-contact: 0 1px 2px rgba(0, 0, 0, .55);
  --sh-diffuse: 0 12px 28px -12px rgba(0, 0, 0, .6);
  --sh-lift-contact: 0 2px 6px rgba(0, 0, 0, .5);
  --sh-lift-diffuse: 0 22px 46px -18px rgba(0, 0, 0, .7);
  --edge-top: rgba(255, 255, 255, .055);
  --edge-bottom: rgba(0, 0, 0, .22);
  --surf-grad: linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(0, 0, 0, .055));
  --glow-accent: rgba(244, 164, 40, .20);
  --ease-out: cubic-bezier(.16, .84, .44, 1);
  --dur-fast: .16s;
  --dur-mid: .28s;
}
:root[data-theme="light"] {
  --sh-contact: 0 1px 2px rgba(30, 41, 59, .10);
  --sh-diffuse: 0 12px 26px -14px rgba(30, 41, 59, .18);
  --sh-lift-contact: 0 2px 5px rgba(30, 41, 59, .14);
  --sh-lift-diffuse: 0 22px 44px -20px rgba(30, 41, 59, .24);
  --edge-top: rgba(255, 255, 255, .85);
  --edge-bottom: rgba(30, 41, 59, .08);
  --surf-grad: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(30, 41, 59, .012));
  --glow-accent: rgba(244, 164, 40, .26);
}

/* ── 1. panneaux : vraie hiérarchie de surface ─────────────────────────────── */
.panel {
  position: relative;
  background-image: var(--surf-grad);
  box-shadow: var(--sh-contact), var(--sh-diffuse),
              inset 0 1px 0 var(--edge-top), inset 0 -1px 0 var(--edge-bottom);
  transition: box-shadow var(--dur-mid) var(--ease-out);
}
.panel.slim {
  background-image: none;
  box-shadow: var(--sh-contact), inset 0 1px 0 var(--edge-top);
}

/* ── 2. en-tête de panneau : liseré d'accent vertical ──────────────────────── */
.panel-head { position: relative; }
.panel-head::before {
  content: ""; position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 1.15em; border-radius: 0 2px 2px 0;
  background: linear-gradient(180deg, var(--accent), var(--accent2));
  pointer-events: none;
}

/* ── 3. cartes : profondeur + lift au survol ───────────────────────────────── */
.cards { perspective: 1000px; }

.vcard {
  position: relative;
  background-image: var(--surf-grad);
  box-shadow: var(--sh-contact), inset 0 1px 0 var(--edge-top);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.vcard:hover {
  will-change: transform;
  transform: translate3d(0, -3px, 0) scale(1.012);
  border-color: #3a4363;
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  box-shadow: var(--sh-lift-contact), var(--sh-lift-diffuse),
              inset 0 1px 0 var(--edge-top);
}
/* chiffres comparables verticalement d'une carte à l'autre */
.vcard .v, .oc-metrics, .data-table, .tbl {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* carte de stratégie cliquable : lift plus marqué + reflet d'accent orienté */
.olympe-card {
  position: relative;
  background-image: var(--surf-grad);
  box-shadow: var(--sh-contact), var(--sh-diffuse), inset 0 1px 0 var(--edge-top);
  overflow: hidden;
  transition: transform var(--dur-mid) var(--ease-out),
              box-shadow var(--dur-mid) var(--ease-out),
              border-color var(--dur-mid) var(--ease-out);
}
/* décor pur : pointer-events none, il ne doit JAMAIS intercepter le clic
   qui ouvre la page de stratégie */
.olympe-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; opacity: 0;
  background: radial-gradient(120% 80% at 85% 0%, var(--glow-accent), transparent 55%);
  transition: opacity var(--dur-mid) var(--ease-out);
}
.olympe-card:hover {
  will-change: transform;
  transform: translate3d(0, -4px, 0) scale(1.012);
  border-color: #4a4536;
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow: var(--sh-lift-contact), var(--sh-lift-diffuse),
              inset 0 1px 0 var(--edge-top);
}
.olympe-card:hover::after { opacity: 1; }
.olympe-card:active { transform: translate3d(0, -1px, 0) scale(1.004); }
.oc-head, .oc-metrics { position: relative; z-index: 1; }

/* ── 4. apparition en cascade des cartes ───────────────────────────────────── */
/* L'entrée utilise la propriété INDÉPENDANTE `translate`, pas `transform`.
   Raison, apprise à la dure : avec `animation-fill-mode: both`, une animation
   qui touche `transform` en garde le contrôle DÉFINITIVEMENT après sa fin — la
   dernière keyframe (ici l'identité) l'emporte sur toute règle CSS et même sur
   le style inline, car une animation prime sur les deux dans la cascade.
   Les cartes restaient donc plates : l'inclinaison 3D écrivait bien ses
   variables, et le moteur les ignorait. `translate` se compose avec `transform`
   au lieu de le remplacer, et les deux effets cohabitent.                     */
@keyframes surf-rise {
  from { opacity: 0; translate: 0 9px; }
  to   { opacity: 1; translate: 0 0; }
}
.cards > .vcard, .cards > .olympe-card, .olympe-grid > .olympe-card {
  animation: surf-rise .42s var(--ease-out) both;
}
.cards > *:nth-child(1),  .olympe-grid > *:nth-child(1)  { animation-delay: .02s; }
.cards > *:nth-child(2),  .olympe-grid > *:nth-child(2)  { animation-delay: .06s; }
.cards > *:nth-child(3),  .olympe-grid > *:nth-child(3)  { animation-delay: .10s; }
.cards > *:nth-child(4),  .olympe-grid > *:nth-child(4)  { animation-delay: .14s; }
.cards > *:nth-child(5),  .olympe-grid > *:nth-child(5)  { animation-delay: .18s; }
.cards > *:nth-child(6),  .olympe-grid > *:nth-child(6)  { animation-delay: .22s; }
.cards > *:nth-child(7),  .olympe-grid > *:nth-child(7)  { animation-delay: .26s; }
.cards > *:nth-child(8),  .olympe-grid > *:nth-child(8)  { animation-delay: .30s; }
/* plafond : au-delà de 8 cartes, tout arrive ensemble — sinon la 40ᵉ carte
   apparaîtrait deux secondes après la première, ce qui n'est plus une
   animation mais une latence */
.cards > *:nth-child(n+9), .olympe-grid > *:nth-child(n+9) { animation-delay: .32s; }

/* ── 5. navigation : soulignement animé de l'onglet actif ──────────────────── */
#main-nav .nav-link { position: relative; }
#main-nav .nav-link::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: -2px;
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  transform: scaleX(0); transform-origin: left center; opacity: 0;
  transition: transform var(--dur-mid) var(--ease-out), opacity var(--dur-mid) var(--ease-out);
  pointer-events: none;
}
#main-nav .nav-link:hover::after { transform: scaleX(.45); opacity: .55; }
#main-nav .nav-link.active::after { transform: scaleX(1); opacity: 1; }

/* ── 6. tableaux denses : survol doux, en-têtes calmes ─────────────────────── */
.data-table thead th, .tbl thead th {
  letter-spacing: .035em;
  background-color: rgba(255, 255, 255, .022);
  position: sticky; top: 0; z-index: 1;
}
:root[data-theme="light"] .data-table thead th,
:root[data-theme="light"] .tbl thead th { background-color: rgba(20, 30, 50, .04); }
.data-table tbody tr, .tbl tbody tr {
  transition: background-color var(--dur-fast) var(--ease-out);
}
.data-table tbody tr:hover, .tbl tbody tr:hover {
  background-color: rgba(244, 164, 40, .07);
}

/* ── 7. chips : pulsation réservée à ce qui demande une action ─────────────── */
@keyframes chip-alert { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }
.chip.alert { animation: chip-alert 2.2s var(--ease-out) infinite; }

/* ── 8. boutons : retour tactile ───────────────────────────────────────────── */
.primary-btn, .ghost-btn, .seg-btn {
  transition: transform var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.primary-btn:active, .ghost-btn:active, .seg-btn:active { transform: translateY(1px); }
.primary-btn {
  background-image: linear-gradient(180deg, var(--accent), var(--accent2));
  box-shadow: var(--sh-contact), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.primary-btn:hover { filter: brightness(1.07); }

/* ── 9. graphiques : squelette scintillant pendant le chargement ───────────── */
.chart { position: relative; }
.chart.loading::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background-color: var(--panel2); pointer-events: none; z-index: 2;
}
.chart.loading::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; z-index: 3;
  background: linear-gradient(100deg, transparent 30%,
              rgba(221, 227, 240, .07) 50%, transparent 70%);
  animation: chart-shimmer 1.25s linear infinite;
}
@keyframes chart-shimmer {
  from { transform: translateX(-55%); } to { transform: translateX(55%); }
}

/* ── 10. accessibilité ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .vcard:hover, .olympe-card:hover, .olympe-card:active { transform: none; }
  #main-nav .nav-link.active::after { transform: scaleX(1); opacity: 1; }
}