/*
================================================================================
  ◎ DEMO KXCLOUD — SOCLE GLOBAL (FUSION ADN, ADR-007)
  Fichier  : /opt/cortex/demo/src/css/global.css
  Rôle     : Reset, fontes physiques locales, typographie fluide.
             AUCUN @import : chaque feuille est liée DIRECTEMENT depuis
             index.html (<link> parallèles) — la résolution @import côté
             navigateur est un point de fragilité à échec silencieux,
             éliminé en v66.1. Ordre de cascade : voir index.html.
  Version  : v4.1 — Carnet d'artisan sur établi · le vide est fonctionnel
  Doctrine : docs/06 ébénisterie · STM-MAO · zéro dépendance · zéro 8px
================================================================================
*/

/* ── FONTES PHYSIQUES LOCALES (souveraineté — déjà embarquées, ADR-007) ──── */
@font-face {
  font-family: "Wotfard";
  src: url("/fonts/wotfard-regular-webfont.ttf") format("truetype");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/BricolageGrotesque-Bold.ttf") format("truetype");
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto Mono";
  src: url("/fonts/RobotoMono-VariableFont.ttf") format("truetype");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}

/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  ◆◆◆  IMAGE DE FOND DE PAGE — UNIQUE LIGNE À MODIFIER : --page-bg  ◆◆◆ ║
   ╠══════════════════════════════════════════════════════════════════════╣
   ║  1. Dépose ton image dans  demo/assets/img/  (servie via /assets/).   ║
   ║  2. Remplace  --page-bg: none;  ci-dessous par UNE des formes :       ║
   ║                                                                      ║
   ║     • Simple (PNG / WebP / AVIF / SVG — un seul fichier) :            ║
   ║         --page-bg: url("/assets/img/mon-fond.webp");                  ║
   ║                                                                      ║
   ║     • Multi-format (le navigateur choisit le plus moderne qu'il      ║
   ║       supporte, repli automatique) :                                  ║
   ║         --page-bg: image-set(                                         ║
   ║           url("/assets/img/fond.avif") type("image/avif"),           ║
   ║           url("/assets/img/fond.webp") type("image/webp"),           ║
   ║           url("/assets/img/fond.png")  type("image/png"));           ║
   ║                                                                      ║
   ║  Formats acceptés : WebP · AVIF · PNG · SVG. Cible : < 500 Ko même   ║
   ║  en haute résolution (jusqu'à 6000px — cover recadre proprement).    ║
   ║  none = fond uni Washi actuel (dégradation gracieuse, page intacte). ║
   ║  Décor CSS pur : jamais render-blocking, jamais LCP. Le voile        ║
   ║  --page-veil garantit le contraste WCAG du texte par-dessus.         ║
   ╚══════════════════════════════════════════════════════════════════════╝ */
:root {

  /*  ▼▼▼  POINTE TON IMAGE ICI  ▼▼▼  (none = fond Washi uni)  */
  --page-bg: url("/assets/img/chromatography_blue-tone.webp");
  /*  ▲▲▲  POINTE TON IMAGE ICI  ▲▲▲  */

  /* Voile de lisibilité entre l'image et le contenu (Washi, WCAG préservé).
     0.85 = 85 % opaque : le texte reste ≥ 4.5:1 quel que soit le fond.
     Baisser vers 0.78 laisse l'image plus présente (vérifier le contraste). */
  --page-veil: oklch(0.98 0.005 82 / 0.75);

  /* Verre fumé ambré des panneaux : proportion de surface opaque (v66.4).
     Repose AU-DESSUS du voile — aucun double-voile, calques cohérents. */
  --glass-paper: color-mix(in oklab, var(--bg-paper) 78%, transparent);
  --glass-structure: color-mix(in oklab, var(--bg-structure) 76%, transparent);

  /* Grain fractal subtil — UN SEUL filtre, réutilisé par un seul calque */
  --grain: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160"><filter id="g"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter><rect width="100%25" height="100%25" filter="url(%23g)" opacity="0.5"/></svg>');
}

/* ── RESET (STM-MAO) ───────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  /* Canvas de repli : peint AVANT le calque .page-bg (z-index:-1) — il ne
     le masque pas, il assure juste un fond si le calque échouait (v66.11). */
  background-color: var(--bg-deep);
  overflow-x: clip; /* verrou anti-défilement horizontal (mobile, v66.5) */
}

body {
  /* TRANSPARENT (v66.11) : body est peint APRÈS le calque .page-bg ; un fond
     opaque ici recouvrait l'image. La couleur de base + le voile Washi sont
     désormais portés par .page-bg (dégradation gracieuse si --page-bg:none). */
  background-color: transparent;
  color: var(--ink-2);
  font-family: "Wotfard", system-ui, sans-serif;
  font-size: var(--text-base);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── HIÉRARCHIE TYPOGRAPHIQUE PHYSIQUE ─────────────────────────────────────── */
h1, h2, h3 {
  font-family: "Bricolage Grotesque", sans-serif;
  color: var(--ink);
  line-height: 1.15;
}

h1 {
  font-weight: 900;
  letter-spacing: -0.04em;
  font-size: var(--text-xl);
}

h2 {
  font-weight: 800;
  letter-spacing: -0.03em;
  font-size: var(--text-lg);
}

h3 {
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: var(--text-base);
}

p {
  color: var(--ink-2);
}

a {
  color: var(--accent-ink);
  text-decoration: none;
  transition: color var(--duration-z5) ease;
}

a:hover {
  color: var(--accent);
}

code, .mono {
  font-family: "Roboto Mono", monospace;
  font-variant-numeric: tabular-nums; /* chiffres tabulaires — précision d'horloger */
}

/* ── ANNOTATIONS D'ÉTABLI (étiquettes techniques) ──────────────────────────── */
.label-technical {
  font-family: "Roboto Mono", monospace;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
}

/* ── ACCESSIBILITÉ ─────────────────────────────────────────────────────────── */
:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-md);
}

/* Mobile : corps ≥ 16px — lisibilité et anti-zoom iOS (v66.6) ;
   interlignage légèrement aéré pour le confort de lecture sur petit
   écran (v66.8). */
@media (max-width: 767px) {
  body {
    font-size: 1rem;
    line-height: 1.75;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── UTILITAIRES ───────────────────────────────────────────────────────────── */
.hide-scrollbars {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.hide-scrollbars::-webkit-scrollbar {
  display: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}