/* ========================================================================= BIG SOUND STUDIO / polices auto-hebergees ------------------------------------------------------------------------- 3 roles : --titre Archivo grotesque industriel large (variable, wght 400-900) --texte Fira Sans humaniste chaleureux, tres lisible en petit --mono IBM Plex Mono technique : chiffres, durees, etiquettes Toutes les fontes sont sous licence SIL Open Font License 1.1 (voir le dossier licences/). Sous-ensemble latin francais uniquement. Deux points a savoir : 1. Le tiret cadratin U+2014 a ete volontairement retire du sous-ensemble. S'il apparait par erreur dans un contenu, il tombera sur la police de repli et se verra tout de suite. C'est un garde-fou editorial. 2. Chaque @font-face n'est telecharge par le navigateur que si un element de la page l'utilise vraiment. Declarer 4 coupes de Fira Sans ne coute donc rien tant qu'on ne s'en sert pas. Mise en place : deposer les .woff2 a cote de ce fichier, ou ajuster les chemins url() ci-dessous (ex. /fonts/). ========================================================================= */ /* Plage couverte par le sous-ensemble : ASCII, accents francais, ligature oe, guillemets francais et anglais, tiret demi-cadratin, puce, points de suspension, degre, euro, fleche, copyright, espace insecable. Le navigateur ne telechargera le fichier que si la page contient un de ces caracteres, ce qui est toujours le cas ici. */ /* ------------------------------------------------------------------------- 1. TITRAGE : Archivo (Omnibus-Type) - variable, axe de graisse 400 a 900 Chasse epinglee a wdth 110 (legerement elargie) pour le rendu monumental en capitales. Un seul fichier pour toutes les graisses. ------------------------------------------------------------------------- */ @font-face { font-family: "Archivo"; src: url("archivo-titre-var.woff2") format("woff2-variations"), url("archivo-titre-var.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AB, U+00AD, U+00B0, U+00B7, U+00BB, U+00C0, U+00C2, U+00C4, U+00C6-00CB, U+00CE-00CF, U+00D4, U+00D6, U+00D9, U+00DB-00DC, U+00E0, U+00E2, U+00E4, U+00E6-00EB, U+00EE-00EF, U+00F4, U+00F6, U+00F9, U+00FB-00FC, U+00FF, U+0152-0153, U+0178, U+2013, U+2018-2019, U+201C-201D, U+2022, U+2026, U+2039-203A, U+20AC, U+2192; } /* ------------------------------------------------------------------------- 2. TEXTE COURANT : Fira Sans (Carrois Apostrophe / Erik Spiekermann) Pas de version variable dans google/fonts, donc coupes statiques, mais chacune pese moins de 14 Ko et n'est chargee qu'a l'usage. ------------------------------------------------------------------------- */ @font-face { font-family: "Fira Sans"; src: url("firasans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AB, U+00AD, U+00B0, U+00B7, U+00BB, U+00C0, U+00C2, U+00C4, U+00C6-00CB, U+00CE-00CF, U+00D4, U+00D6, U+00D9, U+00DB-00DC, U+00E0, U+00E2, U+00E4, U+00E6-00EB, U+00EE-00EF, U+00F4, U+00F6, U+00F9, U+00FB-00FC, U+00FF, U+0152-0153, U+0178, U+2013, U+2018-2019, U+201C-201D, U+2022, U+2026, U+2039-203A, U+20AC, U+2192; } @font-face { font-family: "Fira Sans"; src: url("firasans-400i.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AB, U+00AD, U+00B0, U+00B7, U+00BB, U+00C0, U+00C2, U+00C4, U+00C6-00CB, U+00CE-00CF, U+00D4, U+00D6, U+00D9, U+00DB-00DC, U+00E0, U+00E2, U+00E4, U+00E6-00EB, U+00EE-00EF, U+00F4, U+00F6, U+00F9, U+00FB-00FC, U+00FF, U+0152-0153, U+0178, U+2013, U+2018-2019, U+201C-201D, U+2022, U+2026, U+2039-203A, U+20AC, U+2192; } @font-face { font-family: "Fira Sans"; src: url("firasans-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AB, U+00AD, U+00B0, U+00B7, U+00BB, U+00C0, U+00C2, U+00C4, U+00C6-00CB, U+00CE-00CF, U+00D4, U+00D6, U+00D9, U+00DB-00DC, U+00E0, U+00E2, U+00E4, U+00E6-00EB, U+00EE-00EF, U+00F4, U+00F6, U+00F9, U+00FB-00FC, U+00FF, U+0152-0153, U+0178, U+2013, U+2018-2019, U+201C-201D, U+2022, U+2026, U+2039-203A, U+20AC, U+2192; } @font-face { font-family: "Fira Sans"; src: url("firasans-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AB, U+00AD, U+00B0, U+00B7, U+00BB, U+00C0, U+00C2, U+00C4, U+00C6-00CB, U+00CE-00CF, U+00D4, U+00D6, U+00D9, U+00DB-00DC, U+00E0, U+00E2, U+00E4, U+00E6-00EB, U+00EE-00EF, U+00F4, U+00F6, U+00F9, U+00FB-00FC, U+00FF, U+0152-0153, U+0178, U+2013, U+2018-2019, U+201C-201D, U+2022, U+2026, U+2039-203A, U+20AC, U+2192; } /* ------------------------------------------------------------------------- 3. MONOSPACE : IBM Plex Mono (Mike Abbink / Bold Monday) ------------------------------------------------------------------------- */ @font-face { font-family: "IBM Plex Mono"; src: url("ibmplexmono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AB, U+00AD, U+00B0, U+00B7, U+00BB, U+00C0, U+00C2, U+00C4, U+00C6-00CB, U+00CE-00CF, U+00D4, U+00D6, U+00D9, U+00DB-00DC, U+00E0, U+00E2, U+00E4, U+00E6-00EB, U+00EE-00EF, U+00F4, U+00F6, U+00F9, U+00FB-00FC, U+00FF, U+0152-0153, U+0178, U+2013, U+2018-2019, U+201C-201D, U+2022, U+2026, U+2039-203A, U+20AC, U+2192; } @font-face { font-family: "IBM Plex Mono"; src: url("ibmplexmono-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AB, U+00AD, U+00B0, U+00B7, U+00BB, U+00C0, U+00C2, U+00C4, U+00C6-00CB, U+00CE-00CF, U+00D4, U+00D6, U+00D9, U+00DB-00DC, U+00E0, U+00E2, U+00E4, U+00E6-00EB, U+00EE-00EF, U+00F4, U+00F6, U+00F9, U+00FB-00FC, U+00FF, U+0152-0153, U+0178, U+2013, U+2018-2019, U+201C-201D, U+2022, U+2026, U+2039-203A, U+20AC, U+2192; } /* ========================================================================= PILES COMPLETES Les replis systeme sont choisis pour rester dans la meme famille de formes que la police chargee, afin que le basculement pendant le swap se voie le moins possible. ========================================================================= */ :root { /* Grotesque large. Replis : les grotesques systeme les plus proches. */ --titre: "Archivo", "Helvetica Neue", "Helvetica Now Display", Helvetica, "Arial Nova", Arial, "Liberation Sans", "DejaVu Sans", sans-serif; /* Humaniste. Replis : les polices systeme humanistes (San Francisco sur Apple, Segoe UI sur Windows, Cantarell / Noto Sans sous Linux). */ --texte: "Fira Sans", system-ui, -apple-system, "Segoe UI", Cantarell, "Noto Sans", "Liberation Sans", sans-serif; /* Monospace technique. Replis : les mono systeme. */ --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", "Liberation Mono", monospace; /* Couleurs de reference du site, pour memoire. */ --fond: #0E1A2B; --creme: #F1E5D4; } /* ------------------------------------------------------------------------- Reglages de confort (optionnels, a reprendre dans la feuille du site) ------------------------------------------------------------------------- */ body { font-family: var(--texte); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; /* utile sur fond sombre */ -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } h1, h2, h3, .titre { font-family: var(--titre); font-weight: 800; letter-spacing: -0.005em; /* Archivo elargi supporte un leger resserrage */ line-height: 0.96; text-transform: uppercase; } /* Etiquettes, durees, prix, references materiel */ .mono, time, .chiffre, .etiquette { font-family: var(--mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } .etiquette { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; }