/* ============================================================ GLOSSAIRE — /glossaire et /glossaire/{slug}. COURTE PAR CONSTRUCTION. La grille de cartes est celle de site.css (.idx-grille), partagée avec /formations, /conventions, /opco et /secteurs : la réécrire aurait créé une seconde grille à maintenir, et deux grilles finissent toujours par diverger. Ce fichier ne porte que ce qui est propre au glossaire — la pastille de sigle, le chapô, le bloc source. Chargée par les deux gabarits seulement (cf. $feuilles dans _layout.php) : les autres pages n'en transportent pas un octet. ============================================================ */ /* --- Pastille de sigle ----------------------------------------------------------------- `inline-block` et non `block` : le sigle suit le terme sur la même ligne, comme une apposition. `white-space:nowrap` parce qu'un sigle coupé en deux (« OP / CO ») ne se lit plus comme un sigle. */ .glo-sigle { display: inline-block; margin-left: .5rem; padding: .1rem .5rem; border-radius: 999px; background: #eef3fd; color: #1b4fa0; font-size: .72em; font-weight: 700; letter-spacing: .02em; white-space: nowrap; vertical-align: middle; } /* --- Index ------------------------------------------------------------------------------ */ .glo-intro { max-width: 62ch; color: var(--muted, #5b6b7f); } .glo-cat { margin-top: 2.4rem; } .glo-cat > h2 { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin-bottom: .2rem; } /* Le compteur de rubrique reste lisible mais ne concurrence pas le titre. */ .glo-cat-n { font-size: .8rem; font-weight: 500; color: var(--muted, #5b6b7f); } /* ⚠️ `padding: 0 15px` REPRIS DE `.idx-grille .idx-nom, .idx-meta` (site.css:711), qui inset le contenu à l'intérieur de la carte. Le padding vit sur les ENFANTS de la carte, pas sur la carte : une classe nouvelle ne l'hérite donc pas, et la définition se calait 15 px à gauche du titre de sa PROPRE carte — mesuré, titre à 280, définition à 265. Pourquoi pas `.idx-meta` directement : elle est dessinée pour un repère court (.79rem, tabular-nums — un IDCC, un compteur), pas pour deux phrases qui doivent rester lisibles. */ .glo-carte-def { margin: .35rem 0 0; padding: 0 15px; font-size: .88rem; line-height: 1.45; color: var(--muted, #5b6b7f); } /* --- Fiche d'un terme ------------------------------------------------------------------- */ .glo-dev { margin: .1rem 0 1.1rem; font-size: 1rem; color: var(--muted, #5b6b7f); font-style: italic; } /* Chapô : la définition courte, mise en avant sans être un encadré — un cadre l'aurait détachée du corps alors qu'elle en est la première phrase. */ .glo-chapo { font-size: 1.12rem; line-height: 1.6; color: var(--ink, #0b2239); font-weight: 500; border-left: 3px solid #1054c9; padding-left: 1rem; margin: 0 0 1.6rem; } .glo-corps { max-width: 68ch; line-height: 1.7; } .glo-corps h2 { margin-top: 1.8rem; } .glo-corps ul, .glo-corps ol { padding-left: 1.2rem; } /* --- Bloc source ------------------------------------------------------------------------ Sobre et en fin de page : il atteste, il ne vend pas. La date n'est rendue que si elle existe (cf. gabarit) — une source sans date affichée vaut mieux qu'une date inventée. */ .glo-source { margin: 2.2rem 0 1.4rem; padding: .9rem 1.1rem; background: #f7f9fc; border: 1px solid #e2e8f2; border-radius: 10px; font-size: .87rem; line-height: 1.55; } .glo-source-lib { display: block; font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: #5b6b7f; margin-bottom: .25rem; } .glo-source a { word-break: break-word; } .glo-source time { color: var(--muted, #5b6b7f); } .glo-retour { display: inline-block; margin-top: 1.2rem; font-size: .9rem; } /* --- Fiche : largeur de la page à deux colonnes ------------------------------------------- JUMELLE DE `.opco-page.op-grille` (opco.css) : une page qui porte une colonne de 320 px a besoin de 1140 px, pas des 800 px de `.page-corps`. ⚠️ SANS CETTE LIGNE, LA FICHE A LU DANS 381 px pendant quelques heures le 2026-08-08 : 800 − 48 de rembourrage − 320 de latérale − 51 de gouttière, soit ~45 caractères par ligne, un texte qui casse tous les six mots. La latérale avait été posée sans relever la largeur, parce que la règle équivalente vivait dans opco.css sous un sélecteur `.opco-page` que cette page ne porte pas. Poser une grille à deux colonnes sans vérifier la largeur du conteneur, c'est rétrécir l'article d'autant. Elle donne au passage un style à `.glo-page`, qui n'en avait aucun. */ .glo-page.op-grille { max-width: 1140px; } /* --- Fiche : deux colonnes --------------------------------------------------------------- LA GRILLE, LA COLONNE COLLANTE, LA CARTE ET LE CHAMP SIRET VIVENT DANS assets/lateral.css, composant partagé avec /opco/{slug}. Ce fichier n'en garde AUCUNE copie. ⚠️ Il en a porté une, du 2026-08-08 au 2026-08-08 : `.glo-grille`, `.glo-lateral`, `.glo-carte`… recopiées à la main pendant que le balisage empruntait `op-siret-bar` à une feuille qu'il ne chargeait pas. La copie a divergé le jour même — label en minuscules, champ écrasé, placeholder tronqué. Si vous vous apprêtez à recopier une règle d'ici : chargez lateral.css à la place. Ne reste ci-dessous que ce qui est PROPRE au glossaire. */ /* La liste de liens des cartes latérales a été déplacée vers assets/lateral.css le 2026-08-08 et renommée `.lat-liens` : elle sert aussi le blog. Rien à recopier ici. */ /* --- Mobile ----------------------------------------------------------------------------- Sous 640 px la grille partagée passe déjà en une colonne. Il ne reste qu'à desserrer le chapô et le bloc source, qui sinon mangent la largeur utile sur un téléphone. */ @media (max-width: 640px) { .glo-chapo { font-size: 1.02rem; padding-left: .75rem; margin-bottom: 1.2rem; } .glo-source { padding: .8rem .9rem; } .glo-cat { margin-top: 1.8rem; } /* Le sigle passe sous le terme plutôt que d'étirer le titre au-delà de l'écran. */ h1 .glo-sigle { margin-left: 0; margin-top: .35rem; display: block; width: fit-content; } }