/* Ormia : page « Présentation » (ormia.fr/presentation/). Complète site.css, mêmes jetons.
   Contrastes (brand/ormia/piste-2/palette.md §2.1) : sur fond clair, texte en bleu nuit ou gris ardoise, accent en
   bleu élan ; sur fond sombre, papier, #C9D3E3 ou gris brume, accent en bleu élan clair. Le vert et l'ambre ne
   servent qu'aux filets d'en-tête du bloc « ce qui est prêt / ce qui ne l'est pas », jamais au texte.
   Aucun style en ligne, aucune ressource externe (CSP). */

/* Sur téléphone, l'en-tête collant passe sur deux lignes : les ancres du sommaire s'arrêtent dessous. */
@media (max-width: 760px) { html { scroll-padding-top: 124px; } }

/* En-tête de page */
.pr-hero { padding-block: clamp(36px, 6vw, 72px) clamp(48px, 7vw, 88px); }
.pr-hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; }
.pr-h1 { font-size: clamp(34px, 4.8vw, 56px); line-height: 1.05; margin-top: 16px; }
.pr-hero .lead { color: var(--nuit); }
.pr-src { color: var(--ardoise); }
.shot figcaption b { color: var(--nuit); font-weight: 700; }

/* Trois chiffres */
.pr-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 48px 0 0; border-top: 1px solid var(--filet); }
.pr-figs > div { padding: 20px 24px 0 0; }
.pr-figs > div + div { padding-left: 24px; border-left: 1px solid var(--filet); }
.pr-figs dt { font: 800 clamp(26px, 3.2vw, 36px)/1.05 var(--font); letter-spacing: -0.02em; color: var(--nuit); }
.pr-figs dd { margin: 8px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--ardoise); max-width: 34ch; }

/* Sommaire */
.pr-toc { margin-top: 44px; padding: 20px 22px 14px; background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--radius); }
.pr-toc h2 { font: 700 12.5px/1.2 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--elan); }
.pr-toc ol { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0 28px; counter-reset: pr-toc; }
.pr-toc li { counter-increment: pr-toc; border-bottom: 1px solid var(--filet); }
.pr-toc a { display: flex; gap: 12px; align-items: baseline; min-height: 44px; padding-block: 10px; color: var(--nuit); font-weight: 600; font-size: 15px; line-height: 1.35; text-decoration: none; }
.pr-toc a::before { content: counter(pr-toc, decimal-leading-zero); flex: none; min-width: 1.7em; font-size: 12px; font-weight: 800; color: var(--elan); }
.pr-toc a:hover { color: var(--elan); text-decoration: underline; }
.pr-scope { margin-top: 16px; max-width: 80ch; }

/* Texte courant des blocs */
.pr-prose { max-width: 70ch; margin-top: 20px; font-size: 16.5px; line-height: 1.65; }
.pr-prose p + p { margin-top: 14px; }
.pr-prose strong, .pr-callout strong { font-weight: 700; }
.pr-prose-tight { margin-top: 0; }
.dark .pr-prose { color: #C9D3E3; }
.dark .pr-prose strong { color: var(--papier); }
.pr-h3 { font: 800 21px/1.25 var(--font); margin-top: 52px; max-width: 40ch; }
.pr-h3-top { margin-top: 0; }
.pr-callout { max-width: 76ch; margin-top: 28px; font-size: 15.5px; line-height: 1.6; }

/* Citations et phrases d'exergue */
.pr-pull { margin: 40px 0 0; padding-left: 22px; border-left: 4px solid var(--elan); font: 800 clamp(21px, 2.6vw, 28px)/1.22 var(--font); letter-spacing: -0.015em; color: var(--nuit); max-width: 34ch; }
.pr-pull p { margin: 0; }
.pr-pull-lg { margin-top: 18px; font-size: clamp(24px, 3.2vw, 36px); max-width: 30ch; }
.dark .pr-pull { border-left-color: var(--elan-clair); color: var(--papier); }

/* Deux colonnes : ce qu'on fait, ce qu'on ne fait pas */
.pr-versus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.pr-versus > div { padding: 22px 24px; border: 1px solid var(--filet); border-radius: var(--radius); }
.pr-yes { background: var(--papier); }
.pr-no { background: var(--blanc); }
.pr-versus h3 { font: 800 17px/1.3 var(--font); }
.pr-versus ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
.pr-versus li { position: relative; padding-left: 28px; font-size: 15.5px; line-height: 1.5; }
.pr-versus li::before { content: ""; position: absolute; left: 0; top: .28em; width: 16px; height: 16px; border-radius: 50%; }
.pr-yes li::before { background: var(--elan); }
.pr-yes li::after { content: ""; position: absolute; left: 6px; top: calc(.28em + 3px); width: 4px; height: 8px; border: solid var(--blanc); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.pr-no li { color: var(--ardoise); }
.pr-no li::before { box-shadow: inset 0 0 0 2px var(--ardoise); }
.pr-no li::after { content: ""; position: absolute; left: 4px; top: calc(.28em + 7px); width: 8px; height: 2px; background: var(--ardoise); }

/* Le problème : les postes de coût, sans montant */
.pr-costs { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 860px; }
.pr-costs li { padding: 14px 16px 14px 18px; background: var(--blanc); border: 1px solid var(--filet); border-left: 4px solid var(--nuit); border-radius: 0 10px 10px 0; font-weight: 600; line-height: 1.4; }

/* La boucle en sept temps */
.pr-steps { list-style: none; margin: 32px 0 0; padding: 0; counter-reset: pr-step; border-top: 1px solid var(--filet); }
.pr-steps li { counter-increment: pr-step; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 4px 18px; padding: 18px 0; border-bottom: 1px solid var(--filet); }
.pr-steps li::before { content: counter(pr-step); grid-row: span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--nuit); color: var(--blanc); font: 800 14px/1 var(--font); }
.pr-steps h3 { font: 800 17px/1.3 var(--font); padding-top: 5px; }
.pr-steps p { max-width: 74ch; font-size: 15.5px; line-height: 1.6; color: var(--nuit); }
.pr-steps strong { font-weight: 700; }

/* Captures : deux par ligne, ou une à côté d'un texte */
.pr-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 28px; margin-top: 40px; }
.pr-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; margin-top: 40px; }
.pr-hero-shot { margin: 0; }

/* Tableaux : un conteneur qui défile à l'horizontale sur un écran étroit, avec une ombre au bord qui le signale ;
   sous 600 px, les lignes deviennent des fiches (voir plus bas). */
.pr-scroll {
  margin-top: 28px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  border: 1px solid var(--filet);
  border-radius: var(--radius);
  background:
    linear-gradient(to right, var(--blanc) 30%, rgba(255, 255, 255, 0)) left center / 32px 100% no-repeat local,
    linear-gradient(to left, var(--blanc) 30%, rgba(255, 255, 255, 0)) right center / 32px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(22, 33, 58, .2), rgba(22, 33, 58, 0)) left center / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(22, 33, 58, .2), rgba(22, 33, 58, 0)) right center / 12px 100% no-repeat scroll,
    var(--blanc);
}
.pr-table { width: 100%; min-width: 34em; border-collapse: collapse; font-size: 15px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.pr-table-3 { min-width: 38em; }
.pr-table-wide { min-width: 44em; }
.pr-table caption { text-align: left; }
.pr-table th, .pr-table td { text-align: left; vertical-align: top; padding: 13px 18px; border-bottom: 1px solid var(--filet); }
.pr-table thead th { font: 700 12px/1.3 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--ardoise); padding-block: 12px; border-bottom: 2px solid var(--filet); }
.pr-table tbody th { font-weight: 700; color: var(--nuit); width: 30%; }
.pr-table tbody tr:last-child > * { border-bottom: 0; }
.pr-code { display: inline-grid; place-items: center; min-width: 24px; height: 24px; margin-right: 8px; padding-inline: 5px; border-radius: 6px; background: var(--elan-voile); color: var(--nuit); font: 800 13px/1 var(--font); }

/* Ce qu'on ne demande jamais, ce qu'on demande à la place */
.pr-swap { list-style: none; margin: 32px 0 0; padding: 0; border-top: 1px solid var(--filet); }
.pr-swap li { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 8px 32px; padding: 18px 0; border-bottom: 1px solid var(--filet); }
.pr-lab { display: block; margin-bottom: 4px; font: 700 11.5px/1.3 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--ardoise); }
.pr-good .pr-lab { color: var(--elan); }
.pr-bad { color: var(--ardoise); font-size: 15.5px; }
.pr-good { color: var(--nuit); font-size: 16px; line-height: 1.55; }

/* Le principe du tiers de confiance */
.pr-principle { max-width: 80ch; margin-top: 28px; padding: 22px 24px; background: var(--blanc); border: 1px solid var(--filet); border-left: 4px solid var(--elan); border-radius: 0 var(--radius) var(--radius) 0; font-size: 15.5px; line-height: 1.6; }
.pr-principle p + p { margin-top: 12px; }
.pr-principle strong { font-weight: 800; }

/* Les trois compteurs, de taille égale */
.pr-counters { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pr-counters li { padding: 20px; background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--radius); }
.pr-tag { display: inline-block; padding: 5px 9px; border-radius: 999px; background: var(--elan-voile); color: var(--nuit); font: 700 11px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; }
.pr-counters h3 { margin-top: 12px; font: 800 17px/1.3 var(--font); }
.pr-counters p { margin-top: 6px; font-size: 14.5px; line-height: 1.55; color: var(--ardoise); }

/* Ce que le relevé ne dit pas */
.pr-stamp { display: inline-block; vertical-align: 3px; margin-left: 6px; padding: 4px 8px; border: 1px solid var(--ardoise); border-radius: 6px; font: 700 11px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--ardoise); }
.pr-limits { margin: 20px 0 0; border-top: 1px solid var(--filet); }
.pr-limits > div { padding: 14px 0; border-bottom: 1px solid var(--filet); }
.pr-limits dt { font-weight: 800; }
.pr-limits dd { margin: 4px 0 0; font-size: 15px; line-height: 1.55; color: var(--nuit); }

/* Ce qui est prêt, ce qui ne l'est pas : deux colonnes de même largeur, même traitement. */
.pr-truth { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 48px; margin-top: 36px; }
.pr-truth h3 { padding-bottom: 12px; border-bottom: 4px solid; font: 800 14px/1.2 var(--font); letter-spacing: .1em; text-transform: uppercase; }
.pr-ok h3 { border-bottom-color: var(--vert); }
.pr-ko h3 { border-bottom-color: var(--ambre); }
.pr-truth ul { list-style: none; margin: 0; padding: 0; }
.pr-truth li { padding: 16px 0; border-bottom: 1px solid var(--filet); font-size: 15px; line-height: 1.55; }
.pr-truth li b { display: block; margin-bottom: 3px; font-size: 15.5px; font-weight: 800; }

/* La suite. La page finit sur une bande bleu nuit : un filet la sépare du pied de page, bleu nuit lui aussi. */
.site-f { border-top: 1px solid var(--nuit-3); }
.pr-actions { margin-top: 36px; }
.pr-end { margin-top: 36px; max-width: 80ch; }

@media (max-width: 900px) {
  .pr-hero-grid, .pr-split { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .pr-counters { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .pr-versus, .pr-grid2, .pr-truth, .pr-costs { grid-template-columns: minmax(0, 1fr); }
  .pr-swap li { grid-template-columns: minmax(0, 1fr); }
  .pr-figs { grid-template-columns: minmax(0, 1fr); }
  .pr-figs > div, .pr-figs > div + div { padding: 16px 0; border-left: 0; }
  .pr-figs > div + div { border-top: 1px solid var(--filet); }
  .pr-versus > div { padding: 18px; }
  .pr-table th, .pr-table td { padding: 12px 14px; }
}
@media (max-width: 560px) {
  .pr-toc { padding: 16px 16px 8px; }
  .pr-toc ol { grid-template-columns: minmax(0, 1fr); }
  .pr-prose { font-size: 16px; }
  .pr-steps li { grid-template-columns: 30px minmax(0, 1fr); gap: 4px 14px; }
  .pr-steps li::before { width: 30px; height: 30px; font-size: 13px; }
  .pr-steps h3 { padding-top: 3px; }
  .pr-stamp { display: table; margin: 8px 0 0; }
}

/* Sur téléphone, un tableau ne défile plus de côté (le texte y était coupé au bord de l'écran) : chaque ligne devient
   une fiche, son en-tête de ligne en titre, chaque cellule précédée de l'intitulé de sa colonne (attribut data-label).
   L'en-tête de colonnes reste lu par les lecteurs d'écran. */
@media (max-width: 600px) {
  .pr-scroll { overflow: visible; background: var(--blanc); }
  .pr-table, .pr-table-3, .pr-table-wide { display: block; min-width: 0; }
  .pr-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pr-table tbody, .pr-table tr, .pr-table tbody th, .pr-table td { display: block; }
  .pr-table tbody tr { padding: 14px 16px 16px; border-bottom: 1px solid var(--filet); }
  .pr-table tbody tr:last-child { border-bottom: 0; }
  .pr-table tbody th, .pr-table td, .pr-table tbody tr:last-child > * { width: auto; padding: 0; border: 0; }
  .pr-table td { margin-top: 4px; }
  .pr-table td[data-label]::before { content: attr(data-label); display: block; margin: 10px 0 2px; font: 700 11px/1.3 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--ardoise); }
}

@media print {
  .pr-toc, .pr-actions { display: none; }
  .pr-scroll { overflow: visible; border: 0; background: none; }
  .pr-table, .pr-table-3, .pr-table-wide { min-width: 0; }
  .pr-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shot, .pr-truth li, .pr-steps li, .pr-table tr { break-inside: avoid; }
}