/* ==========================================================================
   IIN Design System — Socle
   Reset minimal + primitives typographiques et de mise en page.
   Dépend de tokens/tokens.css.
   ========================================================================== */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--iin-paper);
  font-family: var(--iin-font-ui);
  color: var(--iin-ink);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--iin-navy-600); color: #fff; }

input, textarea, select, button { font-family: inherit; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

/* --- Conteneur et sections ------------------------------------------------ */

.iin-container {
  max-width: var(--iin-container);
  margin: 0 auto;
  padding-left: var(--iin-gutter);
  padding-right: var(--iin-gutter);
}

.iin-section    { padding-top: var(--iin-section-y);    padding-bottom: var(--iin-section-y); }
.iin-section--lg{ padding-top: var(--iin-section-y-lg); padding-bottom: var(--iin-section-y-lg); }

/* Bande blanche cerclée de filets : sépare deux blocs sans ombre ni carte. */
.iin-band {
  background: var(--iin-surface);
  border-top: var(--iin-hairline) solid var(--iin-rule);
  border-bottom: var(--iin-hairline) solid var(--iin-rule);
}

/* Bandeau sombre d'ouverture de page intérieure. */
.iin-band--dark { background: var(--iin-navy-850); color: var(--iin-on-dark); }

/* --- Grilles éditoriales -------------------------------------------------- */

/* Colonne de label à gauche, contenu à droite : la signature du système. */
.iin-split {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: var(--iin-column-gap);
  align-items: start;
}

.iin-split--hero {
  grid-template-columns: 1.12fr 0.88fr;
  align-items: center;
}

@media (max-width: 860px) {
  .iin-split, .iin-split--hero { grid-template-columns: 1fr; gap: 32px; }
}

/* --- Typographie ---------------------------------------------------------- */

/* Surtitre : capitales, or, très espacé. Ouvre presque chaque section. */
.iin-eyebrow {
  font-size: var(--iin-text-sm);
  font-weight: var(--iin-weight-bold);
  letter-spacing: var(--iin-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--iin-gold-600);
}
.iin-eyebrow--on-dark { color: var(--iin-gold-500); }

/* Titres. Newsreader ne dépasse jamais la graisse 500 : l'autorité vient
   de la taille et de l'interligne serré, pas du gras. */
.iin-display {
  font-family: var(--iin-font-display);
  font-weight: var(--iin-weight-display);
  font-size: var(--iin-display-hero);
  line-height: var(--iin-leading-display);
  letter-spacing: var(--iin-tracking-display);
  color: var(--iin-ink);
  margin: 0;
}
.iin-display--page  { font-size: var(--iin-display-page); line-height: 1.06; letter-spacing: normal; }
.iin-display--bleed { font-size: var(--iin-display-bleed); line-height: 1.02; color: var(--iin-on-dark); }

.iin-h2 {
  font-family: var(--iin-font-display);
  font-weight: var(--iin-weight-display);
  font-size: var(--iin-text-7xl);
  line-height: 1.18;
  color: var(--iin-ink);
  margin: 0;
}
.iin-h2--sm { font-size: var(--iin-text-4xl); }

.iin-h3 {
  font-family: var(--iin-font-display);
  font-weight: var(--iin-weight-display);
  font-size: var(--iin-text-2xl);
  line-height: var(--iin-leading-title);
  color: var(--iin-ink);
  margin: 0;
}

/* Chapô : un cran au-dessus du corps, gris-bleu, largeur mesurée en em. */
.iin-lede {
  font-size: var(--iin-text-xl);
  line-height: 1.65;
  color: var(--iin-body);
  margin: 20px 0 0 0;
  max-width: 40em;
  text-wrap: pretty;
}
.iin-lede--on-dark { color: var(--iin-on-dark-body); }

.iin-body {
  font-size: var(--iin-text-base);
  line-height: var(--iin-leading-snug);
  color: var(--iin-body);
}

.iin-meta {
  font-size: var(--iin-text-sm2);
  color: var(--iin-muted);
}

/* Citation de mission : serif en taille de paragraphe, jamais en italique. */
.iin-statement {
  font-family: var(--iin-font-display);
  font-size: var(--iin-text-3xl);
  line-height: 1.5;
  color: var(--iin-ink);
  margin: 0;
  text-wrap: pretty;
}

/* --- Filets et marqueurs --------------------------------------------------- */

/* Barre or courte : sépare un chiffre de son libellé, ou un label de son bloc. */
.iin-accent-bar {
  width: var(--iin-accent-bar-w);
  height: var(--iin-accent-bar-h);
  background: var(--iin-gold-500);
  margin: 14px 0;
}
.iin-accent-bar--wide { width: 42px; }

/* Titre de section suivi d'un filet qui occupe la largeur restante. */
.iin-section-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 24px;
}
.iin-section-head::after {
  content: "";
  flex: 1;
  height: var(--iin-hairline);
  background: var(--iin-rule);
}

/* Chiffre serif or : numérote objectifs, étapes, programmes, avantages. */
.iin-numeral {
  font-family: var(--iin-font-display);
  font-size: var(--iin-text-3xl);
  color: var(--iin-gold-500);
  line-height: 1;
  flex: none;
}
.iin-numeral--lg { font-size: var(--iin-text-8xl); }