/* ============================================================
   INFOSOLUTIONS30 — Thème & directions
   Direction A : "Nuit Cévenole"     — fidèle au site actuel, sublimé
   Direction B : "Carbone Électrique"— plus moderne, contrasté, cyan
   Direction C : "Clair Premium"     — hero sombre, sections claires
   ============================================================ */

:root {
  /* Typo (surchargée par les tweaks) */
  --font-display: 'Poppins', sans-serif;
  --font-body: 'Poppins', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Géométrie & effets (tweaks) */
  --radius: 16px;
  --fx: 1;                /* intensité globale des effets 0–1 */
  --btn-radius: 999px;    /* style des boutons */
  --space: 1;             /* échelle d'espacement vertical */
  --content-w: 1180px;    /* largeur du contenu */

  /* Accent (tweak) */
  --accent: #5B7CFA;
  --accent-2: #8B5CF6;
  --accent-ink: #ffffff;

  /* dérivés */
  --accent-soft: color-mix(in oklab, var(--accent) 14%, transparent);
  --accent-line: color-mix(in oklab, var(--accent) 32%, transparent);
  --glow: 0 0 calc(40px * var(--fx)) color-mix(in oklab, var(--accent) calc(28% * var(--fx)), transparent);
}

/* ---------- Direction A — Nuit Cévenole (défaut) ---------- */
body[data-dir="nuit"] {
  --bg: #0A1426;
  --bg-alt: #0C1830;
  --surface: #101F3A;
  --surface-2: #14254464;
  --terminal: #0B1730;
  --line: #1E2F52;
  --text: #EAF0FF;
  --muted: #93A3C4;
  --faint: #5E6F94;
  --header-bg: #0A1426E6;
  --hero-grad: radial-gradient(1100px 600px at 70% -10%, color-mix(in oklab, var(--accent) 13%, transparent), transparent 70%),
               radial-gradient(800px 500px at 10% 30%, color-mix(in oklab, var(--accent-2) 9%, transparent), transparent 70%);
  --card-shadow: 0 18px 50px -18px rgba(3, 8, 20, .8);
  --rain-color: 91, 124, 250;
  --rain-alpha: .16;
}

/* ---------- Direction B — Carbone Électrique ---------- */
body[data-dir="carbone"] {
  --bg: #05080F;
  --bg-alt: #070C17;
  --surface: #0B121F;
  --surface-2: #0E182AAA;
  --terminal: #080F1C;
  --line: #16233C;
  --text: #F2F5FF;
  --muted: #8B97B5;
  --faint: #56627F;
  --header-bg: #05080FE8;
  --hero-grad: radial-gradient(1200px 650px at 75% -15%, color-mix(in oklab, var(--accent) 17%, transparent), transparent 70%),
               radial-gradient(700px 450px at 5% 40%, color-mix(in oklab, var(--accent-2) 10%, transparent), transparent 70%);
  --card-shadow: 0 22px 60px -20px rgba(0, 0, 0, .9);
  --rain-color: 61, 99, 245;
  --rain-alpha: .2;
}
body[data-dir="carbone"] { --accent-2-default: #22D3EE; }

/* ---------- Direction C — Clair Premium ---------- */
body[data-dir="clair"] {
  --bg: #F3F6FC;
  --bg-alt: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #FFFFFFCC;
  --terminal: #0B1730;
  --line: #DEE6F5;
  --text: #13203F;
  --muted: #56668A;
  --faint: #8B98B5;
  --header-bg: #0A1426F0;
  --hero-grad: radial-gradient(1100px 600px at 70% -10%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 70%);
  --card-shadow: 0 16px 44px -20px rgba(19, 32, 63, .25);
  --rain-color: 91, 124, 250;
  --rain-alpha: .1;
}

/* En direction claire, le hero / header / footer restent sombres (ADN de marque) */
body[data-dir="clair"] .dark-zone {
  --bg: #0A1426;
  --bg-alt: #0C1830;
  --surface: #101F3A;
  --surface-2: #14254464;
  --line: #1E2F52;
  --text: #EAF0FF;
  --muted: #93A3C4;
  --faint: #5E6F94;
  --card-shadow: 0 18px 50px -18px rgba(3, 8, 20, .8);
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--accent); color: #fff; }

/* ---------- Utilitaires ---------- */
.wrap { width: min(var(--content-w), 100% - 48px); margin-inline: auto; }
.mono { font-family: var(--font-mono); }

.section { padding: calc(104px * var(--space)) 0; position: relative; }
section[id], article[id] { scroll-margin-top: 110px; }
.section-head { text-align: center; margin-bottom: 56px; }
.section-head .kicker {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.section-head .kicker::before, .section-head .kicker::after {
  content: ""; width: 26px; height: 1px;
  background: var(--accent-line);
}
.section-head h2 {
  font-size: clamp(30px, 4.2vw, 44px);
  font-weight: 700;
  letter-spacing: -.015em;
}
.section-head .sub { color: var(--muted); margin-top: 14px; font-size: 18px; }

/* Reveal au scroll */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.16, 1, .3, 1); }
  .reveal.in { opacity: 1; transform: none; }
  .reveal[data-delay="1"] { transition-delay: .08s; }
  .reveal[data-delay="2"] { transition-delay: .16s; }
  .reveal[data-delay="3"] { transition-delay: .24s; }
}

/* Tweaks d'interface */
body[data-anim="off"] .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
body[data-fab="off"] .fab { display: none !important; }
body[data-zone="off"] .zone-line { display: none !important; }
body[data-caps="on"] .section-head h2 { text-transform: uppercase; letter-spacing: .05em; font-size: clamp(26px, 3.6vw, 38px); }

/* Pluie de code en fond */
#rain {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  opacity: calc(var(--rain-alpha) * var(--fx));
}
body[data-rain="off"] #rain { display: none; }
main, header.topbar, footer { position: relative; z-index: 1; }