/* =============================================================
   ADN Design System — Thème v2 "Swiss Editorial Fintech"
   ————————————————————————————————————————————————
   Dépend de : tokens.css
   Usage :
     <link rel="stylesheet" href="/adn-design-system/tokens.css">
     <link rel="stylesheet" href="/adn-design-system/adn-theme.css">
   ============================================================= */

/* ═══════════════════════════════════════════════════════════
   RESET + BASE
   ═══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  color: var(--text-primary);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";  /* Geist stylistic sets */
  text-rendering: optimizeLegibility;
}

/* Titres — Instrument Serif pour h1/h2 héros, sans pour petits */
h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--text-primary); }

h1 {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  font-style: italic;  /* signature éditoriale */
}
h2 {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-snug);
}
h3 {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
}
h4 { font-size: var(--text-md); font-weight: var(--fw-semi); }

p { margin: 0; }
a {
  color: var(--adn-green-deep);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--transition-base);
}
a:hover { background-size: 100% 1px; }

code, pre, .mono, .adn-mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
  font-feature-settings: "zero", "ss01";
}

::selection {
  background: var(--adn-green);
  color: var(--adn-anthracite);
}

/* Scrollbar discret warm */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--adn-stone-300);
  border-radius: var(--radius-full);
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--adn-stone-400);
  background-clip: content-box;
  border: 3px solid transparent;
}

/* ═══════════════════════════════════════════════════════════
   GRAIN NOISE — texture subtile sur fonds
   ═══════════════════════════════════════════════════════════ */
.adn-grain {
  position: relative;
}
.adn-grain::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain-noise);
  opacity: 0.5;
  pointer-events: none;
  mix-blend-mode: multiply;
  z-index: 0;
}
.adn-grain > * { position: relative; z-index: 1; }

/* ═══════════════════════════════════════════════════════════
   APP SHELL — sidebar sombre + main crème
   ═══════════════════════════════════════════════════════════ */
.adn-app {
  display: flex;
  min-height: 100vh;
  background: var(--bg-app);
}

/* ─── SIDEBAR ─── */
.adn-sidebar {
  width: var(--sidebar-width);
  flex: 0 0 var(--sidebar-width);
  background: var(--bg-sidebar);
  color: var(--text-inverse);
  display: flex;
  flex-direction: column;
  padding: var(--space-5) var(--space-4) var(--space-4);
  gap: var(--space-1);
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow-y: auto;
  border-right: 1px solid rgba(255,255,255,0.04);
}

.adn-sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-2) var(--space-4);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: var(--space-4);
}
.adn-sidebar-brand .mark {
  width: 36px; height: 36px;
  background: var(--adn-green);
  color: var(--adn-anthracite);
  display: grid; place-items: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 20px;
  font-weight: var(--fw-regular);
  border-radius: var(--radius-sm);
  letter-spacing: -0.04em;
  position: relative;
}
.adn-sidebar-brand .mark::after {
  content: "";
  position: absolute;
  top: -2px; right: -2px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--adn-green);
  box-shadow: 0 0 0 3px var(--adn-anthracite);
  animation: adn-pulse 2.4s ease-in-out infinite;
}
@keyframes adn-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.7); }
}
.adn-sidebar-brand .wordmark {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.adn-sidebar-brand .wordmark .name {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--fw-semi);
  color: var(--adn-cream);
  letter-spacing: var(--ls-snug);
}
.adn-sidebar-brand .wordmark .subtitle {
  font-size: var(--text-2xs);
  font-weight: var(--fw-medium);
  color: rgba(247, 243, 235, 0.45);
  text-transform: uppercase;
  letter-spacing: var(--ls-xwide);
  font-family: var(--font-mono);
}

.adn-sidebar-section {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-xwide);
  color: rgba(247, 243, 235, 0.35);
  padding: var(--space-4) var(--space-3) var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.adn-sidebar-section::before {
  content: "§";
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--adn-green);
  font-size: var(--text-sm);
  text-transform: none;
  letter-spacing: 0;
}

.adn-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: rgba(247, 243, 235, 0.65);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: all var(--transition-fast);
  background: transparent;
  border: 0;
  text-align: left;
  width: 100%;
  position: relative;
}
.adn-nav-item:hover {
  color: var(--adn-cream);
  background: rgba(255, 255, 255, 0.04);
}
.adn-nav-item.active {
  color: var(--adn-cream);
  background: rgba(197, 217, 48, 0.08);
  font-weight: var(--fw-semi);
}
.adn-nav-item.active::before {
  content: "";
  position: absolute;
  left: -4px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 20px;
  background: var(--adn-green);
  border-radius: var(--radius-full);
}
.adn-nav-item .count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: rgba(247, 243, 235, 0.4);
  font-variant-numeric: tabular-nums;
}
.adn-nav-item.active .count { color: var(--adn-green); }

/* ─── MAIN ─── */
.adn-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ─── TOPBAR ─── */
.adn-topbar {
  height: var(--topbar-height);
  background: var(--bg-topbar);
  border-bottom: 1px solid var(--border-hair);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-8);
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: color-mix(in srgb, var(--bg-topbar) 88%, transparent);
}
.adn-topbar .breadcrumb {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--ls-xwide);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.adn-topbar .breadcrumb .sep {
  color: var(--text-faint);
  font-family: var(--font-serif);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
}
.adn-topbar .breadcrumb strong {
  color: var(--text-primary);
  font-weight: var(--fw-semi);
  font-family: var(--font-sans);
  text-transform: none;
  letter-spacing: var(--ls-snug);
  font-size: var(--text-sm);
}
.adn-topbar-actions { display: flex; align-items: center; gap: var(--space-3); }
.adn-topbar-meta {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--ls-xwide);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.adn-topbar-meta::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--status-success);
  animation: adn-pulse 2.4s ease-in-out infinite;
}

/* ─── CONTENT ─── */
.adn-content {
  flex: 1;
  padding: var(--space-10) var(--space-8);
  max-width: var(--max-content);
  width: 100%;
  margin: 0 auto;
  animation: adn-fade-in 500ms var(--ease-out);
}

@keyframes adn-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════
   EDITORIAL — éléments de composition
   ═══════════════════════════════════════════════════════════ */

/* En-tête de page avec numéro d'article */
.adn-page-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-6);
  align-items: baseline;
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--border-hair);
  margin-bottom: var(--space-10);
}
.adn-page-head .issue {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--ls-xwide);
  padding-top: 10px;  /* aligne baseline avec h1 */
  white-space: nowrap;
}
.adn-page-head .issue::before {
  content: "Nº ";
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--adn-green-deep);
}
.adn-page-head .headline {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.adn-page-head .headline h1 {
  font-size: var(--text-4xl);
}
.adn-page-head .headline .kicker {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-xwide);
  color: var(--adn-green-deep);
}
.adn-page-head .headline .lede {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-md);
  color: var(--text-secondary);
  max-width: 62ch;
}

/* Section rule — ligne de séparation éditoriale */
.adn-rule {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-10) 0 var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-xwide);
  color: var(--text-muted);
}
.adn-rule::before {
  content: "";
  height: 1px;
  width: 32px;
  background: var(--adn-ink);
}
.adn-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-soft);
}
.adn-rule .num {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--adn-green-deep);
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--text-sm);
}

/* ═══════════════════════════════════════════════════════════
   SURFACES / CARDS
   ═══════════════════════════════════════════════════════════ */
.adn-surface,
.adn-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-hair);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  position: relative;
  transition: border-color var(--transition-fast), box-shadow var(--transition-base);
}
.adn-surface-hover:hover,
.adn-card-hover:hover {
  border-color: var(--border-soft);
  box-shadow: var(--shadow-card);
}
.adn-card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-hair);
}
.adn-card-title {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--fw-semi);
  color: var(--text-primary);
  letter-spacing: var(--ls-snug);
}
.adn-card-kicker {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-xwide);
  color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════
   HERO KPI — chiffres en Instrument Serif italic (signature)
   ═══════════════════════════════════════════════════════════ */
.adn-hero-kpi {
  background: var(--bg-surface);
  border: 1px solid var(--border-hair);
  border-radius: var(--radius-card);
  padding: var(--space-6) var(--space-6) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  position: relative;
  overflow: hidden;
  transition: border-color var(--transition-base), transform var(--transition-base);
}
.adn-hero-kpi:hover {
  border-color: var(--border-mid);
}
.adn-hero-kpi .label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-xwide);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.adn-hero-kpi .label .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.adn-hero-kpi .value {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
  font-size: var(--text-hero);
  line-height: 0.95;
  letter-spacing: var(--ls-tight);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
.adn-hero-kpi .value .unit {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: var(--text-lg);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  letter-spacing: var(--ls-snug);
}
.adn-hero-kpi .meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-muted);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-hair);
  margin-top: auto;
}
.adn-hero-kpi .delta {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-medium);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.adn-hero-kpi .delta.up   { color: var(--status-success); }
.adn-hero-kpi .delta.down { color: var(--status-danger); }
.adn-hero-kpi .delta.up::before   { content: "▲"; font-size: 9px; }
.adn-hero-kpi .delta.down::before { content: "▼"; font-size: 9px; }

/* Petit KPI (carte compacte) */
.adn-kpi {
  background: var(--bg-surface);
  border: 1px solid var(--border-hair);
  border-radius: var(--radius-card);
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border-left: 3px solid var(--accent);
  transition: border-color var(--transition-fast);
}
.adn-kpi.accent-success { border-left-color: var(--status-success); }
.adn-kpi.accent-warning { border-left-color: var(--status-warning); }
.adn-kpi.accent-danger  { border-left-color: var(--status-danger); }
.adn-kpi.accent-info    { border-left-color: var(--status-info); }
.adn-kpi.accent-neutral { border-left-color: var(--adn-stone-300); }

.adn-kpi-label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-xwide);
  color: var(--text-muted);
}
.adn-kpi-value {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
  font-size: var(--text-3xl);
  line-height: 1;
  letter-spacing: var(--ls-tight);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.adn-kpi-delta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
}
.adn-kpi-delta.up   { color: var(--status-success); }
.adn-kpi-delta.down { color: var(--status-danger); }

/* ═══════════════════════════════════════════════════════════
   GRIDS
   ═══════════════════════════════════════════════════════════ */
.adn-grid { display: grid; gap: var(--space-4); }
.adn-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.adn-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.adn-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.adn-grid.cols-auto { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
/* Grille éditoriale asymétrique : 1 hero grand + 3 petits */
.adn-grid.cols-hero {
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
}
@media (max-width: 1200px) {
  .adn-grid.cols-hero { grid-template-columns: repeat(2, 1fr); }
  .adn-grid.cols-4    { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .adn-grid.cols-2, .adn-grid.cols-3, .adn-grid.cols-4, .adn-grid.cols-hero { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════ */
.adn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0 var(--space-4);
  height: 36px;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  line-height: 1;
  letter-spacing: var(--ls-snug);
  position: relative;
  overflow: hidden;
}
.adn-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.adn-btn:active { transform: translateY(1px); }
.adn-btn:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

.adn-btn-primary {
  background: var(--adn-anthracite);
  color: var(--adn-cream);
  font-weight: var(--fw-semi);
}
.adn-btn-primary:hover {
  background: var(--adn-ink);
  box-shadow: inset 0 0 0 2px var(--adn-green);
}

.adn-btn-accent {
  background: var(--adn-green);
  color: var(--adn-anthracite);
  font-weight: var(--fw-semi);
}
.adn-btn-accent:hover {
  background: var(--adn-green-mid);
  color: var(--adn-cream);
}

.adn-btn-outline {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-mid);
}
.adn-btn-outline:hover {
  border-color: var(--adn-anthracite);
  background: var(--adn-stone-50);
}

.adn-btn-ghost {
  background: transparent;
  color: var(--text-secondary);
}
.adn-btn-ghost:hover {
  background: var(--adn-stone-100);
  color: var(--text-primary);
}

.adn-btn-danger {
  background: var(--adn-rust);
  color: var(--adn-cream);
  font-weight: var(--fw-semi);
}
.adn-btn-danger:hover { background: #9a3e23; }

.adn-btn-sm { height: 28px; padding: 0 var(--space-3); font-size: var(--text-xs); }
.adn-btn-lg { height: 44px; padding: 0 var(--space-5); font-size: var(--text-md); }

/* ═══════════════════════════════════════════════════════════
   BADGES (style éditorial — tracking wide + small caps)
   ═══════════════════════════════════════════════════════════ */
.adn-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-xwide);
  border-radius: var(--radius-xs);
  line-height: 1.4;
  border: 1px solid transparent;
}
.adn-badge::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.7;
}
.adn-badge-accent   { background: var(--adn-green-glow);  color: var(--adn-green-deep); border-color: var(--adn-green-glow); }
.adn-badge-success  { background: var(--adn-forest-bg);   color: var(--adn-forest);     border-color: rgba(45, 106, 79, 0.18); }
.adn-badge-warning  { background: var(--adn-amber-bg);    color: var(--adn-amber);      border-color: rgba(200, 135, 27, 0.22); }
.adn-badge-danger   { background: var(--adn-rust-bg);     color: var(--adn-rust);       border-color: rgba(184, 74, 43, 0.22); }
.adn-badge-info     { background: var(--adn-indigo-bg);   color: var(--adn-indigo);     border-color: rgba(57, 73, 171, 0.18); }
.adn-badge-neutral  { background: var(--adn-stone-100);   color: var(--adn-stone-600);  border-color: var(--adn-stone-200); }
.adn-badge-benin    { background: rgba(0, 135, 81, 0.10); color: var(--benin-green);    border-color: rgba(0, 135, 81, 0.20); }

/* Version sans pastille */
.adn-badge-plain::before { display: none; }

/* ═══════════════════════════════════════════════════════════
   TABLES — style journal financier (règles horizontales fines)
   ═══════════════════════════════════════════════════════════ */
.adn-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  background: var(--bg-surface);
  border: 1px solid var(--border-hair);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.adn-table thead th {
  background: var(--adn-stone-50);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-weight: var(--fw-medium);
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-soft);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-xwide);
  white-space: nowrap;
}
.adn-table tbody td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-hair);
  color: var(--text-primary);
  vertical-align: middle;
  transition: background var(--transition-fast);
}
.adn-table tbody tr:last-child td { border-bottom: 0; }
.adn-table tbody tr:hover td { background: var(--adn-stone-50); }
.adn-table td.num, .adn-table th.num {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-medium);
}
.adn-table td.num-serif {
  text-align: right;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-md);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

/* ═══════════════════════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════════════════════ */
.adn-input, .adn-select, .adn-textarea {
  width: 100%;
  padding: 0 var(--space-3);
  height: 38px;
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  transition: all var(--transition-fast);
}
.adn-textarea { padding: var(--space-2) var(--space-3); height: auto; line-height: 1.5; }
.adn-input:focus, .adn-select:focus, .adn-textarea:focus {
  outline: none;
  border-color: var(--adn-anthracite);
  box-shadow: var(--shadow-glow);
}
.adn-input::placeholder, .adn-textarea::placeholder {
  color: var(--text-faint);
  font-style: italic;
  font-family: var(--font-serif);
}
.adn-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  margin-bottom: var(--space-2);
  text-transform: uppercase;
  letter-spacing: var(--ls-xwide);
}

/* ═══════════════════════════════════════════════════════════
   TABS — ligne fine avec pointer animé
   ═══════════════════════════════════════════════════════════ */
.adn-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: var(--space-6);
  overflow-x: auto;
}
.adn-tab {
  background: transparent;
  border: 0;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap;
  letter-spacing: var(--ls-snug);
}
.adn-tab:hover { color: var(--text-primary); }
.adn-tab.active {
  color: var(--text-primary);
  border-bottom-color: var(--adn-anthracite);
  font-weight: var(--fw-semi);
}
.adn-tab .count {
  margin-left: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════
   ALERTS
   ═══════════════════════════════════════════════════════════ */
.adn-alert {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-card);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  border: 1px solid;
  background: var(--bg-surface);
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  position: relative;
}
.adn-alert .marker {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-lg);
  line-height: 1;
  padding-top: 2px;
  flex-shrink: 0;
}
.adn-alert-success { border-color: rgba(45, 106, 79, 0.24);  background: var(--adn-forest-bg); color: var(--adn-forest); }
.adn-alert-warning { border-color: rgba(200, 135, 27, 0.28); background: var(--adn-amber-bg);  color: var(--adn-amber); }
.adn-alert-danger  { border-color: rgba(184, 74, 43, 0.28);  background: var(--adn-rust-bg);   color: var(--adn-rust); }
.adn-alert-info    { border-color: rgba(57, 73, 171, 0.24);  background: var(--adn-indigo-bg); color: var(--adn-indigo); }
.adn-alert strong { color: inherit; }

/* ═══════════════════════════════════════════════════════════
   PULL QUOTE — citation éditoriale sur fond crème
   ═══════════════════════════════════════════════════════════ */
.adn-quote {
  background: var(--adn-cream);
  border-left: 3px solid var(--adn-anthracite);
  padding: var(--space-5) var(--space-6);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-xl);
  line-height: 1.4;
  color: var(--adn-ink);
  margin: var(--space-6) 0;
  max-width: 56ch;
}
.adn-quote cite {
  display: block;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-xwide);
  color: var(--text-muted);
  margin-top: var(--space-3);
}
.adn-quote cite::before { content: "— "; }

/* ═══════════════════════════════════════════════════════════
   UTILITAIRES
   ═══════════════════════════════════════════════════════════ */
.adn-stack  { display: flex; flex-direction: column; gap: var(--space-4); }
.adn-stack-sm { display: flex; flex-direction: column; gap: var(--space-2); }
.adn-stack-lg { display: flex; flex-direction: column; gap: var(--space-6); }
.adn-row    { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.adn-spread { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }

.adn-muted { color: var(--text-muted); }
.adn-faint { color: var(--text-faint); }
.adn-hint  { font-size: var(--text-xs); color: var(--text-muted); line-height: 1.5; }
.adn-num   { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.adn-serif { font-family: var(--font-serif); font-style: italic; }
.adn-smallcaps {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-xwide);
  color: var(--text-muted);
}

.adn-divider {
  height: 1px;
  background: var(--border-hair);
  margin: var(--space-6) 0;
  border: 0;
}
.adn-divider-strong {
  height: 1px;
  background: var(--adn-ink);
  margin: var(--space-8) 0;
  border: 0;
}

/* Signature logo bottom-right */
.adn-signature {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-xwide);
  color: var(--text-faint);
  text-align: center;
  padding: var(--space-10) 0 var(--space-6);
}
.adn-signature strong {
  color: var(--adn-green-deep);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--text-sm);
}