/* =========================
   THEME TOKENS
========================= */
:root{
  /* core */
  --bg:#07110b;
  --panel:#0b1710;
  --paper:#0a140e;

  --text:#ecf3ee;
  --muted:#a9b7ae;
  --line:rgba(236,243,238,.12);

  --accent:#156327;
  --accent2:#27a35b;

  --shadow:0 22px 70px rgba(0,0,0,.38);

  --radius:18px;
  --radius-sm:14px;
  --max:840px;

  /* surface system (dark defaults = opaques) */
  --surface-header: var(--bg);
  --surface-paper:  var(--paper);
  --surface-card:   #0d1c14; /* elev opaque */
  --surface-code:   #0d1c14;
  --surface-media:  var(--panel);

  /* “glass” only if enabled (light) */
  --glass-weak: transparent;
  --glass-mid:  transparent;

  /* borders */
  --border: 1px solid var(--line);
}

/* Light scheme: autorise le glass (les transparences “saines”) */
@media (prefers-color-scheme: light){
  :root{
    --bg:#f6fbf7;
    --panel:#ffffff;
    --paper:#ffffff;

    --text:#0f1713;
    --muted:#516158;
    --line:rgba(15,23,19,.12);

    --accent:#156327;
    --accent2:#1d8a43;

    --shadow:0 18px 55px rgba(15,23,19,.10);

    /* surfaces */
    --surface-header: color-mix(in oklab, var(--bg) 78%, transparent);
    --surface-paper:  color-mix(in oklab, var(--paper) 90%, transparent);
    --surface-card:   color-mix(in oklab, var(--panel) 70%, transparent);
    --surface-code:   color-mix(in oklab, var(--panel) 72%, transparent);
    --surface-media:  color-mix(in oklab, var(--panel) 70%, transparent);

    --glass-weak: color-mix(in oklab, var(--panel) 60%, transparent);
    --glass-mid:  color-mix(in oklab, var(--panel) 72%, transparent);
  }
}

/* Dark mobile: verrouillage anti-bugs (pas de backdrop-filter, pas d’overlays) */
@media (prefers-color-scheme: dark) and (max-width: 760px){
  :root{
    --surface-header: var(--bg);
    --surface-paper:  var(--paper);
    --surface-card:   #0d1c14;
    --surface-code:   #0d1c14;
    --surface-media:  var(--panel);

    --glass-weak: transparent;
    --glass-mid:  transparent;
  }
}

/* Fallback si color-mix non supporté */
@supports not (color: color-mix(in oklab, white, black)){
  @media (prefers-color-scheme: light){
    :root{
      --surface-header: rgba(246,251,247,.78);
      --surface-paper:  rgba(255,255,255,.92);
      --surface-card:   rgba(255,255,255,.85);
      --surface-code:   rgba(255,255,255,.88);
      --surface-media:  rgba(255,255,255,.85);

      --glass-weak: rgba(255,255,255,.60);
      --glass-mid:  rgba(255,255,255,.72);
    }
  }
}

/* =========================
   BASE
========================= */
*{ box-sizing:border-box; }
html,body{ height:100%; }
html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body{
  margin:0;
  color:var(--text);
  background-color: var(--bg);
  background-image:
    radial-gradient(900px 560px at 15% 0%, color-mix(in oklab, var(--accent) 28%, transparent), transparent 60%),
    radial-gradient(900px 560px at 90% 12%, color-mix(in oklab, var(--accent2) 18%, transparent), transparent 58%),
    linear-gradient(180deg, color-mix(in oklab, var(--bg) 92%, #000), var(--bg));
  background-repeat:no-repeat;
  background-size:100% 100%, 100% 100%, 100% 100%;
  background-attachment:fixed;

  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.6;
  text-rendering:optimizeLegibility;
}

/* Mobile perf: fixed background = jank possible */
@media (max-width: 760px){
  body{ background-attachment:scroll; }
}

/* layout */
.wrap{ max-width:var(--max); margin:0 auto; padding:24px; }

/* =========================
   ACCESSIBILITY
========================= */
.skip-link{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:16px; top:14px; width:auto; height:auto;
  padding:10px 12px;
  border-radius:12px;
  border:var(--border);
  background: var(--surface-card);
  color:var(--text);
  z-index:1000;
}

/* =========================
   HEADER / NAV
========================= */
.site-header{
  position:sticky; top:0; z-index:30;
  background: var(--surface-header);
  border-bottom:var(--border);
  backdrop-filter:saturate(140%) blur(10px);
}

/* dark mobile: kill backdrop-filter */
@media (prefers-color-scheme: dark) and (max-width:760px){
  .site-header{ backdrop-filter:none; }
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:var(--text);
  min-width:220px;
}

.logo-serp{
  width:38px; height:38px;
  border-radius:14px;
  position:relative;
  display:inline-block;
  overflow:hidden;

  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.18), transparent 45%),
    linear-gradient(135deg,
      color-mix(in oklab, var(--accent) 90%, #000),
      color-mix(in oklab, var(--accent2) 82%, #000)
    );

  box-shadow:
    0 16px 44px color-mix(in oklab, var(--accent) 26%, transparent),
    inset 0 0 0 1px color-mix(in oklab, #fff 14%, transparent);
}

/* Radar ring + grid + visitor dot */
.logo-serp::before{
  content:"";
  position:absolute;
  inset:6px;
  border-radius:999px;

  background:
    /* VISITOR DOT */
    radial-gradient(circle at 78% 28%, 
      #fff 0 1.4px,
      color-mix(in oklab,var(--accent2) 85%,#fff) 1.6px 2.6px,
      color-mix(in oklab,var(--accent2) 70%,transparent) 2.8px 5px,
      transparent 6px
    ),

    /* radar rings */
    radial-gradient(circle, transparent 56%, rgba(255,255,255,.18) 57% 58%, transparent 59%),
    radial-gradient(circle, transparent 32%, rgba(255,255,255,.14) 33% 34%, transparent 35%),

    /* grid */
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 6px);

  opacity:.65;
  pointer-events:none;
}

/* Sweep: ligne dure + trainée + glow (beaucoup plus visible à 38px) */
.logo-serp::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;
  pointer-events:none;

  background:
    /* ligne fine très bright */
    conic-gradient(
      from 0deg,
      transparent 0 49.4%,
      rgba(255,255,255,.95) 49.55% 49.75%,
      transparent 49.9% 100%
    ),
    /* trainée verte (large) */
    conic-gradient(
      from 0deg,
      transparent 0 46%,
      color-mix(in oklab, var(--accent2) 65%, transparent) 47%,
      color-mix(in oklab, var(--accent2) 40%, transparent) 50%,
      transparent 56% 100%
    );

  /* on tourne le calque complet, et on contrôle l’angle ici */
  transform: rotate(220deg);

  filter:
    drop-shadow(0 0 2px rgba(255,255,255,.75))
    drop-shadow(0 0 10px color-mix(in oklab, var(--accent2) 65%, transparent))
    drop-shadow(0 0 18px color-mix(in oklab, var(--accent2) 40%, transparent));

  opacity: .95;
  animation: radar-spin 2.2s linear infinite; /* un peu plus rapide = plus “présent” */
}

@keyframes radar-spin{
  to{ transform: rotate(580deg); } /* 220 + 360 */
}

@media (prefers-reduced-motion:reduce){
  .logo-serp::after{ animation:none; }
}








.brand-text{ display:flex; flex-direction:column; gap:1px; }
.brand-title{ font-weight:820; letter-spacing:-.25px; font-size:1.02rem; }
.brand-tag{ color:var(--muted); font-size:.90rem; }

.nav{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.nav-link{
  text-decoration:none;
  color:var(--muted);
  padding:10px 12px;
  border-radius:14px;
  border:1px solid transparent;
  transition:transform .12s ease, background-color .12s ease, border-color .12s ease, color .12s ease;
}
.nav-link:hover{
  color:var(--text);
  border-color:var(--line);
  background: var(--glass-weak);
  transform:translateY(-1px);
}
.nav-link.is-active{
  color:var(--text);
  border-color:color-mix(in oklab, var(--accent) 55%, var(--line));
  background: color-mix(in oklab, var(--accent) 18%, var(--surface-card));
}

/* =========================
   PAPER / CONTENT
========================= */
.paper{
  margin:22px 0 18px;
  padding:30px;
  border-radius:var(--radius);
  background: var(--surface-paper);
  border:var(--border);
  box-shadow:var(--shadow);
  overflow:hidden;
  position:relative;
}
.paper::before{
  content:"";
  position:absolute; left:-40px; top:-40px;
  width:180px; height:180px;
  border-radius:999px;
  background:radial-gradient(circle at 30% 30%,
    color-mix(in oklab, var(--accent) 24%, transparent),
    transparent 65%
  );
  pointer-events:none;
}

/* typography */
h1,h2,h3{ line-height:1.16; margin:0 0 14px; }
h1{ text-align:center; font-size:clamp(30px, 4vw, 46px); letter-spacing:-.8px; }
h2{ font-size:clamp(22px, 2.8vw, 30px); margin-top:28px; letter-spacing:-.35px; }
h3{ font-size:clamp(18px, 2.1vw, 22px); margin-top:18px; }

p{ margin:0 0 14px; }

a{
  color:color-mix(in oklab, var(--accent) 84%, var(--text));
  text-decoration-thickness:2px;
  text-underline-offset:3px;
}
a:hover{ color:var(--accent2); }

hr{
  border:none;
  border-top:var(--border);
  margin:22px 0;
}

/* media */
img{
  max-width:100%;
  height:auto;
  display:block;
  margin:18px auto;
  border-radius:16px;
  border:var(--border);
  background: var(--surface-media);
}
.paper img{
  width:100%;
  aspect-ratio:16 / 9;
  object-fit:cover;
}

/* embeds / tools */
.tool-frame{
  width:100%;
  min-height:520px;
  border:var(--border);
  border-radius:16px;
  background: var(--surface-media);
}
.tool-error{
  padding:12px 14px;
  border-radius:14px;
  border:1px solid color-mix(in oklab, #ff3b3b 55%, var(--line));
  background:color-mix(in oklab, #ff3b3b 10%, transparent);
}

/* quotes & code */
blockquote{
  margin:16px 0;
  padding:14px 16px;
  border-left:3px solid color-mix(in oklab, var(--accent) 70%, var(--line));
  background: var(--surface-card);
  border-radius:var(--radius-sm);
  color:color-mix(in oklab, var(--text) 92%, var(--muted));
}
code{
  padding:2px 7px;
  border-radius:10px;
  border:var(--border);
  background: var(--surface-code);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:.95em;
}
pre{
  padding:16px;
  overflow:auto;
  border-radius:16px;
  border:var(--border);
  background: var(--surface-code);
}
@media (prefers-color-scheme: light){
  pre{
    background:linear-gradient(180deg,
      color-mix(in oklab, var(--panel) 88%, transparent),
      color-mix(in oklab, var(--paper) 88%, transparent)
    );
  }
}
pre code{ border:none; background:transparent; padding:0; }

/* lists */
ul,ol{ margin:0 0 14px 20px; }
li{ margin:6px 0; }

/* highlights */
.highlight {
  background: var(--accent2);
  color: var(--panel);
  padding:1.5em;
  border-radius: .2em;
}

/* =========================
   POST LIST / PAGER
========================= */
.post-list ul{ list-style:none; margin:0; padding:0; }

.post-item{
  padding:14px;
  border:var(--border);
  border-radius:16px;
  margin:10px 0;
  background: var(--surface-card);
  position:relative;
}
/* overlay only on light (dark mobile = no overlays) */
.post-item::after{
  content:"";
  position:absolute; inset:0;
  border-radius:16px;
  pointer-events:none;
  border:1px solid color-mix(in oklab, var(--accent) 28%, transparent);
  opacity:.45;
}
@media (prefers-color-scheme: dark){
  .post-item::after{ opacity:0; }
}

.post-link{ text-decoration:none; font-weight:820; display:inline-block; }
.post-date{ display:inline-block; margin-left:10px; color:var(--muted); font-size:.95em; }
.post-excerpt{ margin-top:8px; color:var(--muted); }

.pager{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:16px;
  padding-top:12px;
  border-top:var(--border);
}
.pager-link{
  text-decoration:none;
  color:var(--text);
  padding:10px 12px;
  border-radius:14px;
  border:var(--border);
  background: var(--surface-card);
  transition:transform .12s ease, border-color .12s ease;
}
.pager-link:hover{
  border-color:color-mix(in oklab, var(--accent) 50%, var(--line));
  transform:translateY(-1px);
}
.pager-link.is-disabled{ opacity:.55; cursor:not-allowed; }
.pager-meta{ color:var(--muted); font-size:.95em; }

.muted{ color:var(--muted); }

/* =========================
   FOOTER
========================= */
.site-footer{
  margin-top:60px;
  padding:30px 20px;
  text-align:center;
  font-size:14px;
  color:var(--accent);
}
.footer-inner{ max-width:900px; margin:0 auto; }
.footer-credit{ margin:0; }
.footer-tagline{ margin:6px 0 16px; font-size:12px;}
.footer-links{ font-size:10px; color:var(--muted); }
.footer-links a{ color:inherit; text-decoration:none !important; }
.footer-links a:hover{ text-decoration:underline; }
.footer-links span{ margin:0 6px; }

/* =========================
   RESPONSIVE
========================= */
@media (max-width:760px){
  .header-inner{ flex-direction:column; align-items:flex-start; }
  .nav{ justify-content:flex-start; }
}
@media (max-width:640px){
  .paper{ padding:20px; }
  .pager{ flex-direction:column; align-items:stretch; }
  .pager-link,.pager-link.is-disabled{ text-align:center; }
}

/* =========================
   TABLES (MD)
========================= */
.md-table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin:1.5rem 0;
}
.md-table{
  width:100%;
  border-collapse:collapse;
  font-size:0.95rem;
  min-width:600px;
}
.md-table th,
.md-table td{
  padding:0.75rem 0.9rem;
  border-bottom:1px solid var(--line);
}
.md-table thead th{
  border-bottom:2px solid color-mix(in oklab, var(--line) 70%, transparent);
  background: var(--surface-card);
  color: var(--text);
  font-weight:600;
  white-space:nowrap;
}
.md-table tbody tr:hover{
  background: color-mix(in oklab, var(--surface-card) 92%, transparent);
}

/* =========================
   YOUTUBE
========================= */
.md-video{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  background:#000;
  border-radius:10px;
  overflow:hidden;
  margin:1.5rem 0;
}
.md-video iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}