/* =============================================================
   Wesmart CRM — Design System 1.0.0 appliqué à la documentation
   Tokens repris de design-system.md / design-system.html
   ============================================================= */

/* ==================== 1. TOKENS ==================== */
:root {
  /* Bleu Klein — marque principale */
  --klein-50:#E6EAF5;  --klein-100:#C2CBE7; --klein-200:#8F9DD2;
  --klein-300:#5C6FBD;  --klein-400:#2941A8; --klein-500:#001F98;
  --klein-600:#001B85;  --klein-700:#00176F; --klein-800:#00135A;
  --klein-900:#000C3D;

  /* Orange — accent */
  --orange-50:#FFF4E6;  --orange-100:#FFE0B8; --orange-200:#FFC680;
  --orange-300:#FFAD4D; --orange-400:#FF9E26; --orange-500:#FF9500;
  --orange-600:#E68600; --orange-700:#BF7000; --orange-800:#995900;
  --orange-900:#663B00;

  /* Neutres */
  --white:#FFFFFF; --black:#000000;
  --neutral-50:#FAFAFA;  --neutral-100:#F4F4F5; --neutral-200:#E4E4E7;
  --neutral-300:#D4D4D8; --neutral-400:#A1A1AA; --neutral-500:#71717A;
  --neutral-600:#52525B; --neutral-700:#3F3F46; --neutral-800:#27272A;
  --neutral-900:#18181B;

  /* Sémantiques */
  --success-50:#ECFDF5; --success-500:#10B981; --success-700:#047857;
  --warning-50:#FFF4E6; --warning-500:#FF9500; --warning-700:#BF7000;
  --danger-50:#FEF2F2;  --danger-500:#EF4444;  --danger-700:#B91C1C;
  --info-50:#E6EAF5;    --info-500:#001F98;    --info-700:#00176F;

  /* Alias sémantiques */
  --bg-app:var(--neutral-50);
  --bg-surface:var(--white);
  --bg-surface-alt:var(--neutral-100);
  --text-primary:var(--neutral-900);
  --text-secondary:var(--neutral-700);
  --text-tertiary:var(--neutral-500);
  --text-disabled:var(--neutral-400);
  --text-inverse:var(--white);
  --text-brand:var(--klein-500);
  --text-accent:var(--orange-800);          /* AA 5.6:1 — cf. design-system.md §10.2 */
  --border-subtle:var(--neutral-200);
  --border-default:var(--neutral-300);
  --border-strong:var(--neutral-500);
  --border-brand:var(--klein-500);
  --focus-ring:var(--klein-400);

  /* Typographie */
  --font-sans:'Inter Variable','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,'JetBrains Mono','Fira Code',Menlo,monospace;

  /* Espacements — grille 4px */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px;
  --space-12:48px; --space-16:64px;

  /* Rayons */
  --radius-xs:2px; --radius-sm:4px;  --radius-md:8px;
  --radius-lg:12px; --radius-xl:16px; --radius-full:9999px;

  /* Élévations — teinte bleutée */
  --shadow-xs:0 1px 2px 0 rgba(0,31,152,.04);
  --shadow-sm:0 1px 3px 0 rgba(0,31,152,.08),0 1px 2px -1px rgba(0,31,152,.06);
  --shadow-md:0 4px 6px -1px rgba(0,31,152,.08),0 2px 4px -2px rgba(0,31,152,.06);
  --shadow-lg:0 10px 15px -3px rgba(0,31,152,.10),0 4px 6px -4px rgba(0,31,152,.06);
  --shadow-xl:0 20px 25px -5px rgba(0,31,152,.12),0 8px 10px -6px rgba(0,31,152,.08);
  --shadow-focus:0 0 0 3px rgba(41,65,168,.35);

  /* Motion */
  --duration-fast:120ms; --duration-base:200ms; --duration-slow:300ms;
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --ease-in-out:cubic-bezier(0.87,0,0.13,1);
}

/* ==================== 2. MAPPING DOCSIFY-THEMEABLE ==================== */
:root {
  --theme-color: var(--klein-500);

  --base-font-family: var(--font-sans);
  --base-font-size: 16px;
  --base-line-height: 1.5;
  --base-color: var(--text-secondary);
  --base-background-color: var(--bg-surface);

  --content-max-width: 56rem;

  --mono-font-family: var(--font-mono);

  /* Liens */
  --link-color: var(--text-brand);
  --link-color--hover: var(--klein-400);
  --link-text-decoration: none;
  --link-text-decoration--hover: underline;

  /* Sidebar — surface inverse (alias bg-inverse, § 3.2), comme dans l'application */
  --sidebar-width: 250px;
  --sidebar-background: var(--klein-500);
  --sidebar-border-color: var(--klein-700);
  --sidebar-border-width: 0 1px 0 0;
  --sidebar-padding: var(--space-6) var(--space-4);

  --sidebar-name-color: var(--text-inverse);
  --sidebar-name-font-size: 18px;
  --sidebar-name-font-weight: 700;
  --sidebar-name-text-align: left;

  --sidebar-nav-link-color: rgba(255, 255, 255, .78);
  --sidebar-nav-link-color--active: var(--text-inverse);
  /* Ces deux variables portent le fond de l'item actif : les régler ici évite
     de surenchérir sur la règle « pagelink » du thème, plus spécifique. */
  --sidebar-nav-link-background--active: rgba(255, 255, 255, .16);
  --sidebar-nav-pagelink-background--active: rgba(255, 255, 255, .16);
  --sidebar-nav-link-font-weight: 500;
  --sidebar-nav-link-font-weight--active: 600;
  --sidebar-nav-link-text-decoration: none;
  --sidebar-nav-link-text-decoration--hover: none;
  --sidebar-nav-link-text-decoration--active: none;
  --sidebar-nav-link-padding: var(--space-2) var(--space-3);
  --sidebar-nav-link-border-width: 0;
  /* Le thème applique une marge droite négative pour faire déborder le surlignage
     jusqu'au bord ; on la neutralise pour garder un item à coins arrondis. */
  --sidebar-nav-link-margin: 0;

  --sidebar-nav-strong-color: rgba(255, 255, 255, .55);
  --sidebar-nav-strong-font-size: 12px;
  --sidebar-nav-strong-font-weight: 600;
  --sidebar-nav-strong-text-transform: uppercase;
  --sidebar-nav-strong-margin: var(--space-6) 0 var(--space-2);
  --sidebar-nav-strong-padding: 0 var(--space-3);

  --sidebar-nav-indent: var(--space-2);

  /* Titres — échelle typographique du design system */
  --heading-color: var(--text-primary);
  --heading-h1-font-size: 30px;
  --heading-h1-font-weight: 700;
  --heading-h2-font-size: 24px;
  --heading-h2-font-weight: 600;
  --heading-h3-font-size: 20px;
  --heading-h3-font-weight: 600;
  --heading-h4-font-size: 18px;
  --heading-h4-font-weight: 600;

  --strong-color: var(--text-primary);
  --strong-font-weight: 600;

  /* Tableaux */
  --table-cell-border-color: var(--border-subtle);
  --table-cell-padding: var(--space-3) var(--space-4);
  --table-head-background: var(--neutral-50);
  --table-head-border-color: var(--border-subtle);
  --table-row-odd-background: transparent;
  --table-row-even-background: transparent;

  /* Code */
  --code-font-family: var(--font-mono);
  --code-inline-background: var(--neutral-100);
  --code-inline-color: var(--text-primary);
  --code-inline-border-radius: var(--radius-sm);

  /* Citations — rendues en composant Alert, cf. §5 */
  --blockquote-background: var(--klein-50);
  --blockquote-border-color: var(--klein-500);
  --blockquote-border-width: 0 0 0 4px;
  --blockquote-color: var(--text-secondary);
  --blockquote-font-style: normal;
  --blockquote-padding: var(--space-4);
  --blockquote-border-radius: var(--radius-md);

  /* Recherche */
  --search-input-background-color: var(--bg-surface);
  --search-input-border-color: var(--border-default);
  --search-input-border-radius: var(--radius-md);
  --search-input-padding: var(--space-2) var(--space-3);
  --search-result-heading-color: var(--text-primary);
  --search-result-item-color: var(--text-secondary);
  --search-result-keyword-background: var(--orange-100);
  --search-result-keyword-color: var(--orange-900);
  --search-result-keyword-border-radius: var(--radius-sm);
}

/* ==================== 3. BASE ==================== */
/* Le contenu repose sur le fond applicatif (neutral.50) ; les composants
   — tableaux, encadrés, captures, diagrammes — sont des surfaces posées
   dessus. C'est ce contraste qui donne du relief à la page. */
body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  color: var(--text-secondary);
  background: var(--bg-app);
}
.content, .markdown-section { background: transparent; }

.markdown-section {
  padding: var(--space-10) var(--space-8) var(--space-16);
}

.markdown-section h1 { line-height: 1.2; margin-bottom: var(--space-6); }
.markdown-section h2 {
  line-height: 1.35;
  margin-top: var(--space-12);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}
.markdown-section h3 { line-height: 1.35; margin-top: var(--space-8); }
.markdown-section h4 { line-height: 1.35; margin-top: var(--space-6); }
.markdown-section p  { color: var(--text-secondary); }

.markdown-section li { margin: var(--space-2) 0; }

.markdown-section hr {
  border: none;
  border-top: 1px solid var(--border-subtle);
  margin: var(--space-10) 0;
}

.markdown-section a:focus-visible,
.sidebar a:focus-visible,
.search input:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}

/* ==================== 4. SIDEBAR ==================== */
/* Surface inverse : fond Klein, texte blanc — le menu de la documentation
   reprend celui de l'application, ce qui aide le vendeur à se repérer. */
.sidebar {
  background: linear-gradient(180deg, var(--klein-500) 0%, var(--klein-700) 100%);
  box-shadow: none;
}

/* En-tête : le logo Wesmart, version blanche */
.sidebar > h1.app-name {
  margin: 0 0 var(--space-5);
  padding: 0 var(--space-3) var(--space-5);
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}
.sidebar > h1.app-name .app-name-link {
  display: block;
  position: relative;
  /* Le libellé textuel reste dans le DOM pour les lecteurs d'écran */
  overflow: hidden;
  text-indent: -9999px;
  white-space: nowrap;
  height: 52px;
  background: url("logo-wesmart-blanc.png") no-repeat left top;
  background-size: auto 26px;
}
.sidebar > h1.app-name .app-name-link::after {
  content: "Documentation · version connectée";
  position: absolute;
  left: 0;
  bottom: 0;
  text-indent: 0;
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--orange-300);
  white-space: nowrap;
}

.sidebar .sidebar-nav > ul > li > strong,
.sidebar .sidebar-nav > ul > li > p > strong {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .55);
  margin: var(--space-6) 0 var(--space-2);
  padding: 0 var(--space-3);
}
.sidebar .sidebar-nav > ul > li:first-child > strong { margin-top: 0; }

.sidebar .sidebar-nav ul li a {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: rgba(255, 255, 255, .78);
  border-left: 4px solid transparent;
  margin-right: 0;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
  /* Les libellés de pages sont longs : on enroule plutôt que de tronquer */
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.sidebar .sidebar-nav ul li a:hover {
  background: rgba(255, 255, 255, .10);
  color: var(--white);
  text-decoration: none;
}

/* État actif — § 6.2 : surlignage + bordure gauche orange.
   Docsify pose la classe .active sur le <li>, pas sur le <a>. */
.sidebar .sidebar-nav li.active > a,
.sidebar .sidebar-nav ul li a.active {
  background: rgba(255, 255, 255, .16);
  color: var(--white);
  font-weight: 600;
  border-left: 4px solid var(--orange-500);
}
.sidebar .sidebar-nav li.active > a:hover,
.sidebar .sidebar-nav ul li a.active:hover {
  background: rgba(255, 255, 255, .22);
  color: var(--white);
}

/* Sous-titres de page (subMaxLevel) */
.sidebar .sidebar-nav ul ul ul li a {
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, .58);
}
.sidebar .sidebar-nav ul ul ul li a:hover { color: var(--white); }

/* Un sous-titre actif reste discret : le surlignage est réservé à la page */
.sidebar .sidebar-nav ul ul ul li.active > a {
  background: transparent;
  color: var(--white);
  font-weight: 600;
  border-left: 4px solid var(--orange-500);
}
.sidebar .sidebar-nav ul ul ul li.active > a:hover {
  background: rgba(255, 255, 255, .10);
}

.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .22);
  border-radius: var(--radius-full);
}
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .35); }

/* ==================== 4 bis. BANDEAU D'ACCUEIL ==================== */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--klein-500) 0%, var(--klein-700) 100%);
  color: var(--white);
  border-radius: var(--radius-xl);
  padding: var(--space-10) var(--space-12);
  margin: 0 0 var(--space-10);
  box-shadow: var(--shadow-lg);
}
/* Halo orange — accent de marque, § 2.2 */
.hero::after {
  content: "";
  position: absolute;
  right: -80px;
  top: -80px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 149, 0, .32) 0%, transparent 70%);
  pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }

.hero-logo {
  height: 34px;
  background: url("logo-wesmart-blanc.png") no-repeat left center;
  background-size: auto 34px;
  margin-bottom: var(--space-6);
}
.markdown-section .hero-eyebrow {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--orange-300);
  margin: 0 0 var(--space-3);
}
.markdown-section .hero h1 {
  color: var(--white);
  font-size: 34px;
  line-height: 1.15;
  margin: 0 0 var(--space-3);
  border: none;
  padding: 0;
}
.markdown-section .hero-subtitle {
  font-size: 17px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .85);
  max-width: 34rem;
  margin: 0;
}

@media (max-width: 768px) {
  .hero { padding: var(--space-8) var(--space-6); }
  .markdown-section .hero h1 { font-size: 26px; }
}

/* ==================== 4 ter. CARTES DE SECTION ==================== */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-4);
  margin: var(--space-6) 0 var(--space-8);
}

.markdown-section a.card {
  display: block;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}
.markdown-section a.card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--klein-200);
  transform: translateY(-2px);
  text-decoration: none;
}

.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--klein-50);
  color: var(--klein-500);
  margin-bottom: var(--space-3);
}
.card-icon svg { width: 20px; height: 20px; }

.markdown-section a.card .card-title {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}
.markdown-section a.card .card-text {
  display: block;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-tertiary);
}

/* Une carte par thème : l'accent orange signale l'entrée principale */
.markdown-section a.card.is-primary .card-icon {
  background: var(--orange-50);
  color: var(--orange-700);
}

/* ==================== 4 quater. ÉTAPES NUMÉROTÉES ==================== */
/* Les procédures sont le cœur de cette documentation : chaque étape reçoit
   une pastille, plus lisible qu'un simple numéro en marge. */
.markdown-section > ol {
  counter-reset: etape;
  list-style: none;
  padding-left: 0;
  margin: var(--space-5) 0;
}
.markdown-section > ol > li {
  counter-increment: etape;
  position: relative;
  padding-left: 42px;
  margin: 0 0 var(--space-4);
}
.markdown-section > ol > li::before {
  content: counter(etape);
  position: absolute;
  left: 0;
  top: -1px;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--klein-500);
  color: var(--white);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.markdown-section > ol > li > img { margin-left: 0; }

/* ==================== 5. ALERT / CALLOUT ==================== */
/* Les citations Markdown deviennent des composants Alert.
   La variante est posée par le script d'index.html. */
.markdown-section blockquote {
  display: block;
  background: var(--klein-50);
  border: none;
  border-left: 4px solid var(--klein-500);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin: var(--space-6) 0;
  color: var(--text-secondary);
  font-style: normal;
}
.markdown-section blockquote > *:first-child { margin-top: 0; }
.markdown-section blockquote > *:last-child  { margin-bottom: 0; }
.markdown-section blockquote p,
.markdown-section blockquote li { font-size: 15px; color: var(--text-secondary); }
.markdown-section blockquote strong { color: var(--text-primary); }
/* Dans un modèle d'e-mail, l'italique marque une valeur remplacée automatiquement */
.markdown-section blockquote em {
  font-style: italic;
  color: var(--klein-700);
  background: var(--klein-100);
  padding: 0 4px;
  border-radius: var(--radius-sm);
}
.markdown-section blockquote p + p { margin-top: var(--space-3); }
.markdown-section blockquote ul,
.markdown-section blockquote ol { margin: var(--space-2) 0 var(--space-2) var(--space-5); }

.markdown-section blockquote.alert-warning {
  background: var(--orange-50);
  border-left-color: var(--orange-500);
}
.markdown-section blockquote.alert-warning strong { color: var(--orange-900); }

.markdown-section blockquote.alert-success {
  background: var(--success-50);
  border-left-color: var(--success-500);
}
.markdown-section blockquote.alert-danger {
  background: var(--danger-50);
  border-left-color: var(--danger-500);
}

/* ==================== 6. TABLEAUX ==================== */
/* Enveloppe posée par le script : carte à coins arrondis + défilement propre */
.table-wrap {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  margin: var(--space-6) 0;
  box-shadow: var(--shadow-xs);
}

/* Docsify force display:block sur les tableaux — on rétablit le rendu tabulaire,
   le défilement horizontal étant assuré par .table-wrap */
.markdown-section .table-wrap > table,
.markdown-section table {
  display: table;
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 14px;
  border: none;
  overflow: visible;
}

.markdown-section table th {
  background: var(--neutral-50);
  text-align: left;
  padding: var(--space-3) var(--space-4);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-tertiary);
  border: none;
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}

.markdown-section table td {
  padding: var(--space-3) var(--space-4);
  border: none;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  background: transparent;
  vertical-align: top;
}

.markdown-section table tr:last-child td { border-bottom: none; }
.markdown-section table tr:hover td { background: var(--klein-50); }
.markdown-section table td strong { color: var(--text-primary); font-weight: 600; }

/* ==================== 7. CAPTURES D'ÉCRAN ==================== */
.markdown-section img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: var(--space-4) 0 var(--space-6);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  cursor: zoom-in;
  transition: box-shadow var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
}
.markdown-section img:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--klein-200);
}

/* Vue agrandie (plugin zoom-image) */
.medium-zoom-overlay { background: var(--neutral-900) !important; }
.medium-zoom-image--opened { border-radius: var(--radius-lg); cursor: zoom-out; }

/* ==================== 8. CODE ==================== */
.markdown-section code {
  font-family: var(--font-mono);
  font-size: .9em;
  background: var(--neutral-100);
  color: var(--text-primary);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

/* ==================== 9. DIAGRAMMES ==================== */
.markdown-section .mermaid {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin: var(--space-6) 0;
  text-align: center;
  overflow-x: auto;
}
.markdown-section .mermaid svg { max-width: 100%; height: auto; }

/* ==================== 10. RECHERCHE ==================== */
.sidebar .search {
  margin: 0 0 var(--space-4);
  padding: 0 0 var(--space-4);
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}
.sidebar .search .input-wrap { margin: 0; background: transparent; }
/* Le plugin de recherche injecte son CSS après cette feuille : on monte la spécificité */
.sidebar .search .input-wrap input[type="search"] {
  width: 100%;
  height: 40px;
  padding: 0 var(--space-3);
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--white);
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.sidebar .search .input-wrap input[type="search"]::placeholder { color: rgba(255, 255, 255, .60); }
.sidebar .search .input-wrap input[type="search"]:hover {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .34);
}
.sidebar .search .input-wrap input[type="search"]:focus {
  outline: none;
  background: rgba(255, 255, 255, .18);
  border-color: var(--orange-500);
  box-shadow: 0 0 0 3px rgba(255, 149, 0, .30);
}

.sidebar .search .results-panel { padding-top: var(--space-2); }
.sidebar .search .matching-post {
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  padding: var(--space-3);
  border-radius: var(--radius-md);
}
.sidebar .search .matching-post:hover { background: rgba(255, 255, 255, .10); }
.sidebar .search .matching-post h2 {
  font-size: 14px;
  font-weight: 600;
  color: var(--white);
  margin: 0 0 var(--space-1);
}
.sidebar .search .matching-post p {
  font-size: 13px;
  color: rgba(255, 255, 255, .70);
  margin: 0;
}
.sidebar .search p em {
  background: var(--orange-500);
  color: var(--black);          /* noir sur orange.500 : 9.6:1 (§ 10.2) */
  font-style: normal;
  font-weight: 600;
  padding: 0 3px;
  border-radius: var(--radius-sm);
}
.sidebar .search .clear-button { cursor: pointer; color: rgba(255, 255, 255, .70); }

/* ==================== 11. BOUTON DE REPLI ==================== */
/* Posé sur le menu bleu : traitement en surface translucide */
.sidebar-toggle {
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--radius-md);
  box-shadow: none;
  padding: var(--space-2);
  transition: background var(--duration-fast) var(--ease-out);
}
.sidebar-toggle:hover { background: rgba(255, 255, 255, .24); }
.sidebar-toggle .sidebar-toggle-button span { background-color: var(--white); }

/* Menu replié : le bouton revient sur le fond clair de la page */
body.close .sidebar-toggle {
  background: var(--bg-surface);
  border-color: var(--border-subtle);
  box-shadow: var(--shadow-sm);
}
body.close .sidebar-toggle .sidebar-toggle-button span { background-color: var(--klein-500); }

/* ==================== 12. RESPONSIVE ==================== */
@media (max-width: 768px) {
  .markdown-section { padding: var(--space-8) var(--space-6) var(--space-12); }
  .markdown-section h1 { font-size: 26px; }
  .markdown-section h2 { font-size: 21px; }
  .content { left: 0; }
}

/* ==================== 13. MOUVEMENT RÉDUIT ==================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==================== 14. IMPRESSION ==================== */
@media print {
  .sidebar, .sidebar-toggle { display: none; }
  .content { left: 0; }
  .markdown-section img { box-shadow: none; break-inside: avoid; }
  .table-wrap { break-inside: avoid; }
}