/* ============================================================
   Erikia : JETONS. Ce fichier est le MIROIR mot pour mot des cinq fichiers
   `Meridian Design System/tokens/` (fonts, colors, typography, spacing,
   effects, dans l'ordre du _ds_manifest.json). NE PAS EDITER LE BLOC MIROIR
   ICI : editer le DS, recopier, puis lancer tests/test_design_system.py, qui
   refuse toute derive. Seule retouche toleree : les `url()` des polices,
   servies en /static/fonts (jamais Google Fonts : vie privee + CSP).

   Le bloc « Extensions Meridian app » en fin de fichier nomme les valeurs
   que le DS emploie en litteral (rgba de la barre laterale, survol d'une
   rangee, piste des onglets...) : ici, aucune couleur ni aucun rayon n'existe
   hors d'un jeton, et style.css ne porte AUCUN :root.
   ============================================================ */

/* ---- fonts.css (miroir) ---- */
/* Polices servies localement (jamais Google Fonts : vie privée + CSP).
   Poppins est STATIQUE (un fichier par graisse) et `font-synthesis: none` :
   toute graisse employée par le produit doit avoir son @font-face ici, sinon
   le navigateur retombe sur la plus proche sans la grossir. Le produit emploie
   400, 500, 600, 700 et l'italique 400 : cinq fichiers, pas un de plus. */
@font-face {
  font-family: 'Poppins';
  src: url('/static/fonts/Poppins-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/static/fonts/Poppins-Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/static/fonts/Poppins-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/static/fonts/Poppins-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/static/fonts/Poppins-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---- colors.css (miroir) ---- */
/* Erikia — couleurs, palette « Ardoise & sauge » (direction C, choisie le 2026-10-23 parmi 30 propositions) (rebranding
   Erikia, 2026-10-23 — d'après la planche de référence fournie ; palette
   premium du même jour : neutres froids, sapin = le pétrole de la planche,
   statuts francs et décidés). Accent JAUNE et statuts accordés au logo
   depuis le même soir (demande Marek : plus de mauve ni d'indigo, « le vert
   du logo et un rouge qui fit »). Les NOMS des jetons
   ne bougent pas — `--blue` reste `--blue`, partout dans le produit — seules
   les valeurs changent (300 déclarations ; la sémantique est intacte).
   Règle sémantique : UNE COULEUR, UN SENS.
   jaune = l'IA et ses agents (liens, scores, badges, voix d'Erikia) : or
   foncé sur blanc, or du logo sur l'ardoise
   ardoise = l'action primaire et les surfaces de marque (barre latérale, bulles)
   vert du logo = prêt / réussi / obtenu (« À contacter ») · cuivre = attente
   rouge = irréversible ou destructeur · gris = neutre, dormant, archivé
   rose = rencontre prise · bleu acier = gagné, plus rien à faire
   Contraste : --blue (3,3:1) sert aux points, anneaux et icônes ; tout TEXTE
   jaune prend --blue-strong (5,6:1). Sur l'ardoise, les blancs atténués descendent au
   minimum à .72 (libellés) et .82 (nav inactive). */
:root {
  /* Papiers : blancs NEUTRES, à peine gris-verts (direction C). Jamais de
     gris tiré vers le jaune : sur un écran chaud, il se lit beige. */
  --paper: #F4F5F4; --paper-2: #FFFFFF; --paper-3: #ECEEEC; --paper-4: #E2E5E3;
  --paper-head: #FAFBFA;  /* rangée d'en-tête des tables « Outlook » */
  --paper-inset: #FCFDFC; /* corps déplié d'une rangée (message ouvert) */
  --paper-row-hover: #EFF1EF; /* survol de rangée */
  --white: #FFFFFF;

  /* Encres : ardoise neutre, la famille du fond */
  --ink: #1F272B; --ink-2: #3A454B; --ink-3: #5F6B71; --ink-4: #98A3A8;
  --ink-lbl: #79868C; /* méta seulement : dates, sous-textes, mentions */
  --ink-title: #3A454B;

  /* Filets */
  --line: #E3E6E5; --line-strong: #D3D8D6; --line-mute: #BFC6C4;
  --line-on-dark: rgba(255,255,255,.16);

  /* Jaunes — la voix de l'IA. `--blue-deep` est l'ARDOISE de marque
     (#263238) : il ouvre la famille parce qu'il porte la barre latérale et
     l'action primaire. `--blue-bright` est l'OR DU LOGO (#F2C94C) : l'accent
     qui ne vit que sur l'ardoise (pastille de compteur, avatar, lien
     « Commencer »). Sur blanc, un jaune vif ne se lit pas : le texte prend
     l'or foncé `--blue-strong`, les points et anneaux `--blue`. */
  --blue: #B8860B; --blue-strong: #876200; --blue-deep: #263238;
  --blue-bright: #F2C94C; --blue-light: #F7E1A1; --blue-slate: #A39373;
  --blue-tint: #FBF6E6; --blue-tint-2: #F5E8BF; --blue-line: #E6CF85;

  /* Action primaire : l'ardoise de la barre latérale */
  --primary: var(--blue-deep); --primary-hover: #33424A;

  /* Tuiles de catégorie (cartes « Spécialités » de la planche) : pastel
     plein, encre --ink dessus, jamais de texte coloré. `--tile-lavender`
     garde son nom d'époque mais vaut une argile pâle : plus de mauve. */
  --tile-lavender: #F4E7DE; --tile-or: #FBF0D2; --tile-mint: #DDEEE6; --tile-ardoise: #E6EAEC;

  /* Sémantique : des couleurs accordées au logo et à l'ardoise, chacune
     posée sur une teinte de sa famille (≥ 4,5:1 sur sa teinte, ≥ 5,5:1 sur
     blanc). Teintes : vert du logo 166°, cuivre 23°, rouge 356°, rose 330°,
     bleu acier 204°, accent or 43°. Le cuivre et l'or ne sont qu'à 20° : le
     cuivre est plus rouge et plus sombre, et l'or ne sert jamais de statut. */
  --ok: #256A5A; --ok-tint: #DDEEE6;
  --warn: #A84E17; --warn-tint: #FBEADF;
  --danger: #A8323A; --danger-tint: #F7E1E3;
  --info: var(--blue); --info-tint: var(--blue-tint);

  /* Statuts du pipeline (2026-10-07 ; recolorés le 2026-10-23). Les NOMS
     datent du mauve et ne bougent pas, comme `--blue`. --violet est un ROSE
     (6,1:1 sur blanc, 5:1 sur sa teinte) : « Rencontre prise ». --azur, un
     bleu ACIER, de la famille de l'ardoise : « Gagnée ». */
  --violet: #9E406F; --violet-tint: #F6E3EE;
  --azur: #2F5F7F; --azur-tint: #E1EBF2;

  /* Logo « trois barres » sur fond sombre (assets/logo-erikia.svg), nommé
     pour que le SVG en ligne du produit ne porte aucune couleur en dur.
     Du sombre au lumineux : sapin, sauge, or ; les deux
     recouvrements ont leur teinte propre. L'or reste un LITTÉRAL, même s'il
     vaut aujourd'hui --blue-bright : le logo ne suit pas l'accent. */
  --logo-sapin: #2E7D6B; --logo-sauge: #7FBFA9; --logo-or: #F2C94C;
  --logo-sapin-sauge: #58A08A; --logo-sauge-or: #C2C47E;

  /* Alias sémantiques */
  --surface-card: var(--white); --surface-ai: var(--blue-tint);
  --text-body: var(--ink); --text-secondary: var(--ink-2); --text-muted: var(--ink-3);
  --text-ai: var(--blue-strong);
  --accent: var(--blue); --accent-soft: var(--blue-tint);
  --focus-ring: var(--blue);
  /* Encre POSÉE SUR --blue-bright (compteur de nav, avatar, badge mobile) :
     l'ardoise (8,3:1), parce que l'or n'accepte pas l'encre blanche. */
  --sur-clair: #263238;
  --fav: var(--blue-deep); /* étoile Favorite (pipeline) : posée = ardoise */

  /* Blancs atténués sur l'ardoise (≥ 4,5:1) */
  --on-dark-label: rgba(255,255,255,.72); /* petits libellés */
  --on-dark-nav: rgba(255,255,255,.82);   /* nav inactive */
}

/* ---- typography.css (miroir) ---- */
/* Erikia — typographie. Poppins partout, jusqu'aux chiffres : les scores,
   les coûts et les dates tabulaires sont des CHIFFRES TABULAIRES de Poppins
   (`font-variant-numeric: tabular-nums`), pas une seconde famille. --font-mono
   reste le nom de la donnée alignée ; --font-code est la vraie chasse fixe,
   celle du code et des journaux, qui doit rester une police de terminal. */
:root {
  --font-display: 'Poppins', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Poppins', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-code: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* --fs-12 est le PLANCHER du texte (2026-09-11) : tout ce qui se lit est a
     12 px ou plus. --fs-11 et les litteraux plus petits sont reserves a ce qui
     ne se lit pas en phrases : un chevron, une fleche de tri, un chiffre dans
     une pastille ronde, et le pied de la barre laterale (version, credit). */
  --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-15: 15px;
  --fs-16: 16px; --fs-18: 18px; --fs-20: 20px; --fs-22: 21px; --fs-28: 28px; --fs-36: 40px;

  --lh-tight: 1.08; /* @kind font */ --lh-snug: 1.28; /* @kind font */ --lh-body: 1.5; /* @kind font */
  --track-caps: .07em; --track-display: -.022em; --track-title: -.014em;

  /* Composites prêts à l'emploi */
  --text-display: 600 var(--fs-36)/var(--lh-tight) var(--font-display);
  --text-title: 600 var(--fs-22)/var(--lh-snug) var(--font-display);
  --text-body-md: 400 var(--fs-14)/var(--lh-body) var(--font-sans);
  --text-label: 500 var(--fs-13)/1.2 var(--font-sans);
  --text-caps: 600 var(--fs-12)/1.2 var(--font-sans);
  --text-data: 500 var(--fs-13)/1.2 var(--font-mono);
  --text-voice: 400 var(--fs-18)/var(--lh-snug) var(--font-display);
  /* En-tête de colonne des tables « Outlook » : au plancher lui aussi, il
     etait le plus petit texte du produit (10,5 px). */
  --text-th: 600 var(--fs-12)/1.2 var(--font-sans);
}

/* ---- spacing.css (miroir) ---- */
/* Erikia — espacement, rayons, contrôles. */
:root {
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;

  /* Rayons. --r-xs est la direction « Outlook » approuvée : panneaux, tables
     et champs doucement arrondis (8px) ; les cartes d'agents prennent 10px.
     Demande utilisateur : « 5 % plus rond » le 2026-09-10 (4 et 5 px), puis
     « 10 % » le 2026-09-11, d'où le double. Les boutons gardent --r-sm.
     Depuis le 2026-10-23 (demande Marek : « même rectangle coins arrondis que
     les boutons, comme ça tout est pareil »), plus rien de ce qui se lit ou se
     clique n'est en pilule : --r-tag (6px) pour les étiquettes de 22 à 26px
     (statuts, cohortes, points, compteurs de titre), même proportion que le
     bouton (9px sur 36px) ; --r-sm pour ce qui a la taille d'un bouton
     (filtres, mini-boutons, pastille flottante). --r-pill ne reste qu'aux
     barres de progression, aux avatars, aux numéros et aux compteurs de
     notifications. */
  --r-xs: 8px; --r-agent: 10px; --r-tag: 6px;
  --r-sm: 9px; --r-md: 16px; --r-lg: 20px; --r-pill: 999px;

  --control-h: 36px; --control-h-sm: 28px; --control-h-lg: 44px;
  --sidebar-w: 236px;
  --fab-h: 44px; --fab-gap: 20px; --fab-bottom: 0px;

  /* Table « Outlook » : rangées égales, en-têtes en capitales.
     --row-pad-y est LE bouton de respiration verticale : toute rangée qui se
     dimensionne par son contenu (paires libellé/valeur, critères, en-têtes et
     pieds de carte) le prend, plutôt que son propre 10 ou 12 px. Monté de
     56/11 à 64/14 px le 2026-09-11 : « je trouve les rangées assez cramped,
     aère un peu plus, partout dans l'app ». */
  --row-h: 64px; --row-pad-x: 18px; --row-pad-y: 14px;
  /* En-tete collant : titre 20 px puis sous-titre 13 px sur sa propre ligne
     (2026-09-11), 16 px de marge en haut et en bas pour que le titre respire.
     Les surfaces collantes sous l'en-tete s'y accrochent. */
  --top-h: 80px;
}

/* ---- effects.css (miroir) ---- */
/* Erikia — ombres et mouvement. v2 : pas d'ombre au repos ; l'ombre
   n'apparaît qu'au survol d'une carte-lien ou sur l'élément actif. */
:root {
  --shadow-card: none;
  --shadow-hover: 0 2px 10px rgba(31,39,43,.06);
  --shadow-pill: 0 1px 3px rgba(31,39,43,.1);
  --shadow-raised: 0 2px 6px rgba(31,39,43,.08), 0 1px 2px rgba(31,39,43,.05);
  --shadow-overlay: 0 12px 40px rgba(31,39,43,.18), 0 2px 8px rgba(31,39,43,.08);
  --shadow-menu: 0 8px 24px rgba(31,39,43,.12);

  --ease: cubic-bezier(.25,.6,.3,1); /* @kind other */
  --t-fast: 130ms; /* @kind other */ --t-med: 200ms; /* @kind other */
}

@keyframes mds-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(184,134,11,.35); }
  50% { box-shadow: 0 0 0 6px rgba(184,134,11,0); }
}
@keyframes busy-dot { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   Extensions Meridian app (hors DS). Chaque jeton cite le litteral qu'il
   remplace et l'endroit ou le DS l'emploie.
   ============================================================ */
:root {
  /* Survol du bouton destructeur : `#8C2830` dans Button.jsx. */
  --danger-hover: #8C2830;
  /* Piste des onglets (controle segmente) : `border-radius: 12px` dans Tabs.jsx. */
  --r-track: 12px;
  /* Barre laterale ardoise et en-tete mobile (Shell.jsx) : texte des liens
     --on-dark-nav (.82), meta --on-dark-label (.72) : les deux minimums de
     contraste du DS sur l'ardoise. Lien actif `.13` (Shell.jsx) ; le survol
     (.08) est propre a l'app. */
  --nav-fg: var(--on-dark-nav);
  --nav-fg-dim: var(--on-dark-label);
  --nav-bg-hover: rgba(255,255,255,.08);
  --nav-bg-active: rgba(255,255,255,.13);
  /* En-tete collant translucide : `rgba(244,245,244,.88)` dans Shell.jsx,
     c'est-a-dire --paper a 88 %. */
  --topbar-bg: rgba(244,245,244,.88);
  /* Voile sous un dialogue ou le tiroir mobile : `rgba(31,39,43,.35)` dans Dialog.jsx. */
  --scrim: rgba(31,39,43,.35);
  /* Ombre du tiroir de navigation mobile (surface flottante, meme famille
     que --shadow-overlay). */
  --shadow-drawer: 8px 0 32px rgba(31,39,43,.35); /* --ink a 35 % */
  /* Pas de synthese de gras ou d'italique : Poppins est STATIQUE, et les
     cinq @font-face du miroir couvrent tout ce que le produit emploie
     (400, 500, 600, 700, italique 400). Une graisse ajoutee dans style.css
     sans son fichier retomberait sur la plus proche, sans etre grossie. */
  font-synthesis: none;
}