/* attestscope.ai · cadre de figure des planches (20/10/2026, 21 h). Chargée après as.css par les dix pages qui ont des planches
   (accueil, Le format, Spécification, Guide d'intégration, Gouvernance ; FR et EN). as.css n'est pas modifiée.
   - Chaque planche devient une figure : un panneau encadré à fond de planche, dans la largeur du contenu (.wrap), posé sur le fond de la page.
   - Un seul grand titre, le h2 ; sous-titres et étiquettes sans serif, petits.
   - Le parcours d'Elena (accueil) et les parties A, B, C de « Conserver et vérifier » (Le format) passent en onglets :
     boutons radio natifs, flèches du clavier, sans script ; la partie D reste toujours visible.
   - Impression : tout est visible, les onglets disparaissent. Système visuel des planches inchangé (jetons --pl-… de as.css).
   - 21/10/2026 (demande de l'auteur, 10 h 30) : les onglets deviennent de vrais boutons (section 4), un trait relie les étapes du parcours
     sur une ligne, le titre court reste visible sur téléphone (liste verticale), et chaque panneau sauf le dernier finit par un bouton
     « Étape suivante » ou « Partie suivante » (un libellé du bouton radio suivant, sans script). */

/* ===== 1. le panneau ===== */
/* fond de la page relevé à la racine, avant que .planche ne redéfinisse --paper et --rule2 */
:root { --pc-page: var(--paper); --pc-page-rule: var(--rule2); }
.band.planche { background: var(--pc-page); border-top: 1px solid var(--pc-page-rule); padding-block: clamp(36px, 5vw, 64px); }
.band.planche > .wrap {
  background-color: var(--pl-bg); background-image: radial-gradient(var(--pl-dot) 1px, transparent 1.2px); background-size: 24px 24px;
  border: 1px solid var(--pl-rule); border-radius: var(--pl-radius); box-shadow: var(--pl-shadow);
  padding: clamp(22px, 3vw, 40px) clamp(14px, 2vw, 28px) clamp(16px, 2vw, 24px);
}

/* ===== 2. en-tête : titre, chapeau et lien à gauche, légende des acteurs à droite (comme sur les planches) ===== */
.band.planche .sec-head { max-width: none; margin-bottom: 24px; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 40px; align-items: start; }
.band.planche .sec-head > * { grid-column: 1; }
.band.planche .sec-head > .legend { grid-column: 2; grid-row: 1 / span 6; margin-top: 26px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; white-space: nowrap; }
.band.planche .sec-head > .legend .key { margin-right: 0; }
.band.planche .sec-head > .lbl.mono + h2 { margin-top: 0; }

/* ===== 3. hiérarchie : un seul grand titre ; sous-titres sans serif, petits ===== */
.band.planche :is(h3, h4) { font-family: var(--sans); font-weight: 600; color: var(--pl-title); letter-spacing: 0; }
.band.planche h3 { font-size: 17px; line-height: 1.3; }
.band.planche h4 { font-size: 15.5px; line-height: 1.35; }
/* titres de partie (un cran au-dessus des titres de carte, loin du h2) */
.band.planche :is(.kp-part, .sec-part) > h3, .band.planche.seq-sec .wrap > h3, .band.planche .seq-aside > h3, .band.planche .an-left > h3:first-child { font-size: 19px; line-height: 1.3; }
.band.planche .kp-part > h3 { margin-bottom: 14px; }
.band.planche .kp-part > h3 .lbl.mono { margin-bottom: 4px; }
/* étiquettes des schémas et des cartes */
.band.planche :is(.flow-node .h, .flow-step .h, .out .h, .flow-side .h, .env-in .h, .priv-out .h, .env-seals dt, .th-key .n) { font-family: var(--sans); font-weight: 600; font-size: 15px; line-height: 1.35; }
.band.planche .an-json-h .name { font-family: var(--sans); font-weight: 600; font-size: 17px; }
.band.planche .an-n { width: 24px; height: 24px; font-family: var(--sans); font-size: 13px; font-weight: 600; }
.band.planche .dist .n { font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em; color: var(--pl-sec); margin-bottom: 8px; }
.band.planche .bignums .big { font-family: var(--sans); font-weight: 600; font-size: clamp(26px, 2.6vw, 32px); line-height: 1.1; margin: 4px 0 8px; }
.band.planche .bignums .big.s { font-size: clamp(20px, 2vw, 22px); line-height: 1.25; }
.band.planche .env-quote { font-size: 18px; }

/* fin de planche */
.band.planche .note-ex { margin-top: 24px; }
.band.planche .plate-foot { margin-top: 18px; }
.band.planche a:focus-visible { outline-color: var(--pl-em); }

/* ===== 4. onglets : un groupe de boutons radio natifs (Tab pour entrer, flèches pour changer) =====
   Demande de l'auteur (21/10/2026, 10 h 30) : de vrais boutons. Fond blanc, bordure nette, ombre ; numéro ou lettre dans une pastille
   pleine aux couleurs de l'acteur (bleu riftveil.ai, ocre personne qui signe, bleu marine sinon) ; l'onglet choisi en bleu marine plein. */
.pc-tabs { --pc-n: 6; --pc-gap: 8px; --pc-pad: 12px; --pc-dot: 28px; }
.s-keep .pc-tabs { --pc-n: 3; }
/* contexte d'empilement : le trait qui relie les étapes passe sous les onglets */
.pc-tablist { position: relative; z-index: 0; display: grid; grid-template-columns: repeat(var(--pc-n), minmax(0, 1fr)); gap: var(--pc-gap); }
/* Les boutons radio sont posés en haut de la liste d'onglets (l'onglet n'est pas positionné). Un clic sur un libellé donne le focus au
   bouton radio, et le navigateur fait défiler la page jusqu'à lui s'il est hors de vue : avec ces marges, le haut des onglets s'arrête
   à 16 px du haut de l'écran (bouton « étape suivante » cliqué depuis le bas d'un long panneau). Sur téléphone (< 700 px), ils sont
   posés plus bas, au niveau du titre du panneau : voir la section 11. */
.pc-tab .pc-radio {
  position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none;
  scroll-margin-top: 16px; scroll-margin-bottom: calc(100vh - 17px); scroll-margin-bottom: calc(100dvh - 17px);
}
.pc-tab {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: center; gap: 9px 9px;
  padding: 11px var(--pc-pad) 13px; background: var(--pl-surface); border: 1px solid var(--pl-dash); border-radius: 8px; box-shadow: var(--pl-shadow);
  color: var(--pl-title); cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
/* la pastille : numéro de l'étape ou lettre de la partie */
.pc-tabs .pc-tab :is(.jr-num, .pc-l) {
  grid-column: 1; grid-row: 1; flex: none; width: var(--pc-dot); height: var(--pc-dot); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: 14px; font-weight: 600; line-height: 1; background: var(--pl-navy); color: #FFFFFF;
}
.pc-tabs .pc-tab .jr-num.em { background: var(--pl-em); }
.pc-tabs .pc-tab .jr-num.sg { background: var(--pl-sg); color: #FFFFFF; }
.pc-tabs .pc-tab .jr-actor { grid-column: 2; grid-row: 1; min-width: 0; }
/* « A · Où la garder » : la lettre passe dans la pastille, le point médian reste pour les lecteurs d'écran */
.pc-tab-k { display: contents; font-family: var(--mono); font-size: 12.5px; letter-spacing: .02em; color: var(--pl-sec); }
.pc-tab-k .pc-k { grid-column: 2; grid-row: 1; min-width: 0; line-height: 1.35; }
.pc-tab-k .pc-sep { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.pc-tab-t { grid-column: 1 / -1; grid-row: 2; align-self: stretch; position: relative; font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--pl-title); overflow-wrap: normal; }
/* survol : bordure plus foncée, léger relief */
.pc-tab:hover { border-color: var(--pl-slate); box-shadow: 0 1px 2px rgba(11, 22, 38, .08), 0 10px 28px rgba(11, 22, 38, .13); }
/* onglet choisi : bleu marine plein, texte clair, pastille inversée (couleur claire de l'acteur, chiffre bleu marine) */
.pc-tab:has(.pc-radio:checked) { background: var(--pl-navy); border-color: var(--pl-navy); box-shadow: var(--pl-shadow); cursor: default; }
.pc-tab:has(.pc-radio:checked) .pc-tab-t { color: var(--pl-on-navy); }
.pc-tab:has(.pc-radio:checked) :is(.jr-actor, .pc-tab-k) { color: var(--pl-on-navy2); }
.pc-tab:has(.pc-radio:checked) .jr-actor.em { color: var(--pl-on-navy-blue); }
.pc-tab:has(.pc-radio:checked) .jr-actor.sg { color: var(--pl-on-navy-ocre); }
.pc-tabs .pc-tab:has(.pc-radio:checked) :is(.jr-num, .pc-l) { background: var(--pl-on-navy); color: var(--pl-navy); }
.pc-tabs .pc-tab:has(.pc-radio:checked) .jr-num.em { background: var(--pl-on-navy-blue); }
.pc-tabs .pc-tab:has(.pc-radio:checked) .jr-num.sg { background: var(--pl-on-navy-ocre); }
/* la petite flèche sous l'onglet choisi, quand les onglets tiennent sur une ligne (13 px = marge intérieure basse + bordure) */
.pc-tab:has(.pc-radio:checked) .pc-tab-t::after {
  content: ""; position: absolute; left: 50%; top: calc(100% + 13px); margin-left: -8px; border: 8px solid transparent; border-bottom: 0; border-top-color: var(--pl-navy);
}
.pc-tab:has(.pc-radio:focus-visible) { outline: 2px solid var(--pl-em); outline-offset: 3px; }
/* arrivée par une ancre de partie (#conserver-b…) : l'onglet visé est signalé */
.pc-tab:target { outline: 2px dashed var(--pl-em); outline-offset: 3px; }
/* le parcours d'Elena sur une ligne (1 024 px et plus) : un trait relie les pastilles, visible entre les onglets */
@media (min-width: 1024px) {
  .s-path .pc-tabs { --pc-gap: 18px; }
  .s-path .pc-tablist::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: calc(1px + 11px + var(--pc-dot) / 2 - 1px); height: 2px; background: var(--pl-dash); }
}
/* de 1 024 à 1 199 px, onglets étroits : « AttestScope » doit tenir à côté de sa pastille */
@media (min-width: 1024px) and (max-width: 1199px) {
  .s-path .pc-tabs { --pc-gap: 12px; --pc-pad: 10px; --pc-dot: 26px; }
  .s-path .pc-tab { column-gap: 7px; }
}
/* bouton « étape suivante » / « partie suivante », en bas de chaque panneau sauf le dernier : un libellé du bouton radio suivant.
   Affiché seulement si le navigateur connaît :has() (sinon tous les panneaux sont visibles et le bouton ramènerait en arrière). */
.pc-next { display: none; }
.pc-tabs:has(.pc-radio:checked) .pc-next {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; box-sizing: border-box; margin: 8px 0 0; padding: 10px 18px;
  background: var(--pl-surface); color: var(--pl-navy); border: 1.5px solid var(--pl-navy); border-radius: 8px; box-shadow: var(--pl-shadow);
  font-family: var(--sans); font-size: 15px; font-weight: 500; line-height: 1.35; text-align: left; text-wrap: balance; cursor: pointer; overflow-wrap: normal;
  transition: background-color .15s ease, color .15s ease;
}
.pc-next > span { flex: none; font-size: 17px; line-height: 1; }
.pc-next:hover { background: var(--pl-navy); color: var(--pl-on-navy); }
.s-path .pc-next { grid-column: 1 / -1; justify-self: end; }
.s-keep .pc-tabs:has(.pc-radio:checked) .pc-next { display: flex; width: fit-content; margin: 28px 0 0 auto; }
.pc-panels { list-style: none; margin: 14px 0 0; padding: clamp(16px, 2.4vw, 28px); background: var(--pl-soft); border: 1px solid var(--pl-rule); border-radius: var(--pl-radius); }
/* une étape à la fois : les panneaux non choisis sont masqués (sans :has(), tout reste visible) */
.pc-tabs:has(.pc-radio:checked) .pc-panel { display: none; }
.pc-tabs:has(.pc-tab:nth-child(1) .pc-radio:checked) .pc-panel:nth-child(1),
.pc-tabs:has(.pc-tab:nth-child(2) .pc-radio:checked) .pc-panel:nth-child(2),
.pc-tabs:has(.pc-tab:nth-child(3) .pc-radio:checked) .pc-panel:nth-child(3),
.pc-tabs:has(.pc-tab:nth-child(4) .pc-radio:checked) .pc-panel:nth-child(4),
.pc-tabs:has(.pc-tab:nth-child(5) .pc-radio:checked) .pc-panel:nth-child(5),
.pc-tabs:has(.pc-tab:nth-child(6) .pc-radio:checked) .pc-panel:nth-child(6) { display: var(--pc-show, block); }
/* le titre de la partie est dans l'onglet choisi : dans le panneau, il reste pour les lecteurs d'écran et l'impression */
.band.planche .pc-panel .jr-head, .band.planche .pc-panel > .jr-text > h3, .band.planche .kp-part.pc-panel > h3 {
  position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ===== 5. accueil · le parcours d'Elena ===== */
.s-path .jr-time { margin-top: 0; padding: 11px 16px; gap: 8px 14px; }
.s-path .jr-time .sep { flex-basis: 16px; min-width: 16px; }
.s-path .pc-tabs { margin-top: 24px; }
.s-path .jr-num { width: 24px; height: 24px; font-family: var(--sans); font-size: 13px; font-weight: 600; }
.s-path .jr-actor { font-size: 11px; letter-spacing: .04em; font-weight: 500; white-space: nowrap; overflow-wrap: normal; }
.s-path .pc-panels { margin-top: 14px; }
.s-path .pc-panel, .s-path .pc-panel:first-child { --pc-show: grid; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 20px 40px; margin: 0; padding: 0; border: 0; align-items: start; }
.s-path .pc-panel > .jr-text { position: sticky; top: 20px; }
.s-path .pc-panel > .jr-text > h3 { font-size: 17px; margin: 0 0 8px; }
.s-path .pc-panel > .jr-text > h3 + p { font-size: 15.5px; line-height: 1.55; color: var(--pl-text); }
/* ce qui quitte le navigateur : teinte de la planche (bleu à l'étape 1, ocre à l'étape 4, neutre ailleurs) */
.s-path .jr-out { margin-top: 18px; padding: 11px 14px 12px; border-radius: 8px; max-width: none; }
.s-path .jr-out .lbl { font-size: 11px; letter-spacing: .08em; margin-bottom: 4px; line-height: 1.4; }
.s-path .jr-out p { font-size: 14px; line-height: 1.55; }
.s-path .jr-out p + p { margin-top: 6px; }
/* étape 3 : deux issues et la boucle « pas prête » */
.s-path .jr-fork .h { font-family: var(--sans); font-size: 15px; font-weight: 600; line-height: 1.4; margin-bottom: 4px; }
.s-path .jr-fork > div:not(.no) .h::before { content: ""; display: inline-block; width: 4px; height: 8px; margin: 0 9px 2px 2px; border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
.s-path .jr-fork p + p { margin-top: 4px; }
.s-path .jr-loop .h { font-family: var(--sans); font-size: 14.5px; font-weight: 600; }
.s-path .jr-screen > .screen, .s-path .jr-screen > .file-card { margin-inline: auto; }

/* ===== 6. le format · conserver et vérifier : A, B, C en onglets, D toujours visible ===== */
.s-keep .pc-tabs { margin-top: 4px; }
.s-keep .pc-panel { margin: 0; }
.s-keep .pc-tab-t { font-size: 14.5px; }
.band.planche .kp-part:not(.pc-panel) { margin-top: 36px; }

/* ===== 7. accueil · qui fait quoi ; le format · ce qui le distingue ===== */
.band.planche .roles li { padding: 18px 20px 20px; }
.band.planche .roles h3 { margin-bottom: 8px; }
.band.planche .env { margin-top: 32px; }
.band.planche .dist li { padding: 18px 20px 20px; }
.band.planche .dist h3 { margin-bottom: 8px; }

/* ===== 8. gouvernance · sécurité et vie privée : tout visible, tableau resserré ===== */
.band.planche .sec-part { margin-top: 36px; }
.band.planche .sec-head + .sec-part { margin-top: 0; }
.band.planche .sec-part > h3 { margin-bottom: 6px; }
.band.planche .sec-part > .sub { margin-bottom: 12px; }
.band.planche .th-key { margin-bottom: 12px; }
.band.planche .threats { font-size: 14px; line-height: 1.45; }
.band.planche .threats th { padding: 8px 12px; }
.band.planche .threats td { padding: 7px 12px; }
.band.planche .threats td:first-child, .band.planche .threats th:first-child { padding-right: 2px; }
.band.planche .bignums li + li { margin-top: 3px; }

/* ===== 9. spécification · anatomie ; guide · schéma technique : disposition gardée ===== */
.band.planche.an-sec .an-boxes { margin-top: 32px; }
.band.planche.an-sec .wrap h3 { margin-top: 24px; }
.band.planche.an-sec .wrap :is(.an-layers h3, .an-boxes h3, .an-pl h3, .an-left > h3:first-child) { margin-top: 0; }
.band.planche.seq-sec .wrap > h3 { margin-top: 32px; }
/* le diagramme garde sa largeur dans le panneau : texte du schéma à 14 px et plus à 1 440 */
.band.planche .seq-fig { padding: 12px 10px; }
.band.planche.seq-sec > .wrap { padding-inline: clamp(14px, calc(4.2vw - 32px), 28px); }
@media (min-width: 1240px) { .band.planche .seq-top { grid-template-columns: minmax(0, 1fr) 296px; gap: 24px; } }
.band.planche.seq-sec .rules, .band.planche.seq-sec .next-fmt { gap: 12px; }
.band.planche.seq-sec :is(.rules > div, .next-fmt > div) { padding: 14px 14px 16px; }
.band.planche .kp-part > h3 .lbl.mono { font-weight: 400; }

/* ===== 10. tablette ===== */
@media (max-width: 1023px) {
  .s-path .pc-tabs { --pc-n: 3; }
  /* deux lignes de trois : ni flèche sous l'onglet choisi, ni trait */
  .s-path .pc-tab:has(.pc-radio:checked) .pc-tab-t::after { display: none; }
}
@media (max-width: 900px) {
  .band.planche .sec-head { grid-template-columns: minmax(0, 1fr); }
  .band.planche .sec-head > .legend { grid-column: 1; grid-row: auto; margin-top: 14px; flex-direction: row; flex-wrap: wrap; gap: 4px 18px; white-space: normal; }
  .s-path .pc-panel, .s-path .pc-panel:first-child { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .s-path .pc-panel > .jr-text { position: static; }
}

/* ===== 11. téléphone : le panneau gagne un peu de largeur (textes des schémas à 14 px et plus) ; onglets compacts ===== */
@media (max-width: 640px) {
  .band.planche { padding-inline: 8px; }
  .band.planche > .wrap, .band.planche.seq-sec > .wrap { padding: 20px 10px 16px; }
  .band.planche .env .fig { padding: 12px 10px 6px; }
}
@media (max-width: 699px) {
  .s-path .jr-time { flex-direction: column; align-items: flex-start; gap: 6px; }
  .s-path .jr-time .sep { display: none; }
  /* onglets en liste verticale compacte : une étape par ligne, pastille à gauche, acteur puis titre court à côté (titre visible) */
  .pc-tabs { --pc-gap: 6px; --pc-dot: 30px; }
  .s-path .pc-tabs, .s-keep .pc-tabs { --pc-n: 1; }
  .pc-tab { grid-template-rows: auto auto; gap: 1px 12px; min-height: 56px; box-sizing: border-box; padding: 8px 14px 9px 12px; }
  .pc-tabs .pc-tab :is(.jr-num, .pc-l) { grid-row: 1 / span 2; }
  .pc-tabs .pc-tab .jr-actor, .pc-tab-k .pc-k { align-self: end; line-height: 1.3; }
  .pc-tabs .pc-tab-t { grid-column: 2; grid-row: 2; align-self: start; font-size: 15px; line-height: 1.3; }
  .pc-tab:has(.pc-radio:checked) .pc-tab-t::after { display: none; }
  /* « suivante » sur téléphone (demande du 21/10/2026) : la vue arrive au début du nouveau panneau, pas sur la liste des étapes.
     Le titre du panneau est 31 px sous la liste (14 px de marge + 1 px de bordure + 16 px de marge intérieure). Les boutons radio sont
     posés deux hauteurs d'écran plus haut : ils sont donc toujours hors de l'écran au moment du clic, et le navigateur défile toujours.
     Il centre la zone « bouton radio + marges » (hauteur : 5 écrans - 32 px) : le titre s'arrête à 16 px du haut de l'écran.
     Toucher un onglet de la liste fait de même : le panneau choisi s'affiche en haut de l'écran. */
  .pc-tab .pc-radio {
    top: calc(100% + 31px - 200vh); top: calc(100% + 31px - 200dvh);
    scroll-margin-top: 0; scroll-margin-bottom: calc(500vh - 33px); scroll-margin-bottom: calc(500dvh - 33px);
  }
  .band.planche .pc-panel > .jr-text > h3, .band.planche .kp-part.pc-panel > h3 { position: static; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; white-space: normal; }
  .pc-panels { padding: 16px 12px; }
  /* bouton « suivante » en pleine largeur, 48 px de haut au moins */
  .pc-tabs:has(.pc-radio:checked) .pc-next { justify-self: stretch; width: 100%; min-height: 48px; margin-top: 4px; padding: 11px 16px; justify-content: space-between; }
  .s-keep .pc-tabs:has(.pc-radio:checked) .pc-next { width: 100%; margin-top: 24px; }
}

/* ===== 12. téléphone et tablette (≤ 800 px) : aucun texte des planches sous 14 px ===== */
@media (max-width: 800px) {
  .s-path .jr-num, .s-path .jr-actor, .pc-tab-t, .pc-tab-k, .s-path .jr-out .lbl, .s-path .jr-out p, .s-path .jr-out code, .s-path .jr-fork .h, .s-path .jr-loop .h,
  .band.planche .dist .n, .band.planche .an-n { font-size: 14px; }
  .s-path .jr-num, .band.planche .an-n { width: 26px; height: 26px; }
  .s-path .jr-out .lbl { text-transform: none; letter-spacing: 0; font-weight: 500; }
  /* acteur des onglets à 14 px : en casse normale, comme la légende */
  .s-path .pc-tab .jr-actor { text-transform: none; letter-spacing: 0; }
  .band.planche .tablewrap::after { font-size: 14px; }
}

/* ===== 13. impression : tout est visible, les onglets disparaissent ===== */
@media print {
  .band.planche > .wrap { border: 1px solid #999; box-shadow: none; padding: 16px; }
  .pc-tablist, .pc-next { display: none !important; }
  .pc-panels { margin: 0; padding: 0; border: 0; }
  .pc-tabs .pc-panel { display: block !important; margin-top: 20px; break-inside: auto; }
  .band.planche .pc-panel .jr-head, .band.planche .pc-panel > .jr-text > h3, .band.planche .kp-part.pc-panel > h3 { position: static; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; white-space: normal; }
  .band.planche .pc-panel .jr-head { display: flex; margin-bottom: 8px; }
  .s-path .pc-panel .jr-screen { margin-top: 14px; }
  .band.planche .kp-part > h3, .band.planche .sec-part > h3 { break-inside: avoid; break-after: avoid; }
}

/* ===== 12. espace avant une planche (demande de l'auteur, 21/10/2026, 10 h 10 : l'espace entre les licences et « Sécurité et vie privée »
   paraissait trop grand et n'incitait pas à descendre) : un seul intervalle avant le cadre, au lieu de deux marges et d'un filet empilés.
   Même règle partout où une planche suit une bande : accueil, Le format, Spécification, Guide d'intégration, Gouvernance (FR et EN). ===== */
.band:not(.dark):not(.warm):has(+ .band.planche) { padding-bottom: clamp(36px, 4.4vw, 64px); }
.band:not(.dark):not(.warm) + .band.planche { border-top: 0; padding-top: 0; }
.band.warm:has(+ .band.planche) { padding-bottom: clamp(36px, 4.4vw, 64px); }
.band.warm + .band.planche { padding-top: clamp(24px, 3vw, 40px); }