/* ============================================================
   BASTILLE LABS — DESIGN TOKENS · V1
   48°51'11"N 002°22'09"E · EST. 2026
   Fontes (Google Fonts) :
   <link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,500;6..96,600&family=IBM+Plex+Mono:wght@400;500;600&family=Instrument+Sans:wght@400;500;600&display=swap" rel="stylesheet">
   ============================================================ */

:root {
  /* ---- Couleurs · mode clair (défaut) ---- */
  --parchemin: #F0EDE3;   /* fond principal */
  --encre: #1C1B16;       /* texte, symbole */
  --rouge: #A82C21;       /* Rouge Oxyde — accent, token, badge */
  --rouge-vif: #C8402F;   /* accent sur fonds sombres */
  --trait: rgba(28, 27, 22, .16);       /* lignes fines */
  --trait-fort: rgba(28, 27, 22, .34);  /* cadres, séparateurs */
  --muted: rgba(28, 27, 22, .55);       /* texte secondaire */
  --surface: rgba(240, 237, 227, .6);   /* panneaux */

  /* ---- Typographie ---- */
  --font-display: 'Bodoni Moda', 'Didot', serif;        /* titres, wordmark */
  --font-mono: 'IBM Plex Mono', monospace;              /* labels, data, annotations */
  --font-body: 'Instrument Sans', system-ui, sans-serif;/* corps de texte */

  /* Échelle typographique */
  --text-display: clamp(40px, 8vw, 76px);  /* héros — Bodoni 500 */
  --text-h1: clamp(28px, 5vw, 44px);       /* Bodoni 500, ls .04em */
  --text-h2: clamp(21px, 3.5vw, 28px);     /* Bodoni 500 */
  --text-h3: 17px;                          /* Instrument Sans 600 */
  --text-body: 16px;                        /* Instrument Sans 400, lh 1.6 */
  --text-small: 13.5px;
  --text-label: 11px;                       /* Plex Mono, uppercase, ls .18em */
  --text-micro: 9.5px;                      /* Plex Mono, uppercase, ls .16em */

  /* ---- Espacement · système U (le bloc de la citadelle) ---- */
  --u: 8px;
  --u2: 16px;   /* écart symbole↔texte du logo, gouttières serrées */
  --u3: 24px;
  --u4: 32px;
  --u6: 48px;
  --u8: 64px;
  --u12: 96px;  /* pas de la grille verticale de fond */

  /* ---- Divers ---- */
  --radius: 2px;          /* angles quasi vifs — esprit planche technique */
  --radius-bloc: 3px;     /* blocs, badges */
  --hairline: 1px solid var(--trait);
  --frame: 1px solid var(--trait-fort);
}

/* ---- Mode sombre : appliquer .dark sur <html> ou <body> ---- */
.dark {
  --parchemin: #1C1B16;
  --encre: #F0EDE3;
  --rouge: #C8402F;
  --trait: rgba(240, 237, 227, .14);
  --trait-fort: rgba(240, 237, 227, .3);
  --muted: rgba(240, 237, 227, .55);
  --surface: rgba(240, 237, 227, .04);
}

/* ============================================================
   BASE
   ============================================================ */
body {
  background: var(--parchemin);
  /* grille verticale de la planche d'architecte */
  background-image: repeating-linear-gradient(90deg,
    var(--trait) 0 1px, transparent 1px var(--u12));
  color: var(--encre);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2 { font-family: var(--font-display); font-weight: 500; letter-spacing: .04em; }
h3 { font-family: var(--font-body); font-weight: 600; }

a { color: var(--rouge); text-decoration: none; border-bottom: 1px solid currentColor; }
a:hover { opacity: .75; }

/* ============================================================
   COMPOSANTS DE BASE
   ============================================================ */

/* Label technique — ex. « ● FIG. 01 — ÉLÉVATION » */
.label {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted);
}
.label::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--rouge);
}

/* Badge — même ADN que le badge LABS du logo */
.badge {
  font-family: var(--font-mono); font-weight: 600;
  font-size: 10px; letter-spacing: .24em; text-transform: uppercase;
  background: var(--rouge); color: #F0EDE3;
  padding: 5px 8px 4px 10px; border-radius: var(--radius-bloc);
}

/* Boutons */
.btn {
  display: inline-block;
  font-family: var(--font-mono); font-weight: 600;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  padding: 14px 26px; border-radius: var(--radius);
  background: var(--encre); color: var(--parchemin);
  border: 1px solid var(--encre); cursor: pointer;
}
.btn:hover { background: var(--rouge); border-color: var(--rouge); color: #F0EDE3; }
.btn--secondary { background: transparent; color: var(--encre); }
.btn--secondary:hover { background: var(--encre); color: var(--parchemin); }

/* Panneau / carte — cadre de figure */
.panel { border: var(--frame); background: var(--surface); }
.panel > .panel-head { padding: 12px 16px; border-bottom: var(--hairline); }
.panel > .panel-body { padding: var(--u3); }

/* Tableau de données */
.table-data { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 12.5px; }
.table-data th {
  text-align: left; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  font-size: 10px; color: var(--muted);
  padding: 10px 12px; border-bottom: var(--frame);
}
.table-data td { padding: 10px 12px; border-bottom: var(--hairline); }
.table-data td.up { color: var(--rouge); }

/* Filet de pied de page */
.footer-rule {
  border-top: var(--frame); padding-top: var(--u2);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--u);
  font-family: var(--font-mono); font-size: var(--text-micro);
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}