/* Pièces (pieces.js) : la rangée posée entre la phrase et les dossiers. Images à plat, angles droits, pas de cadre ; une ligne sous chacune */
.pieces { position: absolute; z-index: 4; left: 40px; right: 40px; top: 372px; bottom: 214px; display: none; flex-direction: column; pointer-events: none; }
.pieces.on { display: flex; }
.pc-row { flex: 1; min-height: 0; display: flex; gap: 28px; align-items: stretch; margin-top: 14px; }
.pc { margin: 0; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; pointer-events: auto; will-change: transform; }
.pc img, .pc canvas { display: block; flex: 1; min-height: 0; width: 100%; object-fit: cover; background: var(--empty); }
.pc img.sch { object-fit: contain; background: none; }
html[data-theme="nuit"] .pc img.sch { filter: invert(1); }
.pc canvas { object-fit: contain; aspect-ratio: auto; }
.pc figcaption { margin-top: 10px; min-height: 2.8em; font-size: 13px; line-height: 1.4; color: var(--ink); text-wrap: pretty; }
/* Transition. À l'ouverture, les mots de la phrase d'accueil s'effacent l'un après l'autre, flous, en montant à peine,
   et le personnage se dissout ; la phrase du projet s'écrit ensuite mot à mot à la même place. À la fermeture, tout repart à l'envers */
#hero > :is(.w, .k) { transition: opacity .5s var(--out), filter .5s var(--out), transform .6s var(--out), color .45s var(--out), text-decoration-color .3s;
  transition-delay: calc(var(--wi, 0) * 9ms + .18s); }
html.pieces-on #hero { pointer-events: none; }
html.pieces-on #hero > :is(.w, .k) { opacity: 0; filter: blur(8px); transform: translateY(-.12em); transition-duration: .32s, .32s, .4s, .3s, .3s; transition-delay: calc(var(--wi, 0) * 9ms); }
html.pieces-on #hero .k { pointer-events: none; }
html.pieces-on .aside, html.pieces-on .tip { opacity: 0 !important; }
body > canvas, .abub { transition: opacity .55s var(--out), filter .55s var(--out); }
html.pieces-on body > canvas, html.pieces-on .abub, html.pieces-on .emotes { opacity: 0 !important; filter: blur(10px); pointer-events: none !important; }

/* Titre du projet : la phrase d'accueil cède la place à une description, même taille, toute à l'encre et sans mots soulignés
   (l'accueil est gris avec ses mots clés noirs). « Fermer » seul au bord droit */
.pc-title { position: absolute; z-index: 3; pointer-events: none; }
.pc-title.on { pointer-events: auto; }
.pc-x { all: unset; cursor: pointer; position: absolute; right: 0; top: .2em; opacity: 0; transition: opacity .3s var(--out), color .2s; font-family: "Geist", sans-serif; font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--sub); transition: color .2s; }
.pc-title.on .pc-x { opacity: 1; transition-delay: .5s, 0s; }
.pc-x:hover { color: var(--ink); } .pc-x:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 3px; }
.pc-phrase { color: var(--ink); text-wrap: pretty; }
/* liens du projet : des pastilles comme l'onglet actif du header, flèche à droite ; elles arrivent après la phrase */
.pc-links { display: flex; gap: 8px; margin-top: 22px; }
.pc-links a { display: inline-flex; gap: 6px; align-items: baseline; padding: 7px 13px; border-radius: 999px; background: var(--empty); font-size: 13px; line-height: 1; color: var(--ink);
  opacity: 0; filter: blur(4px); transform: translateY(4px); transition: opacity .25s var(--out), filter .25s var(--out), transform .3s var(--out), background-color .2s; }
.pc-links a span { color: var(--sub); transition: transform .2s var(--out), color .2s; }
.pc-links a:hover { background: color-mix(in srgb, var(--ink) 9%, var(--empty)); }
.pc-links a:hover span { color: var(--ink); }
.pc-links a:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 2px; }
.pc-title.on .pc-links a { opacity: 1; filter: none; transform: none; transition-duration: .45s, .45s, .5s, .2s; transition-delay: var(--d, .9s), var(--d, .9s), var(--d, .9s), 0s; } /* taille et police reprises de la phrase d'accueil (pieces.js) */
.pw { display: inline-block; white-space: pre; opacity: 0; filter: blur(8px); transform: translateY(.18em);
  transition: opacity .28s var(--out), filter .28s var(--out), transform .3s var(--out); transition-delay: calc((20 - min(var(--i), 20)) * 6ms); }
.pc-title.on .pw { opacity: 1; filter: none; transform: none; transition-duration: .55s, .55s, .7s; transition-delay: calc(var(--i) * 26ms + .34s); }
@media (max-width: 820px), (max-height: 520px) {
  .pieces { top: 290px; bottom: auto; height: 340px; left: 16px; right: 0; background: var(--bg); }
  .pc-row { overflow-x: auto; scrollbar-width: none; padding-right: 16px; } .pc { flex: 0 0 72%; }
}
.pc img.fit { object-fit: contain; } /* capture de texte (Etouch) : entière, jamais rognée */
/* Le dossier du projet reste ouvert : rabat basculé, feuilles en éventail comme au survol. Quand ses feuilles sont devenues
   les pièces, il est vide (.vide) ; elles y reviennent au retour, puis il se referme */
.folder.ouvert .flap { transform: rotateX(-38deg); transition: transform .5s var(--spring); }
.folder.ouvert .sheet { translate: calc(var(--p) * 34px) calc(-40px + var(--p) * var(--p) * 5px); scale: 1; transform: rotate(calc(var(--p) * 5deg));
  transition: transform .55s var(--spring), translate .55s var(--spring), scale .55s var(--spring), opacity .12s; transition-delay: calc(.06s + var(--i) * .04s); }
.folder.ouvert.vide .sheet { opacity: 0; transition-delay: 0s; }
.folder.ouvert .fmeta .y { color: var(--ink); }

/* « Lire l'étude » : à côté des liens, une pastille sans fond, soulignée */
.pc-study { all: unset; cursor: pointer; align-self: center; margin-left: 6px; padding: 7px 4px; font-size: 13px; line-height: 1; color: var(--ink);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--ink) 30%, transparent);
  opacity: 0; filter: blur(4px); transition: opacity .45s var(--out), filter .45s var(--out), text-decoration-color .2s; }
.pc-title.on .pc-study { opacity: 1; filter: none; transition-delay: calc(var(--d, .9s) + .08s), calc(var(--d, .9s) + .08s), 0s; }
.pc-study:hover { text-decoration-color: var(--ink); }
.pc-study:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 3px; }

/* Lire l'étude : tout grandit. La phrase et les pièces d'origine laissent la place à leurs grandes versions (qui partent de leur place exacte),
   les dossiers descendent et s'effacent ; l'étude défile dans toute la page, sous le header */
html.pz-on:not(.pz-out) :is(.pc-title, .pieces) { visibility: hidden; }
html.pz-out:not(.pz-fondu) :is(.pc-title, .pieces) { visibility: hidden; }
/* au retour : tout le texte de l'étude s'efface aussitôt, seuls le titre et les pièces venues de la rangée restent pour rétrécir */
html.pz-out .pz-in :is(.pz-aside, .pz-ch, .pz-body, .pz-big, .pz-next, figcaption, .pz-fig:not([data-j])) { opacity: 0 !important; transition: opacity .18s var(--out) !important; animation: none !important; }
.bottom { transition: transform .8s cubic-bezier(.65,0,.2,1), opacity .6s var(--out); }
/* pendant la lecture, l'accueil (dossiers, contact) s'efface ; on navigue depuis la ligne du header */
html.pz-on:not(.pz-out) .bottom { transform: translateY(80px); opacity: 0; pointer-events: none; }
.pz { position: fixed; z-index: 20; inset: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; outline: none; visibility: hidden; pointer-events: none; }
.pz::-webkit-scrollbar { display: none; }
/* la lecture monte jusqu'en haut de l'écran et défile sous le header, qui flotte sans fond. Ombre de défilement : un masque fixe sur la zone
   qui défile, toujours là (il ne s'installe pas au défilement). Transparent sous le nom et les onglets, puis le contenu revient en fondu.
   Le titre de l'étude commence plus bas, il n'est jamais touché. Pas de fondu en bas : la barre flottante (.pz-nav) est dans la zone masquée */
html.pz-on header { z-index: 30; }
.pz { -webkit-mask-image: linear-gradient(to bottom, transparent 70px, #000 128px); mask-image: linear-gradient(to bottom, transparent 70px, #000 128px); }
html.pz-on .pz { visibility: visible; pointer-events: auto; }
html.pz-out .pz { pointer-events: none; }
/* Grille de 12 colonnes, sans filet. Le texte apparaît au défilement */
.pz-in { max-width: 1440px; margin: 0 auto; padding: 98px 40px 240px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
/* Barre flottante de lecture, centrée en bas, toujours visible : le retour (flèche dans un petit carré gris), puis les trois dossiers
   de l'accueil en miniature, avec leurs feuilles et leurs gestes : éventail au survol, celui qu'on lit ouvert et vide (ses pièces sont sorties) */
.pz-nav { position: fixed; z-index: 26; bottom: 20px; left: 50%; translate: -50% 0; display: flex; gap: 22px; align-items: flex-end; padding: 10px 22px 8px 10px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 14px; }
.pz-nav .pz-back { all: unset; cursor: pointer; align-self: center; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: var(--empty); color: var(--ink); transition: opacity .2s; }
.pz-nav .pz-back svg { width: 12px; height: 12px; } .pz-nav .pz-back:hover { opacity: .6; }
.pz-nav .pz-back:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 3px; }
.pz-nav .pz-dos { width: auto; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 0; background: none !important; box-shadow: none !important; } /* pas la pastille des onglets du header */
.pz-dos .mini { display: block; width: 47px; height: 37px; } /* 112 × 88 à 42 % : une mise à l'échelle par transform, zoom dessine mal le rabat en 3D */
.pz-dos .fbox { transform: scale(.42); transform-origin: 0 0; }
.pz-nav .folder:active .fbox { transform: scale(.4); }
.pz-dos span { font-size: 11px; line-height: 1; color: var(--sub); transition: color .2s; }
.pz-dos:hover span, .pz-dos[aria-current] span { color: var(--ink); }
html.pz-on:not(.pz-out) .pz-nav { animation: pz-nav-in .5s var(--out) .5s both; }
@keyframes pz-nav-in { from { opacity: 0; } } /* opacité seule : transform reste libre pour la barre qui se range */
html.pz-out .pz-nav { opacity: 0; transition: opacity .2s; }
.pz-back { all: unset; cursor: pointer; color: var(--ink); } .pz-back:hover { opacity: .6; } .pz-back:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 3px; }
/* Deux moitiés de six colonnes, en alternance d'un chapitre à l'autre : le texte (intertitre puis paragraphes) dans l'une, ses images dans l'autre.
   Deux bords seulement, la colonne 1 et la colonne 7 : tout s'y aligne. Images toutes de même proportion, alignées en haut sur l'intertitre.
   Les liens du projet sont posés sous le titre, sur son bord gauche */
.pz-title { grid-column: 1 / 11; margin-top: 56px; font-weight: 400; color: var(--ink); text-wrap: pretty; transform-origin: 0 0; }
.pz-aside { grid-column: 1 / 11; margin-top: 28px; }
.pz-meta { max-width: 64ch; font-size: 14px; line-height: 1.55; color: var(--sub); text-wrap: pretty; }
.pz-meta:empty { display: none; } .pz-meta:empty + .pz-links { margin-top: 0; }
.pz-links { display: flex; gap: 8px; margin-top: 18px; }
.pz-links a { display: inline-flex; gap: 6px; align-items: baseline; padding: 7px 13px; border-radius: 999px; background: var(--empty); font-size: 13px; line-height: 1; color: var(--ink); }
.pz-links a span { color: var(--sub); }
html.pz-on:not(.pz-out) .pz-aside { animation: pd-in .6s var(--out) .6s both; }
@keyframes pd-in { from { opacity: 0; filter: blur(4px); transform: translateY(8px); } }
.pz-study { grid-column: 1 / -1; margin-top: 140px; }
.pz-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: 24px; align-items: start; } /* la hauteur de l’image va sous le texte, jamais entre l’intertitre et le texte */
.pz-row + .pz-row { margin-top: 128px; }
.pz-ch { grid-row: 1; font-size: clamp(26px, 2.6vw, 38px); font-weight: 400; line-height: 1.08; letter-spacing: -0.035em; color: var(--ink); text-wrap: balance; }
.pz-body { grid-row: 2; margin-top: 24px; }
.pz-figs { grid-row: 1 / span 2; }
.pz-row.g :is(.pz-ch, .pz-body) { grid-column: 1 / 6; } .pz-row.g .pz-figs { grid-column: 7 / 13; }
.pz-row.d :is(.pz-ch, .pz-body) { grid-column: 7 / 12; } .pz-row.d .pz-figs { grid-column: 1 / 7; }
.pz-body > * + * { margin-top: 16px; }
.pz-body .rc-p { font-size: 16px; line-height: 1.6; text-wrap: pretty; }
.pz-body .rc-fig { margin: 36px 0 !important; align-items: flex-start; }
.pz-body .rc-fig figcaption { text-align: left; }
.pz-fig { margin: 0; } .pz-fig + .pz-fig { margin-top: 40px; }
.pz-m { aspect-ratio: 4 / 3; background: var(--empty); transform-origin: 0 0; overflow: hidden; }
.pz-m img, .pz-m canvas { display: block; width: 100%; height: 100%; object-fit: cover; }
.pz-m img.sch, .pz-m canvas { object-fit: contain; padding: 5%; }
html[data-theme="nuit"] .pz-m img.sch { filter: invert(1); }
.pz-fig figcaption { margin-top: 10px; max-width: 56ch; font-size: 13px; line-height: 1.45; color: var(--sub); text-wrap: pretty; }
/* schéma du texte sorti en pièce : en trame, sans fond, sur le bord gauche de sa moitié */
.pz-m.sch { background: none; max-width: 440px; aspect-ratio: 1; } .pz-m.sch canvas { padding: 0; }
/* apparition : le texte monte doucement en entrant à l'écran ; au retour il s'efface d'un coup */
.pz-study :is(.pz-ch, .pz-body, figcaption) { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--out), transform .6s var(--out); }
.pz-study :is(.pz-ch, .pz-body, figcaption).vu { opacity: 1; transform: none; }
.pz-study .pz-body.vu { transition-delay: .05s; }
html.pz-out .pz-study :is(.pz-ch, .pz-body, figcaption) { opacity: 0; transition: opacity .2s; }
@media (max-width: 820px), (max-height: 520px) {
  .pz { inset: 0; } .pz-in { padding: 76px 16px 120px; } .pz { -webkit-mask-image: linear-gradient(to bottom, transparent 58px, #000 104px); mask-image: linear-gradient(to bottom, transparent 58px, #000 104px); }
  .pz-in, .pz-row { grid-template-columns: 1fr; } .pz-in { padding: 76px 16px 160px; }
  .pz-in > *, .pz-row > * { grid-column: 1 / -1 !important; grid-row: auto !important; margin-top: 16px; padding-left: 0 !important; }
  .pz-row + .pz-row { margin-top: 80px; } .pz-study { margin-top: 72px; } .pz-row .pz-figs { margin-top: 32px; }
}

/* Projet suivant : sa phrase en gris, à la taille du titre ; elle passe à l'encre en arrivant ou au survol */
/* Projet suivant : son dossier, le même objet que sur l'accueil, à côté de son nom et de sa phrase. Au survol le dossier s'ouvre en éventail
   et la phrase passe à l'encre ; un clic l'ouvre, comme sur l'accueil */
.pz-next.folder { grid-column: 1 / -1; width: auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 22px; align-items: end; margin-top: 200px; color: var(--ink); }
.pz-next-k { grid-column: 1 / -1; font-size: 13px; color: var(--sub); }
.pz-next-f { grid-column: 1 / 3; grid-row: 2; display: block; width: 112px; height: 88px; }
.pz-next-n { grid-column: 3 / 7; grid-row: 2; display: flex; flex-direction: column; gap: 6px; font-size: clamp(26px, 2.6vw, 38px); line-height: 1; letter-spacing: -0.035em; }
.pz-next-n span { font-size: 13px; letter-spacing: 0; color: var(--sub); }
.pz-next-t { grid-column: 7 / 13; grid-row: 2; font-size: 16px; line-height: 1.55; color: var(--sub); text-wrap: pretty; transition: color .4s var(--out); }
.pz-next.folder:hover .pz-next-t { color: var(--ink); }
.pz-next.folder:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 10px; }
@media (max-width: 820px), (max-height: 520px) { .pz-nav { bottom: 12px; gap: 12px; } .pz-next.folder { margin-top: 120px; grid-template-columns: 112px 1fr; } .pz-next-n { grid-column: 2; } .pz-next-t { grid-column: 1 / -1; grid-row: 3; } }
.pz-m img.fit { object-fit: contain; } /* capture de texte (Etouch) : entière */

/* Blocs énormes entre deux chapitres : une phrase de l'étude, sur toute la largeur, au bord gauche comme le titre */
.pz-big { margin: 160px 0 160px; max-width: 15em; font-size: clamp(44px, 7.2vw, 116px); font-weight: 400; line-height: .98; letter-spacing: -0.055em; color: var(--ink); text-wrap: balance; }
.pz-big + .pz-row { margin-top: 0; }
.pz-study .pz-big { opacity: 0; transform: translateY(10px); transition: opacity .6s var(--out), transform .7s var(--out); }
.pz-study .pz-big.vu { opacity: 1; transform: none; }
html.pz-out .pz-study .pz-big { opacity: 0; transition: opacity .2s; }
/* Pastille comme le code en ligne de ChatGPT : fond gris neutre à peine marqué, coins arrondis, texte à l'encre, un peu plus gras */
.pz-hl { color: var(--ink); background: color-mix(in srgb, var(--ink) 7%, var(--bg)); border-radius: 6px; padding: .08em .38em; font-weight: 500;
  box-decoration-break: clone; -webkit-box-decoration-break: clone; white-space: nowrap; } /* une pastille ne se coupe pas */
/* dans les blocs énormes : la même pastille, à l'échelle. Un bloc par mot (pieces.js), collés : l'aplat reste dans sa ligne, arrondi aux deux bouts */
.pz-big .pz-hl { background: none; padding: 0; border-radius: 0; font-weight: inherit; }
.pz-big .pz-hl > span { display: inline-block; line-height: .9; padding: 0 .28em .04em 0; margin-right: -.02em; /* léger chevauchement : pas de couture entre deux mots */ background: color-mix(in srgb, var(--ink) 7%, var(--bg)); }
.pz-big .pz-hl > span:first-child { padding-left: .1em; margin-left: -.04em; border-radius: .12em 0 0 .12em; }
.pz-big .pz-hl > span:last-child { padding-right: .1em; border-radius: 0 .12em .12em 0; }
.pz-big .pz-hl > span:only-child { border-radius: .12em; }
@media (max-width: 820px), (max-height: 520px) { .pz-big { margin: 96px 0; font-size: clamp(36px, 11vw, 64px); } }

/* Blocs de variation entre deux chapitres (BLOCS, pieces.js) : intitulé dans la moitié gauche, contenu sur les mêmes bords que les chapitres */
.pz-bloc { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 28px; margin: 128px 0; align-items: start; }
.pz-bloc + .pz-row, .pz-big + .pz-bloc { margin-top: 0; }
.pz-bt { grid-column: 1 / -1; font-size: 13px; font-weight: 400; line-height: 1.3; color: var(--sub); }
/* trois colonnes : quatre colonnes de grille chacune */
.pz-col { grid-column: span 4; }
.pz-col h5 { font-size: clamp(22px, 1.9vw, 28px); font-weight: 400; line-height: 1.1; letter-spacing: -0.03em; color: var(--ink); }
.pz-col p { margin-top: 14px; max-width: 40ch; font-size: 15px; line-height: 1.55; color: var(--sub); text-wrap: pretty; }
/* graphes : sur toute la largeur ; barres à plat, la plus récente à l'encre, les autres en gris */
.pz-chart .pz-bt { grid-column: 1 / 5; }
.pz-bars, .pz-pile { grid-column: 1 / -1; }
.pz-bar { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr) minmax(0, 1fr); column-gap: 24px; align-items: center; }
.pz-bar + .pz-bar { margin-top: 14px; }
.pz-bl { font-size: clamp(22px, 1.9vw, 28px); line-height: 1.1; letter-spacing: -0.03em; color: var(--ink); }
.pz-track { height: 44px; }
.pz-track i { display: block; height: 100%; width: var(--w); border-radius: 4px; background: color-mix(in srgb, var(--ink) 14%, var(--bg)); }
.pz-bar.on .pz-track i { background: var(--ink); }
.pz-bv { font-size: clamp(22px, 1.9vw, 28px); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--ink); text-align: right; }
.pz-ptrack { display: flex; gap: 3px; height: 64px; }
.pz-ptrack i { width: var(--w); min-width: 6px; border-radius: 4px; background: var(--ink); }
.pz-ptrack i.p1, .pz-plg .p1::before { background: color-mix(in srgb, var(--ink) 40%, var(--bg)); }
.pz-ptrack i.p2, .pz-plg .p2::before { background: color-mix(in srgb, var(--ink) 16%, var(--bg)); }
.pz-plg { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 48px; font-size: 14px; color: var(--sub); }
.pz-plg li { display: flex; align-items: baseline; gap: 8px; }
.pz-plg li::before { content: ""; align-self: center; width: 10px; height: 10px; border-radius: 2px; background: var(--ink); }
.pz-plg b { font-size: clamp(22px, 1.9vw, 28px); font-weight: 400; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--ink); }
.pz-bnote { margin-top: 20px; font-size: 13px; line-height: 1.45; color: var(--sub); text-wrap: pretty; }
/* apparition : le bloc monte doucement, les barres se remplissent de gauche à droite */
.pz-study .pz-bloc { opacity: 0; transform: translateY(10px); transition: opacity .6s var(--out), transform .7s var(--out); }
.pz-study .pz-bloc.vu { opacity: 1; transform: none; }
.pz-bloc :is(.pz-track i, .pz-ptrack) { transform-origin: 0 50%; transform: scaleX(0); transition: transform 1s cubic-bezier(.65,0,.2,1) .2s; }
.pz-bloc.vu :is(.pz-track i, .pz-ptrack) { transform: none; }
html.pz-out .pz-study .pz-bloc { opacity: 0; transition: opacity .2s; }
@media (prefers-reduced-motion: reduce) { .pz-bloc :is(.pz-track i, .pz-ptrack) { transform: none; transition: none; } }
@media (max-width: 820px), (max-height: 520px) {
  .pz-bloc { grid-template-columns: 1fr; margin: 80px 0; row-gap: 24px; } .pz-bloc > * { grid-column: 1 / -1 !important; }
  .pz-bar { grid-template-columns: 1fr auto; row-gap: 8px; } .pz-track { grid-column: 1 / -1; grid-row: 2; height: 32px; } .pz-ptrack { height: 44px; }
}
/* chargement direct d'un projet : aucune transition ni animation CSS ne se joue */
html.boot *, html.boot *::before, html.boot *::after { transition: none !important; animation: none !important; }

/* Tableaux : un vrai tableau de données, sobre. Une seule taille de texte, lignes serrées, filets fins ; l'intitulé de ligne à l'encre, le reste en gris, la colonne la plus récente à l'encre */
.pz-tw { grid-column: 1 / -1; overflow-x: auto; }
.pz-tab table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.45; font-variant-numeric: tabular-nums; }
/* chaque ligne sur la grille des chapitres (une cellule de tableau ignore les largeurs calc(% + px)) : la dernière colonne commence à la colonne 7, comme la moitié droite des chapitres */
.pz-tab :is(thead, tbody) { display: block; }
.pz-tab tr { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.pz-tab .n2 :is(th, td) { grid-column: span 6; }
.pz-tab .n3 :is(th, td):first-child { grid-column: span 3; } .pz-tab .n3 :is(th, td):nth-child(2) { grid-column: span 3; } .pz-tab .n3 :is(th, td):last-child { grid-column: span 6; }
.pz-tab th, .pz-tab td { padding: 0; text-align: left; font-weight: 400; text-wrap: pretty; }
.pz-tab thead th { color: var(--sub); }
.pz-tab tbody th { color: var(--ink); }
.pz-tab td { color: var(--sub); }
.pz-tab td:last-child { color: var(--ink); }
@media (max-width: 820px), (max-height: 520px) { .pz-tab table { min-width: 560px; } }