/* ============================================================================
   Neloria IA — système de design (refonte 2026)
   SOURCE UNIQUE. Ce fichier est copié à l'identique dans
     hub/static/css/, comptaia/app/static/css/ et mailpilot/static/css/
   par `python design/synchroniser.py` ; tests/design_tests.py vérifie que les
   trois copies n'ont pas divergé. On le modifie ICI, jamais dans une copie.

   Polices auto-hébergées (static/fonts/) : aucune requête vers un tiers, donc
   ni fuite d'adresse IP vers Google, ni blocage par la politique CSP du portail.
   ========================================================================== */

@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('/static/fonts/InstrumentSerif-400.woff2') format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url('/static/fonts/InstrumentSerif-400-italic.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('/static/fonts/IBMPlexSans-var.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/static/fonts/IBMPlexMono-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/static/fonts/IBMPlexMono-500.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/static/fonts/IBMPlexMono-600.woff2') format('woff2')}

:root{
  /* Couleurs */
  --nl-ink:#0f172a; --nl-ink-2:#1c2539;
  --nl-paper:#f6f4ef; --nl-paper-2:#f1eee7; --nl-sand:#eae6dd; --nl-white:#ffffff;
  --nl-green:#2f6b4f; --nl-green-dark:#1f4a36; --nl-mint:#7fc0a0;
  --nl-amber:#b06a1f; --nl-red:#b4432b; --nl-stone:#c9c2b3;

  --nl-ink-72:rgba(15,23,42,.72); --nl-ink-64:rgba(15,23,42,.64);
  --nl-ink-55:rgba(15,23,42,.55); --nl-ink-50:rgba(15,23,42,.5);
  --nl-line:rgba(15,23,42,.1); --nl-line-soft:rgba(15,23,42,.07); --nl-line-strong:rgba(15,23,42,.16);
  --nl-paper-74:rgba(246,244,239,.74); --nl-paper-60:rgba(246,244,239,.6);
  --nl-paper-line:rgba(246,244,239,.13);

  --nl-green-tint:rgba(47,107,79,.12); --nl-amber-tint:rgba(176,106,31,.12);
  --nl-red-tint:rgba(180,67,43,.1); --nl-ink-tint:rgba(15,23,42,.07);

  /* Typographie */
  --nl-serif:'Instrument Serif',Georgia,serif;
  --nl-sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --nl-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Consolas,monospace;

  /* Rayons */
  --nl-r-xs:5px; --nl-r-sm:7px; --nl-r-md:8px; --nl-r-lg:11px; --nl-r-xl:12px; --nl-r-2xl:14px;

  /* Ombres */
  --nl-shadow-hover:0 16px 34px rgba(15,23,42,.13);
  --nl-shadow-float:0 30px 60px rgba(0,0,0,.36);
  --nl-shadow-toast:0 18px 40px rgba(15,23,42,.35);
  --nl-shadow-cta:0 12px 26px rgba(127,192,160,.34);

  /* Mouvement */
  --nl-ease:cubic-bezier(.4,0,.2,1);
  --nl-fast:.16s; --nl-base:.22s; --nl-slow:.45s;
}

/* Keyframes */
@keyframes nl-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes nl-spin{to{transform:rotate(360deg)}}
@keyframes nl-pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}
@keyframes nl-toast{0%{opacity:0;transform:translate(-50%,12px)}12%,88%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,8px)}}
@keyframes nl-glow{0%,100%{box-shadow:0 0 0 0 rgba(127,192,160,.55)}50%{box-shadow:0 0 0 10px rgba(127,192,160,0)}}
@keyframes nl-dot{0%,80%,100%{opacity:.25;transform:none}40%{opacity:1;transform:translateY(-3px)}}
@keyframes nl-scan{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}
@keyframes nl-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---------- Typographie ---------- */
.nl-h1{font:400 clamp(34px,4.7vw,60px)/1.05 var(--nl-serif);letter-spacing:-.015em;margin:0;text-wrap:pretty}
.nl-h2{font:400 clamp(26px,2.9vw,34px)/1.15 var(--nl-serif);margin:0}
.nl-kicker{font:500 11.5px var(--nl-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--nl-green)}
.nl-label{font:600 11px var(--nl-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--nl-ink-50)}
.nl-num{font-family:var(--nl-mono);font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums}
.nl-muted{color:var(--nl-ink-64)}

/* ---------- Boutons ---------- */
.nl-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font:600 14px var(--nl-sans);
  padding:13px 22px;border-radius:var(--nl-r-md);border:1px solid transparent;cursor:pointer;text-decoration:none;
  transition:transform var(--nl-fast) ease,box-shadow .2s ease,background .3s ease,border-color .2s;white-space:nowrap}
.nl-btn:hover{transform:translateY(-2px)}
.nl-btn:active{transform:none}
.nl-btn:focus-visible{outline:2px solid var(--nl-green);outline-offset:2px}
.nl-btn--primary{background:var(--nl-ink);color:var(--nl-paper)}
.nl-btn--primary:hover{box-shadow:0 14px 28px rgba(15,23,42,.24);color:var(--nl-paper)}
.nl-btn--mint{background:var(--nl-mint);color:var(--nl-ink)}
.nl-btn--mint:hover{box-shadow:var(--nl-shadow-cta);color:var(--nl-ink)}
.nl-btn--ghost{background:transparent;color:var(--nl-ink);border-color:var(--nl-line-strong)}
.nl-btn--ghost:hover{background:rgba(15,23,42,.05);color:var(--nl-ink)}
.nl-btn--ghost-dark{background:transparent;color:var(--nl-paper);border-color:rgba(246,244,239,.32)}
.nl-btn--ghost-dark:hover{background:rgba(246,244,239,.08);color:var(--nl-paper)}
.nl-btn--paper{background:var(--nl-paper);color:var(--nl-ink)}
.nl-btn--danger{background:rgba(180,67,43,.06);color:var(--nl-red);border-color:rgba(180,67,43,.35)}
.nl-btn--danger:hover{background:var(--nl-red);color:#fff}
.nl-btn--success{background:var(--nl-green);color:var(--nl-paper)}
.nl-btn--sm{font-size:12.5px;padding:8px 13px;border-radius:var(--nl-r-sm);font-weight:500}
.nl-btn--block{width:100%}
.nl-btn[disabled],.nl-btn[aria-disabled=true]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none;pointer-events:none}
.nl-btn[aria-busy=true]{pointer-events:none;opacity:.85}
.nl-btn[aria-busy=true]::before{content:"";width:14px;height:14px;border-radius:50%;border:2px solid currentColor;
  border-top-color:transparent;opacity:.8;animation:nl-spin .7s linear infinite}
.nl-btn[data-done=true]{background:var(--nl-green);color:var(--nl-paper)}
.nl-btn[data-done=true]::before{content:"✓";animation:nl-pop .34s ease both}

/* ---------- Cartes ---------- */
.nl-card{background:var(--nl-white);border:1px solid var(--nl-line);border-radius:var(--nl-r-xl);padding:20px}
.nl-card--dark{background:var(--nl-ink);border-color:var(--nl-ink);color:var(--nl-paper)}
.nl-card--lift{transition:transform .18s ease,box-shadow var(--nl-base) ease,border-color .2s}
.nl-card--lift:hover{transform:translateY(-3px);box-shadow:var(--nl-shadow-hover)}

.nl-kpi{display:flex;flex-direction:column;gap:7px;padding:17px;border-radius:var(--nl-r-lg);background:var(--nl-white);border:1px solid var(--nl-line)}
.nl-kpi__k{font:500 11px var(--nl-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--nl-ink-50)}
.nl-kpi__v{font:500 24px var(--nl-mono)}
.nl-kpi__d{font:400 11.5px var(--nl-sans);color:var(--nl-ink-55)}
.nl-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:12px}

/* ---------- Badges, pills ---------- */
.nl-badge{display:inline-flex;align-items:center;gap:6px;font:500 11.5px var(--nl-sans);padding:4px 9px;border-radius:var(--nl-r-xs);white-space:nowrap}
.nl-badge--ok{color:var(--nl-green);background:var(--nl-green-tint)}
.nl-badge--warn{color:var(--nl-amber);background:var(--nl-amber-tint)}
.nl-badge--bad{color:var(--nl-red);background:var(--nl-red-tint)}
.nl-badge--neutral{color:var(--nl-ink);background:var(--nl-ink-tint)}
.nl-pill{font:500 12.5px var(--nl-sans);padding:7px 12px;border-radius:var(--nl-r-sm);border:1px solid rgba(15,23,42,.14);
  background:#fff;color:var(--nl-ink-64);cursor:pointer;transition:all .2s;text-decoration:none;display:inline-block}
.nl-pill:hover{border-color:var(--nl-ink);color:var(--nl-ink)}
.nl-pill[aria-pressed=true],.nl-pill[aria-current=true]{background:var(--nl-ink);color:var(--nl-paper);border-color:var(--nl-ink)}
.nl-pills{display:flex;flex-wrap:wrap;gap:6px;align-items:center}

/* ---------- Champs ---------- */
.nl-input{background:#fff;border:1px solid var(--nl-line-strong);border-radius:var(--nl-r-md);padding:13px 14px;
  font:400 14px var(--nl-sans);color:var(--nl-ink);transition:border-color .2s,box-shadow .2s;width:100%;box-sizing:border-box}
.nl-input:hover,.nl-input:focus{border-color:rgba(47,107,79,.6);box-shadow:0 0 0 3px rgba(47,107,79,.1);outline:none}
.nl-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.nl-field>label{font:500 12.5px var(--nl-sans);color:var(--nl-ink-72)}

/* ---------- Ligne de tableau, bascule, toast, barre ---------- */
.nl-row{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;padding:13px 18px;border-bottom:1px solid var(--nl-line-soft);
  border-left:3px solid transparent;transition:background .25s}
.nl-row:hover{background:rgba(15,23,42,.03)}
.nl-row[aria-selected=true]{border-left-color:var(--nl-green);background:rgba(47,107,79,.06)}

.nl-toggle{width:44px;height:26px;border-radius:13px;background:rgba(15,23,42,.22);border:0;position:relative;cursor:pointer;transition:background .25s;padding:0;flex:0 0 auto}
.nl-toggle::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .25s var(--nl-ease)}
.nl-toggle[aria-checked=true]{background:var(--nl-green)}
.nl-toggle[aria-checked=true]::after{transform:translateX(18px)}

.nl-toast{position:fixed;left:50%;bottom:24px;background:var(--nl-ink);color:var(--nl-paper);padding:13px 20px;border-radius:9px;
  box-shadow:var(--nl-shadow-toast);font:500 13px var(--nl-sans);display:flex;align-items:center;gap:10px;animation:nl-toast 2.6s ease both;z-index:1000;max-width:min(92vw,560px)}
.nl-toast::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--nl-mint);flex:0 0 auto}
.nl-toast--error::before{background:#e08b74}
.nl-toast--long{animation-duration:6s}

.nl-bar{height:6px;border-radius:3px;background:rgba(15,23,42,.1);overflow:hidden}
.nl-bar>span{display:block;height:100%;background:var(--nl-green);border-radius:3px;transition:width .35s ease}

/* Indicateurs d'état */
.nl-dot{width:6px;height:6px;border-radius:50%;background:var(--nl-mint);display:inline-block;animation:nl-glow 2.6s ease-in-out infinite}
.nl-dots{display:inline-flex;gap:4px;align-items:center}
.nl-dots>i{width:6px;height:6px;border-radius:50%;background:currentColor;display:block;animation:nl-dot 1.1s ease-in-out infinite}
.nl-dots>i:nth-child(2){animation-delay:.15s}.nl-dots>i:nth-child(3){animation-delay:.3s}
.nl-spinner{width:15px;height:15px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;display:inline-block;animation:nl-spin .7s linear infinite;opacity:.8}
.nl-check{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--nl-green);color:#fff;font-size:11px;animation:nl-pop .34s ease both}

/* Barre latérale (composant autonome ; les applications l'habillent via leurs classes) */
.nl-sidebar{background:var(--nl-ink);padding:18px 14px;width:232px;display:flex;flex-direction:column;gap:14px}
.nl-sidebar__group{font:600 10px var(--nl-mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(246,244,239,.36);padding:10px 10px 5px}
.nl-sidebar__item{display:flex;align-items:center;justify-content:space-between;gap:10px;font:500 13.5px var(--nl-sans);
  color:rgba(246,244,239,.64);padding:9px 10px;border-radius:var(--nl-r-sm);text-decoration:none;transition:background .2s,color .2s}
.nl-sidebar__item:hover{background:rgba(246,244,239,.09);color:var(--nl-paper)}
.nl-sidebar__item[aria-current=page]{background:rgba(127,192,160,.16);color:var(--nl-paper)}

/* ---------- Tableaux « carte » ---------- */
.nl-table{background:#fff;border:1px solid var(--nl-line);border-radius:var(--nl-r-xl);overflow:hidden}
.nl-table__head{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--nl-line)}
.nl-table__title{font:600 13.5px var(--nl-sans)}
.nl-table__cols{display:flex;gap:14px;padding:9px 18px;background:var(--nl-paper);border-bottom:1px solid var(--nl-line);
  font:500 10.5px var(--nl-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--nl-ink-50)}
.nl-table__foot{display:flex;flex-wrap:wrap;gap:10px 18px;justify-content:space-between;padding:13px 18px;background:var(--nl-paper);border-top:1px solid var(--nl-line);font:600 13px var(--nl-mono)}
.nl-split{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start}
/* La colonne latérale garde la largeur de la maquette (≈ 280 px) ; tout le reste va au contenu. */
.nl-split>.nl-main{flex:1 1 460px;min-width:0}
.nl-split>.nl-aside{flex:0 1 280px;min-width:240px;display:flex;flex-direction:column;gap:14px}
@media (max-width:1020px){.nl-split>.nl-aside{flex:1 1 100%}}

/* ---------- Graphique en barres (sans bibliothèque : rendu côté serveur) ---------- */
.nl-legend{display:flex;gap:14px;flex-wrap:wrap}
.nl-legend>span{display:flex;align-items:center;gap:6px;font:400 12px var(--nl-sans);color:var(--nl-ink-64)}
.nl-legend i{width:9px;height:9px;border-radius:2px;display:inline-block}
.nl-bars{display:flex;align-items:flex-end;gap:4px;height:170px;border-bottom:1px solid rgba(15,23,42,.12);padding-top:6px}
.nl-bars__col{flex:1 1 0;height:100%;display:flex;align-items:flex-end;justify-content:center}
.nl-bars__pair{display:flex;gap:2px;align-items:flex-end;height:100%;width:100%;justify-content:center}
.nl-bars__bar{width:42%;max-width:14px;min-height:2px;border-radius:3px 3px 0 0;transform-origin:bottom;animation:nl-grow .6s var(--nl-ease) both}
.nl-bars__bar--p{background:var(--nl-green)}
.nl-bars__bar--c{background:var(--nl-stone);animation-delay:.08s}
.nl-bars__col:hover .nl-bars__bar{filter:brightness(.92)}
.nl-bars__axis{display:flex;gap:4px}
.nl-bars__axis>span{flex:1 1 0;text-align:center;font:400 10.5px var(--nl-mono);color:var(--nl-ink-50)}

/* ---------- Conseil : une étiquette, un constat, un lien ---------- */
.nl-conseil{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:11px 14px;background:var(--nl-paper-2);border-radius:var(--nl-r-md)}
.nl-conseil__tag{font:600 10.5px var(--nl-mono);letter-spacing:.08em;text-transform:uppercase;padding:4px 8px;border-radius:5px;background:var(--nl-ink-tint);color:var(--nl-ink)}
.nl-conseil__tag--eleve{background:var(--nl-red-tint);color:var(--nl-red)}
.nl-conseil__tag--moyen{background:var(--nl-amber-tint);color:var(--nl-amber)}
.nl-conseil__tag--faible{background:var(--nl-green-tint);color:var(--nl-green)}
.nl-conseil__txt{flex:1 1 260px;font-size:13.5px;min-width:0}
.nl-conseil__lien{font:500 12.5px var(--nl-sans);white-space:nowrap}

/* ---------- Colonne latérale : cartes d'information ---------- */
.nl-side{display:flex;flex-direction:column;gap:12px;background:#fff;border:1px solid var(--nl-line);border-radius:var(--nl-r-xl);padding:20px;color:var(--nl-ink)}
.nl-side__k{font:500 11px var(--nl-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--nl-ink-50)}
.nl-side__t{font:600 15.5px/1.35 var(--nl-sans)}
.nl-side__t--big{font:500 28px var(--nl-mono)}
.nl-side__p{font:400 13px/1.55 var(--nl-sans);color:rgba(15,23,42,.62)}
.nl-side__rows{display:flex;flex-direction:column}
.nl-side__rows>div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--nl-line-soft);font-size:13px}
.nl-side__rows>div:last-child{border-bottom:0}
.nl-side__rows>div>span:first-child{color:rgba(15,23,42,.64)}
.nl-side__rows .nl-num{font-size:12.5px}
.nl-side--dark{background:var(--nl-ink);border-color:var(--nl-ink);color:var(--nl-paper)}
.nl-side--dark .nl-side__k{color:var(--nl-mint)}
.nl-side--dark .nl-side__p{color:rgba(246,244,239,.68)}
.nl-side--dark .nl-side__rows>div{border-color:rgba(246,244,239,.1)}
.nl-side--dark .nl-side__rows>div>span:first-child{color:rgba(246,244,239,.68)}
.nl-bar--on-dark{background:rgba(246,244,239,.14)}
.nl-bar--on-dark>span{background:var(--nl-mint)}

/* ---------- État vide ---------- */
.nl-empty{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:38px 22px;color:var(--nl-ink-55);font-size:13.5px}
.nl-empty strong{color:var(--nl-ink);font:600 15px var(--nl-sans)}
.nl-empty>span{max-width:46em}

/* ---------- Carte tableau : en-tête (titre, filtres, action) et pied de totaux ---------- */
.nl-card-table{background:#fff;border:1px solid var(--nl-line);border-radius:var(--nl-r-xl);overflow:hidden}
.nl-card-table__head{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--nl-line)}
.nl-card-table__title{font:600 13.5px var(--nl-sans)}
.nl-card-table .table-wrap{border:0;border-radius:0}
.nl-card-table__foot{display:flex;flex-wrap:wrap;gap:10px 18px;justify-content:space-between;padding:13px 18px;background:var(--nl-paper);border-top:1px solid var(--nl-line);font:600 13px var(--nl-mono)}
.nl-card-table__foot .k{font:500 11px var(--nl-sans);color:var(--nl-ink-55);margin-right:8px}

/* ---------- Utilitaires ---------- */
/* L'attribut hidden l'emporte toujours : une classe qui fixe display ne doit pas le défaire. */
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}