/* ==========================================================================
   Pages de write-up · complète styles.css
   ========================================================================== */

.wu-body{background:var(--bg-alt)}
.wu-main{padding:52px 0 96px}
.wu-container{max-width:1060px}
.wu-nav{gap:4px}

.wu-back{margin:0 0 28px}
.wu-back a{
  font-size:14px;font-weight:600;color:var(--muted);
  display:inline-flex;align-items:center;gap:7px;transition:color .2s ease;
}
.wu-back a::before{content:"←";font-size:15px}
.wu-back a:hover{color:var(--ink)}
.wu-back-end{margin:40px 0 0}

/* ---------------- En-tête ---------------- */
.wu-head{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:38px 40px;margin-bottom:24px;
}
.wu-head h1{font-size:clamp(2rem,4vw,2.9rem);letter-spacing:-.035em;margin-bottom:16px}
.wu-summary{font-size:17px;line-height:1.7;color:var(--ink-2);max-width:70ch;margin-bottom:24px}
.wu-meta{display:flex;flex-wrap:wrap;gap:28px;padding-top:22px;border-top:1px solid var(--line-soft)}
.wu-meta li{display:flex;flex-direction:column;gap:5px;font-size:14.5px;font-weight:600;color:var(--ink)}
.wu-meta li span{
  font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}
.wu-meta em{align-self:flex-start}

/* ---------------- Mise en page ---------------- */
.wu-layout{display:grid;grid-template-columns:216px minmax(0,1fr);gap:32px;align-items:start}

.wu-toc{position:sticky;top:calc(var(--header-h) + 28px)}
.wu-toc-title{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:0 0 12px;
}
.wu-toc ol{list-style:none;counter-reset:toc;display:flex;flex-direction:column;gap:2px}
.wu-toc li{counter-increment:toc}
.wu-toc a{
  display:block;padding:7px 12px;border-radius:8px;font-size:13.6px;line-height:1.45;
  color:var(--muted);border-left:2px solid var(--line);transition:color .2s ease,background .2s ease,border-color .2s ease;
}
.wu-toc a:hover{color:var(--ink);background:#fff;border-left-color:var(--red)}

.wu-article{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:40px 44px;min-width:0;
}
.wu-article h2,.wu-article h3,.wu-article h4{overflow-wrap:break-word;position:relative}
.wu-anchor{
  margin-left:8px;font-weight:500;color:var(--line);border:0;
  text-decoration:none;opacity:0;transition:opacity .2s ease,color .2s ease;
}
.wu-article h2:hover .wu-anchor,.wu-article h3:hover .wu-anchor,
.wu-article h4:hover .wu-anchor,.wu-anchor:focus-visible{opacity:1;color:var(--red)}
.wu-article :target{scroll-margin-top:calc(var(--header-h) + 20px)}
.wu-article h2{font-size:24px;letter-spacing:-.03em;margin:44px 0 16px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.wu-article h2:first-child{margin-top:0}
.wu-article h3{font-size:19px;letter-spacing:-.025em;margin:32px 0 12px}
.wu-article h4,.wu-article h5,.wu-article h6{font-size:16px;margin:26px 0 10px}
.wu-article p{font-size:15.8px;line-height:1.72;color:var(--ink-2);margin:0 0 16px}
.wu-article ul,.wu-article ol{margin:0 0 18px;padding-left:20px;list-style:disc}
.wu-article ol{list-style:decimal}
.wu-article li{font-size:15.6px;line-height:1.68;color:var(--ink-2);margin-bottom:6px}
.wu-article a{color:var(--blue);border-bottom:1px solid var(--blue-line);word-break:break-word}
.wu-article a:hover{border-bottom-color:var(--blue)}
.wu-article strong{color:var(--ink);font-weight:700}
.wu-article hr{border:0;border-top:1px solid var(--line-soft);margin:32px 0}
.wu-article blockquote{
  margin:0 0 18px;padding:14px 20px;border-left:3px solid var(--red);
  background:var(--red-soft);border-radius:0 10px 10px 0;
  font-size:15.4px;color:var(--ink-2);
}
.wu-article p code,.wu-article li code,.wu-article td code{
  font-family:var(--mono);font-size:.87em;padding:2px 6px;border-radius:5px;
  background:var(--slate-soft);color:var(--ink);border:1px solid var(--slate-line);
  overflow-wrap:anywhere;
}

/* ---------------- Code ---------------- */
.wu-code:hover .wu-lang{opacity:0}
.wu-lang{transition:opacity .2s ease}
.wu-code{position:relative;margin:0 0 20px;border:1px solid #232a38;border-radius:12px;background:#11161f;overflow:hidden}
.wu-copy{
  position:absolute;top:9px;right:11px;z-index:2;
  padding:5px 11px;border-radius:7px;cursor:pointer;
  font-family:var(--font);font-size:12px;font-weight:600;
  color:#c6cfdd;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  opacity:0;transition:opacity .2s ease,background .2s ease,color .2s ease;
}
.wu-code:hover .wu-copy,.wu-copy:focus-visible{opacity:1}
.wu-copy:hover{background:rgba(255,255,255,.15);color:#fff}
.wu-copy.is-done{color:#8ee0a8;border-color:rgba(142,224,168,.4)}
.wu-copy-zone{position:fixed;top:-200px;left:-200px;opacity:0}

.wu-lang{
  position:absolute;top:0;right:0;padding:5px 12px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:#7d8a9e;background:#171d28;border-radius:0 0 0 10px;
}
.wu-code pre{
  margin:0;padding:20px 22px;overflow-x:auto;
  overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
}
.wu-code code{
  font-family:var(--mono);font-size:13px;line-height:1.62;color:#d6dde9;
  white-space:pre;display:block;
}
.wu-code pre::-webkit-scrollbar{height:9px}
.wu-code pre::-webkit-scrollbar-thumb{background:#2c3444;border-radius:9px}

/* ---------------- Captures et tableaux ---------------- */
.wu-shot{margin:0 0 20px}
.wu-shot img{
  width:100%;height:auto;border:1px solid var(--line);border-radius:10px;background:var(--bg-alt);
}
.wu-zoomable{cursor:zoom-in;transition:border-color .2s ease,box-shadow .2s ease}
.wu-zoomable:hover,.wu-zoomable:focus-visible{border-color:#c3ccdb;box-shadow:var(--shadow-md)}

/* ---------------- Visionneuse ---------------- */
body.lb-open{overflow:hidden}
.lb{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;background:rgba(10,14,22,.88)}
.lb[hidden]{display:none}
.lb-bar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 20px;border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0;
}
.lb-hint{margin:0;font-family:var(--mono);font-size:12px;color:#9aa6b8}
.lb-close{
  width:36px;height:36px;flex-shrink:0;border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);color:#fff;border-radius:9px;cursor:pointer;
  font-size:15px;line-height:1;transition:background .2s ease,border-color .2s ease;
}
.lb-close:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.34)}
.lb-stage{
  flex:1;min-height:0;overflow:auto;padding:26px;
  display:flex;align-items:center;justify-content:center;cursor:zoom-out;
}
.lb-stage img{
  max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  border-radius:8px;cursor:zoom-in;background:#fff;
}
.lb-stage.is-zoomed{align-items:flex-start;justify-content:flex-start;cursor:default}
.lb-stage.is-zoomed img{max-width:none;max-height:none;cursor:zoom-out}

@media (max-width:620px){
  .lb-hint{font-size:11px}
  .lb-stage{padding:14px}
}
.wu-table{
  margin:0 0 20px;overflow-x:auto;border:1px solid var(--line);border-radius:10px;
  overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
}
.wu-table table{border-collapse:collapse;width:100%;font-size:14.6px}
.wu-table th,.wu-table td{padding:11px 15px;text-align:left;border-bottom:1px solid var(--line-soft)}
.wu-table th{font-weight:700;color:var(--ink);background:var(--bg-soft);white-space:nowrap}
.wu-table tr:last-child td{border-bottom:0}

.wu-article li.wu-task{list-style:none;margin-left:-20px;display:flex;gap:9px;align-items:flex-start}
.wu-box{color:var(--blue);flex-shrink:0;line-height:1.5}
.wu-article mark{background:#fff4c9;color:var(--ink);padding:1px 4px;border-radius:4px}
.wu-article del{color:var(--muted)}

.wu-article .wu-tags{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 22px;padding-left:0;list-style:none}
.wu-article .wu-tags li{margin-bottom:0}
.wu-tags{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 22px;padding-left:0;list-style:none}
.wu-tags li{
  font-family:var(--mono);font-size:11.5px;padding:4px 10px;border-radius:100px;
  color:var(--slate);background:var(--slate-soft);border:1px solid var(--slate-line);
}


/* ---------------- Article précédent et suivant ---------------- */
.wu-pager{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:32px}
.wu-pager-link{
  display:flex;flex-direction:column;gap:5px;padding:18px 22px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.wu-pager-link:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:#d7dde7}
.wu-pager-next{text-align:right}
.wu-pager-label{
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.wu-pager-name{font-size:16px;font-weight:700;color:var(--ink);letter-spacing:-.02em}
.wu-pager-link:hover .wu-pager-name{color:var(--red)}

/* ---------------- Responsive ---------------- */
@media (max-width:900px){
  /* la page de write-up n'a pas de menu déroulant : les liens restent visibles */
  .wu-nav{
    position:static;display:flex;flex-direction:row;margin-left:auto;gap:2px;
    background:none;border:0;padding:0;box-shadow:none;
  }
  .wu-nav a{padding:8px 11px;font-size:13.5px}
  .wu-main{padding:32px 0 64px}
  .wu-layout{grid-template-columns:1fr;gap:24px}
  .wu-toc{position:static;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px}
  .wu-toc ol{flex-direction:row;flex-wrap:wrap;gap:6px}
  .wu-toc a{border-left:0;border:1px solid var(--line);border-radius:100px;padding:6px 13px;font-size:13px}
  .wu-toc a:hover{border-color:#cdd5e1}
  .wu-head{padding:28px 24px}
  .wu-article{padding:28px 22px}
  .wu-meta{gap:20px}
}

@media (max-width:620px){
  .wu-pager{grid-template-columns:1fr}
  .wu-pager-next{text-align:left}
  /* pas de survol au doigt : le bouton reste visible */
  .wu-copy{opacity:1}
  .wu-code:hover .wu-lang{opacity:1}
  .wu-anchor{display:none}
  .wu-code code{font-size:12px}
  .wu-code pre{padding:16px 16px}
  .wu-article h2{font-size:21px}
  .wu-head{padding:24px 20px}
  .wu-article{padding:24px 18px}
  .wu-meta{gap:16px 24px}
  .wu-back a,.wu-back-end a{min-height:44px;display:inline-flex;align-items:center}
  .wu-toc a{min-height:38px;display:flex;align-items:center}
  /* la visionneuse occupe la hauteur réelle du navigateur mobile */
  .lb{height:100dvh}
  .lb-stage{padding:10px}
  .lb-hint{font-size:10.5px;line-height:1.35}
}