/* =====================================================================
   SITE — un seul thème, hérité du registre Papier du dock :
   « restrained warmth, a soberly manufactured object ».
   #F2F1ED papier (fond de page)      #E9E8E3 papier enfoncé (aplats, champs de note)
   #DEDDD6 papier pressé (survol)     #FFFFFF feuille (cartes, champs)
   #C0BFB6 filet                       #A9A89F filet fort (bordures de champ, boutons)
   #23231E encre (texte)               #55554C encre pâle (texte secondaire)
   #69695F encre grise (mentions)      #1D6350 vert atelier (action principale)
   #17513F bord du vert                #8F4A18 terre cuite (« nouveau », seul accent chaud)
   #FDF1E6 texte sur terre cuite       #EFE4D8 kraft (encarts d'annonce, pied de formulaire)
   #D6BFA6 filet kraft                 #6B3512 encre kraft
   #8E3226 brique (phrase d'écart)     #2E5FA3 bleu focus — jamais un contenu
   ===================================================================== */
:root{
  --s-paper:#F2F1ED;--s-sunken:#E9E8E3;--s-pressed:#DEDDD6;--s-tile:#FFFFFF;
  --s-rule:#C0BFB6;--s-rule-strong:#A9A89F;--s-ink:#23231E;--s-ink-pale:#55554C;--s-ink-grey:#69695F;
  --s-green:#1D6350;--s-green-edge:#17513F;--s-new:#8F4A18;--s-on-new:#FDF1E6;
  --s-kraft:#EFE4D8;--s-kraft-rule:#D6BFA6;--s-kraft-ink:#6B3512;--s-brick:#8E3226;--s-focus:#2E5FA3;
  --s-gutter:clamp(16px,4vw,40px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--s-paper);color:var(--s-ink);font:17px/1.6 "Segoe UI",system-ui,sans-serif;overflow-x:hidden}
h1,h2,h3,h4,p{margin:0}
a{color:var(--s-green)}
:focus-visible{outline:3px solid var(--s-focus);outline-offset:2px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Marque : le nom posé sous une lisière */
.marque{display:inline-flex;flex-direction:column;gap:5px;font-weight:700;font-size:17px;letter-spacing:.2px;color:var(--s-ink);text-decoration:none}
.marque::before{content:"";display:block;width:44px;height:5px;background:var(--s-rule);border-bottom:1px solid var(--s-rule-strong);border-radius:0 0 2px 2px}
/* Logo de l'en-tête (2026-10-05) : le dessin du porteur, recadré sur ses tracés. La marque en texte reste au pied. */
.marque-logo{display:block;line-height:0}
.marque-logo img{display:block;height:32px;width:auto}

/* Boutons du site — ceux du dock, à l'échelle de la page */
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:2px;border:1px solid var(--s-rule-strong);background:var(--s-sunken);
  color:var(--s-ink);font:inherit;font-size:15px;font-weight:600;line-height:1.3;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--s-pressed)}
.btn--plein{background:var(--s-green);border-color:var(--s-green-edge);color:#FFFFFF}
.btn--plein:hover{background:var(--s-green-edge)}
.btn--petit{font-size:13px;padding:6px 11px}

.badge{display:inline-block;background:var(--s-new);color:var(--s-on-new);font-size:11px;font-weight:700;letter-spacing:.4px;padding:1px 6px;border-radius:2px;line-height:1.5;vertical-align:.15em}
.point{display:inline-block;width:4px;height:9px;background:var(--s-new);vertical-align:.05em}

/* Sélecteur de thème — ne change que le dock. Une seule ligne : le nom du
   thème actif, puis les cinq échantillons réunis sous une bordure commune.
   Le nom de chaque thème reste lu par les lecteurs d'écran et en infobulle. */
.selth-actif{font-size:13px;font-weight:600;color:var(--s-ink);white-space:nowrap}
.selth{display:inline-flex;flex:none;border:1px solid var(--s-rule-strong);border-radius:2px;background:var(--s-tile)}
.selth-b{position:relative;display:inline-flex;align-items:center;padding:4px 5px;border:0;border-left:1px solid var(--s-rule);
  background:transparent;color:var(--s-ink);font:inherit;cursor:pointer}
.selth-b:first-child{border-left:0}
.selth-b:hover{background:var(--s-sunken)}
.selth-b:focus-visible{z-index:1}
.selth-b[aria-pressed="true"]{background:var(--s-pressed);box-shadow:inset 0 -2px 0 var(--s-green)}
.selth-nom{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Échantillons : chacun porte le data-theme de son thème et lit les jetons du
   dock déclarés dans dock.css. Choisir un thème ne les change pas. */
.selth-ech{position:relative;width:30px;height:22px;border-radius:var(--rounded-xs);flex:none;overflow:hidden;background:var(--paper)}
.selth-ech i{position:absolute;left:4px;top:4px;width:9px;height:9px;border-radius:var(--rounded-xs);background:var(--published)}
.selth-ech b{position:absolute;left:16px;top:4px;width:3px;height:8px;background:var(--new)}
.selth-ech u{position:absolute;left:4px;right:4px;bottom:3px;height:3px;background:var(--ink)}
/* Contour de l'échantillon et rayon de son trait : matière du site, pas du dock. */
/* == hors-dock == */
.selth-ech{border:1px solid rgba(35,35,30,.25)}
.selth-ech u{border-radius:1px}
/* == fin hors-dock == */

/* Formulaire « Prévenez-moi » — composants field / form-block du dock */
.form{display:grid;gap:14px}
.champ{display:grid;gap:4px}
.champ label{font-size:13px;font-weight:600;color:var(--s-ink-pale)}
.champ input,.champ select{width:100%;font:inherit;font-size:16px;color:var(--s-ink);background:var(--s-tile);border:1px solid var(--s-rule-strong);border-radius:2px;padding:9px 11px}
.ecart{font-size:13px;color:var(--s-brick);border-left:2px solid var(--s-brick);padding-left:8px;min-height:0}
.ecart:empty{border:0;padding:0}
.rgpd{font-size:12.5px;line-height:1.5;color:var(--s-ink-pale)}
.merci{font-size:14px;color:var(--s-green)}
.bientot{display:inline-block;font-size:12px;font-weight:600;color:var(--s-ink-grey);border:1px dashed var(--s-rule-strong);border-radius:2px;padding:1px 7px;margin-left:6px}

.pied-site{border-top:1px solid var(--s-rule);padding:22px var(--s-gutter) 32px;font-size:13px;color:var(--s-ink-grey);display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center}
/* La signature d'Artère, poussée au bord droit ; elle passe seule à la ligne sur un écran étroit. */
.pied-editeur{margin-left:auto;height:20px;width:auto;opacity:.8}
/* « Pour aller plus loin » (story 17.9) : les pages d'approfondissement, déduites de la table des pages à la construction. */
.plus-loin{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.plus-loin span{font-weight:600}

/* Page d'approfondissement : le fil de retour vers l'étape du récit, et l'envoi final vers le récit et le formulaire. */
.fil{font-size:13px;color:var(--s-ink-grey);margin-bottom:18px}
.fil ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px}
.fil li+li::before{content:"›" / "";margin-right:4px}
.legal .suite-lecture{margin-top:32px}
@media (prefers-reduced-motion:reduce){*{transition-duration:.001ms!important;scroll-behavior:auto!important}}

/* =====================================================================
   DÉMO DU DOCK — reproduction du rendu utilisateur.
   Les couleurs, rayons, durées, ombres et espacements nommés du dock sont des
   propriétés personnalisées nommées comme le jeton du DESIGN.md du dock
   (ux-OkeyDock-2026-08-16), qui fait foi, et déclarées une seule fois, dans la
   zone de jetons ci-dessous. La garde des jetons (outils/garde-jetons.js) les
   compare à ce DESIGN.md à chaque construction. Elle refuse aussi, ailleurs
   dans la démo, toute couleur, durée ou rayon écrit en dur, toute propriété
   personnalisée déclarée sans le préfixe --dk-, et tout var() qui ne désigne
   rien de déclaré. Les longueurs propres aux composants (340px du tiroir,
   34px des boutons, 200px du menu…) restent des littéraux, que rien ne compare.
   Une zone « hors-dock » échappe au balayage entier, quel que soit le motif.
   Une propriété préfixée --dk- est propre à la démo : elle n'est pas comparée.
   Le sélecteur de thème ne change QUE ces variables, jamais la page.
   ===================================================================== */

/* == jetons == */
/* Papier (défaut) : le frontmatter du DESIGN.md fait foi. Les échantillons du
   sélecteur de thème (.selth-ech) lisent les mêmes jetons, par leur data-theme. */
.dk,.selth-ech{
  --paper:#F2F1ED;--paper-sunken:#E9E8E3;--paper-pressed:#DEDDD6;--paper-dimmed:#F7F5F1;
  --slot-empty:#EEEDE8;--tile:#FFFFFF;--rule:#C0BFB6;--rule-strong:#A9A89F;--rule-heavy:#8F8E86;
  --ink:#23231E;--ink-pale:#55554C;--ink-grey:#69695F;
  --published:#1D6350;--published-edge:#17513F;--on-published:#FFFFFF;--mine:#6E5638;
  --new:#8F4A18;--on-new:#FDF1E6;--unavailable:#8E3226;--unavailable-tint:#E8D6D2;--focus:#2E5FA3;
  --announce-surface:#EFE4D8;--announce-rule:#D6BFA6;--announce-ink:#6B3512;--announce-meta:#7A5C40;
}
/* Rayons, espacements, mouvement et composants : valeurs de Papier, communes aux cinq thèmes. */
.dk,.selth-ech{
  --rounded-xs:2px;--rounded-sm:3px;--rounded-md:4px;
  --spacing-hair:2px;--spacing-1:3px;--spacing-2:6px;--spacing-section-gap:16px;--spacing-tile-gap:8px;
  --spacing-bar-padding-x:8px;--spacing-bar-item-padding:6px 10px;--spacing-surface-padding:14px 20px;
  --spacing-header-padding:0 18px 0 10px;--spacing-edge-height:5px;--spacing-bar-height:44px;
  --spacing-surface-header-height:54px;--spacing-surface-inset-x:9%;--spacing-surface-inset-bottom:64px;
  --motion-fade-duration:140ms;--motion-fade-easing:ease-out;--motion-pointer-exit-grace:320ms;--motion-reduced-duration:0.001ms;
  --bar-shadow:0 2px 6px rgba(35,35,30,.16);
  --context-menu-shadow:0 4px 12px rgba(35,35,30,.22);
  --sector-drawer-shadow:0 4px 12px rgba(35,35,30,.22);
  --surface-shadow:0 8px 22px rgba(30,29,26,.30);
  --tile-hover-shadow:0 1px 3px rgba(35,35,30,.14);
  --tile-unavailable-token-hatch-angle:45deg;--tile-unavailable-token-hatch-stripe:1px;--tile-unavailable-token-hatch-step:3px;
}
/* Les quatre autres thèmes : la table « Themes » du DESIGN.md fait foi. */
.dk[data-theme="papier-contraste"],.selth-ech[data-theme="papier-contraste"]{
  --paper:#F3F2EE;--paper-sunken:#E7E6E0;--paper-pressed:#D9D8D0;--paper-dimmed:#F7F5F1;
  --slot-empty:#ECEBE5;--tile:#FFFFFF;--rule:#8F8E86;--rule-strong:#6E6D66;--rule-heavy:#4F4E48;
  --ink:#141412;--ink-pale:#3F3F38;--ink-grey:#56564D;
  --published:#154C3D;--published-edge:#0E3A2E;--on-published:#FFFFFF;--mine:#55421F;
  --new:#7A3B0E;--on-new:#FFF4EA;--unavailable:#7A2519;--unavailable-tint:#E6CFCA;--focus:#1F4F99;
  --announce-surface:#EFE3D5;--announce-rule:#B99A78;--announce-ink:#5A2A0A;--announce-meta:#61452B;
}
.dk[data-theme="encre-de-nuit"],.selth-ech[data-theme="encre-de-nuit"]{
  --paper:#141A23;--paper-sunken:#1C2330;--paper-pressed:#252E3D;--paper-dimmed:#11161D;
  --slot-empty:#19202B;--tile:#1A212C;--rule:#384357;--rule-strong:#4A566C;--rule-heavy:#65718A;
  --ink:#EEF1F6;--ink-pale:#B6BECB;--ink-grey:#8F99A9;
  --published:#62B896;--published-edge:#86CBAF;--on-published:#141A23;--mine:#C2A987;
  --new:#E0925E;--on-new:#1F1107;--unavailable:#F0968A;--unavailable-tint:#46282A;--focus:#9CC0FF;
  --announce-surface:#352C25;--announce-rule:#5A4838;--announce-ink:#F2D3B0;--announce-meta:#CDB39A;
}
.dk[data-theme="nuit-contrastee"],.selth-ech[data-theme="nuit-contrastee"]{
  --paper:#0E0E0D;--paper-sunken:#1C1C1A;--paper-pressed:#2A2A27;--paper-dimmed:#141413;
  --slot-empty:#171716;--tile:#181817;--rule:#6A6960;--rule-strong:#86857B;--rule-heavy:#A5A499;
  --ink:#FAFAF6;--ink-pale:#D8D7CF;--ink-grey:#B3B2A8;
  --published:#74CFA9;--published-edge:#A2E0C5;--on-published:#0E0E0D;--mine:#D4B993;
  --new:#F0A26D;--on-new:#1A0D04;--unavailable:#FF9E90;--unavailable-tint:#55302A;--focus:#8EBBFF;
  --announce-surface:#3D3025;--announce-rule:#6E5741;--announce-ink:#FBDDBB;--announce-meta:#E0C4A6;
}
.dk[data-theme="bureau-d-etudes"],.selth-ech[data-theme="bureau-d-etudes"]{
  --paper:#EDF0F2;--paper-sunken:#E2E6E9;--paper-pressed:#D4DADE;--paper-dimmed:#F3F5F6;
  --slot-empty:#E7EBED;--tile:#FFFFFF;--rule:#B2BAC0;--rule-strong:#99A2A9;--rule-heavy:#7E8890;
  --ink:#1B2126;--ink-pale:#48525A;--ink-grey:#5E6871;
  --published:#1C5E52;--published-edge:#154A40;--on-published:#FFFFFF;--mine:#63523C;
  --new:#8F4A18;--on-new:#FDF1E6;--unavailable:#8E3226;--unavailable-tint:#E6D6D5;--focus:#2A5CB0;
  --announce-surface:#EFE4D8;--announce-rule:#D6BFA6;--announce-ink:#6B3512;--announce-meta:#7A5C40;
}
/* == fin jetons == */

.dk{
  --dk-hachure:repeating-linear-gradient(var(--tile-unavailable-token-hatch-angle),var(--rule-strong) 0 var(--tile-unavailable-token-hatch-stripe),
    transparent var(--tile-unavailable-token-hatch-stripe) var(--tile-unavailable-token-hatch-step));
  --dk-surface-bas:var(--spacing-surface-inset-bottom);
  position:relative;overflow:hidden;isolation:isolate;container:dk / inline-size;
  font:14px/1.5 "Segoe UI",system-ui,sans-serif;color:var(--ink);
  border-radius:var(--rounded-md);user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;
}
.dk *,.dk *::before,.dk *::after{box-sizing:border-box}
.dk button{font:inherit;color:inherit;margin:0}
.dk :focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.dk-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* --- Faux poste Windows : couleurs tierces, neutres, hors thème du dock --- */
/* == hors-dock == */
.dk-bureau{position:absolute;left:0;right:0;bottom:0;top:calc(var(--spacing-edge-height) + 1px);display:flex;flex-direction:column;background:#D9D9D4}
.dk[data-epingle="true"] .dk-bureau{top:calc(var(--spacing-bar-height) + 1px)}  /* épinglée, la barre réserve sa place : la fenêtre recule */
.dk-fen{flex:1;display:flex;flex-direction:column;background:#FFFFFF;min-height:0}
.dk-fen-titre{height:30px;flex:none;background:#F3F3F1;border-bottom:1px solid #E1E1DE;font-size:12px;color:#3C3C38;display:flex;align-items:center;padding:0 12px;white-space:nowrap;overflow:hidden}
.dk-fen-ruban{height:28px;flex:none;background:#FAFAF9;border-bottom:1px solid #E1E1DE;display:flex;align-items:center;gap:18px;padding:0 12px;font-size:11px;color:#6A6A64;white-space:nowrap;overflow:hidden}
.dk-fen-grille{flex:1;background:
  repeating-linear-gradient(to right,#FFFFFF 0 96px,#E6E6E3 96px 97px),
  repeating-linear-gradient(to bottom,#FFFFFF 0 21px,#E6E6E3 21px 22px);background-blend-mode:multiply}
.dk-fen-libre{flex:1;position:relative;min-height:0}
.dk-taches{height:38px;flex:none;background:#E9E9E6;border-top:1px solid #D6D6D2;display:flex;align-items:center;justify-content:center;gap:14px;position:relative}
.dk-taches i{width:18px;height:18px;border-radius:2px;background:#BDBDB8;display:block}
.dk-taches i.on{background:#55606A}
.dk-taches .dk-heure{position:absolute;right:12px;font-size:11px;color:#3C3C38;font-style:normal;text-align:right;line-height:1.25}
/* == fin hors-dock == */

/* --- ① Lisière : une seule couleur sur toute la largeur, aucune information de structure --- */
.dk-lisiere{position:absolute;top:0;left:0;right:0;height:var(--spacing-edge-height);z-index:5;background:var(--rule);
  border-bottom:1px solid var(--rule-strong);border-radius:0 0 var(--rounded-xs) var(--rounded-xs);pointer-events:none}
.dk-lisiere-neuf{position:absolute;top:1px;left:50%;width:7px;height:3px;margin-left:-3.5px;background:var(--new)} /* le point de nouveauté couché */
/* Zone de prise de la démo (liberté : la vraie lisière se survole sur 5 px ; ici on élargit la cible) */
.dk-tirette{position:absolute;top:0;left:0;right:0;height:16px;z-index:5;border:0;background:transparent;cursor:default;padding:0}
@container dk (max-width:640px){.dk-tirette{height:30px}}

/* --- ② Barre dépliée --- */
.dk-barre{position:absolute;top:0;left:2%;right:2%;height:var(--spacing-bar-height);z-index:6;background:var(--paper);
  border:1px solid var(--rule);border-top:none;border-radius:0 0 var(--rounded-sm) var(--rounded-sm);box-shadow:var(--bar-shadow);
  display:flex;align-items:center;padding:0 var(--spacing-bar-padding-x);opacity:0;pointer-events:none;transition:opacity var(--motion-fade-duration) var(--motion-fade-easing)}
.dk-barre[data-etat="deploye"]{opacity:1;pointer-events:auto}
.dk-items{display:flex;align-items:center;gap:var(--spacing-hair);flex:1;min-width:0;overflow-x:auto;overflow-y:hidden;padding:5px 4px;scrollbar-width:none}
.dk-items::-webkit-scrollbar{display:none}
.dk-pu{display:flex;align-items:center;gap:7px;padding:var(--spacing-bar-item-padding);border-radius:var(--rounded-xs);border:0;background:none;
  color:var(--ink);font-size:13px;font-weight:600;line-height:1.5;cursor:pointer;white-space:nowrap;flex:none}
.dk-pu:hover{background:var(--paper-sunken)}
.dk-pu.actif{background:var(--paper-pressed);box-shadow:inset 0 -2px 0 var(--published)}
.dk-jeton-barre{width:14px;height:14px;border-radius:var(--rounded-xs);background:var(--published);flex:none}
.dk-jeton-barre.dk-creux{background:var(--paper);border:1px solid var(--mine)}
.dk-chevron{color:var(--ink-grey);font-size:10px;margin-left:-2px}
.dk-point{display:inline-block;width:4px;height:9px;background:var(--new);flex:none} /* nouveauté : barre verticale 4 × 9, sans anneau */
.dk-droite{display:flex;align-items:center;gap:6px;margin-left:6px;flex:none}
.dk-btn-ico{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--rounded-xs);
  border:1px solid var(--rule-strong);background:var(--paper-sunken);color:var(--ink);cursor:pointer;padding:0}
.dk-btn-ico:hover{background:var(--paper-pressed)}
.dk-btn-ico[aria-pressed="true"]{background:var(--published);border-color:var(--published-edge);color:var(--on-published)}
@container dk (max-width:640px){
  .dk-barre{left:4px;right:4px;padding:0 4px}
  /* == hors-dock == */
  /* Liberté de la démo : le fondu de défilement des secteurs en largeur étroite. Le masque ne lit que l'opacité. */
  .dk-items{-webkit-mask-image:linear-gradient(to right,#000 85%,transparent);mask-image:linear-gradient(to right,#000 85%,transparent);scroll-snap-type:x proximity}
  /* == fin hors-dock == */
  .dk-pu{scroll-snap-align:start}
}

/* Menu de la barre */
.dk-menu{position:absolute;top:calc(var(--spacing-bar-height) + 2px);right:2%;z-index:7;min-width:200px;background:var(--paper);border:1px solid var(--rule-strong);
  border-radius:var(--rounded-sm);box-shadow:var(--context-menu-shadow);padding:var(--spacing-1)}
.dk-menu[hidden],.dk-tiroir[hidden],.dk-surface[hidden]{display:none}
.dk-mi{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:7px 12px;border:0;background:none;border-radius:var(--rounded-xs);
  font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;white-space:nowrap}
.dk-mi:hover{background:var(--paper-sunken)}
.dk-mi .dk-fleche{margin-left:auto;color:var(--ink-grey)}
.dk-mi .dk-coche{width:12px;flex:none;color:var(--published)}
.dk-sousmenu{position:absolute;right:100%;top:0;margin-right:2px;min-width:190px;background:var(--paper);border:1px solid var(--rule-strong);
  border-radius:var(--rounded-sm);box-shadow:var(--context-menu-shadow);padding:var(--spacing-1)}
@container dk (max-width:640px){
  .dk-menu{right:4px;left:auto;max-width:calc(100% - 8px)}
  .dk-sousmenu{position:static;box-shadow:none;border:0;border-top:1px solid var(--rule);border-radius:0;margin:3px 0 0;padding:3px 0 0}
}

/* Bandeau d'annonce : kraft, une seule graisse, collé sous la barre */
.dk-annonce{position:absolute;top:var(--spacing-bar-height);left:2%;right:2%;z-index:6;background:var(--announce-surface);border:1px solid var(--announce-rule);
  border-top:none;border-radius:0 0 var(--rounded-sm) var(--rounded-sm);padding:8px 14px;display:flex;align-items:baseline;gap:10px;
  font-size:12px;line-height:1.45;color:var(--announce-ink)}
.dk-annonce[hidden]{display:none}
.dk-annonce .dk-exp{margin-left:auto;font-size:11px;color:var(--announce-meta);white-space:nowrap}
@container dk (max-width:640px){.dk-annonce{left:4px;right:4px;padding:7px 10px;flex-wrap:wrap}}

/* Tiroir de secteur */
.dk-tiroir{position:absolute;top:50px;left:9%;z-index:7;width:340px;max-height:calc(100% - 100px);overflow:auto;background:var(--paper);
  border:1px solid var(--rule-strong);border-radius:var(--rounded-sm);padding:var(--spacing-2);box-shadow:var(--sector-drawer-shadow)}
@container dk (max-width:640px){.dk-tiroir{left:6px!important;right:6px;width:auto}}
.dk-ligne{display:flex;gap:11px;padding:9px 10px;border-radius:var(--rounded-xs);align-items:flex-start;width:100%;text-align:left;border:0;background:none;cursor:pointer}
.dk-ligne:hover{background:var(--paper-sunken)}
.dk-ligne-txt{display:flex;flex-direction:column;min-width:0}
.dk-n{font-size:13px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.dk-a{font-size:12px;line-height:1.4;color:var(--ink-pale);margin-top:1px}
.dk-pourquoi{font-size:12px;line-height:1.4;color:var(--unavailable);margin-top:3px}
.dk-tiroir-vide{padding:12px 10px;font-size:12px;color:var(--ink-grey)}
.dk-tiroir-aide{margin:4px 10px 4px;font-size:11px;color:var(--ink-grey)}
.dk-badge{background:var(--new);color:var(--on-new);font-size:10px;font-weight:700;letter-spacing:.4px;padding:2px 6px;border-radius:var(--rounded-xs);line-height:1.5}

/* Jetons d'entrée : plein = publié, creux = « Mes accès », hachuré = indisponible */
.dk-jeton{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;border-radius:var(--rounded-sm);
  background:var(--published);color:var(--on-published)}
.dk-jeton svg{position:relative;z-index:1}
.dk-jeton.dk-creux{background:var(--tile);border:1px solid var(--mine);color:var(--mine)}
.dk-tiroir .dk-jeton.dk-creux{background:var(--paper)}
.dk-jeton.dk-eteint{background:var(--paper-sunken) var(--dk-hachure);border:1px solid var(--rule-strong);color:var(--ink-grey)}
.dk-jeton.dk-eteint::before{content:"";position:absolute;inset:2px;background:var(--paper-sunken)} /* couronne de 2 px à 20 px */
.dk-jeton.dk-eteint.dk-j28::before{inset:3px}                                                      /* couronne de 3 px à 28 px */

/* --- ③ Grande surface --- */
.dk-surface{position:absolute;top:0;left:var(--spacing-surface-inset-x);right:var(--spacing-surface-inset-x);bottom:var(--dk-surface-bas);z-index:8;background:var(--paper);
  border:1px solid var(--rule-heavy);border-top:none;border-radius:0 0 var(--rounded-md) var(--rounded-md);box-shadow:var(--surface-shadow);
  display:flex;flex-direction:column;container:surf / inline-size}
@container dk (max-width:640px){.dk-surface{left:2%;right:2%;bottom:min(var(--dk-surface-bas),40px)}}
.dk-tete{height:var(--spacing-surface-header-height);flex:none;display:flex;align-items:center;gap:14px;padding:var(--spacing-header-padding);border-bottom:1px solid var(--rule)}
.dk-croix{width:34px;height:34px;flex:none;border-radius:var(--rounded-xs);border:1px solid var(--rule-strong);background:var(--paper-sunken);color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.dk-croix:hover{background:var(--unavailable-tint);border-color:var(--unavailable);color:var(--unavailable)}
.dk-titre{font-size:16px;font-weight:700;letter-spacing:.2px;color:var(--ink);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dk-echap{margin-left:auto;color:var(--ink-grey);font-size:12px;white-space:nowrap}
.dk-kbd{background:var(--paper-sunken);border:1px solid var(--rule-strong);border-radius:var(--rounded-xs);padding:2px 7px;font-size:11px;color:var(--ink-pale)}
.dk-portee{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 20px;font-size:12px;background:var(--paper-sunken);
  border-bottom:1px solid var(--rule);color:var(--ink-pale)}
.dk-portee b{color:var(--ink)}
.dk-lien{margin-left:auto;background:var(--paper);border:1px solid var(--rule-strong);border-radius:var(--rounded-xs);padding:5px 10px;font-size:12px;font-weight:600;color:var(--ink);cursor:pointer}
.dk-lien:hover{background:var(--paper-pressed)}
.dk-corps{flex:1;overflow:auto;padding:var(--spacing-surface-padding);min-height:0}
.dk-rub{display:flex;align-items:center;gap:9px;margin:0 0 9px;font-size:13px;font-weight:700;color:var(--ink);letter-spacing:.2px}
.dk-rub .dk-trait{flex:1;height:1px;background:var(--rule)}
.dk-marq{width:4px;height:14px;background:var(--published);flex:none}
.dk-marq.dk-creux{background:var(--paper);border:1px solid var(--mine)}
.dk-compte{font-size:11px;font-weight:600;color:var(--ink-grey);letter-spacing:0}
.dk-cases{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--spacing-tile-gap);margin-bottom:var(--spacing-section-gap)}
.dk-cases--large{grid-template-columns:repeat(3,minmax(0,1fr))}
@container surf (max-width:700px){.dk-cases,.dk-cases--large{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container surf (max-width:430px){.dk-cases,.dk-cases--large{grid-template-columns:minmax(0,1fr)} .dk-echap{display:none} .dk-corps{padding:12px} .dk-portee{padding:8px 12px}}
.dk-case{background:var(--tile);border:1px solid var(--rule);border-radius:var(--rounded-sm);padding:12px;display:flex;gap:11px;align-items:flex-start;
  text-align:left;cursor:pointer;width:100%;color:var(--ink)}
.dk-case:hover{border-color:var(--ink-grey);box-shadow:var(--tile-hover-shadow)}
.dk-case .dk-n{font-weight:700}
.dk-case .dk-a{margin-top:3px}
.dk-case.dk-ko{background:var(--paper-dimmed)}
.dk-case.dk-ajout{border-style:dashed}
.dk-case.dk-ajout .dk-n{color:var(--ink-pale)}
.dk-case.dk-ajout .dk-jeton{background:var(--paper-pressed);border:1px solid var(--rule-strong);color:var(--ink-pale)}
.dk-vide{border:1px dashed var(--rule-strong);border-radius:var(--rounded-sm);padding:14px;margin-bottom:var(--spacing-section-gap);color:var(--ink-grey);font-size:12px;text-align:center;background:var(--slot-empty)}
.dk-bloc-mien{border-left:2px solid var(--mine);padding-left:12px;margin-bottom:var(--spacing-section-gap)}
.dk-bloc-mien .dk-cases{margin-bottom:0}
.dk-pied{border-top:1px solid var(--rule);padding:8px 18px;font-size:12px;color:var(--announce-ink);background:var(--announce-surface);flex:none}

/* Bulle de narration de la démo — matière du site, pas du dock */
/* == hors-dock == */
.dk-toast{position:absolute;left:50%;bottom:50px;transform:translateX(-50%);width:max-content;max-width:min(92%,480px);z-index:9;
  background:#23231E;color:#F2F1ED;font-size:12.5px;line-height:1.45;padding:9px 13px;border-radius:3px;opacity:0;pointer-events:none;transition:opacity 140ms ease-out}
.dk-toast.on{opacity:1}
.dk-toast.dk-toast--refus{border-left:3px solid #E8D6D2}
/* == fin hors-dock == */

@media (prefers-reduced-motion:reduce){.dk *{transition-duration:var(--motion-reduced-duration)!important}}

/* =====================================================================
   DIRECTION B, v2 — « LE SCÉNARIO DE KARIM », DEUX CÔTÉS
   Le récit alterne l'outil de publication de Karim et le poste qui reçoit.
   Une seule démo collante, deux faces : on bascule de l'une à l'autre.
   #FFFFFF carte d'étape, feuille de formulaire   #1D6350 filet de l'étape active (vert atelier)
   #8F8E86 filet lourd (bord de la fenêtre d'outil, marqueur « poste »)
   #E8D6D2 teinte brique (fond du refus)          #8E3226 brique (phrase et filet du refus)
   rgba(35,35,30,.28) voile sous la boîte de dialogue de l'outil (encre #23231E à 28 %)

   ANCRAGE — choix retenu : scroll-snap-type: y PROXIMITY, pas mandatory.
   - mandatory ramènerait de force au début d'une section dès qu'on s'arrête
     au milieu : le formulaire « Prévenez-moi » et la liste des interdits, plus
     hauts que l'écran sur mobile, ne pourraient plus être lus d'un trait ;
   - mandatory transforme aussi chaque PageDown en saut d'une section entière,
     ce qui fait « sauter » du texte au lecteur clavier ;
   - proximity ancre quand on s'arrête près d'un début de section, et laisse
     lire librement ailleurs. Le clavier natif (PageUp/PageDown, flèches,
     Espace, Tab) n'est jamais intercepté.
   ===================================================================== */
html{scroll-snap-type:y proximity;scroll-padding-top:var(--haut,0px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
.haut{scroll-snap-align:start}
.tete-site{display:flex;align-items:center;gap:20px;padding:16px var(--s-gutter);border-bottom:1px solid var(--s-rule)}
.tete-site .lien{margin-left:auto;font-size:14px;font-weight:600;color:var(--s-ink)}

.recit{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:0 clamp(24px,3vw,48px);padding:0 calc(var(--s-gutter) + 64px) 0 var(--s-gutter);max-width:1480px;margin:0 auto}
.col-texte{padding:0 0 12vh}
.col-demo{position:relative}
.demo{position:sticky;top:16px;height:calc(100svh - 32px);display:flex;flex-direction:column;gap:8px;padding:12px 0}

/* En-tête de la démo : de quel côté on regarde */
.demo-tete{display:flex;align-items:center;gap:10px;min-height:30px}
.cote{display:flex;align-items:baseline;gap:10px;min-width:0;flex:1;font-size:13px;color:var(--s-ink-pale)}
.cote b{display:inline-flex;align-items:center;gap:8px;color:var(--s-ink);font-size:14px;white-space:nowrap;padding:3px 9px;border:1px solid var(--s-rule-strong);border-radius:2px;background:var(--s-tile)}
.cote-sous{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.marque-cote{display:block;flex:none}
.marque-cote--karim{width:9px;height:9px;background:var(--s-ink);border-radius:1px}
.marque-cote--poste{width:16px;height:5px;background:var(--s-rule);border-bottom:1px solid #8F8E86;border-radius:0 0 2px 2px}
.compteur{font-size:12px;font-weight:600;color:var(--s-ink-grey);white-space:nowrap;font-variant-numeric:tabular-nums}
.etapes-btn{display:none}
.progres{display:none}

/* Les deux faces de la démo, empilées */
.pile{position:relative;flex:1;min-height:0;overflow:clip} /* la face qui glisse ne déborde jamais de la page */
.face{position:absolute;inset:0;transition:opacity 220ms ease-out,transform 220ms ease-out,visibility 0s linear 220ms}
.face[data-actif="false"]{opacity:0;visibility:hidden;pointer-events:none}
.face--karim[data-actif="false"]{transform:translateX(-18px)}
.face--poste[data-actif="false"]{transform:translateX(18px)}
.face[data-actif="true"]{transition-delay:0s}
.face > .scene{position:absolute;inset:0;box-shadow:0 0 0 1px var(--s-rule)}
.demo-outils{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;min-height:38px}
.demo-outils .lbl{font-size:13px;font-weight:600;color:var(--s-ink-pale)}
.themes-poste{display:flex;flex-wrap:nowrap;gap:12px;align-items:center}
.note-karim{font-size:13px;color:var(--s-ink-pale);max-width:70ch}
.note-karim .mono{font-family:"Cascadia Mono",Consolas,monospace;font-size:12px;color:var(--s-ink)}
.demo[data-cote="karim"] .themes-poste,.demo[data-cote="poste"] .note-karim{display:none}

/* Étapes du récit */
.etape{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:40px 0;scroll-snap-align:start}
.etape .carte{border-left:2px solid var(--s-rule);padding:4px 0 4px 22px;transition:border-color 140ms ease-out}
.etape.active .carte{border-left-color:#1D6350}
.num{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:13px;font-weight:700;color:var(--s-ink-grey)}
.pastille{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;padding:2px 8px;border-radius:2px;border:1px solid var(--s-rule-strong);background:var(--s-tile);color:var(--s-ink)}
.pastille i{display:block}
.pastille--karim i{width:8px;height:8px;background:var(--s-ink);border-radius:1px}
.pastille--poste i{width:14px;height:4px;background:var(--s-rule);border-bottom:1px solid #8F8E86}
.pastille--fin i{width:8px;height:8px;border:1.5px solid var(--s-ink);border-radius:50%}
.etape h1{font-size:clamp(36px,4.6vw,60px);line-height:1.05;font-weight:700;letter-spacing:-.6px;margin:10px 0 18px;max-width:13ch}
.etape h2{font-size:clamp(24px,2.5vw,32px);line-height:1.2;font-weight:700;letter-spacing:-.2px;margin:10px 0 14px}
.etape h1:focus:not(:focus-visible),.etape h2:focus:not(:focus-visible){outline:none}
.etape p{margin-bottom:12px;max-width:52ch}
.etape .chapo{font-size:19px}
.etape .petit{font-size:15px;color:var(--s-ink-pale)}
.rejouer{margin-top:8px;display:flex;flex-wrap:wrap;gap:8px}
.suite{font-size:15px;color:var(--s-green);font-weight:600;min-height:0}
.types{list-style:none;padding:0;margin:4px 0 14px;display:flex;flex-wrap:wrap;gap:6px}
.types li{font-size:14px;background:var(--s-tile);border:1px solid var(--s-rule);border-radius:2px;padding:3px 9px}
.interdits{margin:6px 0 14px;padding-left:20px}
.interdits li{margin-bottom:6px}
.citation{font-size:clamp(21px,2.2vw,27px);line-height:1.3;font-weight:700;margin:4px 0 14px;max-width:26ch}
.prevenir{background:var(--s-kraft);border:1px solid var(--s-kraft-rule);border-radius:3px;padding:20px;margin-top:8px}
.prevenir .chez{color:var(--s-kraft-ink);margin-bottom:14px}
.etape--fin{justify-content:flex-start;padding-top:12vh}

/* =====================================================================
   INDICATEUR D'ÉTAPE — à droite, liste verticale de repères.
   Forme du repère = côté : carré = côté Karim (l'outil), barre couchée =
   côté poste (la lisière), rond = la fin. Plein = vue, encre = courante,
   creux = à venir. La forme dit le côté, pas la couleur seule.
   ===================================================================== */
.reperes{position:fixed;right:10px;top:50%;transform:translateY(-50%);z-index:30}
.reperes ol{list-style:none;margin:0;padding:0;position:relative;--prog:0}
.reperes ol::before,.reperes ol::after{content:"";position:absolute;right:14px;top:15px;width:1px}
.reperes ol::before{bottom:15px;background:var(--s-rule-strong)}
.reperes ol::after{height:calc((100% - 30px) * var(--prog));background:var(--s-ink)}
.rp{display:flex;align-items:center;justify-content:flex-end;gap:10px;height:30px;padding:0 6px 0 8px;color:var(--s-ink-pale);text-decoration:none;font-size:13px;font-weight:600;position:relative;border-radius:2px}
.rp-m{width:16px;height:16px;display:flex;align-items:center;justify-content:center;flex:none;position:relative;z-index:1;background:var(--s-paper)}
.rp-m::before{content:"";display:block;border:1.5px solid var(--s-ink-grey);background:var(--s-paper);box-sizing:border-box}
.rp--karim .rp-m::before{width:10px;height:10px;border-radius:1px}
.rp--poste .rp-m::before{width:15px;height:6px;border-radius:0 0 2px 2px}
.rp--fin .rp-m::before{width:9px;height:9px;border-radius:50%}
.rp.fait .rp-m::before{background:var(--s-ink-grey)}
.rp[aria-current="step"] .rp-m::before{background:var(--s-ink);border-color:var(--s-ink);transform:scale(1.3)}
.rp-lib{position:absolute;right:34px;white-space:nowrap;background:var(--s-tile);border:1px solid var(--s-rule);border-radius:2px;padding:2px 8px;color:var(--s-ink);opacity:0;pointer-events:none;transition:opacity 140ms ease-out}
.rp:hover .rp-lib,.rp:focus-visible .rp-lib{opacity:1}
.rp-n{color:var(--s-ink-grey);margin-right:6px;font-variant-numeric:tabular-nums}
.rp-legende{margin:10px 0 0;display:grid;gap:2px;justify-items:end;font-size:11px;color:var(--s-ink-grey)}
.rp-legende span{display:inline-flex;align-items:center;gap:6px}
.rp-legende i{display:block;border:1.5px solid var(--s-ink-grey);box-sizing:border-box;margin-right:4px}
.rp-legende .lk{width:10px;height:10px;border-radius:1px}
.rp-legende .lp{width:15px;height:6px;border-radius:0 0 2px 2px}
@media (min-width:1600px){
  .recit{padding-right:calc(var(--s-gutter) + 210px)}
  .rp-lib{position:static;opacity:1;background:none;border:0;padding:0;color:var(--s-ink-pale)}
  .rp[aria-current="step"] .rp-lib{color:var(--s-ink)}
  .rp:hover .rp-lib{color:var(--s-ink);text-decoration:underline;text-underline-offset:3px}
}

/* =====================================================================
   OUTIL DE PUBLICATION — fenêtre d'administration, thème Papier, toujours.
   Il ne suit pas le sélecteur de thème : il sert à une personne, sur un poste,
   quelques minutes par semaine (DESIGN.md du dock § Administration window).
   Valeurs Papier du DESIGN.md du dock : #F2F1ED papier  #E9E8E3 enfoncé
   #DEDDD6 pressé  #FFFFFF feuille  #C0BFB6 filet  #A9A89F filet fort
   #8F8E86 filet lourd  #23231E encre  #55554C encre pâle  #69695F encre grise
   #1D6350 vert  #17513F son bord  #8E3226 brique  #E8D6D2 teinte brique
   ===================================================================== */
.pb{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--s-paper);border:1px solid #8F8E86;border-radius:4px;overflow:hidden;
  font-size:13px;line-height:1.5;color:var(--s-ink);container:pb / inline-size}
.pb .mono,.pb code{font-family:"Cascadia Mono","Cascadia Code",Consolas,monospace}
.pb-titre{height:30px;flex:none;display:flex;align-items:center;gap:8px;padding:0 12px;background:#FFFFFF;border-bottom:1px solid var(--s-rule);font-size:12px}
.pb-logo{width:12px;height:12px;border-radius:2px;background:var(--s-green)}
.pb-outils{flex:none;display:flex;align-items:center;justify-content:space-between;gap:6px;padding:8px 12px;border-bottom:1px solid var(--s-rule)}
.pb-g{display:flex;gap:6px;align-items:center}
.pb-b{font:inherit;font-size:12px;font-weight:600;line-height:1.5;color:var(--s-ink);background:var(--s-sunken);border:1px solid var(--s-rule-strong);border-radius:2px;
  padding:6px 11px;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.pb-b:hover{background:var(--s-pressed)}
.pb-b--plein{background:var(--s-green);border-color:var(--s-green-edge);color:#FFFFFF}
.pb-b--plein:hover{background:var(--s-green-edge)}
.pb-b[aria-pressed="true"]{background:var(--s-pressed);box-shadow:inset 0 -2px 0 var(--s-green)}
.pb-b[aria-disabled="true"]{cursor:progress}
.pb-b--plat{background:transparent;border-color:transparent;padding:2px 6px}
.pb-canal{flex:none;padding:5px 12px;font-size:12px;color:var(--s-ink-pale);background:var(--s-sunken);border-bottom:1px solid var(--s-rule)}
.pb-canal code{font-size:11.5px;color:var(--s-ink)}
.pb-corps{flex:1;min-height:0;display:flex}
.pb-arbre{width:228px;flex:none;border-right:1px solid var(--s-rule);overflow:auto;display:flex;flex-direction:column}
.pb-ajouts{padding:8px 10px;display:grid;gap:3px;border-bottom:1px solid var(--s-rule)}
.pb-ajouts .pb-b{justify-content:flex-start}
.pb-arbre ul{list-style:none;margin:0;padding:0}
.pb-arbre > ul{padding:4px 0}
.pb-ligne{display:flex;align-items:center;gap:8px;min-height:26px;padding:2px 10px;width:100%;border:0;background:none;font:inherit;font-size:12.5px;text-align:left;color:var(--s-ink)}
button.pb-ligne{cursor:pointer}
button.pb-ligne:hover{background:var(--s-sunken)}
.pb-ligne--secteur{font-weight:700}
.pb-ligne--app{padding-left:28px;font-weight:600}
.pb-ligne--inerte{font-weight:400;color:var(--s-ink-grey);font-size:12px}
.pb-ligne[aria-current="true"]{background:var(--s-pressed)}
.pb-txt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pb-marq{width:4px;height:14px;background:var(--s-green);flex:none}
.pb-marq--creux{background:transparent;border:1px solid var(--s-ink-grey)}
.pb-fin{margin-left:auto;font-size:11px;font-weight:600;color:var(--s-ink-grey);display:inline-flex;gap:4px;align-items:center;white-space:nowrap;flex:none}
.pb-fin--meta{font-weight:400}
.pb-refusee{color:var(--s-brick)}
.pb-sep{border-top:1px solid var(--s-rule);margin:6px 10px}
.pb-jeton{display:inline-flex;align-items:center;justify-content:center;flex:none;border-radius:3px;background:var(--s-green);color:#FFFFFF}
.pb-jeton--28{width:28px;height:28px}
.pb-editeur{flex:1;min-width:0;overflow:auto;padding:12px 16px 16px}
.pb-fil{display:none;font-size:12px;color:var(--s-ink-pale);margin-bottom:6px}
.pb-entete{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.pb-entete h3{margin:0;font-size:15px;font-weight:700;line-height:1.3;overflow-wrap:anywhere}
.pb-sur{font-size:12px;color:var(--s-ink-pale);margin:0}
.pb-bloc{background:#FFFFFF;border:1px solid var(--s-rule);border-radius:3px;padding:12px 14px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 14px}
.pb-bloc.ecart{border-left:2px solid var(--s-brick)}
.pb-plein{grid-column:1 / -1}
.pb-champ{display:flex;flex-direction:column;gap:3px;min-width:0}
.pb-champ label,.pb-lib{font-size:12.5px;font-weight:600;color:var(--s-ink-grey)}
.pb-saisie{font:inherit;font-size:12.5px;color:var(--s-ink);background:#FFFFFF;border:1px solid var(--s-rule-strong);border-radius:2px;padding:6px 9px;width:100%;min-height:32px}
textarea.pb-saisie{resize:vertical;line-height:1.45}
.pb-saisie[readonly]{background:var(--s-sunken);color:var(--s-ink-grey)}
.pb-aide{font-size:12px;color:var(--s-ink-pale);margin:0}
.pb-refus{grid-column:1 / -1;display:flex;gap:8px;align-items:flex-start;font-size:12px;line-height:1.4;color:var(--s-brick)}
.pb-refus:not(:empty){background:#E8D6D2;border:1px solid var(--s-brick);border-radius:3px;padding:7px 10px}
.pb-refus svg{flex:none;margin-top:1px}
.pb-code{grid-column:1 / -1;font-family:"Cascadia Mono",Consolas,monospace;font-size:11px;color:var(--s-ink-grey);margin:-6px 0 0}
.pb-code:empty{display:none}
.pb-refus:empty{margin:0 0 -10px}
.pb-segments{display:inline-flex;flex-wrap:wrap;border:1px solid var(--s-rule-strong);border-radius:2px;background:var(--s-sunken);align-self:flex-start}
.pb-seg{font:inherit;font-size:12px;font-weight:600;color:var(--s-ink);background:transparent;border:0;border-left:1px solid var(--s-rule);padding:6px 12px;cursor:pointer}
.pb-seg:first-child{border-left:0}
.pb-seg[aria-checked="true"]{background:var(--s-pressed);box-shadow:inset 0 -2px 0 var(--s-green)}
.pb-icone{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pb-gris{font-size:12px;color:var(--s-ink-grey)}
.pb-sids{list-style:none;margin:0;padding:5px;background:#FFFFFF;border:1px solid var(--s-rule-strong);border-radius:2px;display:flex;flex-wrap:wrap;gap:5px;min-width:0}
.pb-sids li.vide{font-size:12px;color:var(--s-ink-pale);padding:2px 3px}
/* Pastille « nom · identifiant » : l'identifiant est tronqué au milieu ; la pastille passe à la ligne avant de rogner le nom, qui ne s'abrège que seul sur une ligne plus étroite que lui (jamais sous 12 caractères aux largeurs servies) */
.pb-pastille{display:inline-flex;align-items:center;flex-wrap:wrap;gap:0 6px;max-width:100%;min-width:0;background:var(--s-sunken);border:1px solid var(--s-rule-strong);border-radius:2px;padding:2px 2px 2px 7px;font-size:12px;line-height:1.5}
.pb-p-nom{font-weight:600;color:var(--s-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:100%}
.pb-p-sid{font-family:"Cascadia Mono",Consolas,monospace;font-size:11.5px;color:var(--s-ink-grey);white-space:nowrap}
.pb-p-sid::before{content:"· ";color:var(--s-ink-pale)}
.pb-pastille--perdu .pb-p-nom{font-weight:400;font-style:italic;color:var(--s-ink-grey)}
.pb-pastille .pb-b{padding:0 5px;line-height:1.4;font-size:13px}
.pb-perdu{font-size:12px;color:var(--s-ink-grey);margin:0}
.pb-perdu:empty{display:none}
.pb-code--groupes{margin:0}
/* Annuaire injoignable : l'identifiant d'abord, le nom en doute ensuite */
.pb-p-sid.pb-p-premier::before{content:none}
.pb-pastille--doute .pb-p-nom,.pb-puce .pb-p-nom.pb-p-second{font-weight:400;font-style:italic;color:var(--s-ink-grey)}
/* Bascule propre à la démo : elle simule un annuaire qui ne répond pas */
.pb-bascule{display:grid;gap:2px;border:1px dashed var(--s-rule-strong);background:var(--s-sunken);border-radius:3px;padding:6px 10px}
.pb-bascule label{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--s-ink);cursor:pointer}
.pb-bascule input{margin:0}
.pb-chercher{border:1px dashed var(--s-rule-strong);background:var(--s-sunken);border-radius:3px;padding:10px;display:grid;gap:7px}
.pb-resoudre{display:flex;gap:6px;min-width:0}
.pb-resoudre .pb-saisie{flex:1;min-width:0;width:auto}
.pb-resoudre .pb-b{flex:none}
.pb-q-refus{font-size:12px;color:var(--s-brick);margin:0}
.pb-q-refus:empty{display:none}
.pb-etat{flex:none;display:flex;align-items:center;gap:8px;min-height:32px;padding:5px 12px;margin:0;border-top:1px solid var(--s-rule);background:var(--s-sunken);font-size:12px;line-height:1.4;color:var(--s-ink)}
.pb-etat svg{flex:none}
.pb-etat--ok svg,.pb-etat--publie svg{color:var(--s-green)}
.pb-etat--publie{color:var(--s-green);font-weight:600}
.pb-etat--ko{color:var(--s-brick)}
/* Ligne d'information sous le verdict : elle ne le change pas */
.pb-etat-info{flex:none;margin:0;padding:0 12px 5px 34px;background:var(--s-sunken);font-size:12px;line-height:1.4;color:var(--s-ink-grey)}
.pb-etat-info:empty{display:none}
/* Aperçu : remplace l'arbre et l'éditeur par la grande surface du dock, vue d'un groupe */
.pb-apercu{flex:1;min-height:0;display:flex;flex-direction:column}
.pb-apercu-barre{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:8px 12px;background:var(--s-sunken);border-bottom:1px solid var(--s-rule)}
.pb-intitule{font-size:13px;font-weight:700}
.pb-puces{display:flex;flex-wrap:wrap;gap:6px}
.pb-puce{font:inherit;font-size:12px;font-weight:600;color:var(--s-ink);background:#FFFFFF;border:1px solid var(--s-rule-strong);border-radius:2px;padding:2px 8px;cursor:pointer;display:inline-flex;flex-wrap:wrap;gap:0 6px;max-width:100%;text-align:left}
.pb-puce .pb-p-sid{font-weight:400}
.pb-puce[aria-pressed="true"]{border-color:var(--s-ink);box-shadow:inset 0 -2px 0 var(--s-green)}
.pb-retour{margin-left:auto}
.pb-apercu-mention{flex:none;font-size:12px;color:var(--s-ink-pale);padding:5px 12px;margin:0;border-bottom:1px solid var(--s-rule)}
.pb-rappel{color:var(--s-ink);font-weight:600}
.pb-rappel .pb-sid-c{font-family:"Cascadia Mono",Consolas,monospace;font-size:11.5px;font-weight:400;color:var(--s-ink-grey)}
.pb-apercu-cadre{flex:1;min-height:0;padding:12px 16px 0;background:var(--s-pressed);display:flex}
#pb-apercu-scene{flex:1;min-height:0;border-radius:var(--rounded-md) var(--rounded-md) 0 0}
#pb-apercu-scene .dk-bureau,#pb-apercu-scene .dk-lisiere,#pb-apercu-scene .dk-tirette,#pb-apercu-scene .dk-barre,#pb-apercu-scene .dk-annonce,
#pb-apercu-scene .dk-tiroir,#pb-apercu-scene .dk-menu,#pb-apercu-scene .dk-toast,#pb-apercu-scene .dk-croix,#pb-apercu-scene .dk-echap,
#pb-apercu-scene .dk-pied,#pb-apercu-scene .dk-bloc-mien{display:none!important}
#pb-apercu-scene .dk-surface{left:0;right:0;top:0;bottom:0;box-shadow:none;border-top:1px solid var(--rule-heavy);border-radius:var(--rounded-md) var(--rounded-md) 0 0}
#pb-apercu-scene .dk-tete{padding-left:18px}
/* Boîte de dialogue : la clé de signature */
.pb-dialogue{position:absolute;inset:0;z-index:5;background:rgba(35,35,30,.28);display:flex;align-items:center;justify-content:center;padding:16px}
.pb-boite{background:var(--s-paper);border:1px solid #8F8E86;border-radius:4px;box-shadow:0 4px 12px rgba(35,35,30,.22);padding:16px 18px;max-width:380px;display:grid;gap:10px}
.pb-boite h3{margin:0;font-size:15px;font-weight:700}
.pb-boite p{margin:0}
.pb-actions{display:flex;justify-content:flex-end;gap:6px;flex-wrap:wrap;margin-top:4px}
@container pb (max-width:600px){
  .pb-titre,.pb-canal,.pb-arbre,.pb-deco{display:none}
  .pb-outils{justify-content:flex-end;padding:6px 8px}
  .pb-fil{display:block}
  .pb-editeur{padding:10px}
  .pb-bloc{grid-template-columns:minmax(0,1fr);padding:10px}
  .pb-entete{margin-bottom:6px}
  .pb-apercu-mention{padding:4px 8px}
  .pb-apercu-calcul{display:none}
  .pb-apercu-cadre{padding:8px 8px 0}
  .pb-intitule,.pb-retour{display:none}
  .pb-apercu-barre{padding:6px 8px}
}

/* =====================================================================
   MOBILE — la démo colle en haut, le texte défile dessous.
   L'indicateur devient : une barre fine segmentée (segment haut = Karim,
   bas = poste) + le compteur + un bouton « Étapes » qui ouvre la liste.
   ===================================================================== */
@media (max-width:900px){
  .recit{grid-template-columns:minmax(0,1fr);padding:0}
  .col-demo{order:-1;position:sticky;top:0;z-index:20;background:var(--s-paper);border-bottom:1px solid var(--s-rule)}
  .demo{position:static;height:auto;padding:8px 12px 8px;gap:6px}
  .demo-tete{min-height:36px}
  .cote{display:block;min-width:0}
  .cote b{font-size:13px;padding:2px 8px}
  .cote-sous{display:none}
  .etapes-btn{display:inline-flex;min-height:36px}
  .progres{display:flex;align-items:flex-end;gap:2px;height:6px}
  .progres span{flex:1;background:var(--s-rule)}
  .progres span.k{height:6px}
  .progres span.p{height:3px}
  .progres span.fait,.progres span.ici{background:var(--s-ink)}
  .progres span.fait{opacity:.55}
  .pile{flex:none;height:max(280px,40svh)}
  .demo-outils{min-height:34px}
  .demo-outils .lbl{display:none}
  .note-karim .long{display:none}
  .col-texte{padding:0 var(--s-gutter) 10vh}
  .etape{min-height:calc(100svh - var(--haut,0px));justify-content:flex-start;padding:28px 0}
  .etape--fin{padding-top:28px}
  .etape h1{font-size:34px}
  .etape .chapo{font-size:17px}
  .reperes{display:none;top:var(--pop-haut,60px);left:var(--s-gutter);right:var(--s-gutter);transform:none;z-index:40;background:var(--s-paper);
    border:1px solid var(--s-rule-strong);border-radius:3px;box-shadow:0 4px 12px rgba(35,35,30,.22);padding:6px;max-height:min(70svh,520px);overflow:auto}
  .reperes[data-ouvert="true"]{display:block}
  .reperes ol::before,.reperes ol::after{display:none}
  .rp{flex-direction:row-reverse;justify-content:flex-end;height:auto;min-height:40px;padding:4px 8px}
  .rp-lib{position:static;opacity:1;background:none;border:0;padding:0;white-space:normal}
  .rp[aria-current="step"]{background:var(--s-sunken)}
  .rp-legende{justify-items:start;padding:6px 8px 2px;border-top:1px solid var(--s-rule);margin-top:4px;grid-auto-flow:column;justify-content:start;gap:14px}
}
@media (prefers-reduced-motion:reduce){
  .face{transition:none!important}
  .face[data-actif="false"]{transform:none}
}

/* =====================================================================
   PAGES DE PROSE — mentions légales, politique de confidentialité et pages
   d'approfondissement. Leur typographie est celle du DESIGN.md de la
   vitrine, § « Pages de prose » et composant vignette (story 17.11).
   outils/vignettes.test.js compare à leur jeton la taille, l'interligne, la
   graisse et l'espacement des lettres du titre et des intertitres, la taille
   et l'interligne du chapeau et de la légende, et le cadre de la vignette ;
   les marges sont écrites au DESIGN.md sans être comparées.
   ===================================================================== */
.legal{max-width:72ch;margin:0 auto;padding:40px var(--s-gutter) 64px}
/* Titre : {typography.display-prose}, puis {typography.display-mobile} sous 900 px. */
.legal h1{font-size:clamp(34px, 3.4vw, 48px);line-height:1.05;font-weight:700;letter-spacing:-0.6px;margin:0 0 16px}
/* Intertitres : {typography.headline}. */
.legal h2{font-size:clamp(24px, 2.5vw, 32px);line-height:1.2;font-weight:700;letter-spacing:-0.2px;margin:40px 0 10px}
.legal p{margin:0 0 10px}
.legal ul{margin:0 0 10px;padding-left:20px}
.legal li{margin-bottom:4px}
/* Chapeau : {typography.lead}, puis {typography.lead-mobile} sous 900 px. */
.legal .chapo{font-size:19px;line-height:1.6;color:var(--s-ink-pale);margin-bottom:8px}
.legal .maj{margin-top:32px;font-size:13px;color:var(--s-ink-grey)}
@media (max-width:900px){
  .legal h1{font-size:34px}
  .legal .chapo{font-size:17px}
}

/* --- Vignette : {components.vignette} ---------------------------------------
   Le dock lui-même, ou l'outil de publication, à l'arrêt : du HTML statique
   produit à la construction (outils/vignettes.js) avec les classes de la
   démo. Ces règles ne font que remettre dans le flux ce que la démo pose en
   absolu dans sa scène, et retirer ce qui répond au pointeur ; dock.css et
   page.css restent tels quels. */
.vignette{margin:24px 0 32px}
.vignette-cadre{border:1px solid var(--s-rule);border-radius:4px;background:var(--s-paper);padding:16px;overflow:hidden}
.vignette-cadre--barre{padding-top:0}
.vignette figcaption{margin-top:8px;font-size:15px;line-height:1.6;color:var(--s-ink-pale)}
/* La barre : posée à plat, sans ombre, coupée à droite par le masque de la démo, sans défilement. */
.vignette .dk{user-select:text;-webkit-user-select:text}
.vignette .dk-barre{position:relative;top:auto;left:auto;right:auto;margin:0 2%;opacity:1;pointer-events:none;box-shadow:none;transition:none}
.vignette .dk-items{margin:0;padding:5px 4px;list-style:none;overflow:hidden}
.vignette .dk-pu{margin:0;cursor:default}
/* Le bandeau d'annonce (story 17.12) : collé sous la barre, au même retrait, remis dans le flux ; son texte passe à la ligne à toute largeur, et sous 640 px la règle @container de la démo fait passer la date dessous. */
.vignette .dk-annonce{position:relative;top:auto;left:auto;right:auto;margin:0 2%}
/* L'outil : une fenêtre dans le flux, sans le carré vert de sa barre de titre. */
.vignette .pb{position:relative;inset:auto}
/* La fenêtre de la vignette reste sous 600 px : la règle @container pb de page.css retirerait son titre. */
.vignette .pb-titre{display:flex}
.vignette .vignette-pb-corps{padding:12px 14px;display:grid;gap:8px}
.vignette .vignette-pb-fiche{margin:0;font-size:15px;font-weight:700;line-height:1.3}
.vignette .pb-sids{margin:0;padding:5px}
.vignette .pb-pastille{margin:0}
/* Un champ de formulaire (story 17.12) : sa valeur est du texte dans le cadre d'une saisie, jamais un contrôle. */
.vignette .vignette-valeur{margin:0;line-height:1.45;overflow-wrap:anywhere}
/* Le tiroir d'un secteur (story 17.13) : remis dans le flux, au retrait de 9 % de la démo, 340 px au plus, sans ombre. Ses lignes sont du texte, avec le jeton de 20 px que la démo pose en style, et ne réagissent pas au survol. */
.vignette .dk-tiroir{position:static;top:auto;left:auto;margin:0 0 0 9%;width:auto;max-width:340px;max-height:none;overflow:visible;box-shadow:none}
.vignette .dk-ligne{cursor:default;background:none}
.vignette .dk-jeton{width:20px;height:20px}
/* Quand le dock mesure 640 px ou moins, le tiroir prend la largeur disponible à 6 px des bords, comme dans la démo. */
@container dk (max-width:640px){.vignette .dk-tiroir{margin:0 6px;max-width:none}}