:root { --primary: #0e62fe; --bg: #0b1221; --text: #0f172a; --muted: #6b7280; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; color: var(--text); background: #ffffff; }
header { background: linear-gradient(135deg,#0e62fe 0%,#6a8bff 100%); color: white; padding: 40px 24px; }
header .wrap { max-width: 1100px; margin: 0 auto; display: grid; gap: 8px; }
header h1 { margin:0; font-size: 30px; font-weight: 700; }
header p { margin:0; font-size: 14px; opacity: 0.95; }
header .meta { display:flex; gap:8px; align-items:center; }
.badge { display:inline-block; background:#eef2ff; color:#1f3aed; font-weight:600; padding:4px 8px; border-radius:6px; font-size:12px; }
.badge.badge-outline { background: #ffffff; color: #1f3aed; border: 1px solid #e5e7eb; }

/* Tabs navigation */
.navbar { background: #f8fafc; border-bottom: 1px solid #e5e7eb; }
.navbar .wrap { max-width: 1100px; margin: 0 auto; padding: 8px 24px; }

.tabs { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.tabs a { color: #1f3aed; text-decoration: none; padding: 6px 10px; border-radius: 6px; background: #eef2ff; border: 1px solid #e0e7ff; }
.tabs a:hover { background: #e0e7ff; }
.tabs a.active { background: #dbe3ff; border-color: #b9c4ff; }

/* Active state for homepage TOC links */
.toc a.active { background: #dbe3ff; border-color: #b9c4ff; }

/* Breadcrumbs */
.breadcrumb { font-size: 12px; color: #6b7280; }
.breadcrumb { margin-bottom: 12px; }
.breadcrumb a { color: #1f3aed; text-decoration: none; }
.breadcrumb .sep { color: #9ca3af; margin: 0 4px; }

/* Accessibility: focus visible */
.btn:focus-visible, .tabs a:focus-visible, .toc a:focus-visible { outline: 2px solid #1f3aed; outline-offset: 2px; }

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
  .tabs a, .toc a, .btn { transition: none; }
}


.section { max-width: 1100px; margin: 24px auto; padding: 0 24px; }
.grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 24px; }
.card { border: 1px solid #e5e7eb; border-radius: 12px; padding: 16px; background:#f8fafc; box-shadow: inset 0 3px 0 #dbe3ff; transition: box-shadow 180ms ease, transform 180ms ease, background-color 180ms ease; }
  .card:hover { transform: translateY(-2px); background: #f9fbfd; box-shadow: inset 0 3px 0 #cdd7ff, 0 6px 18px rgba(31, 58, 237, 0.10); }
.small { font-size:12px; color:#6b7280; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
pre { background:#f8fafc; padding:12px; border-radius:8px; overflow:auto; }
img.preview { max-width:100%; display:block; border:1px solid #e5e7eb; border-radius:8px; }

label { display:block; font-size: 14px; margin: 8px 0 4px; }
input, select, textarea { width: 100%; padding: 10px; border:1px solid #d1d5db; border-radius:8px; font-size:14px; }
button, .btn { background: var(--primary); color:white; border: none; padding: 10px 14px; border-radius:8px; cursor:pointer; }
.btn-secondary { background: #eef2ff; color: #1f3aed; border: 1px solid #e0e7ff; padding: 8px 12px; border-radius: 8px; cursor: pointer; text-decoration: none; display: inline-block; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.btn-copy { background: #f1f5f9; color: #374151; border: 1px solid #e5e7eb; padding: 6px 10px; border-radius: 6px; cursor: pointer; margin-top: 6px; }

/* Utility */
.hide { display:none !important; }
.row { display:flex; gap:12px; }
.flex-1 { flex:1; }
.flex-2 { flex:2; }
/* Toolbar & extras */
.toolbar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.btn-danger { background:#dc2626; color:#fff; }
.btn-gray { background:#6b7280; color:#fff; }
.preview-tile { background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:8px; display:inline-block; }
 .svgwrap { width:256px; height:256px; display:block; border:1px solid #e5e7eb; border-radius:8px; }
 .svgwrap svg { width:100%; height:100%; }

/* Icônes légères */
.btn .icon { display:inline-flex; align-items:center; margin-right:6px; }
.icon svg { width:16px; height:16px; stroke: currentColor; fill: none; stroke-width: 1.8; }

/* Dropdown menu */
.dropdown { position: relative; display: inline-block; }
.dropdown-menu { position:absolute; right:0; top:34px; background:#fff; border:1px solid #e5e7eb; box-shadow:0 4px 10px rgba(0,0,0,0.08); border-radius:8px; padding:6px; display:none; z-index:20; min-width:160px; }
.dropdown-menu .menu-item { width:100%; text-align:left; padding:6px 8px; border-radius:6px; background:transparent; color:inherit; }
.dropdown-menu .menu-item:hover { background:#e5e7eb; }

/* Switch (toggle) */
.switch { display:inline-flex; align-items:center; gap:8px; }
.switch input[type="checkbox"] { appearance:none; width:38px; height:22px; border-radius:22px; position:relative; background:#e5e7eb; border:1px solid #d1d5db; cursor:pointer; }
.switch input[type="checkbox"]:checked { background:#1f3aed; border-color:#1f3aed; }
.switch input[type="checkbox"]::before { content:''; position:absolute; left:2px; top:2px; width:18px; height:18px; background:#fff; border-radius:50%; transition:left .15s ease; }
.switch input[type="checkbox"]:checked::before { left:18px; }

/* Thème sombre minimal */
body.theme-dark { background:#0b1221; color:#e5e7eb; }
body.theme-dark .navbar { background:#0f172a; border-bottom-color:#1f2937; }
body.theme-dark .tabs a { color:#cbd5e1; background:#1f2937; border-color:#334155; }
body.theme-dark .tabs a.active { background:#111827; border-color:#334155; }
body.theme-dark .card { background:#0f172a; border-color:#1f2937; box-shadow: inset 0 3px 0 #1e293b; }
body.theme-dark pre { background:#0f172a; border-color:#1f2937; }
body.theme-dark .small { color:#94a3b8; }
body.theme-dark .dropdown-menu { background:#0f172a; border-color:#1f2937; box-shadow:0 6px 20px rgba(0,0,0,0.45); }
/* Toujours garder la tuile d'aperçu blanche pour lisibilité */
body.theme-dark .preview-tile { background:#ffffff; }
.flex-1 { flex:1; }
.flex-2 { flex:2; }

footer { color: #6b7280; font-size: 12px; text-align:center; margin: 40px 0; }

/* Progress bar */
.progress { height: 8px; background: #e5e7eb; border-radius: 4px; overflow: hidden; margin: 8px 0; }
.progress-bar { height: 100%; width: 0%; background: #10b981; transition: width .2s ease-in-out; }

@media (prefers-reduced-motion: reduce) {
  .progress-bar { transition: none; }
}