/* ============================================================================
   KAIROS — Design System  ·  Éditeur : 2ème Regard  ·  v1.0
   ----------------------------------------------------------------------------
   STRATÉGIE : ce fichier REDÉFINIT le vocabulaire .k-* / --k-* déjà utilisé
   par l'application (jusque-là inline dans les layouts) avec le nouveau look.
   → toutes les pages existantes se reskinnent automatiquement.
   Il AJOUTE aussi les composants neufs (dashboards) sous des noms non utilisés.

   À charger APRÈS Bootstrap 5, à la place de l'ancien <style> inline du layout.
   Police : Plus Jakarta Sans (à charger dans le <head>).
   Thème : clair par défaut ; sombre optionnel via <html data-theme="dark">.
   On conserve la mécanique existante : sidebar + header en position:fixed,
   .k-main décalé par margin. (Aucun changement de structure requis.)
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. TOKENS  (mêmes NOMS que l'existant, nouvelles VALEURS + quelques ajouts)
---------------------------------------------------------------------------- */
:root{
  /* — Marque (lime KAIROS) — */
  --k-lime:       #8BFF3A;
  --k-lime-2:     #5fc41f;   /* lime lisible sur blanc : courbes, traits */
  --k-lime-deep:  #3c8a17;   /* lime « en texte » sur fond clair */
  --k-on-lime:    #0a0f0b;   /* texte sur aplat lime */

  --k-brand:      var(--k-lime);       /* alias compat : ex-vert → lime */
  --k-brand-dark: #74e825;

  /* — Couleurs par module / statuts — */
  --k-red:    #ef4655;  --k-red-dark:#d12f3f;
  --k-green:  #15b886;        /* succès secondaire */
  --k-blue:   #3b82f6;        /* NEXUS */
  --k-orange: #ff7a1a;        /* Artisan */
  --k-violet: #8b5cf6;        /* PIPELINE */
  --k-yellow: #f0a020;        /* alias amber */
  --k-amber:  #f0a020;
  --k-teal:   #14b8a6;

  /* — Blocs foncés ponctuels — */
  --k-ink-block: #0c130d;
  --k-on-dark:   #eaf5e8;

  /* — Surfaces & texte (CLAIR par défaut) — */
  --k-content:   #eef2ec;    /* fond de page */
  --k-card:      #ffffff;    /* surface carte */
  --k-surface-2: #f4f8f2;    /* surface secondaire */
  --k-input:     #f4f8f2;
  --k-sidebar:   #ffffff;    /* sidebar claire désormais */
  --k-text:      #142016;
  --k-muted:     #5f6f63;   /* 4,71:1 sur --k-content, 5,33:1 sur carte (WCAG AA) */
  --k-border:    #e4ebe4;

  --k-nav-hover:  var(--k-surface-2);
  --k-nav-active: color-mix(in srgb, var(--k-lime) 16%, transparent);
  --k-accent-text: var(--k-lime-deep);
  --k-chart-line:  var(--k-lime-2);
  /* Indicateur de focus : le lime pur ne fait que 1,28:1 sur blanc.
     Vert foncé de la marque : 5,52:1 sur --k-content, 6,25:1 sur carte. */
  --k-focus:       #2f6e12;
  --k-link:        #2f6e12;   /* liens en texte : 6,25:1 sur carte (le lime-deep fait 4,34:1) */

  /* — Dimensions — */
  --k-sidebar-w: 260px;
  --k-header-h:  70px;
  --k-radius:    20px;
  --k-radius-sm: 13px;
  --k-radius-xs: 9px;

  --k-shadow:   0 1px 2px rgba(20,40,25,.05), 0 14px 30px -14px rgba(20,40,25,.15);
  --k-shadow-h: 0 1px 2px rgba(20,40,25,.06), 0 22px 44px -16px rgba(20,40,25,.24);
}

/* — THÈME SOMBRE (optionnel) — */
:root[data-theme="dark"]{
  --k-content:   #0a0f0b;
  --k-card:      #121a14;
  --k-surface-2: #0e1610;
  --k-input:     #0e1610;
  --k-sidebar:   #0c130d;
  --k-text:      #e9f3ea;
  --k-muted:     #8a9c8e;   /* 6,11:1 sur carte sombre, 6,65:1 sur fond (WCAG AA) */
  --k-border:    #1f2c23;
  --k-ink-block: #08110c;
  --k-nav-hover:  rgba(255,255,255,.05);
  --k-nav-active: color-mix(in srgb, var(--k-lime) 14%, transparent);
  --k-accent-text: var(--k-lime);
  --k-chart-line:  var(--k-lime);
  --k-focus:       var(--k-lime);   /* 13,9:1 sur carte sombre */
  --k-link:        var(--k-lime);
  --k-shadow:   0 1px 2px rgba(0,0,0,.5), 0 18px 38px -16px rgba(0,0,0,.7);
  --k-shadow-h: 0 1px 2px rgba(0,0,0,.6), 0 28px 54px -18px rgba(0,0,0,.8);
}

/* ----------------------------------------------------------------------------
   2. BASE
---------------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing:border-box; margin:0; padding:0; }
body{
  font-family:"Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  background:var(--k-content); color:var(--k-text); min-height:100vh;
  -webkit-font-smoothing:antialiased; transition:background .3s, color .3s;
}
a{ text-decoration:none; color:inherit; }
.k-muted{ color:var(--k-muted)!important; }
.k-mono{ font-variant-numeric:tabular-nums; font-weight:700; }
:focus-visible{ outline:2px solid var(--k-focus); outline-offset:2px; border-radius:6px; }

/* ----------------------------------------------------------------------------
   3. SIDEBAR  (claire + bloc de marque foncé)
---------------------------------------------------------------------------- */
.k-sidebar{
  position:fixed; top:0; left:0; width:var(--k-sidebar-w); height:100vh;
  background:var(--k-sidebar); border-right:1px solid var(--k-border);
  display:flex; flex-direction:column; z-index:100; transition:transform .3s ease, background .3s; overflow:hidden;
  padding:14px 14px 16px;
}

/* bloc de marque (foncé, arrondi) */
.k-sidebar-brand{
  display:flex; align-items:center; gap:11px; text-decoration:none; flex-shrink:0;
  background:var(--k-ink-block); border-radius:16px; padding:13px 15px; margin-bottom:8px;
}
.k-sidebar-logo{
  width:34px; height:34px; border-radius:9px; background:var(--k-lime);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  box-shadow:0 0 14px rgba(139,255,58,.4);
}
.k-sidebar-logo span{ color:var(--k-on-lime); font-weight:800; font-size:1.15rem; line-height:1; }
.k-sidebar-logo img{ height:24px; width:auto; }
.k-sidebar-name{ font-size:1.16rem; font-weight:800; color:#fff; letter-spacing:.02em; }
.k-sidebar-name em{ color:var(--k-lime); font-style:normal; }

/* org courante */
.k-sidebar-org{ padding:8px 12px; margin-bottom:6px; flex-shrink:0; }
.k-sidebar-org-name{ font-size:.78rem; font-weight:700; color:var(--k-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.k-sidebar-org-status{ font-size:.68rem; color:var(--k-lime-deep); display:flex; align-items:center; gap:5px; margin-top:2px; font-weight:600; }
.k-sidebar-org-status::before{ content:''; width:6px; height:6px; background:var(--k-lime); border-radius:50%; flex-shrink:0; }

/* nav */
.k-nav{ padding:6px 2px; }
.k-nav::-webkit-scrollbar{ display:none; }
.k-nav-section{ padding:0 12px; margin:14px 0 6px; }
.k-nav-section-label{ font-size:.7rem; font-weight:700; letter-spacing:.03em; color:var(--k-muted); }

/* Zone défilante : nav + cartouche scrollent ensemble (le cartouche suit le menu) */
.k-sidebar-scroll{ flex:1; min-height:0; overflow-y:auto; scrollbar-width:none; }
.k-sidebar-scroll::-webkit-scrollbar{ display:none; }

/* Catégorie repliable */
.k-nav-section--toggle{ display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; background:none; border:0; cursor:pointer; font-family:inherit; text-align:left; margin:14px 0 6px; padding:0 12px; }
.k-nav-section--toggle:hover .k-nav-section-label{ color:var(--k-text); }
.k-nav-chevron{
  font-size:.78rem; font-weight:700; color:var(--k-on-lime); flex-shrink:0;
  width:22px; height:22px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center;
  background:var(--k-lime); box-shadow:0 0 10px rgba(139,255,58,.45);
  transition:transform .22s ease, background .15s ease;
}
.k-nav-section--toggle:hover .k-nav-chevron{ background:var(--k-lime-deep); color:#fff; }
.k-nav-section--toggle[aria-expanded="false"] .k-nav-chevron{ transform:rotate(-90deg); }
.k-nav-section--toggle[aria-expanded="false"] .k-nav-chevron{ transform:rotate(-90deg); }
.k-nav-group{ overflow:hidden; max-height:1200px; transition:max-height .26s ease; }
.k-nav-group.collapsed{ max-height:0; }
.k-nav-separator{ height:1px; background:var(--k-border); margin:10px 8px; }

.k-nav-item{
  display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:12px;
  text-decoration:none; color:var(--k-text); font-size:.875rem; font-weight:600;
  transition:background .15s, color .15s; margin-bottom:2px; white-space:nowrap; overflow:hidden; position:relative;
}
.k-nav-item i{ font-size:1.05rem; flex-shrink:0; width:20px; text-align:center; }
.k-nav-item:hover{ background:var(--k-nav-hover); color:var(--k-text); }
.k-nav-item.active{ background:var(--k-nav-active); color:var(--k-accent-text); }
.k-nav-item.active i{ color:var(--k-accent-text); }
.k-nav-item.active::before{
  content:''; position:absolute; left:-14px; top:18%; height:64%; width:4px;
  border-radius:0 4px 4px 0; background:var(--k-lime);
}

/* user en bas */
.k-sidebar-user{ padding:12px; margin-top:auto; border-top:1px solid var(--k-border); display:flex; align-items:center; gap:10px; flex-shrink:0; }
.k-avatar{
  width:36px; height:36px; border-radius:10px; background:var(--k-ink-block);
  display:flex; align-items:center; justify-content:center; color:var(--k-lime);
  font-size:.78rem; font-weight:800; flex-shrink:0; overflow:hidden;
}
.k-avatar img{ width:100%; height:100%; object-fit:cover; }
.k-sidebar-user-info{ flex:1; min-width:0; }
.k-sidebar-user-name{ font-size:.82rem; font-weight:700; color:var(--k-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.k-sidebar-user-role{ font-size:.7rem; color:var(--k-muted); }
.k-sidebar-logout{ color:var(--k-muted); font-size:1rem; transition:color .15s; flex-shrink:0; }
.k-sidebar-logout:hover{ color:var(--k-red); }
/* Déconnexion en POST (logout.php) : le formulaire ne compte pas dans la mise en page */
.k-logout-form{ display:contents; }
button.k-sidebar-logout{ background:none; border:0; padding:0; cursor:pointer; font:inherit; }

/* ----------------------------------------------------------------------------
   4. HEADER
---------------------------------------------------------------------------- */
.k-header{
  position:fixed; top:0; left:var(--k-sidebar-w); right:0; height:var(--k-header-h);
  background:var(--k-content); border-bottom:1px solid transparent;
  display:flex; align-items:center; padding:0 1.75rem; gap:1rem; z-index:99; transition:background .3s;
}
.k-header-toggle{ display:none; background:none; border:none; color:var(--k-muted); font-size:1.25rem; cursor:pointer; padding:4px; }
.k-header-title{ font-size:1.05rem; font-weight:800; color:var(--k-text); display:flex; align-items:center; gap:8px; letter-spacing:-.01em; }
.k-header-title i{ color:var(--k-muted); font-size:.9rem; }
.k-header-spacer{ flex:1; }
.k-header-actions{ display:flex; align-items:center; gap:.6rem; }
.k-header-btn{
  background:var(--k-card); border:1px solid var(--k-border); border-radius:11px; color:var(--k-muted);
  padding:.45rem .7rem; font-size:.9rem; cursor:pointer; transition:all .15s; text-decoration:none;
  display:flex; align-items:center; gap:6px;
}
button.k-header-btn{ font-family:inherit; }
.k-header-btn:hover{ background:var(--k-surface-2); color:var(--k-text); border-color:var(--k-lime); }
.k-header-btn span{ font-size:.82rem; font-weight:600; }

/* segmented control (vue Org / Plateforme, périodes…) */
.k-seg{ display:flex; gap:3px; background:var(--k-card); border:1px solid var(--k-border); border-radius:12px; padding:4px; }
.k-seg button{ border:0; background:transparent; font-family:inherit; font-weight:700; font-size:.8rem; color:var(--k-muted);
  padding:8px 14px; border-radius:var(--k-radius-xs); cursor:pointer; transition:.15s; display:flex; align-items:center; gap:7px; }
.k-seg button.is-active{ background:var(--k-ink-block); color:#fff; }
.k-seg button.is-active i{ color:var(--k-lime); }

/* ----------------------------------------------------------------------------
   5. MAIN
---------------------------------------------------------------------------- */
.k-main{
  margin-left:var(--k-sidebar-w); margin-top:var(--k-header-h);
  padding:1.75rem; min-height:calc(100vh - var(--k-header-h));
}

/* ----------------------------------------------------------------------------
   6. CARTES  (compatibles header/body existants + variantes neuves)
---------------------------------------------------------------------------- */
.k-card{
  background:var(--k-card); border:1px solid var(--k-border); border-radius:var(--k-radius);
  box-shadow:var(--k-shadow); overflow:hidden; position:relative;
  transition:transform .18s, box-shadow .18s, border-color .18s, background .3s;
}
.k-card-header{ padding:1.1rem 1.4rem; border-bottom:1px solid var(--k-border); display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.k-card-title{ font-size:1rem; font-weight:700; color:var(--k-text); display:flex; align-items:center; gap:8px; letter-spacing:-.01em; }
.k-card-title small{ display:block; font-weight:500; font-size:.74rem; color:var(--k-muted); margin-top:2px; }
.k-card-title i{ color:var(--k-muted); }
.k-card-body{ padding:1.4rem; }

/* modificateurs neufs */
.k-card--pad{ padding:22px; }                      /* carte sans header/body */
.k-card--hover:hover{ transform:translateY(-3px); box-shadow:var(--k-shadow-h); border-color:color-mix(in srgb,var(--k-lime) 45%,var(--k-border)); }
.k-card--dark{ background:var(--k-ink-block); color:var(--k-on-dark); border:0; }
.k-card--dark .k-card-title, .k-card--dark .k-card-header{ color:#fff; border-color:rgba(255,255,255,.08); }
.k-card--dark .k-muted2{ color:rgba(234,245,232,.62); }
.k-card__glow{ position:absolute; width:240px; height:240px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(139,255,58,.26), transparent); top:-90px; right:-60px; pointer-events:none; }

/* poignée widget (mode Personnaliser) */
.k-grip{ position:absolute; top:14px; right:14px; color:var(--k-muted); opacity:0; transition:.15s; cursor:grab; font-size:.9rem; }
.k-card:hover .k-grip{ opacity:.5; }
.is-customizing .k-grip{ opacity:.6; }
.is-customizing .k-card{ border-style:dashed; border-color:color-mix(in srgb,var(--k-violet) 45%,var(--k-border)); }

/* ----------------------------------------------------------------------------
   7. STAT (existant, restylé) + KPI riche (neuf)
---------------------------------------------------------------------------- */
.k-stat{ background:var(--k-card); border:1px solid var(--k-border); border-radius:var(--k-radius); box-shadow:var(--k-shadow); padding:1.25rem 1.4rem; display:flex; align-items:center; gap:1rem; }
.k-stat-icon{ width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex-shrink:0; }
.k-stat-icon.red{ background:color-mix(in srgb,var(--k-red) 13%,transparent); color:var(--k-red); }
.k-stat-icon.green{ background:color-mix(in srgb,var(--k-lime) 22%,transparent); color:var(--k-lime-deep); }
.k-stat-icon.blue{ background:color-mix(in srgb,var(--k-blue) 14%,transparent); color:var(--k-blue); }
.k-stat-icon.yellow{ background:color-mix(in srgb,var(--k-amber) 18%,transparent); color:#b9750a; }
.k-stat-icon.orange{ background:color-mix(in srgb,var(--k-orange) 15%,transparent); color:var(--k-orange); }
.k-stat-icon.violet{ background:color-mix(in srgb,var(--k-violet) 16%,transparent); color:var(--k-violet); }
.k-stat-value{ font-size:1.6rem; font-weight:800; color:var(--k-text); line-height:1; letter-spacing:-.02em; }
.k-stat-label{ font-size:.8rem; color:var(--k-muted); margin-top:3px; font-weight:600; }

/* KPI riche (dashboards) */
.k-kpi{ display:flex; flex-direction:column; gap:13px; }
.k-kpi__top{ display:flex; justify-content:space-between; align-items:flex-start; }
.k-kpi__ico{ width:48px; height:48px; border-radius:14px; display:grid; place-items:center; font-size:1.3rem; }
.k-kpi__val{ font-size:2rem; font-weight:800; letter-spacing:-.03em; line-height:1; }
.k-kpi__lab{ font-size:.84rem; color:var(--k-text); font-weight:600; margin-top:4px; }
.k-kpi__foot{ font-size:.77rem; color:var(--k-muted); font-weight:500; }
.k-kpi__foot b{ color:var(--k-text); }
.k-ico-lime{ background:color-mix(in srgb,var(--k-lime) 22%,transparent); color:var(--k-lime-deep); }
.k-ico-blue{ background:color-mix(in srgb,var(--k-blue) 14%,transparent); color:var(--k-blue); }
.k-ico-orange{ background:color-mix(in srgb,var(--k-orange) 15%,transparent); color:var(--k-orange); }
.k-ico-violet{ background:color-mix(in srgb,var(--k-violet) 16%,transparent); color:var(--k-violet); }
.k-ico-amber{ background:color-mix(in srgb,var(--k-amber) 18%,transparent); color:#b9750a; }
.k-ico-teal{ background:color-mix(in srgb,var(--k-teal) 16%,transparent); color:var(--k-teal); }
.k-ico-red{ background:color-mix(in srgb,var(--k-red) 13%,transparent); color:var(--k-red); }
.k-trend{ font-size:.73rem; font-weight:700; padding:3px 9px; border-radius:8px; display:inline-flex; align-items:center; gap:3px; }
.k-trend--up{ color:var(--k-lime-deep); background:color-mix(in srgb,var(--k-lime) 20%,transparent); }
.k-trend--down{ color:var(--k-red); background:color-mix(in srgb,var(--k-red) 12%,transparent); }

/* ----------------------------------------------------------------------------
   8. FORMULAIRES
---------------------------------------------------------------------------- */
.k-label{ font-size:.82rem; font-weight:700; color:var(--k-text); margin-bottom:.4rem; display:block; }
.k-input, .k-select, .k-textarea{
  width:100%; background:var(--k-input); border:1px solid var(--k-border); border-radius:11px; color:var(--k-text);
  font-family:inherit; font-size:.9rem; padding:.65rem .9rem; transition:border-color .15s, box-shadow .15s; outline:none;
}
.k-input:focus, .k-select:focus, .k-textarea:focus{ border-color:var(--k-focus); box-shadow:0 0 0 1px var(--k-focus), 0 0 0 4px color-mix(in srgb,var(--k-lime) 30%,transparent); background:var(--k-card); }
.k-textarea{ resize:vertical; min-height:100px; }
.k-switch{ width:46px; height:26px; border-radius:20px; background:var(--k-border); position:relative; cursor:pointer; transition:.2s; flex-shrink:0; border:0; }
.k-switch::after{ content:''; position:absolute; width:20px; height:20px; border-radius:50%; background:#fff; top:3px; left:3px; transition:.2s; box-shadow:0 1px 3px rgba(0,0,0,.25); }
.k-switch.is-on{ background:var(--k-lime); }
.k-switch.is-on::after{ left:23px; background:var(--k-on-lime); }

/* ----------------------------------------------------------------------------
   9. BOUTONS
---------------------------------------------------------------------------- */
.btn-k-primary{
  background:var(--k-lime); color:var(--k-on-lime); border:none; border-radius:11px; padding:.6rem 1.25rem;
  font-family:inherit; font-size:.875rem; font-weight:800; cursor:pointer; transition:transform .12s, box-shadow .15s;
  text-decoration:none; display:inline-flex; align-items:center; gap:7px;
  box-shadow:0 10px 24px -12px color-mix(in srgb,var(--k-lime) 75%,transparent);
}
.btn-k-primary:hover{ color:var(--k-on-lime); transform:translateY(-1px); }
.btn-k-primary:active{ transform:scale(.98); }
.btn-k-outline{
  background:var(--k-card); color:var(--k-text); border:1px solid var(--k-border); border-radius:11px; padding:.6rem 1.25rem;
  font-family:inherit; font-size:.875rem; font-weight:600; cursor:pointer; transition:all .15s; text-decoration:none;
  display:inline-flex; align-items:center; gap:7px;
}
.btn-k-outline:hover{ background:var(--k-surface-2); border-color:var(--k-lime); color:var(--k-lime-deep); }
.btn-k-dark{ background:var(--k-ink-block); color:var(--k-lime); border:0; border-radius:11px; padding:.6rem 1.1rem; font-family:inherit; font-weight:700; font-size:.84rem; cursor:pointer; display:inline-flex; align-items:center; gap:7px; }
/* Bouton d'action « succès » (valider / activer) — vert secondaire de la charte. */
.btn-k-success{
  background:var(--k-green); color:#fff; border:none; border-radius:11px; padding:.6rem 1.25rem;
  font-family:inherit; font-size:.875rem; font-weight:800; cursor:pointer; transition:transform .12s, box-shadow .15s;
  text-decoration:none; display:inline-flex; align-items:center; gap:7px;
  box-shadow:0 10px 24px -12px color-mix(in srgb,var(--k-green) 75%,transparent);
}
.btn-k-success:hover{ color:#fff; transform:translateY(-1px); }
.btn-k-success:active{ transform:scale(.98); }

/* ----------------------------------------------------------------------------
   KAIROS UI — dialogues globaux (modales + toasts). Namespace .kui-*
   Remplacent les popups natives (alert/confirm/prompt). Voir assets/js/kairos-ui.js
---------------------------------------------------------------------------- */
.kui-backdrop{
  position:fixed; inset:0; z-index:100000;
  display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(10,15,11,.55); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .18s ease;
}
.kui-backdrop--in{ opacity:1; }
.kui-modal{
  width:100%; max-width:440px; background:var(--k-card); color:var(--k-text);
  border:1px solid var(--k-border); border-radius:var(--k-radius);
  box-shadow:var(--k-shadow-h); padding:22px 22px 18px;
  transform:translateY(8px) scale(.98); opacity:0;
  transition:transform .2s cubic-bezier(.2,.8,.2,1), opacity .2s ease;
}
.kui-modal--in{ transform:none; opacity:1; }
.kui-modal__head{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.kui-modal__icon{
  width:42px; height:42px; flex:0 0 42px; border-radius:12px;
  display:flex; align-items:center; justify-content:center; font-size:1.25rem;
  background:color-mix(in srgb, var(--k-lime) 16%, transparent); color:var(--k-lime-deep);
}
.kui-modal__icon--danger{ background:color-mix(in srgb, var(--k-red) 14%, transparent); color:var(--k-red); }
.kui-modal__title{ font-size:1.12rem; font-weight:800; color:var(--k-text); margin:0; }
.kui-modal__body{ margin:2px 0 18px; }
.kui-modal__msg{ font-size:.92rem; line-height:1.5; color:var(--k-text); opacity:.85; white-space:pre-line; }
.kui-modal__input{
  width:100%; margin-top:12px; font-family:inherit; font-size:.9rem; color:var(--k-text);
  background:var(--k-surface-2); border:1px solid var(--k-border); border-radius:11px; padding:.6rem .8rem; outline:none;
}
.kui-modal__input:focus{ border-color:var(--k-focus); box-shadow:0 0 0 1px var(--k-focus), 0 0 0 4px color-mix(in srgb,var(--k-lime) 30%,transparent); }
textarea.kui-modal__input{ min-height:90px; resize:vertical; }
.kui-modal__foot{ display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; }
.kui-btn{
  font-family:inherit; font-size:.875rem; font-weight:800; cursor:pointer;
  border-radius:11px; padding:.58rem 1.15rem; border:1px solid transparent;
  display:inline-flex; align-items:center; gap:7px; transition:transform .12s, box-shadow .15s, background .15s;
}
.kui-btn:active{ transform:scale(.97); }
.kui-btn--primary{ background:var(--k-lime); color:var(--k-on-lime); box-shadow:0 10px 24px -12px color-mix(in srgb,var(--k-lime) 75%,transparent); }
.kui-btn--primary:hover{ transform:translateY(-1px); }
.kui-btn--danger{ background:var(--k-red); color:#fff; box-shadow:0 10px 24px -12px color-mix(in srgb,var(--k-red) 70%,transparent); }
.kui-btn--danger:hover{ transform:translateY(-1px); }
.kui-btn--cancel{ background:var(--k-card); color:var(--k-text); border-color:var(--k-border); }
.kui-btn--cancel:hover{ background:var(--k-surface-2); border-color:var(--k-lime); color:var(--k-lime-deep); }

.kui-toast-host{
  position:fixed; top:18px; right:18px; z-index:100010;
  display:flex; flex-direction:column; gap:10px; max-width:min(380px, calc(100vw - 36px)); pointer-events:none;
}
.kui-toast{
  pointer-events:auto; display:flex; align-items:flex-start; gap:10px;
  background:var(--k-card); color:var(--k-text); border:1px solid var(--k-border);
  border-left:4px solid var(--k-lime-2); border-radius:13px; box-shadow:var(--k-shadow-h);
  padding:12px 12px 12px 14px; transform:translateX(120%); opacity:0;
  transition:transform .24s cubic-bezier(.2,.8,.2,1), opacity .2s;
}
.kui-toast--in{ transform:none; opacity:1; }
.kui-toast--out{ transform:translateX(120%); opacity:0; }
.kui-toast__icon{ font-size:1.05rem; line-height:1.35; }
.kui-toast__msg{ flex:1; font-size:.86rem; font-weight:600; line-height:1.35; }
.kui-toast__close{ background:none; border:none; color:var(--k-text); opacity:.5; font-size:1.15rem; line-height:1; cursor:pointer; padding:0 2px; }
.kui-toast__close:hover{ opacity:1; }
.kui-toast--success{ border-left-color:var(--k-lime-2); } .kui-toast--success .kui-toast__icon{ color:var(--k-lime-deep); }
.kui-toast--error{ border-left-color:var(--k-red); }     .kui-toast--error .kui-toast__icon{ color:var(--k-red); }
.kui-toast--warning{ border-left-color:var(--k-amber); } .kui-toast--warning .kui-toast__icon{ color:var(--k-amber); }
.kui-toast--info{ border-left-color:var(--k-lime-2); }    .kui-toast--info .kui-toast__icon{ color:var(--k-lime-deep); }

@media (max-width:560px){
  .kui-toast-host{ left:14px; right:14px; top:14px; max-width:none; }
  .kui-toast, .kui-toast--out{ transform:translateY(-140%); }
  .kui-toast--in{ transform:none; }
}

/* ----------------------------------------------------------------------------
   10. TABLEAUX
---------------------------------------------------------------------------- */
.k-table{ width:100%; border-collapse:collapse; font-size:.875rem; }
.k-table th{ background:transparent; color:var(--k-muted); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:.7rem 1rem; text-align:left; border-bottom:1px solid var(--k-border); }
.k-table td{ padding:.85rem 1rem; border-bottom:1px solid var(--k-border); color:var(--k-text); vertical-align:middle; font-weight:500; }
.k-table tr:last-child td{ border-bottom:none; }
.k-table tbody tr:hover{ background:var(--k-surface-2); }
.k-cli{ display:flex; align-items:center; gap:10px; }
.k-cli-av{ width:32px; height:32px; border-radius:9px; display:grid; place-items:center; font-weight:700; font-size:.74rem; color:#fff; flex-shrink:0; }

/* ----------------------------------------------------------------------------
   11. BADGES / PILLS  (existant restylé — sert aussi de statuts dashboard)
---------------------------------------------------------------------------- */
.k-badge{ display:inline-flex; align-items:center; gap:5px; padding:.25rem .7rem; border-radius:20px; font-size:.72rem; font-weight:700; }
.k-badge.success  { background:color-mix(in srgb,var(--k-lime) 22%,transparent);  color:var(--k-lime-deep); }
.k-badge.danger   { background:color-mix(in srgb,var(--k-red) 12%,transparent);   color:var(--k-red); }
.k-badge.warning  { background:color-mix(in srgb,var(--k-amber) 18%,transparent); color:#b9750a; }
.k-badge.info     { background:color-mix(in srgb,var(--k-blue) 13%,transparent);  color:var(--k-blue); }
.k-badge.violet   { background:color-mix(in srgb,var(--k-violet) 14%,transparent);color:var(--k-violet); }
.k-badge.secondary{ background:var(--k-surface-2); color:var(--k-muted); }

/* ----------------------------------------------------------------------------
   12. LISTE « À TRAITER »  (transverse — alimentée par getTodos() des modules)
---------------------------------------------------------------------------- */
.k-todo{ display:flex; align-items:center; gap:13px; padding:13px 15px; border-radius:14px; background:var(--k-surface-2);
  border:1px solid var(--k-border); border-left:3px solid var(--k-todo-c, var(--k-blue)); cursor:pointer; transition:.15s; }
.k-todo + .k-todo{ margin-top:8px; }
.k-todo:hover{ background:var(--k-card); box-shadow:var(--k-shadow); transform:translateX(2px); }
.k-todo__ico{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center; font-size:1.05rem; flex-shrink:0; background:var(--k-card); border:1px solid var(--k-border); }
.k-todo__t{ font-weight:700; font-size:.87rem; margin:0; }
.k-todo__s{ font-size:.75rem; color:var(--k-muted); font-weight:500; }
.k-todo__cta{ margin-left:auto; font-size:.72rem; font-weight:700; color:var(--k-lime-deep); white-space:nowrap; }
.k-todo--warn{ --k-todo-c:var(--k-amber); }
.k-todo--crit{ --k-todo-c:var(--k-red); }
.k-todo--info{ --k-todo-c:var(--k-blue); }
.k-todo--ia  { --k-todo-c:var(--k-violet); }
.k-todo--ok  { --k-todo-c:var(--k-lime); }

/* ----------------------------------------------------------------------------
   13. GRAPHES (donut + légende) + pills de période
---------------------------------------------------------------------------- */
.k-pills{ display:flex; gap:3px; background:var(--k-surface-2); border-radius:11px; padding:4px; }
/* Les pastilles acceptent aussi des liens : une sous-navigation de module change
   de page, elle ne se pilote pas en JavaScript. Ajout de selecteur uniquement,
   aucun style existant modifie. */
.k-pills button,
.k-pills a{ border:0; background:transparent; font-family:inherit; font-weight:600; font-size:.77rem; color:var(--k-muted); padding:6px 13px; border-radius:8px; cursor:pointer; transition:.15s; text-decoration:none; display:inline-flex; align-items:center; gap:5px; }
.k-pills a:hover{ color:var(--k-text); }
.k-pills button.is-active,
.k-pills a.is-active{ background:var(--k-lime); color:var(--k-on-lime); }
.k-pills a.is-disabled{ opacity:.55; cursor:default; }
.k-pills a.is-disabled:hover{ color:var(--k-muted); }
/* ---- Encarts de guidage -----------------------------------------------------
   Un message qui oriente, coloré selon ce qu'il annonce. Remplace les blocs
   bricolés en style inline, qui finissaient tous gris et se ressemblaient. */
.k-hint{ display:flex; gap:11px; align-items:flex-start; padding:.85rem 1rem; border-radius:13px;
         font-size:.87rem; line-height:1.5; border-left:3px solid var(--k-muted); background:var(--k-surface-2); }
.k-hint > i{ font-size:1.05rem; flex-shrink:0; margin-top:1px; }
.k-hint b{ font-weight:800; }
.k-hint.info   { border-left-color:var(--k-blue);  background:color-mix(in srgb,var(--k-blue) 7%,transparent); }
.k-hint.info > i{ color:var(--k-blue); }
.k-hint.success{ border-left-color:var(--k-lime-deep); background:color-mix(in srgb,var(--k-lime) 13%,transparent); }
.k-hint.success > i{ color:var(--k-lime-deep); }
.k-hint.warning{ border-left-color:#b9750a; background:color-mix(in srgb,var(--k-amber) 13%,transparent); }
.k-hint.warning > i{ color:#b9750a; }
.k-hint.danger { border-left-color:var(--k-red); background:color-mix(in srgb,var(--k-red) 8%,transparent); }
.k-hint.danger > i{ color:var(--k-red); }

/* ---- Retour -----------------------------------------------------------------
   RÈGLE : tout écran de détail (une fiche, un document) porte un retour VISIBLE
   en haut à gauche, avant le titre. Un lien gris de 0,8 rem se cherche ; un
   bouton se voit. Le libellé nomme la destination - « Tous les chantiers » et
   non « Retour », qui ne dit pas où l'on atterrit. */
.k-back{ display:inline-flex; align-items:center; gap:7px; padding:.45rem .85rem; border-radius:11px;
         background:var(--k-card); border:1px solid var(--k-border); color:var(--k-text);
         font-family:inherit; font-weight:700; font-size:.82rem; text-decoration:none;
         transition:.15s; margin-bottom:.6rem; }
.k-back:hover{ border-color:var(--k-lime); color:var(--k-lime-deep); box-shadow:var(--k-shadow); }
.k-back i{ font-size:.95rem; transition:transform .15s; }
.k-back:hover i{ transform:translateX(-2px); }

/* ---- Fil des étapes ---------------------------------------------------------
   Dire où l'on en est et ce qui vient ensuite. Trois états : fait, en cours,
   à venir. Sans cela, un écran qui enchaîne dossier, relevé puis devis laisse
   l'utilisateur deviner l'ordre. */
.k-steps{ display:flex; gap:8px; flex-wrap:wrap; }
.k-step{ display:flex; align-items:center; gap:9px; padding:.6rem .9rem; border-radius:13px;
         background:var(--k-surface-2); border:1px solid var(--k-border); flex:1 1 190px; min-width:0; }
.k-step__num{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; flex-shrink:0;
              font-size:.78rem; font-weight:800; background:var(--k-border); color:var(--k-muted); }
.k-step__txt{ min-width:0; }
.k-step__title{ font-size:.84rem; font-weight:800; color:var(--k-text); white-space:nowrap;
                overflow:hidden; text-overflow:ellipsis; }
.k-step__sub{ font-size:.74rem; color:var(--k-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.k-step.is-done{ background:color-mix(in srgb,var(--k-lime) 12%,transparent); border-color:color-mix(in srgb,var(--k-lime) 40%,var(--k-border)); }
.k-step.is-done .k-step__num{ background:var(--k-lime); color:var(--k-on-lime); }
.k-step.is-current{ background:var(--k-card); border-color:var(--k-orange); box-shadow:0 0 0 3px color-mix(in srgb,var(--k-orange) 14%,transparent); }
.k-step.is-current .k-step__num{ background:var(--k-orange); color:#fff; }
.k-step.is-locked{ opacity:.6; }

/* ---- Frise du chantier ------------------------------------------------------
   Le fil des étapes dit où l'on en est dans le TRAVAIL ; la frise dit où l'on
   en est dans le TEMPS. Les jalons sont répartis régulièrement et non à
   l'échelle : deux dates voisines se chevaucheraient, et c'est l'ORDRE qui se
   lit, pas la distance. Un jalon dont la date est passée sans avoir eu lieu
   passe au rouge - c'est tout l'intérêt de la frise. */
.k-timeline{ display:flex; align-items:flex-start; overflow-x:auto; padding:2px 0 4px; }
.k-timeline__pt{ position:relative; flex:1 1 0; min-width:104px; text-align:center; padding-top:26px; }
.k-timeline__pt::before{ content:""; position:absolute; top:11px; left:0; right:0; height:2px; background:var(--k-border); }
.k-timeline__pt:first-child::before{ left:50%; }
.k-timeline__pt:last-child::before{ right:50%; }
.k-timeline__pt.is-done::before{ background:color-mix(in srgb,var(--k-lime) 55%,var(--k-border)); }
.k-timeline__dot{ position:absolute; top:2px; left:50%; transform:translateX(-50%); z-index:1;
                  width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
                  font-size:.66rem; background:var(--k-card); border:2px solid var(--k-border); color:var(--k-muted); }
.k-timeline__lab{ font-size:.75rem; font-weight:800; color:var(--k-text); line-height:1.2; padding:0 4px; }
.k-timeline__d{ font-size:.72rem; color:var(--k-muted); font-weight:600; }
.k-timeline__pt.is-done .k-timeline__dot{ background:var(--k-lime); border-color:var(--k-lime); color:var(--k-on-lime); }
.k-timeline__pt.is-next .k-timeline__dot{ background:var(--k-orange); border-color:var(--k-orange); color:#fff;
                                          box-shadow:0 0 0 4px color-mix(in srgb,var(--k-orange) 16%,transparent); }
.k-timeline__pt.is-next .k-timeline__d{ color:var(--k-text); }
.k-timeline__pt.is-late .k-timeline__dot{ background:var(--k-red); border-color:var(--k-red); color:#fff; }
.k-timeline__pt.is-late .k-timeline__d{ color:var(--k-red); font-weight:800; }
.k-timeline__pt.is-empty .k-timeline__lab{ color:var(--k-muted); font-weight:700; }
.k-timeline__pt.is-empty .k-timeline__dot{ border-style:dashed; }

/* ---- Bouton destructif ------------------------------------------------------
   Une suppression se voit. Rouge, toujours, et jamais la couleur d'action
   principale. */
.btn-k-danger{ display:inline-flex; align-items:center; justify-content:center; gap:7px; cursor:pointer;
               font-family:inherit; font-weight:700; font-size:.85rem; padding:.55rem .9rem; border-radius:11px;
               background:transparent; color:var(--k-red); border:1px solid color-mix(in srgb,var(--k-red) 45%,transparent);
               transition:.15s; text-decoration:none; }
.btn-k-danger:hover{ background:color-mix(in srgb,var(--k-red) 10%,transparent); color:var(--k-red-dark); border-color:var(--k-red); }

.k-donut{ position:relative; }
.k-donut__center{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; pointer-events:none; }
.k-donut__center b{ font-size:1.5rem; font-weight:800; display:block; line-height:1; }
.k-donut__center span{ font-size:.7rem; color:var(--k-muted); font-weight:600; }
.k-legend__row{ display:flex; align-items:center; gap:9px; font-size:.83rem; font-weight:600; margin-bottom:9px; }
.k-legend__dot{ width:11px; height:11px; border-radius:4px; flex-shrink:0; }
.k-legend__row .n{ margin-left:auto; color:var(--k-text); font-weight:700; }

/* ----------------------------------------------------------------------------
   14. ÉTAT VIDE + ROLE TAG
---------------------------------------------------------------------------- */
.k-empty{ text-align:center; padding:26px 16px; }
.k-empty__ico{ width:62px; height:62px; border-radius:18px; background:var(--k-surface-2); display:grid; place-items:center; font-size:1.7rem; color:var(--k-muted); margin:0 auto 14px; }
.k-empty h6{ font-weight:700; margin:0 0 4px; }
.k-empty p{ font-size:.84rem; color:var(--k-muted); margin:0 0 16px; }
.k-roletag{ font-size:.62rem; font-weight:700; text-align:center; padding:6px; border-radius:var(--k-radius-xs); margin-bottom:8px; flex-shrink:0; }
.k-roletag--org { background:color-mix(in srgb,var(--k-lime) 18%,transparent);   color:var(--k-lime-deep); }
.k-roletag--plat{ background:color-mix(in srgb,var(--k-violet) 16%,transparent); color:var(--k-violet); }

/* ----------------------------------------------------------------------------
   14b. ACCUEIL DASHBOARD : hero + lanceur de modules + sparklines
---------------------------------------------------------------------------- */
/* Hero d'accueil (bandeau foncé) */
.k-hero{ display:flex; align-items:center; gap:18px; background:var(--k-ink-block); border-radius:24px; padding:22px 26px; margin-bottom:20px; position:relative; overflow:hidden; }
.k-hero__glow{ position:absolute; width:320px; height:320px; border-radius:50%; background:radial-gradient(closest-side,rgba(139,255,58,.3),transparent); top:-140px; right:-60px; pointer-events:none; }
.k-hero__l{ flex:1; position:relative; z-index:1; min-width:0; }
.k-hero h3{ color:#fff; font-weight:800; font-size:1.45rem; margin:0; letter-spacing:-.02em; }
.k-hero p{ color:rgba(234,245,232,.7); font-size:.9rem; margin:4px 0 0; font-weight:500; }
.k-hero__cta{ position:relative; z-index:1; display:flex; gap:10px; flex-shrink:0; }
.btn-k-dark-ghost{ background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.14); font-family:inherit; font-weight:700; font-size:.86rem; padding:12px 18px; border-radius:13px; cursor:pointer; display:inline-flex; align-items:center; gap:8px; text-decoration:none; transition:.15s; }
.btn-k-dark-ghost:hover{ background:rgba(255,255,255,.14); color:#fff; }

/* Titre de section */
.k-sect-title{ font-size:.82rem; letter-spacing:.01em; color:var(--k-muted); font-weight:700; margin:0 0 12px 2px; display:flex; align-items:center; gap:8px; }

/* Lanceur : grille de tuiles colorées (couleur module via --k-tile-c) */
.k-launcher-wrap{ margin-bottom:22px; }
.k-launcher{ display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:14px; }
.k-launch-tile{
  position:relative; overflow:hidden; background:var(--k-card); border:1px solid var(--k-border); border-radius:20px;
  padding:18px; cursor:pointer; text-decoration:none; color:var(--k-text); box-shadow:var(--k-shadow);
  transition:transform .18s, box-shadow .18s, border-color .18s; display:block;
}
.k-launch-tile:hover{ transform:translateY(-4px); box-shadow:var(--k-shadow-h); border-color:var(--k-tile-c, var(--k-lime)); }
.k-launch-glow{ position:absolute; width:130px; height:130px; border-radius:50%; top:-55px; right:-35px; opacity:.16; background:var(--k-tile-c, var(--k-blue)); pointer-events:none; }
.k-launch-ico{ width:52px; height:52px; border-radius:16px; display:grid; place-items:center; font-size:1.5rem; margin-bottom:14px; position:relative; z-index:1; background:color-mix(in srgb, var(--k-tile-c, var(--k-blue)) 16%, transparent); color:var(--k-tile-c, var(--k-blue)); }
.k-launch-name{ font-weight:800; font-size:1.04rem; position:relative; z-index:1; }
.k-launch-stat{ font-weight:700; font-size:.8rem; color:var(--k-tile-c, var(--k-blue)); margin-top:3px; position:relative; z-index:1; }
.k-launch-arrow{ position:absolute; bottom:18px; right:18px; color:var(--k-muted); font-size:1rem; opacity:0; transition:.18s; z-index:1; }
.k-launch-tile:hover .k-launch-arrow{ opacity:1; color:var(--k-tile-c, var(--k-lime)); transform:translateX(2px); }
.k-launch-tile--add{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; border-style:dashed; color:var(--k-muted); min-height:152px; }
.k-launch-tile--add .k-launch-ico{ background:var(--k-surface-2); color:var(--k-muted); margin-bottom:8px; }

/* Sparkline KPI */
.k-spark{ height:38px; margin-top:12px; }

/* ----------------------------------------------------------------------------
   3b. BLOC ADMINISTRATION (sidebar — admin de l'organisation uniquement)
---------------------------------------------------------------------------- */
.k-nav-admin{ margin-top:6px; padding-top:8px; border-top:1px dashed var(--k-border); }
.k-nav-admin .k-nav-item{ color:var(--k-ink-soft); }
.k-nav-admin .k-nav-item i{ color:var(--k-muted); }
.k-nav-admin .k-nav-item.active,
.k-nav-admin .k-nav-item.active i{ color:var(--k-lime-deep); }

/* ----------------------------------------------------------------------------
   14c. CARTOUCHE UPSELL PRO (bas de sidebar, admin orga)
---------------------------------------------------------------------------- */
.k-upsell{
  display:block; position:relative; overflow:hidden; margin-top:10px; flex-shrink:0;
  background:var(--k-ink-block); border-radius:18px; padding:16px 16px 14px;
  text-decoration:none; color:var(--k-on-dark); transition:transform .16s, box-shadow .16s;
}
.k-upsell:hover{ transform:translateY(-2px); box-shadow:var(--k-shadow-h); color:#fff; }
.k-upsell__glow{ position:absolute; width:160px; height:160px; border-radius:50%; top:-80px; right:-50px; background:radial-gradient(closest-side, rgba(139,255,58,.32), transparent); pointer-events:none; }
.k-upsell__ico{ position:relative; z-index:1; width:36px; height:36px; border-radius:11px; display:grid; place-items:center; font-size:1.05rem; background:rgba(139,255,58,.16); color:var(--k-lime); margin-bottom:10px; }
.k-upsell__title{ position:relative; z-index:1; display:block; font-weight:800; font-size:.95rem; color:#fff; }
.k-upsell__txt{ position:relative; z-index:1; display:block; font-size:.74rem; color:rgba(234,245,232,.65); line-height:1.4; margin-top:2px; margin-bottom:12px; }
.k-upsell__btn{ position:relative; z-index:1; display:inline-flex; align-items:center; gap:6px; font-size:.78rem; font-weight:800; color:var(--k-on-lime); background:var(--k-lime); border-radius:10px; padding:8px 12px; }

/* ----------------------------------------------------------------------------
   14d. PAGES D'AUTHENTIFICATION (connexion, inscriptions, mot de passe, email)
   Carte à deux panneaux : marque sur bloc foncé, formulaire sur carte claire.
   Les champs réutilisent .k-label / .k-input, les boutons .btn-k-primary,
   les messages .k-hint. Voir templates/auth_head.php et assets/js/auth.js.
---------------------------------------------------------------------------- */
.k-auth{
  min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.25rem; padding:2rem 1rem;
  background:
    radial-gradient(800px 500px at 12% 8%, color-mix(in srgb,var(--k-lime) 14%,transparent), transparent 60%),
    radial-gradient(800px 600px at 90% 95%, color-mix(in srgb,var(--k-lime) 9%,transparent), transparent 60%),
    var(--k-content);
}
.k-auth a:not(.btn-k-primary):not(.btn-k-outline){ color:var(--k-link); font-weight:600; }
.k-auth a:not(.btn-k-primary):not(.btn-k-outline):hover{ text-decoration:underline; }
.k-auth-card{
  width:100%; max-width:960px; display:grid; grid-template-columns:1.05fr 1fr;
  background:var(--k-card); border:1px solid var(--k-border); border-radius:24px; overflow:hidden;
  box-shadow:var(--k-shadow-h);
}
.k-auth-card--narrow{ max-width:520px; grid-template-columns:1fr; }
.k-auth-card--wide{ max-width:820px; grid-template-columns:1fr; }

/* Panneau de marque */
.k-auth-brand{
  position:relative; overflow:hidden; padding:3rem 2.75rem; color:var(--k-on-dark);
  display:flex; flex-direction:column; justify-content:center;
  background:
    radial-gradient(520px 360px at 0% 0%, rgba(139,255,58,.16), transparent 62%),
    radial-gradient(520px 420px at 100% 100%, rgba(139,255,58,.10), transparent 60%),
    var(--k-ink-block);
}
.k-auth-brand--bar{ padding:1.6rem 2.25rem; }
.k-auth-logo{ height:40px; width:auto; max-width:78%; object-fit:contain; align-self:flex-start; margin-bottom:1.5rem; display:block; }
.k-auth-brand--bar .k-auth-logo{ margin-bottom:.6rem; }
.k-auth-hi{ font-size:1.5rem; font-weight:800; line-height:1.25; margin:0 0 .5rem; color:#fff; letter-spacing:-.01em; }
.k-auth-hi em{ color:var(--k-lime); font-style:normal; }
.k-auth-sub{ color:rgba(234,245,232,.78); font-size:.92rem; line-height:1.6; max-width:34ch; }
.k-auth-brand--bar .k-auth-sub{ max-width:none; }
.k-auth-perks{ list-style:none; margin:1.9rem 0 0; display:grid; grid-template-columns:1fr 1fr; gap:.65rem 1.2rem; }
.k-auth-perk{ display:flex; align-items:center; gap:9px; font-size:.88rem; color:var(--k-on-dark); font-weight:500; }
.k-auth-perk i{ color:var(--k-lime); font-size:1rem; flex-shrink:0; }
.k-auth-note{
  margin-top:1.9rem; display:flex; align-items:center; gap:10px;
  background:rgba(139,255,58,.10); border:1px solid rgba(139,255,58,.30);
  border-radius:var(--k-radius-sm); padding:.7rem 1rem; font-size:.85rem; color:var(--k-on-dark);
}
.k-auth-note i{ color:var(--k-lime); font-size:1.1rem; flex-shrink:0; }

/* Panneau formulaire */
.k-auth-main{ padding:2.75rem 2.5rem; display:flex; flex-direction:column; justify-content:center; background:var(--k-card); }
.k-auth-title{ font-size:1.5rem; font-weight:800; margin:0 0 4px; color:var(--k-text); letter-spacing:-.01em; }
.k-auth-desc{ color:var(--k-muted); font-size:.9rem; line-height:1.55; margin:0 0 1.4rem; }
.k-auth-desc strong{ color:var(--k-text); }
.k-auth-section{ font-size:1rem; font-weight:800; color:var(--k-text); display:flex; align-items:center; gap:8px; margin:0 0 1rem; }
.k-auth-section i{ color:var(--k-lime-deep); }
.k-auth-sep{ border:0; border-top:1px solid var(--k-border); margin:1.6rem 0; }
.k-field{ margin-bottom:.95rem; }
.k-auth-row{ display:flex; gap:.75rem; }
.k-auth-row > .k-field{ flex:1; min-width:0; }
.k-auth-help{ display:block; color:var(--k-muted); font-size:.76rem; line-height:1.45; margin-top:5px; }
.k-req{ color:var(--k-red-dark); font-weight:800; }
.k-optional{ color:var(--k-muted); font-weight:500; }
.k-input:disabled{ opacity:1; color:var(--k-muted); cursor:not-allowed; }
.k-input-prefix{ position:relative; }
.k-input-prefix > span{ position:absolute; left:.9rem; top:50%; transform:translateY(-50%); color:var(--k-muted); font-weight:700; pointer-events:none; }
.k-input-prefix > .k-input{ padding-left:1.9rem; }
.k-auth .k-hint{ margin-bottom:1.1rem; }
.k-auth .k-hint ul{ margin:0; padding-left:1.1rem; }

/* Bouton pleine largeur */
.k-auth-submit{ width:100%; justify-content:center; padding:.82rem 1.25rem; font-size:.95rem; margin-top:.4rem; }
.k-auth .btn-k-outline:hover{ color:var(--k-link); }
.btn-k-primary:disabled{ opacity:.7; cursor:progress; transform:none; }

/* Mot de passe : œil + critères */
.k-pwd{ position:relative; }
.k-pwd > .k-input{ padding-right:2.9rem; }
.k-pwd__eye{
  position:absolute; right:5px; top:50%; transform:translateY(-50%);
  background:none; border:0; border-radius:8px; color:var(--k-muted); cursor:pointer;
  padding:6px 9px; font-size:1rem; line-height:1;
}
.k-pwd__eye:hover{ color:var(--k-text); }
.k-pwd-rules{ list-style:none; margin:.55rem 0 0; display:flex; flex-direction:column; gap:3px; }
.k-pwd-rule{ display:flex; align-items:center; gap:7px; font-size:.78rem; color:var(--k-muted); font-weight:500; }
.k-pwd-rule i{ font-size:.75rem; width:14px; }
.k-pwd-rule.is-ok{ color:var(--k-link); font-weight:700; }

/* Liens et pied */
.k-auth-links{ display:flex; flex-direction:column; gap:.7rem; margin-top:1.3rem; text-align:center; font-size:.85rem; }
.k-auth-foot{ text-align:center; color:var(--k-muted); font-size:.85rem; margin-top:1.3rem; }
.k-auth-copy{ text-align:center; color:var(--k-muted); font-size:.76rem; }

/* États (succès, lien invalide) */
.k-auth-state{ text-align:center; }
.k-auth-state .k-auth-desc{ margin-top:6px; }
.k-auth-state__icon{
  width:64px; height:64px; border-radius:50%; display:grid; place-items:center;
  font-size:1.8rem; margin:0 auto 1rem;
}
.k-auth-state__icon.is-ok{ background:var(--k-lime); color:var(--k-on-lime); box-shadow:0 10px 26px -12px color-mix(in srgb,var(--k-lime) 80%,transparent); }
.k-auth-state__icon.is-bad{ background:color-mix(in srgb,var(--k-red) 12%,transparent); color:var(--k-red-dark); }

/* Identité (activation d'un compte invité) */
.k-auth-ident{ display:flex; align-items:center; gap:12px; padding:.8rem 1rem; margin-bottom:1.2rem;
  border:1px solid var(--k-border); border-radius:var(--k-radius-sm); background:var(--k-surface-2); }
.k-auth-ident__name{ font-weight:700; font-size:.9rem; color:var(--k-text); }
.k-auth-ident__email{ font-size:.8rem; color:var(--k-muted); }

/* Suggestions d'autocomplétion (Sirene, code postal) */
.k-suggest{ display:none; position:absolute; left:0; right:0; top:100%; z-index:50; max-height:280px; overflow-y:auto;
  background:var(--k-card); border:1px solid var(--k-border); border-radius:0 0 11px 11px; box-shadow:var(--k-shadow-h); }
.k-suggest > div{ padding:.6rem .9rem; cursor:pointer; border-bottom:1px solid var(--k-border); font-size:.85rem; color:var(--k-text); }
.k-suggest > div:hover{ background:var(--k-surface-2); }
.k-suggest__meta{ font-size:.75rem; color:var(--k-muted); margin-top:2px; }

/* Indicateur d'envoi */
.k-spin{ display:inline-block; width:1em; height:1em; border:2px solid currentColor; border-right-color:transparent;
  border-radius:50%; animation:k-spin .7s linear infinite; vertical-align:-.15em; }
@keyframes k-spin{ to{ transform:rotate(360deg); } }

@media (max-width:860px){
  .k-auth-card{ grid-template-columns:1fr; max-width:460px; }
  .k-auth-card--wide{ max-width:820px; }
  .k-auth-brand{ padding:2.25rem; }
  .k-auth-logo{ max-width:60%; }
}
@media (max-width:420px){
  .k-auth-perks{ grid-template-columns:1fr; }
  .k-auth-row{ flex-direction:column; gap:0; }
  .k-auth-main{ padding:2rem 1.4rem; }
}

/* ----------------------------------------------------------------------------
   15. OVERLAY MOBILE + RESPONSIVE + MOTION
---------------------------------------------------------------------------- */
.k-overlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:99; }
@media (max-width:768px){
  .k-sidebar{ transform:translateX(-100%); }
  .k-sidebar.open{ transform:translateX(0); }
  .k-overlay.open{ display:block; }
  .k-header{ left:0; }
  .k-header-toggle{ display:block; }
  .k-main{ margin-left:0; padding:1.25rem 1rem; }
  .k-seg button span{ display:none; }
}
@media (prefers-reduced-motion:reduce){ *{ transition:none!important; animation:none!important; } }