/* ============================================================
   Archiga — Design Tokens (refresh Notion-inspired, 4 mai 2026)
   Source de vérité pour couleurs, typographie, espacements.
   Pas de valeurs en dur dans les composants — tout passe par ici.

   Convention typo :
   - Texte courant : Inter (var --font-base)
   - Codes / références (PRJ-, D-, F-) : --font-mono via classe .text-mono
   - Chiffres : Inter normal (PAS de tabular-nums, identique au texte)
   ============================================================ */

:root {
  /* ─── Surfaces (palette neutre Notion-inspired) ─── */
  --color-bg: #FFFFFF;            /* fond page */
  --color-bg-subtle: #F7F7F5;     /* fond panel discret, hover liste */
  --color-bg-hover: #F1F1EF;      /* hover items sidebar / boutons */
  --color-bg-active: #E9E9E7;     /* item sidebar actif */
  --color-surface: #FFFFFF;       /* cards, modales */

  /* ─── Bordures ─── */
  --color-border: #E9E9E7;
  --color-border-light: #EFEFED;
  --color-border-strong: #D9D9D7;

  /* ─── Texte ─── */
  --color-text: #37352F;          /* Notion-like, pas pur noir */
  --color-text-secondary: #6F6E69;
  --color-text-muted: #9B9A97;
  --color-muted: #9B9A97;         /* alias rétro-compat */
  --color-text-inverse: #FFFFFF;

  /* ─── Accent (bleu architecte Archiga — gardé) ─── */
  --color-primary: #1B4965;
  --color-primary-hover: #153D56;
  --color-primary-light: #5FA8D3;
  --color-primary-bg: #EEF5FA;
  --color-accent: #1B4965;        /* alias : on n'utilise plus l'ambre, l'accent c'est le bleu */
  --color-accent-hover: #153D56;
  --color-secondary: #6F6E69;     /* relégué en gris */

  /* ─── Status (sourds, type Notion) ─── */
  --color-success: #0F7B6C;
  --color-success-hover: #0B5C51;
  --color-success-bg: #DDEDEA;
  --color-warning: #B98D5F;
  --color-warning-dark: #8B6F3F;
  --color-warning-bg: #FAEDD6;
  --color-danger: #B33B36;
  --color-danger-hover: #8C2E2A;
  --color-danger-bg: #FBEBEC;
  --color-info: #4477A8;
  --color-info-bg: #E0EAF3;

  /* ─── Tags / badges Notion-style (bg pastel, texte foncé) ─── */
  --tag-gray-bg: #EBEBEA;       --tag-gray-text: #4A4A47;
  --tag-blue-bg: #DBEAF2;       --tag-blue-text: #1B4965;
  --tag-green-bg: #DDEDEA;      --tag-green-text: #0F7B6C;
  --tag-yellow-bg: #FAEDD6;     --tag-yellow-text: #8B6F3F;
  --tag-orange-bg: #FAEAD7;     --tag-orange-text: #A4602B;
  --tag-red-bg: #FBEBEC;        --tag-red-text: #8C2E2A;
  --tag-purple-bg: #EAE0F1;     --tag-purple-text: #5C3F86;
  --tag-pink-bg: #F4DFEB;       --tag-pink-text: #8E3868;

  /* ─── Typographie ─── */
  --font-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;

  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 18px;
  --text-xl: 24px;
  --text-2xl: 30px;
  --text-3xl: 36px;

  /* ─── Layout ─── */
  --sidebar-width: 244px;
  --sidebar-collapsed-width: 56px;

  /* ─── Ombres (très subtiles — modales seulement pour la grande) ─── */
  --shadow-xs: 0 1px 2px rgba(15, 15, 15, 0.04);
  --shadow-sm: 0 2px 4px rgba(15, 15, 15, 0.06);
  --shadow-md: 0 4px 8px rgba(15, 15, 15, 0.08);
  --shadow-lg: 0 8px 24px rgba(15, 15, 15, 0.12);

  /* ─── Rayons ─── */
  --radius-xs: 3px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-pill: 999px;

  /* ─── Espacements ─── */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* ─── Transitions ─── */
  --transition-fast: 80ms ease;
  --transition-base: 150ms ease;
  --transition-slow: 250ms ease;

  /* ─── Z-index (échelle ordonnée) ─── */
  --z-dropdown: 200;
  --z-sticky: 300;
  --z-overlay: 400;
  --z-sidebar: 100;
  --z-toast: 10000;
  --z-indicator: 9999;
  --z-mobile-header: 1001;
  --z-mobile-overlay: 999;
  --z-mobile-sidebar: 1000;
}

/* ============================================================
   Archiga — Reset & base elements
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-base);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11'; /* Inter v3 */
}

/* Codes & références : seul cas où on bascule en mono */
.text-mono, code {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text);
}

h1 { font-size: 28px; letter-spacing: -0.3px; }
h2 { font-size: 22px; letter-spacing: -0.2px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-primary-light);
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

table {
  border-collapse: collapse;
  width: 100%;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* ============================================================
   Archiga — Layout
   Sidebar + contenu principal.
   ============================================================ */

.layout {
  display: flex;
  min-height: 100vh;
}

.layout__main {
  flex: 1;
  margin-left: var(--sidebar-width);
  min-width: 0;
  transition: margin-left var(--transition-slow);
}

.layout__content {
  padding: 28px 36px 48px;
  /* Pas de max-width : utiliser toute la largeur dispo (refresh Notion 4 mai 2026). */
}

.sidebar--collapsed ~ .layout__main,
.sidebar--collapsed + .layout__main {
  margin-left: var(--sidebar-collapsed-width);
}

/* ============================================================
   Archiga — Sidebar
   Navigation verticale, sections groupées, état collapsed.
   ============================================================ */

.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--sidebar-width);
  background: var(--color-bg-subtle);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  /* UX-K4 — z-index 1000 pour passer au-dessus de Leaflet (panes a 400, popup a 700)
     et de la plupart des composants tiers. */
  z-index: 1000;
  transition: width var(--transition-slow);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-strong) transparent;
}

.sidebar::-webkit-scrollbar {
  width: 6px;
}
.sidebar::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: 3px;
}

.sidebar__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 12px 8px;
  height: 44px;
  flex-shrink: 0;
}

.sidebar__logo a {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--color-text);
}

.sidebar__logo-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}

.sidebar__logo-text {
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

/* .sidebar__toggle supprimé — la sidebar se déploie au hover */

.sidebar__nav {
  flex: 1;
  padding: 0 8px 12px;
}

.sidebar__section {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  padding: 12px 8px 4px;
  white-space: nowrap;
}

.sidebar__item {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 8px;
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  font-weight: 400;
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
  margin-bottom: 1px;
  white-space: nowrap;
  border-left: none;
}

.sidebar__item:hover {
  color: var(--color-text);
  background: var(--color-bg-hover);
  text-decoration: none;
}

.sidebar__item--active {
  color: var(--color-text);
  background: var(--color-bg-active);
  font-weight: 500;
  border-left: none;
}

.sidebar__item--disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.sidebar__item svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--color-text-muted);
  opacity: 1;
}
.sidebar__item:hover svg { color: var(--color-text-secondary); }
.sidebar__item--active svg {
  color: var(--color-primary);
  opacity: 1;
}

/* --- Footer sidebar --- */
.sidebar__footer {
  padding: 8px 12px;
  margin-top: auto;
  flex-shrink: 0;
  border-top: 1px solid var(--color-border);
}

.sidebar__user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  margin-top: 2px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.sidebar__user:hover { background: var(--color-bg-hover); }

.sidebar__user-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-inverse);
  flex-shrink: 0;
}

.sidebar__user-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.sidebar__user-info strong {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.sidebar__user-info span {
  font-size: 11px;
  color: var(--color-text-muted);
}

.sidebar__logout-form {
  flex-shrink: 0;
}

.sidebar__logout {
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.sidebar__logout:hover {
  color: var(--color-text);
  background: var(--color-bg-hover);
}

/* --- Onboarding badge sidebar --- */
.sidebar__onboarding {
  padding: 8px 10px;
  margin-top: auto;
}

.sidebar__onboarding-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--color-accent);
  color: white;
  border-radius: var(--radius-md);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--transition-fast);
}

.sidebar__onboarding-badge:hover {
  background: var(--color-accent-hover);
  text-decoration: none;
  color: white;
}

.sidebar__onboarding-count {
  margin-left: auto;
  background: rgba(255,255,255,0.25);
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 11px;
}

.sidebar__badge {
  margin-left: auto;
  background: #ef4444;
  color: #fff;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  min-width: 18px;
  text-align: center;
}

/* --- Collapsed state --- */
/* Refresh 4 mai 2026 :
   - Largeur réduite à 56px (icônes + même padding-left que mode déployé)
   - Icône à la même position horizontale dans les 2 modes (padding 8px gauche)
   - PAS de texte tronqué (data-label retiré)
   - Hover sur la sidebar collapsed → déploiement en overlay (par-dessus le contenu)
   - Transition smooth avec petit délai pour éviter déploiements intempestifs */

.sidebar--collapsed {
  width: var(--sidebar-collapsed-width);
  transition: width var(--transition-base);
}

/* Eléments cachés en collapsed */
.sidebar--collapsed .sidebar__logo-text,
.sidebar--collapsed .sidebar__item-text,
.sidebar--collapsed .sidebar__user-info,
.sidebar--collapsed .sidebar__logout-form,
.sidebar--collapsed .sidebar__section,
.sidebar--collapsed .sidebar__onboarding-badge .sidebar__item-text,
.sidebar--collapsed .sidebar__onboarding-count,
.sidebar--collapsed .sidebar__badge {
  display: none;
}

.sidebar--collapsed .sidebar__top {
  /* On garde flex horizontal : logo-mark à gauche, toggle à droite */
  padding: 12px 12px 8px;
  gap: 0;
}

/* Items : on GARDE le même padding-left que mode déployé (8px),
   donc l'icône reste à la même position horizontale. */
.sidebar--collapsed .sidebar__item {
  padding: 0 8px;
  justify-content: flex-start;
  gap: 8px;
}

.sidebar--collapsed .sidebar__user {
  padding: 6px 8px;
  gap: 8px;
}

.sidebar--collapsed .sidebar__onboarding-badge {
  padding: 0 8px;
}

/* ── Hover-to-expand : la sidebar collapsed se déploie au survol ──
   La sidebar étant position: fixed, l'expansion passe par-dessus le contenu
   (overlay) sans pousser .layout__main qui garde sa margin-left collapsed. */

.sidebar--collapsed:hover {
  width: var(--sidebar-width);
  /* Petit délai pour éviter les déploiements intempestifs */
  transition: width var(--transition-base) 200ms;
  z-index: 200;
  box-shadow: var(--shadow-md);
}

/* Au hover, on révèle tout */
.sidebar--collapsed:hover .sidebar__logo-text,
.sidebar--collapsed:hover .sidebar__item-text,
.sidebar--collapsed:hover .sidebar__user-info,
.sidebar--collapsed:hover .sidebar__logout-form,
.sidebar--collapsed:hover .sidebar__section,
.sidebar--collapsed:hover .sidebar__onboarding-badge .sidebar__item-text,
.sidebar--collapsed:hover .sidebar__onboarding-count,
.sidebar--collapsed:hover .sidebar__badge {
  display: revert;
}

/* Au hover, la flèche du toggle revient en position normale (puisqu'on est déployé) */

/* ============================================================
   Archiga — Card
   Conteneur de contenu avec border et padding.
   ============================================================ */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* Pas d'ombre par défaut (Notion-style) */
}

.card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  text-transform: none;
  letter-spacing: 0;
  padding: 12px 20px;
  border-bottom: 1px solid var(--color-border);
}

.card__header a {
  font-size: var(--text-xs);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  color: var(--color-text-muted);
}
.card__header a:hover { color: var(--color-text); }

.card__header h3 {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  text-transform: none;
  letter-spacing: 0;
  margin: 0;
}

.card__title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  text-transform: none;
  letter-spacing: 0;
}

.card__body {
  padding: var(--space-md) var(--space-lg);
}

/* UX-K3/K5 — Padding par defaut pour le contenu des cards qui n'utilisent
   pas .card__body explicite (cas des sidebars de fiche devis/projet ou le
   contenu est juste enveloppe dans un .mt-2 ou un wrapper anonyme).
   Cible les enfants directs sans classe ou avec .mt-2/.card__content,
   pour ne pas marcher sur .card__header/.card__body/.card__title qui ont
   deja leur padding propre. */
.card > .mt-2,
.card > .card__content,
.card > div:not([class]) {
  padding: 12px 20px 16px;
}

.card__value {
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text);
  text-align: left;
}

.card--danger {
  border-color: var(--color-danger-bg);
}

/* ============================================================
   Archiga — Badge
   Statuts, étiquettes, indicateurs visuels.
   ============================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  /* Defaults (gris Notion) */
  background: var(--tag-gray-bg);
  color: var(--tag-gray-text);
}

/* Variantes statut projet */
.badge--default     { background: var(--tag-gray-bg);   color: var(--tag-gray-text); }
.badge--brouillon   { background: var(--tag-gray-bg);   color: var(--tag-gray-text); }
.badge--en-attente  { background: var(--tag-yellow-bg); color: var(--tag-yellow-text); }
.badge--acte        { background: var(--tag-green-bg);  color: var(--tag-green-text); }
.badge--en-cours    { background: var(--tag-blue-bg);   color: var(--tag-blue-text); }
.badge--termine     { background: var(--tag-gray-bg);   color: var(--tag-gray-text); }
.badge--archive     { background: var(--tag-gray-bg);   color: var(--tag-gray-text); }
.badge--annule      { background: var(--tag-red-bg);    color: var(--tag-red-text); }

/* Variantes sémantiques */
.badge--success     { background: var(--tag-green-bg);  color: var(--tag-green-text); }
.badge--warning     { background: var(--tag-yellow-bg); color: var(--tag-yellow-text); }
.badge--danger      { background: var(--tag-red-bg);    color: var(--tag-red-text); }
.badge--info        { background: var(--tag-blue-bg);   color: var(--tag-blue-text); }
.badge--muted       { background: var(--tag-gray-bg);   color: var(--tag-gray-text); }

.badge--outline {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

.badge--small {
  font-size: 10px;
  padding: 0 6px;
  height: 18px;
}

/* ============================================================
   Archiga — Button
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  /* Default = secondaire (bordure fine + bg blanc) */
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
}

.btn:hover {
  background: var(--color-bg-subtle);
  text-decoration: none;
}

.btn:disabled,
.btn--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn--primary {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
  box-shadow: none;
}
.btn--primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: var(--color-text-inverse);
  box-shadow: none;
}

.btn--outline {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
}
.btn--outline:hover {
  background: var(--color-bg-subtle);
  border-color: var(--color-border-strong);
  color: var(--color-text);
}

.btn--danger {
  background: var(--color-surface);
  color: var(--color-danger);
  border-color: var(--color-border);
}
.btn--danger:hover {
  background: var(--color-danger-bg);
  border-color: var(--color-danger-bg);
  color: var(--color-danger);
}

.btn--success {
  background: var(--color-success);
  color: var(--color-text-inverse);
  border-color: var(--color-success);
}
.btn--success:hover {
  background: var(--color-success-hover);
  border-color: var(--color-success-hover);
  color: var(--color-text-inverse);
}

.btn--ghost {
  color: var(--color-text-secondary);
  background: transparent;
  border-color: transparent;
}
.btn--ghost:hover {
  color: var(--color-text);
  background: var(--color-bg-subtle);
}

.btn--sm {
  height: 26px;
  padding: 0 10px;
  font-size: var(--text-xs);
}

.btn--xs {
  height: 22px;
  padding: 0 8px;
  font-size: var(--text-xs);
}

.btn--lg {
  height: 40px;
  padding: 0 20px;
  font-size: var(--text-md);
}

.btn--full {
  width: 100%;
}

.btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* --- Focus visible (accessibilité clavier) --- */
.btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.form-field__input:focus-visible,
.form-field__select:focus-visible,
.form-field__input--compact:focus-visible {
  outline: 2px solid var(--color-primary-light);
  outline-offset: 1px;
}

.sidebar__item:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.projet-tabs__tab:focus-visible {
  outline: 2px solid var(--color-primary-light);
  outline-offset: -2px;
}

.data-table__link:focus-visible,
a:focus-visible {
  outline: 2px solid var(--color-primary-light);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ============================================================
   Archiga — Forms
   ============================================================ */

.form-field {
  margin-bottom: var(--space-md);
}

.form-field__label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 4px;
}

.form-field__label--upper {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

.form-field__input,
.form-field__select,
.form-field__textarea {
  display: block;
  width: 100%;
  height: 36px;
  padding: 0 12px;
  font-family: var(--font-base);
  font-size: var(--text-sm);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-field__input:hover,
.form-field__select:hover,
.form-field__textarea:hover {
  border-color: var(--color-border-strong);
}

.form-field__input:focus,
.form-field__select:focus,
.form-field__textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-bg);
}

.form-field__input::placeholder,
.form-field__textarea::placeholder {
  color: var(--color-text-muted);
}

.form-field__input--textarea,
.form-field__textarea {
  height: auto;
  padding: 8px 12px;
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
}

.form-field__help {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 4px;
}

.form-field__error {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-danger);
  margin-top: 4px;
}

.form-field--error .form-field__input {
  border-color: var(--color-danger);
}

.form-field--error .form-field__input,
.form-field--error .form-field__select {
  border-color: var(--color-danger);
  background-color: var(--color-danger-bg);
}

.form-field--error .form-field__label {
  color: var(--color-danger);
}

.form-field__select {
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color var(--transition-fast);
}

.form-field__select:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(95, 168, 211, 0.12);
}

.form-field__required {
  color: var(--color-danger);
  margin-left: 2px;
}

.form-field__checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
}

.form-field__checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary);
}

.form-field__label-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.form-field__label-row .form-field__label {
  margin-bottom: 0;
}

.form-field__config-link {
  font-size: var(--text-xs);
  color: var(--color-primary);
  text-decoration: none;
  white-space: nowrap;
}

.form-field__config-link:hover {
  text-decoration: underline;
}

.form-section {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 24px;
  margin-bottom: 24px;
  background: var(--color-surface);
}

.form-section__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 16px;
  padding: 0;
}

.form-section__help {
  color: var(--color-text-muted);
  font-size: 13px;
  margin-bottom: 12px;
}

.form-grid {
  display: grid;
  gap: 16px;
  margin-bottom: 16px;
}

.form-grid:last-child {
  margin-bottom: 0;
}

.form-grid--2 {
  grid-template-columns: 1fr 1fr;
}

.form-grid--3 {
  grid-template-columns: 1fr 1fr 1fr;
}

.form-actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.form-group {
  margin-bottom: var(--space-md);
}

/* --- Combobox MOA (recherche CRM) --- */
.form-field__combobox {
  position: relative;
}

.form-field__dropdown {
  position: absolute;
  z-index: 100;
  width: 100%;
  max-height: 280px;
  overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  box-shadow: var(--shadow-md);
}

.form-field__dropdown:empty {
  display: none;
}

.form-field__dropdown-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.form-field__dropdown-item {
  padding: 10px 12px;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: center;
  font-size: 14px;
  border-bottom: 1px solid var(--color-border-light);
  transition: background var(--transition-fast);
}

.form-field__dropdown-item:hover {
  background: var(--color-bg);
}

.form-field__dropdown-name {
  font-weight: 600;
  color: var(--color-text);
}

.form-field__dropdown-org {
  color: var(--color-text-muted);
  font-size: 13px;
}

.form-field__dropdown-email {
  color: var(--color-primary-light);
  font-size: 12px;
}

.form-field__dropdown-empty {
  padding: 16px 12px;
  color: var(--color-text-muted);
  font-size: 13px;
  text-align: center;
}

.form-field__dropdown-link {
  display: block;
  margin-top: 8px;
  color: var(--color-primary);
  font-weight: 500;
}

.form-field__selected-contact {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin-top: 6px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 14px;
}

.form-field__selected-contact span {
  flex: 1;
}

.form-field__clear-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: var(--color-text-muted);
  padding: 0 4px;
  line-height: 1;
}

.form-field__clear-btn:hover {
  color: var(--color-danger);
}

/* --- MOA : carte organisme + liste interlocuteurs --- */

.moa-org-card {
  margin-top: 12px;
  padding: 12px 16px;
  background: var(--color-primary-bg);
  border: 1px solid rgba(27, 73, 101, 0.15);
  border-radius: var(--radius-sm);
}

.moa-org-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 14px;
}

.moa-org-card__details {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.moa-org-card__detail {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--color-text-secondary);
}

.moa-org-card__detail svg {
  flex-shrink: 0;
  color: var(--color-text-muted);
}

.moa-contacts-list {
  margin-top: 16px;
  border: none;
  padding: 0;
}

.moa-contacts-list__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  margin-bottom: 8px;
  padding: 0;
}

.moa-contact-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  margin-bottom: 4px;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.moa-contact-row:hover {
  background: var(--color-bg);
}

.moa-contact-row:has(.moa-contact-row__check:checked) {
  background: var(--color-primary-bg);
  border-color: var(--color-primary-light);
}

.moa-contact-row__check {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary);
}

.moa-contact-row__info {
  flex: 1;
  min-width: 0;
  cursor: pointer;
}

.moa-contact-row__name {
  font-size: 13px;
  font-weight: 500;
  display: block;
}

.moa-contact-row__fonction {
  font-size: 11px;
  color: var(--color-text-muted);
}

.moa-contact-row__coords {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  flex-shrink: 0;
}

.moa-contact-row__email,
.moa-contact-row__tel {
  font-size: 11px;
  color: var(--color-text-muted);
}

.moa-contact-row__principal {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  padding-left: 8px;
  border-left: 1px solid var(--color-border-light);
}

.moa-contact-row__radio {
  accent-color: var(--color-accent);
}

.moa-contact-row__principal-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-accent);
  white-space: nowrap;
}

/* --- Input compact (dans les tableaux) --- */
.form-field__input--compact {
  padding: 6px 8px;
  font-size: 13px;
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.form-field__input--compact:focus {
  border-color: var(--color-primary);
  outline: none;
}

.form-field__input--compact[readonly] {
  background: var(--color-bg);
  color: var(--color-text-muted);
  cursor: default;
}

/* --- Bandeau résumé champs actifs --- */
.form-section__summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 10px 16px;
  margin-bottom: 16px;
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  font-size: 13px;
}

.form-section__summary-label {
  font-weight: 600;
  color: var(--color-text-muted);
  margin-right: 4px;
}

.form-section__summary-tag {
  padding: 2px 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  font-size: 12px;
  color: var(--color-text-muted);
}

.form-section__summary-tag--required {
  border-color: var(--color-danger);
  color: var(--color-danger);
  font-weight: 500;
}

/* --- Form control (admin inline) --- */
.form-control {
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: inherit;
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color var(--transition-fast);
}

.form-control:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(27, 73, 101, 0.1);
}

.form-control--xs {
  padding: 3px 6px;
  font-size: 12px;
}

/* ============================================================
   Archiga — Data Table
   ============================================================ */

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.data-table th {
  text-align: left;
  padding: 8px 16px;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}

.data-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-text);
  vertical-align: middle;
}

.data-table tr:last-child td {
  border-bottom: none;
}

.data-table tr:hover td {
  background: var(--color-bg-subtle);
}

.data-table__link {
  color: var(--color-text);
  font-weight: 500;
}
.data-table__link:hover { color: var(--color-primary); }

.data-table__row--clickable {
  cursor: pointer;
  transition: background var(--transition-fast);
}

.data-table__row--clickable:hover td {
  background: var(--color-bg-subtle);
}

.data-table--compact th,
.data-table--compact td {
  padding: 6px 12px;
}

/* Wrapper responsive pour les tables en mobile */
.data-table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Les .card contenant directement une table sont scrollables */
.card > .data-table,
.card > .data-table-responsive {
  overflow-x: auto;
}

.data-table__total-row {
  background: var(--color-bg);
  border-top: 2px solid var(--color-border);
}

.phase-row--drag-over {
  border-top: 2px solid var(--color-primary, #2563eb) !important;
}

.phase-drag-handle:active {
  cursor: grabbing;
}

/* Also style generic .table for templates using it */
.table {
  width: 100%;
  border-collapse: collapse;
}

.table thead th {
  text-align: left;
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}

.table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border-light);
  font-size: 13px;
}

.table tbody tr:last-child td {
  border-bottom: none;
}

.table tbody tr:hover td {
  background: rgba(27, 73, 101, 0.02);
}

.admin-table__add-row {
  background: var(--color-bg);
}

.admin-table__add-row td {
  padding-top: 10px;
  padding-bottom: 10px;
}

/* ============================================================
   Archiga — Alert
   ============================================================ */

.alert {
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  margin-bottom: 16px;
  line-height: 1.5;
  border: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
}

.alert--danger,
.alert--error {
  background: var(--color-danger-bg);
  color: var(--tag-red-text);
  border-color: var(--color-danger-bg);
}

.alert--success {
  background: var(--color-success-bg);
  color: var(--tag-green-text);
  border-color: var(--color-success-bg);
}

.alert--warning {
  background: var(--color-warning-bg);
  color: var(--tag-yellow-text);
  border-color: var(--color-warning-bg);
}

.alert--info {
  background: var(--color-info-bg);
  color: var(--tag-blue-text);
  border-color: var(--color-info-bg);
}

.messages {
  padding: 0 36px;
}

/* ============================================================
   Archiga — Page Header
   ============================================================ */

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 32px;
  gap: 16px;
  padding-bottom: 0;
}

.page-header__left {
  min-width: 0;
}

.page-header__title {
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text);
  line-height: 1.2;
}

.page-header__sub,
.page-header__subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: 4px;
}

.page-header__actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

/* ============================================================
   Archiga — Dashboard
   ============================================================ */

.dashboard__welcome {
  color: var(--color-text-muted);
  margin-bottom: 24px;
  font-size: 14px;
}

.dashboard__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.dashboard__section {
  margin-bottom: 28px;
}

.dashboard__section h3 {
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: 600;
}

/* --- Search box --- */
.search-box {
  display: flex;
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0 12px;
  gap: 8px;
  transition: border-color var(--transition-fast);
}

.search-box:focus-within {
  border-color: var(--color-primary-light);
  box-shadow: 0 0 0 3px rgba(95, 168, 211, 0.08);
}

.search-box input {
  border: none;
  outline: none;
  padding: 9px 0;
  font-size: 13px;
  flex: 1;
  background: transparent;
}

.search-box svg {
  color: var(--color-text-muted);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* --- KPI Cards --- */
.kpi {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base);
}

.kpi:hover {
  box-shadow: var(--shadow-md);
}

.kpi__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--color-text-muted);
  margin-bottom: 10px;
}

.kpi__value {
  font-size: 26px;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1;
}

.kpi__value--sm { font-size: 20px; }
.kpi__detail { font-size: 11px; color: var(--color-text-muted); margin-top: 8px; }
.kpi__value--accent { color: var(--color-accent); }
.kpi__value--danger { color: var(--color-danger); }
.kpi__value--success { color: var(--color-success); }

/* --- Stat cards (import results) --- */
.stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px;
  text-align: center;
}

.stat-card__value {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 6px;
}

.stat-card__label {
  font-size: 12px;
  color: var(--color-text-muted);
}

.stat-card--success { border-left: 3px solid var(--color-success); }
.stat-card--success .stat-card__value { color: var(--color-success); }

.stat-card--danger { border-left: 3px solid var(--color-danger); }
.stat-card--danger .stat-card__value { color: var(--color-danger); }

.stat-card--muted { border-left: 3px solid var(--color-muted); }
.stat-card--muted .stat-card__value { color: var(--color-text-muted); }

/* --- Grid layouts --- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-lg); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }

/* --- Activity items --- */
.activity-item {
  display: flex;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--color-border-light);
  font-size: 13px;
  align-items: flex-start;
}

.activity-item:last-child { border-bottom: none; }

.activity-item__icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
  background: var(--color-bg);
}

.activity-item__text { flex: 1; min-width: 0; }
.activity-item__text strong { font-weight: 500; }
.activity-item__time { font-size: 11px; color: var(--color-text-muted); white-space: nowrap; }

/* --- Margin indicator colors --- */
.margin--good { color: var(--color-success); font-weight: 600; }
.margin--ok { color: var(--color-warning); font-weight: 600; }
.margin--bad { color: var(--color-danger); font-weight: 600; }

/* ============================================================
   Archiga — Empty State
   ============================================================ */

.empty-state {
  text-align: center;
  padding: var(--space-2xl) var(--space-lg);
  color: var(--color-text-muted);
}

.empty-state__title {
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--color-text-secondary);
  margin-bottom: 4px;
}

.empty-state__text {
  font-size: var(--text-sm);
  margin-bottom: 16px;
  color: var(--color-text-muted);
}

/* ============================================================
   Archiga — Pagination
   ============================================================ */

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 24px;
}

.pagination__link,
.pagination__current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  text-decoration: none;
}

.pagination__link {
  color: var(--color-text);
  border: 1px solid var(--color-border);
  transition: all var(--transition-fast);
}

.pagination__link:hover {
  background: var(--color-bg);
  border-color: var(--color-primary-light);
  text-decoration: none;
}

.pagination__current {
  background: var(--color-primary);
  color: #fff;
  font-weight: 500;
}

.pagination__ellipsis {
  color: var(--color-text-muted);
  padding: 0 4px;
}

/* ============================================================
   Archiga — Indicateurs de santé projet
   ============================================================ */

.sante-indicateurs {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.sante-indicateur {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 13px;
  flex: 1;
  min-width: 200px;
}

.sante-indicateur__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.sante-indicateur--vert .sante-indicateur__dot { background: var(--color-success); }
.sante-indicateur--orange .sante-indicateur__dot { background: var(--color-warning); }
.sante-indicateur--rouge .sante-indicateur__dot { background: var(--color-danger); }
.sante-indicateur--gris .sante-indicateur__dot { background: var(--color-muted); }

.sante-indicateur--vert { border-left: 3px solid var(--color-success); }
.sante-indicateur--orange { border-left: 3px solid var(--color-warning); }
.sante-indicateur--rouge { border-left: 3px solid var(--color-danger); }
.sante-indicateur--gris { border-left: 3px solid var(--color-muted); }

.sante-indicateur__title {
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.sante-indicateur__value {
  color: var(--color-text);
}

.sante-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.sante-dot--vert { background: var(--color-success); }
.sante-dot--orange { background: var(--color-warning); }
.sante-dot--rouge { background: var(--color-danger); }
.sante-dot--gris { background: var(--color-muted); }

/* ============================================================
   Archiga — Prévisionnel annuel
   ============================================================ */

.prev-legende {
  display: flex;
  gap: 20px;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.prev-legende__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.prev-legende__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.prev-legende__dot--confirme { background: var(--color-primary); }
.prev-legende__dot--previsionnel { background: var(--color-warning); }
.prev-legende__dot--estime { background: var(--color-muted); }

.prev-table__col-mois {
  text-align: right;
  min-width: 80px;
}

.prev-table__sticky {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--color-bg);
  min-width: 200px;
}

.prev-table__sticky--body {
  background: var(--color-surface);
  z-index: 1;
}

.prev-table__sticky--foot {
  z-index: 1;
}

.prev-table__nom {
  display: block;
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.prev-table td.mono {
  text-align: right;
  font-size: 13px;
  padding: 10px 12px;
}

.prev-table__cell--confirme { color: var(--color-primary); }
.prev-table__cell--previsionnel { color: var(--color-warning); font-style: italic; }
.prev-table__cell--estime { color: var(--color-muted); }

.prev-table__row--confirme td:first-child { border-left: 3px solid var(--color-primary); }
.prev-table__row--previsionnel td:first-child { border-left: 3px solid var(--color-warning); }
.prev-table__row--estime td:first-child { border-left: 3px solid var(--color-muted); }

.prev-table tfoot tr {
  border-top: 1px solid var(--color-border);
}

.prev-table tfoot td {
  padding: 10px 12px;
  font-size: 13px;
}

.prev-table__total-row--confirme { background: rgba(27, 73, 101, 0.04); }
.prev-table__total-row--confirme td { color: var(--color-primary); }

.prev-table__total-row--previsionnel { background: rgba(231, 111, 81, 0.04); }
.prev-table__total-row--previsionnel td { color: var(--color-warning); }

.prev-table__total-row--estime { background: rgba(173, 181, 189, 0.06); }
.prev-table__total-row--estime td { color: var(--color-text-muted); }

.prev-table__total-row--global { background: var(--color-primary); }
.prev-table__total-row--global td { color: #fff; font-weight: 600; }
.prev-table__total-row--global .prev-table__sticky--foot { background: var(--color-primary); color: #fff; }

/* ============================================================
   Archiga — Pointage : Timer + Toggle refacturable
   ============================================================ */

.pointage-timer {
  border-left: 3px solid var(--color-primary-light);
}

.pointage-timer__display {
  min-width: 140px;
  text-align: center;
}

.pointage-refact-toggle {
  background: none;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.pointage-refact-toggle--on {
  background: rgba(45, 106, 79, 0.1);
  color: var(--color-success);
  border-color: rgba(22, 163, 74, 0.2);
}

.pointage-refact-toggle--on:hover { background: rgba(22, 163, 74, 0.2); }

.pointage-refact-toggle--off {
  background: rgba(173, 181, 189, 0.1);
  color: var(--color-text-muted);
  border-color: rgba(173, 181, 189, 0.2);
}

.pointage-refact-toggle--off:hover { background: rgba(173, 181, 189, 0.2); }

/* ============================================================
   Archiga — Projet Tabs
   ============================================================ */

.projet-tabs,
.ong {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--color-border);
  margin-bottom: 24px;
}

.projet-tabs a,
.ong a {
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  text-decoration: none;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.projet-tabs a:hover,
.ong a:hover {
  color: var(--color-text);
  text-decoration: none;
}

.projet-tabs a.active,
.ong a.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  font-weight: 600;
}

.projet-tabs__tab {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.projet-tabs__tab:hover {
  color: var(--color-text);
}

.projet-tabs__tab--active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  font-weight: 600;
  background: rgba(27, 73, 101, 0.08);
  border-radius: 6px 6px 0 0;
}

/* --- Sous-onglets (niveau 2) --- */
.projet-tabs--sub {
  border-bottom-width: 1px;
  margin-bottom: 20px;
}

.projet-tabs--sub .projet-tabs__tab {
  font-size: 13px;
  padding: 8px 16px;
}

/* --- Workflow step states --- */
.workflow__step {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1;
  min-width: 0;
}

.workflow__indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.workflow__dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  background: var(--color-border);
  color: var(--color-text-muted);
}

.workflow__dot--current {
  background: var(--color-primary);
  color: white;
  box-shadow: 0 0 0 3px rgba(27,73,101,0.2);
}

.workflow__dot--done {
  background: var(--color-success);
  color: white;
}

.workflow__dot--cancelled {
  background: var(--color-danger);
  color: white;
}

.workflow__label {
  font-size: 11px;
  margin-top: 4px;
  white-space: nowrap;
  color: var(--color-text-muted);
}

.workflow__label--current {
  font-weight: 600;
  color: var(--color-primary);
}

.workflow__label--done {
  color: var(--color-success);
}

.workflow__label--cancelled {
  color: var(--color-danger);
  font-weight: 600;
}

.workflow__date {
  font-size: 10px;
  color: var(--color-text-muted);
}

.workflow__line {
  flex: 1;
  height: 2px;
  margin: 0 8px;
  margin-bottom: 16px;
  background: var(--color-border);
}

.workflow__line--done {
  background: var(--color-success);
}

.projet-workflow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.projet-workflow .badge {
  font-size: 11px;
}

/* --- Phase status bar (synthèse) --- */
.phase-bar {
  display: flex;
  gap: 6px;
}

.phase-bar__item {
  flex: 1;
  text-align: center;
  padding: 8px 4px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  transition: all 150ms;
}

.phase-bar__item--validee { background: var(--color-success); color: white; }
.phase-bar__item--en-cours { background: var(--color-primary); color: white; box-shadow: 0 0 0 2px rgba(27,73,101,0.3); }
.phase-bar__item--suspendue { background: var(--color-warning); color: white; }
.phase-bar__item--annulee { background: var(--color-border); color: var(--color-text-muted); text-decoration: line-through; }
.phase-bar__item--a-venir { background: var(--color-bg); color: var(--color-text-muted); border: 1px solid var(--color-border); }

/* --- KPI stat card (suivi financier) --- */
.kpi-stat {
  padding: var(--space-md);
}

.kpi-stat__label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-muted);
}

.kpi-stat__value {
  font-size: var(--text-2xl);
  font-weight: 700;
  margin-top: 4px;
}

.kpi-stat__sub {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 4px;
}

/* --- Member pill (équipe) --- */
.member-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
}

.member-pill--primary {
  background: var(--color-primary);
  color: white;
}

.member-pill--default {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.member-pill--external {
  background: var(--color-info-bg);
  border: 1px solid var(--color-primary-light);
  color: var(--color-text);
}

/* --- Progress bar --- */
.progress-bar {
  background: var(--color-border);
  border-radius: var(--radius-xs);
  height: 8px;
  overflow: hidden;
}

.progress-bar__fill {
  height: 100%;
  transition: width 0.3s;
  max-width: 100%;
}

.progress-bar__fill--primary { background: var(--color-primary); }
.progress-bar__fill--success { background: var(--color-success); }
.progress-bar__fill--danger { background: var(--color-danger); }
.progress-bar__fill--warning { background: var(--color-warning); }

.projet-form {
  max-width: 800px;
}

/* ============================================================
   Archiga — Gantt Chart
   ============================================================ */

.gantt {
  position: relative;
}

.gantt__header {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--color-surface);
}

.gantt__row:hover {
  background: rgba(27, 73, 101, 0.02) !important;
}

.gantt__bar {
  transition: opacity var(--transition-fast);
  z-index: 1;
}

.gantt__row:hover .gantt__bar {
  opacity: 0.9;
}

.gantt__label-col {
  min-width: 180px;
  max-width: 220px;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   Archiga — Phase Navigation Bar
   ============================================================ */

.phase-nav__item {
  transition: background var(--transition-fast), color var(--transition-fast);
}

.phase-nav__item:hover:not(.phase-nav__item--active) {
  background: rgba(27, 73, 101, 0.06);
  color: var(--color-text);
}

/* ============================================================
   Archiga — Vue toggle (liste/kanban)
   ============================================================ */

.vue {
  display: inline-flex;
  gap: 2px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 3px;
  background: var(--color-bg);
}

.vue a,
.vue button {
  padding: 6px 14px;
  font-size: 12px;
  border-radius: var(--radius-xs);
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition-fast);
  font-weight: 500;
}

.vue a:hover,
.vue button:hover {
  color: var(--color-text);
  text-decoration: none;
}

.vue a.active,
.vue button.active {
  background: var(--color-surface);
  color: var(--color-primary);
  box-shadow: var(--shadow-xs);
}

/* ============================================================
   Archiga — Onboarding: Auth screens (signup, login)
   ============================================================ */

.onboarding-auth {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
  background: var(--color-bg);
}

.onboarding-auth__card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 44px 40px;
  width: 100%;
  max-width: 480px;
  border: 1px solid var(--color-border-light);
}

.onboarding-auth__header {
  text-align: center;
  margin-bottom: 28px;
}

.onboarding-auth__logo {
  font-size: 28px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 4px;
}

.onboarding-auth__subtitle {
  color: var(--color-text-muted);
  font-size: 13px;
}

.onboarding-auth__title {
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 4px;
}

/* ============================================================
   Archiga — Onboarding: Wizard (stepper + forms)
   ============================================================ */

.onboarding-wizard {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 24px;
}

.onboarding-wizard__stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 32px;
}

.stepper__step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
}

.stepper__number {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  background: var(--color-border);
  color: var(--color-text-muted);
  flex-shrink: 0;
  transition: all var(--transition-base);
}

.stepper__step--active .stepper__number {
  background: var(--color-primary);
  color: white;
  box-shadow: 0 2px 6px rgba(27, 73, 101, 0.25);
}

.stepper__step--done .stepper__number {
  background: var(--color-success);
  color: white;
}

.stepper__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted);
}

.stepper__step--active .stepper__label {
  color: var(--color-primary);
  font-weight: 600;
}

.stepper__step--done .stepper__label {
  color: var(--color-success);
}

.stepper__line {
  flex: 0 0 40px;
  height: 2px;
  background: var(--color-border);
}

.stepper__line--done {
  background: var(--color-success);
}

.stepper__icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.onboarding-wizard__card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 36px;
  border: 1px solid var(--color-border-light);
}

.onboarding-wizard__title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 4px;
}

.onboarding-wizard__fieldset {
  border: none;
  padding: 0;
  margin: 0 0 20px 0;
}

.onboarding-wizard__legend {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--color-border);
  width: 100%;
}

.onboarding-wizard__actions {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}

/* --- Logo upload --- */
.onboarding-wizard__logo-upload {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: 16px;
}

.onboarding-wizard__logo-preview {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* --- Features grid --- */
.onboarding-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.onboarding-features__card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  transition: border-color var(--transition-fast);
}

.onboarding-features__card:hover {
  border-color: var(--color-primary-light);
}

.onboarding-features__icon {
  font-size: 18px;
  margin-bottom: 4px;
}

.onboarding-features__card strong {
  font-size: 13px;
  font-weight: 600;
}

/* --- Membre (admin + collaborateurs) --- */
.onboarding-member {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
}

.onboarding-member--admin {
  background: var(--color-bg);
}

.onboarding-member__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: white;
  background: var(--color-secondary);
  flex-shrink: 0;
}

.onboarding-member__avatar--primary {
  background: var(--color-primary);
}

.onboarding-member__info {
  font-size: 14px;
}

.onboarding-member__remove {
  background: none;
  border: none;
  font-size: 18px;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0 4px;
  margin-left: 8px;
  line-height: 1;
}

.onboarding-member__remove:hover {
  color: var(--color-danger);
}

.onboarding-members-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.onboarding-members-list .onboarding-member {
  border-radius: 0;
  border-bottom: none;
}

.onboarding-members-list .onboarding-member:first-child {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.onboarding-members-list .onboarding-member:last-child {
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  border-bottom: 1px solid var(--color-border);
}

.onboarding-members-list .onboarding-member:only-child {
  border-radius: var(--radius-md);
  border-bottom: 1px solid var(--color-border);
}

/* --- Formulaire d'invitation --- */
.onboarding-invite-form {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-top: 20px;
}

.onboarding-invite-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: end;
}

.onboarding-invite-form__submit {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.onboarding-invite-form__header {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 12px;
  color: var(--color-primary);
}

/* --- Admin invite inline --- */
.admin-invite-inline__row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}

/* --- Info banner --- */
.onboarding-info-banner {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  background: var(--color-warning-bg);
  border: 1px solid #f0dcc0;
  border-radius: var(--radius-md);
  font-size: 12px;
  color: var(--color-text);
  line-height: 1.5;
}

/* ============================================================
   Archiga — Onboarding: Dashboard panel (checklist écran 4)
   ============================================================ */

.onboarding-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-primary-light);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  margin-bottom: 28px;
  box-shadow: 0 2px 8px rgba(27, 73, 101, 0.06);
}

.onboarding-panel__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
}

.onboarding-panel__title {
  font-size: 17px;
  font-weight: 600;
  margin: 0;
}

.onboarding-panel__dismiss {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 12px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  transition: all var(--transition-fast);
}

.onboarding-panel__dismiss:hover {
  color: var(--color-danger);
  background: var(--color-danger-bg);
}

.onboarding-panel__progress {
  margin-bottom: 18px;
}

.onboarding-panel__progress-bar {
  height: 6px;
  background: var(--color-border);
  border-radius: 3px;
  overflow: hidden;
}

.onboarding-panel__progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  border-radius: 3px;
  transition: width 400ms ease;
}

/* --- Grille des étapes 2 colonnes --- */
.onboarding-panel__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.onboarding-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  cursor: default;
  position: relative;
}

.onboarding-step--clickable {
  cursor: pointer;
}

.onboarding-step--clickable:hover {
  border-color: var(--color-primary-light);
  background: rgba(95, 168, 211, 0.04);
  box-shadow: var(--shadow-xs);
}

.onboarding-step__link {
  color: inherit;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  display: block;
}

.onboarding-step__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.onboarding-step__link:hover {
  text-decoration: none;
  color: inherit;
}

.onboarding-step__nested-link {
  position: relative;
  z-index: 2;
}

.onboarding-step--done {
  background: var(--color-success-bg);
  border-color: #c3e6cb;
}

.onboarding-step__check {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  margin-top: 1px;
}

.onboarding-step__content {
  flex: 1;
  min-width: 0;
}

.onboarding-step__label {
  font-size: 13px;
  font-weight: 500;
  display: block;
}

.onboarding-step__label--done {
  color: var(--color-success);
}

.onboarding-step__desc {
  display: block;
  font-size: 11px;
  color: var(--color-text-muted);
  margin-top: 2px;
  line-height: 1.4;
}

.onboarding-step__badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
  align-self: center;
}

.onboarding-step__badge--requis {
  background: var(--color-danger);
  color: white;
}

.onboarding-step__badge--recommande {
  background: var(--color-accent);
  color: white;
}

.onboarding-step__arrow {
  flex-shrink: 0;
  font-size: 20px;
  color: var(--color-text-muted);
  text-decoration: none;
  align-self: center;
  padding-left: 4px;
  line-height: 1;
}

/* --- Empty state cards --- */
.onboarding-empty-card {
  background: var(--color-surface);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.onboarding-empty-card__icon {
  margin-bottom: 8px;
}

.onboarding-empty-card strong {
  font-size: 14px;
}

.onboarding-empty-card .text-muted {
  font-size: 12px;
}

/* ============================================================
   Archiga — Radio card (import sheet selection, etc.)
   ============================================================ */

.radio-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.radio-card:hover {
  border-color: var(--color-primary-light);
  background: rgba(95, 168, 211, 0.03);
}

.radio-card:has(.radio-card__input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-bg);
  box-shadow: 0 0 0 1px var(--color-primary);
}

.radio-card__input {
  accent-color: var(--color-primary);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.radio-card__content {
  flex: 1;
}

.radio-card__label {
  font-weight: 600;
  color: var(--color-text);
}

.radio-card__help {
  font-size: 12px;
  color: var(--color-text-muted);
}

/* ============================================================
   Archiga — Tâches calendrier
   ============================================================ */

.tache-cal {
  width: 100%;
  border-collapse: collapse;
}

.tache-cal__th {
  padding: 8px 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}

.tache-cal__td {
  padding: 4px;
  border: 1px solid var(--color-border);
  vertical-align: top;
  min-height: 80px;
  height: 80px;
  font-size: 11px;
}

.tache-cal__item {
  padding: 4px 6px;
  margin-bottom: 2px;
  border-radius: var(--radius-xs);
  background: var(--color-primary-bg);
  font-size: 10px;
  color: var(--color-text);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.tache-cal__item:hover {
  background: var(--color-border);
}

/* --- Planning bar (Gantt simplifié) --- */
.planning-bar {
  height: 20px;
  border-radius: var(--radius-xs);
  background: var(--color-primary-light);
  min-width: 20px;
  position: relative;
}

/* --- Statut value (document detail) --- */
.statut_value {
  font-weight: 600;
}

/* --- Tag (import preview, etc.) --- */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: var(--color-bg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xs);
  font-size: 12px;
  color: var(--color-text-secondary);
  margin: 1px 2px;
}

.tag--sm {
  font-size: 11px;
  padding: 1px 6px;
}

/* ============================================================
   Archiga — Text utilities
   ============================================================ */

.text-right { text-align: right; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-muted { color: var(--color-text-muted); }
.mt-sm { margin-top: 12px; }
.mt-md { margin-top: 20px; }
.mb-sm { margin-bottom: 12px; }
.mb-md { margin-bottom: 20px; }

/* --- Aliases pour compatibilité templates --- */
.form-label { font-size: 12px; font-weight: 500; color: var(--color-text-secondary); display: block; margin-bottom: 4px; }
.form-input--file { padding: 8px; }
.form-select { padding: 8px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 13px; background: var(--color-surface); cursor: pointer; }
.form-select:focus { border-color: var(--color-primary); outline: none; }
.form-select--sm { padding: 6px 10px; font-size: 12px; }
.form-help { font-size: 12px; color: var(--color-text-muted); margin-top: 4px; }
.card__footer { padding: 14px 18px; border-top: 1px solid var(--color-border-light); }
.color-bg-subtle { background: var(--color-bg); }

/* ============================================================
   Archiga — Responsive
   ============================================================ */

@media (max-width: 1279px) {
  .sidebar {
    width: var(--sidebar-collapsed-width);
  }

  .layout__main {
    margin-left: var(--sidebar-collapsed-width);
  }

  .sidebar .sidebar__logo-text { display: none; }

  .sidebar .sidebar__top {
    flex-direction: column;
    padding: 16px 8px 12px;
    gap: 8px;
  }

  .sidebar .sidebar__toggle { display: none; }
  .sidebar .sidebar__section { display: none; }

  .sidebar .sidebar__item {
    padding: 10px 0;
    justify-content: center;
    border-left: none;
    gap: 0;
  }

  .sidebar .sidebar__item-text { display: none; }

  .sidebar .sidebar__item::before {
    content: attr(data-label);
    font-size: 9px;
    display: block;
    margin-top: 2px;
  }

  .sidebar .sidebar__user-info,
  .sidebar .sidebar__logout-form { display: none; }

  .sidebar .sidebar__user {
    justify-content: center;
  }

  .dashboard__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-3 {
    grid-template-columns: 1fr 1fr;
  }

  .onboarding-panel__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .sidebar {
    display: none;
  }

  .layout__main {
    margin-left: 0;
  }

  .layout__content {
    padding: 20px 16px;
  }

  .dashboard__grid {
    grid-template-columns: 1fr;
  }

  .grid-3 {
    grid-template-columns: 1fr;
  }

  .form-grid--2,
  .form-grid--3 {
    grid-template-columns: 1fr;
  }

  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .onboarding-features {
    grid-template-columns: repeat(2, 1fr);
  }

  .onboarding-invite-form__grid {
    grid-template-columns: 1fr;
  }

  .admin-invite-inline__row {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ============================================================
   Archiga — htmx indicator (loading states)
   ============================================================ */

/* --- Smooth loading transition --- */
[hx-target] {
  position: relative;
}

.htmx-request [id$="-content"] {
  opacity: 0.5;
  transition: opacity 200ms ease;
  pointer-events: none;
}

/* ============================================================
   Archiga — Print
   ============================================================ */

@media print {
  .sidebar,
  .sidebar__onboarding,
  .page-header__actions {
    display: none !important;
  }

  .layout__main {
    margin-left: 0 !important;
  }

  .layout__content {
    padding: 0 !important;
  }
}

/* ============================================================
   Archiga — Classes utilitaires
   Remplacent les inline styles les plus fréquents.
   Nommage : propriété-valeur (inspiré Tailwind, sans le framework).
   ============================================================ */

/* --- Espacement (margin / padding) --- */
/* Échelle : 0=0, 1=4px, 2=8px, 3=12px, 4=16px, 5=20px, 6=24px, 8=32px, 10=40px */

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-5 { margin-top: 20px; }
.mt-6 { margin-top: 24px; }
.mt-8 { margin-top: 32px; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mb-5 { margin-bottom: 20px; }
.mb-6 { margin-bottom: 24px; }

.ml-1 { margin-left: 4px; }
.ml-2 { margin-left: 8px; }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }

.p-0 { padding: 0; }
.p-3 { padding: 12px; }
.p-4 { padding: 16px; }
.p-5 { padding: 20px; }
.p-6 { padding: 24px; }

.px-4 { padding-left: 16px; padding-right: 16px; }
.px-5 { padding-left: 20px; padding-right: 20px; }

.py-2 { padding-top: 8px; padding-bottom: 8px; }
.py-3 { padding-top: 12px; padding-bottom: 12px; }
.py-4 { padding-top: 16px; padding-bottom: 16px; }

/* --- Flexbox --- */

.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }

.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-baseline { align-items: baseline; }

.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }

.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-5 { gap: 20px; }
.gap-6 { gap: 24px; }

/* --- Grid --- */

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

/* Layout détail : colonne principale 2fr + sidebar 1fr */
.detail-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-lg);
}

@media (max-width: 768px) {
  .detail-layout {
    grid-template-columns: 1fr;
  }
}

/* --- Texte --- */

.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }

.text-xs { font-size: 11px; }
.text-sm { font-size: 12px; }
.text-base { font-size: 14px; }
.text-lg { font-size: 16px; }
.text-xl { font-size: 20px; }
.text-2xl { font-size: 24px; }

/* --- Font weight aliases --- */
.font-medium, .fw-500 { font-weight: 500; }
.font-semibold, .fw-600 { font-weight: 600; }
.font-bold, .fw-700 { font-weight: 700; }

.text-muted { color: var(--color-text-muted); }
.text-secondary { color: var(--color-text-secondary); }
.text-danger { color: var(--color-danger); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }

.mono {
  /* DEPRECATED — la classe .mono ne force plus la fonte mono.
     Les chiffres restent en Inter normal (identique au texte courant).
     Pour les vrais codes / références (PRJ-, D-, F-), utiliser .text-mono. */
}

/* --- Affichage --- */

.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }
.inline-flex { display: inline-flex; }

.w-full { width: 100%; }
.max-w-sm { max-width: 480px; }
.max-w-md { max-width: 640px; }
.max-w-lg { max-width: 960px; }

/* --- Bordures --- */

.border-t { border-top: 1px solid var(--color-border); }
.border-b { border-bottom: 1px solid var(--color-border); }
.border-t-light { border-top: 1px solid var(--color-border-light); }

/* --- Table row danger state --- */
.row--danger { background: var(--color-danger-bg); }

/* --- Projet cards grid --- */
.projet-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-md);
}

/* --- Pagination info --- */
.pagination__info {
  padding: 6px 12px;
  font-size: var(--text-base);
  color: var(--color-text-muted);
}

/* --- Curseur --- */

.cursor-pointer { cursor: pointer; }

/* --- Troncature --- */

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════
   HTMX — Indicateur de chargement global
   ═══════════════════════════════════════════════════════════ */

.htmx-indicator {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}

.htmx-indicator--active {
  opacity: 1;
}

.htmx-indicator__bar {
  height: 100%;
  width: 30%;
  background: var(--color-primary);
  border-radius: 0 2px 2px 0;
  animation: htmx-loading 1.2s ease-in-out infinite;
}

@keyframes htmx-loading {
  0% { width: 10%; margin-left: 0; }
  50% { width: 40%; margin-left: 30%; }
  100% { width: 10%; margin-left: 90%; }
}

/* Zone loading spinner with hx-indicator support */
.zone-loading {
  position: relative;
  min-height: 60px;
}

.zone-loading::after {
  content: '';
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.7);
  z-index: 1;
}

.zone-loading--active::after {
  display: flex;
  align-items: center;
  justify-content: center;
  content: '';
  background: rgba(255, 255, 255, 0.7) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='10' stroke='%231B4965' stroke-width='3' fill='none' stroke-dasharray='31.4 31.4' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' dur='0.8s' values='0 12 12;360 12 12' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E") center no-repeat;
}

/* Désactiver les éléments pendant le chargement htmx */
.htmx-request {
  pointer-events: none;
  opacity: 0.7;
  transition: opacity 0.15s;
}

/* --- Filter bar (list page) — refresh 4 mai 2026 ──
   Tout sur 1 ligne par défaut (nowrap), wrap uniquement si pas la place. */
.filter-bar {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  margin-bottom: var(--space-lg);
  align-items: center;
}

.filter-bar__search {
  flex: 1 1 auto;
  min-width: 180px;
  max-width: 320px;
}

.filter-bar__actions {
  display: flex;
  gap: 4px;
  margin-left: auto;
  flex-shrink: 0;
}

/* Selects et dropdowns dans .filter-bar : compactés, ne pas wrapper */
.filter-bar > select,
.filter-bar > .filter-dropdown,
.filter-bar > .form-field__select {
  flex-shrink: 0;
}

/* Sur écrans étroits (<900px), on autorise le wrap */
@media (max-width: 900px) {
  .filter-bar { flex-wrap: wrap; }
  .filter-bar__search { max-width: none; }
}

/* --- Filter dropdown (multi-select) --- */
.filter-dropdown {
  position: relative;
}

.filter-dropdown__menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: var(--z-dropdown);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) 0;
  box-shadow: var(--shadow-md);
  min-width: 180px;
  margin-top: 4px;
}

.filter-dropdown__menu--open {
  display: block;
}

.filter-dropdown__option {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 6px 12px;
  cursor: pointer;
  font-size: var(--text-base);
}

.filter-dropdown__option:hover {
  background: var(--color-bg);
}

.filter-dropdown__clear {
  width: 100%;
  padding: 6px 12px;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  background: none;
  border: none;
  border-top: 1px solid var(--color-border);
  margin-top: 4px;
  padding-top: calc(4px + 6px);
  cursor: pointer;
  text-align: left;
}

.filter-dropdown__clear:hover {
  color: var(--color-text);
}

/* --- KPI overview grid (list page) --- */
.kpi-overview {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.kpi-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
}

.kpi-mini {
  text-align: center;
  padding: var(--space-sm);
  background: var(--color-bg);
  border-radius: var(--radius-sm);
}

.kpi-mini__value {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-text);
}

.kpi-mini__label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* --- CA block (chiffre d'affaires) --- */
.ca-block__hero {
  margin-bottom: var(--space-md);
}

.ca-block__hero-value {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-text);
}

.ca-block__hero-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.ca-block__detail {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: 2px;
}

.ca-block__previ {
  margin-bottom: var(--space-md);
  padding: 10px 12px;
  background: var(--color-bg);
  border-radius: var(--radius-sm);
}

.ca-block__previ-value {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
}

.ca-block__total {
  border-top: 2px solid var(--color-border);
  padding-top: 10px;
}

.ca-block__total-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
}

/* --- Card modifier --- */
.card--padded {
  padding: var(--space-lg);
}

/* --- Projet card (vue cartes) --- */
.projet-card {
  text-decoration: none;
  color: inherit;
  display: block;
  padding: var(--space-md);
  transition: box-shadow var(--transition-fast);
}

.projet-card:hover {
  box-shadow: var(--shadow-md);
}

.projet-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.projet-card__name {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: var(--space-sm);
}

.projet-card__details {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* --- Empty state icon --- */
.empty-state__icon {
  font-size: 48px;
  margin-bottom: var(--space-md);
  opacity: 0.4;
}

/* --- Responsive for kpi-overview --- */
@media (max-width: 768px) {
  .kpi-overview {
    grid-template-columns: 1fr;
  }

  .filter-bar {
    gap: var(--space-sm);
  }

  .filter-bar__search {
    min-width: 100%;
  }
}

/* --- Responsive --- */

@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .grid-4,
  .grid-3,
  .grid-2 { grid-template-columns: 1fr; }

  .sm-hidden { display: none; }
  .sm-flex-col { flex-direction: column; }
}

/* ============================================================
   Archiga — Toast / Notifications
   Système de notifications non-bloquantes (success, error, warning, info).
   Remplace les alert Django statiques par des toasts auto-dismiss.
   ============================================================ */

.toast-container {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: 420px;
  width: calc(100% - 32px);
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0,0,0,0.04);
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text);
  pointer-events: auto;
  transform: translateX(110%);
  opacity: 0;
  transition: transform var(--transition-slow), opacity var(--transition-slow);
  will-change: transform, opacity;
}

.toast--visible {
  transform: translateX(0);
  opacity: 1;
}

.toast--exiting {
  transform: translateX(110%);
  opacity: 0;
}

.toast__icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

.toast__body {
  flex: 1;
  min-width: 0;
}

.toast__message {
  word-break: break-word;
}

.toast__close {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  color: var(--color-text-muted);
  border-radius: var(--radius-xs);
  transition: color var(--transition-fast), background var(--transition-fast);
  line-height: 1;
}

.toast__close:hover {
  color: var(--color-text);
  background: rgba(0,0,0,0.05);
}

/* --- Variantes sémantiques (barre latérale colorée) --- */
.toast--success { border-left: 3px solid var(--color-success); }
.toast--error,
.toast--danger { border-left: 3px solid var(--color-danger); }
.toast--warning { border-left: 3px solid var(--color-warning); }
.toast--info    { border-left: 3px solid var(--color-info); }

.toast--success .toast__icon { color: var(--color-success); }
.toast--error .toast__icon,
.toast--danger .toast__icon { color: var(--color-danger); }
.toast--warning .toast__icon { color: var(--color-warning); }
.toast--info .toast__icon    { color: var(--color-info); }

/* --- Barre de progression auto-dismiss --- */
.toast__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  border-radius: 0 0 0 var(--radius-md);
  background: currentColor;
  opacity: 0.3;
  transition: width linear;
}

.toast { position: relative; overflow: hidden; }

/* --- Confirm dialog --- */
.confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
}

.confirm-dialog {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-lg);
  max-width: 420px;
  width: 90%;
}

.confirm-dialog__title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: var(--space-sm);
}

.confirm-dialog__text {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-lg);
}

.confirm-dialog__actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: flex-end;
}

/* --- Zone loading spinner (htmx) --- */
.zone-loading {
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  color: var(--color-text-muted);
  font-size: 13px;
  gap: var(--space-sm);
}

.htmx-request > .zone-loading,
.htmx-request.zone-loading {
  display: flex;
}

.zone-loading__spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* --- Mobile --- */
@media (max-width: 640px) {
  .toast-container {
    top: auto;
    bottom: 16px;
    right: 8px;
    left: 8px;
    max-width: none;
    width: auto;
  }
}

/* ============================================================
   Archiga — Mobile header + hamburger menu
   Barre de navigation fixe visible uniquement < 768px.
   ============================================================ */

.mobile-header {
  display: none;
}

@media (max-width: 767px) {
  .mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 52px;
    padding: 0 16px;
    background: var(--color-secondary);
    color: #fff;
    z-index: 1001;
  }

  .mobile-header__brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    color: inherit;
  }

  .mobile-header__brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--color-primary);
    border-radius: var(--radius-sm);
    font-weight: 800;
    font-size: 14px;
  }

  .mobile-header__toggle {
    background: none;
    border: none;
    color: inherit;
    padding: 6px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
  }

  .mobile-header__toggle:hover {
    background: rgba(255,255,255,0.1);
  }

  /* Sidebar en overlay mobile */
  .sidebar {
    display: flex !important;
    position: fixed;
    top: 52px;
    left: 0;
    bottom: 0;
    width: 280px;
    transform: translateX(-100%);
    transition: transform var(--transition-slow);
    z-index: 1000;
    overflow-y: auto;
  }

  .sidebar--mobile-open {
    transform: translateX(0);
  }

  /* Overlay sombre derrière la sidebar */
  .mobile-overlay {
    display: none;
    position: fixed;
    inset: 52px 0 0 0;
    background: rgba(0,0,0,0.4);
    z-index: 999;
    opacity: 0;
    transition: opacity var(--transition-slow);
  }

  .mobile-overlay--visible {
    display: block;
    opacity: 1;
  }

  /* Décaler le contenu principal sous le header mobile */
  .layout__main {
    padding-top: 52px;
  }
}


/* ============================================================
   AUTOCOMPLÉTION ADRESSE (API adresse.data.gouv.fr)
   ============================================================ */

.adresse-autocomplete {
  position: relative;
}

.adresse-autocomplete__list {
  display: none;
  position: absolute;
  z-index: var(--z-dropdown, 100);
  top: 100%;
  left: 0;
  right: 0;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 6px);
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,.12));
  max-height: 240px;
  overflow-y: auto;
}

.adresse-autocomplete__list--open {
  display: block;
}

.adresse-autocomplete__option {
  padding: 10px 12px;
  font-size: 13px;
  color: var(--color-text);
  cursor: pointer;
  border-bottom: 1px solid var(--color-border-light, #f0f0f0);
  transition: background 0.1s;
}

.adresse-autocomplete__option:last-child {
  border-bottom: none;
}

.adresse-autocomplete__option:hover,
.adresse-autocomplete__option--active {
  background: var(--color-primary-bg, #e8f0fe);
  color: var(--color-primary, #2563eb);
}


/* ============================================================
   FOOTER — Liens légaux minimaux
   ============================================================ */

.page-footer {
  padding: 20px;
  text-align: center;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 40px;
}

.page-footer__content {
  max-width: 900px;
  margin: 0 auto;
}

.page-footer__link {
  color: var(--color-primary);
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

.page-footer__link:hover {
  opacity: 0.7;
  text-decoration: underline;
}

.page-footer__separator {
  margin: 0 8px;
  color: var(--color-text-muted);
}

/* ============================================================
   Bandeau annonces plateforme
   ============================================================ */
.annonce-banner {
  padding: 10px 20px;
  font-size: 13px;
  text-align: center;
}
.annonce-banner__content {
  max-width: 1200px;
  margin: 0 auto;
}
.annonce-banner--info {
  background: #dbeafe;
  color: #1e40af;
  border-bottom: 1px solid #93c5fd;
}
.annonce-banner--warning {
  background: #fef3c7;
  color: #92400e;
  border-bottom: 1px solid #fcd34d;
}
.annonce-banner--maintenance {
  background: #fee2e2;
  color: #991b1b;
  border-bottom: 1px solid #fca5a5;
}
.annonce-banner--feature {
  background: #d1fae5;
  color: #065f46;
  border-bottom: 1px solid #6ee7b7;
}

/* --- Bannière d'impersonation --- */
.impersonate-banner {
  background: #fef3c7;
  border-bottom: 2px solid #f59e0b;
  padding: 8px 16px;
  position: sticky;
  top: 0;
  z-index: 9999;
}

.impersonate-banner__content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
}

.impersonate-banner__text {
  font-size: 13px;
  color: #92400e;
}

.impersonate-banner__btn {
  background: #dc2626;
  color: #fff;
  border: none;
  padding: 5px 14px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.impersonate-banner__btn:hover {
  background: #b91c1c;
}


/* ============================================================
   DESIGN SYSTEM — Utility classes
   Remplacement systématique des inline styles récurrents.
   Convention : nommage inspiré Tailwind, valeurs en px (base 4px).
   ============================================================ */

/* ── Margin ── */
.m-0  { margin: 0; }
.m-1  { margin: 4px; }
.m-2  { margin: 8px; }
.m-3  { margin: 12px; }
.m-4  { margin: 16px; }
.m-5  { margin: 20px; }
.m-6  { margin: 24px; }
.m-8  { margin: 32px; }

.mt-0  { margin-top: 0; }
.mt-1  { margin-top: 4px; }
.mt-2  { margin-top: 8px; }
.mt-3  { margin-top: 12px; }
.mt-4  { margin-top: 16px; }
.mt-5  { margin-top: 20px; }
.mt-6  { margin-top: 24px; }
.mt-8  { margin-top: 32px; }
.mt-10 { margin-top: 40px; }

.mb-0  { margin-bottom: 0; }
.mb-1  { margin-bottom: 4px; }
.mb-2  { margin-bottom: 8px; }
.mb-3  { margin-bottom: 12px; }
.mb-4  { margin-bottom: 16px; }
.mb-5  { margin-bottom: 20px; }
.mb-6  { margin-bottom: 24px; }
.mb-8  { margin-bottom: 32px; }
.mb-10 { margin-bottom: 40px; }

.ml-0  { margin-left: 0; }
.ml-1  { margin-left: 4px; }
.ml-2  { margin-left: 8px; }
.ml-3  { margin-left: 12px; }
.ml-4  { margin-left: 16px; }
.ml-auto { margin-left: auto; }

.mr-0  { margin-right: 0; }
.mr-1  { margin-right: 4px; }
.mr-2  { margin-right: 8px; }
.mr-3  { margin-right: 12px; }
.mr-4  { margin-right: 16px; }
.mr-auto { margin-right: auto; }

.mx-auto { margin-left: auto; margin-right: auto; }

/* ── Padding ── */
.p-0  { padding: 0; }
.p-1  { padding: 4px; }
.p-2  { padding: 8px; }
.p-3  { padding: 12px; }
.p-4  { padding: 16px; }
.p-5  { padding: 20px; }
.p-6  { padding: 24px; }
.p-8  { padding: 32px; }

.pt-0  { padding-top: 0; }
.pt-2  { padding-top: 8px; }
.pt-4  { padding-top: 16px; }
.pt-6  { padding-top: 24px; }

.pb-0  { padding-bottom: 0; }
.pb-2  { padding-bottom: 8px; }
.pb-4  { padding-bottom: 16px; }
.pb-6  { padding-bottom: 24px; }

.pl-0  { padding-left: 0; }
.pl-2  { padding-left: 8px; }
.pl-4  { padding-left: 16px; }

.pr-0  { padding-right: 0; }
.pr-2  { padding-right: 8px; }
.pr-4  { padding-right: 16px; }

.px-2  { padding-left: 8px; padding-right: 8px; }
.px-3  { padding-left: 12px; padding-right: 12px; }
.px-4  { padding-left: 16px; padding-right: 16px; }
.px-5  { padding-left: 20px; padding-right: 20px; }
.px-6  { padding-left: 24px; padding-right: 24px; }

.py-1  { padding-top: 4px; padding-bottom: 4px; }
.py-2  { padding-top: 8px; padding-bottom: 8px; }
.py-3  { padding-top: 12px; padding-bottom: 12px; }
.py-4  { padding-top: 16px; padding-bottom: 16px; }
.py-6  { padding-top: 24px; padding-bottom: 24px; }

/* ── Gap (pour flex/grid) ── */
.gap-1  { gap: 4px; }
.gap-2  { gap: 8px; }
.gap-3  { gap: 12px; }
.gap-4  { gap: 16px; }
.gap-5  { gap: 20px; }
.gap-6  { gap: 24px; }
.gap-8  { gap: 32px; }

/* ── Display ── */
.d-none    { display: none; }
.d-block   { display: block; }
.d-inline  { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex    { display: flex; }
.d-inline-flex  { display: inline-flex; }
.d-grid    { display: grid; }

/* ── Flexbox ── */
.flex-row      { flex-direction: row; }
.flex-col      { flex-direction: column; }
.flex-wrap     { flex-wrap: wrap; }
.flex-nowrap   { flex-wrap: nowrap; }
.flex-1        { flex: 1; }
.flex-none     { flex: none; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-grow     { flex-grow: 1; }

.items-start    { align-items: flex-start; }
.items-center   { align-items: center; }
.items-end      { align-items: flex-end; }
.items-baseline { align-items: baseline; }
.items-stretch  { align-items: stretch; }

.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around  { justify-content: space-around; }

.self-start  { align-self: flex-start; }
.self-center { align-self: center; }
.self-end    { align-self: flex-end; }

/* ── Grid templates ── */
.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
.grid-cols-6 { grid-template-columns: repeat(6, 1fr); }

.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }
.col-span-4 { grid-column: span 4; }
.col-span-full { grid-column: 1 / -1; }

/* ── Width / Height ── */
.w-full  { width: 100%; }
.w-auto  { width: auto; }
.w-half  { width: 50%; }
.w-fit   { width: fit-content; }
.max-w-sm  { max-width: 480px; }
.max-w-md  { max-width: 640px; }
.max-w-lg  { max-width: 800px; }
.max-w-xl  { max-width: 1024px; }
.max-w-2xl { max-width: 1200px; }
.max-w-full { max-width: 100%; }
.min-w-0   { min-width: 0; }

.h-full  { height: 100%; }
.h-auto  { height: auto; }
.min-h-0 { min-height: 0; }

/* ── Overflow ── */
.overflow-hidden  { overflow: hidden; }
.overflow-auto    { overflow: auto; }
.overflow-x-auto  { overflow-x: auto; }
.overflow-y-auto  { overflow-y: auto; }

/* ── Position ── */
.relative { position: relative; }
.absolute { position: absolute; }
.sticky   { position: sticky; }
.fixed    { position: fixed; }
.top-0    { top: 0; }
.right-0  { right: 0; }
.bottom-0 { bottom: 0; }
.left-0   { left: 0; }
.inset-0  { inset: 0; }

/* ── Border ── */
.border     { border: 1px solid var(--color-border); }
.border-0   { border: 0; }
.border-t   { border-top: 1px solid var(--color-border); }
.border-b   { border-bottom: 1px solid var(--color-border); }
.border-l   { border-left: 1px solid var(--color-border); }
.border-r   { border-right: 1px solid var(--color-border); }

.rounded-none { border-radius: 0; }
.rounded-sm   { border-radius: var(--radius-xs, 4px); }
.rounded      { border-radius: var(--radius-sm, 6px); }
.rounded-md   { border-radius: var(--radius-md, 10px); }
.rounded-lg   { border-radius: var(--radius-lg, 14px); }
.rounded-full { border-radius: 9999px; }

/* ── Background ── */
.bg-white      { background: #fff; }
.bg-surface    { background: var(--color-surface); }
.bg-muted      { background: var(--color-bg, #f8f9fb); }
.bg-primary    { background: var(--color-primary); color: #fff; }
.bg-primary-light { background: var(--color-primary-bg, #eef5fa); }
.bg-success-light { background: var(--color-success-bg, #f0fdf4); }
.bg-danger-light  { background: var(--color-danger-bg, #fef2f2); }
.bg-warning-light { background: var(--color-warning-bg, #fffbeb); }
.bg-info-light    { background: var(--color-info-bg, #eff6ff); }
.bg-transparent   { background: transparent; }

/* ── Shadow ── */
.shadow-none { box-shadow: none; }
.shadow-xs   { box-shadow: var(--shadow-xs); }
.shadow-sm   { box-shadow: var(--shadow-sm); }
.shadow-md   { box-shadow: var(--shadow-md); }
.shadow-lg   { box-shadow: var(--shadow-lg); }

/* ── Typography compléments ── */
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text-wrap    { white-space: normal; }
.text-nowrap  { white-space: nowrap; }
.text-break   { word-break: break-word; }
.text-uppercase { text-transform: uppercase; }
.text-capitalize { text-transform: capitalize; }
.text-lowercase  { text-transform: lowercase; }
.text-underline  { text-decoration: underline; }
.text-no-underline { text-decoration: none; }

.leading-tight   { line-height: 1.25; }
.leading-normal  { line-height: 1.5; }
.leading-relaxed { line-height: 1.75; }

.tracking-tight  { letter-spacing: -0.025em; }
.tracking-normal { letter-spacing: 0; }
.tracking-wide   { letter-spacing: 0.05em; }

/* ── Cursor & interaction ── */
.cursor-pointer  { cursor: pointer; }
.cursor-default  { cursor: default; }
.cursor-not-allowed { cursor: not-allowed; }
.pointer-events-none { pointer-events: none; }
.select-none     { user-select: none; }

/* ── Opacity ── */
.opacity-0   { opacity: 0; }
.opacity-25  { opacity: 0.25; }
.opacity-50  { opacity: 0.5; }
.opacity-75  { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* ── Transitions ── */
.transition      { transition: all var(--transition-base, 180ms) ease; }
.transition-fast { transition: all var(--transition-fast, 120ms) ease; }
.transition-slow { transition: all var(--transition-slow, 300ms) ease; }
.transition-none { transition: none; }

/* ── Composites fréquents (remplacent les inline styles les plus courants) ── */

/* Conteneur section avec carte blanche */
.section-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 10px);
  padding: 20px;
  margin-bottom: 20px;
}

.section-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.section-card__title {
  font-size: var(--text-lg, 16px);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}

/* Grille de détail (clé/valeur) */
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.detail-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}
.detail-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 768px) {
  .detail-grid,
  .detail-grid--3,
  .detail-grid--4 {
    grid-template-columns: 1fr;
  }
}

.detail-item {}
.detail-item__label {
  font-size: var(--text-sm, 12px);
  color: var(--color-text-muted, #8892a4);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.detail-item__value {
  font-size: var(--text-base, 14px);
  font-weight: 500;
  color: var(--color-text);
}

/* Stats row (ligne de KPIs) */
.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 6px);
  padding: 16px;
  text-align: center;
}

.stat-card__value {
  font-size: var(--text-2xl, 24px);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.2;
}

.stat-card__label {
  font-size: var(--text-sm, 12px);
  color: var(--color-text-secondary);
  margin-top: 4px;
}

/* Info banner (remplace les divs avec inline background + padding) */
.info-banner {
  padding: 12px 16px;
  border-radius: var(--radius-sm, 6px);
  font-size: var(--text-sm, 12px);
  margin-bottom: 16px;
}
.info-banner--info    { background: var(--color-info-bg); color: var(--color-info); border: 1px solid #93c5fd; }
.info-banner--success { background: var(--color-success-bg); color: var(--color-success); border: 1px solid #86efac; }
.info-banner--warning { background: var(--color-warning-bg); color: var(--color-warning); border: 1px solid #fcd34d; }
.info-banner--danger  { background: var(--color-danger-bg); color: var(--color-danger); border: 1px solid #fca5a5; }

/* Tag/chip générique */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: var(--text-xs, 11px);
  font-weight: 500;
  background: var(--color-bg, #f3f4f6);
  color: var(--color-text-secondary);
}
.tag--primary { background: var(--color-primary-bg); color: var(--color-primary); }
.tag--success { background: var(--color-success-bg); color: var(--color-success); }
.tag--danger  { background: var(--color-danger-bg); color: var(--color-danger); }
.tag--warning { background: var(--color-warning-bg); color: var(--color-warning); }

/* Separator (remplace les <hr> et border-top inline) */
.separator {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: 16px 0;
}
.separator--lg { margin: 24px 0; }
.separator--sm { margin: 8px 0; }

/* Actions bar (remplace les divs "display:flex; gap:8px; justify-content:flex-end") */
.actions-bar {
  display: flex;
  gap: 8px;
  align-items: center;
}
.actions-bar--end { justify-content: flex-end; }
.actions-bar--between { justify-content: space-between; }
.actions-bar--wrap { flex-wrap: wrap; }

/* Responsive hide/show */
@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
  .grid-cols-2 { grid-template-columns: 1fr; }
  .grid-cols-3 { grid-template-columns: 1fr; }
  .grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 769px) {
  .hide-desktop { display: none !important; }
}
@media (max-width: 1280px) {
  .grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-cols-5 { grid-template-columns: repeat(3, 1fr); }
  .grid-cols-6 { grid-template-columns: repeat(3, 1fr); }
}

/* ──────────────────────────────────────────────────────────
   C.5 — Responsive mobile sérieux (audit 04/05/2026)
   Breakpoints : 768px (tablette) et 480px (mobile portrait)
   ────────────────────────────────────────────────────────── */

/* ── Tablette ── */
@media (max-width: 768px) {
  /* Sidebar : devient un drawer caché par défaut, ouvert via burger */
  .sidebar {
    transform: translateX(-100%);
    transition: transform 200ms ease;
    z-index: 1000;
  }
  .sidebar--mobile-open {
    transform: translateX(0);
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
  }
  /* Le contenu principal prend toute la largeur */
  .layout__main {
    margin-left: 0;
    padding-left: 16px;
    padding-right: 16px;
  }
  /* Burger button affiché */
  .sidebar-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    border-radius: 4px;
    cursor: pointer;
    margin-right: 8px;
  }
  /* Page header en colonne */
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  /* Grids : 2 colonnes max au lieu de 4 */
  .grid-4, .grid-cols-4, .grid-cols-5, .grid-cols-6 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Forms : colonnes empilées */
  .form-row {
    flex-direction: column;
  }
  .form-field {
    width: 100%;
  }
}

/* ── Mobile portrait (smartphone) ── */
@media (max-width: 480px) {
  .grid-4, .grid-cols-4, .grid-cols-5, .grid-cols-6, .grid-cols-3, .grid-cols-2 {
    grid-template-columns: 1fr !important;
  }
  /* Tables : conversion en cartes empilées */
  .data-table thead {
    display: none;
  }
  .data-table tr {
    display: block;
    margin-bottom: 12px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 8px;
  }
  .data-table td {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid var(--color-border-light, #f0f0f0);
  }
  .data-table td:last-child {
    border-bottom: none;
  }
  /* Pseudo label depuis data-label si défini sur <td> */
  .data-table td[data-label]::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--color-text-muted);
    margin-right: 12px;
  }
  /* Boutons : touch-friendly (44px min) */
  .btn {
    min-height: 44px;
    min-width: 44px;
  }
  .btn--sm {
    min-height: 36px;
    min-width: 36px;
  }
  /* Page header titre plus petit */
  .page-header__title {
    font-size: 20px;
  }
  /* Filter bar passe en colonne */
  .filter-bar {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .filter-bar > * {
    width: 100%;
  }
}

/* ── Aide visuelle pour debug responsive (à activer manuellement en dev) ── */
/* body[data-debug-responsive]::before {
  content: 'desktop';
  position: fixed;
  bottom: 8px;
  right: 8px;
  background: #1B4965;
  color: white;
  padding: 4px 8px;
  font-size: 11px;
  z-index: 9999;
  border-radius: 4px;
}
@media (max-width: 768px) {
  body[data-debug-responsive]::before { content: 'tablet'; background: #f59e0b; }
}
@media (max-width: 480px) {
  body[data-debug-responsive]::before { content: 'mobile'; background: #dc2626; }
} */

/* ──────────────────────────────────────────────────────────
 * UX-B (5 mai 2026) : sidebar rétractée par défaut, déployée au hover
 * Implémentation : on override la largeur par défaut a la valeur
 * collapsed, puis on revient à la largeur déployée au hover.
 * Le transition: width existant garantit l'animation fluide.
 * ────────────────────────────────────────────────────────── */

@media (min-width: 769px) {
  /* État par défaut : rétractée */
  .sidebar {
    width: var(--sidebar-collapsed-width);
  }
  /* Layout main décalé en conséquence */
  body:not(.sidebar-pinned) .layout__main {
    margin-left: var(--sidebar-collapsed-width);
  }

  /* Hover : on déploie */
  .sidebar:hover {
    width: var(--sidebar-width);
    box-shadow: 4px 0 12px rgba(0, 0, 0, 0.06);
  }

  /* Cacher les textes (libellés items, badges, sections) en mode rétracté.
     Garder les icônes SVG visibles.
     UX-K1 (6 mai) : width:0 + max-height:0 (height:0 ne marchait pas dans le
     contexte flex du parent .sidebar__user). max-height force le clipping
     vertical sans casser l'animation d'opacity au hover. */
  .sidebar:not(:hover) .sidebar__item-text,
  .sidebar:not(:hover) .sidebar__section,
  .sidebar:not(:hover) .sidebar__logo-text,
  .sidebar:not(:hover) .sidebar__user-info,
  .sidebar:not(:hover) .sidebar__badge {
    width: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
  }
  /* Le .sidebar__user en mode retracte : on force la hauteur a celle de l'avatar
     pour que le bloc ne s'etire pas avec le contenu invisible. */
  .sidebar:not(:hover) .sidebar__user {
    min-height: 28px;
    height: 28px;
  }
  /* Les items en mode rétracté : centrer l'icône */
  .sidebar:not(:hover) .sidebar__item {
    justify-content: center;
    padding-left: 8px;
    padding-right: 8px;
  }

  /* Au hover, faire réapparaître progressivement */
  .sidebar:hover .sidebar__item-text,
  .sidebar:hover .sidebar__section,
  .sidebar:hover .sidebar__logo-text,
  .sidebar:hover .sidebar__user-info,
  .sidebar:hover .sidebar__badge {
    opacity: 1;
    transition: opacity 0.18s ease 0.05s;
  }

  /* Profile bloc en mode rétracté : juste l'avatar */
  .sidebar:not(:hover) .sidebar__user {
    justify-content: center;
  }
  .sidebar:not(:hover) .sidebar__logout-form {
    display: none;
  }
}

/* Mobile : on garde le comportement existant (drawer + burger) */