/* ============================================================
   SITM — BASE + VISUAL LANGUAGE
   Resets légers + motifs réutilisables (ligne de coupe, gabarit
   technique, overlay bleu nuit). Premium, sobre, directement
   utilisable sur une landing page.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--text-primary);
  background: var(--surface-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Links — accent SITM par défaut */
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px; }

/* Eyebrow / label technique mono */
.sitm-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--accent-strong);
}

/* Mot accentué orange dans les accroches */
.sitm-accent { color: var(--accent-strong); }

/* --- Motif "trajectoire de coupe" : diagonale d'énergie laser +
   repères d'angle façon marques de calibrage machine. Remplace
   l'ancien quadrillage plan — plus premium, moins "papier millimétré". */
.sitm-blueprint {
  position: relative;
  background-color: var(--bg-base);
  overflow: hidden;
}
.sitm-blueprint::before {
  content: "";
  position: absolute; inset: -10% -10%;
  background-image: linear-gradient(124deg,
    transparent calc(50% - 1px),
    var(--accent-glow) 50%,
    transparent calc(50% + 1px));
  opacity: 0.16;
  pointer-events: none;
}
.sitm-blueprint::after {
  content: "";
  position: absolute; inset: 28px;
  background-image:
    linear-gradient(var(--line-on-dark-strong) 1.5px, transparent 1.5px),
    linear-gradient(90deg, var(--line-on-dark-strong) 1.5px, transparent 1.5px),
    linear-gradient(var(--line-on-dark-strong) 1.5px, transparent 1.5px),
    linear-gradient(90deg, var(--line-on-dark-strong) 1.5px, transparent 1.5px),
    linear-gradient(var(--line-on-dark-strong) 1.5px, transparent 1.5px),
    linear-gradient(90deg, var(--line-on-dark-strong) 1.5px, transparent 1.5px),
    linear-gradient(var(--line-on-dark-strong) 1.5px, transparent 1.5px),
    linear-gradient(90deg, var(--line-on-dark-strong) 1.5px, transparent 1.5px);
  background-repeat: no-repeat;
  background-size: 1.5px 22px, 22px 1.5px, 1.5px 22px, 22px 1.5px, 1.5px 22px, 22px 1.5px, 1.5px 22px, 22px 1.5px;
  background-position:
    top left, top left,
    top right, top right,
    bottom left, bottom left,
    bottom right, bottom right;
  pointer-events: none;
}
.sitm-blueprint > * { position: relative; z-index: 2; }

/* --- Motif "ligne de coupe" : filet + tiret orange ------------ */
.sitm-cutline {
  position: relative;
  border-top: var(--bw-hair) solid var(--line-on-dark);
}
.sitm-cutline::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 64px; height: 2px;
  background: var(--accent);
}

/* --- Overlay bleu nuit sur photo ------------------------------ */
.sitm-photo-overlay {
  position: relative;
  isolation: isolate;
}
.sitm-photo-overlay::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(5,14,31,0.55) 0%,
    rgba(5,14,31,0.78) 55%,
    rgba(5,14,31,0.94) 100%);
  z-index: 1;
}

/* --- Cadre technique (coins angulaires) ----------------------- */
.sitm-tech-frame {
  position: relative;
  border: var(--bw-hair) solid var(--line-on-dark-strong);
}
.sitm-tech-frame::before,
.sitm-tech-frame::after {
  content: "";
  position: absolute;
  width: 10px; height: 10px;
  border-color: var(--accent);
  border-style: solid;
}
.sitm-tech-frame::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.sitm-tech-frame::after  { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }

/* Container helper */
.sitm-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter-desktop);
}

/* --- Logo tinting ------------------------------------------------
   The source mark (assets/sitm-logo-white.svg) ships with no fill
   set, so it renders in the browser's default black. Force it to a
   flat color via CSS filter rather than editing the file (keeps the
   original brand asset byte-for-byte intact).
   .sitm-logo-white  -> pure white, for dark / photo-overlay surfaces
   (on light surfaces the unfiltered default black already reads
   correctly as "navy" at logo scale — no filter needed there). */
.sitm-logo-white { filter: brightness(0) invert(1); }