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

/* ══ Design tokens ═══════════════════════════════════════════════════════════ */
:root {
  /* Ornexia palette — couleurs de marque */
  --navy:         #001C3D;
  --navy-mid:     #0a2d57;
  --navy-light:   #1a3f6f;

  /* Surface */
  --bg:      #f4f6f9;
  --bg2:     #ffffff;
  --bg3:     #f1f4f8;

  /* Border */
  --border:  #e2e8f0;
  --border2: #c8d4e0;

  /* Text — assombrissement de --text3 d'avril 2026 pour passer le seuil
     WCAG AA 4.5:1 sur fond clair (--bg #f4f6f9). Anciennement #8a96a8
     (ratio 2.77 = FAIL). Nouveau #646e7e (ratio 4.76 sur --bg, 5.16 sur
     blanc) — le contraste se voit mais reste discret. */
  --text:  #1a2540;
  --text2: #445069;
  --text3: #646e7e;

  /* Semantic — accent (vert marque) */
  --accent:       #1D9E75;
  --accent-light: #2db88a;
  --accent2:      #168a64;
  --accent-bg:    #edfbf4;

  --danger:    #dc2626;
  --danger-bg: #fef2f2;
  --warn:      #d97706;
  --warn-bg:   #fffbeb;
  --ok:        #16a34a;
  --ok-bg:     #f0fdf4;
  --info:      #0891b2;
  --info-bg:   #ecfeff;

  /* Sévérité matrice — différencie 1 (vert vif) et 2 (vert-jaune) */
  --sev-1: #16a34a;
  --sev-2: #84cc16;
  --sev-3: #eab308;
  --sev-4: #f97316;
  --sev-5: #dc2626;

  /* Couleurs post-it — source unique pour matrice + headers + pickers.
     Bordures dérivées (utilisées par .postit-row pour le contour). */
  --postit-yellow:        #fef68a;
  --postit-yellow-border: #f0dd6b;
  --postit-orange:        #ffd79f;
  --postit-orange-border: #f5b870;
  --postit-pink:          #ffc2d4;
  --postit-pink-border:   #f593ae;
  --postit-blue:          #b9daf0;
  --postit-blue-border:   #87b8dc;
  --postit-green:         #cfe79d;
  --postit-green-border:  #9fc96d;

  /* Les couleurs de sévérité spécifiques tenant restent configurables
     dans la page #admin/risk-colors et appliquées en inline par le JS
     (sevColor). Les --sev-* ci-dessus servent de défaut UI. */

  /* Échelle border-radius */
  --radius-sm:   4px;
  --radius:      6px;
  --radius-md:   8px;
  --radius-lg:   10px;
  --radius-pill: 999px;
  --radius-full: 50%;

  /* Échelle font-size — base 14, valeurs cohérentes inter-OS */
  --fs-xs:  11px;
  --fs-sm:  13px;
  --fs-md:  14px;
  --fs-lg:  16px;
  --fs-xl:  18px;
  --fs-2xl: 22px;
  --fs-3xl: 28px;

  /* Échelle z-index — base 100 pour permettre l'intercalage */
  --z-sticky:  100;
  --z-header:  200;
  /* Hierarchie z-index : l'overlay (fond semi-transparent) doit etre
     SOUS le drawer (sidebar mobile), sinon il intercepte les clics sur
     les liens du nav et les redirige vers closeDrawer (bug avril 2026 :
     le user cliquait sur un item, overlay recevait le clic, drawer se
     fermait, page cible jamais chargee). */
  --z-overlay: 300;
  --z-drawer:  400;
  --z-modal:   500;
  --z-toast:   600;

  /* Polices — stack système assumée multi-OS (validation 30/04/2026).
     - macOS : SF Pro Text + SF Mono (via system-ui / ui-monospace)
     - Windows 11 : Segoe UI Variable + Cascadia Mono
     - Windows 10 : Segoe UI + Cascadia Code (fallbacks chainés)
     - Linux : police d'interface du DE
     Cohérence intra-OS (libellé + code de la même famille système),
     asymétrie inter-OS assumée. Pas de webfont, pas de FOUT. */
  --font-sans: system-ui, -apple-system, 'Segoe UI Variable', 'Segoe UI',
               BlinkMacSystemFont, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'Cascadia Mono',
               Consolas, Menlo, monospace;
}

body {
  font-family: var(--font-sans);
  background: var(--bg); color: var(--text);
  font-size: var(--fs-md); line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ══ Accessibilité — focus visible global ═══════════════════════════════════
   Tous les éléments interactifs reçoivent un anneau de focus visible
   au clavier (Tab/Shift-Tab). Les utilisateurs souris ne le voient pas
   (:focus-visible ne s'active pas en click sur Chrome/Firefox/Safari).
   Cible WCAG 2.1 AA — succès critère 2.4.7. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
/* Boutons : on retire l'outline défaut et on ajoute un box-shadow
   accent (l'outline-offset coupe parfois sur les btn arrondis). */
button:focus-visible,
.btn:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(29, 158, 117, 0.35);
}
/* On supprime aussi l'ancien outline natif sur les éléments qui ont
   déjà un :focus stylé (inputs/selects géraient le focus avant). */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
}

/* ══ Icônes (sprite SVG) ════════════════════════════════════════════════════
   Toutes les icônes consommées via <use href="/static/svg/icons.svg#icon-*">
   héritent automatiquement de la couleur du texte parent (currentColor).
   Tailles : `.icon` (16px par défaut), `.icon-lg` (24px). */
.icon {
  width: 16px; height: 16px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-lg { width: 24px; height: 24px; }

/* ══ Layout ══════════════════════════════════════════════════════════════════ */
#shell { display: flex; min-height: 100vh; }

/* ══ Sidebar ══════════════════════════════════════════════════════════════════ */
#sidebar {
  width: 224px; flex-shrink: 0;
  background: var(--navy);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto; overflow-x: hidden;
  transition: width .2s ease;
}
#sidebar.collapsed { width: 52px; }
#sidebar.collapsed .brand-name,
#sidebar.collapsed .nav-label,
#sidebar.collapsed nav .section-label { display: none; }
#sidebar.collapsed nav a { padding: 10px 14px; justify-content: center; }
#sidebar.collapsed .brand-link { justify-content: center; }

/* Brand */
.sidebar-brand {
  padding: 14px 12px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,.08);
  min-height: 60px; flex-shrink: 0;
}
.brand-link {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; flex: 1; overflow: hidden;
}
.brand-link {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 3px 5px;
}
.brand-logo {
  height: 68px; max-width: 210px;
  object-fit: contain; object-position: left center;
  display: block;
}
/* Collapsed: hide logo */
#sidebar.collapsed .brand-link { background: none; padding: 0; }
#sidebar.collapsed .brand-logo { display: none; }
#sidebar-toggle {
  background: none; border: none; cursor: pointer; flex-shrink: 0;
  color: rgba(255,255,255,.5); padding: 4px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  transition: color .15s, background .15s;
}
#sidebar-toggle svg { width: 16px; height: 16px; transition: transform .2s; }
#sidebar-toggle:hover { color: #fff; background: rgba(255,255,255,.08); }

/* Le dropdown historique `#user-select-wrap` a été retiré : l'identité
   vient maintenant du cookie de session. CSS supprimé en conséquence. */

/* Nav links */
#sidebar nav { padding: 8px 0; flex: 1; }
#sidebar nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px; text-decoration: none;
  color: rgba(255,255,255,.6); font-size: var(--fs-sm);
  transition: background .12s, color .12s; white-space: nowrap;
  border-left: 3px solid transparent;
}
#sidebar nav a svg { width: 16px; height: 16px; flex-shrink: 0; stroke: currentColor; }
#sidebar nav a:hover {
  background: rgba(255,255,255,.07); color: #fff;
  border-left-color: rgba(255,255,255,.2);
}
#sidebar nav a.active {
  background: rgba(29,158,117,.15); color: var(--accent-light);
  border-left-color: var(--accent); font-weight: 500;
}
#sidebar nav a.active svg { stroke: var(--accent-light); }

#sidebar nav .section-label {
  padding: 18px 16px 5px;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.3); white-space: nowrap;
}

/* ══ Main ═════════════════════════════════════════════════════════════════════*/
#main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* ── Page header ── */
#page-header {
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
  display: flex; align-items: center; gap: 12px;
  position: sticky; top: 0; z-index: var(--z-header);
  min-height: 56px;
  /* Subtle navy top border */
  box-shadow: 0 2px 0 0 var(--border), inset 0 3px 0 0 var(--accent);
}
#page-header h1 {
  font-size: var(--fs-md); font-weight: 600; flex: 0 1 auto;
  color: var(--navy); letter-spacing: -.01em;
}
#page-actions { display: flex; align-items: center; gap: 8px; flex: 1; }

/* Header right (icon + user) */
.header-right {
  display: flex; align-items: center; gap: 12px;
  flex-shrink: 0;
  padding-left: 16px;
  border-left: 1px solid var(--border);
  margin-left: auto;
}
.header-logo-link {
  display: flex; align-items: center; text-decoration: none;
  opacity: .75; transition: opacity .15s;
}
.header-logo-link:hover { opacity: 1; }
.header-icon { width: 28px; height: 28px; }
.header-user {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--fs-sm); font-weight: 500; color: var(--text2);
  cursor: default;
}
.header-user svg { color: var(--text3); flex-shrink: 0; }

/* Header : icône compte cliquable (le trigramme/nom est dans la modale compte). */
.header-account-btn {
  background: transparent; border: 1px solid var(--border);
  cursor: pointer; padding: 4px;
  color: var(--navy);
  border-radius: var(--radius-full);
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s;
}
.header-account-btn:hover { background: var(--bg3); border-color: var(--border2); }

/* Menu déroulant du compte — s'ouvre sous l'icône, alignement droit. */
.account-menu {
  position: fixed;
  z-index: var(--z-drawer);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  min-width: 260px; max-width: 320px;
  padding: 14px 16px;
  font-size: var(--fs-sm);
  color: var(--text);
}
.account-menu[hidden] { display: none; }
.account-menu .am-section-label {
  font-size: var(--fs-xs); font-weight: 600;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 10px 0 4px;
}
.account-menu .am-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.account-menu .am-chip {
  display: inline-block;
  background: var(--accent-bg); color: var(--accent);
  font-size: var(--fs-xs); padding: 2px 8px;
  border-radius: var(--radius-lg);
}
.account-menu .am-actions {
  display: flex; gap: 6px;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.account-menu .am-actions button { flex: 1; }

/* Form post-it inline dans le header — visible en desktop uniquement. */
.header-postit-form {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 8px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.header-postit-form.hidden { display: none; }
.header-postit-form input[type="text"] {
  width: 200px;
  border: none; background: transparent;
  font-size: var(--fs-sm); padding: 4px 2px;
  outline: none;
}
.header-postit-form input[type="date"] {
  border: none; background: transparent;
  font-size: var(--fs-sm); color: var(--text2);
  padding: 2px 0;
  outline: none;
}
.header-postit-form .hpi-swatches { display: flex; gap: 3px; }
.header-postit-form .hpi-swatch {
  width: 14px; height: 14px; border-radius: var(--radius-full);
  border: 1.5px solid rgba(0,0,0,.12);
  cursor: pointer; padding: 0;
  transition: transform .08s, border-color .08s;
}
.header-postit-form .hpi-swatch:hover { transform: scale(1.15); }
.header-postit-form .hpi-swatch.selected { border-color: #1f2937; border-width: 2px; }
.header-postit-form .hpi-swatch[data-color="yellow"] { background: var(--postit-yellow); }
.header-postit-form .hpi-swatch[data-color="orange"] { background: var(--postit-orange); }
.header-postit-form .hpi-swatch[data-color="pink"]   { background: var(--postit-pink); }
.header-postit-form .hpi-swatch[data-color="blue"]   { background: var(--postit-blue); }
.header-postit-form .hpi-swatch[data-color="green"]  { background: var(--postit-green); }
.header-postit-form .hpi-add-btn {
  background: var(--accent); color: #fff;
  border: none; border-radius: var(--radius);
  padding: 4px 10px;
  font-size: var(--fs-md); font-weight: 600;
  cursor: pointer;
}
.header-postit-form .hpi-add-btn:disabled { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 768px) {
  /* Post-it inline masqué sur mobile ; icône compte légèrement réduite. */
  .header-postit-form { display: none !important; }
  .header-account-btn { width: 30px; height: 30px; }
}

#content { padding: 24px 28px; flex: 1; }

/* ══ Cards ═══════════════════════════════════════════════════════════════════ */
.card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px;
}
.card + .card { margin-top: 16px; }
.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.card-title { font-size: var(--fs-md); font-weight: 600; }

/* ══ Buttons ══════════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: var(--radius); cursor: pointer;
  font-size: var(--fs-sm); font-weight: 500;
  /* Bordure 2px par défaut (alignée sur .btn-secondary). Avant : 1px sur
     btn et 2px sur btn-secondary, ce qui décalait verticalement les
     primary à côté des secondary. Avril 2026 : 2px partout pour aligner
     l'ensemble des boutons header/toolbar. */
  border: 2px solid transparent;
  transition: background .12s, border-color .12s; white-space: nowrap;
  font-family: inherit; letter-spacing: -.01em;
  /* line-height explicite pour aligner les <a class="btn"> avec les
     <button class="btn">. Sans ça, la baseline du <a> hérite du parent
     et donne une hauteur visible légèrement différente. */
  line-height: 1.2;
}
.btn-primary   { background: var(--accent); color: #fff; border-color: var(--accent2); }
.btn-primary:hover { background: var(--accent2); }
/* Secondaire = action métier non-primaire (export, refresh, gérer, analyser CR,
   checklist, clore révision, etc.). Fond vert clair (--accent-bg) avec texte
   accent — évolution avril 2026. Bordure 2px (épaissie) pour mieux ressortir
   sur le fond clair. Pour un bouton vraiment neutre (Annuler), .btn-neutral. */
.btn-secondary { background: var(--accent-bg); color: var(--accent); border: 2px solid var(--accent); }
.btn-secondary:hover { background: #d4f4e4; }
.btn-neutral   { background: var(--bg2); color: var(--text2); border-color: var(--border2); }
.btn-neutral:hover { background: var(--bg3); }
.btn-danger    { background: var(--danger-bg); color: var(--danger); border-color: #fca5a5; }
.btn-danger:hover { background: #fee2e2; }
.btn-sm { padding: 3px 9px; font-size: var(--fs-sm); }
/* Boutons icône (✎ Modifier, ✕ Supprimer en cellule action) : fond blanc
   uniforme, bordure souple, le modificateur de couleur (.btn-secondary,
   .btn-danger) ne s'applique qu'au texte/icône. Le ✎ devient ainsi
   discret au milieu d'une table dense, contrairement au bouton plein
   couleur qui ressort comme une CTA.

   Couleur de texte par défaut = --accent (vert) pour qu'un .btn-icon
   sans modificateur (ou avec .btn-primary qui forcerait color:#fff)
   reste lisible sur fond blanc. */
/* Mai 2026 (v0.4.45) : couleur des pictos d'icônes (✎, ✕, ⊙, etc.) en vert
   plus sombre que --accent, pour gagner en contraste sur fond clair sans
   modifier la palette générale. --accent (#1D9E75) est utilisé sur les fonds
   colorés (boutons pleins, badges) ; ici on cible uniquement les pictos
   monochromes posés sur fond bg2/bg3. */
/* Mai 2026 (v0.5.0) : bordure épaissie x2 (1px → 2px) pour que les boutons
   modifier (✎) et supprimer (✕) ressortent davantage en cellule de table.
   Couleur de bordure alignée sur la couleur du picto (vert sombre / rouge). */
.btn-icon { padding: 4px 6px; background: var(--bg2); border: 2px solid #147A57; color: #147A57; }
.btn-icon.btn-secondary { color: #147A57; border-color: #147A57; }
.btn-icon.btn-primary   { color: #147A57; border-color: #147A57; }
.btn-icon.btn-danger    { color: var(--danger); border-color: var(--danger); }
.btn-icon:hover { background: var(--bg3); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ══ Forms ═══════════════════════════════════════════════════════════════════ */
.form-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.form-group { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 160px; }
.form-group label { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase;
                    letter-spacing: .06em; color: var(--text3); }
input, select, textarea, option {
  border: 1px solid var(--border2); border-radius: var(--radius);
  padding: 6px 10px; font-size: var(--fs-sm); color: var(--text);
  background: var(--bg2); font-family: inherit;
  transition: border-color .12s;
}
/* `<option>` ne reçoit pas border/padding/background depuis la règle
   ci-dessus dans la plupart des navigateurs (rendu OS-natif), mais
   font-family et font-size sont bien hérités quand on les déclare
   explicitement. Sans ça, Safari/Chrome rendent le menu déroulant
   ouvert avec la police système — incohérence visible vs `<label>`. */
option {
  border: none; padding: 0; background: transparent;
  font-family: inherit; font-size: var(--fs-sm); color: var(--text);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(29,158,117,.12);
}
textarea { resize: vertical; min-height: 60px; }
select[multiple] { padding: 4px; }

/* ══ Tables ══════════════════════════════════════════════════════════════════ */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
th {
  text-align: left; padding: 8px 10px; font-size: var(--fs-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; color: var(--text3);
  border-bottom: 1px solid var(--border); background: var(--bg3);
  white-space: nowrap;
}
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--accent); }
/* Avril 2026 : on ne colore plus l'entête de la colonne triée en accent,
   la flèche ↑/↓ suffit à signaler le tri actif. Évite l'effet "lien vert"
   sur les colonnes data, qui déstabilisait la lecture (page origins). */
th.sorted { color: inherit; }
th .sort-arrow { margin-left: 4px; font-size: var(--fs-xs); }
td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--bg3); }
tr.inactive td { opacity: .45; }

/* ══ Risk table ══════════════════════════════════════════════════════════════ */
.risk-row td { vertical-align: top; background: #fafbfc; color: #1a1a1a; }
.risk-row.expanded td { border-bottom: none; background: var(--accent-bg); color: #1a1a1a; }
/* Volet "Plan d'actions" qui s'ouvre sous une ligne de risque (sortie d'avril
   2026). Avant : fond gris uniforme. Maintenant : panneau blanc encadré
   d'un trait vert fin pour bien le détacher du tableau parent — demande
   user pour faciliter la lecture quand plusieurs risques sont expandés.
   Le `td` parent reste sur fond accent-bg (vert très clair, hérité de la
   risk-row.expanded juste au-dessus) ; la bordure 1.5px var(--accent) du
   panel ressort proprement contre ce fond. */
.risk-actions-row td {
  background: var(--accent-bg); padding: 10px 16px;
  border-bottom: 1px solid var(--border);
}
.risk-actions-panel {
  display: block;
  background: #fff;
  border: 1.5px solid var(--accent);
  border-radius: var(--radius);
  padding: 12px 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

/* ══ Scale selector ══════════════════════════════════════════════════════════ */
.scale { display: flex; gap: 3px; }
.scale-btn {
  width: 28px; height: 28px; border-radius: var(--radius-sm); cursor: pointer;
  font-size: var(--fs-sm); font-weight: 500; border: 1px solid var(--border2);
  background: var(--bg2); color: var(--text3); transition: all .1s;
  font-family: var(--font-mono); display: inline-flex;
  align-items: center; justify-content: center;
}
.scale-btn:hover { border-color: var(--border2); background: var(--bg3); }
.scale-btn.active-1,.scale-btn.active-2 { background: var(--ok-bg); color: var(--ok); border-color: #86efac; }
.scale-btn.active-3 { background: var(--warn-bg); color: var(--warn); border-color: #fcd34d; }
.scale-btn.active-4.impact-btn { background: var(--danger-bg); color: var(--danger); border-color: #fca5a5; font-weight: 700; }
.scale-btn.active-4:not(.impact-btn) { background: #fff7ed; color: #c2410c; border-color: #fdba74; }
.scale-btn.active-5 { background: var(--danger-bg); color: var(--danger); border-color: #fca5a5; font-weight: 700; }
.scale-btn.problem { position: relative; }
.scale-btn.problem::after {
  content: '!'; position: absolute; top: -4px; right: -4px;
  width: 12px; height: 12px; background: var(--danger);
  color: #fff; border-radius: var(--radius-full); font-size: var(--fs-xs); font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* ══ Severity badge ══════════════════════════════════════════════════════════ */
/* La couleur du texte est posée en inline via `style="color:<hex>"` par le JS,
   à partir de la table `risk_colors` configurée dans #admin/risk-colors. */
.sev { display: inline-flex; flex-direction: column; align-items: center; min-width: 48px; }
.sev-value { font-size: var(--fs-xl); font-weight: 600; font-family: var(--font-mono); line-height: 1.1; }
.sev-label { font-size: var(--fs-xs); font-weight: 500; }

/* ══ Badges ══════════════════════════════════════════════════════════════════ */
.badge {
  display: inline-block; padding: 2px 8px; border-radius: var(--radius-pill);
  font-size: var(--fs-xs); font-weight: 500; white-space: nowrap;
}
.badge-pub  { background: var(--ok-bg);   color: var(--ok);   }
.badge-priv { background: var(--info-bg); color: var(--info); }

/* ══ Stats ═══════════════════════════════════════════════════════════════════ */
.stats-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.stat-card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 16px; min-width: 110px;
}
.stat-label { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase;
              letter-spacing: .06em; color: var(--text3); }
.stat-value { font-size: var(--fs-2xl); font-weight: 600; font-family: var(--font-mono); }
.stat-danger .stat-value { color: var(--danger); }
.stat-warn   .stat-value { color: var(--warn); }

/* ══ Controls bar ════════════════════════════════════════════════════════════ */
.controls-bar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-bottom: 16px; padding: 12px 16px;
  background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius);
}
.stage-tabs { display: flex; gap: 3px; }
.stage-tab {
  padding: 4px 12px; border-radius: var(--radius); cursor: pointer;
  font-size: var(--fs-sm); font-weight: 500; border: 1px solid var(--border2);
  background: var(--bg2); color: var(--text2); transition: all .1s;
  font-family: inherit;
}
.stage-tab.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.controls-bar label { font-size: var(--fs-sm); color: var(--text3); white-space: nowrap; }
.controls-bar input[type=date], .controls-bar select { padding: 4px 8px; font-size: var(--fs-sm); }

/* ══ Action sub-table ════════════════════════════════════════════════════════ */
.action-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.action-table th { font-size: var(--fs-xs); padding: 4px 6px; background: var(--bg2); }
.action-table td { padding: 4px 6px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.action-table tr:last-child td { border-bottom: none; }
.action-table input, .action-table select { font-size: var(--fs-sm); padding: 3px 6px; width: 100%; }
.priority-select { font-size: var(--fs-xs); }

/* ══ Modal ═══════════════════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,18,36,.5);
  display: flex; align-items: center; justify-content: center; z-index: var(--z-modal);
  backdrop-filter: blur(2px);
}
.modal {
  background: var(--bg2); border-radius: var(--radius-lg); padding: 24px;
  width: 500px; max-width: 95vw; max-height: 90vh; overflow-y: auto;
  box-shadow: 0 24px 64px rgba(0,18,36,.22);
  border-top: 3px solid var(--accent);
}
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.modal-header h2 { font-size: var(--fs-lg); font-weight: 600; color: var(--navy); }
.modal-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }

/* ══ Toast ═══════════════════════════════════════════════════════════════════ */
#toast-container {
  position: fixed; bottom: 20px; right: 20px; z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: 8px;
}
.toast {
  padding: 10px 16px; border-radius: var(--radius); font-size: var(--fs-sm);
  font-weight: 500; box-shadow: 0 4px 16px rgba(0,0,0,.15);
  animation: slide-in .2s ease; min-width: 200px;
}
.toast-ok      { background: var(--ok);     color: #fff; }
.toast-error   { background: var(--danger); color: #fff; }
.toast-info    { background: var(--navy);   color: #fff; }
@keyframes slide-in { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ══ Misc ════════════════════════════════════════════════════════════════════ */
.empty   { text-align: center; color: var(--text3); padding: 40px 20px; font-size: var(--fs-sm); }
.loading { text-align: center; color: var(--text3); padding: 40px 20px; }
.error   { background: var(--danger-bg); color: var(--danger); padding: 10px 14px;
           border-radius: var(--radius); font-size: var(--fs-sm); }
.ml-auto { margin-left: auto; }
.text-mono { font-family: var(--font-mono); }

/* ── Trigram d'utilisateur ────────────────────────────────────────────────
 * Toutes les pages (sauf liste users + modal create/edit) doivent rendre
 * leur trigram via le helper JS `trigramHtml(user)` qui produit cette
 * classe avec data-team. Les utilisateurs `is_team` sont en gras pour
 * distinguer les équipes des individus dans tous les contextes (chips,
 * tableaux, popovers, picker RACI, etc.). */
/* Unification typo avril 2026 : les trigrammes utilisateurs étaient
   précédemment rendus en monospace pour les distinguer. Trop bruyant
   visuellement quand mélangés aux libellés sans-serif. On garde le bold
   sur les équipes — seul signal utile (équipe vs individu). */
.user-trig { font-family: inherit; }
.user-trig[data-team="true"] { font-weight: 700; }

/* Tag "raci-mine" : signale visuellement un R/A/C qui correspond à
   l'utilisateur connecté ou une de ses équipes. Permet à l'utilisateur de
   voir d'un coup d'œil à quel titre il est cité dans une action. v0.4.46. */
.raci-mine {
  display: inline-block;
  background: var(--accent-bg);
  color: var(--accent);
  border: 1.5px solid var(--accent);
  padding: 0 5px;
  border-radius: 4px;
  font-weight: 600;
  line-height: 1.3;
}
.raci-mine .user-trig { color: var(--accent); }

/* ── Poignée de drag standardisée ────────────────────────────────────────
   Glyphe ⠿ utilisé partout (postits, comités, étapes, statuts, risques).
   Visible mais discrète au repos, plus contrastée au survol pour signaler
   l'interaction. À combiner avec `aria-label="Glisser pour réordonner"`
   et `role="button"` côté HTML pour les screen readers. */
.drag-handle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  font-size: var(--fs-lg);
  line-height: 1;
  color: var(--text3);
  cursor: grab;
  user-select: none;
  border-radius: var(--radius-sm);
  transition: color .12s, background .12s;
}
.drag-handle:hover {
  color: var(--text);
  background: var(--bg3);
}
.drag-handle:active {
  cursor: grabbing;
}
.drag-handle[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.4;
}
.text-muted { color: var(--text3); }
.text-sm { font-size: var(--fs-sm); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }

.stage-drag-row.drag-over td { background: var(--accent-bg); border-top: 2px solid var(--accent); }
tr.nonrelevant td { opacity: .5; font-style: italic; }
tr.status-drag-row.drag-over td { background: var(--accent-bg); border-top: 2px solid var(--accent); }
tr.action-row.action-drag-over td { background: var(--accent-bg); border-top: 2px solid var(--accent); }
tr.action-row td { background: #fff; }

.tag-chip {
  display: inline-flex; align-items: center; gap: 3px;
  background: var(--accent-bg); color: var(--accent);
  border: 0.5px solid rgba(29,158,117,.3);
  border-radius: var(--radius-pill); padding: 1px 6px; font-size: var(--fs-xs); white-space: nowrap;
}
.tag-remove {
  background: none; border: none; cursor: pointer; color: var(--accent);
  font-size: var(--fs-sm); line-height: 1; padding: 0 1px; font-family: inherit;
}
.tag-select-wrap { min-width: 120px; }
.tags-display { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 3px; min-height: 16px; }
.tag-add-select { font-size: var(--fs-xs); padding: 2px 4px; width: 100%; }

/* ══ Faceted filters sidebar ═════════════════════════════════════════════════ */
#act-sidebar { width: 200px; flex-shrink: 0; position: sticky; top: 12px; align-self: flex-start; }
#act-filters select { background: var(--bg2); color: var(--text); }
#act-filters label:hover span { color: var(--accent); }

/* ── Origin picker inline panel ──────────────────────────────────────────── */
#ea-origin-panel {
  border: 1px solid var(--border2); border-radius: var(--radius);
  padding: 8px; max-height: 200px; overflow-y: auto;
  background: var(--bg3);
}
#ea-origin-panel .origin-row {
  padding: 5px 8px; border-radius: var(--radius-sm); cursor: pointer;
  font-size: var(--fs-sm); display: flex; align-items: center; gap: 8px;
  transition: background .1s;
}
#ea-origin-panel .origin-row:hover { background: var(--accent-bg); color: var(--accent); }
#ea-origin-panel .origin-row.selected { background: var(--accent-bg); color: var(--accent); font-weight: 500; }

/* ─── Post-it colors ──────────────────────────────────────────────────────── */
/* Teintes inspirées des vraies couleurs Post-it®, volontairement moins
   saturées que les fluo — lisibles sur fond clair, texte foncé conservé. */
.postit-row {
  background: var(--pi-bg, #fef68a);
  border: 1px solid var(--pi-border, #f0dd6b) !important;
}
.postit-row[data-color="yellow"] { --pi-bg: var(--postit-yellow); --pi-border: var(--postit-yellow-border); }
.postit-row[data-color="orange"] { --pi-bg: var(--postit-orange); --pi-border: var(--postit-orange-border); }
.postit-row[data-color="pink"]   { --pi-bg: var(--postit-pink);   --pi-border: var(--postit-pink-border); }
.postit-row[data-color="blue"]   { --pi-bg: var(--postit-blue);   --pi-border: var(--postit-blue-border); }
.postit-row[data-color="green"]  { --pi-bg: var(--postit-green);  --pi-border: var(--postit-green-border); }

/* Petit picker de couleurs, intégré à la rangée */
.pi-color-picker {
  display: inline-flex; align-items: center; gap: 4px;
}
.pi-color-swatch {
  width: 18px; height: 18px; border-radius: var(--radius-full);
  border: 1.5px solid rgba(0, 0, 0, 0.12);
  cursor: pointer; padding: 0;
  transition: transform .08s, border-color .08s;
}
.pi-color-swatch:hover { transform: scale(1.15); }
.pi-color-swatch.selected { border-color: #1f2937; border-width: 2px; }
.pi-color-swatch[data-color="yellow"] { background: var(--postit-yellow); }
.pi-color-swatch[data-color="orange"] { background: var(--postit-orange); }
.pi-color-swatch[data-color="pink"]   { background: var(--postit-pink); }
.pi-color-swatch[data-color="blue"]   { background: var(--postit-blue); }
.pi-color-swatch[data-color="green"]  { background: var(--postit-green); }

/* Layout mobile de la barre de saisie post-it.
   Avant ce fix : input texte / date / couleurs / bouton sur une ligne flex-wrap,
   les couleurs étaient coincées entre date et bouton, peu accessibles au pouce.
   Après : sur mobile (≤640px), input texte sur sa ligne, couleurs sur leur ligne,
   puis date + bouton côte à côte.

   Note specificity : le `<input id="pi-desc">` a `style="flex:1;..."` posé inline
   en JS (= `flex:1 1 0%`). Inline bat tous les sélecteurs CSS, donc on doit
   utiliser !important sur flex-basis pour pouvoir l'override en mobile. */
@media (max-width: 640px) {
  #postit-entry-card #pi-desc {
    order: 1 !important;
    flex: 1 1 100% !important;
  }
  #postit-entry-card .pi-color-picker {
    order: 2 !important;
    flex: 1 1 100% !important;
    justify-content: flex-start;
    gap: 8px;
  }
  #postit-entry-card .pi-color-swatch {
    width: 28px; height: 28px;
  }
  #postit-entry-card #pi-date {
    order: 3 !important;
    flex: 1 1 auto !important;
  }
  #postit-entry-card #btn-pi-add {
    order: 4 !important;
  }
}

/* Mobile : layout des LIGNES de la liste post-it (différent de la barre
   de saisie ci-dessus). Avant : color picker + date + boutons sur une
   même ligne flex avec flex-shrink:0 → squeeze le libellé sur petit
   écran. Après : color picker AU-DESSUS de la ligne date+boutons.
   Le bloc .pi-actions passe en flex-direction column ; les boutons
   restent groupés en row dans .pi-buttons-row (pour rester côte à côte
   sur la 2e ligne). Demande user avril 2026, plusieurs tentatives
   précédentes avaient ciblé la mauvaise zone (#postit-entry-card). */
@media (max-width: 768px) {
  .postit-row .pi-actions {
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 6px !important;
  }
  .postit-row .pi-actions .pi-color-picker {
    /* Le picker reste en row (ses swatches côte à côte) ; l'ordre
       column du parent le place sur sa propre ligne automatiquement. */
    justify-content: flex-end;
  }
  .postit-row .pi-actions .pi-buttons-row {
    /* date + boutons restent en row, sur la 2e ligne du bloc actions. */
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   Mobile / responsive (≤768px)
   ═══════════════════════════════════════════════════════════════════════════
   Sidebar devient un drawer latéral déclenché par le bouton burger. Tout
   autre élément (#sidebar-toggle desktop, boutons d'action, etc.) garde
   son comportement habituel sur desktop. Au-dessus de 768px, ces règles
   ne s'appliquent pas — la sidebar reste fixe comme avant.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Burger button — caché par défaut, visible seulement en mobile. */
#burger-btn {
  display: none;
  background: transparent; border: none; cursor: pointer;
  padding: 6px; margin-right: 6px;
  color: var(--navy);
  align-items: center; justify-content: center;
}
#burger-btn svg { width: 24px; height: 24px; stroke: currentColor; fill: none; }

/* Overlay semi-transparent derrière le drawer. */
#sidebar-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: var(--z-overlay);
}

@media (max-width: 768px) {
  /* Layout : le sidebar devient un drawer absolu, le main prend toute la
     largeur disponible. */
  #shell { flex-direction: column; }

  #sidebar {
    position: fixed;
    top: 0; left: 0;
    width: 240px;
    height: 100vh;
    z-index: var(--z-drawer);
    transform: translateX(-100%);
    transition: transform .25s ease;
    overflow-y: auto;
  }
  #sidebar.drawer-open { transform: translateX(0); }

  /* Le bouton de collapse desktop n'a plus de sens ici : on le cache. */
  #sidebar-toggle { display: none; }

  /* Overlay visible quand drawer ouvert. */
  #sidebar-overlay.visible { display: block; }

  /* Burger visible en mobile. */
  #burger-btn { display: inline-flex; }

  /* Main utilise toute la largeur. */
  #main { width: 100%; }

  /* Header : plus compact. */
  #page-header {
    padding: 10px 14px !important;
    flex-wrap: wrap;
    gap: 8px;
  }
  #page-title {
    font-size: var(--fs-xl) !important;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #page-actions {
    order: 99;
    flex-basis: 100%;
    display: flex; gap: 6px; flex-wrap: wrap;
  }
  .header-right { flex-shrink: 0; }
  .header-logo-link { display: none; }
  .header-icon { display: none; }

  /* Cartes et contenu : padding réduit. */
  #content { padding: 12px !important; }
  .card { padding: 12px !important; }

  /* Tableaux : scroll horizontal pour éviter le squash. */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 480px; }

  /* Grilles de stats / rangées : passer en colonne. */
  .form-row { flex-direction: column; gap: 8px; }
  .stats-row { flex-direction: column; gap: 6px; }
  .stat-card { min-width: unset; width: 100%; }

  /* Modals plein écran sur mobile. */
  .modal-overlay { padding: 0 !important; }
  .modal {
    max-width: 100vw !important;
    width: 100% !important;
    max-height: 100vh !important;
    height: 100vh;
    border-radius: 0 !important;
    margin: 0 !important;
  }

  /* Bandeau "mode consultation" affiché sur les pages non-postit. */
  #readonly-banner {
    display: block;
    background: #fef3c7; color: #92400e;
    font-size: var(--fs-sm); font-weight: 500;
    padding: 6px 12px; text-align: center;
    border-bottom: 1px solid #fde68a;
  }
  body.is-postit-page #readonly-banner { display: none; }
}

@media (min-width: 769px) {
  /* Desktop : bandeau readonly toujours caché, overlay caché. */
  #readonly-banner { display: none; }
  #sidebar-overlay { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Mode mobile readonly
   ═══════════════════════════════════════════════════════════════════════════
   Intent : sur mobile l'app est consultative — création, modification,
   suppression et exports lourds n'ont pas de sens (clavier petit, fichiers
   peu utilisables sur téléphone). Tous les boutons primaires ET destructifs
   sont donc cachés via `body.mobile-readonly`.

   La page postits fait exception : elle reste éditable (cas d'usage debrief
   en réunion debout). D'où le `:not(.is-postit-page)`.

   Le sélecteur principal vise large par design :
   - `.btn-primary`  : tout bouton d'action principale (créer, exporter, ajouter)
   - `.btn-danger`   : tout bouton destructif (supprimer)
   - `[data-edit-*]` / `[data-del-*]` : icônes d'édition/suppression dans
     les tables (✎ et ✕) qui n'ont pas de classe .btn

   Pour ré-afficher un bouton spécifique en mode mobile, ajouter la classe
   `.mobile-show-when-ro` sur l'élément (échappatoire ciblée, à utiliser
   parcimonieusement).
*/
body.mobile-readonly:not(.is-postit-page) .mobile-hide-when-ro,
body.mobile-readonly:not(.is-postit-page) #content .btn-primary:not(.mobile-show-when-ro),
body.mobile-readonly:not(.is-postit-page) #content .btn-danger:not(.mobile-show-when-ro),
body.mobile-readonly:not(.is-postit-page) #content [data-edit-user],
body.mobile-readonly:not(.is-postit-page) #content [data-edit-group],
body.mobile-readonly:not(.is-postit-page) #content [data-edit-program],
body.mobile-readonly:not(.is-postit-page) #content [data-del-user],
body.mobile-readonly:not(.is-postit-page) #content [data-del-group],
body.mobile-readonly:not(.is-postit-page) #content [data-del-program],
body.mobile-readonly:not(.is-postit-page) #content [data-del-risk],
body.mobile-readonly:not(.is-postit-page) #content [data-del-action],
body.mobile-readonly:not(.is-postit-page) #page-actions .btn-primary:not(.mobile-show-when-ro),
body.mobile-readonly:not(.is-postit-page) #page-actions .btn-danger:not(.mobile-show-when-ro) {
  display: none !important;
}

/* Désactive les inputs/textarea dans le contenu en mode mobile readonly.
   On garde le visuel mais on empêche la modification.
   Exceptions explicites : champs de filtre ne modifient pas les données.
   Avril 2026 : les <select> ne sont PLUS désactivés ici. Ils servent
   majoritairement de filtres (dropdown projet sur stats, dropdown type
   d'action sur journal d'audit, etc.) et n'ont pas vocation à être
   bloqués. Si un select sert vraiment d'éditeur (modale d'action), il
   est de toute façon dans une modale qui n'a pas la classe
   mobile-readonly, donc reste fonctionnel. */
body.mobile-readonly:not(.is-postit-page) #content input:not([type="checkbox"]):not(.allow-mobile):not([type="search"]),
body.mobile-readonly:not(.is-postit-page) #content textarea:not(.allow-mobile),
body.mobile-readonly:not(.is-postit-page) #content .scale-btn {
  pointer-events: none;
  opacity: 0.75;
}

/* Mobile : cache TOUS les boutons d'export et d'import, peu importe la
   page. Ces actions n'ont pas de sens sur petit écran (fichiers peu
   utilisables, popup d'export trop large). Ciblage par id qui contient
   "export" ou "import", ou par class .btn-export / .btn-import si on
   les ajoute. Note : ces règles s'appliquent même sur les pages
   éditables (#postits, #actions) — l'édition reste possible mais les
   exports sont indisponibles. */
@media (max-width: 768px) {
  #page-actions [id*="export" i],
  #page-actions [id*="import" i],
  #page-actions [id^="btn-ei-"],
  #content [id*="export" i].btn,
  #content [id*="import" i].btn,
  #content [id^="btn-ei-"] {
    display: none !important;
  }
}

/* Volet de filtres de la liste des actions (avril 2026).
   - Pliable via bouton chevron : .collapsed cache .af-body, on garde
     le header avec le bouton pour deplier.
   - Mobile : la grid 4 colonnes (Mes actions / Perimetre / Filtres
     action / Etat) passe en 1 colonne pour empiler verticalement.
     La sous-grid de "Mes actions" (RACI 2x2 + Equipe) passe aussi
     en 1 colonne pour rester lisible. */
#act-filters.collapsed .af-body {
  display: none !important;
}
@media (max-width: 768px) {
  /* Grid principale 4 colonnes -> 1 colonne. Le sélecteur cible les
     div de grid à l'intérieur de #act-filters (style inline). */
  #act-filters .af-body > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  /* Sous-grid "Mes actions" qui était 1fr 1fr (RACI / Equipe) */
  #act-filters fieldset[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  /* Et la grid 2x2 RACI à l'intérieur reste en 2 colonnes (lisible
     comme petite grille de 4 cases meme en mobile). */
}

/* Modale d'édition d'action — responsive mobile.
   En desktop la modale a 3 colonnes (Dates / État / Origine) puis 2
   colonnes (Responsabilités / Notes). En mobile (≤768px) tout
   s'enchaîne verticalement pour rester lisible.
   Demande user avril 2026. */
@media (max-width: 768px) {
  .ea-row-1 {
    flex-wrap: wrap;
  }
  .ea-row-1 > div {
    width: 100% !important;
    flex: 1 1 100% !important;
  }
  .ea-row-3col {
    grid-template-columns: 1fr !important;
  }
  .ea-row-2col {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }
  /* La liste des notes peut être réduite en mobile pour ne pas
     occuper trop de place avant le bouton Enregistrer du footer. */
  #notes-list {
    max-height: 180px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Classes utilitaires (approche Tailwind-light)
   ═══════════════════════════════════════════════════════════════════════════
   Objectif : factoriser les patterns d'inline `style="..."` les plus courants
   dans les modules JS, pour préparer Phase 5 CSP nonces (qui exige zéro
   `style=` inline) et améliorer la maintenabilité.

   Convention : nom court, valeur unique, jamais d'override par défaut. */

/* Typographie */
.text-xs   { font-size: var(--fs-xs); }
.text-sm   { font-size: var(--fs-sm); }
.text-md   { font-size: var(--fs-md); }
.text-lg   { font-size: var(--fs-lg); }
.text-xl   { font-size: var(--fs-xl); }
.text-2xl  { font-size: var(--fs-2xl); }
.text-3xl  { font-size: var(--fs-3xl); }

.text-muted { color: var(--text3); }
.text-soft  { color: var(--text2); }
.text-mono  { font-family: var(--font-mono); }
.text-accent { color: var(--accent); }
.text-danger { color: var(--danger); }

.font-medium { font-weight: 500; }
.font-bold   { font-weight: 600; }

.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-nowrap { white-space: nowrap; }
.truncate {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 220px;
}

/* Layout — flexbox */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.items-end    { align-items: flex-end; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }

/* Espacement — marge */
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.ml-1 { margin-left: 4px; }
.ml-2 { margin-left: 8px; }
.ml-3 { margin-left: 12px; }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Espacement — padding */
.p-1 { padding: 4px; }
.p-2 { padding: 8px; }
.p-3 { padding: 12px; }
.p-4 { padding: 16px; }
.px-2 { padding-left: 8px; padding-right: 8px; }
.px-3 { padding-left: 12px; padding-right: 12px; }
.py-1 { padding-top: 4px; padding-bottom: 4px; }
.py-2 { padding-top: 8px; padding-bottom: 8px; }

/* Tailles */
.w-full { width: 100%; }

/* Visibilité */
.hidden { display: none !important; }
.invisible { visibility: hidden; }

/* Curseur */
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }

/* Surfaces */
.bg-card  { background: var(--bg2); }
.bg-muted { background: var(--bg3); }
.bg-accent-soft { background: var(--accent-bg); }

.rounded-sm { border-radius: var(--radius-sm); }
.rounded    { border-radius: var(--radius); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-pill { border-radius: var(--radius-pill); }
.rounded-full { border-radius: var(--radius-full); }

.bordered { border: 1px solid var(--border); }