/* wizm — piste C « La conversation » (maquettes/piste-c.html ; vocabulaire : CONVERSATION.md ; DESIGN.md, « CSS supplémentaire »).
 *
 * Chaque page est un dialogue : la voix de wizm (Nunito Sans léger, en grand), les répliques du visiteur
 * (bulles violettes à droite, Quicksand), des pastilles de réponse dont « Je ne sais pas, décidez pour moi »
 * (orange), des pièces jointes dessinées et penchées. Les classes wizm-* se posent sur des blocs natifs
 * (« Classe CSS additionnelle ») : retirées, le bloc redevient ordinaire.
 *
 * Couleurs, polices et espacements : jetons du thème (--wp--preset--…, --wp--custom--…). L'état masqué d'une
 * animation n'existe que sous html.wpsw-anime (script actif, hors mouvement réduit) ; sans JavaScript, toutes
 * les réponses des échanges restent lisibles l'une après l'autre. */

:root {
	--wizm-violet: var(--wp--preset--color--primary);
	--wizm-encre: var(--wp--preset--color--contrast);
	--wizm-orange: var(--wp--preset--color--accent);
	--wizm-lilas: color-mix(in srgb, var(--wp--preset--color--primary) 14%, var(--wp--preset--color--base));
	--wizm-peche: color-mix(in srgb, var(--wp--preset--color--accent) 16%, var(--wp--preset--color--base));
	--wizm-lilas-sur-violet: color-mix(in srgb, var(--wp--preset--color--on-primary) 88%, var(--wp--preset--color--primary));
	--wizm-clair-sur-encre: color-mix(in srgb, var(--wp--preset--color--base) 82%, var(--wp--preset--color--contrast));
	--wizm-voix: var(--wp--preset--font-family--body);
	--wizm-replique: var(--wp--preset--font-family--heading);
	--wizm-bord-bulle: var(--wp--custom--bulle--marge, clamp(10px, 2.5vw, 40px));
	/* Le losange du logo (le point du i) : côtés en arcs, servi en masque CSS (couleur = background). */
	--wizm-losange: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-28 -28 56 56%27%3E%3Cpath d=%27M0 -28 A28 28 0 0 0 28 0 A28 28 0 0 0 0 28 A28 28 0 0 0 -28 0 A28 28 0 0 0 0 -28 Z%27/%3E%3C/svg%3E");
	/* Trombone de la pièce jointe (tracé Lucide « paperclip », ISC). */
	--wizm-trombone: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M16.5 7.5 9.3 14.7a2 2 0 0 0 2.8 2.8l7.6-7.6a4 4 0 0 0-5.6-5.6L6.4 12a6 6 0 0 0 8.5 8.5l5.6-5.6%27/%3E%3C/svg%3E");
}

html { overflow-x: clip; } /* les couches 3D et le bandeau penché débordent du corps : jamais de défilement horizontal */
body {
	overflow-x: clip; /* la queue de la grande bulle ne crée jamais de défilement horizontal (clip garde l'en-tête collant) */
	-webkit-font-smoothing: antialiased;
}

/* Focus visibles : orange sur blanc et sur encre ; violet sur lavande (l'orange y tombe sous 3:1) ; blanc dans la bulle violette. */
:where(a, button, summary, input, textarea, select, [tabindex]):focus-visible {
	outline: 3px solid var(--wizm-orange);
	outline-offset: 3px;
}
:where(.is-style-bande-teintee, .has-surface-background-color) :focus-visible {
	outline-color: var(--wizm-violet);
}
.is-style-section-contrastee :focus-visible {
	outline-color: var(--wp--preset--color--on-primary);
}

/* Ancres : le titre visé ne passe pas sous l'en-tête collant. */
:where(.wp-block-post-content) :is([id], .wp-block-group[id]) {
	scroll-margin-top: 96px;
}

/* ——————————————————— En-tête collant, blanc translucide ——————————————————— */
header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 40;
	background: color-mix(in srgb, var(--wp--preset--color--base) 94%, transparent);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
@media (max-width: 600px) {
	header.wp-block-template-part { top: 0; } /* la barre d'administration n'est plus fixe sur téléphone */
}
.wpsw-marque .wp-block-site-logo img {
	width: 112px;
	max-height: none;
	/* Le mot-symbole du logo occupe la moitié basse du fichier (losange au-dessus du « i ») :
	   remonter l'image pour aligner le mot-symbole, pas le cadre, sur le texte voisin (menu, bouton). */
	transform: translateY(-19.4%);
}
footer .wpsw-marque .wp-block-site-logo img {
	width: 92px;
}
header .wp-block-navigation a:where(:not(.wp-element-button)):hover {
	color: var(--wizm-violet);
}
header .wp-block-button__link {
	padding: 10px 18px;
	font-size: 0.98rem;
	white-space: nowrap;
}
@media (max-width: 560px) {
	.wpsw-marque .wp-block-site-logo img { width: 80px; }
	header .wp-block-button__link { padding: 9px 14px; font-size: 0.9rem; }
}

/* Boutons : léger soulèvement au survol, pression au clic (coupés sous mouvement réduit). */
.wp-block-button__link {
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.wp-block-button__link:hover { transform: translateY(-1px); }
.wp-block-button__link:active { transform: scale(0.97); }

/* ——————————————————— Voix de wizm et répliques ——————————————————— */

/* « wizm » / « wizm vous écrit » : petite ligne violette, losange du logo devant. */
.wizm-qui,
.wizm-qui-vous {
	font-family: var(--wizm-replique);
	font-weight: 700;
	font-size: 0.9rem;
	line-height: 1.4;
	color: var(--wizm-violet);
}
.wizm-qui {
	display: flex;
	align-items: center;
	gap: 8px;
}
.wizm-qui::before {
	content: "";
	flex: none;
	width: 14px;
	height: 14px;
	background: currentColor;
	-webkit-mask: var(--wizm-losange) center / contain no-repeat;
	mask: var(--wizm-losange) center / contain no-repeat;
}
.wizm-qui-vous {
	text-align: right;
	color: var(--wp--preset--color--muted);
}

/* Réplique du visiteur : bulle violette à droite. */
.wizm-vous {
	margin-left: auto !important; /* la mise en page « contrainte » centre les blocs : la bulle reste à droite */
	margin-right: 0 !important;
	width: fit-content;
	max-width: min(34ch, 100%);
	text-wrap: pretty;
	background: var(--wizm-violet);
	color: var(--wp--preset--color--on-primary);
	font-family: var(--wizm-replique);
	font-weight: 600;
	font-size: clamp(1.1rem, 1.6vw, 1.3rem);
	line-height: 1.4;
	padding: 18px 26px;
	border-radius: 30px 30px 8px 30px;
}
.wizm-vous a { color: inherit; }

/* La voix de wizm : Nunito Sans léger, en grand. */
.wizm-voix {
	font-family: var(--wizm-voix);
	font-weight: 300;
	font-size: clamp(1.5rem, 2.6vw, 2.15rem);
	line-height: 1.3;
	letter-spacing: -0.01em;
	max-width: 30ch;
}
.wizm-voix strong { font-weight: 700; }
.wizm-detail {
	color: var(--wp--preset--color--muted);
	max-width: 52ch;
}
.wizm-intro {
	font-size: clamp(1.2rem, 1.7vw, 1.42rem);
	line-height: 1.5;
	max-width: 42ch;
}

/* Titre du héros : la voix de wizm au plus grand ; le mot fort en 800. */
.wizm-titre {
	max-width: 16ch;
	text-wrap: balance;
}
h1 strong, .wizm-titre strong { font-weight: 800; }

/* Rythme de la conversation (remplace l'écart « aéré » entre blocs, trop large entre une ligne « wizm » et sa voix). */
:is(.wizm-qui-vous) + .wizm-vous { margin-block-start: 8px; }
.wizm-vous + :is(.wizm-qui, .wizm-voix, .wizm-reponse-courte) { margin-block-start: clamp(30px, 4.5vw, 52px); }
.wizm-qui.wizm-qui + * { margin-block-start: 10px; }
.wizm-voix + .wizm-voix { margin-block-start: 0.6em; }
.wizm-voix + .wizm-detail { margin-block-start: 22px; }
:is(.wizm-titre) + :is(.wizm-intro, p) { margin-block-start: 28px; }
:is(.wizm-voix, .wizm-detail, .wizm-intro) + :is(.wizm-qui-vous, .wizm-vous) { margin-block-start: clamp(36px, 5vw, 56px); }
:is(.wizm-echange, .wizm-voix, .wizm-detail) + .wp-block-buttons:not(.wizm-pastilles) { margin-block-start: 36px; }

/* Les trois losanges qui « écrivent » (posés par le script, décoratifs). */
.wizm-ecrit {
	display: none;
	gap: 7px;
	align-items: center;
	height: 1.6em;
	color: var(--wizm-violet);
}
.wizm-ecrit.actif { display: inline-flex; }
.wizm-ecrit i {
	display: block;
	width: 13px;
	height: 13px;
	background: currentColor;
	-webkit-mask: var(--wizm-losange) center / contain no-repeat;
	mask: var(--wizm-losange) center / contain no-repeat;
}
.wpsw-anime .wizm-ecrit i { animation: wizm-pulse 0.9s ease-in-out infinite; }
.wpsw-anime .wizm-ecrit i:nth-child(2) { animation-delay: 0.15s; }
.wpsw-anime .wizm-ecrit i:nth-child(3) { animation-delay: 0.3s; }
@keyframes wizm-pulse {
	0%, 100% { transform: scale(0.6); opacity: 0.4; }
	50% { transform: scale(1); opacity: 1; }
}
/* Les losanges se glissent entre la ligne « wizm » (ou le titre) et le texte : même écart que sans eux. */
.wizm-qui + .wizm-ecrit + :is(.wizm-voix, p) { margin-block-start: 10px; }
.wizm-titre + .wizm-ecrit,
.wizm-titre + .wizm-ecrit + .wizm-intro { margin-block-start: 28px; }
/* Mots écrits un à un : invisibles seulement pendant que le script les écrit. */
.wpsw-anime .wizm-tape { opacity: 0; transition: opacity 0.18s ease; }
.wpsw-anime .wizm-tape.vu { opacity: 1; }

/* ——————————————————— Étiquette d'un temps : numéro dans un cercle ——————————————————— */
.wp-block-post-content { counter-reset: wizm-temps; }
.wizm-etiquette {
	counter-increment: wizm-temps;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-block: 0 !important;
	margin-right: 12px;
	vertical-align: middle;
	font-family: var(--wizm-replique);
	font-weight: 700;
	font-size: 1.1rem;
	line-height: 1.3;
	letter-spacing: 0;
}
.wizm-etiquette::before {
	content: counter(wizm-temps);
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1.5px solid currentColor;
	font-size: 1rem;
}
.wizm-etiquette + .wizm-sous-etiquette {
	display: inline-block;
	margin-block-start: 0;
	vertical-align: middle;
}
.wizm-sous-etiquette {
	font-family: var(--wizm-replique);
	font-weight: 500;
	font-size: 0.98rem;
	color: var(--wp--preset--color--muted);
}
:is(.wizm-etiquette, .wizm-sous-etiquette) + :not(.wizm-sous-etiquette) { margin-block-start: 30px; }
@media (max-width: 560px) {
	.wizm-etiquette + .wizm-sous-etiquette { display: block; padding-left: 50px; margin-block-start: 6px; }
}

/* ——————————————————— Échange à pastilles ——————————————————— */
.wizm-question {
	font-family: var(--wizm-replique);
	font-weight: 600;
	font-size: 1.15rem;
	line-height: 1.4;
}
.wp-block-group.wizm-echange:not(:first-child) { margin-block-start: clamp(56px, 7vw, 96px); }
.wizm-echange > .wizm-question + .wizm-pastilles { margin-block-start: 16px; }
.wizm-pastilles { gap: 12px; }
.wizm-pastilles .wp-block-button .wp-block-button__link {
	font-family: var(--wizm-replique);
	font-weight: 600;
	font-size: 1.02rem;
	line-height: 1.25;
	text-align: left;
	min-height: 44px;
	padding: 12px 20px;
	border-radius: 999px;
	border: 1.5px solid var(--wizm-violet);
	background: var(--wp--preset--color--base);
	color: var(--wizm-violet);
	cursor: pointer;
	touch-action: manipulation;
}
.wizm-pastilles .wp-block-button .wp-block-button__link:hover {
	background: var(--wizm-lilas);
	color: var(--wizm-violet);
	transform: none;
}
.wizm-pastilles .wp-block-button .wp-block-button__link[aria-pressed="true"] {
	background: var(--wizm-violet);
	color: var(--wp--preset--color--on-primary);
}
/* « Je ne sais pas, décidez pour moi » : contour orange, losange orange devant. */
.wizm-pastilles .wizm-decidez .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border-color: var(--wizm-orange);
	color: var(--wizm-encre);
}
.wizm-pastilles .wizm-decidez .wp-block-button__link::before {
	content: "";
	flex: none;
	width: 12px;
	height: 12px;
	background: var(--wizm-orange);
	-webkit-mask: var(--wizm-losange) center / contain no-repeat;
	mask: var(--wizm-losange) center / contain no-repeat;
}
.wizm-pastilles .wizm-decidez .wp-block-button__link:hover {
	background: var(--wizm-peche);
	color: var(--wizm-encre);
}
.wizm-pastilles .wizm-decidez .wp-block-button__link[aria-pressed="true"] {
	background: var(--wizm-orange);
	color: var(--wizm-encre);
}
.wizm-pastilles .wizm-decidez .wp-block-button__link[aria-pressed="true"]::before {
	background: var(--wizm-encre);
}

/* Réponses : une par pastille. Sans JavaScript, toutes se lisent l'une après l'autre, séparées d'un filet pointillé. */
.wizm-echange > .wizm-pastilles + .wizm-reponse,
.wizm-echange > .wizm-reponse + .wizm-reponse { margin-block-start: 36px; }
.wizm-echange:not(.wizm-actif) > .wizm-reponse + .wizm-reponse {
	padding-block-start: 30px;
	border-top: 1px dashed var(--wp--preset--color--border);
}
.wizm-reponse > .wizm-vous + * { margin-block-start: 30px; }
.wizm-annonce {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ——————————————————— Pièce jointe ——————————————————— */
.wizm-piece {
	--wizm-penche: var(--wp--custom--piece--penche, -2deg);
	position: relative;
	background: var(--wp--preset--color--base);
	color: var(--wizm-encre);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--piece--rayon, 26px);
	padding: 18px 18px 20px;
	box-shadow: 0 18px 40px -26px color-mix(in srgb, var(--wp--preset--color--contrast) 35%, transparent);
	transform: rotate(var(--wizm-penche));
}
.wizm-piece.wizm-penche-droite { --wizm-penche: 2deg; }
.wizm-piece.wizm-piece > * { margin-block: 0; }
.wizm-piece .wp-block-image { margin: 0; }
.wizm-piece .wp-block-image img { width: 100%; height: auto; }
.wizm-piece :is(.wp-element-caption, .wizm-legende) {
	margin: 0;
	padding: 14px 6px 0;
	text-align: left;
	font-size: 0.98rem;
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
}
.wizm-piece :is(.wp-element-caption, .wizm-legende) strong {
	font-family: var(--wizm-replique);
	font-weight: 700;
	color: var(--wizm-encre);
}
.wizm-fichier {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--wizm-replique);
	font-weight: 700;
	font-size: 0.95rem;
	line-height: 1.3;
	flex-wrap: wrap;
	padding: 4px 6px 14px;
	border-bottom: 1px dashed var(--wp--preset--color--border);
	margin-bottom: 14px !important;
}
.wizm-fichier::before {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	background: var(--wizm-violet);
	-webkit-mask: var(--wizm-trombone) center / contain no-repeat;
	mask: var(--wizm-trombone) center / contain no-repeat;
}
.wizm-fichier em {
	margin-left: auto;
	font-style: normal;
	font-weight: 500;
	font-size: 0.85rem;
	color: var(--wp--preset--color--muted);
	white-space: nowrap;
}
/* La pièce se pose comme un fichier envoyé (script : wizm-arrive puis posee ; rejouée au retour). */
.wpsw-anime .wizm-piece.wizm-arrive {
	opacity: 0;
	transform: translate(40px, 30px) rotate(calc(var(--wizm-penche) + 7deg));
	transition: opacity 0.45s ease-out, transform 0.6s cubic-bezier(0.2, 0.9, 0.25, 1.15);
}
.wpsw-anime .wizm-piece.wizm-arrive.posee {
	opacity: 1;
	transform: rotate(var(--wizm-penche));
}

/* ——————————————————— Colonnes de la conversation ——————————————————— */
/* Dans une bande pleine largeur, les colonnes prennent la largeur large (le build les met en largeur contenu). */
:is(.is-style-bande-teintee, .is-style-bande-claire, .is-style-section-contrastee, .is-style-bande-sombre) > .wp-block-columns {
	max-width: var(--wp--style--global--wide-size);
}
/* Héros : écran plein (signalement n° 96), respiration en haut et en bas, séparé du fil qui suit.
   padding-block fait la marge même si le contenu dépasse 100svh ; min-height complète en dessous. */
.wp-block-post-content > .wp-block-columns:has(> .wp-block-column > .wizm-piece) {
	min-height: 100svh;
	padding-block: clamp(48px, 8vw, 96px);
	box-sizing: border-box;
	margin-block-end: clamp(56px, 8vw, 120px) !important;
}
/* Texte 7, pièce jointe 5, alignés en haut, la pièce un peu plus bas (maquette). */
.wp-block-columns:has(> .wp-block-column > .wizm-piece) {
	column-gap: clamp(36px, 6vw, 100px);
	align-items: flex-start !important;
}
@media (min-width: 901px) {
	.wp-block-columns:has(> .wp-block-column > .wizm-piece) > .wp-block-column:first-child { flex-grow: 7; }
	.wp-block-columns:has(> .wp-block-column > .wizm-piece) > .wp-block-column:last-child { flex-grow: 5; }
	.wp-block-column > .wizm-piece:first-child { margin-top: 40px; }
	.wp-block-column > * + .wizm-piece { margin-top: 56px; }
}
/* Entre 782 et 900 px, deux colonnes seraient trop étroites pour la conversation : empilées. */
@media (min-width: 782px) and (max-width: 900px) {
	.wp-block-columns:has(> .wp-block-column > .wizm-piece) { flex-wrap: wrap !important; }
	.wp-block-columns:has(> .wp-block-column > .wizm-piece) > .wp-block-column { flex-basis: 100% !important; }
}
@media (max-width: 900px) {
	.wizm-piece { max-width: 34rem; }
	.wp-block-column > * + .wizm-piece { margin-top: 40px; }
}

/* ——————————————————— Le fil des quatre temps (refait au tour 2, signalement n° 100) ———————————————————
 * « Pas sexy, faire mieux et plus impactant » : une bande encre en bulle, le titre dans la voix de wizm en grand,
 * puis quatre marches qui montent (le parcours avance, comme les couches s'empilent) : grand numéro, nom, ligne
 * d'explication, jauge 1/4 → 4/4 en violet puis orange. Le temps entier est cliquable ; au survol il se lève et
 * passe au violet. Les marches montent l'une après l'autre à l'arrivée (script : wizm-arrive / posee, rejouées
 * au retour). Compteur propre (temps) : en grille, les li ne sont plus des list-item et counter(list-item)
 * valait 1 partout dans Safari. */
.wizm-fil {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	column-gap: clamp(24px, 5vw, 72px);
	align-items: end;
	padding: clamp(36px, 5vw, 72px) clamp(24px, 4.5vw, 64px) clamp(28px, 4vw, 56px);
	background:
		radial-gradient(60% 90% at 100% 0%, color-mix(in srgb, var(--wizm-violet) 55%, transparent) 0%, transparent 70%),
		radial-gradient(40% 60% at 0% 100%, color-mix(in srgb, var(--wizm-orange) 22%, transparent) 0%, transparent 70%),
		var(--wizm-encre);
	color: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--bulle--grand, clamp(36px, 6vw, 90px)) var(--wp--custom--bulle--grand, clamp(36px, 6vw, 90px)) var(--wp--custom--bulle--grand, clamp(36px, 6vw, 90px)) var(--wp--custom--bulle--pointe, 14px);
}
/* Le losange du logo, géant, coupé par le bord haut droit. */
.wizm-fil::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: -14%;
	right: -6%;
	width: clamp(220px, 30vw, 440px);
	aspect-ratio: 1;
	background: linear-gradient(135deg, var(--wizm-violet), color-mix(in srgb, var(--wizm-violet) 40%, var(--wizm-orange)));
	opacity: 0.35;
	-webkit-mask: var(--wizm-losange) center / contain no-repeat;
	mask: var(--wizm-losange) center / contain no-repeat;
}
.wizm-fil.wizm-fil > * { grid-column: 1; margin-block: 0; }
.wizm-fil > :is(h2, h3, .wizm-fil-titre) {
	font-family: var(--wizm-voix);
	font-weight: 300;
	font-size: clamp(2rem, 4.2vw, 3.5rem);
	line-height: 1.06;
	letter-spacing: -0.02em;
	max-width: 18ch;
	color: var(--wp--preset--color--base);
}
.wizm-fil > :is(h2, h3, .wizm-fil-titre) strong { font-weight: 800; color: var(--wizm-lilas-sur-violet); }
.wizm-fil > p {
	grid-column: 2 !important;
	grid-row: 1;
	align-self: end;
	font-size: 1.08rem;
	line-height: 1.5;
	color: var(--wizm-clair-sur-encre);
	max-width: 30ch;
}
.wizm-fil > .wizm-rail { grid-column: 1 / -1 !important; margin-top: clamp(40px, 6vw, 84px) !important; }
.wizm-rail {
	counter-reset: temps;
	position: relative;
	list-style: none;
	margin: 0;
	padding: calc(3 * var(--wizm-marche)) 0 0 !important;
	--wizm-marche: clamp(14px, 2.4vw, 34px);
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(10px, 1.4vw, 18px);
	align-items: end;
}
.wizm-rail > li {
	--i: 0;
	counter-increment: temps;
	position: relative;
	margin: 0;
	padding: 22px 22px 30px;
	min-height: clamp(190px, 18vw, 240px);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	border-radius: 24px 24px 24px 8px;
	background: color-mix(in srgb, var(--wp--preset--color--base) 7%, transparent);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wp--preset--color--base) 14%, transparent);
	font-size: 1rem;
	line-height: 1.45;
	color: var(--wizm-clair-sur-encre);
	transform: translateY(calc(var(--i) * -1 * var(--wizm-marche)));
	transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.25s ease, opacity 0.5s ease;
}
.wizm-rail > li:nth-child(2) { --i: 1; }
.wizm-rail > li:nth-child(3) { --i: 2; }
.wizm-rail > li:nth-child(4) { --i: 3; }
/* Grand numéro du temps, et sa jauge (1/4 … 4/4). */
.wizm-rail > li::before {
	content: counter(temps, decimal-leading-zero);
	display: block;
	margin-bottom: auto;
	padding-bottom: 18px;
	font-family: var(--wizm-replique);
	font-weight: 700;
	font-size: clamp(3rem, 5.2vw, 4.8rem);
	line-height: 0.9;
	letter-spacing: -0.04em;
	color: var(--wizm-lilas-sur-violet);
	transition: color 0.25s ease;
}
.wizm-rail > li::after {
	content: "";
	position: absolute;
	left: 22px;
	right: 22px;
	bottom: 14px;
	height: 4px;
	border-radius: 4px;
	background:
		linear-gradient(90deg, var(--wizm-violet), var(--wizm-orange)) 0 0 / calc((var(--i) + 1) * 25%) 100% no-repeat,
		color-mix(in srgb, var(--wp--preset--color--base) 16%, transparent);
}
.wizm-rail > li > br { display: none; }
.wizm-rail > li a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 6px;
	font-family: var(--wizm-replique);
	font-weight: 700;
	font-size: clamp(1.2rem, 1.7vw, 1.5rem);
	line-height: 1.15;
	color: var(--wp--preset--color--base);
	text-decoration: none;
}
.wizm-rail > li a strong { font-weight: 700; font-size: inherit; }
/* Une flèche qui avance au survol. */
.wizm-rail > li a > strong::after { content: "\2192"; margin-left: 10px; display: inline-block; transition: transform 0.25s ease; }
.wizm-rail > li:is(:hover, :focus-within) a > strong::after { transform: translateX(6px); }
/* Tout le temps est cliquable (le lien couvre l'élément). */
.wizm-rail > li a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}
.wizm-rail > li a:focus-visible { outline: none; }
.wizm-rail > li a:focus-visible::after { outline: 3px solid var(--wp--preset--color--base); outline-offset: 3px; border-radius: 24px 24px 24px 8px; }
.wizm-rail > li:is(:hover, :focus-within) {
	background: var(--wizm-violet);
	transform: translateY(calc(var(--i) * -1 * var(--wizm-marche) - 10px));
	color: var(--wp--preset--color--on-primary);
}
.wizm-rail > li:is(:hover, :focus-within)::before { color: var(--wp--preset--color--on-primary); }
/* Trois losanges « qui écrivent » au-dessus du temps survolé (posés par le script). */
.wizm-rail > li > .wizm-ecrit {
	position: absolute;
	right: 22px;
	top: 26px;
	display: inline-flex;
	gap: 5px;
	height: 14px;
	color: var(--wp--preset--color--on-primary);
	opacity: 0;
	transition: opacity 0.2s ease;
	pointer-events: none;
}
.wizm-rail > li > .wizm-ecrit i { width: 11px; height: 11px; }
.wizm-rail > li:is(:hover, :focus-within) > .wizm-ecrit { opacity: 1; }
.wpsw-anime .wizm-rail > li > .wizm-ecrit i { animation-play-state: paused; }
.wpsw-anime .wizm-rail > li:is(:hover, :focus-within) > .wizm-ecrit i { animation-play-state: running; }
/* Arrivée : les marches montent l'une après l'autre (rejouée au retour). */
.wpsw-anime .wizm-fil.wizm-arrive .wizm-rail > li { transform: translateY(60px); opacity: 0; }
.wpsw-anime .wizm-fil.wizm-arrive.posee .wizm-rail > li {
	transform: translateY(calc(var(--i) * -1 * var(--wizm-marche)));
	opacity: 1;
	transition-delay: calc(var(--i) * 120ms + 100ms);
}
.wpsw-anime .wizm-fil.wizm-arrive.posee .wizm-rail > li:is(:hover, :focus-within) {
	transform: translateY(calc(var(--i) * -1 * var(--wizm-marche) - 10px));
	transition-delay: 0s;
}
@media (max-width: 900px) {
	.wizm-fil { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
	.wizm-fil > p { grid-column: 1 !important; grid-row: auto; }
	.wizm-fil > .wizm-rail { margin-top: 18px !important; }
	.wizm-rail { grid-template-columns: minmax(0, 1fr); padding: 0 !important; gap: 10px; }
	.wizm-rail > li,
	.wpsw-anime .wizm-fil.wizm-arrive.posee .wizm-rail > li { transform: none; }
	.wizm-rail > li {
		min-height: 0;
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		column-gap: 18px;
		align-items: center;
		padding: 16px 18px 24px;
	}
	.wizm-rail > li::before { grid-row: 1 / span 3; margin: 0; padding: 0; font-size: 2.6rem; min-width: 1.35em; }
	.wizm-rail > li::after { left: 18px; right: 18px; bottom: 10px; height: 3px; }
	.wizm-rail > li:is(:hover, :focus-within),
	.wpsw-anime .wizm-fil.wizm-arrive.posee .wizm-rail > li:is(:hover, :focus-within) { transform: none; }
	.wizm-rail > li > .wizm-ecrit { display: none; }
}

/* ——————————————————— Inquiétudes et réponses courtes (une colonne) ——————————————————— */
.wizm-repliques > :is(h2, .wp-block-heading) {
	font-family: var(--wizm-replique);
	font-weight: 700;
	font-size: clamp(1.7rem, 3vw, 2.4rem);
	line-height: 1.2;
	max-width: 22ch;
	margin-bottom: clamp(40px, 6vw, 72px);
}
.wizm-repliques > .wizm-vous { margin-block-start: 0; }
.wizm-repliques > .wizm-reponse-courte + .wizm-vous { margin-block-start: clamp(44px, 6vw, 72px); }
.wizm-repliques > .wizm-vous + .wizm-reponse-courte { margin-block-start: 22px; }
.wizm-reponse-courte {
	position: relative;
	padding-left: 30px;
	font-size: 1.15rem;
	line-height: 1.55;
	max-width: 46ch;
}
.wizm-reponse-courte::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 14px;
	height: 14px;
	background: var(--wizm-violet);
	-webkit-mask: var(--wizm-losange) center / contain no-repeat;
	mask: var(--wizm-losange) center / contain no-repeat;
}

/* ——————————————————— Questions fréquentes : chaque question est une réplique du visiteur ———————————————————
 * Restylage assumé du bloc Détails de wpsw-base (DESIGN.md) : la question en bulle violette à droite,
 * la réponse dessous, à gauche, avec le losange de wizm. */
.wp-block-post-content .wp-block-details {
	border: 0;
	padding-block: 0;
}
.wp-block-post-content .wp-block-details + .wp-block-details { margin-block-start: clamp(28px, 4vw, 44px); }
.wp-block-post-content .wp-block-details > summary {
	margin-left: auto;
	width: fit-content;
	max-width: min(40ch, 100%);
	gap: 14px;
	align-items: center;
	background: var(--wizm-violet);
	color: var(--wp--preset--color--on-primary);
	font-family: var(--wizm-replique);
	font-weight: 600;
	font-size: clamp(1.05rem, 1.5vw, 1.2rem);
	line-height: 1.4;
	padding: 16px 24px;
	border-radius: 30px 30px 8px 30px;
	transition: background-color 0.2s ease;
}
.wp-block-post-content .wp-block-details > summary::after { color: inherit; }
.wp-block-post-content .wp-block-details > summary:hover {
	color: var(--wp--preset--color--on-primary);
	background: color-mix(in srgb, var(--wp--preset--color--primary) 84%, var(--wp--preset--color--contrast));
}
.wp-block-post-content .wp-block-details > summary:focus-visible {
	outline: 3px solid var(--wizm-orange);
	outline-offset: 3px;
	border-radius: 30px 30px 8px 30px;
}
.wp-block-post-content .wp-block-details[open] > summary { margin-block-end: 22px; }
.wp-block-post-content .wp-block-details > :not(summary) {
	position: relative;
	padding-left: 30px;
	max-width: 52ch;
	font-size: 1.1rem;
	line-height: 1.6;
}
.wp-block-post-content .wp-block-details > summary + * { margin-block-start: 0; }
.wp-block-post-content .wp-block-details > summary + :not(summary)::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 14px;
	height: 14px;
	background: var(--wizm-violet);
	-webkit-mask: var(--wizm-losange) center / contain no-repeat;
	mask: var(--wizm-losange) center / contain no-repeat;
}

/* ——————————————————— Bande lavande ——————————————————— */
.is-style-bande-teintee .wizm-detail { color: var(--wp--preset--color--muted); }

/* En-tête des pages intérieures (section en-tete-page : première bande lavande de la page) : une bulle de wizm
 * qui descend de l'en-tête — coins bas arrondis, pointe en bas à gauche ; titre dans la voix de wizm. */
.wp-block-post-content > .is-style-bande-teintee:first-child:has(h1) {
	border-radius: 0 0 var(--wp--custom--bulle--grand, clamp(36px, 6vw, 90px)) var(--wp--custom--bulle--pointe, 14px);
	margin-left: calc(var(--wp--style--root--padding-left) * -1 + var(--wizm-bord-bulle)) !important;
	margin-right: calc(var(--wp--style--root--padding-right) * -1 + var(--wizm-bord-bulle)) !important;
}
.wp-block-post-content > .is-style-bande-teintee:first-child:has(h1) h1 { max-width: 18ch; }
.wp-block-post-content > .is-style-bande-teintee:first-child:has(h1) h1 ~ p:not([class*="is-style"]) {
	font-size: clamp(1.2rem, 1.7vw, 1.42rem);
	line-height: 1.5;
	max-width: 42ch;
}
.wp-block-post-content > .is-style-bande-teintee:first-child .is-style-surtitre {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--wizm-violet);
}
.wp-block-post-content > .is-style-bande-teintee:first-child .is-style-surtitre::before {
	content: "";
	flex: none;
	width: 14px;
	height: 14px;
	background: currentColor;
	-webkit-mask: var(--wizm-losange) center / contain no-repeat;
	mask: var(--wizm-losange) center / contain no-repeat;
}

/* ——————————————————— La grande bulle violette (style « Section contrastée ») ———————————————————
 * La parole est au visiteur : une bulle géante, en retrait des bords pour qu'on voie sa forme, coins très
 * arrondis sauf en bas à droite, queue de bulle qui sort du cadre. */
.wp-block-post-content > .alignfull.is-style-section-contrastee,
.wp-block-post-content .alignfull.is-style-section-contrastee {
	position: relative;
	margin-left: calc(var(--wp--style--root--padding-left) * -1 + var(--wizm-bord-bulle)) !important;
	margin-right: calc(var(--wp--style--root--padding-right) * -1 + var(--wizm-bord-bulle)) !important;
	padding-left: clamp(20px, 5vw, 72px) !important;
	padding-right: clamp(20px, 5vw, 72px) !important;
	border-radius: var(--wp--custom--bulle--grand, clamp(36px, 6vw, 90px)) var(--wp--custom--bulle--grand, clamp(36px, 6vw, 90px)) var(--wp--custom--bulle--pointe, 14px) var(--wp--custom--bulle--grand, clamp(36px, 6vw, 90px));
}
/* Au-delà de la largeur « large » du thème, --wizm-bord-bulle (2,5 vw, 40px au plus) ne retire presque plus rien
   aux bords : la bulle d'un échange (texte court) s'étirait alors sur tout l'écran, disproportionnée. Grand
   écran : elle se recentre à la largeur « large » plutôt que de continuer à suivre le viewport. */
@media (min-width: 1240px) {
	.wp-block-post-content > .alignfull.is-style-section-contrastee,
	.wp-block-post-content .alignfull.is-style-section-contrastee {
		max-width: var(--wp--style--global--wide-size);
		margin-left: auto !important;
		margin-right: auto !important;
	}
}
.is-style-section-contrastee.alignfull::after {
	content: "";
	position: absolute;
	right: max(-22px, calc(4px - var(--wizm-bord-bulle)));
	bottom: -40px;
	width: 96px;
	height: 54px;
	background: var(--wizm-violet);
	clip-path: path("M0 0 H74 C 74 22 82 40 96 54 C 60 54 24 36 0 0 Z");
	pointer-events: none;
}
/* Place pour la queue, et la bulle posée sur du blanc (jamais collée à une bande voisine). */
:root body .wp-block-post-content > .alignfull.is-style-section-contrastee:not(:first-child) { margin-block-start: var(--wp--preset--spacing--60); }
:root body .wp-block-post-content > .alignfull.is-style-section-contrastee + *,
:root body .wp-block-post-content > .alignfull.is-style-section-contrastee + .alignfull { margin-block-start: calc(var(--wp--preset--spacing--60) + 40px); }
@media (max-width: 560px) {
	.is-style-section-contrastee.alignfull::after {
		right: max(-8px, calc(2px - var(--wizm-bord-bulle)));
		bottom: -30px;
		width: 66px;
		height: 38px;
		clip-path: path("M0 0 H52 C 52 16 56 28 66 38 C 42 38 16 26 0 0 Z");
	}
}
/* Dedans : la réplique du visiteur en blanc, les petites lignes en lilas, les pastilles à contour blanc. */
.is-style-section-contrastee :is(.wizm-qui, .wizm-qui-vous, .wizm-sous-etiquette, .wizm-detail) { color: var(--wizm-lilas-sur-violet); }
.is-style-section-contrastee .wizm-etiquette { color: var(--wp--preset--color--on-primary); }
.is-style-section-contrastee .wizm-ecrit { color: var(--wp--preset--color--on-primary); }
.is-style-section-contrastee .wizm-vous {
	background: var(--wp--preset--color--on-primary);
	color: var(--wizm-violet);
}
.is-style-section-contrastee .wizm-voix {
	font-size: clamp(1.8rem, 3.4vw, 2.9rem);
	line-height: 1.15;
	max-width: 19ch;
}
.is-style-section-contrastee .wizm-reponse .wizm-voix {
	font-size: clamp(1.4rem, 2.2vw, 1.8rem);
	line-height: 1.35;
	max-width: 30ch;
}
.is-style-section-contrastee .wizm-detail { font-size: 1.15rem; line-height: 1.6; }
.is-style-section-contrastee .wizm-detail a { color: var(--wp--preset--color--on-primary); }
.is-style-section-contrastee .wizm-pastilles .wp-block-button .wp-block-button__link {
	background: transparent;
	border-color: var(--wp--preset--color--on-primary);
	color: var(--wp--preset--color--on-primary);
}
.is-style-section-contrastee .wizm-pastilles .wp-block-button .wp-block-button__link:hover {
	background: color-mix(in srgb, var(--wp--preset--color--on-primary) 12%, transparent);
}
.is-style-section-contrastee .wizm-pastilles .wp-block-button .wp-block-button__link[aria-pressed="true"] {
	background: var(--wp--preset--color--on-primary);
	color: var(--wizm-violet);
}
.is-style-section-contrastee .wizm-pastilles .wizm-decidez .wp-block-button__link {
	border: 2px solid var(--wizm-orange);
	color: var(--wp--preset--color--on-primary);
}
.is-style-section-contrastee .wizm-pastilles .wizm-decidez .wp-block-button__link[aria-pressed="true"] {
	background: var(--wizm-orange);
	color: var(--wizm-encre);
}
.is-style-section-contrastee .wizm-echange:not(.wizm-actif) > .wizm-reponse + .wizm-reponse {
	border-top-color: color-mix(in srgb, var(--wp--preset--color--on-primary) 30%, transparent);
}
.is-style-section-contrastee .wizm-piece :focus-visible { outline-color: var(--wizm-violet); }

/* ——————————————————— Appel final sur encre : « À vous la parole » ——————————————————— */
.is-style-bande-sombre :is(h2, .wp-block-heading) {
	font-family: var(--wizm-voix);
	font-weight: 300;
	line-height: 1.08;
	letter-spacing: -0.02em;
	max-width: 16ch;
}
.is-style-bande-sombre :is(h2, .wp-block-heading) strong { font-weight: 800; }
.is-style-bande-sombre p:not(.wizm-qui, .wizm-voix) { color: var(--wizm-clair-sur-encre); max-width: 46ch; }
.is-style-bande-sombre .wizm-qui { color: var(--wizm-lilas); }
/* Un seul code couleur pour l'appel : violet partout (correction de la critique). */
.is-style-bande-sombre .wp-block-button:not(.is-style-outline) > .wp-block-button__link {
	background: var(--wizm-violet);
	color: var(--wp--preset--color--on-primary);
	font-size: 1.2rem;
	padding: 18px 30px;
}
.is-style-bande-sombre .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover {
	background: var(--wp--preset--color--base);
	color: var(--wizm-violet);
}
.is-style-bande-sombre .wp-block-columns { align-items: flex-end !important; }
@media (max-width: 900px) {
	.is-style-bande-sombre .wp-block-columns { align-items: flex-start !important; }
}

/* ——————————————————— Mouvement réduit : rien ne bouge ——————————————————— */
@media (prefers-reduced-motion: reduce) {
	.wp-block-button__link,
	.wizm-rail > li,
	.wizm-rail > li > .wizm-ecrit { transition: none; }
	.wp-block-button__link:hover,
	.wp-block-button__link:active { transform: none; }
	.wizm-ecrit i { animation: none !important; }
	.wizm-piece { transition: none !important; }
}

/* ——————————————————— Page « en construction » (templates/en-construction.html) ——————————————————— */
.wizm-attente .wp-block-site-logo img { width: 160px; }
.wizm-attente .wizm-voix { max-width: 24ch; text-align: center; }
.wizm-attente .wizm-vous { margin-left: 0 !important; margin-top: var(--wp--preset--spacing--50); }
.wizm-attente .wizm-reponse-courte { margin-top: 18px; }

/* ——————————————————— Corrections de l'autocritique (runs/autocritique.md, 05/10/2026) ——————————————————— */
/* En-têtes intérieurs : surtitre, H1 et chapeau partent du même bord ; voix et détails alignés à gauche. */
.wp-block-post-content > .is-style-bande-teintee:first-child:has(h1) > :is(h1, p) { margin-left: 0 !important; }
.is-layout-constrained > :is(.wizm-voix, .wizm-detail, .wizm-intro, .wizm-qui) { margin-left: 0 !important; }
/* Appel final : l'ampleur de « À vous la parole » (le type appel-bandeau n'a pas de taille de titre). */
.is-style-bande-sombre :is(h2, .wp-block-heading) { font-size: clamp(2rem, 4.4vw, 3.6rem); }
/* Titre et texte des colonnes (étapes, pictos, atouts) : le titre reste collé à ce qu'il annonce. */
.wp-block-column > :is(h3, h4, .wp-block-heading) + :is(p, ul) { margin-block-start: 12px; }
/* Pas de bande blanche entre l'appel sur encre et le pied lavande. */
.wp-site-blocks > footer.wp-block-template-part { margin-block-start: 0; }
/* Étiquette sans numéro (un temps isolé sur une page intérieure). */
.wizm-etiquette.wizm-sans-numero { counter-increment: none; }
.wizm-etiquette.wizm-sans-numero::before { content: none; }
.wizm-etiquette.wizm-sans-numero + .wizm-sous-etiquette { padding-left: 0; }
/* Réponses aux inquiétudes : la voix de wizm, à sa taille. */
.wizm-reponse-courte {
	font-family: var(--wizm-voix);
	font-weight: 300;
	font-size: clamp(1.2rem, 1.8vw, 1.5rem);
	line-height: 1.4;
}
.wizm-reponse-courte::before { top: 0.5em; }
.wizm-repliques > :is(h2, .wp-block-heading) { max-width: 26ch; }
/* Bouton du formulaire : pilule, comme tous les appels. */
.wpcf7-submit {
	border-radius: 999px !important;
	font-family: var(--wizm-replique);
	font-weight: 700;
	padding: 16px 30px;
}
/* Emplacements à remplacer dans une pièce jointe : cadre pointillé, coins doux. */
.wizm-piece .wp-block-image.a-valider img { border-radius: 14px; outline: 2px dashed var(--wp--preset--color--border); outline-offset: -2px; }

/* ═══════════════════ Retours de recette, tour 1 (05/10/2026) ═══════════════════
 * « Pas un site trop linéaire » : matières alternées (captures réelles de l'outil ↔ dessins), chevauchements,
 * les quatre temps en couches empilées sur un schéma 3D (chaque page ajoute sa couche), plus de mouvement.
 * Classes posées dans l'éditeur sur des blocs natifs (Groupe, Image) ; retirées, le bloc redevient ordinaire. */

/* ——————————————————— Pile de couches 3D (.wizm-pile) ———————————————————
 * Un Groupe « wizm-pile » contient quatre blocs Image « wizm-couche » (une capture par temps, liée à sa page,
 * légende « <strong>n</strong> Nom »). La classe wizm-etape-N dit la page : couches passées calmes, couche N cerclée
 * de violet, couches à venir en pointillé. wizm-etape-tout : toutes posées ; wizm-etape-0 : tout reste à poser.
 * Variables du script : --ouvre (0 → 1 au défilement : la pile s'ouvre), --px / --py (inclinaison au pointeur). */
.wizm-pile {
	--ecart: clamp(30px, 4.4vw, 70px);
	--rx: calc(56deg - var(--py, 0) * 8deg);
	--rz: calc(-36deg + var(--px, 0) * 10deg);
	position: relative;
	aspect-ratio: 16 / 10;
	width: 100%;
	margin-left: clamp(70px, 11vw, 170px) !important; /* place des étiquettes, à gauche des couches */
	perspective: 2400px;
	perspective-origin: 50% 0%;
	margin-top: calc(var(--ecart) * 2.6) !important;
	margin-bottom: calc(var(--ecart) * 0.4) !important;
}
.wizm-pile > .wizm-couche {
	--i: 0;
	--leve: 0px;
	position: absolute;
	inset: 0;
	margin: 0 !important;
	transform-style: preserve-3d;
	transform: rotateX(var(--rx)) rotateZ(var(--rz)) translateZ(calc(var(--i) * var(--ecart) * (1 + var(--ouvre, 0) * 0.8) + var(--leve)));
	transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.5s ease;
	will-change: transform; /* composée à part : défilement et pointeur la redessinent en continu (retouche du 05/10/2026) */
}
.wizm-pile > .wizm-couche:nth-child(2) { --i: 1; }
.wizm-pile > .wizm-couche:nth-child(3) { --i: 2; }
.wizm-pile > .wizm-couche:nth-child(4) { --i: 3; }
.wizm-couche > a,
.wizm-couche img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 14px;
}
.wizm-couche img {
	object-fit: cover;
	object-position: left top;
	background: var(--wp--preset--color--base);
	outline: 1px solid var(--wp--preset--color--border);
	box-shadow: -28px 36px 50px -24px color-mix(in srgb, var(--wizm-encre) 45%, transparent);
	transition: opacity 0.4s ease, filter 0.4s ease, box-shadow 0.4s ease;
}
/* Légende : une étiquette debout sur le coin de la couche, tournée vers le visiteur. */
.wizm-couche .wp-element-caption {
	position: absolute;
	left: 0;
	top: 0;
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 14px 5px 5px;
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	color: var(--wizm-encre);
	font-family: var(--wizm-replique);
	font-weight: 700;
	font-size: clamp(0.82rem, 1.05vw, 1rem);
	line-height: 1.2;
	white-space: nowrap;
	box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--wizm-encre) 45%, transparent);
	transform: translate(calc(-100% - 14px), -40%) rotateZ(calc(-1 * var(--rz))) rotateX(calc(-1 * var(--rx)));
	transform-origin: right bottom;
	pointer-events: none;
}
.wizm-couche .wp-element-caption strong {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--wizm-lilas);
	color: var(--wizm-violet);
}
.wizm-couche > a:focus-visible { outline: none; }
.wizm-couche > a:focus-visible img { outline: 4px solid var(--wizm-orange); outline-offset: 4px; }
@media (hover: hover) {
	.wizm-pile > .wizm-couche:is(:hover, :focus-within) { --leve: 26px; }
}
/* La couche de la page : cerclée de violet, étiquette violette. */
:is(.wizm-etape-1 > :nth-child(1), .wizm-etape-2 > :nth-child(2), .wizm-etape-3 > :nth-child(3), .wizm-etape-4 > :nth-child(4)) img {
	outline: 3px solid var(--wizm-violet);
	box-shadow: 0 0 0 10px color-mix(in srgb, var(--wizm-violet) 16%, transparent), -28px 36px 60px -20px color-mix(in srgb, var(--wizm-violet) 55%, transparent);
}
:is(.wizm-etape-1 > :nth-child(1), .wizm-etape-2 > :nth-child(2), .wizm-etape-3 > :nth-child(3), .wizm-etape-4 > :nth-child(4)) .wp-element-caption {
	background: var(--wizm-violet);
	color: var(--wp--preset--color--on-primary);
}
:is(.wizm-etape-1 > :nth-child(1), .wizm-etape-2 > :nth-child(2), .wizm-etape-3 > :nth-child(3), .wizm-etape-4 > :nth-child(4)) .wp-element-caption strong {
	background: var(--wp--preset--color--on-primary);
}
/* Couches déjà posées : plus calmes. */
:is(.wizm-etape-2 > :nth-child(1), .wizm-etape-3 > :nth-child(-n+2), .wizm-etape-4 > :nth-child(-n+3)) img { filter: saturate(0.55); }
/* Couches à venir : leur emplacement en pointillé (la capture apparaît au survol). */
:is(.wizm-etape-0 > *, .wizm-etape-1 > :nth-child(n+2), .wizm-etape-2 > :nth-child(n+3), .wizm-etape-3 > :nth-child(4)) > a {
	outline: 2px dashed color-mix(in srgb, var(--wizm-violet) 55%, transparent);
	outline-offset: -2px;
	background: color-mix(in srgb, var(--wizm-violet) 5%, transparent);
}
:is(.wizm-etape-0 > *, .wizm-etape-1 > :nth-child(n+2), .wizm-etape-2 > :nth-child(n+3), .wizm-etape-3 > :nth-child(4)) img {
	opacity: 0.07; /* au-dessus du seuil « contenu masqué » (0,05) : une trace, pas un brouillage */
	filter: grayscale(1);
	box-shadow: none;
}
:is(.wizm-etape-0 > *, .wizm-etape-1 > :nth-child(n+2), .wizm-etape-2 > :nth-child(n+3), .wizm-etape-3 > :nth-child(4)):is(:hover, :focus-within) img { opacity: 0.6; filter: none; }
:is(.wizm-etape-0 > *, .wizm-etape-1 > :nth-child(n+2), .wizm-etape-2 > :nth-child(n+3), .wizm-etape-3 > :nth-child(4)) .wp-element-caption {
	background: color-mix(in srgb, var(--wp--preset--color--base) 70%, transparent);
	color: var(--wp--preset--color--muted);
	box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--wizm-violet) 40%, transparent);
}
/* Arrivée (script : wizm-arrive puis posee ; rejouée au retour) : les couches tombent l'une après l'autre. */
.wpsw-anime .wizm-pile.wizm-arrive > .wizm-couche {
	--leve: calc(var(--ecart) * 4);
	opacity: 0;
	transition-delay: 0s;
}
.wpsw-anime .wizm-pile.wizm-arrive.posee > .wizm-couche {
	--leve: 0px;
	opacity: 1;
	transition-delay: calc(var(--i) * 140ms + 120ms);
}
.wpsw-anime .wizm-pile.wizm-arrive.posee > .wizm-couche:is(:hover, :focus-within) { --leve: 26px; transition-delay: 0s; }

/* Héros des pages : texte à gauche, la pile à droite qui déborde vers le bord ; fond lavande en bulle. */
.wizm-heros-pile {
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	column-gap: clamp(24px, 5vw, 80px);
	align-items: center;
	min-height: min(calc(100svh - 110px), 900px);
	padding-block: clamp(40px, 6vw, 88px) clamp(64px, 9vw, 130px);
	box-sizing: border-box;
}
.wizm-heros-pile.wizm-heros-pile > * { margin-block: 0; }
.wizm-heros-pile::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: calc(-1 * var(--wp--style--root--padding-top, 0px) - 80px);
	bottom: 0;
	left: calc(50% - 50vw + var(--wizm-bord-bulle));
	right: calc(50% - 50vw + var(--wizm-bord-bulle));
	border-radius: 0 0 var(--wp--custom--bulle--grand, clamp(36px, 6vw, 90px)) var(--wp--custom--bulle--pointe, 14px);
	background:
		radial-gradient(55% 75% at 80% 45%, color-mix(in srgb, var(--wizm-violet) 15%, transparent) 0%, transparent 70%),
		linear-gradient(180deg, var(--wp--preset--color--surface) 0%, color-mix(in srgb, var(--wp--preset--color--surface) 35%, var(--wp--preset--color--base)) 100%);
}
.wizm-heros-texte > .wizm-qui + .wizm-titre { margin-block-start: 18px; }
.wizm-heros-texte .wizm-titre { font-size: clamp(2.6rem, 5.4vw, 4.6rem); line-height: 1.04; letter-spacing: -0.02em; }
.wizm-heros-texte .wizm-titre + * { margin-block-start: 28px; }
.wizm-heros-pile > .wizm-pile { justify-self: start; }
/* Pages qui ne sont pas une étape (FAQ, Contact ; tour 2, signalements n° 103 et 104) : une pièce jointe dessinée
 * propre à la page, en grand, à la place de la pile. */
.wizm-heros-pile > .wizm-piece-heros { justify-self: center; width: min(100%, 540px); padding: 22px 22px 24px; }
.wizm-heros-pile > .wizm-piece-heros.wizm-penche-droite { --wizm-penche: 3deg; }
@media (max-width: 900px) {
	.wizm-heros-pile { grid-template-columns: minmax(0, 1fr); min-height: 0; row-gap: 12px; }
	.wizm-heros-pile > .wizm-piece-heros { justify-self: start; width: min(calc(100% - 16px), 30rem); margin-top: 28px; }
	.wizm-pile { width: calc(100% - 100px); --ecart: clamp(34px, 9vw, 52px); max-width: 620px; margin-left: 100px !important; }
	.wizm-couche .wp-element-caption { font-size: 0.74rem; gap: 5px; padding: 3px 9px 3px 3px; }
	.wizm-couche .wp-element-caption strong { width: 20px; height: 20px; }
}
/* ——————————————————— Captures en biais et collages qui se chevauchent ———————————————————
 * « wizm-ecran » (bloc Image) : une capture réelle, en biais, qui sort de sa colonne ; « wizm-biais-gauche » la
 * tourne de l'autre côté. « wizm-collage » (Groupe) : une capture, puis une pièce jointe dessinée qui la chevauche.
 * Variable du script : --p (−1 en haut de l'écran … 1 en bas), une parallaxe légère. */
.wizm-ecran {
	--biais: -16deg;
	margin: 0 !important;
	width: 116%;
	max-width: none !important;
	transform-origin: left center;
	transform: perspective(1600px) rotateY(calc(var(--biais) + var(--p, 0) * 5deg)) rotateX(5deg) translateY(calc(var(--p, 0) * -24px));
}
.wizm-ecran.wizm-biais-gauche,
.wizm-inverse > .wizm-ecran {
	--biais: 16deg;
	transform-origin: right center;
}
/* Dans un collage inversé (colonne de gauche), la capture sort par le bord gauche ; seule, en colonne de droite,
   elle reste dans sa colonne et ne recouvre jamais le texte voisin. */
.wizm-inverse > .wizm-ecran { margin-left: -16% !important; }
.wizm-ecran.wizm-biais-gauche { width: 108%; }
.wizm-ecran img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 16px;
	outline: 1px solid var(--wp--preset--color--border);
	box-shadow: -30px 40px 70px -36px color-mix(in srgb, var(--wizm-encre) 55%, transparent);
}
.wizm-ecran .wp-element-caption {
	margin-top: 18px;
	font-size: 0.98rem;
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
	max-width: 44ch;
}
.wizm-collage { position: relative; padding-bottom: 4%; }
.wizm-collage.wizm-collage > * { margin-block: 0; }
.wizm-collage > .wizm-piece {
	position: relative;
	z-index: 2;
	width: min(62%, 22rem);
	margin: -20% 0 0 -6% !important;
}
.wizm-collage > .wizm-piece.wizm-piece-petite { width: min(46%, 15rem); }
.wizm-inverse > .wizm-piece { margin: -20% -4% 0 auto !important; }
/* Le dessin d'une pièce jointe ne dépasse jamais sa taille de lecture (le « .doc » démesuré). */
.wizm-piece-petite .wp-block-image img { max-width: 220px; margin-inline: auto; }
.wizm-piece-petite .wizm-fichier { font-size: 0.85rem; }
.wizm-piece-petite .wp-element-caption { font-size: 0.9rem; }
/* Colonnes avec un collage ou une capture : moitié / moitié, centrées. */
.wp-block-columns:has(> .wp-block-column > :is(.wizm-collage, .wizm-ecran)) {
	column-gap: clamp(36px, 6vw, 110px);
	align-items: center !important;
}
@media (min-width: 901px) {
	/* « wizm-inverse » sur le collage : la capture passe à gauche, le texte à droite (alterner les côtés). */
	.wp-block-columns:has(> .wp-block-column > .wizm-collage.wizm-inverse) { flex-direction: row-reverse; }
}
@media (max-width: 900px) {
	.wizm-ecran, .wizm-ecran.wizm-biais-gauche, .wizm-inverse > .wizm-ecran { width: 100%; margin-left: 0 !important; --biais: -8deg; }
	.wizm-collage > .wizm-piece, .wizm-inverse > .wizm-piece,
	.wizm-collage > .wizm-piece.wizm-piece-petite { width: min(80%, 20rem); margin: -10% 0 0 auto !important; }
}
/* « wizm-deborde » sur une pièce jointe : elle descend sur la section suivante (chevauchement). */
@media (min-width: 901px) {
	.wizm-piece.wizm-deborde { translate: 0 clamp(110px, 12vw, 190px); margin-bottom: calc(-1 * clamp(110px, 12vw, 190px)); z-index: 3; }
	.wp-block-post-content > :has(.wizm-deborde) + * { padding-top: clamp(80px, 10vw, 150px); }
}

/* ——————————————————— Bandeau penché des trois maquettes (accueil) ———————————————————
 * « wizm-bande » (Groupe) > « wizm-bande-piste » (Groupe d'images « wizm-bande-bureau » / « wizm-bande-mobile »)
 * + légende. Pleine largeur, penché, sur encre ; il chevauche la grande bulle qui suit. --defile (script) : la
 * piste glisse au rythme de la page. */
.wizm-bande {
	position: relative;
	z-index: 3;
	width: 100vw;
	max-width: none !important;
	margin-inline: calc(50% - 50vw) !important;
	margin-block: clamp(60px, 8vw, 120px) calc(-1 * clamp(50px, 7vw, 110px)) !important;
	padding-block: clamp(36px, 5vw, 70px);
	transform: rotate(-4deg);
	overflow: hidden;
	background:
		radial-gradient(50% 120% at 85% 50%, color-mix(in srgb, var(--wizm-violet) 55%, transparent) 0%, transparent 70%),
		linear-gradient(100deg, var(--wizm-encre) 0%, color-mix(in srgb, var(--wizm-encre) 70%, var(--wizm-violet)) 100%);
	box-shadow: 0 40px 80px -40px color-mix(in srgb, var(--wizm-encre) 70%, transparent);
}
.wizm-bande.wizm-bande > * { margin-block: 0; }
.wizm-bande-piste {
	display: flex;
	align-items: center;
	gap: clamp(16px, 2vw, 30px);
	width: max-content;
	padding-inline: 6vw;
	transform: translateX(calc(var(--defile, 0) * -1px));
	will-change: transform;
}
.wizm-bande-piste > figure { margin: 0 !important; flex: none; }
.wizm-bande-piste img {
	display: block;
	height: clamp(190px, 25vw, 380px);
	width: auto;
	max-width: none;
	box-shadow: 0 24px 50px -24px color-mix(in srgb, var(--wizm-encre) 85%, transparent);
}
.wizm-bande-bureau img { border-radius: 12px; }
.wizm-bande-mobile img {
	border-radius: 24px;
	outline: 6px solid color-mix(in srgb, var(--wp--preset--color--base) 92%, transparent);
	outline-offset: -1px;
}
.wizm-bande-legende {
	margin: clamp(22px, 3vw, 34px) 0 0 6vw !important;
	max-width: 60ch;
	font-size: 1.05rem;
	line-height: 1.5;
	color: var(--wizm-clair-sur-encre);
}
.wizm-bande-legende strong { font-family: var(--wizm-replique); font-weight: 700; color: var(--wp--preset--color--base); }
:root body .wp-block-post-content > :has(> .wizm-bande) + .alignfull.is-style-section-contrastee { margin-block-start: 0; }

/* ——————————————————— Étapes : des couches empilées en escalier ———————————————————
 * Les colonnes des sections d'étapes (numéros « chiffre ») deviennent des dalles posées les unes sur les autres :
 * chaque étape monte d'un cran, son épaisseur dessinée en tranches lavande et violette. */
.wp-block-columns:has(> .wp-block-column > .is-style-chiffre:first-child) {
	align-items: flex-start !important;
	gap: clamp(16px, 2.4vw, 32px);
	padding-top: 20px;
}
.wp-block-columns:has(> .wp-block-column > .is-style-chiffre:first-child) > .wp-block-column {
	--r: 0;
	position: relative;
	padding: clamp(22px, 2.4vw, 32px) clamp(20px, 2vw, 28px) clamp(26px, 2.6vw, 34px);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 22px;
	box-shadow:
		7px 7px 0 -1px var(--wizm-lilas),
		7px 7px 0 0 var(--wp--preset--color--border),
		14px 14px 0 -1px color-mix(in srgb, var(--wizm-violet) 28%, var(--wp--preset--color--base)),
		22px 26px 40px -18px color-mix(in srgb, var(--wizm-encre) 30%, transparent);
	margin-top: calc(var(--r) * clamp(14px, 2.4vw, 34px)) !important; /* chaque étape monte d'un cran */
}
.wp-block-columns:has(> .wp-block-column > .is-style-chiffre:first-child) > .wp-block-column:nth-last-child(2) { --r: 1; }
.wp-block-columns:has(> .wp-block-column > .is-style-chiffre:first-child) > .wp-block-column:nth-last-child(3) { --r: 2; }
.wp-block-columns:has(> .wp-block-column > .is-style-chiffre:first-child) > .wp-block-column:nth-last-child(4) { --r: 3; }
.wp-block-columns:has(> .wp-block-column > .is-style-chiffre:first-child) > .wp-block-column:nth-last-child(5) { --r: 4; }
.wp-block-columns:has(> .wp-block-column > .is-style-chiffre:first-child) > .wp-block-column > .is-style-chiffre { margin-top: 0; }
@media (max-width: 781px) {
	.wp-block-columns:has(> .wp-block-column > .is-style-chiffre:first-child) > .wp-block-column {
		margin-top: 0 !important;
		margin-left: calc((3 - var(--r)) * 10px);
		margin-right: calc(var(--r) * 10px);
	}
}
/* Elles se posent en montant quand on les voit, et redescendent quand on remonte (timeline de vue, rejouée
 * dans les deux sens) ; jamais pour un navigateur piloté (captures pleine page) ni sous mouvement réduit. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		html:not(.wizm-pilote) .wp-block-columns:has(> .wp-block-column > .is-style-chiffre:first-child) > .wp-block-column {
			animation: wizm-dalle linear both;
			animation-timeline: view();
			animation-range: entry 5% entry 90%;
		}
	}
}
@keyframes wizm-dalle {
	from { opacity: 0; translate: 0 90px; }
	to { opacity: 1; translate: 0 0; }
}

/* ——————————————————— Appel final : dégradé profond et trois losanges du logo ———————————————————
 * Retour de recette (page Réviser, « Prêt à comparer vos 3 maquettes ») : encre qui vire au violet, lueurs violette
 * et orange, trois losanges de tailles différentes qui flottent (coupés sous mouvement réduit). */
.wp-block-post-content .alignfull.is-style-bande-sombre {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background:
		radial-gradient(60% 90% at 92% -10%, color-mix(in srgb, var(--wizm-violet) 75%, transparent) 0%, transparent 62%),
		radial-gradient(45% 80% at -5% 110%, color-mix(in srgb, var(--wizm-violet) 50%, transparent) 0%, transparent 70%),
		radial-gradient(28% 45% at 60% 115%, color-mix(in srgb, var(--wizm-orange) 30%, transparent) 0%, transparent 70%),
		linear-gradient(155deg, var(--wizm-encre) 0%, color-mix(in srgb, var(--wizm-encre) 78%, var(--wizm-violet)) 60%, color-mix(in srgb, var(--wizm-encre) 55%, var(--wizm-violet)) 100%) !important;
}
.wp-block-post-content .alignfull.is-style-bande-sombre::before,
.wp-block-post-content .alignfull.is-style-bande-sombre::after,
.wp-block-post-content .alignfull.is-style-bande-sombre :is(h2, .wp-block-heading)::after {
	content: "";
	position: absolute;
	z-index: -1;
	pointer-events: none;
	-webkit-mask: var(--wizm-losange) center / contain no-repeat;
	mask: var(--wizm-losange) center / contain no-repeat;
}
/* Le grand : en haut à droite, coupé par le bord, en dégradé violet. */
.wp-block-post-content .alignfull.is-style-bande-sombre::before {
	width: clamp(200px, 26vw, 380px);
	aspect-ratio: 1;
	right: calc(-1 * clamp(40px, 5vw, 90px));
	top: calc(-1 * clamp(60px, 7vw, 120px));
	background: linear-gradient(200deg, color-mix(in srgb, var(--wizm-violet) 85%, var(--wp--preset--color--base)) 0%, color-mix(in srgb, var(--wizm-violet) 30%, transparent) 100%);
	opacity: 0.6;
	animation: wizm-flotte 14s ease-in-out infinite;
}
/* Le moyen : en bas à gauche, orange qui fond au violet. */
.wp-block-post-content .alignfull.is-style-bande-sombre::after {
	width: clamp(64px, 7vw, 110px);
	aspect-ratio: 1;
	left: 47%;
	bottom: clamp(18px, 3vw, 46px);
	background: linear-gradient(135deg, var(--wizm-orange) 0%, var(--wizm-violet) 100%);
	opacity: 0.85;
	animation: wizm-flotte 11s ease-in-out -4s infinite reverse;
}
/* Le petit : blanc, entre le titre et le bouton. */
.wp-block-post-content .alignfull.is-style-bande-sombre :is(h2, .wp-block-heading)::after {
	width: clamp(22px, 2.2vw, 34px);
	aspect-ratio: 1;
	left: 58%;
	top: clamp(30px, 5vw, 60px);
	background: var(--wp--preset--color--base);
	opacity: 0.9;
	animation: wizm-flotte 8s ease-in-out -2s infinite;
}
@keyframes wizm-flotte {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50% { transform: translateY(-16px) rotate(8deg); }
}
.is-style-bande-sombre .wp-block-button:not(.is-style-outline) > .wp-block-button__link {
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--wp--preset--color--base) 30%, transparent), 0 18px 40px -16px color-mix(in srgb, var(--wizm-violet) 90%, transparent);
}

/* ——————————————————— Mouvement réduit (tour 1) ——————————————————— */
@media (prefers-reduced-motion: reduce) {
	.wizm-pile > .wizm-couche,
	.wizm-couche img { transition: none !important; }
	.wizm-pile { --px: 0 !important; --py: 0 !important; --ouvre: 0 !important; }
	.wizm-ecran { --p: 0 !important; }
	.wizm-bande-piste { transform: none; }
	.wizm-bande { overflow-x: auto; }
	.wp-block-post-content .alignfull.is-style-bande-sombre::before,
	.wp-block-post-content .alignfull.is-style-bande-sombre::after,
	.wp-block-post-content .alignfull.is-style-bande-sombre :is(h2, .wp-block-heading)::after { animation: none; }
}

/* Autocritique du tour 1 (runs/autocritique-tour-1.md) */
/* Accueil : la pile prend la hauteur du premier écran, à côté du titre. */
@media (min-width: 901px) {
	.wp-block-column > .wizm-pile { width: 118%; }
	.wp-block-post-content > .wp-block-columns:has(> .wp-block-column > .wizm-pile) { align-items: center !important; }
}
/* L'échange qui suit le héros de l'accueil : sa propre section, aérée. */
.wp-block-post-content > :has(> .wizm-echange.wizm-ouverture) { margin-block-end: clamp(64px, 8vw, 120px); }
/* Dernière section blanche d'une page (coordonnées de Contact) : jamais collée au pied. */
.wp-block-post-content > :last-child:not(.alignfull) { padding-bottom: var(--wp--preset--spacing--70); }