/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN V2 — DealFlow (23/09/2026)
   Référence : DESIGN-SYSTEM.md § « Design v2 ». Copie adaptée de
   apps/shared/design/design-v2-base.css (COPIE et non import : les apps Vercel à Root
   Directory scopé ne peuvent pas importer un fichier partagé du monorepo, KE-195).

   Couche chargée EN DERNIER, après app.css / matrice.css / portes.css / guide.css.
   Aucune modification de structure : retour arrière = retirer la ligne <link>.

   DEUX ADAPTATIONS PROPRES À CETTE APP, à connaître avant de modifier :

   1. Les icônes de navigation ont été converties en SVG au trait le 23/09 (elles étaient des
      emojis à la première pose de cette couche). Le principe 3 de la charte — « trait d'icône
      éclairci » — s'applique donc pleinement : un trait indigo sur une tuile indigo est
      invisible. Aucun `!important` n'est nécessaire, l'app ne pose pas la couleur du SVG en
      style inline (contrairement à JobSearch).

   2. Le seuil desktop est 641px, pas 769px. La charte autorise « le seuil de l'app » :
      DealFlow bascule sa barre latérale en ruban horizontal à 640px (media query d'app.css
      ajoutée le 22/09). Aligner les deux évite une zone 641–768px où la nav serait verticale
      mais sans tuiles.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --v2-accent: #00CCF7;              /* cyan IAutonomy — couleur de l'app */
  --v2-violet: #A78BFA;
  --v2-ok: #34D399;
  --v2-warn: #F5A524;
  --v2-late: #F26B63;
  --v2-card-shadow: 0 4px 24px rgba(0, 204, 247, 0.07);
  --v2-halo-1: rgba(0, 204, 247, 0.10);
  --v2-halo-2: rgba(167, 139, 250, 0.09);
  --v2-halo-3: rgba(249, 115, 22, 0.06);
}
/* DealFlow est en clair par défaut (data-theme="light"), l'inverse de JobSearch. */
[data-theme="light"] {
  --v2-violet: #6D5BD0;
  --v2-ok: #047857;
  --v2-warn: #B45309;
  --v2-late: #B91C1C;
  --v2-card-shadow: 0 1px 3px rgba(13, 21, 32, 0.05), 0 6px 22px rgba(13, 21, 32, 0.08);
  --v2-halo-1: rgba(0, 204, 247, 0.14);
}

/* ── 1. Fond : halos colorés discrets ─────────────────────────────────────── */
/* body porte déjà background:var(--bg) et height:100vh dans app.css : on n'ajoute qu'une
   image de fond par-dessus, sans toucher au reste. */
body {
  background-image:
    radial-gradient(ellipse 110% 55% at 50% -12%, var(--v2-halo-1), transparent 72%),
    radial-gradient(ellipse 55% 45% at 0% 95%, var(--v2-halo-2), transparent 68%),
    radial-gradient(ellipse 50% 40% at 100% 72%, var(--v2-halo-3), transparent 68%);
  background-attachment: fixed;
}

/* ── 2. Barre du haut : liseré dégradé ────────────────────────────────────── */
header {
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, #8B8CFF, #00CCF7, #34D399, #F97316) 1;
}

/* ── 3. Navigation : une couleur par rubrique ─────────────────────────────── */
/* Rubriques d'un même GROUPE = même couleur (principe 1). DealFlow a quatre groupes :
   le bloc de tête (pilotage quotidien), ANALYSE, STRATÉGIE, et Paramètres isolé. */
.nav-item { --nav: var(--v2-accent); }

/* Bloc de tête — pilotage quotidien : cyan de l'app, sauf Priorités qui est la vue de
   décision introduite au lot 2b et mérite de se distinguer. */
#nav-matrice   { --nav: #F59E0B; }   /* ambre — « où passer son temps » */
#nav-sourcing  { --nav: #14B8A6; }   /* turquoise — entrée de nouvelles cibles */

/* Groupe ANALYSE : indigo pour les quatre rubriques. */
#nav-dd, #nav-documents, #nav-contacts, #nav-dataroom { --nav: #6366F1; }

/* Groupe STRATÉGIE : violet. */
#nav-these, #nav-migration { --nav: #8B5CF6; }

/* Guide et Paramètres, isolés en bas. Le Guide garde une couleur propre — vert d'eau — parce
   qu'il s'adresse a quelqu'un qui cherche son chemin : le noyer dans l'ardoise de Paramètres
   le rendrait aussi discret qu'un réglage, alors que c'est le seul point d'entrée de l'aide
   depuis que le bouton a quitté la barre du haut. */
#nav-guide    { --nav: #34B98A; }
#nav-settings { --nav: #8C97A8; }

@media (min-width: 641px) {
  .nav-group { gap: 10px; display: flex; flex-direction: column; }

  .nav-item .nav-icon {
    width: 36px; height: 36px; border-radius: 11px;
    display: inline-grid; place-items: center;
    background: linear-gradient(140deg,
      color-mix(in srgb, var(--nav) 38%, transparent),
      color-mix(in srgb, var(--nav) 12%, transparent));
    border: 1px solid color-mix(in srgb, var(--nav) 55%, transparent);
    box-shadow: 0 3px 12px color-mix(in srgb, var(--nav) 22%, transparent);
    transition: background .15s, box-shadow .15s;
  }
  /* Trait ÉCLAIRCI (principe 3) : sans cela, un trait indigo sur une tuile indigo disparaît.
     Seul le cyan tolérerait le trait pur — on applique la même règle partout par cohérence. */
  .nav-item .nav-icon svg {
    width: 20px; height: 20px; stroke-width: 2.2;
    color: color-mix(in srgb, var(--nav) 45%, #ffffff);
  }
  .nav-item:hover .nav-icon {
    background: linear-gradient(140deg,
      color-mix(in srgb, var(--nav) 50%, transparent),
      color-mix(in srgb, var(--nav) 16%, transparent));
  }

  /* Rubrique active : ligne teintée + trait plein à gauche + tuile pleine.
     app.css pose déjà un ::before de 3px sur .nav-item.active — on le neutralise pour ne
     pas superposer deux marqueurs, le box-shadow interne le remplace. */
  .nav-item.active {
    background: linear-gradient(90deg,
      color-mix(in srgb, var(--nav) 22%, transparent),
      color-mix(in srgb, var(--nav) 6%, transparent));
    box-shadow: inset 3px 0 0 var(--nav);
    color: #fff;
  }
  .nav-item.active::before { display: none; }
  .nav-item.active .nav-icon {
    background: linear-gradient(140deg, color-mix(in srgb, var(--nav) 88%, #ffffff), var(--nav));
    border-color: transparent;
    box-shadow: 0 5px 16px color-mix(in srgb, var(--nav) 45%, transparent);
  }
  .nav-item.active .nav-icon svg { color: #ffffff; }
  /* Le badge de comptage reprend la couleur de sa rubrique plutôt que le cyan global. */
  .nav-item .nav-badge {
    background: color-mix(in srgb, var(--nav) 18%, transparent);
    color: color-mix(in srgb, var(--nav) 55%, #ffffff);
  }
}

/* ── 4. Titres de page : barre verticale dégradée ─────────────────────────── */
.ph-title {
  display: flex; align-items: center; gap: 10px;
}
.ph-title::before {
  content: ''; width: 5px; height: 22px; border-radius: 3px; flex-shrink: 0;
  background: linear-gradient(180deg, var(--v2-accent), var(--v2-violet));
}

/* ── 5. Cartes : filet dégradé en tête ────────────────────────────────────── */
.card { position: relative; overflow: hidden; box-shadow: var(--v2-card-shadow); }
.card::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--v2-accent), var(--v2-violet), transparent);
}

/* ── 6. Indicateurs : une couleur par indicateur, liseré gauche ───────────── */
/* Les quatre KPI du tableau de bord disent des choses différentes : le volume de cibles,
   les dossiers actifs, la valeur du portefeuille, la qualité moyenne. Une couleur chacun
   les rend lisibles d'un coup d'œil, plutôt qu'un bandeau uniforme. */
.kpi {
  --t: var(--v2-accent);
  position: relative; overflow: hidden;
  box-shadow: var(--v2-card-shadow);
  border-color: color-mix(in srgb, var(--t) 40%, transparent);
  background: linear-gradient(150deg, color-mix(in srgb, var(--t) 11%, transparent), transparent 62%);
}
.kpi::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--t), color-mix(in srgb, var(--t) 30%, transparent));
}
.kpis .kpi:nth-child(1) { --t: var(--v2-accent); }   /* cibles totales */
.kpis .kpi:nth-child(2) { --t: #6366F1; }            /* deals actifs */
.kpis .kpi:nth-child(3) { --t: var(--v2-ok); }       /* valeur pipeline */
.kpis .kpi:nth-child(4) { --t: var(--v2-warn); }     /* score moyen */

/* app.css pose deja un liseré haut sur .kpi, via ::after et la variable --ka. Notre liseré
   est a GAUCHE et utilise ::before : les deux pseudo-elements sont distincts, ils cohabitent
   sans se recouvrir. On aligne simplement --ka sur --t pour que le trait du haut et celui de
   gauche portent la meme couleur, plutot que d'avoir un cyan uniforme au-dessus d'un liseré
   colore. */
.kpi { --ka: var(--t); }

/* ── 7. Vue Décision (matrice attractivité × faisabilité, lot 2b) ─────────
   matrice.css a été construit à part (Strangler Fig, avant le lot Design v2) avec des
   couleurs volontairement neutres -- gris/bruns ternes, grille et libellés à faible
   contraste -- qui détonnent maintenant à côté du reste de l'app (retour Yannick 23/09 :
   "c'est très fade"). On reprend ici la palette vive déjà posée sur les KPI, sans toucher
   à matrice.css (même logique de couche que le reste de ce fichier). */
.mx-plan {
  position: relative; overflow: visible; box-shadow: var(--v2-card-shadow);
  border-color: color-mix(in srgb, var(--v2-accent) 30%, var(--border, #d8dee8));
}
.mx-plan::before {
  content: ''; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px;
  border-radius: 10px 10px 0 0;
  background: linear-gradient(90deg, var(--v2-accent), var(--v2-violet), transparent);
}
.mx-quad { opacity: 0.92; }
.mx-quad b { color: var(--navy); }
.mx-prio::before  { background: #10B981; }   /* prioritaire — émeraude vive, même famille que Ma thèse */
.mx-bloque::before{ background: #F59E0B; }   /* séduisant, infaisable — ambre vive */
.mx-volume::before{ background: #38BDF8; }   /* faisable, tiède — bleu ciel vif */
.mx-ecarter::before{ background: #8C97A8; }  /* à écarter — ardoise, neutre assumé */
.mx-pt { box-shadow: var(--v2-card-shadow); }
.mx-pt:hover, .mx-pt:focus-visible { box-shadow: 0 4px 16px color-mix(in srgb, var(--v2-accent) 30%, transparent); }