/* QASSUR — la chrome du produit : la charte QENTRA, couche 1.
   Écrite depuis export/tokens.css de la charte et la paire du produit (--qassur-n sur la nuit,
   --qassur-p sur l'os). Se charge AVANT app.css, plateforme.css et site.css : elle pose les
   polices, les jetons et les sols ; les feuilles suivantes s'en servent. Aucune règle en ligne,
   aucune ressource extérieure — les sept faces sont servies depuis /assets/fonts/ (168 Ko).
   Le contrat est dans contrat-charte-marque-blanche.md. */

@font-face { font-family: 'Instrument Sans'; src: url(/assets/fonts/instrument-sans.woff2) format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url(/assets/fonts/instrument-serif.woff2) format('woff2');
  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url(/assets/fonts/instrument-serif-italic.woff2) format('woff2');
  font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Martian Mono'; src: url(/assets/fonts/martian-mono.woff2) format('woff2');
  font-weight: 100 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Reem Kufi'; src: url(/assets/fonts/reem-kufi.woff2) format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans Arabic'; src: url(/assets/fonts/plex-arabic.woff2) format('woff2');
  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans Arabic'; src: url(/assets/fonts/plex-arabic-semibold.woff2) format('woff2');
  font-weight: 600; font-style: normal; font-display: swap; }

:root {
  /* — la palette brute de la charte — */
  --nuit-900: #071517; --nuit-800: #0A1D20; --nuit-700: #0F2A2E; --nuit-600: #163A3F; --nuit-500: #1F4E54;
  --petrol-700: #0B4F4E; --petrol-500: #0F6B68; --petrol-400: #1B8A84; --petrol-300: #4FB3AB;
  --brass-200: #F3DFA6; --brass-300: #EBCF8B; --brass-400: #D9B461; --brass-500: #C2973F; --brass-600: #9A7328; --brass-700: #7A5A1C; --brass-800: #5C4213;
  --bone-50: #FAF7F1; --bone-100: #F2ECE2; --bone-200: #E6DDCD; --bone-300: #CFC4B0; --bone-400: #B8ADA0;
  --ink-900: #1B1713; --ink-700: #574E45; --ink-600: #6E6458;
  --lime-n: #C8E05A; --lime-p: #5A7508; --rust-n: #DF7878; --rust-p: #A83232;
  --qassur-n: #D99F63; --qassur-p: #955F20;

  /* — les faces — */
  --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --sans: 'Instrument Sans', 'Helvetica Neue', system-ui, sans-serif;
  --mono: 'Martian Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --ar-display: 'Reem Kufi', 'Noto Kufi Arabic', sans-serif;
  --ar-text: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', system-ui, sans-serif;

  /* — le mouvement : quatre durées, trois courbes — */
  --dur-tick: 140ms; --dur-turn: 300ms; --dur-sweep: 640ms; --dur-engrave: 1100ms;
  --ease-settle: cubic-bezier(.16, 1, .3, 1);
  --ease-dial: cubic-bezier(.34, 1.45, .5, 1);
  --ease-sweep: cubic-bezier(.65, 0, .35, 1);

  /* — la forme : rayon 2, 6 pour ce qu'on touche, ombre dure et décalée — */
  --radius: 2px; --radius-touche: 6px; --gut: clamp(16px, 4vw, 40px); --shell: 1240px;
  --ombre: 3px 3px 0 rgba(27, 23, 19, .14); --ombre-haute: 6px 6px 0 rgba(27, 23, 19, .16);
  --brass-linear: linear-gradient(100deg, #7A5A1C, #D9B461 18%, #F3DFA6 31%, #B98E37 50%, #8A6521 64%, #E3C377 82%, #7A5A1C);

  /* — le sol de papier (par défaut) — */
  --bg: var(--bone-50); --bg-raised: #F4EFE6; --bg-high: #EBE4D7;
  --fg: var(--ink-900); --fg-muted: var(--ink-700); --fg-dim: var(--ink-600);
  --accent-charte: var(--brass-700); --accent-fill: var(--brass-500); --accent-line: var(--brass-600); --on-accent: var(--nuit-900);
  --live: var(--lime-p); --alert: var(--rust-p);
  --line-charte: rgba(27, 23, 19, .14); --line-2-charte: rgba(27, 23, 19, .3); --line-brass: rgba(122, 90, 28, .45);
  --focus: var(--petrol-500); --night: 0;
  --p-qassur: var(--qassur-p);
}
/* Le sol de nuit : sur la connexion, la barre et les blocs marqués `.sol-nuit`. Deux blocs
   identiques, pour le thème du système et pour un choix explicite. */
.sol-nuit, [data-theme="dark"] {
  --bg: var(--nuit-800); --bg-raised: var(--nuit-700); --bg-high: var(--nuit-600);
  --fg: var(--bone-100); --fg-muted: var(--bone-400); --fg-dim: #9DA8A4;
  --accent-charte: var(--brass-300); --accent-fill: var(--brass-400); --accent-line: var(--brass-400); --on-accent: var(--nuit-900);
  --live: var(--lime-n); --alert: var(--rust-n);
  --line-charte: rgba(242, 236, 226, .13); --line-2-charte: rgba(242, 236, 226, .3); --line-brass: rgba(217, 180, 97, .45);
  --focus: var(--brass-300); --night: 1;
  --p-qassur: var(--qassur-n);
}

/* — Les dessins de la charte (src/marque.js les écrit sans attribut style) — */
.qm-q, .qm-trait { color: var(--p-qassur); stroke: var(--p-qassur); }
.qm-mot { color: var(--fg); }
.qm-tail { stroke: var(--brass-500); }
.qm-mini { display: inline-block; vertical-align: -2px; margin-right: 6px; }
.qm-grand { display: block; margin: 0 auto 4px; }
.by-qentra { display: inline-flex; align-items: center; white-space: nowrap; letter-spacing: .04em; }
.plaque { display: block; width: 100%; height: 100%; }

/* L'anneau tourne et le pointeur se pose au chargement — une fois, 640 ms. Sous mouvement
   réduit, le bloc-marque est simplement là. */
@media (prefers-reduced-motion: no-preference) {
  .lockup .qm-q svg { transform-origin: 50px 50px; animation: qm-tourne var(--dur-sweep) var(--ease-settle) both; }
  .lockup .qm-tail { stroke-dasharray: 60; stroke-dashoffset: 60; animation: qm-pose var(--dur-turn) var(--ease-settle) var(--dur-turn) forwards; }
}
@keyframes qm-tourne { from { transform: rotate(-24deg); } to { transform: none; } }
@keyframes qm-pose { to { stroke-dashoffset: 0; } }

/* — L'arabe : ses faces, sa direction, son interlignage, jamais d'espacement de lettres — */
[lang="ar"] { font-family: var(--ar-text); letter-spacing: 0; line-height: 1.85; direction: rtl; }
[lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3, h1[lang="ar"], h2[lang="ar"] { font-family: var(--ar-display); line-height: 1.5; }