:root{
      --van-bg1:#FFF7E6; --van-bg2:#FFFDF7;
      --van-text:#1f2937; --van-muted:#6b7280;
      --van-border:#7c715a; --van-card:#FFFCF6;
      --van-ring:rgba(245,158,11,.20);
      --van-soft:#FFF5E6;
      --cv-font:'Satoshi',system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,sans-serif;
      --toc-w: 240px;
    }
    html,body{font-family:var(--cv-font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;color:var(--van-text);
      background:
        radial-gradient(1200px 800px at 90% -10%, rgba(245,158,11,.08), transparent 60%),
        radial-gradient(900px 700px at -5% 30%,  rgba(236,72,153,.06),  transparent 60%),
        linear-gradient(180deg,var(--van-bg1),var(--van-bg2));
    }
	
	
    button,input,select,textarea{font:inherit}
  .cv-ambient{
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
  }
  .cv-ambient canvas{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    mix-blend-mode: multiply;
    opacity: .70;
    filter: saturate(105%);
  }
  @media (prefers-color-scheme: dark){
    .cv-ambient canvas{
      mix-blend-mode: screen;
      opacity: .42;
    }
  }
      box-shadow:0 10px 28px rgba(0,0,0,.06), inset 0 0 1px rgba(255,255,255,.35);
      opacity:.28; filter:saturate(110%); will-change:transform,left,opacity; left:var(--x,50vw); transform:rotate(var(--rot,12deg));
      animation:chip-rise var(--dur,24s) linear infinite, chip-sway 7s ease-in-out infinite; mix-blend-mode:multiply}
    .cv-chip[data-depth="far"]{opacity:.18}.cv-chip[data-depth="mid"]{opacity:.26}.cv-chip[data-depth="near"]{opacity:.34}
    @keyframes chip-rise{from{transform:translate3d(0,100vh,0) rotate(var(--rot,12deg))}to{transform:translate3d(0,-18vh,0) rotate(var(--rot,12deg))}}
    @keyframes chip-sway{0%,100%{left:calc(var(--x,50vw) - 1.2vw)}50%{left:calc(var(--x,50vw) + 1.2vw)}}
    @media (prefers-color-scheme: dark){
      .cv-chip{mix-blend-mode:screen;opacity:.22;box-shadow:0 10px 28px rgba(0,0,0,.18), inset 0 0 1px rgba(255,255,255,.25)}
    }

    .cv-doc{margin: 0 auto; padding: 40px 20px; position:relative; z-index:1;}
    .cv-head{ text-align:center; margin-bottom: 24px; }
    .cv-head h1{margin:0 0 6px;font-size:clamp(30px,4.2vw,44px)}
    .cv-head p{margin:0;color:var(--van-muted)}

    /* barre outils */
    .cv-tools{display:flex; align-items:center; gap:12px; justify-content:center; margin: 18px 0 24px;}
    .cv-search{min-width:240px; max-width:500px; width:100%;}
    .cv-search input{
      width:100%; padding:10px 12px; border-radius:14px; border:1px solid var(--van-border); background:#fff7;
      box-shadow:0 8px 18px var(--van-ring);
    }

    /* layout : sidebar toc + contenu */
    .cv-grid{display:grid; grid-template-columns: minmax(0,1fr); gap: 12px;}
    @media(min-width:1024px){
      .cv-grid{ grid-template-columns: var(--toc-w) 1fr; align-items:start; }
    }

    /* TOC */
    .cv-toc{
      position: sticky; top: 16px; align-self:start;
      background:var(--van-card); border:1px solid var(--van-border); border-radius:12px; padding:12px;
      box-shadow:0 10px 28px var(--van-ring);
    }
    .cv-toc h3{margin:0 0 8px; font-size:14px; text-transform:uppercase; letter-spacing:.2px; opacity:.8}
    .cv-toc ul{font-size: 15px;list-style:none; margin:0; padding:0; display:grid; gap:6px}
    .cv-toc a{display:block; padding:6px 8px; border-radius:10px; text-decoration:none; color:#374151; font-weight:600}
    .cv-toc a:hover, .cv-toc a.is-active{background:#FFF1E0}

    /* Article */
    .cv-article{background:var(--van-card); border:1px solid var(--van-border); border-radius:20px; padding:18px;
      box-shadow:0 14px 36px var(--van-ring);}
    .cv-article section + section{margin-top: 24px}
    .cv-article h2{margin:20px 0 15px; font-size:30px}
    .cv-article p{margin: 15px 0; font-size:17px}
    .cv-article ol, .cv-article ul{padding-left: 1.2em}

    pre{background:#0f172a; color:#e5e7eb; border-radius:14px; padding:12px; overflow:auto; position:relative}
    pre code{font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; font-size:.92em}
    .btn-copy{
      position:absolute; top:8px; right:8px; font-size:12px; padding:6px 8px; border-radius:8px; border:1px solid #24344d; background:#111a2b; color:#e5e7eb; cursor:pointer;
    }
    .btn-copy:active{transform:translateY(1px)}

    .cv-foot{ display:flex; justify-content:flex-end; margin-top: 8px}
    .cv-top{font-size:14px; text-decoration:none; padding:6px 10px; border-radius:12px; background:var(--van-soft); border:1px solid var(--van-border); font-weight:700}
    .cv-top:hover{ background:#FFE9C7; }
	
	
	/* ===== Doc gallery ===== */
.doc-gallery{
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:14px;
  margin:14px 0 6px;
}
@media (max-width: 980px){ .doc-gallery{ grid-template-columns:1fr; } }

.doc-fig{
  background: #fff;
  border: 1px solid var(--van-border);
  border-radius: 12px;
  padding: 10px;
}
.doc-img{
  width:100%; height:auto; display:block; border-radius: 12px;
  cursor: zoom-in;
}
.doc-cap{
  margin:8px 4px 0; text-align:center; font-size:12px; color: var(--van-muted);
}

/* Lightbox overlay */
#doc-lightbox[hidden]{ display:none !important; }
#doc-lightbox{
  position: fixed; inset: 0; z-index: 50;
  display:grid; place-items:center;
  background: rgba(10, 12, 20, .75);
  backdrop-filter: blur(2px);
}
#doc-lightbox img{
  max-width: min(92vw, 1400px);
  max-height: 88vh;
  border-radius: 12px;
  box-shadow: 0 24px 80px rgba(0,0,0,.45);
}
#doc-lightbox .doc-x{
  position:absolute; top:18px; right:18px;
  background:#fff; border:1px solid var(--van-border);
  border-radius: 10px; padding:8px 10px; font-weight:800; cursor:pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
}
#doc-lightbox .doc-x:hover{ opacity:.9; }

/* ===== Notice / Callout component ===== */
.cv-doc-note{
  --note-bg: #FFF9ED;             /* default (will be overridden by variants) */
  --note-border: #FDEFD3;
  --note-accent: #F59E0B;         /* amber 500 */
  --note-shadow: var(--van-ring);

  align-items:flex-start;
  gap:12px;
  padding:14px 14px 14px 12px;
  border:1px solid var(--note-border);
  background:
    linear-gradient(180deg, var(--note-bg), #fff);
  border-radius:14px;
  box-shadow:0 10px 26px var(--note-shadow);
  position:relative;
  margin:16px 0;
}

.cv-doc-note::before{
  content:"";
  position:absolute;
  inset:-1px auto -1px 0;
  width:4px;
  border-radius:14px 0 0 14px;
  background: var(--note-accent);
  opacity:.65;
}

/* Icon bubble */
.cv-doc-note__icon{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:10px;
  font-size:18px;
  line-height:1;
  background: rgba(255,255,255,.75);
  border:1px solid var(--note-border);
  box-shadow:0 6px 18px var(--note-shadow);
  transform: translateY(1px);
}

/* Text */
.cv-doc-note__content{
  flex:1 1 auto;
}
.cv-doc-note__content > strong{
  display:inline-block;
  font-weight:800;
  margin:2px 0 2px;
}
.cv-doc-note__content p{
  margin:6px 0 0;
  color: var(--van-text);
}

/* Variants */
.cv-doc-note--important{
  --note-bg: #FFF5E6;             /* warm amber base to match your theme */
  --note-border: #FDEFD3;
  --note-accent: #F59E0B;         /* amber */
}

.cv-doc-note--info{
  --note-bg: #F6FAFF;             /* gentle blue background */
  --note-border: #E5F0FF;
  --note-accent: #3B82F6;         /* blue 500 */
}

/* Compact version (optional, if you ever need a slimmer row) */
.cv-doc-note--compact{
  padding:10px 12px;
  border-radius:12px;
  gap:10px;
}
.cv-doc-note--compact .cv-doc-note__icon{
  width:28px; height:28px; font-size:16px; border-radius:8px;
}

/* Dark mode */
@media (prefers-color-scheme: dark){
  .cv-doc-note{
    --note-shadow: rgba(245,158,11,.25);
    background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
    border-color: color-mix(in oklab, var(--note-border), #1f2937 45%);
  }
  .cv-doc-note__icon{
    background: rgba(17,24,39,.6);
    border-color: rgba(255,255,255,.06);
  }
  .cv-doc-note--info{
    --note-border: color-mix(in oklab, #E5F0FF, #1f2937 70%);
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .cv-doc-note, .cv-doc-note__icon{ transition: none !important; }
}