/* ============================================================
   GUICHET 9 — base.css
   Design tokens, reset, typography, paper texture, themes
   ============================================================ */

/* ---- Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Anton&family=Bebas+Neue&family=IBM+Plex+Mono:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  /* paper / ink — LIGHT (default) */
  --paper:        #f4e7d4;
  --paper-2:      #efdfc8;
  --paper-3:      #e9d7bb;
  --paper-edge:   #dcc7a6;
  --ink:          #1d1d1d;
  --ink-soft:     #443a2c;
  --ink-mute:     #8a7c64;
  --ink-faint:    #b3a587;

  /* brand */
  --red:          #b0392b;
  --red-deep:     #8c2a1e;
  --red-crit:     #ab2416;
  --red-darkest:  #5e0f06;

  /* guichet accents */
  --g01:          #0d354d; /* Présence — navy */
  --g02:          #492c63; /* Identité — purple */
  --g03:          #234a4a; /* Passage — dark teal */
  --g04:          #9e342a; /* Geste — red */
  --g05:          #b07f25; /* Réponse — amber */
  --g06:          #6b513a; /* Trace — brown */

  /* surfaces */
  --panel:        #f7ecda;
  --panel-line:   rgba(29,29,29,.42);
  --panel-line-2: rgba(29,29,29,.16);
  --hairline:     rgba(29,29,29,.14);
  --stamp-ghost:  rgba(29,29,29,.07);

  /* type families */
  --display: 'Oswald', 'IBM Plex Sans Arabic', sans-serif;
  --body:    'IBM Plex Sans', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --mono:    'IBM Plex Mono', 'IBM Plex Sans Arabic', ui-monospace, monospace;

  /* motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --anim-scale: 1; /* tweakable */

  /* layout */
  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 72px);
  --gauge-w: 78px;
}

/* DARK / dramatic theme */
[data-theme="dark"] {
  --paper:        #14120d;
  --paper-2:      #1b1812;
  --paper-3:      #221e16;
  --paper-edge:   #2c2619;
  --ink:          #ece1ce;
  --ink-soft:     #cdbfa6;
  --ink-mute:     #8d8068;
  --ink-faint:    #5c5340;
  --red:          #d8503e;
  --red-deep:     #b23a2a;
  --red-crit:     #e0432d;
  --red-darkest:  #7d1207;
  --g01:          #4f93b6;
  --g02:          #9a78c0;
  --g03:          #5fa897;
  --g04:          #d56a58;
  --g05:          #d6a648;
  --g06:          #b79372;
  --panel:        #1b1811;
  --panel-line:   rgba(236,225,206,.42);
  --panel-line-2: rgba(236,225,206,.16);
  --hairline:     rgba(236,225,206,.12);
  --stamp-ghost:  rgba(236,225,206,.06);
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.55;
  font-size: 17px;
  overflow-x: hidden;
  position: relative;
  transition: background .5s var(--ease), color .5s var(--ease);
}

/* paper grain + faint fibre texture via layered gradients */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(0,0,0,.025), transparent 38%),
    radial-gradient(circle at 88% 72%, rgba(0,0,0,.03), transparent 42%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
[data-theme="dark"] body::before { mix-blend-mode: screen; opacity:.6; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.eyebrow, .label, .mono {
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.eyebrow { font-size: 12px; color: var(--ink-mute); }

h1,h2,h3,h4 { font-family: var(--display); font-weight: 700; line-height: .98; letter-spacing: -.01em; text-wrap: balance; }

.display {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: .92;
  letter-spacing: -.005em;
}

[lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3, [lang="ar"] .display {
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  letter-spacing: 0;
  line-height: 1.18;
}
[lang="ar"] body, [dir="rtl"] body { font-family: 'IBM Plex Sans Arabic', sans-serif; }
[lang="ar"] .mono, [lang="ar"] .eyebrow, [lang="ar"] .label { letter-spacing: .04em; }

p { text-wrap: pretty; }

/* ============================================================
   LAYOUT HELPERS
   ============================================================ */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { position: relative; z-index: 1; padding-block: clamp(54px, 8vw, 104px); }
.section-num {
  font-family: var(--mono); font-size: 12px; letter-spacing: .2em;
  color: var(--red); text-transform: uppercase; display:flex; gap:10px; align-items:center;
}
.section-num::before { content:""; width: 34px; height: 1px; background: var(--red); display:inline-block; }

.divider { height: 1px; background: var(--hairline); border: none; }

/* dotted/perforated edge */
.perf { border-top: 2px dashed var(--panel-line-2); }

/* utility */
.sr-only { position:absolute; width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0; }
.nowrap { white-space: nowrap; }
.accent { color: var(--red); }

/* hide elements not in active language handled by JS; ensure no FOUC */
[data-i18n], [data-i18n-html] { transition: opacity .25s var(--ease); }

/* reduced-motion + anim scale honoring */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .12s !important; }
}