/* Page /kit (construction de développement seulement) : mise en page des exemples. */

.kit {
  display: flex;
  flex-direction: column;
  gap: var(--espace-40);
  padding: var(--espace-24) var(--gouttiere) var(--espace-96);
}

.kit__nom {
  font-weight: var(--titre-ecran-graisse);
  font-size: var(--titre-ecran-taille);
  line-height: var(--titre-ecran-interligne);
}

.kit__bloc {
  display: flex;
  flex-direction: column;
  gap: var(--espace-16);
  min-width: 0;
}

.kit__titre {
  padding-bottom: var(--espace-8);
  border-bottom: 1px solid var(--trait);
  color: var(--texte-doux);
  font-weight: var(--legende-graisse);
  font-size: var(--legende-taille);
  line-height: var(--legende-interligne);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.kit__exemples {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--espace-24);
}

.kit__exemples--pleine-largeur {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  margin: 0 calc(-1 * var(--gouttiere));
}

.kit__exemple {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espace-8);
}

.kit__legende {
  color: var(--texte-discret);
  font-weight: var(--legende-graisse);
  font-size: var(--legende-taille);
  line-height: var(--legende-interligne);
}

.kit__valeur {
  font-weight: var(--libelle-graisse);
  font-size: var(--libelle-taille);
  font-variant-numeric: tabular-nums;
}

.kit__champ {
  width: min(358px, calc(100vw - 2 * var(--gouttiere)));
}

.kit__curseur {
  width: min(326px, calc(100vw - 2 * var(--gouttiere)));
}

.kit__large {
  width: 100%;
}