/* ════════════════════════════════════════════════════════════════════════
   kraken_base — DESIGN SYSTEM commun (CSS pur, zéro dépendance).
   Source unique copiée dans chaque app. Principe : des TOKENS + des COMPOSANTS
   bas-spécificité, pour une cohérence de marque sur tout l'écosystème et un
   front lisible par tout humain (hiérarchie, contraste AA, rythme, feedback).
   ════════════════════════════════════════════════════════════════════════ */
:root{
  /* — Couleurs de marque (surchargées par le thème front_hub via --kraken-brand) — */
  --clr-primary:#4f46e5; --clr-primary-dark:#3730a3; --clr-primary-light:#ede9fe;
  --clr-secondary:var(--kraken-accent,#7c3aed); /* accent surchargeable par le thème front_hub (#0012) */
  --clr-info:#0891b2;    --clr-info-light:#cffafe;
  --clr-success:#16a34a; --clr-success-light:#dcfce7;
  --clr-warning:#b45309; --clr-warning-light:#fef3c7;   /* warning assombri = contraste AA sur fond clair */
  --clr-danger:#dc2626;  --clr-danger-light:#fee2e2;
  /* — Neutres (échelle) — */
  --clr-text:#0f172a; --clr-muted:#475569; --clr-subtle:#64748b;  /* muted assombri = lisible (AA) */
  --clr-border:#e5e7eb; --clr-bg:#f1f4f9; --clr-surface:#f8fafc; --clr-white:#fff;
  /* navbar surchargeable par le thème front_hub (#0012) : fallback = indigo neutre */
  --nav-bg-start:var(--kraken-nav-start,#1e1b4b); --nav-bg-end:var(--kraken-nav-end,#312e81);
  /* — Échelle typographique (modulaire ~1.2) — */
  --text-xs:.75rem; --text-sm:.875rem; --text-base:1rem; --text-lg:1.125rem;
  --text-xl:1.375rem; --text-2xl:1.75rem; --text-3xl:2.25rem;
  /* — Espacement (rythme 4px) — */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.5rem; --space-6:2rem; --space-8:3rem;
  /* — Rayons & élévation — */
  --r-sm:6px; --r-md:8px; --r-lg:10px; --r-xl:12px; --r-2xl:14px; --r-full:9999px;
  --shadow-1:0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04);
  --shadow-2:0 2px 4px rgba(15,23,42,.06), 0 6px 16px rgba(15,23,42,.07);
  --shadow-3:0 8px 24px rgba(15,23,42,.12);
  --ring:0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
  --brand:var(--kraken-brand, var(--clr-primary));
  --ease:cubic-bezier(.4,0,.2,1);
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--clr-bg); color:var(--clr-text);
  font-family:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; line-height:1.55;
}
h1,h2,h3,h4{ letter-spacing:-.02em; line-height:1.2; color:var(--clr-text); }
h1{ font-size:var(--text-2xl); } h2{ font-size:var(--text-xl); }
p{ line-height:1.65; }
a{ color:var(--brand); text-decoration:none; }
a:hover{ text-decoration:underline; }
small,.text-muted{ color:var(--clr-muted); }
::selection{ background:#dbe0ff; }

/* — Accessibilité : focus clavier visible, respect du « moins d'animation » — */
:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } }

/* — Surfaces (feuilles blanches élevées) — */
section, .card, .list, fieldset, .cat-col, .ac-results, .apps, .configured{ background:var(--clr-white); }
section, .card, .cat-col{ box-shadow:var(--shadow-1); border-radius:var(--r-2xl); }
.card-hover{ transition:box-shadow .15s var(--ease), transform .15s var(--ease); }
.card-hover:hover{ box-shadow:var(--shadow-2); transform:translateY(-2px); }

/* — Avatar à initiales — */
.avatar{ border-radius:var(--r-full); background:linear-gradient(135deg,var(--clr-primary),var(--clr-secondary));
  color:#fff; font-weight:700; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.avatar-sm{ width:36px; height:36px; font-size:.78rem; }
.avatar-lg{ width:56px; height:56px; font-size:1.2rem; }

/* — Badges de rôle (façon AD) — */
.role-badge{ display:inline-flex; align-items:center; gap:.25rem; padding:.18rem .6rem; border-radius:var(--r-full);
  font-size:var(--text-xs); font-weight:700; line-height:1; background:#eef2f7; color:var(--clr-muted); }
.role-badge-super-admin{ background:#fef3c7; color:#b45309; }
.role-badge-administrateur{ background:var(--clr-primary-light); color:var(--clr-primary-dark); }
.role-badge-tech{ background:var(--clr-info-light); color:#0e6f86; }
.role-badge-client{ background:#eef2f7; color:var(--clr-muted); }
.sso-label{ font-size:var(--text-xs); color:var(--clr-muted); font-weight:700; text-transform:uppercase; letter-spacing:.05em; }

/* — Boutons (base + variantes) — */
.btn, .btn-grad, .btn-ghost{ display:inline-flex; align-items:center; gap:.4rem; font:inherit; font-weight:600;
  cursor:pointer; border-radius:var(--r-lg); padding:.55rem 1.1rem; text-decoration:none; border:1px solid transparent;
  transition:filter .15s var(--ease), transform .1s var(--ease), box-shadow .15s var(--ease); }
.btn-grad{ background:linear-gradient(135deg,var(--clr-primary),var(--clr-secondary)); color:#fff; box-shadow:var(--shadow-1); }
.btn-grad:hover{ color:#fff; filter:brightness(1.07); transform:translateY(-1px); box-shadow:var(--shadow-2); text-decoration:none; }
.btn-grad:active{ transform:translateY(0); }
.btn-ghost{ background:#fff; color:var(--brand); border-color:#c7d2fe; }
.btn-ghost:hover{ background:var(--clr-primary-light); text-decoration:none; }
.btn-sm{ padding:.32rem .7rem; font-size:var(--text-sm); }

/* — Champs de formulaire cohérents (specificité faible) — */
input[type=text],input[type=email],input[type=password],input[type=search],input[type=url],input[type=tel],input[type=number],select,textarea{
  width:100%; max-width:100%; padding:.55rem .75rem; border:1px solid #cdd3e0; border-radius:var(--r-lg);
  background:#fff; color:var(--clr-text); outline:none; transition:border-color .12s, box-shadow .12s; }
input:focus,select:focus,textarea:focus{ border-color:var(--brand); box-shadow:var(--ring); }
input::placeholder,textarea::placeholder{ color:var(--clr-subtle); }
button,input[type=submit]{ border-radius:var(--r-lg); cursor:pointer; }
label{ font-weight:600; color:var(--clr-text); }

/* — Tableaux lisibles (utilitaire .table) — */
.table{ width:100%; border-collapse:collapse; font-size:var(--text-sm); }
.table th{ text-align:left; font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.03em;
  color:var(--clr-subtle); padding:.5rem .6rem; border-bottom:1px solid var(--clr-border); }
.table td{ padding:.6rem .6rem; border-bottom:1px solid #f1f5f9; }
.table tbody tr:hover{ background:var(--clr-surface); }

/* — Flash messages cohérents — */
.flash{ padding:.6rem 1rem; border-radius:var(--r-lg); font-size:var(--text-sm); }
.flash.notice{ background:var(--clr-success-light); color:#166534; }
.flash.alert{ background:var(--clr-danger-light); color:#991b1b; }

/* — Utilitaires de mise en page — */
.kw{ max-width:1280px; margin-inline:auto; padding-inline:1.25rem; }   /* large + responsif (préférence Max : s'étaler sur l'écran) */
.muted{ color:var(--clr-muted); } .subtle{ color:var(--clr-subtle); }
.stack > * + *{ margin-top:var(--space-4); }

/* ─── Composants partagés (réutilisables par toutes les apps) ─── */
/* Stepper : étapes d'un process (ol.stepper > li.done|.active|.todo) */
.stepper{ list-style:none; display:flex; gap:0; padding:0; margin:0 0 1.3rem; }
.stepper li{ flex:1; text-align:center; position:relative; font-size:var(--text-sm); color:var(--clr-subtle); }
.stepper li .num{ display:flex; align-items:center; justify-content:center; width:30px; height:30px; margin:0 auto .35rem; border-radius:50%; background:#e2e8f0; color:var(--clr-muted); font-weight:700; position:relative; z-index:1; }
.stepper li::before{ content:""; position:absolute; top:15px; left:-50%; width:100%; height:3px; background:#e2e8f0; z-index:0; }
.stepper li:first-child::before{ display:none; }
.stepper li.done .num{ background:var(--clr-success); color:#fff; } .stepper li.done .lbl{ color:var(--clr-success); }
.stepper li.done::before, .stepper li.active::before{ background:var(--clr-success); }
.stepper li.active .num{ background:linear-gradient(135deg,var(--clr-primary),var(--clr-secondary)); color:#fff; box-shadow:0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent); }
.stepper li.active .lbl{ color:var(--clr-text); font-weight:600; }

/* Empty-state : carte vide centrée + action */
.empty-state{ text-align:center; padding:2.6rem 1rem; background:#fff; border:1px dashed var(--clr-border); border-radius:var(--r-xl); }
.empty-state .ico{ font-size:2rem; display:block; margin-bottom:.5rem; opacity:.8; }
.empty-state p{ color:var(--clr-muted); margin:0 0 1rem; }

/* Stat-card : KPI / compteur */
.stat-card{ position:relative; display:flex; flex-direction:column; gap:.2rem; padding:1.2rem 1.3rem; background:#fff; border-radius:var(--r-2xl); box-shadow:var(--shadow-1); }
.stat-card .stat-val{ font-size:var(--text-2xl); font-weight:800; color:var(--brand); line-height:1; }
.stat-card .stat-lbl{ color:var(--clr-muted); font-size:var(--text-sm); }

/* ── Fiche utilisateur (profile_card) — décision #0009 : composée de ZONES ── */
.kprofile{ max-width:1200px; margin:var(--space-6) auto; padding:0 var(--space-4); }
.kprofile-head{ display:flex; align-items:center; gap:var(--space-4); margin-bottom:var(--space-5); }
.kprofile-head .avatar{ width:64px; height:64px; font-size:var(--text-xl); }
.kprofile-head h1{ margin:0; }
.kprofile-head .sub{ color:var(--clr-muted); font-size:var(--text-sm); }
.kprofile-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:var(--space-4); }
.profile-section{ background:#fff; border-radius:var(--r-2xl); box-shadow:var(--shadow-1); padding:1.2rem 1.4rem; }
.profile-section > h2{ font-size:var(--text-lg); margin:0 0 .9rem; display:flex; align-items:center; gap:.5rem; }
.profile-section.unavailable{ color:var(--clr-muted); border:1px dashed var(--clr-border); box-shadow:none; }
.profile-field{ display:flex; justify-content:space-between; gap:1rem; padding:.45rem 0; border-bottom:1px solid var(--clr-border); }
.profile-field:last-child{ border-bottom:0; }
.profile-field .k{ color:var(--clr-muted); font-size:var(--text-sm); }
.profile-field .v{ font-weight:600; text-align:right; }
.profile-field .v.hidden{ color:var(--clr-subtle); font-weight:500; font-style:italic; }
.kprofile-locked{ display:inline-flex; align-items:center; gap:.4rem; font-size:var(--text-sm); color:var(--clr-warning); background:var(--clr-warning-light); padding:.35rem .7rem; border-radius:var(--r-full); }

/* ── Glyphe de marque thémable (#0012) — la mascotte de la porte d'entrée suit le front_hub ──
   DÉFAUT = poulpe kraken (identité neutre de la base). Une instance (ex. Dépa-neo) fournit SON
   glyphe via son thème front_hub : var(--kraken-brand-glyph) diffusée par /theme.css. Aucune
   marque cliente en dur dans les templates : seul le repli kraken vit ici. */
.brand-glyph::before{ content: var(--kraken-brand-glyph, "🐙"); }