/* RELAPRO — feuille de style du blog
   ────────────────────────────────────────────────────────────────────────────
   Les quinze pages du site portent chacune leur propre bloc <style> d'une
   centaine de lignes, recopié à l'identique. Les articles du blog ne
   reproduisent pas cette duplication : le décor commun (nav, wrap, hero,
   sections, FAQ, bandeau de clôture) est repris ici une seule fois, verbatim,
   pour que le blog soit indiscernable du reste du site — puis viennent les
   styles propres à un article long : chapô, sommaire, corps de texte, tableaux,
   encadrés et rappels d'action.

   Chargée uniquement par /blog/ et ses articles, après relapro.css. */

/* ——— Décor commun, repris des pages du site ————————————————————————— */

:root { --leading: 28px; --half: 14px; --edge: clamp(20px, 4vw, 56px); --measure: 72ch; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; text-wrap: pretty; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--edge); }
.nav { padding-inline: max(var(--edge), calc((100% - 1200px) / 2 + var(--edge)));
  position: sticky; top: 0; z-index: 50; background: var(--color-bg);
  border-bottom: 2px solid var(--color-divider); }
.nav a { white-space: nowrap; }
.nav .nav-brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.nav .nav-brand img { height: 26px; width: auto; display: block; }
@media (max-width: 700px) { .nav a:not(.nav-brand):not(.btn) { display: none; } }
.rule2 { height: 2px; border: 0; margin: 0; background: var(--color-divider); }
.kicker { display: block; font-size: 13px; line-height: var(--half); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--color-accent-700); font-feature-settings: "tnum" 1;
  margin: 0 0 calc(var(--leading) - var(--half)); }
.crumbs { padding: var(--leading) 0 0; font-size: 13px; line-height: var(--half);
  color: color-mix(in srgb, var(--color-text) 62%, transparent); }
.crumbs a { color: inherit; }
.hero { padding: calc(2 * var(--leading)) 0 calc(2 * var(--leading)); }
.display { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(32px, 3.6vw, 46px); line-height: 1.08;
  letter-spacing: -0.02em; margin: 0; margin-left: -0.058em; text-box: trim-both cap alphabetic; }
.sec { padding: calc(2.5 * var(--leading)) 0; }
.sec h2 { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(26px, 2.8vw, 36px); line-height: calc(1.5 * var(--leading));
  letter-spacing: -0.015em; margin: 0 0 calc(var(--leading) - 1cap); text-box: trim-both cap alphabetic; }
.sec p { font-size: 15.5px; line-height: var(--leading); max-width: var(--measure);
  margin: 0 0 var(--leading); color: color-mix(in srgb, var(--color-text) 84%, transparent); }
.sec p:last-child { margin-bottom: 0; }
.sec a { color: var(--color-accent-700); }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--leading) clamp(20px, 3vw, 48px); margin-top: calc(1.5 * var(--leading)); }
.card { border-top: 2px solid var(--color-divider); padding-top: var(--half); }
.card h3 { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; line-height: var(--leading); margin: 0; text-box: trim-both cap alphabetic; }
.card p { font-size: 14.5px; line-height: 22px; margin: var(--half) 0 0;
  color: color-mix(in srgb, var(--color-text) 78%, transparent); }
.card a { color: var(--color-accent-700); }
.faq { max-width: 720px; margin-inline: auto; }
.faq details { border-top: 2px solid var(--color-divider); }
.faq details:last-of-type { border-bottom: 2px solid var(--color-divider); }
.faq summary { cursor: pointer; list-style: none; display: grid;
  grid-template-columns: 1fr auto; align-items: baseline; gap: var(--leading);
  padding: var(--leading) 0; font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 19px; line-height: var(--leading); letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--color-accent); font-size: 24px; }
.faq details[open] summary::after { content: "\2013"; }
.faq summary:hover { color: var(--color-accent-700); }
.faq summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.faq .a { font-size: 16.5px; line-height: 29px; margin: 0 0 var(--leading);
  color: color-mix(in srgb, var(--color-text) 78%, transparent); max-width: none; }
.faq .a a { color: var(--color-accent-700); }
.close { background: var(--color-accent); color: var(--color-bg); }
.close .wrap { padding-top: calc(3 * var(--leading)); padding-bottom: calc(3 * var(--leading)); }
.close .big, .close .row { max-width: 720px; margin-inline: auto; }
.close p.big { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(28px, 3.4vw, 44px); line-height: 1.08;
  letter-spacing: -0.015em; margin: 0; margin-left: -0.058em; text-box: trim-both cap alphabetic; }
.close .row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: calc(1.5 * var(--leading)); }
.close .row a.btn { text-decoration: none; }
.close .btn-ghost { color: var(--color-bg); border-color: var(--color-bg); text-decoration: none; }
@media (max-width: 880px) { .cards { grid-template-columns: 1fr; } }

/* ——— Un article ————————————————————————————————————————————————————
   Refonte du 25/08/2026. La première version composait tout en Archivo, la
   police du site. Archivo est dessinée pour l'interface : des titres, des
   boutons, des étiquettes. À 16,5 px sur mille cinq cents mots, ses formes
   fermées et son rythme régulier fatiguent — on décroche à la troisième
   section sans savoir pourquoi.

   Le corps passe donc en Source Serif 4, une serif dessinée pour la lecture à
   l'écran. Archivo garde les titres et les étiquettes : le contraste entre les
   deux familles fait exactement ce qu'on attend d'un guide — il sépare ce qu'on
   parcourt de ce qu'on lit. Le mélange grotesque/serif sur une grille
   moderniste est un classique, pas une fantaisie.

   Trois autres leviers, dans l'ordre de leur effet : le corps monte à 18 px
   avec un interligne de 31 px, les titres de section gagnent de l'air au-dessus
   (c'est ce blanc qui donne le rythme, pas le corps du texte), et le chapô est
   marqué d'un filet vert pour signaler l'entrée en matière. */

.art { max-width: 720px; margin-inline: auto; padding-bottom: calc(2 * var(--leading)); }
.art .chapo, .art .toc, .art .sec p, .art ul, .art ol.pas, .art .tbl,
.art .note, .art .cta-inline, .art .sources, .art .sec h3, .art .fig { max-width: none; }

/* Le corps de lecture. font-optical-sizing laisse la police ajuster ses formes
   à la taille demandée — c'est gratuit et ça se voit. */
.art .sec p, .art li, .art .note p, .art .tbl td, .faq .a {
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-optical-sizing: auto;
  font-size: 18px; line-height: 31px;
  color: color-mix(in srgb, var(--color-text) 88%, transparent); }
.art .sec p { margin: 0 0 calc(var(--leading) + 3px); }
.art .sec p:last-child { margin-bottom: 0; }

/* Un lien dans du texte courant doit se voir sans hurler : le soulignement
   passe sous les jambages au lieu de les traverser. */
.art .sec a, .faq .a a { color: var(--color-accent-700);
  text-underline-offset: 3px; text-decoration-thickness: 1px; }
.art .sec a:hover, .faq .a a:hover { color: var(--color-accent); }
::selection { background: var(--color-accent-200); }

/* ——— L'en-tête ——————————————————————————————————————————————————— */

.art > .hero { padding: calc(1.5 * var(--leading)) 0 calc(1.25 * var(--leading)); }
.art .display { font-size: clamp(32px, 3.6vw, 46px); }

/* Le chapô n'est pas un paragraphe comme les autres : c'est la promesse de
   l'article. Filet vert et corps supérieur, pour qu'on sache en une seconde
   si la suite nous concerne. */
.art .chapo { font-family: "Source Serif 4", Georgia, serif;
  font-optical-sizing: auto; font-size: 20.5px; line-height: 34px;
  color: var(--color-text);
  margin: calc(1.5 * var(--leading)) 0 0;
  padding-left: calc(var(--space-4) + 2px);
  border-left: 3px solid var(--color-accent); }

/* Une seule ligne discrète, sans les carrés verts de la version précédente qui
   passaient à la ligne et faisaient trois puces pour trois mots. */
.art-meta { display: flex; gap: 8px 14px; flex-wrap: wrap;
  margin: calc(1.75 * var(--leading)) 0 0; padding: 0; list-style: none;
  font-family: var(--font-body); }
.art-meta li { font-size: 12px; line-height: 18px; letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.art-meta li + li::before { content: "·"; margin-right: 14px;
  color: color-mix(in srgb, var(--color-text) 34%, transparent); }

/* ——— Les titres de section ————————————————————————————————————————
   Le blanc au-dessus d'un h2 vaut plus que sa taille : c'est lui qui découpe
   la page en morceaux qu'on ose attaquer. Le carré vert donne un point d'ancrage
   à l'œil qui balaie la page de haut en bas sans lire. */
.art .sec { padding: 0; }
.art .sec h2 { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(24px, 2.5vw, 31px); line-height: 1.18; letter-spacing: -0.015em;
  margin: calc(2.75 * var(--leading)) 0 calc(0.9 * var(--leading));
  scroll-margin-top: 96px; position: relative; }
.art-corps > .sec > h2::before { content: ""; position: absolute; left: -22px; top: 0.52em;
  width: 10px; height: 10px; background: var(--color-accent); }
@media (max-width: 780px) { .art-corps > .sec > h2::before { display: none; } }
.art-corps > .sec:first-child > h2 { margin-top: 0; }
.art .sec h3 { font-family: var(--font-heading); font-weight: 600;
  font-size: 19px; line-height: 27px; letter-spacing: -0.005em;
  margin: calc(1.5 * var(--leading)) 0 calc(0.5 * var(--leading)); }

/* ——— Listes ————————————————————————————————————————————————————— */

.art ul, .art ol.pas { margin: 0 0 calc(var(--leading) + 3px); padding-left: 22px; }
.art li { margin-bottom: 10px; }
.art li::marker { color: var(--color-accent); }
.art li strong, .art .sec p strong { color: var(--color-text); font-weight: 600; }

/* ——— Sommaire, en marge sur grand écran ————————————————————————— */

.toc { border-top: 2px solid var(--color-divider); border-bottom: 2px solid var(--color-divider);
  margin: calc(1.75 * var(--leading)) 0 0; padding: var(--half) 0; }
.toc p { font-size: 11.5px; line-height: var(--half); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--color-accent-700);
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  margin: var(--half) 0; }
.toc ol { margin: 0 0 var(--half); padding: 0 0 0 20px; }
.toc li { font-size: 14.5px; line-height: 23px; margin-bottom: 3px; }
.toc a { color: inherit; text-decoration: none; }
.toc a:hover { color: var(--color-accent-700); text-decoration: underline; }

/* ——— Tableaux ————————————————————————————————————————————————————
   Chiffres en chasse fixe (font-variant-numeric) : des dates alignées se
   comparent d'un coup d'œil, des dates en chasse proportionnelle non. */
.tbl { overflow-x: auto; margin: 0 0 calc(var(--leading) + 3px); }
.tbl table { border-collapse: collapse; width: 100%; }
.tbl th, .tbl td { text-align: left; padding: 13px 18px 13px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 14%, transparent); }
.tbl th { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 11.5px; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-accent-700); border-bottom: 2px solid var(--color-divider);
  padding-bottom: 10px; }
.tbl td { font-size: 16.5px; line-height: 25px; font-variant-numeric: tabular-nums; }
.tbl tr:last-child td { border-bottom: 0; }

/* ——— L'encadré ————————————————————————————————————————————————————
   Le fait qu'on veut voir même en diagonale. Fond plein plutôt que simple
   filet : il faut qu'il se détache d'un balayage rapide. */
.note { background: var(--color-surface); border-left: 4px solid var(--color-accent);
  padding: calc(var(--leading) - 6px) var(--space-6) calc(var(--leading) - 6px) var(--space-6);
  margin: calc(1.5 * var(--leading)) 0; }
.note p { font-size: 16.5px; line-height: 27px; margin: 0; }
.note p + p { margin-top: 14px; }
.note strong { color: var(--color-text); }

/* ——— Le rappel d'action ————————————————————————————————————————————
   Un lecteur qui a sa réponse au tiers de la page ne descendra jamais jusqu'au
   bandeau de clôture : la porte de sortie doit se présenter là où il est. Fond
   vert pâle plutôt qu'un simple filet — assez pour interrompre, pas assez pour
   ressembler à une publicité. */
.cta-inline { background: var(--color-accent-100);
  border-left: 4px solid var(--color-accent);
  padding: calc(var(--leading) - 4px) var(--space-6);
  margin: calc(2 * var(--leading)) 0; }
.cta-inline p { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px; line-height: 28px; margin: 0 0 var(--space-4);
  color: var(--color-text); letter-spacing: -0.01em; }
.cta-inline .row { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.cta-inline .row a.btn { text-decoration: none; }
.cta-inline .fine { font-family: "Source Serif 4", Georgia, serif; font-weight: 400;
  font-size: 14.5px; line-height: 23px; margin: var(--space-4) 0 0;
  color: color-mix(in srgb, var(--color-text) 66%, transparent); letter-spacing: 0; }

/* ——— Figures ————————————————————————————————————————————————————— */

.fig { margin: calc(1.75 * var(--leading)) 0; }
.fig img { display: block; width: 100%; height: auto;
  border: 2px solid var(--color-divider); }
.fig figcaption { margin-top: 12px; font-family: var(--font-body);
  font-size: 13px; line-height: 20px;
  color: color-mix(in srgb, var(--color-text) 58%, transparent); }
.fig figcaption a { color: var(--color-accent-700); }

/* ——— Sources ————————————————————————————————————————————————————
   Un article qui avance des dates de loi doit dire d'où elles viennent. C'est
   ce qui sépare une page de conseil d'un texte de remplissage. */
.sources { margin: calc(2.5 * var(--leading)) 0 0; padding-top: calc(var(--leading) - 4px);
  border-top: 2px solid var(--color-divider); }
.sources p { font-size: 11.5px; line-height: var(--half); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--color-accent-700);
  font-family: var(--font-heading); font-weight: var(--font-heading-weight); margin: 0 0 var(--half); }
.sources ul { list-style: none; padding: 0; margin: 0; }
.sources li { font-family: var(--font-body); font-size: 13px; line-height: 21px;
  color: color-mix(in srgb, var(--color-text) 62%, transparent); margin-bottom: 5px; }
.sources a { color: var(--color-accent-700); }

/* ——— La FAQ ————————————————————————————————————————————————————— */

.faq { max-width: 720px; margin-inline: auto; }
.faq summary { font-size: 18px; }
.faq .a { max-width: none; margin: 0 0 calc(var(--leading) + 3px); }

/* ——— Barre de progression ————————————————————————————————————————
   Sur un guide de huit minutes, savoir où l'on en est change le rapport à la
   page : on continue parce qu'on voit la fin. Trois pixels suffisent. */
.rp-progres { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 80;
  pointer-events: none; background: transparent; }
.rp-progres i { display: block; height: 100%; width: 100%;
  background: var(--color-accent); transform-origin: 0 50%; transform: scaleX(0); }

/* ——— Index du blog ————————————————————————————————————————————————— */

.posts { margin: calc(1.5 * var(--leading)) 0 0; display: grid; gap: 0; }
.art-index { max-width: none; }
.post { border-top: 2px solid var(--color-divider); padding: calc(1.25 * var(--leading)) 0;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: var(--half) clamp(24px, 4vw, 64px); align-items: start; }
.post:last-child { border-bottom: 2px solid var(--color-divider); }
/* Spécificité alignée sur `.art .sec h2`, sinon les titres de cartes héritent
   de la marge haute des titres de section (77 px) et décrochent de leur
   accroche. */
.art .sec .post h2 { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(21px, 2.2vw, 27px); line-height: 1.2;
  letter-spacing: -0.015em; margin: 0; }
.art .sec .post h2 a { color: inherit; text-decoration: none; }
.art .sec .post h2 a:hover { color: var(--color-accent-700); }
.art .sec .post .lede { font-family: "Source Serif 4", Georgia, serif;
  font-optical-sizing: auto; font-size: 17px; line-height: 28px; margin: 0;
  color: color-mix(in srgb, var(--color-text) 82%, transparent); }
.art .sec .post .lede a { color: var(--color-accent-700); }
.post .tag { display: block; font-size: 11.5px; line-height: var(--half);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 55%, transparent); margin-top: 12px; }
@media (max-width: 880px) { .post { grid-template-columns: 1fr; } }

/* ——— Grand écran : la marge de gauche porte le sommaire ————————————
   Une colonne de 720 px centrée sur un écran large laisse beaucoup de vide de
   chaque côté. Allonger les lignes n'est pas la réponse — au-delà de 80 signes
   l'œil perd le début de la ligne suivante. On occupe donc la marge gauche avec
   le sommaire, rendu collant, et la section en cours s'y allume au défilement :
   sur un guide de 1 500 mots, savoir où l'on est vaut mieux qu'un bloc de texte
   plus large. En dessous de 1180 px, retour à la colonne unique. */
@media (min-width: 1180px) {
  .wrap { max-width: 1160px; }
  .art { max-width: 1040px; display: grid;
    grid-template-columns: 236px minmax(0, 720px);
    column-gap: clamp(40px, 4vw, 84px); align-items: start; }
  .art > .hero { grid-column: 1 / -1; }
  .art > .toc { grid-column: 1; position: sticky; top: 100px;
    margin-top: 7px; border: 0; padding: 0; }
  .art > .art-corps { grid-column: 2; min-width: 0; }
  .art-index { display: block; max-width: 1040px; }

  /* Sans encadrement ni filets, le sommaire se lit comme une marge annotée
     plutôt que comme un bloc qui concurrence le texte. */
  .art > .toc p { margin: 0 0 var(--half); }
  .art > .toc ol { padding-left: 0; list-style: none; counter-reset: toc; }
  .art > .toc li { counter-increment: toc; margin-bottom: 9px; line-height: 21px;
    padding-left: 22px; position: relative; }
  .art > .toc li::before { content: counter(toc, decimal-leading-zero);
    position: absolute; left: 0; top: 1px;
    font-family: var(--font-heading); font-weight: var(--font-heading-weight);
    font-size: 11px; font-feature-settings: "tnum" 1;
    color: color-mix(in srgb, var(--color-text) 34%, transparent); }
  .art > .toc a { color: color-mix(in srgb, var(--color-text) 62%, transparent);
    transition: color 0.15s ease; }
  .art > .toc a:hover { color: var(--color-accent-700); text-decoration: none; }
  /* La section qu'on est en train de lire — posé par blog.js. */
  .art > .toc li.ici a { color: var(--color-text); font-weight: 600; }
  .art > .toc li.ici::before { color: var(--color-accent); }

  .faq, .close .big, .close .row { margin-left: calc(236px + clamp(40px, 4vw, 84px));
    margin-right: auto; }
  .faq { max-width: 720px; }
}