/*
Theme Name: L’Établi
Theme URI: https://www.burovirtuel.fr
Description: L’Établi - publication en ligne.
Version: 1.0.bb87e3b1
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License: All rights reserved
Text Domain: burovirtuel
Tags: blog, magazine, custom
*/

/* ========================================================
   L’Établi - feuille de styles
   ======================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,300;1,9..144,400;1,9..144,600;1,9..144,700&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* --- Palette --- */
  --clr-forest: #1B2742;
  --clr-accent: #C77A4E;
  --clr-cream: #F4F2EF;
  --clr-text: #161C2E;
  --clr-muted: #5F6B85;
  --clr-border: #DDD8D0;
  --clr-card-bg: #FFFFFF;
  --clr-overlay: rgba(27, 39, 66, 0.72);

  /* --- Typographie --- */
  --ff-serif: 'Fraunces', Georgia, serif;
  --ff-sans:  'Inter', system-ui, sans-serif;

  /* --- Echelle d'espacement --- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;
  --radius-sm: 4px; --radius-md: 8px;
  --max-w: 760px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  background: var(--clr-cream);
  color: var(--clr-text);
  font-family: var(--ff-sans);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--clr-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { list-style: none; }
button, input { font-family: inherit; }

h1, h2, h3, h4 { font-family: var(--ff-serif); line-height: 1.25; color: var(--clr-text); font-weight: 600; }

.bur0-wrap-8ba { width: 100%; max-width: var(--max-w); margin: 0 auto; padding-left: var(--sp-4); padding-right: var(--sp-4); }
.bur0-wrap--wide-3f5 { max-width: 1040px; }

.bur0-skip-link-449 { position: absolute; left: -9999px; top: 0; background: var(--clr-text); color: var(--clr-cream); padding: var(--sp-2) var(--sp-4); z-index: 100; }
.bur0-skip-link-449:focus { left: var(--sp-3); top: var(--sp-3); }

/* === HEADER : rangee unique, nav inline === */
.bur0-site-header-da5 { background: var(--clr-card-bg); border-bottom: 1px solid var(--clr-border); }
.bur0-site-header__inner-8e3 { display: flex; align-items: center; gap: var(--sp-4); min-height: 72px; }
.bur0-brand-e33 { font-family: var(--ff-serif); font-size: 1.5rem; font-weight: 700; }
.bur0-brand__name-936 a { color: var(--clr-text); }
.bur0-nav-primary-711 { margin-left: auto; }
.bur0-nav-primary__list-0a8 { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }
.bur0-nav-primary__list-0a8 a { color: var(--clr-text); font-size: .95rem; }
.bur0-nav-primary__list-0a8 a:hover { color: var(--clr-accent); text-decoration: none; }

/* Toggle mobile : checkbox hack, zero JS */
.bur0-nav-switch-d4f { position: absolute; left: -9999px; }
.bur0-nav-toggle-412 { display: none; margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--clr-border); border-radius: var(--radius-sm); background: var(--clr-card-bg); cursor: pointer; align-items: center; justify-content: center; }
.bur0-nav-toggle__bars-e90, .bur0-nav-toggle__bars-e90::before, .bur0-nav-toggle__bars-e90::after { display: block; width: 20px; height: 2px; background: var(--clr-text); position: relative; }
.bur0-nav-toggle__bars-e90::before, .bur0-nav-toggle__bars-e90::after { content: ""; position: absolute; left: 0; }
.bur0-nav-toggle__bars-e90::before { top: -6px; }
.bur0-nav-toggle__bars-e90::after { top: 6px; }

.bur0-site-main-5b8 { padding: var(--sp-7) 0 var(--sp-8); }

/* === Fil d'Ariane === */
.bur0-breadcrumb-282 { font-size: .85rem; color: var(--clr-muted); margin-bottom: var(--sp-5); }
.bur0-breadcrumb-282 ol { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.bur0-breadcrumb-282 a { color: var(--clr-muted); }
.bur0-breadcrumb-282 a:hover { color: var(--clr-accent); }
.bur0-breadcrumbs__sep-a90 { color: var(--clr-border); }

/* === LISTE EDITORIALE (front + archive + index) === */
.bur0-entry-list-b98 { display: flex; flex-direction: column; gap: var(--sp-6); }
.bur0-entry-9e9 { display: grid; grid-template-columns: 200px 1fr; gap: var(--sp-5); padding-bottom: var(--sp-6); border-bottom: 1px solid var(--clr-border); }
/* Entree de tete : meme forme que les autres, en plus grand — la hierarchie
   vient de la taille, pas d'un bloc d'une autre nature. */
.bur0-entry--une-d72 { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); padding-bottom: var(--sp-7); }
.bur0-entry--une-d72 .bur0-entry__title-244 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); line-height: 1.14; }
.bur0-entry--une-d72 .bur0-entry__excerpt-276 { font-size: 1.05rem; }
.bur0-entry--une-d72 .bur0-entry__media-791 { border-radius: var(--radius-md); overflow: hidden; }

/* Bandeau de rubriques : une seule ligne de pastilles, qui n'interrompt pas la
   colonne de bur0-lecture-598. Sans rubrique peuplee, rien n'est emis. */
.bur0-bandeau-fa4 { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.bur0-bandeau__pastille-bd2 { display: inline-flex; align-items: baseline; gap: var(--sp-2);
  border: 1px solid var(--clr-border); border-radius: var(--radius-full);
  padding: var(--sp-1) var(--sp-4); font-size: .84rem; color: var(--clr-muted); }
.bur0-bandeau__pastille-bd2:hover { color: var(--clr-accent); border-color: var(--clr-accent); }
.bur0-bandeau__compte-a80 { font-size: .72rem; font-variant-numeric: tabular-nums; opacity: .7; }

.bur0-entry-9e9:last-child { border-bottom: 0; }
.bur0-entry__media-791 { border-radius: var(--radius-md); overflow: hidden; background: var(--clr-border); aspect-ratio: 4 / 3; }
.bur0-entry__media-791 img { width: 100%; height: 100%; object-fit: cover; }
.bur0-entry__cat-305 { display: inline-block; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--clr-accent); margin-bottom: var(--sp-2); }
.bur0-entry__title-244 { font-size: 1.35rem; margin-bottom: var(--sp-2); }
.bur0-entry__title-244 a { color: var(--clr-text); }
.bur0-entry__title-244 a:hover { color: var(--clr-accent); text-decoration: none; }
.bur0-entry__excerpt-276 { color: var(--clr-muted); margin-bottom: var(--sp-3); }
.bur0-entry__meta-bda { font-size: .82rem; color: var(--clr-muted); display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.bur0-entry__more-6d6 { font-size: .85rem; font-weight: 600; }

.bur0-list-empty-361 { color: var(--clr-muted); padding: var(--sp-7) 0; text-align: center; }

/* === Pagination === */
.bur0-pagination-3c8 { margin-top: var(--sp-7); display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.bur0-pagination-3c8 .bur0-page-numbers-0d9 { padding: var(--sp-2) var(--sp-3); border: 1px solid var(--clr-border); border-radius: var(--radius-sm); color: var(--clr-text); }
.bur0-pagination-3c8 .bur0-current-d6a { background: var(--clr-text); color: var(--clr-cream); border-color: var(--clr-text); }

/* === En-tete d'archive === */
.bur0-page-header-07e { margin-bottom: var(--sp-6); }
.bur0-page-header__title-920 { font-size: 2rem; }
.bur0-page-header__count-7ce { color: var(--clr-muted); font-size: .9rem; margin-top: var(--sp-2); }
.bur0-page-header__desc-73e { color: var(--clr-muted); margin-top: var(--sp-3); }

/* === ARTICLE (single, mono-colonne) === */
.bur0-post-single__header-430 { margin-bottom: var(--sp-5); }
.bur0-post-single__cat-2e2 { display: inline-block; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--clr-accent); margin-bottom: var(--sp-3); }
.bur0-post-single__title-8f5 { font-size: 2.4rem; line-height: 1.15; margin-bottom: var(--sp-4); }
.bur0-post-single__meta-7ba { font-size: .85rem; color: var(--clr-muted); display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.bur0-post-single__cover-671 { margin: var(--sp-5) 0 var(--sp-6); border-radius: var(--radius-md); overflow: hidden; }
.bur0-post-single__prose-a93 { font-size: 1.06rem; }
.bur0-post-single__prose-a93 > * + * { margin-top: var(--sp-4); }
.bur0-post-single__prose-a93 h2 { font-size: 1.6rem; margin-top: var(--sp-7); }
.bur0-post-single__prose-a93 h3 { font-size: 1.25rem; margin-top: var(--sp-6); }
.bur0-post-single__prose-a93 ul, .bur0-post-single__prose-a93 ol { margin-left: var(--sp-5); }
.bur0-post-single__prose-a93 ul { list-style: disc; }
.bur0-post-single__prose-a93 ol { list-style: decimal; }
.bur0-post-single__prose-a93 img { border-radius: var(--radius-md); margin: var(--sp-5) 0; }
.bur0-post-single__footer-21b { margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--clr-border); }

/* === TOC (rendu par le theme, en tete d'article) === */
/* Le sommaire se lisait comme un bloc de texte continu : titre colle a la
   liste, entrees sans ecart, fond a peine distinct du corps de page. Le
   traitement ci-dessous vaut pour les DEUX exemplaires — celui de la colonne
   et celui du corps — puisqu'ils partagent la meme classe. */
.bur0-toc-a63 {
  background: var(--clr-card-bg);
  background: color-mix(in srgb, var(--clr-text) 5%, var(--clr-cream));
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  padding: var(--sp-4) var(--sp-5);
  margin: 0 0 var(--sp-6);
}
/* Le titre est separe par un filet, pas seulement par une marge : c'est ce qui
   fait lire l'encadre comme un bloc a deux parties. */
.bur0-toc__title-c99 {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--clr-muted);
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-3);
  border-bottom: 1px solid var(--clr-border);
}
.bur0-toc-a63 ol { list-style: decimal; margin-left: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
.bur0-toc-a63 li { padding-left: var(--sp-1); }
/* Chaque entree devient un bloc avec son propre filet a gauche : on voit ou
   l'une finit et ou la suivante commence, meme sur deux lignes. */
.bur0-toc-a63 a {
  display: block;
  color: var(--clr-text);
  line-height: 1.4;
  padding: var(--sp-1) 0 var(--sp-1) var(--sp-3);
  border-left: 2px solid var(--clr-border);
  transition: color .2s, border-color .2s;
}
.bur0-toc-a63 a:hover { color: var(--clr-accent); border-color: var(--clr-accent); }
/* Le sommaire existe a deux endroits du document et un seul s'affiche a une
   largeur donnee : en colonne d'appui au-dessus de 900px, dans le corps de
   l'article en dessous. Il ne peut pas etre unique : aucune propriete de flux
   ne deplace un element d'un niveau d'imbrication a un autre, et sa place
   doit changer avec la largeur.
   Le sommaire suit le defilement de la page (sticky). Sa hauteur n'est bornee
   que par la fenetre : l'ascenseur interne n'apparait QUE si le sommaire est
   plus haut qu'elle — sans cette borne, ses dernieres entrees deviendraient
   inatteignables, la colonne restant fixe pendant que la page defile.
   Propre a CE site (2026-09-13) : ses titres de H2 font 6 a 12 mots. A 220px
   et 16px, chaque entree prenait 4 a 7 lignes et le sommaire (1 077 a 1 144px)
   ne tenait dans aucune fenetre. A 280px et 15px : 1 a 5 lignes, 730 a 793px. */
.bur0-lecture-598 { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: var(--sp-7); align-items: start; }
.bur0-lecture__appui-3e9 { position: sticky; top: var(--sp-5); max-height: calc(100vh - 2 * var(--sp-5)); overflow-y: auto; }
.bur0-lecture__appui-3e9 .bur0-toc-a63 a { font-size: .9375rem; }
.bur0-lecture__appui-3e9 .bur0-toc--laterale-5b5 { margin: 0; }
.bur0-toc--flux-c6a { display: none; }


.bur0-tag-list-49f { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.bur0-tag-list-49f a { font-size: .82rem; background: var(--clr-cream); border: 1px solid var(--clr-border); border-radius: var(--radius-sm); padding: var(--sp-1) var(--sp-3); color: var(--clr-muted); }

/* === Page statique === */
.bur0-page-content-7e1 { font-size: 1.05rem; }
.bur0-page-content-7e1 > * + * { margin-top: var(--sp-4); }
.bur0-page-content-7e1 h2 { font-size: 1.5rem; margin-top: var(--sp-6); }

/* === 404 === */
.bur0-error-404-96d { text-align: center; padding: var(--sp-8) 0; }
.bur0-error-404__title-104 { font-size: 2.4rem; margin-bottom: var(--sp-4); }
.bur0-error-404__text-4da { color: var(--clr-muted); margin-bottom: var(--sp-5); }

/* === FOOTER : inline compact (horizontal) === */
.bur0-site-footer-8e4 { border-top: 1px solid var(--clr-border); background: var(--clr-card-bg); margin-top: var(--sp-8); }
.bur0-site-footer__inner-a36 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-6); padding: var(--sp-6) 0; }
.bur0-site-footer__brand-ab5 { font-family: var(--ff-serif); font-size: 1.15rem; font-weight: 700; }
.bur0-site-footer__desc-a92 { color: var(--clr-muted); font-size: .85rem; flex: 1 1 240px; }
.bur0-site-footer__nav-79c { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4); }
.bur0-site-footer__nav-79c a { color: var(--clr-text); font-size: .88rem; }
.bur0-site-footer__nav-79c a:hover { color: var(--clr-accent); }
.bur0-site-footer__legal-cc0 { width: 100%; border-top: 1px solid var(--clr-border); padding: var(--sp-4) 0; color: var(--clr-muted); font-size: .8rem; display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }
.bur0-site-footer__legal-cc0 a { color: var(--clr-muted); }

/* === Responsive === */
@media (max-width: 720px) {
  .bur0-nav-toggle-412 { display: inline-flex; }
  .bur0-nav-primary-711 { display: none; margin-left: 0; width: 100%; }
  .bur0-nav-switch-d4f:checked ~ .bur0-nav-primary-711 { display: block; }
  .bur0-site-header__inner-8e3 { flex-wrap: wrap; }
  .bur0-nav-primary__list-0a8 { flex-direction: column; align-items: flex-start; gap: var(--sp-3); padding-bottom: var(--sp-4); }
  .bur0-entry-9e9 { grid-template-columns: 1fr; }
  .bur0-entry__media-791 { aspect-ratio: 16 / 9; }
  .bur0-post-single__title-8f5 { font-size: 1.8rem; }
}

/* --- Classes citees par les gabarits et jusque-la absentes de cette feuille --- */
.bur0-post-date-42f { color: var(--clr-muted); font-family: var(--ff-sans); font-size: 0.85rem; }
.bur0-entry__body-f45 { line-height: 1.7; }
.bur0-entry__body-f45 > * + * { margin-top: var(--sp-4); }

/* --- Classes venant de la redaction, pas du gabarit ---
   Elles arrivent avec le texte de l'article. Sans les regles ci-dessous,
   l'encadre de synthese et le sommaire redige s'affichent en prose brute.
   Le sommaire redige peut etre absent selon la configuration : la regle est
   alors sans effet. */
.essentiel-retenir {
  background: var(--clr-card-bg);
  border-left: 3px solid var(--clr-accent);
  border-radius: var(--radius-md);
  padding: var(--sp-4) var(--sp-5);
  margin: var(--sp-5) 0;
}
.essentiel-retenir > h3 { font-size: 1rem; font-weight: 700; color: var(--clr-accent); margin: 0 0 var(--sp-2); }
.essentiel-retenir p { margin: 0; }
.essentiel-retenir ul { margin: var(--sp-2) 0 0 var(--sp-5); list-style: disc; }
.essentiel-retenir li + li { margin-top: var(--sp-2); }

/* Le poids 700 de la police sans est charge explicitement plus haut : on fixe la
   valeur ici pour ne pas dependre de la synthese du navigateur. */
strong, b { font-weight: 700; }

/* Racine du bloc `bur0-post-single-22e`. Elle doit figurer ICI meme si la mise en forme
   vit dans ses elements : le gabarit ne la cite pas, elle arrive par
   post_class(), et une classe absente de cette feuille n'est jamais reprise a
   la construction du theme. min-width:0 evite en prime le debordement de
   l'article dans la grille a deux colonnes. */
.bur0-post-single-22e { min-width: 0; }

/* Un comparatif large forcait un scroll horizontal de la PAGE ENTIERE. Le
   scroll appartient a la TABLE, jamais a la page. */

/* ==========================================================================
   Tableaux du corps d'article — traitement unique du corpus.
   Chaque article de production porte un tableau comparatif de 4 a 6 colonnes :
   ce n'est pas un cas de bord, c'est la forme normale du contenu.

   TROIS points a ne pas defaire :

   (1) La page est en creme (--clr-cream). Un tableau sans fond propre laisse ce
       creme passer au travers, et un zebrage lui aussi en creme devient
       strictement INVISIBLE ; la derniere ligne, sans bordure, s'y dissout. Le
       tableau prend donc un fond BLANC (--clr-card-bg), sur lequel le zebrage
       creme redevient lisible.

   (2) `background-attachment: local` : sans elle le fond reste solidaire du
       conteneur et le creme reapparait sous les colonnes de droite des que le
       tableau defile horizontalement — donc sur mobile.

   (3) `border-collapse: separate` plutot que `collapse` + `overflow: hidden` :
       la propriete `overflow` ne s'applique pas de facon fiable a un element
       `table`, et les angles de l'en-tete debordaient du rayon. Les coins se
       posent donc explicitement.

   PAS d'alignement a droite : sans classe dans le HTML, le CSS ne distingue pas
   une colonne de chiffres d'une colonne de texte. `tabular-nums` suffit.
   ========================================================================== */
.bur0-post-single__prose-a93 table {
  width: 100%;
  max-width: 100%;
  margin: var(--sp-6) 0;
  font-size: 0.9375rem;
  background: var(--clr-card-bg);
  background-attachment: local;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  border-collapse: separate;
  border-spacing: 0;
}
.bur0-post-single__prose-a93 caption {
  caption-side: top;
  text-align: left;
  color: var(--clr-muted);
  font-size: 0.875rem;
  line-height: 1.45;
  margin-bottom: var(--sp-2);
}
.bur0-post-single__prose-a93 table th {
  background: var(--clr-forest);
  color: #fff;
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  font-weight: 600;
  font-size: 0.8125rem;
  white-space: nowrap;
}
.bur0-post-single__prose-a93 table th:first-child { border-top-left-radius: var(--radius-md); }
.bur0-post-single__prose-a93 table th:last-child  { border-top-right-radius: var(--radius-md); }
.bur0-post-single__prose-a93 table td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--clr-border);
  font-variant-numeric: tabular-nums;
  vertical-align: top;
}
.bur0-post-single__prose-a93 table tbody tr:nth-child(even) td { background: var(--clr-cream); }
.bur0-post-single__prose-a93 table td:first-child,
.bur0-post-single__prose-a93 table th:first-child { font-weight: 600; }
.bur0-post-single__prose-a93 table tbody tr:last-child td { border-bottom: none; }

/* Un comparatif large forcait un scroll horizontal de la PAGE ENTIERE. Le
   defilement appartient au tableau, jamais a la page — et il vaut a TOUTES les
   largeurs : entre 721 et ~1070px, la regle reservee au mobile laissait deborder
   la page (mesure le 2026-09-13).
   Ce n'est pas le tableau qui defile mais une ENVELOPPE, posee par le filtre
   probe_envelopper_tableaux : un display:block sur le tableau lui-meme le prive
   de sa pleine largeur, et ceux dont le contenu est plus etroit que la colonne
   retrecissaient (mesure sur 63 articles publies). La marge passe du tableau a
   l'enveloppe pour que l'espacement avec les paragraphes voisins ne change pas. */
.bur0-post-single__prose-a93 .bur0-tableau-defil-c3f {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--sp-6) 0;
}
.bur0-post-single__prose-a93 .bur0-tableau-defil-c3f table { margin: 0; }

/* ==========================================================================
   SOMMAIRE — un seul rendu visible, a toutes les largeurs.
   Le gabarit rend lui-meme son sommaire. Quand la
   redaction en ecrit un second dans le CORPS (classe `.sommaire-article`), les
   deux coexistent dans le DOM et le lecteur en voit deux a la suite. C'est le
   sommaire du gabarit qui fait foi : il connait la mise en page, l'autre non.
   La regle est donc un GARDE — inerte quand le corps n'en porte pas, ce qui est
   le cas nominal, et decisive le jour ou la configuration change.
   ========================================================================== */
.sommaire-article { display: none; }

/* ==========================================================================
   ARTICLES LIES.
   La grille se dimensionne sur le NOMBRE TROUVE : la classe `related--N` est
   posee par le gabarit. Une categorie pauvre rend deux cartes, ou une seule,
   et la grille s'y adapte au lieu d'etirer une carte unique sur toute la
   largeur. On ne complete jamais avec des articles d'une autre rubrique.
   ========================================================================== */
.bur0-related-171 { margin-top: var(--sp-8); padding-top: var(--sp-5); border-top: 1px solid var(--clr-border); }
.bur0-related__title-0a2 { font-family: var(--ff-serif); font-size: 1.25rem; margin-bottom: var(--sp-5); }
.bur0-related__grid-21a { display: grid; gap: var(--sp-6); grid-template-columns: repeat(3, 1fr); }
.bur0-related--2-5c6 .bur0-related__grid-21a { grid-template-columns: repeat(2, 1fr); }
.bur0-related--1-eb5 .bur0-related__grid-21a { grid-template-columns: minmax(0, 420px); }
/* La classe racine doit figurer ICI meme si la mise en forme vit dans ses
   elements : ce qui n'est pas declare dans cette feuille n'est pas repris a la
   construction du theme. */
.bur0-related-card-aa5 { min-width: 0; }
.bur0-related-card__media-911 { display: block; aspect-ratio: 4 / 3; background: var(--clr-border); overflow: hidden; }
.bur0-related-card__thumb-655 { width: 100%; height: 100%; object-fit: cover; }
.bur0-related-card__body-d19 { padding-top: var(--sp-3); }
.bur0-related-card__title-e65 { font-family: var(--ff-serif); font-size: 1.02rem; line-height: 1.3; }
.bur0-related-card__title-e65 a { color: var(--clr-text); }
.bur0-related-card__title-e65 a:hover { color: var(--clr-accent); }
.bur0-related-card__date-d46 { font-size: 0.78rem; color: var(--clr-muted); margin-top: var(--sp-2); font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  .bur0-related__grid-21a, .bur0-related--2-5c6 .bur0-related__grid-21a, .bur0-related--1-eb5 .bur0-related__grid-21a { grid-template-columns: 1fr; }
}

/* Sous 900px : la colonne d'appui disparait et l'exemplaire du corps prend sa
   place. Les deux ne sont jamais affiches ensemble. */
@media (max-width: 900px) {
  .bur0-lecture-598 { grid-template-columns: minmax(0, 1fr); }
  .bur0-lecture__appui-3e9 { display: none; }
  .bur0-toc--flux-c6a { display: block; }
}

/* Classes portees par les vignettes. WordPress place sinon le NOM DE LA TAILLE
   dans la classe de l'image ; ce nom est interne au gabarit et se retrouvait
   servi tel quel. Declarees ici, elles sont renommees par site a la
   construction du theme. */
.bur0-post-single__cover-img-15e { display: block; width: 100%; height: auto; }
.bur0-vignette-article-87c { display: block; width: 100%; height: auto; object-fit: cover; }