/**
 * Ardoise à dessin — feuille de style du widget DrawPad.
 *
 * Vit DANS le dossier du widget, à côté de son PHP et de son JS, et n'est pas compilée : du CSS
 * servi tel quel, versionné par hash de fichier. Elle n'utilise aucune syntaxe Sass — ni variable,
 * ni mixin, ni imbrication —, seulement les `var(--tokens-*)` du design system, qui sont du CSS.
 * La sortir du build lui épargnait cinq préfixes de compatibilité, dont deux valaient encore
 * (`-webkit-appearance`, `-webkit-user-select`) : ils sont écrits à la main ci-dessous. Le build
 * Sass reste en place pour `assets/styles/style.scss`, qui, lui, est du vrai Sass.
 *
 * Chargée par le seul widget qui s'en sert (`DrawPad::get_style_depends()` →
 * `wbt-drawpad-stylesheet`), donc seulement sur les pages qui le contiennent.
 *
 * Elle habille la feuille de dessin, la barre d'outils et ses tiroirs, le filet de la zone
 * imprimable et le panneau d'envoi, dans les trois mises en page du widget : îlot posé sur la
 * feuille au-dessus de 1024 px, barres ancrées aux bords de l'écran en dessous (paysage), barre
 * pleine largeur sous la feuille en portrait. Le seuil de 1024 px est celui de la tablette chez
 * Elementor, et il est repris à l'identique côté JS (`DOCKED_MAX`).
 *
 * Ni `@tailwind` ni token Sass ici : les `var(--tokens-*)` sont émis sur `:root` par `style.scss`,
 * toujours chargé en amont. Les positions et tailles que la CSS ne peut pas connaître — géométrie
 * de la feuille, largeur de la barre, tranche visible au défilement — arrivent en variables
 * `--wbt-*` posées par le `script.js` du même dossier.
 *
 * ⚠️ Les commentaires ont été retirés de cette feuille : elle part telle quelle chez le visiteur.
 * Le POURQUOI de chaque règle — pièges d'empilement, de cascade et de mise en page, tous payés au
 * moins une fois — est dans `src/Widgets/Wontainers/DrawPad/README.md`. À lire AVANT de simplifier
 * une règle qui a l'air redondante.
 */

/* ⚠️ TOUS les sélecteurs de cette feuille sont scopés sous `.wbt-drawpad`, y compris ceux qui
   n'auraient besoin que de leur propre classe. Ce n'est pas une coquetterie : le kit Elementor du
   site pose ses styles de bouton sur tout le front —
   `.elementor-kit-<id> button { background-color: …; border-radius: 3px; font-size: 16px }`, soit
   (0,1,1). Une règle d'état au repos à (0,1,0) passait donc DERRIÈRE, tandis que nos règles de
   survol, à (0,2,1), passaient devant : les boutons de la barre sortaient tout noirs et
   redevenaient corrects sous le pointeur.
   Le décalage est UNIFORME, et il doit le rester : scoper seulement quelques règles remonte
   certaines au niveau de celles qui les surchargeaient — les stickers du tiroir, réglés par
   `.wbt-drawpad-panel .wbt-drawpad-sticker`, étaient repassés à leur taille de base. Une nouvelle
   règle s'écrit donc `.wbt-drawpad .ma-classe`, jamais `.ma-classe` seule.
   UNE seule exception, et elle se mérite : les éléments que le JS déplace dans `document.body`
   (le bandeau « Commencer », le fantôme du glissé) sortent du widget, donc du scope. Portés, leurs
   styles ne s'appliquent tout simplement plus. Chacun porte sur place un commentaire disant
   pourquoi il est nu. Avant d'en écrire un troisième : vérifier qu'il est bien déplacé hors du
   widget, sinon c'est le scope qu'il faut, pas l'exception. */
.wbt-drawpad {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	--wbt-layout-gap: calc(var(--tokens-spacing-spacing-400) * 1px);
	--wbt-shadow-float: 0 4px 14px rgba(0, 0, 0, 0.18);
	--wbt-shadow-up: 0 -2px 10px rgba(0, 0, 0, 0.12);
}
.wbt-drawpad .wbt-drawpad-board {
	width: 100%;
}
.wbt-drawpad .wbt-drawpad-stage {
	position: relative;
	width: 100%;
	margin-inline: auto;
}
.wbt-drawpad .wbt-drawpad-rail {
	position: absolute;
	top: calc(var(--tokens-spacing-spacing-300) * 1px);
	left: calc(var(--tokens-spacing-spacing-300) * 1px);
	bottom: calc(var(--tokens-spacing-spacing-300) * 1px);
	z-index: 10;
	pointer-events: none;
}
.wbt-drawpad .wbt-drawpad-island {
	position: sticky;
	top: var(--wbt-drawpad-sticky-top, 12px);
	display: flex;
	pointer-events: auto;
	flex-direction: column;
	gap: calc(var(--tokens-spacing-spacing-200) * 1px);
	padding: calc(var(--tokens-spacing-spacing-300) * 1px);
	background: var(--semantic-background-container-container-neutral);
	--wbt-island-radius: 18px;
	border-radius: var(--wbt-island-radius);
	cursor: move;
}
/* VERROUILLÉE, la barre ne se déplace plus : le curseur ne doit donc plus l'annoncer. Il vient de
   la règle ci-dessus, qui vaut pour l'îlot entier ; celle-ci la reprend pendant la présentation.
   `default` et non `not-allowed` : le fond de l'îlot n'est pas une commande refusée, c'est une
   surface inerte. Ses boutons, eux, gardent le curseur que leur état leur donne. */
.wbt-drawpad.wbt-locked .wbt-drawpad-island {
	cursor: default;
}
.wbt-drawpad.wbt-island-dragging,
.wbt-drawpad.wbt-island-dragging canvas {
	cursor: move !important;
}
.wbt-drawpad.wbt-panning canvas {
	cursor: grabbing !important;
}
.wbt-drawpad .wbt-drawpad-island::after {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;
	border-radius: var(--wbt-island-radius);
	box-shadow: var(--wbt-shadow-float);
	pointer-events: none;
}
.wbt-drawpad .wbt-drawpad-tools {
	display: flex;
	flex-direction: column;
	gap: calc(var(--tokens-spacing-spacing-200) * 1px);
	align-items: center;
	justify-content: center;
}
.wbt-drawpad .wbt-drawpad-half {
	display: flex;
	flex-direction: column;
}
.wbt-drawpad .wbt-drawpad-half + .wbt-drawpad-half {
	margin-top: calc(var(--tokens-spacing-spacing-200) * 1px);
}
.wbt-drawpad .wbt-drawpad-tools > * {
	flex: 0 0 auto;
}
.wbt-drawpad .wbt-drawpad-drawer {
	position: absolute;
	bottom: var(--wbt-island-radius);
	left: 100%;
	clip-path: inset(-24px -24px -24px 0);
	pointer-events: none;
}
.wbt-drawpad .wbt-drawpad-panel {
	display: grid;
	box-sizing: border-box;
	/* UNE colonne, comme en mobile paysage : le tiroir est une bande dressée le long de la feuille,
	   et non un bloc posé dessus. Il masque alors la largeur d'une vignette au lieu de trois, et
	   c'est ce qui compte — on choisit un sticker EN REGARDANT le dessin où on va le poser.
	   Trois colonnes en montraient plus d'un coup, mais recouvraient un tiers de la feuille et
	   donnaient au desktop une forme qui n'existait nulle part ailleurs. */
	grid-template-columns: auto;
	gap: calc(var(--tokens-spacing-spacing-200) * 1px);
	justify-items: center;
	max-height: 60vh;
	overflow-y: auto;
	/* Arrivé en bout de tiroir, la molette ne doit pas se mettre à faire défiler la PAGE sous le
	   tiroir ouvert : on regardait des vignettes, la feuille part sans qu'on l'ait demandé. */
	overscroll-behavior: contain;
	/* L'anneau de focus fait 3 px, décalé de 3 : sans cette réserve, il est rogné par le
	   débordement dès que la vignette focalisée touche le bord du tiroir. */
	scroll-padding: calc(var(--tokens-spacing-spacing-200) * 1px);
	/* `thin` est le plus fin que la norme permette : il n'existe pas de largeur en pixels qui vaille
	   dans les deux moteurs — la régler passerait par une règle `::-webkit-` qui désactive la règle
	   standard, et laisserait Firefox avec sa barre par défaut.
	   La couleur, elle, se choisit : `border-quiet` est le ton du DS pour un trait discret sur une
	   surface claire — le même que le cadre de la barre de l'élément et que le disque des pastilles.
	   Un cran au-dessus du fond du tiroir, pas un trait noir posé dessus. La piste disparaît. */
	scrollbar-width: thin;
	scrollbar-color: var(--semantic-border-border-quiet) transparent;
	padding: calc(var(--tokens-spacing-spacing-300) * 1px);
	/* Ombres de débordement : elles n'apparaissent QUE s'il reste du contenu de ce côté, et le
	   navigateur le calcule seul — aucun JS, aucune mesure. Les deux premières couches sont les
	   ombres, fixées au conteneur (`scroll`) ; les deux suivantes sont des caches de la couleur du
	   fond, fixés au CONTENU (`local`), qui les recouvrent tant qu'on est en butée. On ne voit donc
	   l'ombre du haut qu'une fois descendu, et celle du bas tant qu'il reste à descendre.
	   Une rangée coupée par le bord se lit alors comme une suite, pas comme la fin. */
	background:
		linear-gradient(var(--semantic-background-container-container-quiet) 30%, transparent) top / 100% 14px no-repeat local,
		linear-gradient(transparent, var(--semantic-background-container-container-quiet) 70%) bottom / 100% 14px no-repeat local,
		radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.16), transparent) top / 100% 8px no-repeat scroll,
		radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.16), transparent) bottom / 100% 8px no-repeat scroll;
	background-color: var(--semantic-background-container-container-quiet);
	border-radius: 0 var(--wbt-island-radius) var(--wbt-island-radius) 0;
	box-shadow: var(--wbt-shadow-float);
	pointer-events: auto;
	visibility: hidden;
	transform: translateX(-100%);
	transition:
		transform 220ms ease-out,
		visibility 0s linear 220ms;
}
.wbt-drawpad .wbt-drawpad-panel.is-open {
	visibility: visible;
	transform: none;
	transition:
		transform 220ms ease-out,
		visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
	.wbt-drawpad .wbt-drawpad-panel,
	.wbt-drawpad .wbt-drawpad-panel.is-open {
		transform: none;
		transition: none;
	}
}
.wbt-drawpad .wbt-drawpad-panel[hidden] {
	display: none;
}
@media (max-width: 1024px) {
	.wbt-drawpad:not(.wbt-sheet-onscreen) .wbt-drawpad-half,
	.wbt-drawpad.wbt-locked .wbt-drawpad-island,
	.wbt-drawpad.wbt-locked .wbt-drawpad-half {
		visibility: hidden;
		opacity: 0;
		transition:
			opacity 150ms ease-out,
			visibility 0s linear 150ms;
	}
}
@media (max-width: 1024px) and (orientation: portrait) {
	.wbt-drawpad .wbt-drawpad-rail {
		position: static;
		display: flow-root;
	}
	.wbt-drawpad .wbt-drawpad-island {
		position: relative;
		top: auto;
		z-index: 10;
		box-sizing: border-box;
		width: 100%;
		margin: var(--wbt-layout-gap) 0 0;
		border-radius: var(--wbt-island-radius) var(--wbt-island-radius) 0 0;
		background: none;
	}
	.wbt-drawpad .wbt-drawpad-island::before {
		content: "";
		position: absolute;
		z-index: -1;
		inset: 0;
		border-radius: inherit;
		background: var(--semantic-background-container-container-neutral);
	}
	.wbt-drawpad .wbt-drawpad-island::after {
		border-radius: var(--wbt-island-radius) var(--wbt-island-radius) 0 0;
		box-shadow: var(--wbt-shadow-up);
	}
	.wbt-drawpad.wbt-locked .wbt-drawpad-island {
		display: none;
	}
	/* ANCRÉE au bas de l'écran quand elle ne tiendrait pas dans la vue autrement (cf.
	   `keepToolsVisible`). Elle mord alors sur le bas de la feuille : c'est le choix assumé —
	   des outils hors de vue sont pires qu'un coin de dessin masqué. Le rail garde sa hauteur
	   pendant ce temps, sinon la bascule se mettrait à clignoter. */
	.wbt-drawpad.wbt-tools-pinned .wbt-drawpad-island {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		width: auto;
		margin: 0;
	}
	.wbt-drawpad .wbt-drawpad-tools {
		flex-direction: row;
	}
	.wbt-drawpad .wbt-drawpad-drawer {
		top: auto;
		right: 0;
		bottom: 0;
		left: 0;
		clip-path: inset(-24px -24px 0);
		z-index: -2;
	}
	.wbt-drawpad .wbt-drawpad-panel {
		grid-auto-flow: column;
		grid-template-columns: none;
		grid-auto-columns: max-content;
		max-height: none;
		overflow-x: auto;
		overflow-y: hidden;
		border-radius: 0;
		padding-bottom: calc(var(--wbt-bar-size, 0px) + var(--tokens-spacing-spacing-300) * 1px);
		transform: translateY(100%);
	}
	/* Mêmes ombres qu'ailleurs, tournées d'un quart de tour : en portrait le tiroir est une rangée
	   qui défile en LARGEUR. Les couches verticales de la règle de base restent en place et ne se
	   voient pas — sans débordement vertical, leurs caches les recouvrent en permanence.
	   Le cadrage se fait sur DEUX axes différents, et c'est pour ça qu'il est écrit en propriétés
	   séparées plutôt qu'en raccourci. VERTICALEMENT sur le contenu : ce panneau porte un
	   rembourrage bas de la hauteur de la barre d'outils — la rangée ne doit pas passer dessous —,
	   et sur la boîte rembourrée le milieu du dégradé tombait 38 px sous les vignettes.
	   HORIZONTALEMENT sur les bords : en portrait le tiroir va d'un bord à l'autre de l'écran, une
	   ombre rentrée de la largeur du rembourrage flotterait à côté du bord au lieu de le border.
	   `background-origin` ne sait pas distinguer les deux axes : c'est la taille et la position qui
	   font le travail. */
	.wbt-drawpad .wbt-drawpad-panel {
		background-image:
			linear-gradient(to right, var(--semantic-background-container-container-quiet) 30%, transparent),
			linear-gradient(to left, var(--semantic-background-container-container-quiet) 30%, transparent),
			radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.16), transparent),
			radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.16), transparent);
		background-position:
			left 0 top calc(var(--tokens-spacing-spacing-300) * 1px),
			right 0 top calc(var(--tokens-spacing-spacing-300) * 1px),
			left 0 top calc(var(--tokens-spacing-spacing-300) * 1px),
			right 0 top calc(var(--tokens-spacing-spacing-300) * 1px);
		background-size:
			14px var(--wbt-drawer-content, 100%),
			14px var(--wbt-drawer-content, 100%),
			8px var(--wbt-drawer-content, 100%),
			8px var(--wbt-drawer-content, 100%);
		background-repeat: no-repeat;
		background-attachment: local, local, scroll, scroll;
		background-origin: padding-box;
		background-color: var(--semantic-background-container-container-quiet);
		--wbt-drawer-content: calc(100% - var(--wbt-bar-size, 0px) - var(--tokens-spacing-spacing-300) * 2px);
	}
	.wbt-drawpad .wbt-drawpad-panel > button {
		touch-action: pan-x;
	}
	.wbt-drawpad .wbt-drawpad-panel.is-open {
		transform: none;
	}
}
@media (max-width: 1024px) and (orientation: landscape) {
	.wbt-drawpad .wbt-drawpad-island {
		display: contents;
	}
	.wbt-drawpad .wbt-drawpad-half {
		position: fixed;
		z-index: 10;
		padding: calc(var(--tokens-spacing-spacing-300) * 1px);
		border-radius: var(--wbt-island-radius);
		box-sizing: border-box;
		transition: opacity 150ms ease-out;
	}
	.wbt-drawpad .wbt-drawpad-half + .wbt-drawpad-half {
		margin-top: 0;
	}
	.wbt-drawpad .wbt-drawpad-tools {
		height: 100%;
	}
	.wbt-drawpad .wbt-drawpad-half::before {
		content: "";
		position: absolute;
		z-index: -1;
		inset: 0;
		border-radius: inherit;
		background: var(--semantic-background-container-container-neutral);
	}
	.wbt-drawpad .wbt-drawpad-half::after {
		content: "";
		position: absolute;
		z-index: 1;
		inset: 0;
		border-radius: var(--wbt-island-radius);
		box-shadow: var(--wbt-shadow-float);
		pointer-events: none;
	}
	.wbt-drawpad .wbt-drawpad-half-1 {
		left: 0;
	}
	.wbt-drawpad .wbt-drawpad-half-2 {
		right: 0;
	}
	.wbt-drawpad .wbt-drawpad-half-1,
	.wbt-drawpad .wbt-drawpad-half-1::after {
		border-radius: 0 var(--wbt-island-radius) var(--wbt-island-radius) 0;
	}
	.wbt-drawpad .wbt-drawpad-half-2,
	.wbt-drawpad .wbt-drawpad-half-2::after {
		border-radius: var(--wbt-island-radius) 0 0 var(--wbt-island-radius);
	}
	.wbt-drawpad .wbt-drawpad-half .wbt-drawpad-panel {
		grid-auto-flow: row;
		grid-template-columns: auto;
		border-radius: 0;
		align-content: start;
		box-sizing: border-box;
		max-height: calc(100dvh - 2 * var(--wbt-layout-gap));
		overflow-y: auto;
	}
	.wbt-drawpad .wbt-drawpad-panel > button {
		touch-action: pan-y;
	}
	.wbt-drawpad .wbt-drawpad-half-1 .wbt-drawpad-drawer {
		left: 0;
	}
	.wbt-drawpad .wbt-drawpad-half-2 .wbt-drawpad-drawer {
		right: 0;
		left: auto;
		clip-path: inset(-24px 0 -24px -24px);
	}
	.wbt-drawpad .wbt-drawpad-half .wbt-drawpad-drawer {
		z-index: -2;
	}
	.wbt-drawpad .wbt-drawpad-half-1 .wbt-drawpad-panel {
		padding-left: calc(var(--wbt-bar-size, 0px) + var(--tokens-spacing-spacing-300) * 1px);
	}
	.wbt-drawpad .wbt-drawpad-half-2 .wbt-drawpad-panel {
		padding-right: calc(var(--wbt-bar-size, 0px) + var(--tokens-spacing-spacing-300) * 1px);
		transform: translateX(100%);
	}
	.wbt-drawpad .wbt-drawpad-half-2 .wbt-drawpad-panel.is-open {
		transform: none;
	}
	@media (prefers-reduced-motion: reduce) {
		.wbt-drawpad .wbt-drawpad-half {
			transition: none;
		}
	}
}
.wbt-drawpad .wbt-drawpad-panel .wbt-drawpad-sticker {
	width: 100px;
	height: auto;
	aspect-ratio: 1;
	font-size: 64px;
}
.wbt-drawpad .wbt-drawpad-panel .wbt-drawpad-sticker img {
	width: 100%;
	height: 100%;
}
.wbt-drawpad .wbt-drawpad-panel .wbt-drawpad-overlay-none {
	width: 54px;
	height: 54px;
}
.wbt-drawpad .wbt-drawpad-layers {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 4;
	display: flex;
	flex-direction: row;
	gap: 4px;
	padding: 4px;
	background: var(--semantic-background-container-container-neutral);
	border: 1px solid var(--semantic-border-border-quiet);
	border-radius: calc(var(--tokens-borderradius-borderradius-200) * 1px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.wbt-drawpad .wbt-drawpad-layer[hidden] {
	display: none;
}
.wbt-drawpad .wbt-drawpad-layers[hidden] {
	display: none;
}
.wbt-drawpad .wbt-drawpad-layer {
	display: inline-flex;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 2px solid var(--primitive-anthracite-700);
	border-radius: 6px;
	background: none;
	color: var(--semantic-text-text-neutral);
	line-height: 1;
	cursor: pointer;
}
.wbt-drawpad .wbt-drawpad-tools button:hover,
.wbt-drawpad .wbt-drawpad-tools button:focus,
.wbt-drawpad .wbt-drawpad-panel button:hover,
.wbt-drawpad .wbt-drawpad-panel button:focus,
.wbt-drawpad .wbt-drawpad-layers button:hover,
.wbt-drawpad .wbt-drawpad-layers button:focus {
	border-color: var(--primitive-anthracite-700);
	background: none;
	box-shadow: none;
	color: var(--semantic-text-text-neutral);
}
/* DEUX marquages, parce que ce sont DEUX états, et qu'ils peuvent être vrais en même temps :
   l'outil qu'on tient, et le tiroir qu'on a ouvert. Ouvrir un tiroir en ferme un autre, mais
   l'outil armé, lui, survit à la fermeture de son tiroir — deux boutons se retrouvent donc
   marqués, et sous une allure commune on ne savait plus lequel disait quoi.

   Plein anthracite = L'OUTIL EN MAIN. Un seul à tout moment, et c'est sa seule trace permanente
   dans la barre : le tiroir refermé, son bouton d'origine a disparu de l'écran.

   L'autre marquage — le tiroir ouvert — est un DÉPLACEMENT, plus bas. Les deux ne se disputent
   rien : un ouvreur qui tient l'outil et dont le tiroir est ouvert est plein ET décalé.

   ⚠️ `.wbt-drawpad-tools` n'est pas décoratif dans les trois premiers sélecteurs : il les fait
   passer à (0,4,0), donc DEVANT la règle de survol ci-dessus, qui est à (0,3,1) et remet
   `background: none`. Sans lui, survoler la gomme qu'on tient déjà l'éteignait. Les ouvreurs
   n'en ont pas besoin : leur `:not()` leur donne déjà ce cran. */
.wbt-drawpad .wbt-drawpad-tools .wbt-drawpad-pen.is-active,
.wbt-drawpad .wbt-drawpad-tools .wbt-drawpad-eraser.is-active,
.wbt-drawpad .wbt-drawpad-tools .wbt-drawpad-select.is-active,
.wbt-drawpad .wbt-drawpad-opener.is-active:not(.wbt-drawpad-pencil) {
	border-color: var(--primitive-anthracite-700);
	background: var(--primitive-anthracite-700);
	color: var(--semantic-text-text-inverse);
}
/* Le picto d'une catégorie est une IMAGE et ne peut pas être autre chose : faute de picto dessiné,
   c'est le premier sticker du dossier qui sert de vignette (`category_icon`), donc un WebP — un
   raster ne s'insère pas en ligne. Rien ne peut donc le repeindre, et sur le remplissage
   anthracite de l'outil en main il devenait noir sur noir.
   `brightness(0)` écrase d'abord toute couleur en noir, `invert(1)` la remonte en blanc : le picto
   devient une silhouette blanche, que le fichier soit un glyphe noir ou un sticker en couleurs.
   `invert(1)` seul convenait au glyphe et rendait le sticker en négatif — un cochon rose viré au
   vert. La transparence, elle, traverse les deux filtres : le vide autour reste vide.
   Les pictos d'OUTIL sont en ligne, parce que le JS y lit le SVG pour fabriquer le curseur ; ils
   suivent déjà `color` et n'ont rien à faire ici. */
.wbt-drawpad .wbt-drawpad-opener.is-active img {
	filter: brightness(0) invert(1);
}
/* Décalé VERS SON TIROIR = TIROIR OUVERT. Le bouton sort du rang de quelques pixels, du côté d'où
   le panneau arrive : il est tiré, comme le tiroir qu'il ouvre.

   Deux essais écartés avant celui-ci. Un fond gris pâle : `#e6e6e6` sur blanc plafonne à 1,2:1,
   quand un indicateur d'état en demande 3 (WCAG 1.4.11). Un bord épaissi : lisible, mais lourd
   au milieu d'une barre de traits fins. Le déplacement ne repose ni sur une couleur ni sur une
   épaisseur — il reste lisible en contraste élevé comme en monochrome, et l'état est de toute
   façon porté par `aria-expanded` pour les lecteurs d'écran.

   Aucun `:not(.is-active)` ici, contrairement aux deux essais précédents : la position et le
   remplissage ne se disputent rien. Un ouvreur qui tient l'outil ET dont le tiroir est ouvert dit
   donc les deux à la fois, plein et décalé.

   Le sens dépend de la mise en page, et il est lu dans le code qui place les tiroirs
   (`placeDrawer`) : à droite de l'îlot en desktop, vers le centre depuis la barre ancrée en
   paysage, vers le haut en portrait — « le tiroir sort par le haut ». Les trois blocs qui suivent
   doivent RESTER après celui-ci : à spécificité égale, c'est l'ordre qui trancherait. */
.wbt-drawpad .wbt-drawpad-opener[aria-expanded="true"] {
	transform: translateX(4px);
}
@media (max-width: 1024px) and (orientation: portrait) {
	.wbt-drawpad .wbt-drawpad-opener[aria-expanded="true"] {
		transform: translateY(-4px);
	}
}
@media (max-width: 1024px) and (orientation: landscape) {
	.wbt-drawpad .wbt-drawpad-half-2 .wbt-drawpad-opener[aria-expanded="true"] {
		transform: translateX(-4px);
	}
}
.wbt-drawpad .wbt-drawpad-tools .wbt-drawpad-pencil.is-active {
	border-color: var(--primitive-anthracite-700);
	background: var(--wbt-ink, var(--primitive-anthracite-700));
	color: var(--wbt-ink-on, var(--semantic-text-text-inverse));
}
/* Infobulles des barres d'outils. Le texte vient de `data-tip`, que le JS transvase depuis le
   `title` du PHP — gardé, celui du navigateur viendrait doubler celui-ci.
   Trois déclencheurs : le survol, le FOCUS CLAVIER (que le `title` natif ignore, laissant un
   utilisateur qui tabule sans aucun libellé), et `.is-tipped`, posé à l'appui sur les écrans
   tactiles, où le survol n'existe pas.
   Le sens suit la mise en page, comme le décalage des ouvreurs : à droite de la colonne en
   desktop, au-dessus de la barre couchée en portrait, vers le centre depuis la barre ancrée en
   paysage. Les blocs qui suivent doivent RESTER après celui-ci. */
.wbt-drawpad [data-tip] {
	position: relative;
}
.wbt-drawpad [data-tip]::after {
	content: attr(data-tip);
	position: absolute;
	z-index: 20;
	top: 50%;
	left: calc(100% + 10px);
	width: max-content;
	max-width: 200px;
	padding: calc(var(--tokens-spacing-spacing-100, 4) * 1px) calc(var(--tokens-spacing-spacing-200) * 1px);
	border-radius: 6px;
	background: var(--primitive-anthracite-700);
	color: var(--semantic-text-text-inverse);
	font-size: 12px;
	line-height: 1.35;
	text-align: left;
	white-space: normal;
	opacity: 0;
	transform: translateY(-50%);
	transition: opacity 120ms ease-out;
	pointer-events: none;
}
.wbt-drawpad [data-tip]:focus-visible::after,
.wbt-drawpad [data-tip].is-tipped::after {
	opacity: 1;
}
/* LE SURVOL N'EXISTE QUE SUR LES APPAREILS QUI SURVOLENT, d'où `@media (hover: hover)`.
   Sans cette barrière, le tactile héritait du survol : un appui laisse l'élément en `:hover`
   jusqu'au prochain appui ailleurs — c'est le survol collant, propre au tactile. La bulle sortait
   donc au premier bouton touché et n'en repartait plus, alors que la classe posée à l'appui, elle,
   expire au bout d'une seconde et demie. Deux déclencheurs pour un seul geste, dont l'un ne se
   retire jamais.
   Le tactile garde donc `.is-tipped` et son minuteur, et lui seul.

   L'attente d'une seconde ne vaut que pour le survol. Une bulle qui sort au premier pixel s'ouvre
   surtout quand on traverse la barre pour aller ailleurs, ou quand on sait déjà ce que fait le
   bouton : l'attente fait le tri — rester dessus est une question, passer dessus n'en est pas une.
   Le retour à l'invisible, lui, n'attend pas : le délai est posé sur l'état survolé, pas sur la
   règle de base, donc la bulle part dès que le pointeur s'en va.
   Ni le focus clavier ni l'appui n'attendent : tabuler et toucher sont déjà des gestes
   délibérés. */
@media (hover: hover) {
	.wbt-drawpad [data-tip]:hover::after {
		opacity: 1;
		transition-delay: 1s;
	}
}
/* Pendant un glissé, le fantôme suit le pointeur et le curseur est masqué : une bulle restée
   ouverte du bouton d'où l'on part suivrait le geste sans rien dire de vrai. */
.wbt-drawpad.wbt-dragging [data-tip]::after,
.wbt-drawpad.wbt-island-dragging [data-tip]::after {
	opacity: 0;
}
/* Un bouton DÉSACTIVÉ ne promet rien : sa bulle annoncerait une action qu'il ne fera pas. Un
   bouton désactivé garde pourtant `:hover` — seuls ses ÉVÉNEMENTS sont supprimés, pas son état de
   survol —, il fallait donc l'écrire.
   Cela couvre la présentation, où toute la barre est désactivée jusqu'à « Commencer »
   (cf. `lockables`), et le bouton Fonds d'une campagne qui n'en fournit aucun. */
.wbt-drawpad [data-tip]:disabled::after {
	opacity: 0;
}
/* Les deux commandes de la feuille sont au coin bas droit de la zone, et leur conteneur ROGNE ce
   qui dépasse (`.canvas-container { overflow: hidden }`) : leurs bulles sortent donc vers le
   DESSIN, c'est-à-dire vers le haut.
   ⚠️ Et non vers la gauche pour la corbeille, comme ce fut le cas : le bouton d'envoi est juste à
   sa gauche, et la bulle lui tombait dessus. */
.wbt-drawpad .wbt-drawpad-sheet-actions button[data-tip]::after {
	top: auto;
	right: auto;
	bottom: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%);
}
/* OUVERTE, la pilule dit déjà ce que la bulle répéterait — et celle-ci sortirait juste au-dessus.
   Quatre niveaux de classe : il faut battre `:hover`, `:focus-visible` et `.is-tipped`, qui en
   comptent trois. */
.wbt-drawpad .wbt-drawpad-clear.is-armed[data-tip]::after {
	opacity: 0;
}
/* La barre de l'élément est couchée et posée sur le dessin : au-dessus, elle ne recouvre pas le
   sticker dont elle parle. */
.wbt-drawpad .wbt-drawpad-layers [data-tip]::after {
	top: auto;
	bottom: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%);
}
@media (max-width: 1024px) and (orientation: portrait) {
	.wbt-drawpad .wbt-drawpad-island [data-tip]::after {
		top: auto;
		bottom: calc(100% + 10px);
		left: 50%;
		transform: translateX(-50%);
	}
}
@media (max-width: 1024px) and (orientation: landscape) {
	.wbt-drawpad .wbt-drawpad-half-2 [data-tip]::after {
		right: calc(100% + 10px);
		left: auto;
	}
}
.wbt-drawpad .wbt-drawpad-tools button:focus-visible,
.wbt-drawpad .wbt-drawpad-panel button:focus-visible,
.wbt-drawpad .wbt-drawpad-layers button:focus-visible {
	outline: 3px solid var(--focus-ring-color, #5f68d9);
	outline-offset: 3px;
}
.wbt-drawpad .wbt-drawpad-pencil,
.wbt-drawpad .wbt-drawpad-pen,
.wbt-drawpad .wbt-drawpad-eraser,
.wbt-drawpad .wbt-drawpad-select,
.wbt-drawpad .wbt-drawpad-category,
.wbt-drawpad .wbt-drawpad-overlays,
.wbt-drawpad .wbt-drawpad-extra,
.wbt-drawpad .wbt-drawpad-overlay,
.wbt-drawpad .wbt-drawpad-color,
.wbt-drawpad .wbt-drawpad-sticker {
	display: inline-flex;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 2px solid var(--primitive-anthracite-700);
	border-radius: calc(var(--tokens-borderradius-borderradius-200) * 1px);
	background: none;
	color: var(--semantic-text-text-neutral);
	font: inherit;
	line-height: 1;
	cursor: pointer;
}
/* Crayon NON armé : son picto porte l'encre chargée, seul indice de la couleur qui sortira quand
   on le reprendra. Armé, c'est l'autre règle qui gouverne — fond plein de l'encre.
   `.wbt-drawpad-tools` et `:not(.is-active)` ne sont pas décoratifs : ils portent le sélecteur à
   (0,4,0), donc DEVANT la règle de survol à (0,3,1), qui remet `color: neutral`. Sans eux,
   survoler le crayon le noircissait et l'encre disparaissait de l'écran. */
.wbt-drawpad .wbt-drawpad-tools .wbt-drawpad-pencil:not(.is-active) {
	color: var(--wbt-ink, var(--semantic-text-text-neutral));
}
.wbt-drawpad .wbt-drawpad-category,
.wbt-drawpad .wbt-drawpad-overlays,
.wbt-drawpad .wbt-drawpad-extra,
.wbt-drawpad .wbt-drawpad-overlay,
.wbt-drawpad .wbt-drawpad-color,
.wbt-drawpad .wbt-drawpad-sticker {
	overflow: visible;
	font-size: 30px;
	touch-action: none;
}
/* 24 px comme les pictos tracés (`DrawPad::TOOLBAR_PICTO`) : l'image d'une catégorie occupe la
   même boîte que ses voisines, et laisse les mêmes 6 px jusqu'au bord. Elle faisait 46 px dans un
   bouton de 40 — elle n'y respirait pas, elle en SORTAIT.
   Les vignettes de tiroir ne sont pas concernées : leur taille vient des règles de panneau, plus
   spécifiques. Ce qu'elles prennent ici, c'est le reste — l'ajustement sans déformation et le
   fait qu'elles ne captent ni le pointeur ni le glissé natif. */
.wbt-drawpad .wbt-drawpad-category img,
.wbt-drawpad .wbt-drawpad-overlay img,
.wbt-drawpad .wbt-drawpad-sticker img {
	width: 24px;
	height: 24px;
	object-fit: contain;
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
}
.wbt-drawpad .wbt-drawpad-eraser,
.wbt-drawpad .wbt-drawpad-select {
	font-size: 20px;
}
.wbt-drawpad .wbt-drawpad-send {
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: calc(var(--tokens-spacing-spacing-600) * 1px);
}
.wbt-drawpad .wbt-drawpad-send.has-bg {
	padding: calc(var(--tokens-spacing-spacing-700) * 1px);
}
.wbt-drawpad .wbt-drawpad-send-head {
	display: flex;
	flex-direction: column;
	max-width: 65ch;
	margin-inline: auto;
	gap: calc(var(--tokens-spacing-spacing-300) * 1px);
}
.wbt-drawpad .wbt-drawpad-send-head :is(h1, h2, h3, h4, h5, h6) {
	font-size: calc(var(--tokens-fontsize-fontsize-700) * 1px) !important;
}
.wbt-drawpad .wbt-drawpad-side :is(h1, h2, h3, h4, h5, h6) {
	font-size: calc(var(--tokens-fontsize-fontsize-400) * 1px) !important;
}
.wbt-drawpad .wbt-drawpad-send :is(h1, h2, h3, h4, h5, h6),
.wbt-drawpad .wbt-drawpad-tuto :is(h1, h2, h3, h4, h5, h6) {
	font-family: var(--wbt-drawpad-font, cursive), cursive !important;
	line-height: 1.5 !important;
}
.wbt-drawpad .wbt-drawpad-picto img {
	max-width: 100%;
	max-height: 64px;
	margin-inline: auto;
}
.wbt-drawpad .wbt-drawpad-send-cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: calc(var(--tokens-spacing-spacing-600) * 1px);
}
@media (max-width: 1024px) {
	.wbt-drawpad .wbt-drawpad-send-cols {
		grid-template-columns: 1fr;
	}
}
.wbt-drawpad .wbt-drawpad-form {
	display: flex;
	flex-direction: column;
	gap: 26px;
}
.wbt-drawpad .wbt-drawpad-side {
	display: flex;
	flex-direction: column;
	gap: calc(var(--tokens-spacing-spacing-400) * 1px);
	justify-content: center;
	padding: calc(var(--tokens-spacing-spacing-700) * 1px);
	background-color: var(--semantic-background-container-container-neutral);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	border: 1px solid var(--semantic-border-border-quiet);
	border-radius: calc(var(--tokens-borderradius-borderradius-100) * 1px);
}
.wbt-drawpad .wbt-drawpad-actions .wbt-drawpad-linkbtn,
.wbt-drawpad .wbt-drawpad-actions .wbt-drawpad-linkbtn:hover,
.wbt-drawpad .wbt-drawpad-actions .wbt-drawpad-linkbtn:focus,
.wbt-drawpad .wbt-drawpad-actions .wbt-drawpad-linkbtn:active {
	padding: 0;
	color: inherit;
	-webkit-appearance: none;
	appearance: none;
	background: none;
	border: 0;
	cursor: pointer;
}
.wbt-drawpad .wbt-drawpad-actions .wbt-drawpad-linkbtn:focus-visible {
	outline: 2px solid var(--semantic-border-border-focused);
	outline-offset: 2px;
}
.wbt-drawpad .wbt-drawpad-send.is-inverse .wbt-drawpad-actions .tertiary {
	color: var(--semantic-text-text-inverse) !important;
	border-color: var(--semantic-border-border-inverse) !important;
}
.wbt-drawpad .wbt-drawpad-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: calc(var(--tokens-spacing-spacing-300) * 1px);
}
/* ⚠️ LES DEUX SEULES RÈGLES NON SCOPÉES DE CETTE FEUILLE, et elles doivent le rester.
   Collé au bas de l'écran, le bloc « Commencer » est DÉPLACÉ dans le `body` par le JS — il doit
   échapper au `overflow: hidden` du conteneur de fabric, qu'un ancêtre transformé transforme en
   rogneur (cf. `updateStartSticky`). Sorti du widget, il ne descend plus de `.wbt-drawpad` : une
   règle scopée cesse alors de s'appliquer, et le bandeau se retrouve `position: static`, sans
   fond, à 1900 px du haut d'une page qui n'en fait que 757. C'est ce qui s'est produit quand la
   feuille entière a été scopée d'un cran. Le kit Elementor n'est pas un risque ici : il ne pose
   ses styles que sur les `<button>`, jamais sur un `<div>`. */
.wbt-drawpad-start {
	position: absolute;
	bottom: calc(var(--tokens-spacing-spacing-400) * 1px);
	left: 50%;
	z-index: 6;
	transform: translateX(-50%);
}
/* Boîte du mode d'emploi. Le JS (`placeTuto`) lui donne sa largeur — celle de la zone, rentrée d'un
   écart — et sa position ; sa HAUTEUR reste celle de son contenu, jamais imposée. Ni marges
   automatiques, ni `overflow` : la boîte fait pile la taille du tuto, il n'y a donc ni bande vide
   au-dessus et en dessous, ni ascenseur. C'est la feuille qui s'étire pour la contenir, et le JS
   qui centre la BOÎTE dans la zone quand il reste de la place. */
.wbt-drawpad .wbt-drawpad-tuto {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 6;
	display: flow-root;
	box-sizing: border-box;
	pointer-events: none;
}
.wbt-drawpad .wbt-drawpad-tuto > * {
	pointer-events: auto;
}
.wbt-drawpad .wbt-drawpad-tuto > *,
.wbt-drawpad .wbt-drawpad-tuto .e-con {
	--width: auto !important;
	--max-width: 100% !important;
	width: auto !important;
	max-width: 100% !important;
}
.wbt-drawpad .wbt-drawpad-rotate {
	display: none;
	max-width: 22em;
	margin: calc(var(--tokens-spacing-spacing-200) * 1px) auto 0;
	padding: calc(var(--tokens-spacing-spacing-200) * 1px) calc(var(--tokens-spacing-spacing-300) * 1px);
	font-size: calc(var(--tokens-fontsize-fontsize-300) * 1px);
	line-height: 1.3;
	color: var(--semantic-text-text-mild);
	text-align: center;
	background: var(--semantic-background-container-container-neutral);
	border-radius: calc(var(--tokens-borderradius-borderradius-300) * 1px);
}
@media (max-width: 1024px) and (orientation: portrait) {
	.wbt-drawpad .wbt-drawpad-rotate {
		display: block;
	}
}
.wbt-drawpad-start.is-stuck {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 20;
	padding: calc(var(--tokens-spacing-spacing-300) * 1px);
	text-align: center;
	background: var(--semantic-background-container-container-neutral);
	box-shadow: var(--wbt-shadow-up);
	transform: none;
}
.wbt-drawpad.wbt-locked .canvas-container {
	pointer-events: none;
}
.wbt-drawpad .wbt-drawpad-tools button:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}
.wbt-drawpad .wbt-drawpad-linkbtn[hidden] {
	display: none;
}
.wbt-drawpad.wbt-locked .wbt-drawpad-start {
	pointer-events: auto;
}
.wbt-drawpad .wbt-drawpad-canvas,
.wbt-drawpad .canvas-container {
	max-width: 100%;
}
.wbt-drawpad .canvas-container {
	overflow: hidden;
}
.wbt-drawpad .wbt-drawpad-guide {
	display: none;
	position: absolute;
	box-sizing: border-box;	top: 0;
	z-index: 2;
	border-radius: 30px;
	pointer-events: none;
}
/* Le voile extérieur reste porté par la BOÎTE (l'ombre étalée ci-dessus, qui suit son arrondi) ;
   les tirets, eux, sont un tracé SVG posé par-dessus. Le `border: 2px dashed` d'avant donnait des
   tirets dont ni la longueur ni l'espacement ne sont réglables — le navigateur les déduit de
   l'épaisseur, et Chrome, Firefox et Safari n'en tirent pas la même chose. */
.wbt-drawpad .wbt-drawpad-guide-line {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}
.wbt-drawpad .wbt-drawpad-guide-line rect {
	fill: none;
	stroke: var(--semantic-border-border-neutral, #6f6f72);
	stroke-width: 2;
	stroke-dasharray: 10 10;
}
/* Le liseré est visible dès le premier rendu, présentation comprise : la feuille est le A4 tout de
   suite, il dit donc la vérité avant comme après « Commencer ». */
.wbt-drawpad .wbt-drawpad-guide {
	display: block;
}
/* Verrouillé, le bouton d'entrée se pose au bas de la ZONE, pas du papier : c'est là que le tuto
   se joue. `--wbt-zone-bottom` est la distance du bas de la zone au bas du papier, écrite par le
   JS (`placeTuto`). Collé au bas de l'écran, il a quitté la feuille et n'a plus de zone à suivre —
   d'où le `:not(.is-stuck)`, qui évite aussi qu'une règle gagne contre l'autre. */
.wbt-drawpad.wbt-locked .wbt-drawpad-start:not(.is-stuck) {
	bottom: calc(var(--wbt-zone-bottom, 0px) + var(--tokens-spacing-spacing-400) * 1px);
}
/* LA RANGÉE des deux commandes de la feuille. Alignée à DROITE et posée par ses bords droit et bas
   (cf. `placeSheetActions`) : une pilule qui s'ouvre grandit donc vers la gauche et pousse sa
   voisine, sans que le JS ait à mesurer quoi que ce soit.
   `align-items: flex-end` : ouverte sur deux lignes, une pilule grandit vers le HAUT — vers le bas
   elle sortirait du liseré. */
.wbt-drawpad .wbt-drawpad-sheet-actions {
	position: absolute;
	z-index: 6;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	/* L'écart le plus SERRÉ du jeu de tokens, et il le faut : la cible tactile de chaque pastille
	   fait 40 px pour un picto de 19, donc chacune porte une dizaine de pixels de vide de chaque
	   côté. L'espace VU entre les deux dessins vaut cet écart plus vingt — 32 px avec l'écart
	   moyen, 24 avec celui-ci. Les deux cibles restent séparées, jamais chevauchantes. */
	gap: calc(var(--tokens-spacing-spacing-100, 4) * 1px);
}
.wbt-drawpad.wbt-locked .wbt-drawpad-sheet-actions {
	display: none;
}
.wbt-drawpad .wbt-drawpad-clear {
	display: inline-flex;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	gap: calc(var(--tokens-spacing-spacing-200) * 1px);
	/* Le picto, et rien d'autre : ni fond ni cadre. Ce n'est pas un outil de la barre, c'est une
	   commande posée sur la feuille. La boîte reste à 40 px, invisible : la cible tactile ne se
	   réduit pas à la taille du dessin (24 px est le plancher WCAG 2.5.8, et ce sont des doigts
	   d'enfant).
	   MIN et non `width`/`height` : armée, la pastille s'ouvre en pilule libellée. */
	min-width: 40px;
	min-height: 40px;
	border-radius: 999px;
	font-size: calc(var(--tokens-fontsize-fontsize-300) * 1px);
	padding: 0;
	border: 0;
	background: none;
	color: var(--semantic-text-text-neutral);
	font: inherit;
	line-height: 1;
	cursor: pointer;
}
/* Neutralise hello-elementor, qui repeint tous les `<button>` au survol ET au focus en
   `background-color: #c36` avec `color: #fff` — ici, ça aurait fait apparaître un pavé fuchsia sur
   le dessin, et effacé le picto tracé en `currentColor`. */
.wbt-drawpad .wbt-drawpad-clear:hover,
.wbt-drawpad .wbt-drawpad-clear:focus {
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--semantic-text-text-neutral);
}
.wbt-drawpad .wbt-drawpad-clear:focus-visible {
	outline: 3px solid var(--focus-ring-color, #5f68d9);
	outline-offset: 3px;
}
/* Armé : le premier appui n'efface pas, il demande confirmation. L'état se voit — anneau plein
   dans la couleur d'alerte — parce que le message sous la feuille peut être hors de vue quand on
   dessine en bas de page. La couleur seule ne porte pas l'information : le nom accessible du
   bouton devient « Confirmer : tout effacer » (cf. `script.js`). Le picto passe en blanc sur
   l'orange d'alerte du DS (#ac3a16) : 6,23:1, au-dessus du 4,5:1 exigé. */
/* ROUGE, et pas l'anthracite de l'envoi : les deux pilules sont côte à côte et se ressemblent, or
   l'une fait défiler la page et l'autre détruit le dessin. La couleur est ce qui les sépare au
   premier regard. Les trois sélecteurs : il faut passer devant hello-elementor, qui repeint tout
   `button` au survol ET au focus. */
.wbt-drawpad .wbt-drawpad-clear.is-armed,
.wbt-drawpad .wbt-drawpad-clear.is-armed:hover,
.wbt-drawpad .wbt-drawpad-clear.is-armed:focus {
	padding: 0 calc(var(--tokens-spacing-spacing-300) * 1px);
	background: var(--semantic-background-element-element-error, #ac3a16);
	color: #fff;
}
/* Le libellé n'apparaît qu'armée : le premier appui doit produire un changement visible, ce qu'une
   pilule déjà ouverte ne ferait pas. */
.wbt-drawpad .wbt-drawpad-clear-label {
	display: none;
}
.wbt-drawpad .wbt-drawpad-clear.is-armed .wbt-drawpad-clear-label {
	display: inline;
}
.wbt-drawpad .wbt-drawpad-clear:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}
.wbt-drawpad canvas {
	touch-action: none;
}
/* Les curseurs d'OUTIL sont posés par fabric (cf. `setSheetCursor` côté JS), plus ici : lui seul
   sait ce qui est sous le pointeur, et il met les flèches de redimensionnement au-dessus des
   poignées de l'élément sélectionné. Une règle en `!important` écrasait ce choix — on gardait le
   tampon au-dessus des poignées de ce qu'on venait de poser, alors que le geste possible n'était
   plus de poser mais d'agrandir.
   Ne restent ici que les curseurs de GESTE : ceux qui valent quoi qu'il y ait dessous, donc que
   fabric n'a pas à décider. */
.wbt-drawpad.wbt-dragging canvas {
	cursor: none !important;
}
.wbt-drawpad .wbt-drawpad-overlay {
	background-color: #fff;
	background-image:
		linear-gradient(45deg, var(--semantic-background-element-element-quiet) 25%, transparent 25%),
		linear-gradient(-45deg, var(--semantic-background-element-element-quiet) 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, var(--semantic-background-element-element-quiet) 75%),
		linear-gradient(-45deg, transparent 75%, var(--semantic-background-element-element-quiet) 75%);
	background-position: 0 0, 0 5px, 5px -5px, -5px 0;
	background-size: 10px 10px;
}
.wbt-drawpad .wbt-drawpad-disc {
	display: block;
	width: 26px;
	height: 26px;
	border: 1px solid var(--semantic-border-border-quiet);
	border-radius: 50%;
}
.wbt-drawpad .wbt-drawpad-color {
	border: 0;
}
/* 3 px : l'anneau est le SEUL trait d'un bouton de tiroir, les autres étant nus. Il est passé un
   temps à 2 px, du temps où un bord de 1 px complétait l'épaisseur. */
.wbt-drawpad .wbt-drawpad-panel > button.is-active,
.wbt-drawpad .wbt-drawpad-panel > button.is-active:hover,
.wbt-drawpad .wbt-drawpad-panel > button.is-active:focus {
	box-shadow: 0 0 0 3px var(--primitive-anthracite-700);
}
/* Les boutons d'un tiroir sont NUS au repos : carrés, sans trait. Seul celui qu'on a choisi porte
   l'anneau. Le tiroir affiche jusqu'à trente vignettes, et autant de cadres faisaient une grille
   qui les concurrençait ; il n'y a de toute façon rien à délimiter tant qu'on n'a rien choisi.
   `border: 0` et non l'absence de règle : le bord de 2 px vient du réglage commun à tous les
   boutons de l'ardoise, plus haut, et reviendrait sans cela.
   Le rembourrage reste, lui : `object-fit: contain` ajuste la vignette sans la déformer, mais elle
   venait toucher l'anneau dès qu'on la choisissait. Les pastilles de couleur en sont exemptes —
   leur disque fait 26 px dans un bouton de 40, et 8 px de marge intérieure l'écraseraient. */
.wbt-drawpad .wbt-drawpad-panel > button:not(.wbt-drawpad-color) {
	padding: calc(var(--tokens-spacing-spacing-200) * 1px);
	border: 0;
}
.wbt-drawpad .wbt-drawpad-sticker {
	width: 48px;
	height: 48px;
}
.wbt-drawpad .wbt-drawpad-panel-fonds .wbt-drawpad-overlay {
	width: 100px;
	aspect-ratio: 1;
	height: auto;
}
@media (max-width: 1024px) and (orientation: portrait) {
	.wbt-drawpad .wbt-drawpad-panel-fonds .wbt-drawpad-overlay {
		aspect-ratio: 794 / 1123;
	}
}
.wbt-drawpad .wbt-drawpad-panel-fonds .wbt-drawpad-overlay img {
	width: 100%;
	height: 100%;
}
.wbt-drawpad .wbt-drawpad-overlay-none {
	display: block;
	background-color: var(--semantic-background-container-container-neutral);
	width: 26px;
	height: 26px;
	background:
		linear-gradient(
			to bottom right,
			transparent calc(50% - 1px),
			var(--semantic-border-border-neutral) calc(50% - 1px),
			var(--semantic-border-border-neutral) calc(50% + 1px),
			transparent calc(50% + 1px)
		);
	border: 1px solid var(--semantic-border-border-quiet);
	border-radius: 50%;
}
/* NON PORTÉES PAR `.wbt-drawpad`, ET C'EST VOULU : le fantôme du glissé est déplacé dans
   `document.body` (cf. `enableDragPlacement`), hors du widget, pour échapper au `overflow` et aux
   `z-index` des conteneurs Elementor traversés. Une règle portée ne l'atteint donc jamais. Il l'a
   été un temps : le fantôme perdait sa taille et son `position: fixed`, et comme le glissé masque
   le curseur (`cursor: none` plus haut, le fantôme tenant lieu de pointeur), on n'avait plus RIEN
   sous la main pendant le geste. */
.wbt-drawpad-ghost {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	font-size: 44px;
	line-height: 1;
	pointer-events: none;
}
.wbt-drawpad-ghost img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
.wbt-drawpad .wbt-drawpad-status,
.wbt-drawpad .wbt-drawpad-error {
	flex: 0 0 100%;
}
/* Annonces des actions sur la feuille : lues, jamais vues (cf. `announce` côté JS). Retirée du
   flux sans `display: none` ni `visibility: hidden`, que les lecteurs d'écran ignorent — il
   faut donc la réduire à un pixel et la découper, pas la masquer. */
.wbt-drawpad .wbt-drawpad-live {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.wbt-drawpad .wbt-drawpad-status:empty,
.wbt-drawpad .wbt-drawpad-error:empty {
	display: none;
}
.wbt-drawpad .wbt-drawpad-status {
	font-size: calc(var(--tokens-fontsize-fontsize-300) * 1px);
	color: var(--semantic-text-text-success);
}
.wbt-drawpad .wbt-drawpad-error {
	font-size: calc(var(--tokens-fontsize-fontsize-300) * 1px);
	color: var(--semantic-text-text-error);
}
.wbt-drawpad .wbt-drawpad-send.is-inverse .wbt-drawpad-error {
	color: var(--semantic-text-text-supercatchy);
}

/* ENVOI POSÉ SUR LA FEUILLE — le pourquoi est dans README.md, § « Le bouton d'envoi sur la
   feuille ». Ce n'est plus une pastille maison mais un BOUTON DU DESIGN SYSTEM, comme « Commencer
   le dessin » et l'envoi du formulaire. Ce `<div>` ne porte donc que le placement : c'est lui que
   `placeSend` déplace, et lui que la lib ne saurait pas positionner.
   `max-width` est posé sur la boîte par le JS ; sans le relais ci-dessous, le bouton le
   déborderait, la contrainte ne s'appliquant qu'à son parent. */
.wbt-drawpad .wbt-drawpad-done {
	position: absolute;
	z-index: 6;
}
.wbt-drawpad .wbt-drawpad-done .button {
	max-width: 100%;
}
.wbt-drawpad .wbt-drawpad-undo {
	display: inline-flex;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	gap: calc(var(--tokens-spacing-spacing-200) * 1px);
	min-width: 40px;
	min-height: 40px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: none;
	color: var(--semantic-text-text-neutral);
	font: inherit;
	font-size: calc(var(--tokens-fontsize-fontsize-300) * 1px);
	line-height: 1;
	cursor: pointer;
}
.wbt-drawpad .wbt-drawpad-undo[hidden],
.wbt-drawpad .wbt-drawpad-done[hidden] {
	display: none;
}
/* Feuille vide : rien à envoyer. Même grisé que la corbeille.
   L'envoi n'y est plus : c'est un bouton de la lib, qui a son propre état désactivé (`.disabled`,
   posé par `setLibButtonDisabled`). */
.wbt-drawpad .wbt-drawpad-undo:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}
/* Neutralise hello-elementor, comme pour la corbeille plus haut : il repeint tous les `<button>` au
   survol ET au focus en `background-color: #c36` avec `color: #fff`. Sur une pastille sans fond
   dont le picto est tracé en `currentColor`, le blanc EFFACE le dessin — au passage de la souris,
   le bouton disparaissait purement et simplement sur la feuille blanche.
   ⚠️ Ces deux règles avaient été oubliées : la pastille d'envoi a été calquée sur la corbeille sans
   ses garde-fous. Le symptôme ne se voit que sur un site où le thème est chargé, jamais en local. */
.wbt-drawpad .wbt-drawpad-undo:hover,
.wbt-drawpad .wbt-drawpad-undo:focus {
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--semantic-text-text-neutral);
}
.wbt-drawpad .wbt-drawpad-undo:focus-visible {
	outline: 3px solid var(--focus-ring-color, #5f68d9);
	outline-offset: 3px;
}
/* Pas de `nowrap` : sur une zone étroite, la pilule est bornée à ce qui reste entre les deux bords
   et le libellé y déborderait du bouton. Il passe donc sur deux ou trois lignes — moins joli, mais
   lisible et contenu. Aux largeurs courantes il tient sur une seule. */
/* ORDRE VISUEL : envoyer, annuler, effacer — de gauche à droite. Le DOM, lui, ne bouge pas : la
   corbeille y était la première et son ordre de tabulation est connu, le déplacer n'apporterait
   rien. Deux propriétés `order` suffisent, et la tabulation reste ce qu'elle était. */
/* ORDRE VISUEL dans la rangée : annuler, puis la corbeille. L'envoi n'y est plus — il se place au
   centre, seul (cf. `placeSend`). */
.wbt-drawpad .wbt-drawpad-undo {
	order: -1;
}

/* « COMMENCER LE DESSIN » ET « ENVOYER MON DESSIN » REPEINTS À LA COULEUR DU WIDGET.
   ⚠️ C'est un OVERRIDE d'un composant du design system, assumé comme tel. Le bouton du DS n'expose
   aucun paramètre de couleur — seulement des variantes fixes — et sa variante `primary` émet
   `bg-mildcatchy text-inverse`, soit un bleu-violet imposé. Le repeindre demande donc de battre le
   DS sur trois fronts, et c'est la raison de chaque ligne ci-dessous :
     · le FOND au repos, posé par `.bg-mildcatchy` en `!important` (0,1,0) — nos quatre classes
       plus `!important` passent devant ;
     · le SURVOL et l'ACTIF, que le DS remplace par un dégradé radial en `miaulet-400`
       (`.button.primary:hover`, (0,2,1), sans `!important`). Sans ces deux règles, la couleur
       choisie disparaissait sous une ellipse lavande au passage de la souris ;
     · la COULEUR DU TEXTE, posée par `.text-inverse` en `!important` : elle doit suivre le
       contraste mesuré de la couleur choisie, qui n'est pas toujours le blanc (l'orange L214
       demande un texte sombre).
   `background` et non `background-color` : c'est un dégradé qu'on remplace, et `background-color`
   le laisserait par-dessus.
   À REVÉRIFIER À CHAQUE MONTÉE DE VERSION DU DS : si `primary` change de classe utilitaire ou de
   traitement de survol, ces règles cessent de mordre — le symptôme sera un bouton redevenu
   bleu-violet, ou lavande au survol. Le repli reste propre : sans `--wbt-brand`, tout est inerte
   et le bouton retrouve exactement son apparence de DS. */
.wbt-drawpad .wbt-drawpad-start .button.primary,
.wbt-drawpad .wbt-drawpad-start .button.primary:hover,
.wbt-drawpad .wbt-drawpad-start .button.primary:focus,
.wbt-drawpad .wbt-drawpad-start .button.primary:active,
.wbt-drawpad .wbt-drawpad-done .button.primary,
.wbt-drawpad .wbt-drawpad-done .button.primary:hover,
.wbt-drawpad .wbt-drawpad-done .button.primary:focus,
.wbt-drawpad .wbt-drawpad-done .button.primary:active {
	background: var(--wbt-brand, var(--semantic-background-element-element-mildcatchy)) !important;
}
.wbt-drawpad .wbt-drawpad-start .button.primary,
.wbt-drawpad .wbt-drawpad-start .button.primary > *,
.wbt-drawpad .wbt-drawpad-done .button.primary,
.wbt-drawpad .wbt-drawpad-done .button.primary > * {
	color: var(--wbt-brand-text, var(--semantic-text-text-inverse)) !important;
}

/* SUR MOBILE, LA CORBEILLE ARMÉE RESTE UN PICTO. Elle s'ouvrait en pilule libellée, et trois
   pilules ne tiennent pas sur la largeur d'un téléphone : l'envoi devait se replier pour leur faire
   place, une mécanique de plus pour un résultat instable. Le picto seul tient toujours, et l'envoi
   ne bouge plus jamais.
   L'annulation, elle, n'a plus de pilule NULLE PART : elle agit au premier appui (cf. `script.js`),
   il n'y a plus d'état à montrer.
   Ces règles comptent autant de classes que celles qu'elles annulent (0,3,0) : c'est leur POSITION
   dans le fichier, après elles, qui les fait gagner. Ne pas les remonter.
   Sous 1024 px, le même seuil que le reste du widget. */
@media (max-width: 1024px) {
	/* LA CORBEILLE ARMÉE : un DISQUE rouge, là où le desktop ouvre une pilule rouge libellée. Elle
	   garde ses deux temps — c'est la seule des deux qui détruit —, et le premier appui reste donc
	   visible : le disque plein apparaît là où il n'y avait aucun fond. Ce n'est pas la couleur
	   seule qui porte l'état, c'est l'apparition d'une forme ; et le nom accessible du bouton
	   devient « Confirmer : tout effacer sur la feuille » (cf. `script.js`).
	   `width`/`height` fixes, et non les `min-` de la pastille : sans libellé, rien ne doit plus
	   étirer la boîte en largeur. */
	.wbt-drawpad .wbt-drawpad-clear.is-armed,
	.wbt-drawpad .wbt-drawpad-clear.is-armed:hover,
	.wbt-drawpad .wbt-drawpad-clear.is-armed:focus {
		width: 40px;
		height: 40px;
		padding: 0;
	}
	.wbt-drawpad .wbt-drawpad-clear.is-armed .wbt-drawpad-clear-label {
		display: none;
	}
}

/* LE BOUTON D'ENVOI DU FORMULAIRE, en blanc. C'est un `tertiary` du design system : fond
   TRANSPARENT et texte sombre. Posé sur un panneau coloré, il lui faut un fond.
   ⚠️ Le noir au survol ne vient PAS du design system — il ne définit aucun `:hover` pour
   `tertiary`. C'est hello-elementor, qui repeint tous les `<button>`. Et comme le `text-neutral` du
   DS porte un `!important`, le texte reste sombre pendant que le fond noircit : le bouton devient
   un bloc illisible. Même motif que les autres neutralisations du thème dans cette feuille — pas
   d'ordinal ici, il se périmerait au prochain bloc inséré.
   `!important` : `.bg-transparent` du DS en porte un, il faut passer devant.
   ⚠️ LE LIBELLÉ EST VISÉ SÉPARÉMENT, par `> *`. Le `text-neutral` du DS est posé sur le BOUTON, et
   son `!important` n'y tient que la couleur du bouton lui-même : le libellé vit dans un `<span>`
   que le thème atteint directement, et qui cesse alors d'hériter. Sans cette seconde règle, le fond
   redevenait blanc mais le texte restait BLANC dessus — invisible.
   `> *` et non une classe : les classes du `<span>` dépendent de la variante et de la déclinaison,
   `.title` n'est pas garanti. Même raison que pour « Commencer le dessin ».
   `:not(.disabled)` : le bouton est rendu DÉSACTIVÉ et le reste tant que le dessin n'a pas
   commencé. Peint en blanc, il aurait l'air actif. Le DS lui donne son apparence éteinte
   (`.button.tertiary.disabled`), qu'on laisse intacte. */
.wbt-drawpad .wbt-drawpad-actions .button.tertiary:not(.disabled),
.wbt-drawpad .wbt-drawpad-actions .button.tertiary:not(.disabled):hover,
.wbt-drawpad .wbt-drawpad-actions .button.tertiary:not(.disabled):focus {
	background: var(--semantic-background-element-element-neutral) !important;
	color: var(--semantic-text-text-neutral) !important;
}
.wbt-drawpad .wbt-drawpad-actions .button.tertiary:not(.disabled) > *,
.wbt-drawpad .wbt-drawpad-actions .button.tertiary:not(.disabled):hover > *,
.wbt-drawpad .wbt-drawpad-actions .button.tertiary:not(.disabled):focus > * {
	color: var(--semantic-text-text-neutral) !important;
}
/* LE MÊME BOUTON, DÉSACTIVÉ. Il est exclu de la règle ci-dessus pour garder l'apparence éteinte que
   le design system lui donne — mais hello-elementor, lui, repeint TOUS les `<button>` au survol, y
   compris ceux qu'on ne peut pas cliquer. Sans cette seconde neutralisation, le bouton restait
   éteint au repos et virait au noir dès qu'on le survolait, alors qu'il n'y a rien à activer.
   On ne lui invente pas une apparence : on lui rend celle qu'il a déjà au repos — fond transparent
   et texte `text-mild`, ce que `Button::render()` applique à un `tertiary` désactivé
   (cf. `resolveStyle`, où l'état désactivé bascule la couleur sur `mild`).
   Le libellé est visé séparément par `> *`, même raison que plus haut : le thème atteint le
   `<span>`, que le `!important` du DS posé sur le bouton ne protège pas. */
.wbt-drawpad .wbt-drawpad-actions .button.tertiary.disabled:hover,
.wbt-drawpad .wbt-drawpad-actions .button.tertiary.disabled:focus {
	background: transparent !important;
	color: var(--semantic-text-text-mild) !important;
}
.wbt-drawpad .wbt-drawpad-actions .button.tertiary.disabled:hover > *,
.wbt-drawpad .wbt-drawpad-actions .button.tertiary.disabled:focus > * {
	color: var(--semantic-text-text-mild) !important;
}