/* =========================================================================
   N-SCALE Monitor — identité « accompagnement vivant »
   D'une entreprise poreuse vers une entreprise souveraine : chaleur,
   confiance et clarté. On garde le teal de la marque, on l'ancre dans un
   vert pin profond et on l'éclaire d'un miel chaud (la richesse capturée).
   Type : Bricolage Grotesque (titres, du caractère) + Hanken Grotesque (texte).
   ========================================================================= */

:root {
  --pin: #143029;          /* rail, surfaces profondes (vert pin) */
  --pin-2: #1c3c33;
  --pin-3: #2b4e43;
  --encre: #1b2824;        /* texte fort */
  --papier: #f1f0e8;       /* fond de page, ivoire tiède légèrement vert */
  --panneau: #fffdf8;      /* panneaux, blanc chaud */
  --trait: #e4e2d6;        /* bordures douces */
  --trait-fort: #d2cfc0;
  --texte: #27322d;
  --texte-doux: #6a736c;
  --teal: #0e8c86;         /* action principale (marque) */
  --teal-fonce: #0a6b66;
  --teal-clair: #dbeee8;
  --sauge: #e7efe9;        /* fonds teal très doux */
  --miel: #c6872c;         /* accent chaud, la valeur */
  --miel-fonce: #a56e1f;
  --miel-clair: #f6e9cf;
  --rouge: #bd5346;        /* alerte / critique (brique douce) */
  --rouge-clair: #f4ddd8;
  --vert: #4a9d63;         /* succès */
  --vert-clair: #dcefe0;

  --ombre-s: 0 1px 2px rgba(20,48,41,.05);
  --ombre: 0 1px 2px rgba(20,48,41,.04), 0 10px 26px -12px rgba(20,48,41,.18);
  --ombre-l: 0 24px 60px -24px rgba(20,48,41,.35);

  --rayon: 16px;           /* panneaux */
  --rayon-m: 11px;         /* boutons, champs */
  --rayon-s: 8px;

  --display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --corps: "Hanken Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --num: var(--corps);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--corps);
  background: var(--papier);
  color: var(--texte);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--teal-fonce); text-decoration: none; }
a:hover { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--encre);
  margin: 0 0 .4em;
}
h1 { font-size: 1.75rem; line-height: 1.12; letter-spacing: -.02em; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.08rem; }

/* Kicker chaleureux (plus de capitales criardes) */
.eyebrow {
  font-family: var(--corps);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  font-size: .82rem;
  color: var(--miel-fonce);
}

/* ----------------------------- Mise en page ----------------------------- */
.appshell { display: flex; min-height: 100vh; }

.rail {
  width: 256px;
  flex-shrink: 0;
  background: linear-gradient(180deg, #16352d 0%, #102620 100%);
  color: #cdd8d2;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.rail__marque {
  padding: 22px 20px 18px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.rail__logo {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.01em;
  font-size: 1.35rem;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 11px;
}
.rail__logo .glyphe {
  width: 32px; height: 32px;
  display: inline-grid; place-items: center;
  border-radius: 10px;
  background: linear-gradient(145deg, var(--teal) 0%, #15a89b 100%);
  color: #fff;
  box-shadow: 0 6px 14px -4px rgba(14,140,134,.6);
  font-size: .9rem;
}
.rail__logo .glyphe span { display: block; }
.rail__sous { font-size: .76rem; letter-spacing: 0; color: #8fa49b; margin-top: 7px; }

.rail__nav { padding: 16px 12px; overflow-y: auto; flex: 1; }
.rail__groupe { margin-bottom: 18px; }
.rail__titre {
  font-size: .7rem; letter-spacing: .04em; text-transform: none;
  color: #7e938a; padding: 0 12px 7px; font-weight: 600;
}
.rail__lien {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px; border-radius: var(--rayon-m);
  color: #c6d2cb; font-size: .92rem; line-height: 1.2; font-weight: 500;
  transition: background .14s, color .14s;
}
.rail__lien:hover { background: rgba(255,255,255,.07); text-decoration: none; color: #fff; }
.rail__lien.actif { background: linear-gradient(135deg, var(--teal) 0%, #13988f 100%); color: #fff; box-shadow: 0 8px 18px -8px rgba(14,140,134,.7); }
.rail__lien svg { width: 18px; height: 18px; flex-shrink: 0; opacity: .9; }
.rail__lien.actif svg { opacity: 1; }
.rail__lien .pastille { width: 6px; height: 6px; background: currentColor; border-radius: 50%; flex-shrink: 0; opacity: .5; }

.rail__pied {
  padding: 14px 16px; border-top: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; gap: 11px;
}
.rail__pied .avatar { flex-shrink: 0; }
.rail__pied__txt { min-width: 0; font-size: .86rem; color: #e7ede9; font-weight: 600; line-height: 1.25; }
.rail__pied__txt small { display: block; font-weight: 400; }
.rail__pied a { color: #9fc7bf; font-size: .8rem; }
.rail__pied a:hover { color: #fff; }

.contenu { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  height: 62px; background: rgba(255,253,248,.85); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--trait);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px; position: sticky; top: 0; z-index: 20;
}
.topbar__compte { display: flex; align-items: center; gap: 12px; font-size: .88rem; }
.badge-niveau {
  font-family: var(--corps); text-transform: none; letter-spacing: 0;
  font-size: .74rem; font-weight: 600;
  background: var(--sauge); color: var(--teal-fonce); padding: 4px 11px; border-radius: 999px;
}

/* Avatar à initiales */
.avatar {
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-grid; place-items: center;
  font-family: var(--display); font-weight: 600; font-size: .9rem; color: #fff;
  background: linear-gradient(145deg, var(--teal) 0%, var(--miel) 150%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
}
.avatar--sm { width: 30px; height: 30px; font-size: .76rem; }
.avatar--client { background: linear-gradient(145deg, #2b7f78 0%, var(--miel) 160%); }

.zone { padding: 30px 28px 48px; max-width: 1200px; width: 100%; margin: 0 auto; animation: apparition .4s ease both; }
@keyframes apparition { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Salutation d'accueil */
.salut { margin-bottom: 24px; }
.salut__hello { font-family: var(--display); font-size: 1.9rem; font-weight: 600; letter-spacing: -.02em; color: var(--encre); line-height: 1.1; }
.salut__hello .vague { display: inline-block; }
.salut__sous { color: var(--texte-doux); font-size: 1rem; margin-top: 4px; }

/* ------------------------------ Composants ------------------------------ */
.entete-page { margin-bottom: 22px; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }

.panneau {
  background: var(--panneau);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
}
.panneau__corps { padding: 22px 24px; }
.panneau__titre {
  padding: 16px 24px; border-bottom: 1px solid var(--trait);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.panneau__titre h3 { margin: 0; }

.grille { display: grid; gap: 20px; }
.grille-2 { grid-template-columns: repeat(2, 1fr); }
.grille-3 { grid-template-columns: repeat(3, 1fr); }
.grille-4 { grid-template-columns: repeat(4, 1fr); }

/* Indicateurs */
.kpi {
  background: var(--panneau); border: 1px solid var(--trait); border-radius: var(--rayon);
  padding: 20px 22px; position: relative; overflow: hidden; box-shadow: var(--ombre-s);
  transition: transform .16s, box-shadow .16s;
}
.kpi:hover { transform: translateY(-2px); box-shadow: var(--ombre); }
.kpi::before { content:""; position:absolute; left:0; top:14px; bottom:14px; width:4px; border-radius:0 4px 4px 0; background: linear-gradient(var(--teal), var(--miel)); }
.kpi__label { font-size: .82rem; letter-spacing: 0; text-transform: none; color: var(--texte-doux); font-weight: 500; }
.kpi__valeur { font-family: var(--display); font-size: 2.1rem; font-weight: 600; color: var(--encre); line-height: 1.1; margin-top: 6px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi__sous { font-size: .82rem; color: var(--texte-doux); margin-top: 3px; }

/* Jauge d'étanchéité (signature) — 5 segments arrondis, chaleureux */
.gauge { display: flex; flex-direction: column; gap: 10px; }
.gauge__barre { display: flex; gap: 6px; }
.gauge__seg { height: 16px; flex: 1; background: var(--sauge); border-radius: 6px; transition: background .2s; }
.gauge__seg.on { background: linear-gradient(135deg, var(--teal) 0%, #16a79b 100%); }
.gauge__seg.faible { background: linear-gradient(135deg, var(--miel) 0%, #d99a3f 100%); }
.gauge__valeur { font-family: var(--display); font-size: 2.8rem; font-weight: 600; line-height: 1; letter-spacing: -.02em; }
.gauge__legende { font-size: .84rem; color: var(--texte-doux); }

/* Axes N-SCALE */
.axe { border: 1px solid var(--trait); border-radius: var(--rayon-m); padding: 15px 17px; background: var(--panneau); }
.axe__code { font-family: var(--display); font-weight: 600; letter-spacing: 0; color: var(--encre); }
.axe__principe { font-size: .78rem; text-transform: none; letter-spacing: 0; color: var(--miel-fonce); font-weight: 600; }
.axe__jauge { height: 9px; background: var(--sauge); border-radius: 999px; margin-top: 9px; overflow: hidden; }
.axe__jauge i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--teal), #17aa9d); }
.axe__score { font-family: var(--num); font-variant-numeric: tabular-nums; font-size: .88rem; color: var(--texte-doux); }

/* Tableaux */
table.tbl { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tbl th, .tbl td { text-align: left; padding: 12px 15px; border-bottom: 1px solid var(--trait); }
.tbl th { font-size: .76rem; text-transform: none; letter-spacing: 0; color: var(--texte-doux); font-weight: 600; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tbody tr, .tbl tr { transition: background .12s; }
.tbl tr:hover td { background: #f7f8f3; }

/* Étapes du parcours */
.parcours { display: flex; gap: 10px; margin: 10px 0 4px; flex-wrap: wrap; }
.etape { flex: 1; min-width: 130px; padding: 13px 15px; background: var(--panneau); border: 1px solid var(--trait); border-radius: var(--rayon-m); position: relative; }
.etape__num { font-family: var(--corps); font-size: .76rem; color: var(--miel-fonce); font-weight: 600; }
.etape__nom { font-family: var(--display); font-weight: 600; color: var(--encre); margin-top: 2px; }
.etape.active { background: linear-gradient(145deg, var(--pin) 0%, var(--pin-2) 100%); border-color: var(--pin); box-shadow: var(--ombre); }
.etape.active .etape__nom { color: #fff; }
.etape.active .etape__num { color: #ecc98a; }

/* Badges — pastilles arrondies */
.badge { display: inline-block; font-size: .76rem; padding: 3px 11px; border-radius: 999px; font-weight: 600; letter-spacing: 0; }
.badge.teal { background: var(--sauge); color: var(--teal-fonce); }
.badge.ambre { background: var(--miel-clair); color: var(--miel-fonce); }
.badge.gris { background: #eceadf; color: var(--texte-doux); }
.badge.vert { background: var(--vert-clair); color: #2f7a46; }
.badge.rouge { background: var(--rouge-clair); color: #99392e; }
.badge.encre { background: var(--pin); color: #fff; }

/* Formulaires */
.champ { margin-bottom: 18px; }
.champ label { display: block; font-size: .86rem; font-weight: 600; color: var(--texte); margin-bottom: 6px; }
.champ .aide { font-size: .8rem; color: var(--texte-doux); margin-top: 5px; }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=datetime-local], select, textarea {
  width: 100%; padding: 11px 13px; border: 1px solid var(--trait-fort);
  border-radius: var(--rayon-m); font-family: var(--corps); font-size: .94rem;
  background: #fffefb; color: var(--texte); transition: border-color .14s, box-shadow .14s;
}
input::placeholder, textarea::placeholder { color: #aab0a6; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px rgba(14,140,134,.14);
}
textarea { min-height: 92px; resize: vertical; }
.champs-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* Boutons — chaleureux, bouts arrondis, casse de phrase */
.btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-family: var(--corps); font-weight: 600; letter-spacing: 0;
  text-transform: none; font-size: .9rem; line-height: 1;
  padding: 11px 18px; border-radius: var(--rayon-m); border: 1px solid transparent;
  background: var(--pin); color: #fff; transition: transform .12s, box-shadow .14s, background .14s, filter .14s;
  box-shadow: var(--ombre-s);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--ombre); }
.btn:active { transform: translateY(0); }
.btn.primaire { background: linear-gradient(135deg, var(--teal) 0%, #13988f 100%); }
.btn.primaire:hover { filter: brightness(1.05); }
.btn.contour { background: var(--panneau); border-color: var(--trait-fort); color: var(--encre); box-shadow: none; }
.btn.contour:hover { background: #f6f5ee; border-color: var(--teal); color: var(--teal-fonce); }
.btn.danger { background: linear-gradient(135deg, var(--rouge) 0%, #cc6052 100%); }
.btn.sm { padding: 7px 12px; font-size: .8rem; border-radius: var(--rayon-s); }
.btn-ligne { display: flex; gap: 10px; flex-wrap: wrap; }

/* Alertes / flash — arrondies et douces */
.flash { padding: 13px 16px; border-radius: var(--rayon-m); margin-bottom: 14px; font-size: .9rem; border: 1px solid transparent; display: flex; gap: 9px; align-items: flex-start; }
.flash::before { font-size: 1rem; line-height: 1.3; }
.flash.success { background: var(--vert-clair); border-color: #bfe0c9; color: #296b42; }
.flash.success::before { content: "✓"; }
.flash.error   { background: var(--rouge-clair); border-color: #ecc6bf; color: #8f3529; }
.flash.error::before { content: "!"; font-weight: 700; }
.flash.info    { background: var(--sauge); border-color: #c9ded6; color: #2d6a63; }
.flash.info::before { content: "i"; font-style: italic; font-weight: 700; }
.flash.warning { background: var(--miel-clair); border-color: #e7d2a8; color: #8a5f1c; }
.flash.warning::before { content: "!"; font-weight: 700; }

/* États vides — invitations à agir */
.vide { text-align: center; padding: 44px 24px; color: var(--texte-doux); }
.vide .eyebrow { display: block; margin-bottom: 6px; color: var(--encre); font-size: 1rem; }
.vide__icone {
  width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 16px;
  display: grid; place-items: center; color: var(--teal);
  background: var(--sauge);
}
.vide__icone svg { width: 28px; height: 28px; }

.fil { font-size: .84rem; color: var(--texte-doux); margin-bottom: 7px; }
.fil a { color: var(--texte-doux); }
.fil a:hover { color: var(--teal-fonce); }
.muted { color: var(--texte-doux); }
.mono { font-family: var(--num); font-variant-numeric: tabular-nums; }
.right { text-align: right; }
.sep { height: 1px; background: var(--trait); margin: 20px 0; }
hr { border: none; border-top: 1px solid var(--trait); margin: 20px 0; }

/* Connexion — accueil chaleureux */
.login-wrap {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background:
    radial-gradient(1100px 620px at 85% -10%, rgba(198,135,44,.30), transparent 60%),
    radial-gradient(900px 560px at 0% 110%, rgba(23,170,157,.28), transparent 55%),
    linear-gradient(160deg, #163730 0%, #0f241f 100%);
}
.login-card { width: 100%; max-width: 408px; background: var(--panneau); border-radius: 22px; box-shadow: var(--ombre-l); overflow: hidden; }
.login-card__tete { background: linear-gradient(140deg, #184037 0%, #10302a 100%); color: #fff; padding: 30px 30px 26px; }
.login-card__tete .rail__sous { color: #a9c3ba; }
.login-card__corps { padding: 28px 30px 32px; }
.login-card__corps h2 { margin: 0 0 4px; }
.login-card__accroche { color: var(--texte-doux); font-size: .95rem; margin: 0 0 22px; }

/* Responsive */
@media (max-width: 920px) {
  .rail { position: fixed; left: -280px; z-index: 50; transition: left .22s; box-shadow: var(--ombre-l); }
  .rail.ouvert { left: 0; }
  .grille-4 { grid-template-columns: repeat(2,1fr); }
  .grille-3 { grid-template-columns: 1fr; }
  .grille-2, .champs-2 { grid-template-columns: 1fr; }
  .menu-burger { display: inline-flex !important; }
  .salut__hello { font-size: 1.5rem; }
}
.menu-burger { display: none; background: none; border: none; font-size: 1.4rem; cursor: pointer; color: var(--encre); align-items: center; }

@media (prefers-reduced-motion: reduce) { *, .zone { animation: none !important; transition: none !important; } }