/* ==================================================================== LA TYPOGRAPHIE DE KOATCHER PRO Reprise telle quelle du tableau de bord de test : 'Google Sans Text' pour le texte courant, 'Google Sans' pour les titres. CETTE FEUILLE NE TOUCHE QUE LA FONTE. Ni les tailles, ni les couleurs, ni les espacements : elle est posée sur soixante-cinq pages dont les mises en page n'ont rien en commun, et changer une taille de titre en ferait déborder plusieurs sans qu'on le voie. `!important` sur les fontes seulement. Beaucoup de pages déclarent leur propre `font-family` dans un sélecteur plus précis que `body` — sans cela, la moitié d'entre elles garderaient l'ancienne. ==================================================================== */ :root{ --kt-typo-texte:'Google Sans Text','Google Sans',-apple-system,BlinkMacSystemFont, 'Segoe UI',Roboto,Helvetica,Arial,sans-serif; --kt-typo-titre:'Google Sans','Google Sans Text',-apple-system,BlinkMacSystemFont, 'Segoe UI',Roboto,Helvetica,Arial,sans-serif; } body{ font-family:var(--kt-typo-texte) !important; } /* ---- LES TITRES ---- POURQUOI CE PRÉFIXE ABSURDE. Écrite `h1{ font-family:… !important }`, cette règle ne s'appliquait à presque aucun titre du site. Entre deux déclarations `!important`, ce n'est pas l'ordre qui tranche mais la spécificité — et le site compte 96 règles du genre `.ktVideoHero__title{ font-family:'Manrope' !important }`. Une classe (0,0,1,0) bat un élément (0,0,0,1) : le titre restait en Manrope. Le concurrent le plus spécifique relevé sur les 65 pages empile trois classes. Quatre `:root` — qui désignent tous le même `` et ne changent donc rien à ce qui est visé — portent la règle à (0,0,4,1) et la font passer devant. C'est laid, et c'est le prix d'un site où la fonte des titres est redéclarée page par page. La vraie correction serait de retirer ces 96 règles ; celle-ci les recouvre sans y toucher. LES ICÔNES NE CRAIGNENT RIEN : Font Awesome pose sa fonte directement sur le ``, et une valeur déclarée l'emporte toujours sur une valeur héritée, quelle que soit la spécificité du parent. */ :root:root:root:root h1, :root:root:root:root h2, :root:root:root:root h3, :root:root:root:root h4, :root:root:root:root h5, :root:root:root:root h6{ font-family:var(--kt-typo-titre) !important; } /* ---- LE POIDS ---- Ce qui distingue le tableau de bord n'est pas seulement la fonte : ses grands titres sont en 400, pas en gras. `.kt-titre` fait 40 px en 400 et `.kt-carte h3` 18 px en 500 — c'est la TAILLE qui hiérarchise, pas l'épaisseur. Le reste du site ouvrait ses titres en 700 ou 800. Tous les niveaux en 500, sans exception. */ :root:root:root:root h1, :root:root:root:root h2, :root:root:root:root h3, :root:root:root:root h4, :root:root:root:root h5, :root:root:root:root h6{ font-weight:500 !important; } /* Le resserrement des titres — sans `!important` : une page qui a réglé le sien pour une raison précise doit pouvoir le garder. */ h1{ letter-spacing:-.02em; } h2, h3{ letter-spacing:-.015em; } /* `` et `` gardent leur gras À L'INTÉRIEUR d'un titre : c'est le seul moyen d'y accentuer un mot, et la règle ci-dessus le leur retirait par héritage. */ :root:root:root:root :is(h1,h2,h3,h4,h5,h6) :is(strong,b){ font-weight:600 !important; } /* Les contrôles de formulaire ne suivent pas la page par défaut : le navigateur leur impose sa propre fonte système. */ button, input, select, textarea{ font-family:var(--kt-typo-texte); } /* RIEN À FAIRE POUR LES ICÔNES. Font Awesome et Material posent leur fonte sur `.fa` ou `.material-icons` — un sélecteur de classe, plus précis que `body`. Elles gagnent donc d'elles-mêmes, et une règle d'exemption ici ferait l'inverse de ce qu'elle annonce : à spécificité égale, la dernière feuille chargée l'emporte, et ce serait celle-ci. */ /* ---- LA TAILLE SUR TÉLÉPHONE ---- Mesuré sur un écran de 390 px avant de toucher à quoi que ce soit : H1 à 30 px, H2 entre 22 et 28, H3 à 19. Un cran en dessous pour chacun. `clamp()` plutôt qu'une valeur fixe : entre un 320 px et un 640 px, un seul nombre est forcément trop grand d'un côté et trop petit de l'autre. Le milieu est en `vw`, donc le titre suit la largeur, et les deux bornes l'empêchent de partir dans un sens ou dans l'autre. CE QUE ÇA COÛTE : les titres d'un même niveau convergent vers une seule taille sur téléphone. CSS ne sait pas réduire une valeur qu'il ne connaît pas — il n'y a pas de « 88 % de ce que tu fais déjà » — donc il faut nommer une taille, et elle vaut pour tous. Les bornes sont choisies pour que ça ne fasse jamais GRANDIR un titre de plus d'un point ou deux. */ @media (max-width:640px){ :root:root:root:root h1{ font-size:clamp(23px, 6.7vw, 30px) !important; } :root:root:root:root h2{ font-size:clamp(20px, 6vw, 25px) !important; } :root:root:root:root h3{ font-size:clamp(16px, 4.4vw, 19px) !important; } :root:root:root:root h4{ font-size:clamp(14px, 4vw, 17px) !important; } /* L'interligne suit : un titre qui rétrécit sans que ses lignes se resserrent laisse un blanc au milieu du bloc. */ :root:root:root:root :is(h1,h2,h3,h4){ line-height:1.18; } }