/* Article diagrams: live type and responsive structure, using the site palette. */
.article-body .essay-figure {
  width: 100%;
  margin: 2.75rem 0;
  padding: clamp(20px, 2.8vw, 36px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  font: 400 1rem/1.6 var(--sans);
}
.essay-figure *, .essay-figure *::before, .essay-figure *::after { box-sizing: border-box; }
.article-body .essay-figure p { margin: 0; }
.essay-figure .ef-eyebrow {
  color: var(--blue);
  font: 500 .7rem/1.6 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.article-body .essay-figure .ef-title {
  margin: .65rem 0 .7rem;
  font: 400 clamp(1.85rem, 3.2vw, 2.65rem)/1.16 var(--display);
  letter-spacing: -.025em;
}
.article-body .essay-figure .ef-intro { max-width: 53rem; color: var(--muted); }
.essay-figure .ef-header { padding-bottom: 1.75rem; border-bottom: 1px solid var(--line); }
.essay-figure .ef-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; margin-top: 1.75rem; }
.essay-figure .ef-panel + .ef-panel { border-left: 1px solid var(--line); padding-left: 2rem; }
.article-body .essay-figure .ef-panel-title { margin: .6rem 0 .65rem; font: 400 1.5rem/1.28 var(--display); }
.article-body .essay-figure .ef-panel-summary { color: var(--muted); font-size: .9rem; min-height: 4.5em; }
.essay-figure .ef-request-track {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 12px;
  gap: 10px;
  align-items: center;
  height: 170px;
  position: relative;
  isolation: isolate;
  margin: .6rem 3px 0;
  padding-right: 24px;
  font-size: .78rem;
  line-height: 1.3;
}
.essay-figure .ef-request-track::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; border-top: 1px solid var(--muted); z-index: -1; }
.essay-figure .ef-request-track::after,
.essay-figure .ef-clock-periods::after,
.essay-figure .ef-session-continuity::after { content: ""; position: absolute; top: 50%; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid var(--blue); transform: translateY(-50%); }
.essay-figure .ef-request-track::after { right: 0; border-left-color: var(--muted); }
.essay-figure .ef-end { position: relative; width: 12px; height: 12px; border: 2px solid var(--blue); border-radius: 50%; background: var(--paper); }
.essay-figure .ef-end:last-child { background: var(--blue); }
.essay-figure .ef-end span { position: absolute; top: 48px; left: -2px; color: var(--muted); }
.essay-figure .ef-end:last-child span { left: auto; right: -2px; }
.essay-figure .ef-queue, .essay-figure .ef-decode { position: relative; }
.essay-figure .ef-track-label { position: absolute; bottom: calc(100% + 12px); width: 100%; text-align: center; color: var(--muted); }
.essay-figure .ef-queue { height: 62px; border: 1px solid var(--line); background: repeating-linear-gradient(135deg, transparent 0 9px, var(--line) 9px 10px), var(--paper); }
.essay-figure .ef-prefill { display: grid; place-items: center; height: 72px; border: 1px solid var(--blue); border-radius: 4px; background: var(--blue-surface); color: var(--blue); }
.essay-figure .ef-decode { display: flex; justify-content: space-between; height: 60px; gap: 5px; }
.essay-figure .ef-decode i { display: block; flex: 1; background: var(--blue-light); border-radius: 2px; }
.essay-figure .ef-clock { height: 170px; margin-top: .6rem; padding-top: 5px; padding-right: 24px; }
.essay-figure .ef-clock-labels { display: flex; justify-content: space-between; color: var(--blue); font: .75rem/1.5 var(--mono); }
.essay-figure .ef-clock-periods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 8px; position: relative; isolation: isolate; }
.essay-figure .ef-clock-periods::before { content: ""; position: absolute; top: 50%; left: 0; right: -24px; border-top: 2px solid var(--blue); z-index: -1; }
.essay-figure .ef-clock-periods::after { right: -24px; }
.essay-figure .ef-clock-period { display: flex; border-left: 1px dashed var(--blue-border); padding: 15px 0; }
.essay-figure .ef-clock-period:last-child { border-right: 1px dashed var(--blue-border); }
.essay-figure .ef-clock-step { display: grid; place-items: center; width: 68%; height: 72px; border: 1px solid var(--blue); border-radius: 4px; background: var(--blue-surface); color: var(--blue); font-size: .78rem; }
.essay-figure .ef-clock-period:nth-child(2) .ef-clock-step { width: 84%; }
.essay-figure .ef-clock-period:nth-child(3) .ef-clock-step { width: 74%; }
.essay-figure .ef-clock-margin { flex: 1; background: repeating-linear-gradient(135deg, transparent 0 7px, var(--blue-border) 7px 8px); }
.essay-figure .ef-clock-key { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .75rem; line-height: 1.4; }
.essay-figure .ef-clock-key::before { content: ""; width: 18px; height: 12px; flex: none; border: 1px solid var(--blue-border); background: repeating-linear-gradient(135deg, transparent 0 5px, var(--blue-border) 5px 6px); }
.essay-figure .ef-state { border-top: 1px solid var(--line); padding-top: 1rem; font-size: .875rem; }
.essay-figure .ef-state-continuous { position: relative; border-top-color: transparent; }
.essay-figure .ef-session-continuity { position: absolute; top: -6px; left: 0; right: 24px; height: 12px; isolation: isolate; }
.essay-figure .ef-session-continuity::before { content: ""; position: absolute; top: 50%; left: 0; right: -24px; border-top: 1px solid var(--muted); z-index: -1; }
.essay-figure .ef-session-continuity::after { right: -24px; }
.essay-figure .ef-session-continuity i { position: absolute; top: 50%; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--blue); transform: translate(-50%, -50%); }
.essay-figure .ef-session-continuity i:nth-child(2) { left: calc(100% / 3); }
.essay-figure .ef-session-continuity i:nth-child(3) { left: calc(200% / 3); }
.essay-figure .ef-session-continuity i:nth-child(4) { left: 100%; }
.article-body .essay-figure .ef-state > p:last-child { margin-top: .45rem; }
.essay-figure .ef-takeaways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; border-top: 1px solid var(--line); margin-top: 1.5rem; padding-top: 1.25rem; font-size: .9rem; }
.essay-figure .ef-takeaways strong { display: block; color: var(--blue); margin-bottom: .4rem; font-weight: 500; }
.essay-figure figcaption { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .8125rem; line-height: 1.65; }
.essay-figure .ef-deadline { margin-top: 1.5rem; margin-left: 188px; }
.essay-figure .ef-deadline-labels { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; color: var(--blue); font: .8rem/1.5 var(--mono); }
.essay-figure .ef-deadline-labels span:nth-child(2) { text-align: center; }
.essay-figure .ef-deadline-line { position: relative; height: 12px; border-top: 1px solid var(--blue); margin-top: .6rem; }
.essay-figure .ef-deadline-line::before, .essay-figure .ef-deadline-line::after { content: ""; position: absolute; height: 12px; top: -6px; border-left: 1px solid var(--blue); }
.essay-figure .ef-deadline-line::before { left: 0; }
.essay-figure .ef-deadline-line::after { right: 0; }
.essay-figure .ef-deadline-ends { display: flex; justify-content: space-between; gap: 1rem; color: var(--muted); font-size: .75rem; }
.essay-figure .ef-batch-flow { display: grid; grid-template-columns: 210px 24px minmax(0, 1fr) 24px 76px; align-items: center; gap: 10px; margin-top: 1.75rem; }
.essay-figure .ef-incoming { align-self: stretch; display: flex; flex-direction: column; }
.article-body .essay-figure .ef-small { color: var(--muted); font-size: .75rem; line-height: 1.5; margin-top: .3rem; }
.essay-figure .ef-sessions { position: relative; display: grid; gap: 10px; margin-top: auto; padding-top: 14px; padding-bottom: 14px; }
.essay-figure .ef-sessions::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 43px; border: 1px solid var(--blue); border-radius: 25px; background: var(--blue-surface); z-index: -1; }
.essay-figure .ef-sessions { isolation: isolate; }
.essay-figure .ef-session { display: grid; grid-template-columns: 14px 1fr 16px 1fr 43px; gap: 6px; align-items: center; min-height: 24px; font: .8125rem/1 var(--mono); }
.essay-figure .ef-session i { height: 1px; background: var(--blue-border); }
.essay-figure .ef-frame { width: 16px; height: 16px; border-radius: 2px; background: var(--blue-light); }
.essay-figure .ef-batch-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--blue); justify-self: center; }
.essay-figure .ef-flow-arrow { color: var(--blue); font-size: 1.6rem; text-align: center; margin-top: 55px; }
.essay-figure .ef-model { min-width: 0; }
.article-body .essay-figure .ef-stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; padding: 0; margin: 1rem 0 0; min-height: 156px; }
.article-body .essay-figure .ef-stages li { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .55rem; position: relative; margin: 0; padding: 14px 10px; border: 1px solid var(--line); text-align: center; min-width: 0; }
.article-body .essay-figure .ef-stages li + li { border-left: 0; }
.essay-figure .ef-stages strong { font-size: .85rem; line-height: 1.4; font-weight: 500; }
.essay-figure .ef-stages span { color: var(--muted); font-size: .7rem; line-height: 1.5; }
.article-body .essay-figure .ef-stages .ef-backbone { background: var(--blue-surface); border-color: var(--blue-border); color: var(--blue); }
.essay-figure .ef-backbone span { color: var(--blue); }
.essay-figure .ef-outputs { margin-top: 55px; font-size: .75rem; color: var(--blue); text-align: center; line-height: 1.4; }
.essay-figure .ef-output-dots { display: flex; justify-content: space-around; gap: 4px; margin-bottom: 12px; }
.essay-figure .ef-output-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
.essay-figure .ef-margin { height: 24px; border: 1px dashed var(--blue); margin: 12px 8px 6px; background: repeating-linear-gradient(135deg, transparent 0 7px, var(--blue-border) 7px 8px); }
.essay-figure .ef-resident { margin-top: 1.75rem; border-top: 1px solid var(--line); padding-top: 1.25rem; }
.essay-figure .ef-state-line { display: flex; justify-content: space-between; position: relative; isolation: isolate; margin: .9rem 0; }
.essay-figure .ef-state-line::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 1px; background: var(--blue-border); z-index: -1; }
.essay-figure .ef-state-line i { width: 11px; height: 11px; background: var(--blue); border-radius: 50%; }
.article-body .essay-figure .ef-resident > p:last-child { font-size: .9rem; }
.essay-figure .ef-capacity { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 1.75rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: .9rem; }
@media (max-width: 1000px) {
  .essay-figure .ef-deadline { margin-left: 138px; }
  .essay-figure .ef-batch-flow { grid-template-columns: 160px 18px minmax(0, 1fr) 18px 60px; gap: 6px; }
  .article-body .essay-figure .ef-stages li { padding-inline: 6px; }
}
@media (max-width: 800px) {
  .essay-figure .ef-deadline { margin-left: 0; }
  .essay-figure .ef-comparison { grid-template-columns: 1fr; gap: 1.75rem; }
  .essay-figure .ef-panel + .ef-panel { border-left: 0; border-top: 1px solid var(--line); padding: 1.75rem 0 0; }
  .article-body .essay-figure .ef-panel-summary { min-height: 0; }
  .essay-figure .ef-takeaways { grid-template-columns: 1fr; gap: 1rem; }
  .essay-figure .ef-batch-flow { grid-template-columns: 1fr; gap: .75rem; }
  .essay-figure .ef-incoming { width: min(100%, 340px); justify-self: center; }
  .essay-figure .ef-sessions { margin-top: 1rem; }
  .essay-figure .ef-flow-arrow { margin: 0; transform: rotate(90deg); line-height: 1; }
  .essay-figure .ef-model > .ef-eyebrow, .essay-figure .ef-model > .ef-small { text-align: center; }
  .essay-figure .ef-outputs { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem 1rem; align-items: center; margin: 0; width: min(100%, 280px); justify-self: center; }
  .essay-figure .ef-output-dots { margin: 0; }
  .essay-figure .ef-margin { margin: 0; }
  .essay-figure .ef-capacity { grid-template-columns: 1fr; gap: .6rem; }
}
@media (max-width: 650px) {
  .article-body .essay-figure { padding: 18px; margin-block: 2rem; }
  .essay-figure .ef-eyebrow { font-size: .65rem; letter-spacing: .09em; }
  .article-body .essay-figure .ef-title { font-size: 1.9rem; }
  .article-body .essay-figure .ef-intro { font-size: .9375rem; }
  .essay-figure .ef-request-track { gap: 8px; }
  .article-body .essay-figure .ef-stages { grid-template-columns: 1fr; gap: 22px; }
  .article-body .essay-figure .ef-stages li,
  .article-body .essay-figure .ef-stages li + li { min-height: 72px; padding: 14px; border: 1px solid var(--line); }
  .article-body .essay-figure .ef-stages li + li::before { content: "↓"; position: absolute; top: -24px; left: calc(50% - 8px); width: 16px; color: var(--blue); font: 1.1rem/22px var(--sans); }
  .essay-figure .ef-stages strong { font-size: .9375rem; }
  .essay-figure .ef-stages span { font-size: .8125rem; }
  .essay-figure .ef-deadline-labels { font-size: .7rem; }
}
@media print {
  .article-body .essay-figure { break-inside: avoid; margin: 2rem 0; padding: 20px; }
}

/* ---------------------------------------------------------------------------
   LE DIAGRAMME GARDE SA STRUCTURE D'ORDINATEUR SUR TÉLÉPHONE

   Sous 800px, les règles ci-dessus démontaient le diagramme : la grille à cinq
   colonnes passait à une, les flèches pivotaient d'un quart de tour, les étapes
   du modèle s'empilaient. La figure restait complète mais ne se lisait plus de
   la même façon, et son sens de lecture changeait.

   Ici on rétablit la structure d'ordinateur et on fait glisser le diagramme
   horizontalement, comme le tableau comparatif de l'accueil. La typographie
   reprend elle aussi ses valeurs d'ordinateur, puisque le diagramme est affiché
   à l'échelle 1 : un texte de 12 px sur un téléphone tenu à 30 cm se lit mieux
   que le même 12 px sur un écran à 60 cm.

   Seul le diagramme glisse. L'en-tête, l'introduction, les encarts de texte et
   la note de bas de figure restent pleine largeur et se lisent sans geste.

   Le seuil est à 800px, celui où la mise en page d'origine se démontait. Il n'y
   a donc plus qu'une seule structure de figure, du plus petit téléphone au plus
   grand écran ; seule change la nécessité de faire glisser.
   --------------------------------------------------------------------------- */
@media (max-width: 800px) {
  .essay-figure .ef-scroll {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .essay-figure .ef-scroll::-webkit-scrollbar { display: none; }
  /* 520 px, et non la largeur d'ordinateur : le plancher que j'avais posé à
     880 px était arbitraire, et la marge gauche de la frise s'y ajoutait, ce
     qui portait le diagramme à 1 068 px, soit 3,4 écrans de téléphone et 29 %
     visible d'un coup. Le premier écran ne montrait alors aucune étape du
     modèle. À 520 px le diagramme tient en 616 px, 51 % visible, deux écrans,
     soit le même confort que le tableau comparatif de l'accueil. */
  .essay-figure .ef-scroll > * { min-width: 520px; }

  /* --- structure rétablie : figure 1, les deux régimes côte à côte --- */
  .essay-figure .ef-comparison { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
  .essay-figure .ef-panel + .ef-panel { border-left: 1px solid var(--line); border-top: 0; padding: 0 0 0 2rem; }
  .article-body .essay-figure .ef-panel-summary { min-height: 4.5em; }
  .essay-figure .ef-request-track { gap: 10px; }

  /* --- structure rétablie : les étapes du modèle en quatre colonnes --- */
  .article-body .essay-figure .ef-stages { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; min-height: 156px; }
  .article-body .essay-figure .ef-stages li,
  .article-body .essay-figure .ef-stages li + li { min-height: 0; padding: 10px 5px; border: 1px solid var(--line); }
  .article-body .essay-figure .ef-stages li + li { border-left: 0; }
  .article-body .essay-figure .ef-stages li + li::before { content: none; }

  /* --- structure rétablie : figure 2, le flux de lot en cinq colonnes --- */
  .essay-figure .ef-deadline { margin-left: 96px; }
  /* Les colonnes des flèches et de « Outputs ready » sont dimensionnées sur
     leur contenu : trop étroites, elles débordaient de 9 px et poussaient
     toute la rangée. La flèche est réduite en conséquence. */
  .essay-figure .ef-batch-flow { grid-template-columns: 118px 22px minmax(0, 1fr) 22px 64px; gap: 7px; }
  .essay-figure .ef-scroll .ef-flow-arrow { font-size: 1.2rem; }
  .essay-figure .ef-scroll .ef-outputs { font-size: .7rem; }
  .essay-figure .ef-incoming { width: auto; justify-self: auto; }
  .essay-figure .ef-sessions { margin-top: auto; }
  .essay-figure .ef-flow-arrow { margin: 55px 0 0; transform: none; line-height: normal; }
  .essay-figure .ef-model > .ef-eyebrow,
  .essay-figure .ef-model > .ef-small { text-align: left; }
  .essay-figure .ef-outputs { display: block; grid-template-columns: none; width: auto; justify-self: auto; margin-top: 55px; }
  .essay-figure .ef-output-dots { margin-bottom: 12px; }
  .essay-figure .ef-margin { margin: 12px 8px 6px; }

  /* Dans le diagramme, la typographie reprend ses valeurs d'ordinateur. */
  .essay-figure .ef-scroll .ef-eyebrow { font-size: .65rem; letter-spacing: .09em; }
  .essay-figure .ef-scroll .ef-stages strong { font-size: .8rem; }
  .essay-figure .ef-scroll .ef-stages span { font-size: .66rem; }
  .essay-figure .ef-scroll .ef-deadline-labels { font-size: .8rem; }

  /* Hors du diagramme, on relève le plancher : ces textes sont lus sans geste
     et n'ont aucune raison de rester à la taille d'un écran de 27 pouces. */
  .essay-figure > .ef-header .ef-eyebrow { font-size: .8125rem; letter-spacing: .07em; }
  .article-body .essay-figure .ef-intro { font-size: 1rem; }
  .essay-figure .ef-state { font-size: .9375rem; }
  .essay-figure .ef-takeaways { font-size: .9375rem; }
  .essay-figure .ef-capacity { font-size: .9375rem; }
  .essay-figure figcaption { font-size: .875rem; }
  .article-body .essay-figure .ef-resident > p:last-child { font-size: .9375rem; }

  /* Le rail de glissement, identique à celui du tableau de l'accueil. */
  .essay-figure .ef-rail { position: relative; height: 6px; margin: 10px 0 0; border-radius: 3px; background: var(--blue-surface); overflow: hidden; }
  .essay-figure .ef-rail > span { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 3px; background: var(--blue); }
  .essay-figure .ef-hint { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 1.25rem 0 .5rem; color: var(--muted); font-size: .8125rem; }
  .essay-figure .ef-hint b { color: var(--blue); font-weight: 400; font-size: 1.25rem; flex: 0 0 auto; }
  .essay-figure .ef-hint > span { min-width: 0; }
  /* Mesuré : en paysage, le diagramme tient en entier sur un iPhone 14 et
     au-delà, et à 91 % sur un iPhone SE. La mention n'a de sens que sur un
     écran tactile tenu en portrait. */
  .essay-figure .ef-hint-turn { display: none; }
  @media (orientation: portrait) and (pointer: coarse) {
    .essay-figure .ef-hint-turn { display: inline; }
  }
}
@media (min-width: 801px) {
  .essay-figure .ef-rail, .essay-figure .ef-hint { display: none; }
}