/* ============================================================================= RÈGLES TYPOGRAPHIQUES DES TITRES — Alexis Formations ============================================================================= Ce fichier est la SOURCE UNIQUE des règles de titres du site. Pour changer une TAILLE, un interligne ou une marge, modifiez la variable correspondante dans le bloc « JETONS » ci-dessous : tout le site suit. Ne redéfinissez pas de taille de titre ailleurs (style.css, éditeur, page). Pour changer une POLICE, ne touchez pas à ce fichier : passez par Apparence › Typographie dans l'administration. Cet écran surcharge --af-serif, --af-sans et --af-mono, dont dérivent toutes les règles ci-dessous, et ne propose que des polices libres de droit. ----------------------------------------------------------------------------- PRINCIPE DE HIÉRARCHIE — à respecter sur CHAQUE page ----------------------------------------------------------------------------- H1 Le sujet de la page. UN SEUL par page, toujours présent. H2 Les grandes sections de la page. H3 Les sous-parties d'une section. 1. On ne saute jamais un niveau : jamais de H3 sans H2 au-dessus. 2. On ne choisit JAMAIS un niveau pour sa taille à l'écran. Un titre trop gros ou trop petit se corrige ici, dans le CSS, pas en changeant la balise. 3. Un titre annonce le contenu qui suit ; il ne sert pas de décoration. 4. Conséquence assumée du design : l'étiquette de section (H2) est petite et en capitales, alors qu'un titre de carte (H3) est plus grand. La hiérarchie est STRUCTURELLE, pas visuelle. C'est volontaire et correct. ============================================================================= */ /* ----------------------------------------------------------------------------- 1. JETONS — les valeurs à modifier -------------------------------------------------------------------------- */ :root { /* --- H1 : titre de la page ------------------------------------------- */ --af-h1-police: var(--af-serif, 'Instrument Serif', Georgia, serif); /* Instrument Serif */ --af-h1-taille: clamp(28px, 4vw, 42px); /* mobile → bureau */ --af-h1-graisse: 400; --af-h1-interligne: 1.15; --af-h1-interlettrage: -.015em; --af-h1-couleur: var(--af-texte, #111111); --af-h1-marge: 0 0 14px; /* --- H2 : section de la page ----------------------------------------- */ --af-h2-police: var(--af-serif, 'Instrument Serif', Georgia, serif); --af-h2-taille: clamp(22px, 2.6vw, 28px); --af-h2-graisse: 400; --af-h2-interligne: 1.26; --af-h2-interlettrage: -.01em; --af-h2-couleur: var(--af-texte, #111111); --af-h2-marge: 40px 0 14px; /* --- H3 : sous-partie d'une section ---------------------------------- */ --af-h3-police: var(--af-sans, 'Manrope', system-ui, sans-serif); /* Manrope */ --af-h3-taille: clamp(16px, 1.4vw, 18px); --af-h3-graisse: 600; --af-h3-interligne: 1.4; --af-h3-interlettrage: 0; --af-h3-couleur: var(--af-texte, #111111); --af-h3-marge: 28px 0 10px; /* --- H4 à H6 : rares, réservés aux contenus longs --------------------- */ --af-h4-taille: 15px; --af-h5-taille: 14px; --af-h6-taille: 13px; /* --- Variantes d'affichage (voir section 3) --------------------------- */ --af-titre-heros-taille: clamp(32px, 5.6vw, 56px); --af-titre-heros-interligne: 1.1; --af-titre-etiquette-taille: 12px; --af-titre-etiquette-interlettrage: .1em; --af-titre-etiquette-couleur: var(--af-texte-mute, #8C8880); --af-titre-vedette-taille: clamp(24px, 2.8vw, 30px); --af-titre-vedette-interligne: 1.18; --af-titre-encart-taille: 20px; --af-titre-encart-interligne: 1.3; --af-titre-carte-taille: clamp(12.5px, 3.2vw, 14px); --af-titre-carte-interligne: 1.34; --af-titre-ligne-taille: 15px; --af-titre-ligne-interligne: 1.32; } /* ----------------------------------------------------------------------------- 2. RÈGLES DE BASE — s'appliquent à tout titre du site, y compris ceux saisis dans l'éditeur WordPress -------------------------------------------------------------------------- */ h1, .af-h1 { font-family: var(--af-h1-police); font-size: var(--af-h1-taille); font-weight: var(--af-h1-graisse); line-height: var(--af-h1-interligne); letter-spacing: var(--af-h1-interlettrage); color: var(--af-h1-couleur); margin: var(--af-h1-marge); text-wrap: balance; } h2, .af-h2 { font-family: var(--af-h2-police); font-size: var(--af-h2-taille); font-weight: var(--af-h2-graisse); line-height: var(--af-h2-interligne); letter-spacing: var(--af-h2-interlettrage); color: var(--af-h2-couleur); margin: var(--af-h2-marge); text-wrap: pretty; } h3, .af-h3 { font-family: var(--af-h3-police); font-size: var(--af-h3-taille); font-weight: var(--af-h3-graisse); line-height: var(--af-h3-interligne); letter-spacing: var(--af-h3-interlettrage); color: var(--af-h3-couleur); margin: var(--af-h3-marge); text-wrap: pretty; } h4, h5, h6 { font-family: var(--af-h3-police); font-weight: var(--af-h3-graisse); line-height: 1.45; letter-spacing: 0; color: var(--af-h3-couleur); margin: 24px 0 8px; } h4 { font-size: var(--af-h4-taille); } h5 { font-size: var(--af-h5-taille); } h6 { font-size: var(--af-h6-taille); text-transform: uppercase; letter-spacing: .06em; color: var(--af-texte-mute, #8C8880); } /* Premier titre d'un bloc : pas de marge haute superflue. */ h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child { margin-top: 0; } /* ----------------------------------------------------------------------------- 3. VARIANTES D'AFFICHAGE Elles changent l'APPARENCE d'un titre, jamais son NIVEAU. Exemple :

reste un H2 pour Google et pour les lecteurs d'écran, même s'il s'affiche en petites capitales. -------------------------------------------------------------------------- */ /* 3.1 Accroche d'accueil — le H1 de la page d'accueil. */ .af-heros__accroche { font-family: var(--af-h1-police); font-size: var(--af-titre-heros-taille); font-weight: var(--af-h1-graisse); line-height: var(--af-titre-heros-interligne); letter-spacing: var(--af-h1-interlettrage); color: var(--af-h1-couleur); margin: 0 0 14px; } /* 3.2 Étiquette de section — H2 ou H3 en petites capitales. C'est l'idiome de l'interface : « LA PLUS SUIVIE », « PROGRAMME ». */ .af-section-titre { font-family: var(--af-sans, 'Manrope', system-ui, sans-serif); font-size: var(--af-titre-etiquette-taille); font-weight: 600; line-height: 1; letter-spacing: var(--af-titre-etiquette-interlettrage); text-transform: uppercase; color: var(--af-titre-etiquette-couleur); margin: 0 0 14px; } /* 3.3 Titre de la formation mise en avant (H3 sous le H2 « La plus suivie »). */ .af-phare__titre { font-family: var(--af-h2-police); font-size: var(--af-titre-vedette-taille); font-weight: 400; line-height: var(--af-titre-vedette-interligne); letter-spacing: -.01em; color: var(--af-texte, #111111); margin: 0; } /* 3.4 Titre de carte (grille du catalogue, articles). */ .af-carte__titre { font-family: var(--af-sans, 'Manrope', system-ui, sans-serif); font-size: var(--af-titre-carte-taille); font-weight: 600; line-height: var(--af-titre-carte-interligne); letter-spacing: 0; color: var(--af-texte, #111111); margin: 0; } /* 3.5 Titre de ligne (listes de formations, bibliothèque). */ .af-ligne__titre, .af-biblio__titre { font-family: var(--af-sans, 'Manrope', system-ui, sans-serif); font-size: var(--af-titre-ligne-taille); font-weight: 600; line-height: var(--af-titre-ligne-interligne); letter-spacing: 0; color: var(--af-texte, #111111); margin: 0; } /* 3.6 Titre d'encart latéral (colonne d'achat, « Qui vous forme »). */ .af-titre-encart, .af-formateur h2, .af-formateur h3 { font-family: var(--af-h2-police); font-size: var(--af-titre-encart-taille); font-weight: 400; line-height: var(--af-titre-encart-interligne); letter-spacing: -.01em; color: var(--af-texte, #111111); margin: 0 0 8px; } /* 3.7 bis — Libellé de statistique (H3 dans un bloc de chiffres). */ .af-titre-micro { font-family: var(--af-sans, 'Manrope', system-ui, sans-serif); font-size: 10px; font-weight: 500; line-height: 1.3; letter-spacing: .06em; text-transform: uppercase; color: var(--af-texte-mute, #8C8880); margin: 0; } /* 3.7 Titre de récapitulatif compact (ligne de commande, aparté). */ .af-titre-compact { font-family: var(--af-sans, 'Manrope', system-ui, sans-serif); font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0; color: var(--af-texte, #111111); margin: 0 0 4px; } /* ----------------------------------------------------------------------------- 4. TITRES DES GABARITS Mêmes règles que les niveaux de base, appliquées aux blocs du thème. -------------------------------------------------------------------------- */ .af-page__titre, .af-fiche__titre, .af-article__titre, .af-vide__titre { font-family: var(--af-h1-police); font-size: var(--af-h1-taille); font-weight: var(--af-h1-graisse); line-height: var(--af-h1-interligne); letter-spacing: var(--af-h1-interlettrage); color: var(--af-h1-couleur); margin: var(--af-h1-marge); } .af-page__titre { margin-bottom: 8px; } .af-vide__titre { font-size: clamp(20px, 2.4vw, 24px); margin: 0; } .af-lecteur__titre { font-family: var(--af-h1-police); font-size: clamp(24px, 3.4vw, 34px); font-weight: var(--af-h1-graisse); line-height: 1.2; letter-spacing: -.01em; color: var(--af-h1-couleur); margin: 0 0 12px; } .af-compte__nom { font-family: var(--af-h1-police); font-size: clamp(22px, 2.6vw, 26px); font-weight: var(--af-h1-graisse); line-height: 1.2; letter-spacing: -.01em; color: var(--af-h1-couleur); margin: 0 0 4px; } /* ----------------------------------------------------------------------------- 5. CONTENU RÉDIGÉ DANS L'ÉDITEUR Les titres saisis dans une page ou un article suivent les règles de base, avec un peu plus d'air au-dessus pour aérer les textes longs. -------------------------------------------------------------------------- */ .af-contenu h2 { margin-top: 1.6em; } .af-contenu h3 { margin-top: 1.5em; } .af-contenu h4, .af-contenu h5, .af-contenu h6 { margin-top: 1.4em; } /* ----------------------------------------------------------------------------- 6. IMPRESSION -------------------------------------------------------------------------- */ @media print { h1, h2, h3, h4, h5, h6 { color: #000; page-break-after: avoid; } }