:root {
  --blue: #1976d2;
  --blue-light: #e3f0fb;
  --dark: #1a1a2e;
  --accent: #f5a623;
  --green: #2e7d32;
  --green-light: #e8f5e9;
  --gray: #f5f5f5;
  --border: #e0e0e0;
  --text: #212121;
  --muted: #666;
  --max: 900px;
  --fam-cyber: #1a237e;
  --fam-industriel: #e65100;
  --fam-rh: #00695c;
  --fam-transverse: #37474f;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', system-ui, sans-serif; color: var(--text); background: #fff; line-height: 1.6; }

header { background: var(--dark); color: #fff; padding: 40px 24px 36px; text-align: center; }
header .badge { display: inline-block; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 3px 10px; border-radius: 20px; margin-bottom: 14px; }
header h1 { font-size: 2rem; font-weight: 700; margin-bottom: 10px; }
header p { font-size: 1.05rem; opacity: .8; max-width: 660px; margin: 0 auto; }
header .crumb { font-size: .82rem; opacity: .75; margin-bottom: 14px; }
header .crumb a { color: #fff; text-decoration: underline; }

.toc { background: var(--gray); border-left: 4px solid var(--blue); max-width: var(--max); margin: 36px auto 0; padding: 22px 28px; border-radius: 6px; }
.toc h2 { font-size: .85rem; text-transform: uppercase; letter-spacing: 1px; color: var(--blue); margin-bottom: 12px; }
.toc ol { padding-left: 18px; }
.toc li { margin: 4px 0; }
.toc a { color: var(--blue); text-decoration: none; }
.toc a:hover { text-decoration: underline; }

main { max-width: var(--max); margin: 0 auto; padding: 40px 24px 80px; }

section { margin-bottom: 60px; }
section h2 { font-size: 1.35rem; font-weight: 700; color: var(--dark); border-bottom: 2px solid var(--blue); padding-bottom: 8px; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
section h2 .num { background: var(--blue); color: #fff; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; flex-shrink: 0; }
section h3 { font-size: 1rem; font-weight: 600; margin: 22px 0 10px; color: var(--dark); }
p { margin-bottom: 12px; }

.screen { margin: 20px 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,.08); }
.screen img { display: block; width: 100%; height: auto; }
.screen figcaption { background: var(--gray); border-top: 1px solid var(--border); font-size: .8rem; color: var(--muted); padding: 8px 14px; display: flex; align-items: center; gap: 6px; }
.screen figcaption::before { content: '↑'; font-weight: 700; color: var(--blue); }

.screen-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 0; }
@media (max-width: 640px) { .screen-row { grid-template-columns: 1fr; } }

.tip, .warn, .info, .todo { padding: 14px 18px; border-radius: 6px; margin: 16px 0; font-size: .92rem; display: flex; gap: 10px; align-items: flex-start; }
.tip  { background: var(--green-light); border-left: 4px solid var(--green); }
.warn { background: #fff8e1; border-left: 4px solid #f9a825; }
.info { background: var(--blue-light); border-left: 4px solid var(--blue); }
.todo { background: #f3e5f5; border-left: 4px solid #8e24aa; }
.tip::before  { content: '✓'; font-weight: 700; color: var(--green); flex-shrink: 0; }
.warn::before { content: '⚠'; flex-shrink: 0; color: #f9a825; }
.info::before { content: 'ℹ'; flex-shrink: 0; color: var(--blue); }
.todo::before { content: '✎'; flex-shrink: 0; color: #8e24aa; }

table { width: 100%; border-collapse: collapse; font-size: .88rem; margin: 14px 0; }
th { background: var(--dark); color: #fff; text-align: left; padding: 9px 12px; font-weight: 600; }
td { padding: 8px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
tr:hover td { background: var(--gray); }
td strong { color: var(--blue); }

.steps { counter-reset: step; list-style: none; padding: 0; }
.steps li { counter-increment: step; padding: 12px 14px 12px 52px; position: relative; margin-bottom: 8px; background: var(--gray); border-radius: 6px; }
.steps li::before { content: counter(step); position: absolute; left: 14px; top: 12px; width: 24px; height: 24px; background: var(--blue); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; }

.methods { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin: 16px 0; }
.method-card { border: 1px solid var(--border); border-radius: 8px; padding: 14px; text-align: center; text-decoration: none; display: block; transition: box-shadow .15s, transform .15s; }
.method-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.1); transform: translateY(-2px); }
.method-card .icon { font-size: 1.6rem; margin-bottom: 6px; }
.method-card .name { font-weight: 700; font-size: .9rem; color: var(--dark); }
.method-card .desc { font-size: .78rem; color: var(--muted); margin-top: 4px; }

.workflow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 18px 0; font-size: .82rem; }
.wf-step { background: var(--blue); color: #fff; border-radius: 20px; padding: 4px 14px; font-weight: 600; white-space: nowrap; }
.wf-arrow { color: var(--muted); font-size: 1rem; }

footer { text-align: center; padding: 24px; font-size: .8rem; color: var(--muted); border-top: 1px solid var(--border); }
footer a { color: var(--blue); }

.chip-table { font-size: .82rem; }
.chip-table th, .chip-table td { text-align: left; }
.chip-table td.chip-cell { text-align: center; white-space: nowrap; }
.chip { display: inline-block; min-width: 26px; padding: 3px 9px; border-radius: 12px; font-weight: 700; font-size: .78rem; }
.chip-ipr { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.chip-ipr .lvl { font-size: .68rem; color: var(--muted); font-weight: 600; }

/* Page d'accueil du wiki */
.family-block { margin-bottom: 44px; }
.family-block h2 { font-size: 1.1rem; text-transform: uppercase; letter-spacing: .5px; padding: 10px 16px; border-radius: 6px; color: #fff; border-bottom: none; display: block; margin-bottom: 16px; }
.family-block.cyber h2 { background: var(--fam-cyber); }
.family-block.industriel h2 { background: var(--fam-industriel); }
.family-block.rh h2 { background: var(--fam-rh); }
.family-block.transverse h2 { background: var(--fam-transverse); }