/* Sustain Exec — variables CSS et styles de base v1.0
   Polices : <link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300;400;600;700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet"> */

:root {
  /* Palette */
  --se-nuit: #0F2233;
  --se-exec: #002D62;
  --se-blanc: #FFFFFF;
  --se-sapin: #3E6B57;
  --se-sauge: #9CC3AE;
  --se-pierre: #E0E0DB;
  --se-papier: #F7F6F2;
  --se-brume: #B9C3CB;
  --se-ardoise: #4A5A68;
  --se-signal: #0153C0;
  --se-or: #E4B01B;
  --se-score-bas: #F8696B;
  --se-score-moyen: #FFEB84;
  --se-score-haut: #63BE7B;

  /* Rôles */
  --se-text: var(--se-nuit);
  --se-text-muted: var(--se-ardoise);
  --se-bg: var(--se-blanc);
  --se-bg-subtle: var(--se-papier);
  --se-surface: var(--se-pierre);
  --se-border: var(--se-brume);
  --se-accent: var(--se-sapin);
  --se-link: var(--se-signal);
  --se-focus: var(--se-signal);

  /* Typographie */
  --se-font-display: 'Inter Tight', 'Inter', Arial, sans-serif;
  --se-font-body: 'Inter', Arial, sans-serif;
  --se-font-serif: 'Cormorant Garamond', Georgia, serif;

  /* Forme */
  --se-radius: 2px;
  --se-radius-md: 4px;
  --se-rule: 3px solid var(--se-nuit);
  --se-hairline: 1px solid var(--se-brume);
  --se-shadow: 0 8px 20px rgba(15, 34, 51, 0.08);
  --se-container: 1200px;
}

/* Mode sombre d'interface : fonds Nuit, accents Sauge */
[data-theme="dark"] {
  --se-text: var(--se-blanc);
  --se-text-muted: #B9C3CB;
  --se-bg: var(--se-nuit);
  --se-bg-subtle: #16304A;
  --se-surface: #1A3147;
  --se-border: #2F4A63;
  --se-accent: var(--se-sauge);
  --se-link: var(--se-sauge);
}

body { margin: 0; font-family: var(--se-font-body); font-size: 16px; line-height: 1.5; color: var(--se-text); background: var(--se-bg); }
h1, h2, h3 { font-family: var(--se-font-display); font-weight: 700; line-height: 1.12; letter-spacing: -0.01em; margin: 0; }
h1 { font-size: 48px; } h2 { font-size: 32px; } h3 { font-size: 22px; }
a { color: var(--se-link); } a:hover { color: var(--se-exec); }
:focus-visible { outline: 2px solid var(--se-focus); outline-offset: 2px; }

/* Briques de marque */
.se-kicker { font-size: 12px; font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase; color: var(--se-signal); }
.se-rule { border: 0; border-top: var(--se-rule); margin: 16px 0 24px; }
.se-kpi { font-family: var(--se-font-display); font-weight: 300; font-size: 56px; line-height: 1; }
.se-kpi-label { font-size: 13px; color: var(--se-text-muted); margin-top: 6px; }
.se-number { font-family: var(--se-font-display); font-weight: 300; color: var(--se-sapin); }
.se-tile { background: var(--se-surface); padding: 16px; border-radius: var(--se-radius); }
.se-action { background: var(--se-pierre); border-left: 3px solid var(--se-or); padding: 14px 16px; }
.se-source { font-size: 12px; color: var(--se-text-muted); }

.se-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; font: 600 15px var(--se-font-body); border-radius: var(--se-radius); border: 1px solid transparent; cursor: pointer; text-decoration: none; }
.se-btn--primary { background: var(--se-nuit); color: var(--se-blanc); }
.se-btn--primary:hover { background: var(--se-exec); color: var(--se-blanc); }
.se-btn--secondary { background: transparent; color: var(--se-nuit); border-color: var(--se-nuit); }
.se-btn--on-dark { background: var(--se-blanc); color: var(--se-nuit); }

.se-table { border-collapse: collapse; width: 100%; font-size: 14px; }
.se-table th { background: var(--se-exec); color: var(--se-blanc); font-weight: 600; text-align: left; padding: 10px 12px; }
.se-table td { border-bottom: var(--se-hairline); padding: 10px 12px; }
.se-score--bas { background: var(--se-score-bas); }
.se-score--moyen { background: var(--se-score-moyen); }
.se-score--haut { background: var(--se-score-haut); }

.se-card { background: var(--se-bg); border-top: 2px solid var(--se-nuit); padding: 24px 0 0; }
.se-input { min-height: 44px; padding: 0 12px; font: 400 15px var(--se-font-body); color: var(--se-text); border: 1px solid var(--se-brume); border-radius: var(--se-radius); background: var(--se-bg); }
.se-input:focus { border-color: var(--se-signal); outline: none; box-shadow: 0 0 0 2px rgba(1, 83, 192, 0.2); }