/* Les guides de Jobbya — la feuille commune de public/guides/. Un guide est une page HTML STATIQUE, servie telle quelle par les assets de Cloudflare : public/guides/.html répond à /guides/, et public/guides/index.html à /guides/ (html_handling par défaut). Ni React, ni écran de langue, ni JavaScript — sauf une calculette locale quand un guide en a vraiment besoin (script en ligne, rien n'est envoyé). Le modèle à recopier : paiement-en-4-fois-20-novembre-2026.html. Ses blocs, dans l'ordre (classes de cette feuille) : .aller-au-contenu lien d'évitement, premier élément du .entete la marque (icône /marque/icone.svg + le mot en SVG inline, qui prend --marque-mot) → lien vers / .page la colonne de lecture (42 rem, marge de 16 px) .ariane fil d'Ariane : « Guides » (/guides/) › page h1 + .date le titre (la requête visée) et la date en .chapeau la réponse, dans les deux premières lignes .en-bref encadré « En bref », TROIS points, en tête .note encadré neutre ; .note--juridique pour « Ceci n'est pas un conseil juridique » h2 / h3 les intertitres (h2 porte un id pour les ancres) .ref renvoi vers une source : [3] collé au chiffre ; deux renvois ou plus dans .exemple tout exemple chiffré, avec .exemple__etiquette « Exemple » (jamais un exemple sans son étiquette) .tableau enveloppe d'un : défile seul au téléphone, la page, elle, ne défile jamais à l'horizontale .aide « Où se faire aider » (dès que le sujet touche aux dettes : Banque de France, Points conseil budget, Crésus) .sortie LA seule sortie vers le produit : a.bouton « Essayer le faux achat » → https://jobbya.com/?source=guide- .signature « Page écrite le , sources ci-dessous. » .sources les sources,

, qui ne se coupe pas. */ .ref { padding: 0 1px; font-size: 0.72em; line-height: 1; vertical-align: super; text-decoration: none; font-variant-numeric: tabular-nums; } .refs { white-space: nowrap; } /* Après « ) », « . » ou « » », le navigateur peut couper AVANT le « [ » : le renvoi partait seul en début de ligne (vu à 402 px, « …France) » puis « [10] : »). Un gluon (U+2060, WORD JOINER, sans largeur ni voix) interdit cette coupure. Dans .refs, le premier renvoi en porte un aussi : sans effet, le groupe ne se coupe déjà pas. */ .ref::before, .refs::before { content: '\2060'; } /* ── En bref ──────────────────────────────────────────────────────────── */ .en-bref { margin: 0 0 24px; padding: 20px 20px 8px; border: 1px solid var(--trait); border-radius: var(--rayon-grand); background: var(--surface); } .en-bref h2 { margin: 0 0 12px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texte-doux); } .en-bref ol { padding-left: 0; list-style: none; counter-reset: bref; } .en-bref li { position: relative; padding-left: 36px; counter-increment: bref; } .en-bref li + li { margin-top: 12px; } .en-bref li::before { content: counter(bref); position: absolute; top: 0.15em; left: 0; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-voile); color: var(--accent); font-size: 0.8rem; font-weight: 700; line-height: 1; } /* ── Encadrés ─────────────────────────────────────────────────────────── */ .note { margin: 24px 0; padding: 14px 18px; border-left: 3px solid var(--accent); border-radius: 0 12px 12px 0; background: var(--accent-voile); } .note > :last-child { margin-bottom: 0; } .note--juridique { border-left-color: var(--trait-fort); background: var(--surface); font-size: 0.95em; color: var(--texte-doux); } .note--juridique strong { color: var(--texte); } .exemple { margin: 24px 0; padding: clamp(14px, 4vw, 20px); border: 1px dashed var(--trait-fort); border-radius: var(--rayon-grand); } .exemple > :last-child { margin-bottom: 0; } .exemple__etiquette { display: inline-block; margin: 0 0 12px; padding: 2px 10px; border-radius: 999px; background: var(--surface-appui); color: var(--texte-doux); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } /* ── Tableaux ─────────────────────────────────────────────────────────── */ .tableau { max-width: 100%; margin: 0 0 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .tableau table { width: 100%; border-collapse: collapse; font-size: 0.9rem; font-variant-numeric: tabular-nums; } .tableau caption { margin-bottom: 8px; font-size: 0.85rem; color: var(--texte-doux); text-align: left; } .tableau th, .tableau td { padding: 8px 10px; border-bottom: 1px solid var(--trait); text-align: right; white-space: nowrap; } .tableau th:first-child, .tableau td:first-child { padding-left: 0; text-align: left; } .tableau th:last-child, .tableau td:last-child { padding-right: 0; } .tableau thead th { font-weight: 600; color: var(--texte-doux); vertical-align: bottom; } .tableau .total { font-weight: 700; } /* Au téléphone, un tableau de cinq colonnes doit tenir sans défiler : les en-têtes passent à la ligne, les cellules se resserrent. Le défilement de .tableau ne reste qu'un filet pour les tableaux plus larges. */ @media (max-width: 479px) { .tableau table { font-size: 0.8125rem; } .tableau th, .tableau td { padding: 7px 5px; } .tableau thead th { white-space: normal; } } .tableau .vide { color: var(--texte-doux); } /* ── Où se faire aider ────────────────────────────────────────────────── */ .aide { margin: 28px 0; padding: 20px; border: 1px solid var(--trait); border-radius: var(--rayon-grand); background: var(--surface); } .aide h2 { margin: 0 0 12px; font-size: 1.15rem; } .aide ul { margin: 0; padding-left: 1.1em; } /* ── La sortie : une seule, sans pression ─────────────────────────────── */ .sortie { margin: 48px 0 32px; padding: 24px 20px; border: 1px solid var(--trait); border-radius: var(--rayon-grand); background: var(--surface); position: relative; overflow: hidden; } /* Le fil de marque en haut de la carte : la touche de rose de la page. */ .sortie::before { content: ''; position: absolute; inset: 0 0 auto; height: 2px; background: var(--degrade-marque); } .sortie h2 { margin: 0 0 8px; font-size: 1.3rem; } .sortie p { color: var(--texte-doux); } .bouton { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 4px; padding: 0 24px; border-radius: 999px; background: var(--bouton-fond); color: var(--bouton-texte); font-weight: 600; text-decoration: none; } .bouton:hover { color: var(--bouton-texte); filter: brightness(0.92); } .sortie__petit { margin: 12px 0 0; font-size: 0.85rem; } /* ── Signature et sources ─────────────────────────────────────────────── */ .signature { margin: 32px 0 8px; font-size: 0.9rem; color: var(--texte-doux); } .sources h2 { margin-top: 0.6em; font-size: 1.15rem; } .sources ol { padding-left: 1.6em; font-size: 0.875rem; line-height: 1.55; color: var(--texte-doux); overflow-wrap: anywhere; } .sources li { padding: 2px 4px; border-radius: 6px; scroll-margin-top: 16px; } .sources li:target { background: var(--accent-voile); color: var(--texte); } /* ── Pied de page ─────────────────────────────────────────────────────── */ .pied { margin-top: 48px; border-top: 1px solid var(--trait); padding: 20px 0 40px; font-size: 0.85rem; color: var(--texte-doux); } .pied ul { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0; padding: 0; list-style: none; } .pied li + li { margin-top: 0; } .pied a { display: inline-block; padding: 8px 0; color: var(--texte-doux); } .pied a:hover { color: var(--texte); } /* ── L'index : une carte par guide ────────────────────────────────────── */ .liste-guides { margin: 0 0 24px; padding: 0; list-style: none; } .liste-guides li + li { margin-top: 12px; } .liste-guides a { display: block; padding: 20px; border: 1px solid var(--trait); border-radius: var(--rayon-grand); background: var(--surface); color: var(--texte); text-decoration: none; } .liste-guides a:hover { border-color: var(--accent); } .liste-guides h2 { margin: 0 0 6px; font-size: 1.2rem; } .liste-guides p { margin: 0; color: var(--texte-doux); font-size: 0.95rem; } .liste-guides time { display: block; margin-top: 10px; font-size: 0.8rem; color: var(--texte-doux); } /* ── Impression : le texte et ses sources, sans le reste ──────────────── */ @media print { :root { --fond: #ffffff; --texte: #000000; --texte-doux: #333333; --accent: #000000; } .aller-au-contenu, .sortie, .pied { display: none; } .sources a::after { content: ' (' attr(href) ')'; } } /* ── Tableau de phrases (ajout du 28/09) ────────────────────────────────── Pour comparer des conditions écrites en phrases, pas en chiffres :

. Les cellules passent à la ligne et s'alignent à gauche. Au téléphone, chaque ligne devient une carte : les en-têtes sont masqués (lus par les lecteurs d'écran) et chaque

affiche le sien, recopié dans data-etiquette="…". Premier emploi : echeance-impayee-paiement-en-4-fois.html. */ .tableau--texte th, .tableau--texte td { white-space: normal; text-align: left; vertical-align: top; } .tableau--texte tbody th { font-weight: 600; } .tableau--texte .tableau__source { display: block; margin-top: 4px; font-size: 0.8rem; color: var(--texte-doux); } @media (max-width: 479px) { .tableau--texte table, .tableau--texte tbody, .tableau--texte tr, .tableau--texte th, .tableau--texte td { display: block; } /* Des phrases, pas des chiffres : la taille de lecture, pas celle des tableaux resserrés du téléphone (0,8125 rem plus haut). */ .tableau--texte table { font-size: 0.9375rem; } .tableau--texte thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .tableau--texte tbody tr { padding: 12px 0; border-bottom: 1px solid var(--trait); } .tableau--texte tbody th, .tableau--texte tbody td { padding: 3px 0; border-bottom: 0; } .tableau--texte tbody th { font-size: 1rem; } .tableau--texte td::before { content: attr(data-etiquette); display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; color: var(--texte-doux); } } /* ── La calculette (ajout du 28/09) ─────────────────────────────────────── Premier emploi : combien-je-dois-paiement-en-4-fois.html. Un