:root{
  --teal:#004b63; --teal-d:#003749; --teal-l:#0a7ea0;
  --gold:#f0a915; --gold-d:#d98f00;
  --ink:#1e2a30; --muted:#5c6b72; --bg:#f4f7f8; --line:#dbe4e7; --card:#fff;
}
*{box-sizing:border-box;}
body{margin:0;font-family:'Segoe UI',system-ui,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.55;}
a{color:var(--teal-l);text-decoration:underline;text-decoration-color:rgba(10,126,160,.4);
  text-decoration-thickness:1.5px;text-underline-offset:3px;background:rgba(10,126,160,.08);
  border-radius:4px;padding:1px 4px;margin:-1px -4px;box-decoration-break:clone;-webkit-box-decoration-break:clone;
  transition:color .15s ease,text-decoration-color .15s ease,background-color .15s ease;}
a:hover{color:var(--teal-d);text-decoration-color:var(--gold-d);background:rgba(240,169,21,.18);}
nav.side a,.res-item a,.files a,.card a{background:none;padding:0;margin:0;}
a:focus-visible{outline:2px solid var(--gold-d);outline-offset:2px;}
a::after{content:"\2192";display:inline-block;margin-left:3px;font-size:.82em;font-weight:700;
  text-decoration:none;transform:translateY(-1px);}
a[href^="http"]::after,a[target="_blank"]::after{content:"\2197";}
a[href^="#"]::after{content:"\2193";}
nav.side a::after,.res-item a::after,.files a::after,.card a::after{content:none;margin-left:0;}

header.top{background:#fff;border-bottom:3px solid var(--gold);display:flex;align-items:center;gap:18px;
  padding:10px 24px;position:sticky;top:0;z-index:20;box-shadow:0 1px 6px rgba(0,0,0,.06);}
header.top img.logo{height:46px;}
header.top .titles{line-height:1.2;}
header.top .titles b{color:var(--teal);font-size:18px;}
header.top .titles span{display:block;color:var(--muted);font-size:12px;}
header.top .who{margin-left:auto;color:var(--muted);font-size:13px;}

.layout{display:flex;height:calc(100vh - 72px);}
nav.side{width:266px;background:linear-gradient(180deg,#fff,#fbfdfe);border-right:1px solid var(--line);
  padding:20px 14px;flex-shrink:0;overflow-y:auto;}
nav.side .grp{display:flex;align-items:center;gap:8px;font-size:11px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--teal-l);font-weight:800;padding:18px 10px 8px;}
nav.side .grp:first-child{padding-top:4px;}
nav.side .grp::after{content:"";flex:1;height:1px;background:var(--line);}
nav.side .subgrp{font-size:12px;font-weight:600;color:var(--muted);padding:6px 10px 3px 20px;}
nav.side a{display:flex;align-items:center;gap:9px;padding:9px 12px;margin:2px 0;border-radius:9px;
  color:#33454d;font-size:14px;font-weight:500;text-decoration:none;transition:background .15s ease,color .15s ease;}
nav.side a::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--line);flex-shrink:0;transition:background .15s ease;}
nav.side a:hover{background:#eef4f6;text-decoration:none;color:var(--teal);}
nav.side a:hover::before{background:var(--teal-l);}
nav.side a.active{background:linear-gradient(90deg,rgba(240,169,21,.16),rgba(10,126,160,.07));color:var(--teal);
  font-weight:700;box-shadow:inset 3px 0 0 var(--gold);}
nav.side a.active::before{background:var(--gold);}

main{flex:1;overflow:auto;}
.wrap{max-width:1000px;margin:0 auto;padding:30px 40px 60px;}

h1{color:var(--teal);font-size:27px;margin:0 0 4px;}
h1+.sub{color:var(--muted);margin:0 0 18px;font-size:15px;}
h2{color:var(--teal);font-size:20px;margin-top:30px;padding-bottom:5px;border-bottom:2px solid var(--gold);}
h3{color:var(--teal-d);font-size:16px;margin-top:22px;}

.hero{background:linear-gradient(120deg,var(--teal),var(--teal-l));color:#fff;padding:48px 40px;}
.hero .wrapb{max-width:1000px;margin:0 auto;}
.hero h1{color:#fff;font-size:34px;margin:0;}
.hero p{font-size:17px;opacity:.92;max-width:680px;margin:12px 0 0;}
.hero .accent{color:var(--gold);}

.cards{display:flex;gap:22px;flex-wrap:wrap;margin:26px 0;}
.card{flex:1;min-width:280px;max-width:420px;background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:22px;box-shadow:0 3px 12px rgba(0,60,80,.06);border-top:4px solid var(--gold);}
.card h3{margin-top:0;color:var(--teal);font-size:18px;}
.pill{display:inline-block;background:var(--teal);color:#fff;border-radius:20px;padding:3px 12px;font-size:12px;font-weight:700;}

.res-search{display:block;width:100%;max-width:440px;padding:11px 16px;margin:6px 0 24px;
  border:1px solid var(--line);border-radius:9px;font-size:14px;font-family:inherit;color:var(--ink);background:#fff;}
.res-search:focus{outline:none;border-color:var(--teal-l);box-shadow:0 0 0 3px rgba(10,126,160,.15);}
.res-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.res-item a{display:block;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--gold);
  border-radius:10px;padding:13px 18px;box-shadow:0 2px 8px rgba(0,60,80,.05);text-decoration:none;}
.res-item a:hover{background:#f7fbfc;text-decoration:none;border-left-color:var(--teal-l);}
.res-item strong{display:block;color:var(--teal);font-size:15.5px;margin-bottom:3px;}
.res-item span{display:block;color:var(--muted);font-size:13.5px;}
.res-empty{display:none;color:var(--muted);font-size:14px;padding:10px 2px;}

.toolbar-shot{position:relative;max-width:780px;margin:38px auto 18px;}
.toolbar-shot.sm{max-width:420px;}
.toolbar-shot img{width:100%;display:block;border-radius:6px;}
.toolbar-shot .callout{position:absolute;top:-34px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;}
.toolbar-shot .callout .num{width:22px;height:22px;border-radius:50%;background:var(--gold);color:#1e2a30;font-size:12px;font-weight:700;
  display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.3);}
.toolbar-shot .callout .arrow{width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:11px solid var(--gold);margin-top:1px;}

.pinout-shot{position:relative;margin:20px 0;}
.pinout-shot img{width:100%;display:block;border-radius:10px;border:1px solid var(--line);}
.pinout-shot .callout{position:absolute;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;}
.pinout-shot .callout .num{width:22px;height:22px;border-radius:50%;background:var(--gold);color:#1e2a30;font-size:12px;font-weight:700;
  display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.3);}
.pinout-shot .callout .arrow-up{width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:11px solid var(--gold);margin-bottom:1px;}

.sidebar-shot{position:relative;max-width:220px;margin:18px 0;}
.sidebar-shot img{width:100%;display:block;border-radius:6px;}
.sidebar-shot .callout{position:absolute;left:100%;top:0;transform:translateY(-50%);display:flex;align-items:center;margin-left:2px;}
.sidebar-shot .callout .arrow-left{width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:11px solid var(--gold);}
.sidebar-shot .callout .num{width:22px;height:22px;border-radius:50%;background:var(--gold);color:#1e2a30;font-size:12px;font-weight:700;
  display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.3);margin-left:1px;flex-shrink:0;}

pre{background:#04212b;color:#e6f0f3;border-radius:10px;border-left:5px solid var(--gold);padding:14px 16px;overflow:auto;font-size:13.5px;line-height:1.6;font-family:Consolas,monospace;}
code{font-family:Consolas,monospace;font-size:.9em;background:#e7eff2;color:#08526a;border:1px solid #cfe0e5;border-radius:5px;padding:1px 6px;font-weight:600;}
pre code{background:none;border:none;padding:0;color:inherit;font-weight:normal;}
pre .ok{color:#3ecf6a;font-weight:700;}
pre .fail{color:#f14c4c;font-weight:700;}
pre .err{color:#cd3131;}
pre .warn{color:#e5e510;}
pre .grn{color:#0dbc79;}
pre .dim{color:#6a7480;}
.note{background:#fff7e6;border-left:4px solid var(--gold);padding:11px 15px;border-radius:6px;margin:16px 0;font-size:14px;}
.step{background:#eef5f7;border-left:4px solid var(--teal-l);padding:11px 15px;border-radius:6px;margin:14px 0;}
.retenir{background:#eef7ec;border-left:4px solid #4caf50;padding:11px 15px;border-radius:6px;margin:16px 0;font-size:14px;}
.alerte{background:#fdecea;border-left:4px solid #d32f2f;color:#7a1f1f;padding:11px 15px;border-radius:6px;margin:16px 0;font-size:14px;}
.credits{display:inline-flex;gap:3px;vertical-align:middle;margin-left:8px;}
.credits .sq{width:11px;height:11px;background:#4caf50;border-radius:2px;display:inline-block;}
ol li,ul li{margin:6px 0;}
img.ico{height:20px;width:20px;vertical-align:-5px;margin:0 3px;border-radius:4px;}
.files a{display:inline-flex;align-items:center;gap:6px;background:var(--teal);color:#fff;border-radius:9px;
  padding:9px 14px;margin:5px 9px 5px 0;font-size:13px;font-weight:600;text-decoration:none;}
.files a:hover{background:var(--teal-d);text-decoration:none;}

table{border-collapse:collapse;width:100%;margin:14px 0;font-size:13.5px;}
th,td{border:1px solid var(--line);padding:8px 10px;text-align:left;}
th{background:#eef4f6;color:var(--teal);}

.section-bar{background:var(--teal);color:#fff;font-weight:700;font-size:13px;letter-spacing:.03em;
  padding:9px 14px;border-radius:7px 7px 0 0;margin:22px 0 0;}
.section-bar+table{margin-top:0;border-radius:0 0 7px 7px;overflow:hidden;}

footer{background:var(--teal-d);color:#cfe0e5;font-size:13px;padding:22px 40px;}
footer .wrapb{max-width:1000px;margin:0 auto;display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
footer img{height:40px;background:#fff;border-radius:6px;padding:4px;}
@media(max-width:820px){nav.side{display:none;} .wrap{padding:22px;}}