/* ============================================================================
   FREEDA — Socle de tokens · Radar & Terminal
   ----------------------------------------------------------------------------
   Source de vérité conciliée entre deux références :

     • les écrans validés (Accueil projet, Accueil rapport, Analyse détaillée,
       Vue documents) — pour la typographie, la primaire et les neutres ;
     • « Design Systems Freeda.fig » — pour les fonds de statut, la rampe de
       gris, les rayons et les ombres.

   Chaque écart est documenté dans DESIGN_SYSTEM.md §8 « Arbitrages Figma ».
   Ne jamais écrire une valeur brute dans un composant : toujours un nom.
   ============================================================================ */

@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=switzer@500,600,700&display=swap');

/* ----------------------------------------------------------------------------
   UNITÉS — base 16px.

   En rem : la typographie, la densité (hauteurs de contrôle et de ligne,
   padding de carte) et les planchers de panneaux. Ces trois familles doivent
   scaler ENSEMBLE : si le texte grandit et que les gabarits restent fixes,
   les tableaux tronquent et les panneaux étranglent leur contenu.

   En px : bordures, rayons, espacements et ombres. Ce sont des constantes
   optiques — une bordure de 1px et un rayon de 8px ne dépendent pas de la
   taille du texte.

   Correspondances utiles : 0.65625rem = 10.5px · 0.75rem = 12px ·
   0.84375rem = 13.5px · 0.9375rem = 15px · 1.0625rem = 17px ·
   1.3125rem = 21px · 1.6875rem = 27px · 2.125rem = 34px.
   ---------------------------------------------------------------------------- */

:root {
  /* ── Typographie ──────────────────────────────────────────────────────────
     UNE seule police. Le Figma utilise Public Sans + JetBrains Mono, héritage
     du kit d'origine ; les écrans sont passés à Satoshi seule, et les chiffres
     restent alignés par font-variant-numeric plutôt que par une monospace. */
  --font-sans: 'Satoshi', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Police d'affichage — réservée aux H1 de page. Satoshi reste la police body. */
  --font-heading: 'Switzer', 'Satoshi', ui-sans-serif, system-ui, -apple-system, sans-serif;

  --text-2xs: 0.65625rem;  --lh-2xs: 1.4;
  --text-xs:  0.75rem;    --lh-xs:  1.45;
  --text-sm:  0.84375rem;  --lh-sm:  1.5;
  --text-md:  0.9375rem;    --lh-md:  1.55;
  --text-lg:  1.0625rem;    --lh-lg:  1.45;
  --text-xl:  1.3125rem;    --lh-xl:  1.32;
  --text-2xl: 1.6875rem;    --lh-2xl: 1.24;
  --text-3xl: 2.125rem;    --lh-3xl: 1.18;

  --tracking-tight: -0.014em;
  --tracking-wide:  0.05em;

  /* ── Rayons ── famille 4 / 8 / 12, confirmée par les Corner du Figma ───── */
  --radius-xs:   4px;   /* Figma · Corner/Extra Small */
  --radius-sm:   6px;
  --radius:      8px;   /* Figma · Corner/Small — défaut */
  --radius-md:  10px;   /* Figma · ProjectCard */
  --radius-lg:  12px;   /* Figma · Corner/Medium — cartes */
  --radius-xl:  16px;
  --radius-full: 9999px;

  /* ── Espacement · base 4 ─────────────────────────────────────────────── */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;  --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px;

  /* ── Mouvement ───────────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: 140ms;
  --dur: 220ms;
  --dur-slow: 420ms;
  --stagger: 60ms;

  /* ── Rampe de gris du Figma ───────────────────────────────────────────
     Reprise telle quelle comme échelle de référence. Les surfaces de Radar
     n'y puisent pas directement (elles suivent la famille papier, plus
     chaude), mais toute nuance neutre nouvelle doit sortir de cette rampe. */
  --gray-100: #F6F7F9;  --gray-200: #E5E7EA;  --gray-300: #CED2D6;
  --gray-400: #9EA5AD;  --gray-500: #676E76;  --gray-600: #596066;
  --gray-700: #454C52;  --gray-800: #383F45;  --gray-900: #24292E;
  --gray-1000: #1A1D1F;

  /* Planchers des trois panneaux de la vue documents. En rem pour que la
     mise en page suive la taille de police : sous leur somme la rangée
     défile horizontalement (voir DESIGN_SYSTEM.md §8.7). */
  /* ── Superposition ──────────────────────────────────────────────────────
     Un ordre nommé plutôt que des z-index inventés au cas par cas. La règle
     tient dans la lecture : un outil (panel) passe au-dessus d'un menu, une
     décision (modal) au-dessus d'un outil, une notification au-dessus d'une
     décision, et le ghost de drag au-dessus de tout — il suit le curseur,
     rien ne doit jamais le masquer.                                        */
  --bg-backdrop: rgba(28, 25, 23, .40);
  --z-overlay: 40;   /* menus, dropdowns, popovers        */
  --z-panel:   50;   /* panneaux flottants                */
  --z-modal:   60;   /* dialogs, confirm                  */
  --z-toast:   70;   /* notifications éphémères           */
  --z-drag:    80;   /* ghost de drag actif               */

  --panel-tree:   18.875rem;  /* 302px */
  --panel-viewer: 31.25rem;   /* 500px */
  --panel-eval:   21.25rem;   /* 340px */
}

/* ============================================================================
   RADAR — produit client, mode clair
   ============================================================================ */

[data-theme='radar'] {
  color-scheme: light;

  /* Surfaces · famille papier (écrans validés) */
  --bg-base:    #FFFFFF;
  --bg-sunken:  #F1F1EE;
  --bg-surface: #FFFFFF;
  --bg-raised:  #FAF9F7;
  --bg-overlay: #FFFFFF;
  --bg-inset:   rgba(22, 24, 29, .05);

  --border-subtle:  #E7E5DE;
  --border-default: #DBD8CF;
  --border-strong:  #C1BDB2;
  /* Bordure d'input/bouton — ~3.05:1 sur --bg-surface (WCAG 1.4.11 UI components).
     À utiliser sur .radar-input, .radar-btn--secondary et sur les chips de
     comptage : c'est le trait qui, seul, doit permettre d'identifier une
     zone interactive. */
  --border-input:   #918D82;

  --fg-strong: #16181D;
  --fg-body:   #3D424D;
  --fg-muted:  #565A66;
  --fg-subtle: #6F7480;   /* ~4,7:1 — plancher, étiquettes uniquement */
  --fg-on-accent: #FFFFFF;

  /* Accent · ardoise. Le Figma porte #8AA9DE sur sa page couleurs (l'accent
     du thème sombre abandonné) et #3A4A66 dans la ProjectCard : c'est cette
     seconde valeur qui fait foi, comme sur tous les écrans. */
  --accent:        #3A4A66;
  --accent-hover:  #46587A;
  --accent-active: #2F3D55;
  --accent-fg:     #3A4A66;
  --accent-subtle: rgba(58, 74, 102, .07);
  --accent-tint:   #F3F6FB;              /* Figma · Primary/50 */
  --accent-border: rgba(58, 74, 102, .20);

  /* ── Statuts ──────────────────────────────────────────────────────────
     Teintes pleines et de texte : les nôtres (le teal a remplacé le vert
     d'origine). Fonds : ceux du Figma, plus clairs et plus lumineux ; les
     bordures sont recalées pour rester lisibles sur ces fonds. */
  --status-conform:        #0F6E5C;
  --status-conform-fg:     #0C5C4D;
  --status-conform-bg:     #D9F9E6;      /* Figma · Success */
  --status-conform-border: #A8E8C6;

  --status-uncertain:        #A96C05;
  --status-uncertain-fg:     #8B5904;
  --status-uncertain-bg:     #FBF2CB;    /* Figma · Warning */
  --status-uncertain-border: #EDDCA0;

  --status-nonconform:        #C0392F;
  --status-nonconform-fg:     #A32E26;
  --status-nonconform-bg:     #FDE9E9;   /* Figma · Error */
  --status-nonconform-border: #F5C9C6;

  --status-neutral:        #6B7280;
  --status-neutral-fg:     #5A606B;
  --status-neutral-bg:     #F6F7F9;      /* Figma · Primary/neutre */
  --status-neutral-border: #E1E3E7;

  /* Surcharge « critique » — pas un statut : rouge plus profond pour que le
     blanc passe (~5,3:1), plus un pictogramme d'alerte obligatoire. */
  --badge-critical:    #B02F28;
  --badge-critical-fg: #FFFFFF;

  /* Ombres · reprises du Figma (page Shadows) */
  --shadow-sm: 0 1px 1px rgba(0, 0, 0, .12), 0 2px 5px rgba(103, 110, 118, .08);
  --shadow-md: 0 2px 5px rgba(103, 110, 118, .08), 0 6px 20px -6px rgba(22, 24, 29, .14);
  --shadow-lg: 0 2px 5px rgba(103, 110, 118, .08), 0 20px 48px -12px rgba(22, 24, 29, .20);

  --glow-accent:     0 0 0 1px rgba(58, 74, 102, .22), 0 10px 28px -10px rgba(58, 74, 102, .28);
  --glow-conform:    0 0 0 1px rgba(15, 110, 92, .24), 0 10px 28px -10px rgba(15, 110, 92, .24);
  --glow-nonconform: 0 0 0 1px rgba(192, 57, 47, .22), 0 10px 28px -10px rgba(192, 57, 47, .24);

  --focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px rgba(58, 74, 102, .45);

  /* Densité · confortable, c'est un outil de lecture */
  --control-h-sm: 2rem;
  --control-h:    2.375rem;
  --control-h-lg: 2.75rem;
  --pad-card:     1.25rem;
  --pad-badge:    3px 9px;
  --row-h:        2.75rem;


  /* Vague Terminal · état actif de rail et lignes très denses */
  --accent-heavy: rgba(58, 74, 102, .10);
  --row-h-sm:     1.75rem;   /* 28px */
  --row-h-xs:     1.5rem;    /* 24px */
  --control-h-xs: 1.375rem;  /* 22px — barres d'outils */
}

/* ============================================================================
   TERMINAL — outil interne, mode clair, densité serrée
   ============================================================================ */

[data-theme='terminal'] {
  color-scheme: light;

  --bg-base:    #F7F6F3;
  --bg-sunken:  #EDEBE6;
  --bg-surface: #FFFFFF;
  --bg-raised:  #FAF9F7;
  --bg-overlay: #FFFFFF;
  --bg-inset:   rgba(22, 24, 29, .05);

  --border-subtle:  #E7E5DE;
  --border-default: #DBD8CF;
  --border-strong:  #C1BDB2;
  /* Bordure d'input/bouton — ~3.05:1 sur --bg-surface (WCAG 1.4.11 UI components).
     À utiliser sur .radar-input, .radar-btn--secondary et sur les chips de
     comptage : c'est le trait qui, seul, doit permettre d'identifier une
     zone interactive. */
  --border-input:   #918D82;

  --fg-strong: #16181D;
  --fg-body:   #3D424D;
  --fg-muted:  #565A66;
  --fg-subtle: #6F7480;
  --fg-on-accent: #FFFFFF;

  --accent:        #3A4A66;
  --accent-hover:  #46587A;
  --accent-active: #2F3D55;
  --accent-fg:     #3A4A66;
  --accent-subtle: rgba(58, 74, 102, .07);
  --accent-tint:   #F3F6FB;
  --accent-border: rgba(58, 74, 102, .22);

  --status-conform:        #0F6E5C;
  --status-conform-fg:     #0C5C4D;
  --status-conform-bg:     #D9F9E6;
  --status-conform-border: #A8E8C6;

  --status-uncertain:        #A96C05;
  --status-uncertain-fg:     #8B5904;
  --status-uncertain-bg:     #FBF2CB;
  --status-uncertain-border: #EDDCA0;

  --status-nonconform:        #C0392F;
  --status-nonconform-fg:     #A32E26;
  --status-nonconform-bg:     #FDE9E9;
  --status-nonconform-border: #F5C9C6;

  --status-neutral:        #6B7280;
  --status-neutral-fg:     #5A606B;
  --status-neutral-bg:     #F6F7F9;
  --status-neutral-border: #E1E3E7;

  --badge-critical:    #B02F28;
  --badge-critical-fg: #FFFFFF;

  --shadow-sm: 0 1px 1px rgba(0, 0, 0, .12), 0 2px 5px rgba(103, 110, 118, .08);
  --shadow-md: 0 2px 5px rgba(103, 110, 118, .08), 0 6px 20px -6px rgba(22, 24, 29, .14);
  --shadow-lg: 0 2px 5px rgba(103, 110, 118, .08), 0 20px 48px -12px rgba(22, 24, 29, .20);

  /* Terminal n'a pas de halo : ils retombent sur l'ombre neutre. */
  --glow-accent:     var(--shadow-md);
  --glow-conform:    var(--shadow-md);
  --glow-nonconform: var(--shadow-md);

  --focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px rgba(58, 74, 102, .45);

  --control-h-sm: 1.75rem;
  --control-h:    2rem;
  --control-h-lg: 2.375rem;
  --pad-card:     0.875rem;
  --pad-badge:    2px 7px;
  --row-h:        2.125rem;

  /* Vague Terminal · état actif de rail et lignes très denses */
  --accent-heavy: rgba(58, 74, 102, .10);
  --row-h-sm:     1.75rem;   /* 28px */
  --row-h-xs:     1.5rem;    /* 24px */
  --control-h-xs: 1.375rem;  /* 22px — barres d'outils */
}

/* ============================================================================
   Réinitialisation minimale
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg-base);
  color: var(--fg-body);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--lh-md);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--accent-fg); text-decoration: none; }
a:hover { color: var(--accent-hover); }

:focus-visible { outline: none; box-shadow: var(--focus-ring); }
::selection { background: var(--accent-subtle); color: var(--fg-strong); }

/* Les chiffres s'alignent sans monospace. */
.tnum, [data-tnum] { font-variant-numeric: tabular-nums; }

/* ── Mouvement · cascade à l'ouverture d'un rapport, puis calme ─────────── */
@keyframes enter-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes enter-fade { from { opacity: 0; } to { opacity: 1; } }

.enter { animation: enter-up var(--dur-slow) var(--ease-out) both; animation-delay: calc(var(--i, 0) * var(--stagger)); }
.enter-fade { animation: enter-fade var(--dur-slow) var(--ease-out) both; animation-delay: calc(var(--i, 0) * var(--stagger)); }

[data-theme='terminal'] .enter,
[data-theme='terminal'] .enter-fade { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .enter, .enter-fade { animation: none; }
  * { transition-duration: 1ms !important; }
}

/* ── Sections dépliables (Collapsible Detail Card) ───────────────────────── */
details > summary::-webkit-details-marker { display: none; }
details > summary::marker { content: ''; display: none; }
details > summary { list-style: none; }
details[open] > summary .chev { transform: none; }
details:not([open]) > summary .chev { transform: rotate(180deg); }
details > summary:hover { background: var(--bg-inset); }

/* ── Édition inline (Editable Text Inline) ───────────────────────────────── */
.edit-inline { outline: none; cursor: text; }
.edit-inline:hover { background: rgba(58, 74, 102, .04); }
.edit-inline:focus { background: var(--bg-surface); box-shadow: 0 0 0 2px var(--accent-border); }
.edit-inline:empty::before {
  content: attr(data-placeholder);
  color: var(--fg-subtle);
  font-style: italic;
  pointer-events: none;
}

/* ── Cellules de tableau éditables (Editable Cell) ───────────────────────── */
.cell-row:hover > * { background: var(--bg-raised); }
.cell-action { opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
.cell-row:hover .cell-action { opacity: 1; }
.cell-editable { outline: none; cursor: text; }
.cell-editable:focus { box-shadow: inset 0 0 0 2px var(--accent); background: var(--bg-surface); }

/* ── Aperçu tronqué sur 2 lignes ─────────────────────────────────────────────
   Le clamp coupe sur une frontière de ligne ; l'ellipse est peinte en ::after
   car aucun moteur ne la rend sur une boîte clampée. Poser data-more
   uniquement quand le texte dépasse réellement, sinon l'ellipse mentirait.
   Le padding vertical doit rester sur un enrobage : dans la boîte, il laisse
   la ligne suivante affleurer avant la coupe. */
.clamp2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  position: relative;
}
.clamp2[data-more]::after {
  content: '…';
  position: absolute;
  right: 0;
  bottom: 0;
  padding-left: 18px;
  color: var(--fg-muted);
  background: linear-gradient(90deg, transparent, var(--bg-surface) 42%);
}
.clamp2[data-more][data-on-tint]::after {
  background: linear-gradient(90deg, transparent, var(--accent-tint) 42%);
}

/* ── Ligne de preview ────────────────────────────────────────────────────
   Une liste d'extraction porte 20 à 50 lignes : un bouton de suppression
   permanent y ferait un mur de croix. Il ne paraît qu'au survol.          */
.preview-row:hover { background: var(--bg-raised); }
.preview-row:hover .preview-delete { opacity: 1; }
.preview-delete:hover { color: var(--status-nonconform-fg); }

/* Poignée de redimensionnement d'un panneau flottant. */
.fp-resize { color: var(--fg-subtle); transition: color var(--dur-fast) var(--ease-out); }
.fp-resize:hover { color: var(--fg-body); }

/* Ligne de grille inline : suppression révélée au survol, comme la preview. */
.grid-row:hover { background: var(--bg-raised); }
.grid-row:hover .grid-del { opacity: 1; }
.grid-del:hover svg { color: var(--status-nonconform-fg); }

/* Item de menu dans un popover. */
.mi:hover { background: var(--bg-raised); }

/* Mode inactif d'un sélecteur de mode. */
.mode-i:hover { color: var(--fg-strong); background: var(--accent-subtle); }

/* Barre de défilement fine — nav collante, panneaux, rails. */
.thin::-webkit-scrollbar { width: 8px; }
.thin::-webkit-scrollbar-track { background: transparent; }
.thin::-webkit-scrollbar-thumb {
  background: var(--border-default);
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: content-box;
}
.thin::-webkit-scrollbar-thumb:hover { background-color: var(--border-strong); }
.thin { scrollbar-width: thin; scrollbar-color: var(--border-default) transparent; }

/* Poignées de redimensionnement — le curseur porte le signal, pas un grip. */
.rz-v, .rz-h { background: transparent; transition: background var(--dur-fast) var(--ease-out); }
.rz-v:hover, .rz-h:hover { background: var(--accent-subtle); }
.rz-v:active, .rz-h:active { background: var(--accent-border); }

/* Rail latéral : onglets, lignes, cartes d'évaluation. */
.rail-t:hover { color: var(--fg-strong) !important; }
.rail-i:hover { background: var(--bg-raised); }
.doc-t:hover { background: var(--bg-surface) !important; color: var(--fg-body) !important; }
.eval-c:hover { background: var(--bg-raised); }
.obs-r:hover .obs-del { opacity: 1; }
.obs-del:hover { color: var(--status-nonconform-fg); }

/* Filtres, chips, actions compactes, couches. */
.fp:hover { border-color: var(--border-strong) !important; }
.fc:hover { background: var(--bg-raised) !important; }
.tag-c:hover { background: var(--bg-raised) !important; border-color: var(--border-strong) !important; }
.ic-c:hover { background: var(--bg-raised) !important; border-color: var(--border-strong) !important; }
.lay-c:hover { border-color: var(--border-strong) !important; }

/* Édition en place — le focus passe par une ombre, jamais par une bordure. */
.inline-edit:hover { background: rgba(58, 74, 102, .04); }
.inline-edit:focus { background: var(--bg-surface); box-shadow: 0 0 0 2px var(--accent-border); }
.inline-edit:empty::before {
  content: attr(data-placeholder);
  color: var(--fg-subtle);
  font-style: italic;
  pointer-events: none;
}

/* Cellules de tableau : survol de ligne, focus intérieur. */
.cell-row:hover { background: var(--bg-raised); }
.cell-row:hover .cell-action { opacity: 1; }
.cell-action:hover { color: var(--status-nonconform-fg); }
.cell-edit:focus { box-shadow: inset 0 0 0 2px var(--accent); background: var(--bg-surface); }