/* ══════════════════════════════
   MENTIONS LÉGALES — Grain identique archives/single
══════════════════════════════ */
#global-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; opacity: 0.45; mix-blend-mode: multiply; }
.glitch-overlay {
  position: fixed; inset: 0; pointer-events: none; z-index: 2;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(26,26,26,0.022) 2px, rgba(26,26,26,0.022) 4px);
  animation: scanlines 8s linear infinite;
}
@keyframes scanlines { 0% { background-position: 0 0; } 100% { background-position: 0 100px; } }
.glitch-slice { position: fixed; left: 0; right: 0; height: 2px; pointer-events: none; z-index: 3; opacity: 0; animation: glitchSlice 6s ease-in-out infinite; }
.glitch-slice:nth-child(2) { animation-delay: 2.3s; animation-duration: 7.5s; height: 1px; background: rgba(212,232,66,0.5); }
.glitch-slice:nth-child(3) { animation-delay: 4.8s; animation-duration: 5.2s; height: 3px; background: rgba(200,184,154,0.6); }
@keyframes glitchSlice {
  0%, 89%, 100% { opacity: 0; top: 30%; transform: translateX(0); }
  90% { opacity: 0.5; top: 42%; transform: translateX(-10px); }
  91% { opacity: 0.3; top: 42%; transform: translateX(14px); }
  92% { opacity: 0.6; top: 60%; transform: translateX(-5px); }
  93% { opacity: 0; }
}

/* La nav (transparente + contraste adaptatif) est gérée globalement
   dans main.css / main.js via la classe .on-light. */

/* ══════════════════════════════
   PAGE
══════════════════════════════ */
#page { position: relative; z-index: 4; max-width: 860px; margin: 0 auto; padding: 11rem 3.5rem 8rem; }
.ml-eyebrow { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--accent); margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.6rem; }
.ml-eyebrow::before { content: ''; width: 16px; height: 1px; background: var(--accent); }
.ml-title { font-family: var(--display); font-size: clamp(3.5rem, 7vw, 6.5rem); text-transform: uppercase; line-height: 0.9; letter-spacing: -0.02em; color: var(--encre); margin-bottom: 5rem; }
.ml-section { padding: 3rem 0; border-top: 1px solid rgba(26,26,26,0.1); }
.ml-section:last-of-type { border-bottom: 1px solid rgba(26,26,26,0.1); margin-bottom: 4rem; }
.ml-section-num { font-family: var(--mono); font-size: 0.52rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); margin-bottom: 1rem; }
.ml-section-title { font-family: var(--display); font-size: 1.5rem; text-transform: uppercase; color: var(--encre); line-height: 1; margin-bottom: 1.5rem; }
.ml-section-body { font-family: var(--mono); font-size: 0.75rem; line-height: 2.05; color: rgba(26,26,26,0.65); }
.ml-section-body p { margin-bottom: 0.75rem; }
.ml-section-body p:last-child { margin-bottom: 0; }
.ml-section-body a { color: var(--encre); text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s; }
.ml-section-body a:hover { color: var(--accent); }
.ml-section-body strong { color: var(--encre); font-weight: 600; }
.ml-back { display: inline-flex; align-items: center; gap: 0.75rem; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(26,26,26,0.45); text-decoration: none; transition: color 0.2s; }
.ml-back:hover { color: var(--accent); }

/* Responsive */
@media (max-width: 768px) {
  #page { padding: 7rem 1.5rem 4rem; }
  .ml-title { font-size: clamp(2.5rem, 10vw, 4rem); }
}