/* Charte graphique des applications SONU (REF-004), commune à l'accueil et
   à la visionneuse. Sombre par défaut, sans suivre la préférence système ;
   le choix clair est posé sur html[data-theme] par le script inline du <head>
   (clé localStorage "theme"). Polices servies par le site (fonts/). */

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2-variations"),
       url("fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url("fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
}

:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --sonu-bg: #1a1a1a;
  --sonu-bar: rgba(26, 26, 26, 0.88);
  --sonu-surface: #222222;
  --sonu-surface-2: #2a2a2a;
  --sonu-line: #313131;
  --sonu-line-strong: #454545;
  --sonu-text: #ececec;
  --sonu-muted: #9b9b9b;
  --sonu-link: #45a285;
  --sonu-btn-text: #111111;
  --sonu-accent: #a2c857;
  --sonu-accent-bg: rgba(162, 200, 87, 0.2);
  --sonu-code-bg: #151515;
  /* Couleurs propres au site TS341 */
  --module-traitement: #45a285;
  --module-outils: #a2c857;
  --visionneuse-scene: #111111;
  --modale-voile: rgba(0, 0, 0, 0.55);
}

:root[data-theme="light"] {
  color-scheme: light;
  --sonu-bg: #f7f6f2;
  --sonu-bar: rgba(247, 246, 242, 0.9);
  --sonu-surface: #ffffff;
  --sonu-surface-2: #efeee9;
  --sonu-line: #e4e2dc;
  --sonu-line-strong: #cdcac2;
  --sonu-text: #1c1c1b;
  --sonu-muted: #62615c;
  --sonu-link: #2f7560;
  --sonu-btn-text: #ffffff;
  --sonu-accent: #2f7560;
  --sonu-accent-bg: #e3efe9;
  --sonu-code-bg: #f0efea;
  --module-traitement: #2f7560;
  --module-outils: #4d7a1c;
  /* La scène de la visionneuse reste sombre dans les deux thèmes. */
  --visionneuse-scene: #1c1c1b;
  --modale-voile: rgba(0, 0, 0, 0.55);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--sonu-bg);
  color: var(--sonu-text);
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 650;
  letter-spacing: -0.01em;
}
a { color: inherit; }
::selection { background: var(--sonu-accent-bg); }
:focus-visible { outline: 2px solid var(--sonu-accent); outline-offset: 2px; }