/* ═══════════════════════════════════════════════════════════════════════════
   LA COQUILLE — flanc, barre haute, toile, en-tête de page. structure.md §5.

   Le geste de la barre : l'application est une CARTE FLOTTANTE sur un fond gris,
   la toile porte un LAVIS vertical, et les panneaux flottent dessus. On ne borde
   pas : on sépare par la teinte et l'élévation.

   Aucune valeur brute — tout vient de tokens.css.
   ═══════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

/* Un <button> porte un padding par defaut (1px 6px sous Chrome). Sur un bouton
   DIMENSIONNE qui centre son icone par grille, ce padding retrecit la zone de
   contenu sous la taille de l'icone — et une icone plus large que sa zone ne se
   centre plus : elle deborde vers la droite de la moitie de la difference. La
   croix d'une etiquette etait decalee de 3 px, soit exactement (14 - 8) / 2.
   Chaque bouton du systeme declare son propre padding ; ce reset ne fait que
   retirer celui que personne n'a demande. Voir structure.md §141.3.10. */
button { padding: 0; }

body {
  margin: 0;
  background: var(--voile);
  padding: var(--e-4);
  /* La PAGE ne defile pas : c'est la coquille qui remplit la fenetre, et ce sont
     le flanc et la toile qui defilent chacun chez eux. Sans ca, un `sticky` dans
     un `.app` en `overflow: hidden` ne colle a rien — l'ancetre en overflow
     devient le conteneur de defilement, et comme il ne defile pas, rien ne colle. */
  height: 100vh;
  height: 100dvh;      /* mobile : la barre d'adresse ne rogne plus la coquille */
  overflow: hidden;
  font-family: var(--police);
  font-size: var(--t-corps);
  line-height: var(--i-texte);
  color: var(--encre);
  -webkit-font-smoothing: antialiased;
}
@media (max-width: 60rem) { body { padding: 0; } }

/* Le lien de saut : invisible jusqu'au focus clavier. §81 */
.saut {
  position: absolute; left: var(--e-4); top: var(--e-4); z-index: 200;
  transform: translateY(-200%);
  background: var(--surface); color: var(--encre);
  padding: var(--e-3) var(--e-4); border-radius: var(--r-controle);
  box-shadow: var(--ombre-2); text-decoration: none;
}
.saut:focus-visible { transform: none; }

.app {
  display: grid;
  grid-template-columns: var(--flanc) minmax(0, 1fr);
  height: 100%;
  background: var(--fond);
  border-radius: calc(var(--r-carte) + 6px);
  overflow: hidden;
  box-shadow: var(--ombre-3);
  transition: grid-template-columns var(--duree) var(--courbe);
}
.flanc-replie .app { grid-template-columns: var(--flanc-replie) minmax(0, 1fr); }
@media (max-width: 60rem) {
  body .app { grid-template-columns: minmax(0, 1fr); border-radius: 0; height: 100%; }
}

/* ─────────────────────────────────────────────────────────── flanc · §5.1 */

.flanc {
  display: flex; flex-direction: column;
  background: var(--surface);
  padding: var(--e-4) var(--e-3);
  /* Fixe par construction : il occupe toute la hauteur de la coquille et defile
     dans son propre cadre. Aucun `sticky`, donc rien a recalculer. */
  height: 100%; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;   /* arrive en bas du flanc, la toile ne part pas */
}

@media (max-width: 60rem) {
  .flanc {
    position: fixed; inset: 0 auto 0 0; z-index: 60; width: 17rem;
    transform: translateX(-102%); transition: transform var(--duree) var(--courbe);
    box-shadow: var(--ombre-3); height: 100%;
  }
  .flanc.est-ouvert { transform: none; }
}

.marque {
  display: flex; align-items: center; gap: var(--e-3);
  text-decoration: none; color: inherit;
  padding: var(--e-2); border-radius: var(--r-carte);
  margin-bottom: var(--e-3);
}
.marque__pastille {
  width: 2.5rem; height: 2.5rem; flex: none;
  display: grid; place-items: center;
  background: var(--lavis-accent); color: var(--accent);
  border-radius: var(--r-controle);
}
.marque__texte { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.marque__texte strong { font-size: var(--t-sous); font-weight: var(--g-fort); }
.marque__texte span   { font-size: var(--t-menu); color: var(--encre-douce); }

/* Sélecteur d'espace de travail — §5.1 */
.atelier-select {
  display: flex; align-items: center; gap: var(--e-2);
  width: 100%; min-height: var(--cible);
  padding: var(--e-2); margin-bottom: var(--e-3);
  background: var(--creuse); border: 0; border-radius: var(--r-controle);
  color: var(--encre); font: inherit; font-size: var(--t-menu); cursor: pointer;
  transition: background var(--duree) var(--courbe);
}
.atelier-select:hover { background: var(--lavis-neutre); }
.atelier-select__nom { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }

.nav__famille {
  margin: var(--e-4) 0 var(--e-1); padding: 0 var(--e-3);
  font-size: var(--t-menu); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--encre-faible);
}

.nav__lien {
  display: flex; align-items: center; gap: var(--e-3);
  min-height: var(--cible); padding: 0 var(--e-3);
  border-radius: var(--r-puce);
  color: var(--encre-douce); text-decoration: none;
  font-size: var(--t-corps);
  transition: background var(--duree) var(--courbe), color var(--duree) var(--courbe);
}
.nav__lien:hover { background: var(--creuse); color: var(--encre); }
.nav__texte { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav__num {
  font-size: var(--t-menu); color: var(--encre-faible);
  font-variant-numeric: tabular-nums;
}

/* L'état actif est un LAVIS. Pas une bordure, pas un fond plein. */
.nav__lien.est-actif {
  background: var(--lavis-accent);
  color: var(--encre);
  font-weight: var(--g-moyen);
}
.nav__lien.est-actif svg { color: var(--accent); }
.nav__lien[hidden] { display: none; }

.nav__vide { padding: var(--e-4) var(--e-3); color: var(--encre-faible); font-size: var(--t-menu); }

.flanc__pied { margin-top: var(--e-5); padding-top: var(--e-3); border-top: 1px solid var(--ligne); }

/* Flanc replié — icônes seules. §5.1 « icon-only » */
.flanc-replie .flanc { padding-left: var(--e-2); padding-right: var(--e-2); }
.flanc-replie .marque__texte,
.flanc-replie .nav__famille,
.flanc-replie .nav__texte,
.flanc-replie .nav__num,
.flanc-replie .atelier-select__nom,
.flanc-replie .atelier-select > svg { display: none; }
.flanc-replie .nav__lien,
.flanc-replie .atelier-select { justify-content: center; padding: 0; }
@media (max-width: 60rem) {
  .flanc-replie .marque__texte, .flanc-replie .nav__famille,
  .flanc-replie .nav__texte, .flanc-replie .nav__num { display: revert; }
  .flanc-replie .nav__lien { justify-content: flex-start; padding: 0 var(--e-3); }
}

/* ─────────────────────────────────────────────────────── barre · §5.2 */

.colonne { display: flex; flex-direction: column; min-width: 0; height: 100%; overflow: hidden; }

.barre {
  display: flex; align-items: center; gap: var(--e-2);
  padding: var(--e-3) var(--e-4);
  background: var(--fond);
  flex: none; z-index: 20;   /* hors du defileur : elle tient sans `sticky` */
}

.fil { display: flex; align-items: center; gap: var(--e-1); min-width: 0; flex: 1; }
.fil__racine { font-size: var(--t-menu); color: var(--encre-faible); text-decoration: none; }
a.fil__racine:hover { color: var(--encre); }
.fil__sep { color: var(--encre-faible); display: inline-flex; }
.fil__feuille {
  font-size: var(--t-corps); font-weight: var(--g-moyen);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 48rem) { .fil__racine, .fil__sep { display: none; } }

.recherche {
  display: flex; align-items: center; gap: var(--e-2);
  background: var(--surface); border: 0; border-radius: var(--r-puce);
  padding: 0 var(--e-2) 0 var(--e-3); height: var(--cible);
  color: var(--encre-faible); font: inherit; font-size: var(--t-menu); cursor: pointer;
  transition: background var(--duree) var(--courbe);
}
.recherche:hover { background: var(--creuse); color: var(--encre); }
.recherche span { min-width: 9rem; text-align: left; }
@media (max-width: 68rem) { .recherche span, .recherche kbd { display: none; } }
@media (max-width: 68rem) { .recherche { padding: 0; width: var(--cible); justify-content: center; } }

kbd {
  font: inherit; font-size: var(--t-menu);
  background: var(--creuse); color: var(--encre-douce);
  border-radius: 6px; padding: 2px 6px;
}

.densite { display: flex; background: var(--surface); border-radius: var(--r-puce); padding: 3px; }
.densite button {
  width: 2rem; height: 2rem; border: 0; border-radius: var(--r-puce);
  background: none; color: var(--encre-faible); cursor: pointer;
  font: inherit; font-size: var(--t-menu); font-weight: var(--g-moyen);
  transition: background var(--duree) var(--courbe), color var(--duree) var(--courbe);
}
.densite button:hover { color: var(--encre); }
.densite button.est-actif { background: var(--lavis-accent); color: var(--accent); }
@media (max-width: 60rem) { .densite { display: none; } }

.rond {
  position: relative;
  width: var(--cible); height: var(--cible); flex: none;
  display: grid; place-items: center;
  border: 0; border-radius: var(--r-puce);
  background: var(--surface); color: var(--encre-douce);
  cursor: pointer;
  transition: background var(--duree) var(--courbe), color var(--duree) var(--courbe);
}
.rond:hover { background: var(--creuse); color: var(--encre); }
.rond--avatar { background: none; }
.rond--menu { display: none; }
.rond--replier { display: grid; }
@media (max-width: 60rem) {
  .rond--menu { display: grid; }
  .rond--replier { display: none; }
}

.pastille-notif {
  position: absolute; top: 6px; right: 6px;
  min-width: 1.05rem; height: 1.05rem; padding: 0 3px;
  display: grid; place-items: center;
  background: var(--danger-plein); color: var(--sur-danger);
  border-radius: var(--r-puce);
  font-size: 0.625rem; font-weight: var(--g-fort);
  box-shadow: 0 0 0 2px var(--fond);
}

/* ────────────────────────────────────────────────────────────── toile */

.toile { position: relative; flex: 1; min-width: 0; min-height: 0; overflow: hidden; }

/* Le defileur. Le lavis vit au-dessus de lui, donc il tapisse la toile et ne
   glisse pas avec le contenu : le lavis appartient au cadre, pas au document. */
.toile__defile {
  position: relative; height: 100%;
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
}

/* LE GESTE DE LA BARRE : un lavis vertical, et les panneaux flottent dessus. */
.toile__lavis {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,
      var(--lavis-accent) 0%, var(--lavis-alerte) 34%,
      var(--lavis-temp-2) 62%, var(--lavis-danger) 100%);
  opacity: 0.5;
  mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 92%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 92%);
}

.toile__corps { position: relative; padding: var(--e-4) var(--e-5) var(--e-8); max-width: 82rem; }
.toile__corps--large { max-width: none; }
@media (max-width: 48rem) { .toile__corps { padding: var(--e-4) var(--e-4) var(--e-7); } }

/* ────────────────────────────────────────────── en-tête de page · §5.3 */

.entete { margin-bottom: var(--e-6); }
.entete__haut { display: flex; align-items: flex-start; gap: var(--e-4); flex-wrap: wrap; }
.entete__titre { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; flex: 1; min-width: 0; }
.entete__titre h1 {
  margin: 0; font-family: var(--police-titre);
  font-size: var(--t-geant); font-weight: var(--g-fort);
  line-height: var(--i-serre); letter-spacing: -0.025em;
}
.entete__actions { display: flex; gap: var(--e-2); flex-wrap: wrap; }
.entete__chapeau { margin: var(--e-3) 0 0; max-width: 52rem; color: var(--encre-douce); font-size: var(--t-sous); }
.entete__meta {
  display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4);
  margin: var(--e-3) 0 0; padding: 0; list-style: none;
  font-size: var(--t-menu); color: var(--encre-faible);
}
.entete__meta li { display: flex; align-items: center; gap: var(--e-2); }
.entete__meta li + li::before { content: ''; width: 3px; height: 3px; border-radius: 50%; background: currentColor; }

/* ────────────────────────────────────────── blocs d'une page de doc */

.bloc { margin-bottom: var(--e-6); }
.bloc__titre {
  margin: 0 0 var(--e-2); font-family: var(--police-titre);
  font-size: var(--t-section); font-weight: var(--g-moyen); letter-spacing: var(--chasse-sous);
}
.bloc__note { margin: 0 0 var(--e-3); max-width: 52rem; color: var(--encre-douce); }

.scene { background: var(--surface); border-radius: var(--r-carte); padding: var(--p-carte); box-shadow: var(--ombre-1); }
.scene--repos { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; }
.scene--grille { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
.scene--large  { grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); }
.scene--plein  { display: block; }

.cellule { display: flex; flex-direction: column; gap: var(--e-2); min-width: 0; }
.cellule__nom { font-size: var(--t-menu); letter-spacing: 0.04em; text-transform: uppercase; color: var(--encre-faible); }
.cellule__corps { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; }

.dodont { display: grid; gap: var(--e-3); grid-template-columns: 1fr 1fr; }
@media (max-width: 48rem) { .dodont { grid-template-columns: 1fr; } }
.dodont__cote { border-radius: var(--r-carte); padding: var(--e-4); }
.dodont__cote--bon     { background: var(--lavis-ok); }
.dodont__cote--mauvais { background: var(--lavis-danger); }
.dodont__etiq { font-size: var(--t-menu); letter-spacing: 0.04em; text-transform: uppercase; color: var(--encre-douce); }
.dodont__scene {
  background: var(--surface); border-radius: var(--r-controle);
  padding: var(--e-4); margin: var(--e-2) 0;
  display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center;
}
.dodont__cote p { margin: 0; font-size: var(--t-corps); color: var(--encre); }

.contrat { background: var(--surface); border-radius: var(--r-carte); padding: var(--e-4); box-shadow: var(--ombre-1); }
.jamais { margin-top: var(--e-4); background: var(--creuse); border-radius: var(--r-controle); padding: var(--e-3) var(--e-4); }
.jamais__titre { font-size: var(--t-menu); letter-spacing: 0.04em; text-transform: uppercase; color: var(--encre-douce); }
.jamais ul { margin: var(--e-2) 0 0; padding-left: var(--e-4); }
.jamais li { margin-bottom: 2px; }

.verdict { background: var(--surface); border-radius: var(--r-carte); padding: var(--e-4); box-shadow: var(--ombre-1); }
.verdict p { margin: var(--e-2) 0 0; color: var(--encre-douce); }
.verdict p strong { color: var(--encre); }

/* ─────────────────────────────────────────── palette de commandes · §31 */

.palette { position: fixed; inset: 0; z-index: 120; display: grid; place-items: start center; padding-top: 12vh; }
.palette__voile { position: absolute; inset: 0; background: rgb(0 0 0 / 0.42); }
.palette__boite {
  position: relative; width: min(38rem, calc(100vw - var(--e-5)));
  background: var(--surface); border-radius: var(--r-carte);
  box-shadow: var(--ombre-3); overflow: hidden;
  animation: monte var(--duree) var(--courbe);
}
@keyframes monte { from { opacity: 0; transform: translateY(-8px); } }
.palette__saisie { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-4); border-bottom: 1px solid var(--ligne); }
.palette__saisie svg { color: var(--encre-faible); }
.palette__saisie input { flex: 1; border: 0; outline: none; background: none; font: inherit; font-size: var(--t-sous); color: var(--encre); }
.palette__liste { max-height: 24rem; overflow-y: auto; padding: var(--e-2); }
.palette__groupe { margin: var(--e-3) var(--e-3) var(--e-1); font-size: var(--t-menu); text-transform: uppercase; letter-spacing: 0.06em; color: var(--encre-faible); }
.palette__item {
  display: flex; align-items: center; gap: var(--e-3);
  min-height: var(--cible); padding: 0 var(--e-3);
  border-radius: var(--r-controle); text-decoration: none; color: var(--encre);
}
.palette__item:hover, .palette__item.est-vise { background: var(--lavis-accent); }
.palette__nom { font-weight: var(--g-moyen); white-space: nowrap; }
.palette__res { color: var(--encre-faible); font-size: var(--t-menu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palette__vide { padding: var(--e-5); text-align: center; color: var(--encre-faible); }
.palette__item[hidden], .palette__groupe[hidden] { display: none; }

/* ─────────────────────────────────────────────────────── menus flottants */

.menu {
  position: absolute; z-index: 110; min-width: 15rem;
  background: var(--surface); border-radius: var(--r-carte);
  box-shadow: var(--ombre-3); padding: var(--e-2);
  animation: monte var(--duree) var(--courbe);
}
.menu__titre { margin: var(--e-2) var(--e-3) var(--e-2); font-size: var(--t-menu); text-transform: uppercase; letter-spacing: 0.06em; color: var(--encre-faible); }
.menu__item {
  display: flex; align-items: center; gap: var(--e-3);
  min-height: var(--cible); padding: 0 var(--e-3);
  border-radius: var(--r-controle); text-decoration: none; color: var(--encre); font-size: var(--t-corps);
}
.menu__item:hover { background: var(--creuse); }
.menu__item--danger { color: var(--danger); }
.menu__item--danger:hover { background: var(--lavis-danger); }
.menu__item svg { color: var(--encre-faible); flex: none; }
.menu__item--danger svg { color: currentColor; }

/* ──────────────────────────────────────────────────────────────── toasts */

.toasts { position: fixed; right: var(--e-5); bottom: var(--e-5); z-index: 150; display: flex; flex-direction: column; gap: var(--e-2); }
@media (max-width: 48rem) { .toasts { left: var(--e-4); right: var(--e-4); bottom: var(--e-4); } }
.toast {
  display: flex; align-items: center; gap: var(--e-3);
  background: var(--surface); border-radius: var(--r-carte);
  box-shadow: var(--ombre-3); padding: var(--e-3) var(--e-4);
  animation: glisse var(--duree) var(--courbe);
}
@keyframes glisse { from { opacity: 0; transform: translateY(10px); } }
.toast { position: relative; overflow: hidden; max-width: min(26rem, 100%); }
.toast__ic { flex: none; display: inline-flex; }
.toast--ok .toast__ic     { color: var(--ok); }
.toast--info .toast__ic   { color: var(--info); }
.toast--alerte .toast__ic { color: var(--alerte); }
.toast--danger .toast__ic { color: var(--danger); }

.toast__corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.toast__titre { font-weight: var(--g-moyen); }
.toast__txt   { font-size: var(--t-menu); color: var(--encre-douce); }
.toast__act   { flex: none; }
.toast__x {
  flex: none; width: 1.75rem; height: 1.75rem;
  display: grid; place-items: center;
  padding: 0; border: 0; border-radius: var(--r-puce);
  background: none; color: var(--encre-faible); cursor: pointer;
}
.toast__x:hover { background: var(--creuse); color: var(--encre); }

/* La minuterie se VOIT : un filet qui se vide. Sans elle, un toast qui
   disparait donne l'impression d'un bug — on ne sait pas s'il est parti tout
   seul ou si on l'a fait fuir. */
.toast__minuteur { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--ligne); width: 100%; }
.toast--ok .toast__minuteur     { background: var(--ok); }
.toast--info .toast__minuteur   { background: var(--info); }
.toast--alerte .toast__minuteur { background: var(--alerte); }
.toast--danger .toast__minuteur { background: var(--danger); }

.voile-tiroir {
  position: fixed; inset: 0; z-index: 50; background: rgb(0 0 0 / 0.4);
  opacity: 0; pointer-events: none; transition: opacity var(--duree) var(--courbe);
}
.voile-tiroir.est-ouvert { opacity: 1; pointer-events: auto; }

/* ─────────────────────────────────────────────────────────────── divers */

.i { width: 1.25rem; height: 1.25rem; flex: none; }
.i--sm { width: 1rem; height: 1rem; }
.i--xs { width: 0.875rem; height: 0.875rem; }

.grille-2 { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); }
.grille-3 { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.grille-4 { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.pile     { display: flex; flex-direction: column; gap: var(--gap-pile); }
.rang     { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; }
.rang--fin{ justify-content: flex-end; }
.pousse   { margin-left: auto; }

/* Le focus, partout, identique. §80 — jamais retiré, jamais discret. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-controle);
}

/* ═══════════════════════════════════════════════════════════════════════════
   L'attribut `hidden` doit être RÉAFFIRMÉ sur tout ce qui pose un `display`.
   `hidden` n'est qu'une règle de la feuille du navigateur (`display: none`) :
   n'importe quelle règle d'auteur qui déclare un display la bat. Sans ces
   lignes, la palette et les modales s'affichent dès le chargement de la page.
   ═══════════════════════════════════════════════════════════════════════════ */
.palette[hidden],
.modale[hidden],
.tiroir[hidden],
.menu[hidden],
.voile-tiroir[hidden] { display: none; }


/* ═══════════════════════════════════════════════════════════════════════════
   LES BARRES DE DEFILEMENT — au ton du systeme.
   Fines, arrondies comme le reste, pouce a `--ligne`, piste transparente. Elles
   suivent les deux themes sans une ligne de plus, puisqu'elles lisent des jetons.
   ═══════════════════════════════════════════════════════════════════════════ */
.flanc,
.toile__defile,
.palette__liste,
.modale__corps,
.tiroir__corps,
.tbl-boite,
.haute,
.cadre-zone,
.mat-boite,
.copier pre {
  scrollbar-width: thin;
  scrollbar-color: var(--ligne) transparent;
}
.flanc::-webkit-scrollbar,
.toile__defile::-webkit-scrollbar,
.palette__liste::-webkit-scrollbar,
.modale__corps::-webkit-scrollbar,
.tiroir__corps::-webkit-scrollbar,
.tbl-boite::-webkit-scrollbar,
.haute::-webkit-scrollbar,
.cadre-zone::-webkit-scrollbar,
.mat-boite::-webkit-scrollbar,
.copier pre::-webkit-scrollbar { width: 10px; height: 10px; }

.flanc::-webkit-scrollbar-track,
.toile__defile::-webkit-scrollbar-track,
.palette__liste::-webkit-scrollbar-track,
.modale__corps::-webkit-scrollbar-track,
.tiroir__corps::-webkit-scrollbar-track,
.tbl-boite::-webkit-scrollbar-track,
.haute::-webkit-scrollbar-track,
.cadre-zone::-webkit-scrollbar-track,
.mat-boite::-webkit-scrollbar-track,
.copier pre::-webkit-scrollbar-track { background: transparent; }

.flanc::-webkit-scrollbar-thumb,
.toile__defile::-webkit-scrollbar-thumb,
.palette__liste::-webkit-scrollbar-thumb,
.modale__corps::-webkit-scrollbar-thumb,
.tiroir__corps::-webkit-scrollbar-thumb,
.tbl-boite::-webkit-scrollbar-thumb,
.haute::-webkit-scrollbar-thumb,
.cadre-zone::-webkit-scrollbar-thumb,
.mat-boite::-webkit-scrollbar-thumb,
.copier pre::-webkit-scrollbar-thumb {
  background: var(--ligne);
  border: 3px solid transparent;   /* le pouce parait fin sans reduire sa cible */
  background-clip: padding-box;
  border-radius: var(--r-puce);
}
.flanc:hover::-webkit-scrollbar-thumb,
.toile__defile:hover::-webkit-scrollbar-thumb {
  background: var(--encre-faible);
  background-clip: padding-box;
}
/* Le bloc de code est sombre : son pouce doit s'y lire. */
.copier pre { scrollbar-color: var(--encre-douce) transparent; }
.copier pre::-webkit-scrollbar-thumb { background: var(--encre-douce); background-clip: padding-box; }