/* ============================================================================
   HDS Comparateur — Design Tokens
   Two directions: "encre" (editorial) and "foret" (tech-sober).
   Switch via [data-theme="encre"] or [data-theme="foret"] on :root.
   Dark mode via [data-mode="dark"] or prefers-color-scheme: dark.
   ========================================================================== */

/* ---------- Fonts (self-hostable, SIL OFL) ---------- */
/* In production, replace these CDN @imports with locally hosted WOFF2 — see fonts/README.md */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Serif:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

/* =============================================================================
   ROOT — shared scaffolding (spacing, radii, motion, layout)
   ============================================================================= */
:root {
  /* Spacing (4pt grid) */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-10: 48px;
  --space-12: 64px;
  --space-14: 80px;
  --space-16: 96px;
  --space-section: 96px;
  --space-page: 160px;

  /* Radii — minimal */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* Shadows — discreet, hierarchy comes from type+rule, not shadow */
  --shadow-1: 0 1px 2px rgba(15, 20, 30, .04);
  --shadow-2: 0 4px 12px rgba(15, 20, 30, .06), 0 1px 2px rgba(15, 20, 30, .04);
  --shadow-3: 0 12px 32px rgba(15, 20, 30, .08), 0 2px 6px rgba(15, 20, 30, .04);

  /* Motion */
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-slow: 320ms;
  --ease-out: cubic-bezier(.2, .0, .0, 1);
  --ease-in-out: cubic-bezier(.4, .0, .2, 1);

  /* Layout */
  --container-narrow: 720px;
  --container: 1200px;
  --container-wide: 1440px;
  --measure: 68ch;

  /* Type scale (clamps to mobile-first; ratio 1.200 body, 1.250 display) */
  --fs-xs:   12px;
  --fs-sm:   13px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  30px;
  --fs-3xl:  38px;
  --fs-4xl:  48px;
  --fs-5xl:  clamp(40px, 6vw, 64px);
  --fs-6xl:  clamp(48px, 8vw, 80px);

  /* Échelle headers révisée v5.3 — prompt 14 §P0-FIX-4 verbatim.
     Cible : h1 32-44px (et pas 64-72px qui débordait), h2 24-30px, h3 20-24px,
     body 16px / line-height 1.65. Audit L00 mesurait 72px home / 64px fiches → trop. */
  --fs-h1: clamp(2rem, 1.5rem + 1.5vw, 2.75rem);    /* 32→44 px */
  --fs-h2: clamp(1.5rem, 1.2rem + 0.8vw, 1.875rem); /* 24→30 px */
  --fs-h3: clamp(1.25rem, 1.05rem + 0.4vw, 1.5rem); /* 20→24 px */
  --fs-body: 1rem;                                  /* 16 px */
  --fs-small: 0.875rem;                             /* 14 px */
  --lh-body: 1.65;

  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-base:  1.55;
  --lh-loose: 1.75;

  --tracking-tight: -0.015em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-caps: 0.08em;
}

/* =============================================================================
   DIRECTION A — "Encre & Lin"  (editorial, serif display)
   ============================================================================= */
:root[data-theme="encre"] {
  /* Fonts */
  --font-display: "Newsreader", "Source Serif 4", Georgia, serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif:   "Newsreader", Georgia, serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Surfaces */
  --color-bg:           #F7F4ED; /* lin chaud */
  --color-bg-secondary: #FCFAF5;
  --color-bg-elevated:  #FFFFFF;
  --color-bg-inverse:   #1A1F2E;

  /* Foreground */
  --color-fg:           #1A1F2E; /* encre profonde */
  --color-fg-secondary: #3D4250;
  --color-fg-muted:     #5F6773; /* WCAG AA 4.5:1 sur --color-bg light */
  --color-fg-inverse:   #F7F4ED;

  /* Borders */
  --color-border:        #E5DDD0;
  --color-border-strong: #C9BFAC;
  --color-border-inverse:#2D3140;

  /* Brand / semantic */
  --color-primary:        #1E3A5F; /* bleu encre */
  --color-primary-hover:  #2A4A75;
  --color-primary-active: #16304F;
  --color-on-primary:     #F7F4ED;

  --color-accent:         #8C5A3E; /* terre cuite */
  --color-accent-hover:   #A06947;

  --color-success: #4F7548; /* vert mousse — certifié, vérifié */
  --color-warning: #B08A4E; /* ocre — partiel, en cours */
  --color-danger:  #9A3F3F; /* brique — défavorable */
  --color-info:    #4A6B8A; /* bleu fumée — note méthodo */

  --color-success-bg: #EDEFE7;
  --color-warning-bg: #F4ECDC;
  --color-danger-bg:  #F1E1E1;
  --color-info-bg:    #E5EBF2;

  /* Selection */
  --color-selection-bg: #1E3A5F;
  --color-selection-fg: #F7F4ED;
}

:root[data-theme="encre"][data-mode="dark"],
:root[data-theme="encre"].dark {
  --color-bg:           #15171E;
  --color-bg-secondary: #1B1E27;
  --color-bg-elevated:  #232631;
  --color-bg-inverse:   #F7F4ED;

  --color-fg:           #EDE7DA;
  --color-fg-secondary: #C5C0B3;
  --color-fg-muted:     #9C9885; /* WCAG AA 4.5:1 sur --color-bg dark */
  --color-fg-inverse:   #1A1F2E;

  --color-border:        #2D3140;
  --color-border-strong: #3F4555;
  --color-border-inverse:#C9BFAC;

  --color-primary:        #7BA5D1;
  --color-primary-hover:  #94B7DD;
  --color-primary-active: #6892C2;
  --color-on-primary:     #15171E;

  --color-accent:         #C99173;
  --color-accent-hover:   #D6A487;

  --color-success: #84A57E;
  --color-warning: #D5B47F;
  --color-danger:  #C97E7E;
  --color-info:    #8FA9C4;

  --color-success-bg: #1F2A20;
  --color-warning-bg: #2A2519;
  --color-danger-bg:  #2A1E1E;
  --color-info-bg:    #1C232C;

  --shadow-1: 0 0 0 1px rgba(255,255,255,.04);
  --shadow-2: 0 0 0 1px rgba(255,255,255,.06);
  --shadow-3: 0 0 0 1px rgba(255,255,255,.08);
}

/* =============================================================================
   DIRECTION B — "Ardoise clinique"  (medical slate, institutional, default)
   Bleu de Prusse / ardoise — évoque l'instrument médical, la signalétique
   hospitalière, l'institution. Tech-sober, Plex everywhere.
   ============================================================================= */
:root,
:root[data-theme="ardoise"] {
  /* Fonts */
  --font-display: "IBM Plex Sans", -apple-system, "Inter", sans-serif;
  --font-body:    "IBM Plex Sans", -apple-system, "Inter", sans-serif;
  --font-serif:   "IBM Plex Serif", Georgia, serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Surfaces — clinique, légèrement frais */
  --color-bg:           #F4F6F7; /* off-white clinique */
  --color-bg-secondary: #ECEFF1;
  --color-bg-elevated:  #FFFFFF;
  --color-bg-inverse:   #0F1A24;

  /* Foreground — ink froid */
  --color-fg:           #0F1A24; /* deep ink, légèrement bleuté */
  --color-fg-secondary: #37424E;
  --color-fg-muted:     #5C6670; /* WCAG AA 4.5:1 sur --color-bg ardoise light */
  --color-fg-inverse:   #F4F6F7;

  /* Borders */
  --color-border:        #DDE1E4;
  --color-border-strong: #BAC0C5;
  --color-border-inverse:#252C33;

  /* Brand / semantic */
  --color-primary:        #1B3A52; /* bleu de Prusse / ardoise médicale */
  --color-primary-hover:  #264E6B;
  --color-primary-active: #142E42;
  --color-on-primary:     #F4F6F7;

  --color-accent:         #835836; /* cuivre hospitalier, sobre — WCAG AA 4.5:1 sur bg light */
  --color-accent-hover:   #985F3B;

  --color-success: #3F6B4D; /* vert pharmacie */
  --color-warning: #8A6420; /* ambre — WCAG AA 4.5:1 (texte sur bg clair + blanc sur badge) */
  --color-danger:  #9A463C; /* brique clinique */
  --color-info:    #3A6B8A; /* bleu radiologie */

  --color-success-bg: #E8EEEA;
  --color-warning-bg: #F2EBD9;
  --color-danger-bg:  #F0E1DE;
  --color-info-bg:    #E2E9EF;

  /* Accents médicaux (rétro-correction v1.9) */
  --color-accent-medical:    #4C7A2C; /* vert sauge — santé, HDS — WCAG AA 4.5:1 sur bg light */
  --color-accent-medical-bg: #ECF1E3;
  --color-accent-warm:       #8C5807; /* ambre — en cours, partiel — WCAG AA 4.5:1 sur bg light */

  /* Neutre (état "non concerné" / "non documenté") */
  --color-neutral:        #6B7480;
  --color-neutral-bg:     #ECEEF0;
  --color-text-muted:     #5C5750;

  --color-selection-bg: #1B3A52;
  --color-selection-fg: #F4F6F7;

  /* Alias pour composants — assure que les var() ne sont jamais undefined */
  --color-accent-primary:     var(--color-primary);
  --color-accent-primary-soft: var(--color-info-bg);
  --color-fg-primary:         var(--color-fg);
}

:root[data-mode="dark"],
:root[data-theme="ardoise"][data-mode="dark"],
:root[data-theme="ardoise"].dark {
  /* Dark — salle de lecture radio, graphite légèrement bleuté */
  --color-bg:           #0E1418;
  --color-bg-secondary: #151B22;
  --color-bg-elevated:  #1C232B;
  --color-bg-inverse:   #F4F6F7;

  --color-fg:           #E4E6E8;
  --color-fg-secondary: #B8BDC2;
  --color-fg-muted:     #8C9298; /* WCAG AA 4.5:1 sur --color-bg ardoise dark */
  --color-fg-inverse:   #0F1A24;

  --color-border:        #252C33;
  --color-border-strong: #3A434B;
  --color-border-inverse:#BAC0C5;

  --color-primary:        #83AECF; /* bleu clinique clair */
  --color-primary-hover:  #9AC0DC;
  --color-primary-active: #6F9DBE;
  --color-on-primary:     #0E1418;

  --color-accent:         #C49773;
  --color-accent-hover:   #D2A684;

  --color-success: #7DAB87;
  --color-warning: #D0A971;
  --color-danger:  #C28278;
  --color-info:    #8FAFC8;

  --color-success-bg: #18221C;
  --color-warning-bg: #251F17;
  --color-danger-bg:  #251B19;
  --color-info-bg:    #161E26;

  /* Accents médicaux (dark) */
  --color-accent-medical:    #7DA862;
  --color-accent-medical-bg: #1C2618;
  --color-accent-warm:       #E2A85C;

  /* Neutre (dark) */
  --color-neutral:        #8A9099;
  --color-neutral-bg:     #1F2429;
  --color-text-muted:     #9B9690;

  --shadow-1: 0 0 0 1px rgba(255,255,255,.04);
  --shadow-2: 0 0 0 1px rgba(255,255,255,.06);
  --shadow-3: 0 0 0 1px rgba(255,255,255,.08);
}

/* Auto dark via OS preference — Ardoise is the implicit default */
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]),
  :root[data-theme="ardoise"]:not([data-mode="light"]) {
    --color-bg:#0E1418; --color-bg-secondary:#151B22; --color-bg-elevated:#1C232B;
    --color-fg:#E4E6E8; --color-fg-secondary:#B8BDC2; --color-fg-muted:#8C9298;
    --color-border:#252C33; --color-border-strong:#3A434B;
    --color-primary:#83AECF; --color-primary-hover:#9AC0DC; --color-on-primary:#0E1418;
    --color-accent:#C49773;
    --color-success:#7DAB87; --color-warning:#D0A971; --color-danger:#C28278; --color-info:#8FAFC8;
    --color-success-bg:#18221C; --color-warning-bg:#251F17; --color-danger-bg:#251B19; --color-info-bg:#161E26;
  }
  :root[data-theme="encre"]:not([data-mode="light"]) {
    --color-bg:#15171E; --color-bg-secondary:#1B1E27; --color-bg-elevated:#232631;
    --color-fg:#EDE7DA; --color-fg-secondary:#C5C0B3; --color-fg-muted:#9C9885;
    --color-border:#2D3140; --color-border-strong:#3F4555;
    --color-primary:#7BA5D1; --color-primary-hover:#94B7DD; --color-on-primary:#15171E;
    --color-accent:#C99173;
    --color-success:#84A57E; --color-warning:#D5B47F; --color-danger:#C97E7E; --color-info:#8FA9C4;
    --color-success-bg:#1F2A20; --color-warning-bg:#2A2519; --color-danger-bg:#2A1E1E; --color-info-bg:#1C232C;
  }
}

/* =============================================================================
   ELEMENT DEFAULTS (semantic CSS — uses tokens above)
   ============================================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-fg);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
  text-rendering: optimizeLegibility;
}

::selection { background: var(--color-selection-bg); color: var(--color-selection-fg); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  color: var(--color-fg);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  margin-block: 1.5rem 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  margin-block: 2rem 0.75rem;
  font-weight: 650;
}
h3 {
  font-size: var(--fs-h3);
  line-height: 1.3;
  margin-block: 1.5rem 0.5rem;
  font-weight: 600;
}
h4 { font-size: var(--fs-xl);  font-weight: 600; line-height: var(--lh-snug); }
h5 { font-size: var(--fs-lg);  font-weight: 600; line-height: var(--lh-snug); }
h6 {
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--color-fg-muted); font-family: var(--font-body);
}

p { margin: 0 0 var(--space-4); text-wrap: pretty; max-width: var(--measure); }

a {
  color: var(--color-fg);
  text-decoration: underline;
  text-decoration-color: var(--color-border-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--motion-fast) var(--ease-out);
}
a:hover { text-decoration-color: var(--color-primary); }
a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

small { font-size: var(--fs-sm); color: var(--color-fg-secondary); }

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}
code {
  background: var(--color-bg-secondary);
  padding: 1px 4px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}

hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: var(--space-7) 0;
}

blockquote {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-border-strong);
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-fg-secondary);
}

ul, ol { padding-left: var(--space-5); margin: 0 0 var(--space-4); }
li { margin-bottom: var(--space-1); }

/* =============================================================================
   .prose — pages éditoriales (max-width pour lecture confortable)
   ============================================================================= */
.prose {
  max-width: 72ch;                           /* ≈ 65-75 caractères par ligne */
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
  padding-block: clamp(1.5rem, 4vw, 3rem);
}
.prose h1 { font-size: clamp(32px, 5vw, 48px); margin-bottom: var(--space-4); }
.prose h2 { font-size: clamp(22px, 3.5vw, 30px); margin-top: var(--space-7); margin-bottom: var(--space-3); }
.prose h3 { font-size: clamp(18px, 2.5vw, 22px); margin-top: var(--space-5); margin-bottom: var(--space-2); }
.prose p, .prose li { line-height: var(--lh-base); }
.prose .lead { font-size: var(--fs-lg); color: var(--color-fg-secondary); margin-bottom: var(--space-5); }

/* Blocs autorisés à déborder à pleine largeur dans un .prose */
.prose > .full-bleed,
.prose .full-bleed {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  max-width: 100vw;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

/* Tables dans .prose : autorisent le scroll horizontal interne */
.prose table { width: 100%; max-width: 100%; }

/* Conteneurs imbriqués dans .prose : pas de double padding inline */
.prose .container,
.prose .container-narrow {
  padding-inline: 0;
  max-width: none;
}

/* Utility classes */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-fg-muted);
}
.mono { font-family: var(--font-mono); font-feature-settings: "tnum"; }
.tabular { font-variant-numeric: tabular-nums; }
.lead { font-size: var(--fs-lg); line-height: var(--lh-snug); color: var(--color-fg-secondary); }
.measure { max-width: var(--measure); }
.rule { border-top: 1px solid var(--color-border-strong); }
/* App-specific layout on top of the design tokens.
   Tokens come from ../../colors_and_type.css */

.app-shell { min-height: 100vh; background: var(--color-bg); color: var(--color-fg); }
.container { max-width: var(--container); margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); }

/* ---------- Kit control bar (not part of the brand) ---------- */
.kit-bar {
  position: sticky; top: 0; z-index: 50;
  background: var(--color-bg-elevated);
  border-bottom: 1px solid var(--color-border);
  display: flex; align-items: center; gap: 20px;
  padding: 10px clamp(20px, 4vw, 40px);
  font-family: var(--font-mono); font-size: 11px;
  color: var(--color-fg-muted);
  letter-spacing: .04em;
}
.kit-bar .kit-label { text-transform: uppercase; letter-spacing: .08em; }
.kit-bar .kit-group { display: inline-flex; align-items: center; gap: 4px; }
.kit-bar button {
  background: transparent; border: 1px solid var(--color-border);
  border-radius: 2px; padding: 5px 10px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--color-fg-secondary);
  cursor: pointer; transition: all var(--motion-fast) var(--ease-out);
  letter-spacing: .02em;
  white-space: nowrap;
}
.kit-bar button:hover { border-color: var(--color-border-strong); color: var(--color-fg); }
.kit-bar button.active { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
.kit-bar .sep { color: var(--color-border-strong); }

/* ---------- Site header ---------- */
.site-header {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}
.site-header-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 0; gap: 32px;
}
.site-header-right {
  display: flex; align-items: center; gap: 18px;
}
.site-header .brand { display: flex; align-items: center; gap: 0; text-decoration: none; color: var(--color-fg); }
.site-header .brand img { height: 40px; width: auto; color: currentColor; }
.site-header nav { display: flex; gap: 28px; align-items: center; }
.site-header nav a {
  text-decoration: none; color: var(--color-fg-secondary);
  font-size: 14px; font-weight: 500;
  transition: color var(--motion-fast) var(--ease-out);
  white-space: nowrap;
}
.site-header nav a:hover { color: var(--color-fg); }
.site-header .search-trigger {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 12px; border: 1px solid var(--color-border-strong);
  border-radius: 4px; background: var(--color-bg-secondary);
  color: var(--color-fg-muted); font-size: 13px; font-family: var(--font-body);
  min-width: 260px; cursor: pointer;
  white-space: nowrap;
}
.site-header .search-trigger .kbd {
  font-family: var(--font-mono); font-size: 11px;
  border: 1px solid var(--color-border); border-radius: 2px; padding: 1px 5px;
  background: var(--color-bg-elevated); margin-left: auto;
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--color-border-strong);
  padding: 56px 0 36px; margin-top: 96px;
  background: var(--color-bg-secondary);
}
.site-footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px;
}
.site-footer h5,
.site-footer .footer-col-title {
  font-family: var(--font-body); font-size: 11px;
  font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-fg-muted); margin: 0 0 14px;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.site-footer li a { font-size: 14px; color: var(--color-fg-secondary); text-decoration: none; }
.site-footer li a:hover { color: var(--color-fg); }
.site-footer .legal {
  border-top: 1px solid var(--color-border); padding-top: 24px; margin-top: 40px;
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 12px; color: var(--color-fg-secondary); letter-spacing: .02em;
}
.site-footer .legal a { color: var(--color-fg); }
.site-footer .legal p { margin: 0; max-width: 60ch; }
.site-footer .legal .last-update {
  font-family: var(--font-sans); font-size: 13px;
  color: var(--color-fg-secondary); width: 100%;
  padding-bottom: 12px; margin-bottom: 8px;
  border-bottom: 1px dashed var(--color-border);
  max-width: none;
}
.site-footer .legal .last-update strong { color: var(--color-fg); }
.site-footer .legal .last-update a { color: var(--color-accent-primary); text-decoration: none; }
.site-footer .legal .last-update a:hover { text-decoration: underline; }

/* ---------- Hero (home) ---------- */
.hero { padding: 80px 0 64px; border-bottom: 1px solid var(--color-border); }
.hero-eyebrow {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--color-fg-muted);
  display: flex; align-items: center; gap: 12px; margin-bottom: 28px;
  white-space: nowrap;
}
.hero-eyebrow::before {
  content: ""; width: 32px; height: 1px; background: var(--color-fg-muted);
}
.hero h1 {
  font-size: var(--fs-h1); line-height: var(--lh-tight);
  letter-spacing: -0.025em; font-weight: 500;
  max-width: 18ch; margin-bottom: 28px;
}
.hero .lead {
  font-size: 19px; line-height: 1.5; color: var(--color-fg-secondary);
  max-width: 56ch; margin-bottom: 36px;
}
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

/* ---------- Buttons ---------- */
.btn {
  font-family: var(--font-body); font-size: 14px; font-weight: 500;
  padding: 11px 20px; border-radius: 4px; border: 1px solid transparent;
  cursor: pointer; transition: background var(--motion-base) var(--ease-out), border-color var(--motion-base) var(--ease-out), color var(--motion-base) var(--ease-out);
  line-height: 1; display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-secondary { background: transparent; color: var(--color-fg); border-color: var(--color-border-strong); }
.btn-secondary:hover { background: var(--color-bg-secondary); border-color: var(--color-fg-muted); }
.btn-ghost { background: transparent; color: var(--color-fg); }
.btn-ghost:hover { background: var(--color-bg-secondary); }

/* ---------- Stat strip ---------- */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border-top: 1px solid var(--color-border-strong);
  border-bottom: 1px solid var(--color-border-strong);
}
.stat { padding: 28px 24px; border-right: 1px solid var(--color-border); }
.stat:last-child { border-right: 0; }
.stat .figure {
  font-family: var(--font-display); font-size: clamp(40px, 5vw, 56px);
  font-weight: 500; line-height: 1; letter-spacing: -0.025em;
  color: var(--color-fg); font-feature-settings: "tnum";
}
.stat .unit {
  font-family: var(--font-mono); font-size: 13px;
  color: var(--color-fg-muted); margin-left: 6px; letter-spacing: .04em;
}
.stat .label { font-size: 14px; color: var(--color-fg-secondary); margin-top: 12px; line-height: 1.4; }
.stat .src { font-family: var(--font-mono); font-size: 10px; color: var(--color-fg-muted); margin-top: 8px; letter-spacing: .04em; text-transform: uppercase; }

/* ---------- Section ---------- */
.section { padding: 88px 0; }
.section + .section { border-top: 1px solid var(--color-border); }
.section-header { margin-bottom: 48px; }
.section-eyebrow {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-fg-muted); margin-bottom: 12px;
  display: flex; align-items: center; gap: 12px;
}
.section-eyebrow::before {
  content: counter(section, decimal-leading-zero);
  font-family: var(--font-mono); color: var(--color-accent);
  letter-spacing: .02em;
}
body { counter-reset: section; }
.section { counter-increment: section; }
.section h2 {
  font-size: clamp(28px, 3.5vw, 44px); letter-spacing: -0.02em;
  max-width: 22ch; line-height: 1.1; margin: 0;
}
.section-intro { color: var(--color-fg-secondary); max-width: 56ch; margin-top: 16px; font-size: 17px; line-height: 1.55; }

/* ---------- Profile card grid (home) ---------- */
.profile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); }
.profile-card {
  padding: 28px 24px 24px;
  background: var(--color-bg);
  display: flex; flex-direction: column; gap: 12px;
  transition: background var(--motion-base) var(--ease-out);
  text-decoration: none; color: inherit; cursor: pointer;
  min-height: 200px;
}
.profile-card:hover { background: var(--color-bg-elevated); }
.profile-card .icon { width: 28px; height: 28px; color: var(--color-primary); }
.profile-card h3 {
  font-family: var(--font-display); font-size: 22px; font-weight: 500;
  margin: 0; letter-spacing: -0.015em;
}
.profile-card .desc { font-size: 13px; color: var(--color-fg-secondary); line-height: 1.45; margin: 0; }
.profile-card .count {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--color-fg-muted);
  margin-top: auto; padding-top: 14px;
  display: flex; align-items: center; gap: 8px;
}
.profile-card .count::after { content: "→"; margin-left: auto; transition: transform var(--motion-base) var(--ease-out); }
.profile-card:hover .count::after { transform: translateX(4px); }

/* ---------- Theme cards (themes block on home) ---------- */
.theme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.theme-card {
  border: 1px solid var(--color-border); border-radius: 4px;
  padding: 24px; background: var(--color-bg-elevated);
  display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: inherit;
  transition: border-color var(--motion-base) var(--ease-out);
}
.theme-card:hover { border-color: var(--color-border-strong); }
.theme-card .tag {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--color-accent);
}
.theme-card h4, .theme-card h3 { font-family: var(--font-display); font-size: 20px; font-weight: 500; margin: 0; letter-spacing: -0.01em; line-height: 1.25; }
.theme-card .desc { font-size: 13px; color: var(--color-fg-secondary); line-height: 1.5; }
.theme-card .meta { font-family: var(--font-mono); font-size: 11px; color: var(--color-fg-muted); margin-top: auto; padding-top: 8px; }

/* ---------- Methodology block ---------- */
.method-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; }
.method-item { display: flex; flex-direction: column; gap: 12px; }
.method-item .step { font-family: var(--font-display); font-size: 36px; font-weight: 500; color: var(--color-accent); line-height: 1; }
.method-item h4 { margin: 0; font-family: var(--font-display); font-size: 22px; font-weight: 500; letter-spacing: -0.01em; }
.method-item p { margin: 0; color: var(--color-fg-secondary); font-size: 14px; line-height: 1.55; max-width: 40ch; }

/* ---------- Hebergeur fiche specific ---------- */
.fiche-header {
  padding: 56px 0 40px; border-bottom: 1px solid var(--color-border-strong);
}
.fiche-eyebrow {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-fg-muted); margin-bottom: 16px;
  display: flex; gap: 12px; align-items: center;
  flex-wrap: wrap;
}
.fiche-eyebrow a, .fiche-eyebrow > span { white-space: nowrap; }
.fiche-eyebrow a { color: var(--color-fg-secondary); text-decoration: none; }
.fiche-eyebrow .sep { color: var(--color-border-strong); }
.fiche-header h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: -0.025em; margin: 0; }
.fiche-header .subtitle {
  font-family: var(--font-body); font-size: 17px; font-weight: 400;
  color: var(--color-fg-secondary); margin-top: 10px; max-width: 60ch;
}
.fiche-header .juridique {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  font-family: var(--font-mono); font-size: 13px; color: var(--color-fg-secondary);
  margin-top: 24px;
}
.fiche-header .juridique > span { white-space: nowrap; }
.fiche-header .juridique b { color: var(--color-fg); font-weight: 500; }

.fiche-body { display: grid; grid-template-columns: 260px 1fr; gap: 64px; padding: 56px 0; }
.fiche-toc {
  position: sticky; top: 64px; align-self: start;
  border-left: 1px solid var(--color-border); padding-left: 18px;
  font-family: var(--font-body); font-size: 13px;
  display: flex; flex-direction: column; gap: 10px;
}
.fiche-toc .toc-eyebrow {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--color-fg-muted); margin-bottom: 4px;
}
.fiche-toc a { text-decoration: none; color: var(--color-fg-secondary); }
.fiche-toc a:hover { color: var(--color-fg); }
.fiche-toc a.current { color: var(--color-primary); font-weight: 500; }

.fiche-section { padding: 0 0 64px; }
.fiche-section + .fiche-section { border-top: 1px solid var(--color-border); padding-top: 48px; }
.fiche-section h2 {
  font-family: var(--font-display); font-size: 30px; font-weight: 500;
  letter-spacing: -0.015em; margin: 0 0 28px;
}
.fiche-section h2::before {
  content: counter(fiche, decimal-leading-zero) "  ";
  font-family: var(--font-mono); font-size: 14px; color: var(--color-accent);
  letter-spacing: .08em; vertical-align: 4px; font-weight: 600;
  display: inline-block; margin-right: 12px;
}
.fiche-body { counter-reset: fiche; }
.fiche-section { counter-increment: fiche; }

/* Critères matrix */
.crit-group { margin-bottom: 32px; }
.crit-group h3 {
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--color-fg-muted);
  margin: 0 0 12px;
}
.crit-row {
  display: grid; grid-template-columns: 1fr auto 120px;
  align-items: baseline; gap: 24px;
  padding: 12px 0; border-bottom: 1px solid var(--color-border);
}
.crit-row:last-child { border-bottom: 0; }
.crit-row .name { font-size: 14.5px; color: var(--color-fg); }
.crit-row .name small { display: block; font-size: 12px; color: var(--color-fg-muted); margin-top: 2px; }
.crit-row .status {
  font-family: var(--font-mono); font-size: 12px;
  display: inline-flex; align-items: center; gap: 7px; letter-spacing: .02em;
  color: var(--color-fg-secondary);
}
.crit-row .status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-fg-muted); }
.crit-row.ok .status { color: var(--color-success); }
.crit-row.ok .status .dot { background: var(--color-success); }
.crit-row.warn .status { color: var(--color-warning); }
.crit-row.warn .status .dot { background: var(--color-warning); }
.crit-row.no .status { color: var(--color-danger); }
.crit-row.no .status .dot { background: var(--color-danger); }
.crit-row.na .status { color: var(--color-fg-muted); }
.crit-row .src { font-family: var(--font-mono); font-size: 11px; color: var(--color-fg-muted); text-align: right; }
.crit-row .src a { color: inherit; }

/* Datacenter list */
.dc-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--color-border); }
.dc-row {
  display: grid; grid-template-columns: auto 1fr auto; gap: 14px;
  align-items: center;
  padding: 14px 0; border-bottom: 1px solid var(--color-border);
}
.dc-row .num { font-family: var(--font-mono); font-size: 10px; color: var(--color-fg-muted); width: 24px; letter-spacing: .08em; }
.dc-row .name { font-size: 14px; color: var(--color-fg); }
.dc-row .name small { display: block; color: var(--color-fg-muted); font-size: 12px; margin-top: 2px; }
.dc-row .city { font-family: var(--font-mono); font-size: 12px; color: var(--color-fg-secondary); letter-spacing: .02em; }

/* Audit trail */
.audit { font-family: var(--font-mono); font-size: 12px; color: var(--color-fg-secondary); }
.audit-row { display: grid; grid-template-columns: 110px 1fr 90px; gap: 16px; padding: 6px 0; border-bottom: 1px solid var(--color-border); }
.audit-row .date { color: var(--color-fg-muted); letter-spacing: .02em; }
.audit-row .url a { color: var(--color-fg-secondary); text-decoration: underline; text-decoration-color: var(--color-border); }
.audit-row .url a:hover { text-decoration-color: var(--color-primary); }
.audit-row .status { color: var(--color-success); }
.audit-row .status.warn { color: var(--color-warning); }

/* ---------- Tableau croisé ---------- */
.table-toolbar {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  padding: 20px 0 16px; border-bottom: 1px solid var(--color-border);
}
.search-input {
  flex: 1; min-width: 280px; max-width: 420px;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; border: 1px solid var(--color-border-strong); border-radius: 4px;
  background: var(--color-bg-elevated); color: var(--color-fg);
  font-family: var(--font-body); font-size: 14px;
}
.search-input input { all: unset; flex: 1; font: inherit; color: var(--color-fg); }
.search-input input::placeholder { color: var(--color-fg-muted); }
.search-input .kbd {
  font-family: var(--font-mono); font-size: 11px; color: var(--color-fg-muted);
  border: 1px solid var(--color-border); border-radius: 2px; padding: 1px 5px;
}
.filter-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border: 1px solid var(--color-border-strong);
  border-radius: 999px; background: var(--color-bg-elevated);
  font-family: var(--font-body); font-size: 13px; color: var(--color-fg);
  cursor: pointer; transition: all var(--motion-fast) var(--ease-out);
}
.filter-pill:hover { background: var(--color-bg-secondary); }
.filter-pill.active { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
.filter-pill .count { font-family: var(--font-mono); font-size: 11px; opacity: .65; }
.filter-pill .x { margin-left: 4px; font-family: var(--font-mono); }

.crit-table {
  width: 100%; border-collapse: collapse;
  font-size: 13px; margin-top: 24px;
}
.crit-table th, .crit-table td { padding: 12px 10px; text-align: left; vertical-align: middle; }
.crit-table thead th {
  font-family: var(--font-body); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--color-fg-muted);
  border-bottom: 1px solid var(--color-border-strong);
  background: var(--color-bg);
  position: sticky; top: 0;
}
.crit-table thead th.col-acteur { text-align: left; min-width: 220px; }
.crit-table thead th.col-c { text-align: center; min-width: 70px; }
.crit-table tbody tr { border-bottom: 1px solid var(--color-border); }
.crit-table tbody tr:hover { background: var(--color-bg-secondary); }
.crit-table .acteur { display: flex; align-items: center; gap: 12px; }
.crit-table .acteur .check {
  width: 16px; height: 16px; border: 1px solid var(--color-border-strong);
  border-radius: 2px; display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; flex: none;
}
.crit-table .acteur .check.on { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.crit-table .acteur .name { font-weight: 500; color: var(--color-fg); }
.crit-table .acteur .legal { font-family: var(--font-mono); font-size: 11px; color: var(--color-fg-muted); }
.crit-table td.col-c { text-align: center; font-family: var(--font-mono); font-size: 13px; }
.crit-table .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.crit-table .dot.ok { background: var(--color-success); }
.crit-table .dot.no { background: var(--color-fg-muted); opacity: .35; }
.crit-table .dot.warn { background: var(--color-warning); }
.crit-table .scope-cell { display: inline-flex; gap: 2px; }
  .crit-table .scope-cell .a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; border-radius: 2px;
    font-family: var(--font-mono); font-size: 9px; font-weight: 600;
    background: transparent; color: var(--color-fg-muted);
    border: 1px solid var(--color-border-strong);
  }
  .crit-table .scope-cell .a.on {
    background: var(--color-success); color: var(--color-on-primary);
    border-color: var(--color-success);
  }

.compare-bar {
  position: sticky; bottom: 0; z-index: 30;
  margin-top: 24px; padding: 14px 20px;
  background: var(--color-bg-inverse); color: var(--color-fg-inverse);
  border-radius: 4px;
  display: flex; align-items: center; gap: 16px;
}
.compare-bar .pill {
  font-family: var(--font-body); font-size: 13px;
  padding: 4px 10px 4px 10px; border-radius: 999px;
  /* JUSTIFIÉ : overlay translucide sur .compare-bar qui est toujours
     foncée (var(--color-bg-inverse), inversée light ET dark). Le blanc
     translucide est correct dans les deux thèmes — pas à thémer. */
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
  display: inline-flex; align-items: center; gap: 8px;
}
.compare-bar .pill .x { opacity: .6; cursor: pointer; }
.compare-bar .spacer { flex: 1; }
.compare-bar .cta {
  background: var(--color-bg-elevated); color: var(--color-fg);
  padding: 8px 16px; border-radius: 4px;
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
  border: 0; cursor: pointer;
}

/* ---------- Profil utilisateur (EHPAD) ---------- */
.profil-hero { padding: 64px 0 48px; border-bottom: 1px solid var(--color-border-strong); }
.profil-hero .eyebrow {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--color-fg-muted);
  display: flex; align-items: center; gap: 12px; margin-bottom: 24px;
}
.profil-hero .icon-block {
  width: 64px; height: 64px; border: 1px solid var(--color-border-strong);
  border-radius: 4px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-primary); margin-bottom: 28px;
}
.profil-hero .icon-block img { width: 36px; height: 36px; }
.profil-hero h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: -0.025em; margin: 0 0 20px; max-width: 22ch; }
.profil-hero .lead { font-size: 18px; color: var(--color-fg-secondary); max-width: 60ch; line-height: 1.55; }

.profil-section { padding: 64px 0; }
.profil-section + .profil-section { border-top: 1px solid var(--color-border); }
.profil-section h2 {
  font-family: var(--font-display); font-size: 30px; font-weight: 500;
  letter-spacing: -0.015em; margin: 0 0 24px;
}
.profil-row {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; padding: 28px 0;
  border-top: 1px solid var(--color-border); align-items: baseline;
}
.profil-row:last-child { border-bottom: 1px solid var(--color-border); }
.profil-row .name {
  font-family: var(--font-display); font-size: 22px; font-weight: 500;
  letter-spacing: -0.01em;
}
.profil-row .name a { text-decoration: none; color: inherit; }
.profil-row .name a:hover { color: var(--color-primary); }
.profil-row .meta { display: flex; gap: 14px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 11px; color: var(--color-fg-muted); letter-spacing: .04em; margin-top: 8px; text-transform: uppercase; }
.profil-row .reason { font-size: 14px; color: var(--color-fg-secondary); line-height: 1.55; }
.profil-row .reason .ok { color: var(--color-success); font-weight: 500; }
.profil-row .reason .no { color: var(--color-danger); font-weight: 500; }

/* ---------- Misc ---------- */
.hidden-screen { display: none; }
.visible-screen { display: block; }

/* Dark mode tweaks for kit-bar */
[data-mode="dark"] .kit-bar { background: var(--color-bg-secondary); }

/* =============================================================================
   RESPONSIVE — fix layout cassé v2.0 (prompt 10 problème 2)
   =============================================================================
   Aucun media query responsive n'existait dans le style.css v1.9. Conséquence :
   sur viewports <1024px, header tronqué, footer empilé n'importe comment,
   sections trop larges. Refonte minimale ci-dessous.
   ========================================================================== */

@media (max-width: 1023px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: 0; }
  .site-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .profile-grid, .theme-grid { grid-template-columns: repeat(2, 1fr); }
  .method-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .fiche-body { grid-template-columns: 1fr; gap: 32px; }
  .profil-row { grid-template-columns: 1fr; gap: 16px; padding: 20px 0; }
  .hero { padding: 56px 0 48px; }
  .section { padding: 64px 0; }
}

@media (max-width: 767px) {
  /* Header — bascule en burger menu */
  .site-header-inner {
    padding: 14px 0; gap: 16px;
    flex-wrap: wrap;
  }
  .site-header .brand img { height: 32px; }
  .site-header-right { gap: 8px; flex: 0 0 auto; order: 2; }

  /* Nav : on cache et on bascule en menu déroulant via le bouton burger */
  .site-header nav {
    order: 3;
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    gap: 4px;
    padding: 12px 0 8px;
    border-top: 1px solid var(--color-border);
    margin-top: 8px;
    width: 100%;
  }
  .site-header nav.is-open { display: flex; }
  .site-header nav a {
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--color-bg-elevated);
  }
  .site-header .nav-burger {
    display: inline-flex;
    background: transparent;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    color: var(--color-fg);
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    align-items: center;
    gap: 4px;
    order: 1;
  }
  .site-header .nav-burger::before {
    content: "≡";
    font-size: 18px;
    line-height: 1;
  }

  /* Stats / cartes */
  .stats { grid-template-columns: 1fr; }
  .stat { border-right: 0; border-bottom: 1px solid var(--color-border); }
  .stat:last-child { border-bottom: 0; }

  .site-footer { padding: 40px 0 28px; margin-top: 56px; }
  .site-footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .site-footer .legal { font-size: 10px; flex-direction: column; gap: 12px; }

  .profile-grid, .theme-grid { grid-template-columns: 1fr; }
  .method-grid { grid-template-columns: 1fr; gap: 24px; }

  .hero { padding: 40px 0 32px; }
  .hero h1 { font-size: var(--fs-h1); }
  .hero .lead { font-size: 16px; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { justify-content: center; }

  .section { padding: 48px 0; }
  .section h2 { font-size: clamp(24px, 6vw, 32px); }
  .section-intro { font-size: 15px; }

  .fiche-header { padding: 32px 0 24px; }
  .fiche-header h1 { font-size: var(--fs-h1); }

  /* Forcer aucun overflow sur les sections principales */
  .container, .container-narrow { padding: 0 16px; }
}

/* <abbr title> dans les headers de tableau : pas de souligné pointillé,
   on garde juste le cursor: help pour signaler le tooltip. v5.2 (prompt 12 §7.4.a). */
th abbr[title], thead abbr[title] {
  text-decoration: none;
  border-bottom: none;
  cursor: help;
}

/* Bouton burger : visible uniquement sur mobile */
.site-header .nav-burger { display: none; }

@media (max-width: 767px) {
  .site-header .nav-burger { display: inline-flex; }
}

/* =========================================================================
   FIX DARK MODE 2026-05-15 — logo + tableau croisé + toggle visibilité
   ========================================================================= */

/* Logo inline SVG — currentColor + variante dark = blanc cassé */
.logo-wordmark {
  color: var(--color-primary, #1B3A52);
  display: block;
  height: 38px;
  width: auto;
}
[data-mode="dark"] .logo-wordmark,
[data-theme="ardoise"][data-mode="dark"] .logo-wordmark,
[data-theme="encre"][data-mode="dark"] .logo-wordmark {
  color: #F5F5F4;
}

/* Toggle clair/sombre avec libellé textuel explicite */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--color-bg-secondary, #F5F5F4);
  border: 1px solid var(--color-border, #E7E5E4);
  border-radius: 6px;
  color: var(--color-fg, #1C1917);
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  transition: background 120ms, border-color 120ms;
}
.theme-toggle:hover {
  background: var(--color-bg-elevated, #FFFFFF);
  border-color: var(--color-primary, #1B3A52);
}
/* L'icône représente l'ACTION future, pas l'état actuel (convention
   UX Apple/Google/GitHub). Mode clair → 🌙 (aller vers sombre).
   Mode sombre → ☀ (aller vers clair). */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: inline-block; }
[data-mode="dark"] .theme-toggle .icon-sun { display: inline-block; }
[data-mode="dark"] .theme-toggle .icon-moon { display: none; }
.theme-toggle-label { font-weight: 500; line-height: 1; }

/* Tableau croisé en dark mode — visibilité cellules + sticky-col */
[data-mode="dark"] .ct th,
[data-mode="dark"] .ct td {
  background: var(--color-bg-elevated, #1C232B);
  color: var(--color-fg, #F5F5F4);
  border-color: var(--color-border, #44403C);
}
[data-mode="dark"] .ct thead th {
  background: var(--color-bg-secondary, #151B22);
  color: var(--color-fg, #F5F5F4);
}
[data-mode="dark"] .ct .sticky-col,
[data-mode="dark"] .ct .sticky-h,
[data-mode="dark"] .ct .sticky-sub {
  background: var(--color-bg-elevated, #1C232B);
  color: var(--color-fg, #F5F5F4);
}
[data-mode="dark"] .ct thead .sticky-col,
[data-mode="dark"] .ct .row-sub-h .sticky-sub {
  background: var(--color-bg-secondary, #151B22);
}
[data-mode="dark"] .ct a { color: #7DC1F0; }
[data-mode="dark"] .ct a:hover { color: #B7DCEA; }
[data-mode="dark"] .ct abbr {
  text-decoration-color: var(--color-border, #44403C);
  border-bottom-color: var(--color-border, #44403C);
}

/* =========================================================================
   FIX SCROLL TABLEAU 2026-05-15 — chips de navigation + fade + scrollbar
   ========================================================================= */

.ct-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 8px 0 4px; padding: 0;
}
.ct-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: var(--color-bg-secondary, #F5F5F4);
  color: var(--color-fg, #1C1917);
  border: 1px solid var(--color-border, #E7E5E4);
  border-radius: 999px;
  font-size: 12px; font-family: inherit; font-weight: 500;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms;
  white-space: nowrap;
}
.ct-chip:hover, .ct-chip:focus-visible {
  background: var(--color-accent-medical, #2F8F6F);
  color: #fff;
  border-color: var(--color-accent-medical, #2F8F6F);
  outline: none;
}
.ct-chip-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 4px;
  background: #45741F; /* vert HDS assombri — WCAG AA 4.5:1 vs #fff sur texte 10px bold */
  color: #fff;
  border-radius: 9px;
  font-size: 10px; font-weight: 700; line-height: 1;
}
.ct-chip:hover .ct-chip-count, .ct-chip:focus-visible .ct-chip-count {
  /* JUSTIFIÉ : inversion de hover voulue du badge compteur (base =
     vert plein + texte blanc → hover = blanc + texte vert). Petit
     pastille, contraste correct light ET dark. Pas à thémer. */
  background: #fff; color: var(--color-accent-medical, #2F8F6F);
}
[data-mode="dark"] .ct-chip {
  background: var(--color-bg-elevated, #1C232B);
  border-color: var(--color-border, #44403C);
  color: #F5F5F4;
}

.ct-scroll-hint {
  text-align: center;
  font-size: 12px;
  color: var(--color-fg-muted, #57534E);
  font-family: var(--font-mono, ui-monospace, monospace);
  margin: 8px 0; padding: 6px 12px;
  background: var(--color-bg-secondary, #F5F5F4);
  border-radius: 4px;
  letter-spacing: 0.02em;
}
[data-mode="dark"] .ct-scroll-hint {
  background: var(--color-bg-elevated, #1C232B);
  color: var(--color-fg-muted, #A8A29E);
}

.ct-scroll {
  position: relative;
  overflow-x: scroll;
  overflow-y: auto;
  max-height: 75vh;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--color-accent-medical, #2F8F6F) var(--color-bg-secondary, #F5F5F4);
}
.ct-scroll::-webkit-scrollbar { height: 12px; width: 8px; }
.ct-scroll::-webkit-scrollbar-track {
  background: var(--color-bg-secondary, #F5F5F4);
  border-radius: 6px;
}
.ct-scroll::-webkit-scrollbar-thumb {
  background: var(--color-accent-medical, #2F8F6F);
  border-radius: 6px;
  border: 2px solid var(--color-bg-secondary, #F5F5F4);
}
.ct-scroll::-webkit-scrollbar-thumb:hover { background: #267A5E; }

.ct-scroll::before, .ct-scroll::after {
  content: '';
  position: sticky;
  top: 0;
  height: 100%;
  width: 32px;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  transition: opacity 200ms;
}
.ct-scroll::before { left: 0; background: linear-gradient(90deg, var(--color-bg, #FFFFFF) 0%, transparent 100%); }
.ct-scroll::after  { right: 0; background: linear-gradient(270deg, var(--color-bg, #FFFFFF) 0%, transparent 100%); }
.ct-scroll.can-scroll-left::before { opacity: 1; }
.ct-scroll.can-scroll-right::after { opacity: 1; }

/* =========================================================================
   FIX DENSIFY TABLEAU 2026-05-15 (mission 21.txt) — fixes 1-5
   ========================================================================= */

/* FIX 1 — Activités HDS compactes ·23456 */
.ct-hds-compact {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  white-space: nowrap;
  min-width: 70px;
  text-align: center;
}
.hds-cov {
  display: inline-block;
  width: 0.95em;
  text-align: center;
  color: var(--color-fg-muted, #57534E);
  opacity: 0.4;
}
.hds-cov.on {
  color: var(--color-accent-medical, #2F8F6F);
  opacity: 1;
  font-weight: 600;
}
[data-mode="dark"] .hds-cov.on { color: #4FBE96; }

/* FIX 2 — Réf. compacte v2.0 */
.ct-ref {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.8125rem;
  color: var(--color-fg-muted, #57534E);
  text-align: center;
  min-width: 48px;
}

/* FIX 3 — Hébergeur 220px max + truncate + tooltip + ↗ */
.ct .sticky-col {
  width: 220px;
  max-width: 220px;
  min-width: 220px;
}
.ct .sticky-col a {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-fg, #1C1917);
  text-decoration: none;
}
.ct .sticky-col a:hover {
  color: var(--color-accent-medical, #2F8F6F);
  text-decoration: underline;
}
.ct .sticky-col a::after {
  content: "↗";
  font-size: 0.7em;
  color: var(--color-fg-muted, #57534E);
  margin-left: 0.25em;
  opacity: 0.5;
}
[data-mode="dark"] .ct .sticky-col a { color: #F5F5F4; }

/* FIX 4 — Densification lignes (padding réduit) */
.ct th, .ct td {
  padding: 3px 8px;
  font-size: 0.8125rem;
  line-height: 1.25;
}
.ct thead th { padding: 6px 8px; }
.ct tbody tr:hover td {
  background: var(--color-bg-secondary, #F5F5F4);
  transition: background 0.1s;
}
[data-mode="dark"] .ct tbody tr:hover td {
  background: var(--color-bg-secondary, #151B22);
}

/* FIX 5 — Type DC/INF/IAAS/OPS/BCK/FULL/MIX coloré */
.ct-type {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--color-bg-secondary, #F5F5F4);
  color: var(--color-fg-muted, #57534E);
  display: inline-block;
}
.ct-type[data-type="FULL"] { background: #DCFCE7; color: #166534; }
.ct-type[data-type="DC"]   { background: #DBEAFE; color: #1E40AF; }
.ct-type[data-type="DC+"]  { background: #DBEAFE; color: #1E40AF; }
.ct-type[data-type="IAAS"] { background: #E0E7FF; color: #4338CA; }
.ct-type[data-type="OPS"]  { background: #F3E8FF; color: #6B21A8; }
.ct-type[data-type="BCK"]  { background: #FEF3C7; color: #92400E; }
.ct-type[data-type="MIX"]  { background: var(--color-bg-secondary, #F5F5F4); color: var(--color-fg-muted, #57534E); }
[data-mode="dark"] .ct-type[data-type="FULL"] { background: #14532D; color: #BBF7D0; }
[data-mode="dark"] .ct-type[data-type="DC"], [data-mode="dark"] .ct-type[data-type="DC+"] { background: #1E3A8A; color: #BFDBFE; }
[data-mode="dark"] .ct-type[data-type="IAAS"] { background: #3730A3; color: #C7D2FE; }
[data-mode="dark"] .ct-type[data-type="OPS"]  { background: #581C87; color: #E9D5FF; }
[data-mode="dark"] .ct-type[data-type="BCK"]  { background: #78350F; color: #FED7AA; }