/* blog.css : la feuille du blog et de la prose (pages légales, articles), celle de Website (HEAD 35437e4,
   apps/web/src/blog/blog.css), passée aux jetons de /assets/charte.css (spec site-astro, REQ-3). Liée par les pages qui
   l'emploient (pages légales, blog), après la feuille de la famille. Seulement des jetons : aucune couleur écrite ici. */

/* Carte d'article (U3-3) : un seul lien, sur le titre, étiré à toute la carte ; le focus reprend le survol de
   .pb-card (pages.css:272), sans le déplacement ; le pied (.pb-ba-sign) en bas de la carte, « Lire l'article » à
   droite, en teal-dark (U3-7). */
.pb-post-carte { position: relative; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.pb-post-carte > p { flex-grow: 1; }
.pb-post-carte .pb-post-lien::after { content: ""; position: absolute; inset: 0; }
.pb-post-carte:focus-within { border-color: var(--teal); box-shadow: var(--shadow-lg); }
.pb-post-carte .pb-ba-sign { flex-wrap: wrap; }
.pb-post-suite { margin-left: auto; color: var(--teal-dark); }

/* Une carte seule, centrée (U3-3, H-2) : la colonne du milieu des trois de .pb-cards (pages.css:261) ; en mobile,
   une colonne (pages.css:755), où « 2 / -2 » vaut « 1 / 2 » : aucune colonne implicite. */
.pb-cards-1 > * { grid-column: 2 / -2; }

/* Rangée de boutons qui suit une grille de cartes (U3-7 ; tâches 9.11 et 9.6, §7 d'UX4) : la pagination de la liste
   (<nav class="pb-cta-row pb-pager">) et « Voir tous les articles » d'un bloc du blog (<div class="pb-cta-row">), en
   boutons d'Hugo (.pb-cta-row, .pb-btn-ghost), à l'écart de la grille comme celle d'experts.html:260
   (style="margin-top:2.5rem"). Au focus clavier, le bouton garde sa pilule (R4 d'UX4) : le rayon de .pb-btn-ghost
   (pages.css:152) contre les 4px de .pb-page a:focus-visible (pages.css:62-68 ; 0,3,1 contre 0,2,1). */
.pb-cards + .pb-cta-row { margin-top: 2.5rem; }
.pb-cards + .pb-cta-row a:focus-visible { border-radius: var(--bouton-rayon); }

/* Bloc du blog (tâche 9.6) : la grille à l'écart du titre de la section, comme le contenu de la FAQ sous le sien
   (experts.html:291, style="margin-bottom:2.5rem") ; sans cette règle, la seule marge de .pb-h2 (1rem, pages.css:199).
   La liste du blog n'a pas de .pb-h2 avant sa grille : elle n'est pas touchée. */
.pb-h2 + .pb-cards { margin-top: 2.5rem; }

/* Apparition d'un bloc du blog (tâche 9.6 ; U3-7, point 7 ; BLOCS_A_APPARITION) : sa grille porte .pb-reveal, comme la
   grille de chaque section d'experts.html, et pages.js la révèle quand 18 % de sa hauteur est à l'écran (seuil 0,18 de
   son IntersectionObserver ; seule la première .pb-reveal d'une page est révélée d'emblée). Sur une colonne, jusqu'à
   900 px (pages.css:747 et 755), neuf cartes font 3 430 px de haut à 320 px : plus de 5,5 hauteurs d'écran, le seuil
   n'est jamais atteint et les cartes resteraient invisibles (mesuré en 9.6 à 320 × 568 et à 667 × 375, quand la grille
   n'est pas la première .pb-reveal de la page). La grille y reste donc visible, sans fondu ; sur trois colonnes, trois
   rangées au plus, elle apparaît comme ses voisines. Défaut, en attente de l'avis d'ux-designer. */
@media (max-width: 900px) {
  .pb-cards.pb-reveal { opacity: 1; transform: none; }
}

/* Bloc « Texte » d'une page (edition-articles, REQ-3.1 : le rendu du corps d'article) : la colonne du texte, centrée ; le
   premier intertitre qui suit du texte retrouve la marge haute de .pb-prose h2 (pages.css:403), que .pb-prose
   h2:first-of-type lui retire (pages.css:407). L'article du blog a sa propre colonne (plus bas, REQ-19). */
.pb-texte .pb-prose { margin-left: auto; margin-right: auto; }
.pb-texte .pb-prose h2:first-of-type:not(:first-child) { margin-top: 2.6rem; }

/* Source d'un chiffre dans un article (R3 d'UX4 ; U3-7, 1) : en --ink-70, comme la méta, au lieu du --ink-40 d'Hugo
   (pages.css:548, 2,64:1), que D-35 ne garde que sur ses pages. */
.pb-blog .pb-bs-source { color: var(--ink-70); }

/* Surtitre des introductions du blog (U3-7, 1) : sur la teinte de .pb-hero:before (pages.css:226-235, jusqu'à 10 %
   de teal), le teal d'Hugo descend à 4,39:1 à 320 et 375 px (mesure de 9.11) ; teal-dark le tient au-dessus de 4,5:1.
   Rattachée au <main class="pb-blog"> des pages du blog (Page.astro) : jamais l'introduction d'une autre page. */
.pb-blog .pb-hero .pb-eyebrow { color: var(--teal-dark); }

/* Marges de l'introduction (R1 d'UX4) : le .pb-hero d'Hugo n'a aucune marge latérale (pages.css:221) ; sous 760 px,
   le texte et le filet de la signature touchaient le bord. La marge de .pb-container sous 560 px (pages.css:799) ;
   au-delà de 760 px, .pb-hero-inner (centré, 760 px au plus) ne bouge pas. Rattachée aux pages du blog. */
.pb-blog .pb-hero { padding-left: 1.2rem; padding-right: 1.2rem; }

/* Mots longs (R2-U-2 de la revue 5.3) : le corps et l'extrait d'un article n'ont aucune borne de mot, ni le bloc
   « Texte » (edition-articles) ; ici seulement, jamais dans les feuilles d'Hugo. L'introduction de la liste aussi (R1
   d'UX4) : sans cela, le overflow: hidden du héros (pages.css:223) y coupe net un mot plus large que l'écran. La carte
   est couverte plus haut. */
.pb-blog .pb-hero-inner, .pb-post, .pb-texte .pb-prose { overflow-wrap: anywhere; }

/* Encart du certificat (U3-12 ; tâche 9.5) : l'encart d'Hugo (.pb-disclaimer, pages.css:424), dans la colonne du
   texte, son lien souligné par .pb-prose a (pages.css:413) ; le teal d'Hugo y descend à 4,38:1 sur --cream-2 :
   teal-dark le tient à 5,58:1 (U3-7). L'identifiant dans la chasse fixe d'Hugo (--font-mono, pages.css:31), à la taille
   du texte de l'encart (1em de ses .9rem, pages.css:431 : 14,4 px), que le code du corps riche (.85em, plus bas) ne
   réduit pas : le sélecteur porte .pb-prose pour l'emporter sur .pb-prose code, posé après (revue d'ux-designer). Au-dessus
   de l'encart, la marge que .pb-disclaimer pose sous lui (2rem, pages.css:429), que .pb-prose p retire (§7 d'UX4). */
.pb-post .pb-cert { margin-top: 2rem; }
.pb-cert a { color: var(--teal-dark); }
.pb-prose .pb-cert code { font-family: var(--font-mono); font-size: 1em; }

/* Sélecteur de langue (tâche 9.8 ; design-lot-3 §5.11 ; U3-6, U3-7 ; défaut de Q-83, en attente d'Hugo) : une ligne du
   pied, entre ses liens et la mention de droits, dans les deux familles (src/chrome/SelecteurDeLangue.astro), sous sa
   propre classe, sur les seules pages qui ont une traduction publiée (elles lient cette feuille). La taille des liens du
   pied d'Hugo (.82rem : .pb-flinks a, pages.css:661 ; .hp-fLinks a, styles.css), mais en --ink-70 (7,16:1) et non en
   --ink-40 (2,64:1), que D-35 ne garde que sur les liens d'Hugo ; la langue de la page en --ink, graisse 600, comme le texte
   fort d'Hugo (.pb-prose strong, pages.css:414) ; sous la ligne, la marge des liens du pied (pages.css:660). Avis UX5
   (A3) : la ligne est centrée, les noms séparés du « · » par .5rem (le gap de la pile flottante d'Hugo : styles.css:162,
   pages.css:483), pour que l'anneau ne touche plus le séparateur ; chaque lien a la hauteur d'une ligne du pied, si bien
   que son anneau, celui d'Hugo (.pb-page a:focus-visible, pages.css:62-68, que la famille hp n'a pas), épouse le texte
   comme celui des liens du pied ; la cible de 44 px (WCAG 2.5.5, comme l'appel mobile d'Hugo : .hp-topCta sous 900 px,
   styles.css) est une zone cliquable étendue de 12 px au-dessus et au-dessous (le ::after : (44 - 21,65) / 2 = 11,2 px,
   la ligne du pied étant de .82rem × 1,65), et sa largeur dépasse 44 px grâce à .25rem de part et d'autre du texte ;
   souligné au survol et au focus. */
.pb-langs { display: flex; justify-content: center; align-items: center; gap: .5rem; margin-bottom: 1.5rem; font-size: .82rem; color: var(--ink-70); }
.pb-langs a { position: relative; padding: 0 .25rem; color: var(--ink-70); }
.pb-langs a::after { content: ""; position: absolute; inset: -12px 0; }
.pb-langs a:hover, .pb-langs a:focus-visible { text-decoration: underline; }
.pb-langs a:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 4px; }
.pb-langs [aria-current] { padding: 0 .25rem; color: var(--ink); font-weight: 600; }

/* Pile flottante d'Hugo sur téléphone (UX5, A2 ; tâche 9.8) : jusqu'à 900 px, .hp-floatCta est à 1rem du bas
   (styles.css:1418) et couvre 118 px du bas de la page (bouton principal de 50 px, écart de .5rem, bouton secondaire
   de 44 px sous 480 px : styles.css:154-186 et 1548) : le sélecteur de langue et la mention de droits du pied hp
   restaient inatteignables au toucher (0 point sur 5 jusqu'à 480 px) et, au clavier, masqués par la pile (WCAG 2.2,
   2.4.11). Sous 560 px (pages.css:798), le pied hp qui porte le sélecteur réserve 8rem en bas : la pile et 10 px
   d'air. Aucune feuille d'Hugo touchée, aucune page sans sélecteur (:has) ; la pile pb (un bouton de 50 px à 16 px du
   bas) ne couvre rien. Retrait d'un trait si Hugo met la réserve dans son pied (Q-83). */
@media (max-width: 560px) {
  .hp-footer:has(.pb-langs) { padding-bottom: 8rem; }
}

/* Corps riche (spec edition-articles, design §4, tâche 6 ; avis d'ux-designer et d'Hugo à venir) : les formes qu'un
   collage garde (src/contenu/rendu/corps.ts), dans .pb-prose : le corps d'un article, le bloc « Texte » et la prose de
   pb-legal, dont les pages lient cette feuille (src/blog/pages.ts, lieLaFeuilleDuBlog). Aucune règle sur les formes
   d'avant (h2, h3, p, ul, ol : pages.css:398-414), hors le code en ligne ; chaque valeur est celle d'Hugo pour le même
   usage, ou dérivée d'elle (tests/unitaires/feuille-du-blog.test.ts). */

/* Titres : h1 comme l'intertitre de la prose (pages.css:399-406), à la taille et à l'interligne du titre d'une section
   (.pb-h2, pages.css:194-200 : 1.2, plutôt que le 1.8 de la prose), sans marge haute en tête de colonne comme lui ; h4
   à h6 à la marge de h3 (pages.css:408), à la taille du texte (.pb-prose, 1rem) et à la graisse du texte fort d'Hugo (600). */
.pb-prose h1 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.7rem, 3.5vw, 2.3rem); line-height: 1.2; margin: 2.6rem 0 .9rem; }
.pb-prose h1:first-child { margin-top: 0; }
.pb-prose h4, .pb-prose h5, .pb-prose h6 { font-size: 1rem; font-weight: 600; margin: 1.8rem 0 .6rem; }

/* Sous-listes : l'écart d'un élément de liste (.5rem, pages.css:412) au-dessus, aucune marge au-dessous. */
.pb-prose li > ul, .pb-prose li > ol { margin: .5rem 0 0; }

/* Citation : le filet teal de l'encart d'Hugo (.pb-disclaimer, pages.css:424-432 : 3px, retrait de 1.2rem), sans
   son fond ; le texte en --ink-70 comme un paragraphe, à sa marge (1rem). Ligne : le filet des séparations d'Hugo (1px de
   --ink-10, .pb-ba-sign), à la marge de l'encart (2rem). */
.pb-prose blockquote { margin: 0 0 1rem; padding: 0 0 0 1.2rem; border-left: 3px solid var(--teal); color: var(--ink-70); }
.pb-prose hr { margin: 2rem 0; border: 0; border-top: 1px solid var(--ink-10); }

/* Figures (DR-14) : à la marge d'un paragraphe ; l'image prend la largeur de sa boîte, sa hauteur suit (width et height
   en gardent la place) ; pleine largeur, la colonne ; réduite, centrée, la moitié de la colonne d'Hugo (720px), sans
   dépasser la colonne en mobile. */
.pb-prose .pb-figure { margin: 0 0 1rem; }
.pb-prose .pb-figure img { display: block; width: 100%; height: auto; }
.pb-prose .pb-figure-reduite { max-width: 360px; margin-left: auto; margin-right: auto; }

/* Légende (spec medias-metadonnees, DR-9 ; revue d'ux-designer, point 7 ; avis d'Hugo à l'essai) : sous l'image, à
   l'écart d'une source sous son chiffre chez Hugo (.pb-bs-source, pages.css:548 : .7rem), dans la couleur du texte de
   la prose (--ink-70, pages.css:409), plus petite que lui pour s'en distinguer (mesuré à 375 px) : la taille des liens du
   pied d'Hugo (.82rem, .pb-flinks a, pages.css:661) et l'interligne d'un champ de son formulaire (1.5, .pb-input,
   pages.css:698) ; sous une image réduite, à la largeur de l'image (la figure). Ses mots n'ont aucune borne : un mot
   long, une URL, s'y coupe dans les trois corps, prose légale comprise, que la règle des mots longs plus haut ne couvre
   pas. */
.pb-prose .pb-figure figcaption { margin-top: .7rem; color: var(--ink-70); font-size: .82rem; line-height: 1.5; overflow-wrap: anywhere; }

/* Tableau (DR-5) : sa boîte défile quand il dépasse la colonne (tabindex="0" : au clavier aussi), ses mots ne se
   coupent pas ; filets de 1px en --ink-10, remplissage d'un champ du formulaire d'Hugo (.pb-input, pages.css:702 :
   .7rem .9rem), le texte d'une cellule en --ink-70 comme un paragraphe (pages.css:409) ; en-têtes en --ink et 600, sur le
   fond de l'encart (--cream-2), leurs liens en teal-dark (le teal d'Hugo y descend à 4,38:1, teal-dark le tient à
   5,58:1, comme dans l'encart du certificat ; revue d'ux-designer) ; les paragraphes et listes d'une cellule sans marge. */
.pb-prose .pb-tableau { margin: 0 0 1.2rem; overflow-x: auto; overflow-wrap: normal; }
.pb-prose .pb-tableau table { border-collapse: collapse; }
.pb-prose .pb-tableau th, .pb-prose .pb-tableau td { padding: .7rem .9rem; border: 1px solid var(--ink-10); text-align: left; vertical-align: top; }
.pb-prose .pb-tableau th { color: var(--ink); font-weight: 600; background: var(--cream-2); }
.pb-prose .pb-tableau th p, .pb-prose .pb-tableau th li { color: inherit; }
.pb-prose .pb-tableau th a { color: var(--teal-dark); }
.pb-prose .pb-tableau p, .pb-prose .pb-tableau ul, .pb-prose .pb-tableau ol { margin: 0; }

/* Code (DR-16) : la chasse fixe d'Hugo (--font-mono, pages.css:31), à la taille de son texte en chasse fixe dans la prose
   (.85em, .pb-placeholder, pages.css:421) ; en ligne, espaces et tabulations gardés, la ligne se coupe ; le bloc garde
   ses lignes et défile (tabindex="0"), sur le fond de l'encart, au remplissage, au rayon et à l'interligne d'un champ
   du formulaire d'Hugo (.pb-input : .7rem .9rem, 12px, 1.5 ; pages.css:692-704), à la marge d'une liste (1.2rem). */
.pb-prose code { font-family: var(--font-mono); font-size: .85em; white-space: pre-wrap; }
.pb-prose .pb-code { margin: 0 0 1.2rem; padding: .7rem .9rem; overflow-x: auto; font-family: var(--font-mono); line-height: 1.5; background: var(--cream-2); border-radius: 12px; }
.pb-prose .pb-code code { white-space: pre; }

/* Dans la grille de la page légale (.pb-legal, pages.css:384), la colonne de la prose ne s'élargit pas à la plus longue
   ligne d'un bloc de code ou d'un tableau : ils défilent dans la colonne, sans élargir la page (mesuré à 375 px). */
.pb-legal .pb-prose { min-width: 0; }

/* Le tableau et le bloc de code se focalisent au clavier : l'anneau d'Hugo (.pb-page a:focus-visible, pages.css:62-68). */
.pb-prose .pb-tableau:focus-visible, .pb-prose .pb-code:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

/* Alignement (classes du rendu, jamais un attribut style : S-EA-4) ; le justifié se césure, dans la langue de la page. */
.pb-prose .pb-al-centre { text-align: center; }
.pb-prose .pb-al-droite { text-align: right; }
.pb-prose .pb-al-justifie { text-align: justify; hyphens: auto; }

/* Tableau et bloc de code du Markdown d'un article : le tableau est mis dans sa boîte (.pb-tableau, plus haut) par le
   greffon de la construction (astro.config.mjs) ; le bloc de code (<pre>) est lui-même sa boîte : les valeurs de .pb-code,
   plus haut (fond de l'encart, remplissage et rayon d'un champ, interligne 1.5), et il défile au clavier comme lui. */
.pb-prose pre { margin: 0 0 1.2rem; padding: .7rem .9rem; overflow-x: auto; font-family: var(--font-mono); line-height: 1.5; background: var(--cream-2); border-radius: 12px; }
.pb-prose pre code { white-space: pre; }
.pb-prose pre:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   Article du blog, le modèle d'Hugo (spec site-astro, REQ-19, D-12 ; design §4 ; docs/article-template/article-template.css,
   traduit aux jetons de /assets/charte.css, aucune couleur en dur ; src/components/blog/ArticleDuBlog.astro). Les tailles du
   modèle, en px, sont en rem (16 px) ; ses gris : --ink-55 (4,4:1 sur --cream) devient --ink-70 sur le texte, --ink-40 ne
   reste que sur les séparateurs décoratifs ; son --teal-ink devient --teal-dark ; ses ombres, celles de la charte. Sans
   JavaScript (scripting: none), les apparitions (.pb-reveal, pages.js) sont visibles d'emblée ; en mouvement réduit,
   pages.css les montre et les transitions s'arrêtent. Rien ici hors de .pb-post et .pb-auteur.
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* Retour de Fabien (23/10, 0 h) sur le premier article, qui prime sur les mesures du modèle (colonne de 680 px, sommaire de
   220 px) : la colonne de lecture prend toute la largeur utile du conteneur pb, moins le sommaire fixe ; le sommaire est plus
   large (260 px dès 1 024 px, 300 px dès 1 280 px : mesuré sur les titres du premier article, la plus longue entrée tient en
   trois lignes à 260 px, deux à 300 px) ; la prose est justifiée. */
.pb-post { --pb-post-sommaire: 260px; --pb-post-haut: 100px; }
@media (min-width: 1280px) { .pb-post { --pb-post-sommaire: 300px; } }

/* La barre de progression de pages.js (.pb-progress, z 399) passe au-dessus de la barre du haut (z 400) : sans bouton
   flottant, celle-ci ne s'efface jamais et masquerait la barre, comme sur la page experts avant son défilement. */
body:has(.pb-post) .pb-progress { z-index: 401; }

@media (scripting: none) {
  .pb-post .pb-reveal { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html:has(.pb-post) { scroll-behavior: auto; }
  .pb-post * { transition: none !important; animation: none !important; }
}

/* ─── La grille : le sommaire fixe à gauche, la colonne de lecture sur le reste de la largeur du conteneur pb (le même que les
   autres pages) ; le fil d'Ariane et l'en-tête dans la colonne, le sommaire à leur hauteur (ses trois rangs), décalé de 3rem
   pour s'aligner sur le corps, comme le modèle. Le sommaire ne défile qu'en hauteur, s'il dépasse l'écran : jamais en largeur
   (ses entrées longues passent à la ligne, et l'entrée active ne se décale plus de 2 px, ce qui ouvrait un ascenseur). */
.pb-post-grille { display: grid; grid-template-columns: var(--pb-post-sommaire) minmax(0, 1fr); column-gap: 3rem; padding-top: 3rem; padding-bottom: 6rem; }
.pb-post-fil { grid-column: 2; grid-row: 1; min-width: 0; }
.pb-post-entete { grid-column: 2; grid-row: 2; min-width: 0; }
.pb-post-sommaire { grid-column: 1; grid-row: 1 / 4; align-self: start; position: sticky; top: var(--pb-post-haut); margin-top: 3rem; min-width: 0; max-height: calc(100vh - var(--pb-post-haut) - 1.5rem); overflow-x: hidden; overflow-y: auto; }
.pb-post-colonne { grid-column: 2; grid-row: 3; min-width: 0; }
.pb-post-sommaire-mobile { display: none; }

/* ─── Fil d'Ariane ─── */
.pb-post-fil { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .875rem; font-family: var(--font-mono); font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-70); }
.pb-post-fil span[aria-hidden] { color: var(--ink-40); }
.pb-post-fil a { color: var(--ink-70); }
.pb-post-fil a:hover { color: var(--teal-dark); }

/* ─── En-tête : rubrique, titre, chapô, dates et temps de lecture, signature ─── */
.pb-post-rubrique { display: inline-block; margin: 0; padding: .25rem .75rem; border-radius: var(--radius-full); background: var(--teal-light); color: var(--teal-dark); font-family: var(--font-mono); font-size: .75rem; letter-spacing: .03em; text-transform: uppercase; }
.pb-post-titre { margin: 1.25rem 0 0; font-family: var(--font-serif); font-weight: 400; font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.1; letter-spacing: -.01em; color: var(--ink); }
.pb-post-chapo { margin: 1.25rem 0 0; font-size: 1.25rem; line-height: 1.5; color: var(--ink-70); }
.pb-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .625rem; margin-top: 1.5rem; font-family: var(--font-mono); font-size: .8125rem; color: var(--ink-70); }
.pb-post-meta-sep { color: var(--ink-40); }
.pb-post-maj { color: var(--teal-dark); }
.pb-post-signature { display: flex; align-items: center; gap: .75rem; margin-top: 1.25rem; }
.pb-post-signature p { margin: 0; font-size: .875rem; color: var(--ink-70); }
.pb-post-signature a { color: var(--ink); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.pb-post-signature a:hover { color: var(--teal-dark); }
.pb-post-avatar { width: 32px; height: 32px; border-radius: var(--radius-full); border: 2px solid var(--cream); background: var(--ink-10); object-fit: cover; }

/* ─── Sommaire fixe ─── */
.pb-post-etiquette { margin: 0 0 .75rem; font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-70); }
.pb-post-sommaire ol { list-style: none; margin: 0; padding: 0; }
.pb-post-sommaire li { margin: 0; }
.pb-post-sommaire a { display: block; padding: .375rem 0 .375rem .75rem; border-left: 2px solid var(--transparent); font-size: .875rem; line-height: 1.4; color: var(--ink-70); white-space: normal; overflow-wrap: anywhere; transition: color .15s ease, border-color .15s ease; }
.pb-post-sommaire a:hover { color: var(--teal-dark); border-left-color: var(--ink-10); }
.pb-post-sommaire a.pb-actif { color: var(--ink); font-weight: 500; border-left-color: var(--teal); }

/* ─── Pastille de certification (<details>) et son volet ─── */
.pb-post-pastille { position: relative; margin: 2rem 0; }
.pb-post-pastille-bouton { display: inline-flex; align-items: center; gap: .5625rem; min-height: 44px; padding: .5rem .875rem; border: 1px solid var(--ink-10); border-radius: var(--radius-full); background: var(--white); box-shadow: var(--shadow-sm); cursor: pointer; list-style: none; transition: border-color .15s ease, box-shadow .15s ease; }
.pb-post-pastille-bouton::-webkit-details-marker { display: none; }
.pb-post-pastille-bouton:hover { border-color: var(--teal); box-shadow: var(--shadow-glow-teal); }
.pb-post-coche { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: var(--radius-full); background: var(--teal); color: var(--white); }
.pb-post-coche svg { width: 11px; height: 11px; }
.pb-post-pastille-texte { font-size: .8125rem; line-height: 1.25; color: var(--ink-70); text-align: left; }
.pb-post-pastille-texte b { color: var(--ink); font-weight: 600; }
.pb-post-pastille-chevron { font-size: .6875rem; color: var(--ink-40); transition: transform .2s ease; }
.pb-post-pastille[open] .pb-post-pastille-chevron { transform: rotate(180deg); }
.pb-post-volet { position: absolute; top: calc(100% + 10px); left: 0; z-index: 40; width: 320px; max-width: calc(100vw - 3rem); padding: 1.125rem; border: 1px solid var(--ink-10); border-radius: 14px; background: var(--white); box-shadow: var(--shadow-lg); animation: pb-post-volet .16s ease; }
@keyframes pb-post-volet { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.pb-post-volet::before { content: ""; position: absolute; top: -6px; left: 24px; width: 11px; height: 11px; border-top: 1px solid var(--ink-10); border-left: 1px solid var(--ink-10); background: var(--white); transform: rotate(45deg); }
.pb-post-volet-tete { display: flex; gap: .75rem; align-items: flex-start; }
.pb-post-volet-avatar { flex: none; width: 44px; height: 44px; border-radius: var(--radius-full); background: var(--ink-10); object-fit: cover; }
.pb-post-volet-nom { margin: 0; font-family: var(--font-serif); font-size: 1.0625rem; line-height: 1.15; color: var(--ink); }
.pb-post-volet-titre { margin: .125rem 0 0; font-size: .8125rem; color: var(--ink-70); }
.pb-post-verifie { display: inline-flex; align-items: center; gap: .3125rem; margin-top: .375rem; font-size: .75rem; font-weight: 600; color: var(--teal-dark); }
.pb-post-verifie-coche { display: inline-flex; }
.pb-post-verifie-coche svg { width: 12px; height: 12px; }
.pb-post-volet-parole { margin: .75rem 0 0; font-size: .8125rem; line-height: 1.5; color: var(--ink-70); }
.pb-post-volet-date { margin: .875rem 0 0; padding-top: .75rem; border-top: 1px solid var(--ink-10); font-size: .75rem; color: var(--ink-70); }
.pb-post-volet-date b, .pb-post-certificat-date b { color: var(--ink); font-weight: 500; }
.pb-post-volet-pied { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .75rem; }
.pb-post-volet-garantie { font-size: .6875rem; color: var(--ink-70); }
.pb-post-volet-garantie b { color: var(--teal); font-weight: 600; }
.pb-post-volet-verifier { font-size: .75rem; font-weight: 600; color: var(--teal-dark); }
.pb-post-volet-verifier:hover, .pb-post-certificat-verifier:hover, .pb-post-fiche-lien:hover { text-decoration: underline; }

/* ─── L'essentiel en 30 secondes ─── */
.pb-post-essentiel { margin: 2.5rem 0; padding: 1.75rem 2rem; border-left: 3px solid var(--teal); border-radius: var(--radius-2xl); background: var(--teal-light); }
.pb-post-essentiel-titre { display: flex; align-items: center; gap: .5rem; margin: 0 0 .75rem; font-family: var(--font-mono); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--teal-dark); }
.pb-post-essentiel-titre span { font-size: .9375rem; }
.pb-post-essentiel ul { display: grid; gap: .625rem; margin: 0; padding: 0; list-style: none; }
.pb-post-essentiel li { position: relative; padding-left: 1.625rem; font-size: 1.0625rem; line-height: 1.55; color: var(--ink); }
.pb-post-essentiel li::before { content: "✓"; position: absolute; left: 0; top: 0; font-weight: 700; color: var(--teal); }
.pb-post-essentiel code { background: var(--teal-12); }

/* ─── Sommaire mobile (<details>) ─── */
.pb-post-sommaire-mobile { margin: 1.5rem 0; padding: 0 1.125rem; border: 1px solid var(--ink-10); border-radius: var(--radius-xl); background: var(--white); }
.pb-post-sommaire-mobile > summary { display: flex; justify-content: space-between; align-items: center; padding: .875rem 0; font-size: .875rem; font-weight: 600; cursor: pointer; list-style: none; }
.pb-post-sommaire-mobile > summary::-webkit-details-marker { display: none; }
.pb-post-sommaire-mobile > summary::after { content: "⌄"; font-size: 1.125rem; color: var(--teal); transition: transform .18s ease; }
.pb-post-sommaire-mobile[open] > summary::after { transform: rotate(180deg); }
.pb-post-sommaire-mobile ol { list-style: none; margin: 0; padding: 0 0 .5rem; }
.pb-post-sommaire-mobile li { border-top: 1px solid var(--ink-10); }
.pb-post-sommaire-mobile a { display: block; padding: .875rem 0; font-size: .9375rem; color: var(--ink-70); }

/* ─── Le corps : la prose du modèle, sur celle de la base (.pb-prose, pages.css:384-418). Justifiée par défaut (Fabien, 23/10) :
   les paragraphes du corps, césurés dans la langue de la page (hyphens: auto, lang=fr) et aux lignes équilibrées quand le
   navigateur le sait (text-wrap: pretty) ; les listes, encarts, citations, légendes, tableaux, FAQ et sources restent alignés à
   gauche, où le justifié creuserait des lézardes sur des lignes courtes. ─── */
.pb-post .pb-prose { max-width: none; margin: 0; font-size: 1.125rem; line-height: 1.75; hyphens: auto; }
.pb-post .pb-prose > p { text-align: justify; text-wrap: pretty; }
.pb-post .pb-prose > * { scroll-margin-top: var(--pb-post-haut); }
.pb-post .pb-prose h2 { position: relative; margin: 4rem 0 1rem; padding-top: 0; font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.625rem, 3.5vw, 2.125rem); line-height: 1.15; letter-spacing: -.01em; color: var(--ink); scroll-margin-top: var(--pb-post-haut); }
.pb-post .pb-prose h2:first-child { margin-top: 0; }
.pb-post .pb-prose h3 { margin: 2.5rem 0 .75rem; font-family: var(--font-sans); font-weight: 600; font-size: 1.25rem; color: var(--ink); scroll-margin-top: var(--pb-post-haut); }
.pb-post .pb-prose h2::before, .pb-post .pb-prose h3::before { content: "#"; position: absolute; left: -1.75rem; font-family: var(--font-sans); color: var(--teal); opacity: 0; transition: opacity .15s ease; }
.pb-post .pb-prose h2:hover::before, .pb-post .pb-prose h3:hover::before { opacity: .5; }
.pb-post .pb-prose h3 { position: relative; }
.pb-post .pb-prose p { margin: 0 0 1.5rem; color: var(--ink-70); }
.pb-post .pb-prose strong { color: var(--ink); font-weight: 600; }
.pb-post .pb-prose a { color: var(--teal-dark); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: var(--teal-40); transition: text-decoration-color .15s ease; }
.pb-post .pb-prose a:hover { text-decoration-color: var(--teal); }
.pb-post .pb-prose ul, .pb-post .pb-prose ol { margin: 0 0 1.5rem; padding-left: 0; list-style: none; color: var(--ink-70); }
.pb-post .pb-prose ul li { position: relative; margin-bottom: .625rem; padding-left: 1.5rem; }
.pb-post .pb-prose ul li::before { content: ""; position: absolute; left: 2px; top: .75rem; width: 6px; height: 6px; border-radius: 1px; background: var(--teal); }
.pb-post .pb-prose ol { counter-reset: pb-post-li; }
.pb-post .pb-prose ol li { position: relative; margin-bottom: .75rem; padding-left: 2rem; counter-increment: pb-post-li; }
.pb-post .pb-prose ol li::before { content: counter(pb-post-li); position: absolute; left: 0; top: 0; font-family: var(--font-mono); font-weight: 500; color: var(--teal-dark); }
.pb-post .pb-prose li > ul, .pb-post .pb-prose li > ol { margin: .5rem 0 0; }
.pb-post .pb-prose code { padding: 2px 6px; border-radius: 4px; background: var(--ink-08); color: var(--ink); font-size: .9em; }
.pb-post .pb-prose blockquote { margin: 2rem 0; padding: .25rem 0 .25rem 1.5rem; border-left: 3px solid var(--teal); font-family: var(--font-serif); font-size: 1.375rem; line-height: 1.4; color: var(--ink); }
.pb-post .pb-prose blockquote p { margin: 0; color: inherit; }
.pb-post .pb-prose hr { margin: 2rem 0; }

/* Encarts (src/lib/conventions.ts) : info sur teal clair, note sur blanc. */
.pb-post .pb-encart { display: flex; gap: .875rem; margin: 1.75rem 0; padding: 1.125rem 1.25rem; border-left: 3px solid var(--teal); border-radius: var(--radius-xl); background: var(--teal-light); color: var(--ink); }
.pb-post .pb-encart p { margin: 0; font-size: 1rem; color: var(--ink); }
.pb-post .pb-encart p + p { margin-top: .75rem; }
.pb-post .pb-encart-icone { flex: none; font-size: 1.125rem; line-height: 1.6; color: var(--teal-dark); }
.pb-post .pb-encart-titre { margin-bottom: .25rem; font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .04em; text-transform: uppercase; color: var(--teal-dark); }
.pb-post .pb-encart-note { border: 1px solid var(--ink-10); border-left: 3px solid var(--ink-10); background: var(--white); }
.pb-post .pb-encart-note .pb-encart-icone, .pb-post .pb-encart-note .pb-encart-titre { color: var(--ink-70); }

/* Tableaux : en figure légendée, dans leur boîte qui défile (la boîte de la base, .pb-tableau), sans filets verticaux, l'en-tête
   sur crème en chasse fixe (ses libellés se replient : ceux du premier article sont plus longs que ceux du modèle, qui les tenait
   sur une ligne), la colonne accentuée (.pb-accent) soulignée d'un liseré teal, en encre pleine. */
.pb-post .pb-figure-tableau { margin: 2rem 0; }
.pb-post .pb-figure-tableau figcaption { margin-bottom: .625rem; font-family: var(--font-mono); font-size: .75rem; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-70); }
.pb-post .pb-prose .pb-tableau { margin: 2rem 0; border: 1px solid var(--ink-10); border-radius: var(--radius-xl); overflow-x: auto; }
.pb-post .pb-prose .pb-figure-tableau .pb-tableau { margin: 0; }
.pb-post .pb-prose .pb-tableau table { width: 100%; border-collapse: collapse; background: var(--white); font-size: .9375rem; }
.pb-post .pb-prose .pb-tableau th, .pb-post .pb-prose .pb-tableau td { padding: .875rem 1.125rem; border: 0; border-top: 1px solid var(--ink-10); text-align: left; vertical-align: top; }
.pb-post .pb-prose .pb-tableau thead th { border-top: 0; border-bottom: 1px solid var(--ink-10); background: var(--cream); color: var(--ink); font-family: var(--font-mono); font-weight: 500; font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; }
.pb-post .pb-prose .pb-tableau tbody th { font-weight: 600; color: var(--ink); background: var(--white); }
.pb-post .pb-prose .pb-tableau td { color: var(--ink-70); }
.pb-post .pb-prose .pb-tableau th.pb-accent, .pb-post .pb-prose .pb-tableau td.pb-accent { box-shadow: inset 2px 0 0 var(--teal); color: var(--ink); }
.pb-post .pb-prose .pb-tableau thead th.pb-accent { color: var(--teal-dark); }
.pb-post .pb-prose .pb-tableau tbody td.pb-accent { font-weight: 500; }

/* ─── CTA ─── */
.pb-post-appel { position: relative; overflow: hidden; margin: 3rem 0; padding: 2.25rem 2.5rem; border-radius: var(--radius-2xl); background: linear-gradient(135deg, var(--ink), var(--ink-teal)); box-shadow: var(--shadow-lg); }
.pb-post-appel > * { position: relative; }
.pb-post-appel-halo { position: absolute; top: -40%; right: -10%; width: 320px; height: 320px; background: radial-gradient(circle, var(--teal-40), var(--transparent) 70%); pointer-events: none; }
.pb-post-appel-surtitre { margin: 0 0 .625rem; font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--teal-light); }
.pb-post-appel-titre { margin: 0 0 .625rem; font-family: var(--font-serif); font-weight: 400; font-size: 1.75rem; line-height: 1.2; color: var(--cream); }
.pb-post-appel-texte { max-width: 46ch; margin: 0 0 1.5rem; font-size: 1rem; color: var(--white-80); }
.pb-post-appel-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.pb-post-appel-lien { font-size: .9375rem; color: var(--teal-light); }
.pb-post-appel-lien:hover { text-decoration: underline; }

/* ─── FAQ : le <details> de pb-faq (pages.css:314-339), sous son titre ─── */
.pb-post-faq { margin-top: 4rem; }
.pb-post-faq h2 { margin: 0 0 1rem; font-family: var(--font-serif); font-weight: 400; font-size: 1.75rem; color: var(--ink); scroll-margin-top: var(--pb-post-haut); }
.pb-post-faq .pb-faq summary { font-size: 1.0625rem; }

/* ─── À propos de cette publication : la fiche auteur, la carte certificat (.pb-post-fiche : la carte d'article de la liste
   est .pb-post-carte, plus haut, en colonne ; un autre nom, pour ne pas en hériter) ─── */
.pb-post-apropos { margin-top: 3.5rem; }
.pb-post-apropos .pb-post-etiquette { margin-bottom: 1rem; font-size: .75rem; letter-spacing: .04em; }
.pb-post-fiche { margin-bottom: 1.25rem; padding: 1.125rem 1.375rem; border: 1px solid var(--ink-10); border-radius: var(--radius-2xl); background: var(--white); box-shadow: var(--shadow-sm); }
.pb-post-fiche-auteur { display: flex; align-items: center; gap: 1rem; transition: transform .18s ease, box-shadow .18s ease; }
.pb-post-fiche-auteur:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.pb-post-fiche-avatar { flex: none; width: 56px; height: 56px; border-radius: var(--radius-full); border: 2px solid var(--white); box-shadow: var(--shadow-sm); background: var(--ink-10); object-fit: cover; }
.pb-post-fiche-corps { flex: 1 1 auto; min-width: 0; }
.pb-post-fiche-role { margin: 0 0 .125rem; font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-70); }
.pb-post-fiche-nom { margin: 0; font-size: 1rem; font-weight: 600; color: var(--ink); }
.pb-post-fiche-titre { margin: .125rem 0 0; font-size: .875rem; line-height: 1.45; color: var(--ink-70); }
.pb-post-fiche-lien { flex: none; font-family: var(--font-mono); font-size: .8125rem; color: var(--teal-dark); white-space: nowrap; }
/* S'abonner au blog (demande de Fabien du 24/10) : une ligne discrète après « À propos », les trois flux de la langue (RSS, Atom,
   JSON Feed ; src/lib/flux.ts). Texte secondaire ; liens soulignés en teal foncé, teal au survol ; le retrait vertical, repris
   par une marge négative, porte chaque lien à 44 px de haut sans changer la ligne. */
.pb-post-abonnement { margin: 1.25rem 0 0; font-size: .9rem; line-height: 1.5; color: var(--ink-70); }
.pb-post-abonnement a { display: inline-block; padding: .7rem .125rem; margin: -.7rem 0; color: var(--teal-dark); font-weight: 500; text-decoration: underline; text-underline-offset: .15em; }
.pb-post-abonnement a:hover { color: var(--teal); }
.pb-post-abonnement a:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: var(--radius-lg); }
.pb-post-certificat { padding: 1.375rem 1.5rem; }
.pb-post-certificat-tete { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.125rem; }
.pb-post-certificat-libelle { font-size: .8125rem; font-weight: 600; color: var(--teal-dark); }
.pb-post-certificat-marque { display: inline-flex; flex: none; align-items: center; gap: .3125rem; margin-left: auto; padding: 3px 9px; border: 1px solid var(--ink-10); border-radius: var(--radius-full); font-size: .6875rem; font-weight: 600; color: var(--ink-70); white-space: nowrap; }
.pb-post-certificat-expert { display: flex; gap: 1rem; align-items: flex-start; }
.pb-post-certificat-expert .pb-post-fiche-avatar { background: var(--teal-light); }
.pb-post-certificat-nom { margin: 0; font-family: var(--font-serif); font-size: 1.1875rem; line-height: 1.15; color: var(--ink); }
.pb-post-certificat-parole { margin: 1rem 0 0; font-size: .875rem; line-height: 1.6; color: var(--ink-70); }
.pb-post-certificat-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-top: 1.125rem; padding-top: 1rem; border-top: 1px solid var(--ink-10); }
.pb-post-certificat-date { font-size: .8125rem; color: var(--ink-70); }
.pb-post-certificat-verifier { font-size: .8125rem; font-weight: 600; color: var(--teal-dark); white-space: nowrap; }

/* ─── Sources ─── */
.pb-post-sources { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--ink-10); }
.pb-post-sources h2 { margin: 0 0 1rem; font-family: var(--font-mono); font-weight: 400; font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-70); scroll-margin-top: var(--pb-post-haut); }
.pb-post-sources ol { list-style: none; margin: 0; padding: 0; counter-reset: pb-post-source; }
.pb-post-sources li { position: relative; margin-bottom: .75rem; padding-left: 2rem; font-size: .875rem; line-height: 1.6; color: var(--ink-70); counter-increment: pb-post-source; }
.pb-post-sources li::before { content: "[" counter(pb-post-source) "]"; position: absolute; left: 0; font-family: var(--font-mono); color: var(--teal-dark); }
.pb-post-sources a { color: var(--teal-dark); text-decoration: underline; text-underline-offset: 2px; }

/* ─── Sous 1024 px : une colonne, le sommaire mobile ; sous 768 px, le texte du modèle à 17 px ─── */
@media (max-width: 1023px) {
  .pb-post-grille { grid-template-columns: minmax(0, 1fr); padding-top: 2rem; }
  .pb-post-fil, .pb-post-entete, .pb-post-colonne { grid-column: 1; }
  .pb-post-sommaire { display: none; }
  .pb-post-sommaire-mobile { display: block; }
}
@media (max-width: 767px) {
  .pb-post-grille { padding-top: 1.5rem; padding-bottom: 4rem; }
  .pb-post .pb-prose { font-size: 1.0625rem; }
  .pb-post-essentiel { padding: 1.5rem; }
  .pb-post-appel { padding: 1.75rem 1.5rem; }
  .pb-post .pb-prose h2::before, .pb-post .pb-prose h3::before { display: none; }
  .pb-post-fiche-auteur { flex-wrap: wrap; }
}

/* ─── Page auteur (REQ-19 ; src/components/pages/PageDeLAuteur.astro) : l'introduction des pages du blog, avec le fil
   d'Ariane de l'article (D-22 : celui que son JSON-LD décrit), centré comme le reste de l'introduction, l'avatar, le titre,
   les domaines en pastilles de la base (.pb-badge) et les profils en liens. ─── */
.pb-auteur .pb-post-fil { justify-content: center; margin-bottom: 1.25rem; }
.pb-auteur-avatar { display: block; width: 96px; height: 96px; margin: 0 auto 1rem; border-radius: var(--radius-full); border: 2px solid var(--white); box-shadow: var(--shadow-sm); background: var(--ink-10); object-fit: cover; }
.pb-auteur-titre { margin: 0 0 .8rem; font-weight: 500; color: var(--ink-70); }
.pb-auteur-domaines, .pb-auteur-profils { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.pb-auteur-profils { font-size: .9rem; }
.pb-auteur-profils a { color: var(--teal-dark); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
/* Un profil LinkedIn (Fabien, 24/10) : l'icône « in » (src/lib/icones.ts, Font Awesome Free, CC BY 4.0) à la place de l'adresse,
   son nom pour les lecteurs d'écran seulement ; cible de 44 px (la marge négative garde la hauteur de la ligne), ink-70 puis
   teal au survol, glyphe de 18 px rempli (les autres icônes du site sont au trait). */
.pb-auteur-profils .pb-auteur-profil-icone { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -.75rem 0; border-radius: var(--radius-full); color: var(--ink-70); text-decoration: none; }
.pb-auteur-profils .pb-auteur-profil-icone:hover { color: var(--teal); background: var(--teal-08); }
.pb-auteur-profils .pb-auteur-profil-icone:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.pb-auteur-profil-icone svg { display: block; width: 18px; height: 18px; fill: currentColor; stroke: none; }
.pb-auteur-profil-libelle { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }