@font-face { font-family: "Geist"; src: url("polices/geist.woff2") format("woff2");
               font-weight: 100 900; font-display: swap; }
  @font-face { font-family: "Geist Mono"; src: url("polices/geist-mono.woff2") format("woff2");
               font-weight: 100 900; font-display: swap; }
  * { box-sizing: border-box; }
  body { margin: 0; background: #f5f4f2; color: #141413;
         font: 400 16px/1.55 "Geist", system-ui, sans-serif; }
  .bande { padding: 52px 48px; }
  .bande--encre { background: #141413; color: #f5f4f2; }
  .etq { font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
         color: #66635e; margin: 0 0 26px; }
  .bande--encre .etq { color: rgba(245,244,242,.6); }
  .rangee { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 52px; }
  .legende { font-family: "Geist Mono", monospace; font-size: 12px; letter-spacing: .04em;
             color: #8f8b84; margin: 12px 0 0; }
  .bande--encre .legende { color: rgba(245,244,242,.45); }
  .nuancier { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
  .nuancier .pastille { border-radius: 10px; height: 92px; border: 1px solid rgba(20,20,19,.1); }
  .nuancier p { margin: 10px 0 0; font-family: "Geist Mono", monospace; font-size: 12px; line-height: 1.5; color: #66635e; }
  .nuancier b { display: block; font-weight: 500; color: #141413; font-family: "Geist", sans-serif; font-size: 13px; }
  .echantillon { font-size: 42px; font-weight: 500; letter-spacing: -.04em; line-height: 1; }
  .echantillon small, .mono small { display: block; font-size: 12px; font-weight: 400; letter-spacing: .04em;
                                    color: #8f8b84; font-family: "Geist Mono", monospace; margin-top: 12px; }
  .mono { font-family: "Geist Mono", monospace; font-size: 26px; letter-spacing: -.02em; }
  .tailles { display: flex; align-items: flex-end; gap: 24px; }
  .regles { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
  .regles h3 { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
               color: #66635e; margin: 0 0 12px; }
  .regles h3.non { color: #a43a0a; }
  .regles ul { margin: 0; padding: 0; list-style: none; }
  .regles li { padding: 9px 0; border-bottom: 1px solid rgba(20,20,19,.1); font-size: 15px; }
  .regles .colonne-non li { color: #8f8b84; }
  .pied { padding: 28px 48px 44px; font-family: "Geist Mono", monospace; font-size: 12px; color: #8f8b84; }

  .nuancier--suite { margin-top: 12px; }
  .bande--serre { padding-top: 0; }
  .legende--large { margin-top: 30px; max-width: 62ch; line-height: 1.7; }
  .legende--petite { margin: 0 0 2px; max-width: 34ch; line-height: 1.6; }
  .bloc { display: block; }
  .pastille--encre { background: #141413; }
  .pastille--os { background: #f5f4f2; }
  .pastille--creux { background: #e8e6e2; }
  .pastille--rust { background: #a43a0a; }
  .pastille--gris { background: #66635e; }