/* ============================================================================
   DIRECTION A — « L'INSTRUMENT »
   Registre : instrument de mesure. Le produit est dans le hero, pas en capture.
   Densité d'information élevée, libellés en monospace, chiffres tabulaires.
   Références de rigueur : Linear, Stripe, tableaux de bord d'exploitation.

   Ce fichier ne contient que ce qui distingue la direction : atmosphère, mise en
   page du hero, traitement des trois piliers. Les composants (boutons, cartes,
   formulaires, radar, tableaux) vivent dans components.css et sont partagés.
   ========================================================================= */

/* --- Atmosphère : grille de relevé + halo. Rien de décoratif gratuit. ----- */

body {
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  background-position: center top;
}

/* --- Hero : deux colonnes, le texte et l'instrument ---------------------- */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 1rem + 6vw, 5.5rem) clamp(3rem, 2rem + 5vw, 6rem);
}
.hero::before {
  content: '';
  position: absolute;
  top: -40%;
  left: 50%;
  width: min(1100px, 130%);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--c-brand) 13%, transparent) 0%,
    transparent 62%);
  pointer-events: none;
  z-index: 0;
}
.hero > * { position: relative; z-index: 1; }

.hero__grid {
  display: grid;
  gap: var(--sp-xl);
  align-items: center;
}
@media (min-width: 1000px) {
  .hero__grid { grid-template-columns: 1.06fr 1fr; gap: var(--sp-2xl); }
}

.hero__title {
  font-size: var(--fs-display);
  letter-spacing: var(--ls-display);
  max-width: 17ch;
}
.hero__title em {
  font-style: normal;
  color: var(--c-brand);
}
.hero__lead { margin-top: var(--sp-md); }
.hero__actions { margin-top: var(--sp-lg); }

.hero__panel .demo-frame { box-shadow: var(--shadow-lg); }
.hero__panel .radar { max-width: 330px; margin-inline: auto; }

/* --- Titre de section : numéro de repère en monospace ------------------- */

.sec-head__num { color: var(--c-brand); }

/* --- Trois piliers, traités comme des canaux de mesure ------------------ */

.pillar {
  display: grid;
  gap: var(--sp-2xs);
  align-content: start;
  padding-top: var(--sp-sm);
  border-top: 2px solid var(--c-brand);
}
.pillar__key {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-ink-dim);
}
.pillar__name {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
}
.pillar__text { font-size: var(--fs-sm); color: var(--c-ink-muted); }

/* --- Citation : registre dense, sans-serif, pas d'italique synthétisée ----
   Manrope ne dispose pas de véritable italique : on ne feint jamais l'italique. */

.pullquote {
  font-style: normal;
  font-weight: var(--fw-bold);
  letter-spacing: -0.03em;
}

/* Variante de l'accueil : la phrase d'ouverture est mise en exergue comme une
   citation. Elle emploie Besley, dont le projet possède la véritable italique
   déjà sous-ensemblée. On ne feint donc rien : la règle ci-dessus interdit
   l'italique SYNTHÉTISÉE, pas une vraie italique.
   Coût : 35 Ko, et uniquement sur les pages qui l'emploient — @font-face n'est
   téléchargée que si un élément s'en sert. */
.pullquote--display {
  font-family: var(--font-quote);
  font-style: italic;
  font-weight: var(--fw-medium);
  font-size: clamp(1.6rem, 1.3rem + 1.8vw, 2.5rem);
  letter-spacing: -0.01em;
  max-width: 34ch;
}