/* Jetons de design partages par le site public, l'apercu et le back office.
   Palette extraite du wordmark elly energie (cyan → bleu electrique → royal). */

:root {
  --navy-900: #03103a;
  --navy-800: #061a4a;
  --navy-700: #0a2872;
  --navy-600: #1240a0;
  --navy-900-rgb: 3, 16, 58;
  --royal: #0041ce;
  --electric: #0084fa;
  --electric-rgb: 0, 132, 250;
  --cyan-500: #23b1fb;
  --cyan-400: #6de6f9;
  --cyan-300: #9ef6fc;
  --ink: #0a2872;
  --body: #3d4f6b;
  --body-on-navy: #b7c8e6;
  --surface: #ffffff;
  --surface-alt: #f2f6fb;
  --line: #dce6f2;
  --danger: #c62828;
  --success: #1a9e6f;
  --shell: 1200px;
  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 10px;
  --shadow-card: 0 24px 60px rgba(3, 16, 58, 0.28);
  --shadow-soft: 0 10px 30px rgba(10, 40, 114, 0.08);
  --font-head: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-hand: "Caveat", "Segoe Script", cursive;
}

/* Dimensionnement des icones, partage par le site, l'apercu et le back office. */

.ico { width: 32px; height: 32px; color: currentColor; flex: none; }
.ico--sm { width: 20px; height: 20px; }
.ico--lg { width: 42px; height: 42px; }
.ico--xl { width: 52px; height: 52px; }