/* ------------------------------------------------------------------
   Lecteur de rythme Wakatoo : même dessin que la grille de l'app
   (lib/core/widgets/sequencer_grid.dart et card_visual_widget.dart).
   Deviendra la feuille du bloc « Post Wakatoo » du plugin wakatoo.
   Le post « feed » est un écran d'iPhone 15 Pro (1179 × 2556) : toutes
   ses positions sont en % de la largeur de l'écran (cqw), relevées sur
   une capture du feed de l'app (écran = 100 cqw de large, 216,8 de haut).
------------------------------------------------------------------- */
.wk-lecteur {
	--wk-fond: #EFEAE2;
	--wk-fond-rgb: 239, 234, 226;
	--wk-creme: #FAF7F4;
	--wk-creme-rgb: 250, 247, 244;
	--wk-sable: #EFEAE2;
	--wk-ecorce: #39291D;
	--wk-taupe: #6E6157;
	--wk-or: #C48738;
	--wk-souffle: #4A9B7E;
	--wk-classique: #E89A4C;
	--wk-accent: #D86F4A;
	--wk-structure: #8B5A8E;
	--wk-voix: #E8B84C;
	--wk-vide: #D1D1D1;
	--wk-tete-bord: #39291D;
	--wk-tete-fond: rgba(57, 41, 29, .15);
	--wk-trait: rgba(57, 41, 29, .2);
	--wk-ombre: 0 18px 40px rgba(57, 41, 29, .18), 0 3px 8px rgba(57, 41, 29, .1);
	--wk-verre-fond: linear-gradient(180deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .16)), rgba(239, 234, 226, .42);
	--wk-verre-bord: rgba(255, 255, 255, .75);
	--wk-verre-ombre: 0 25px 50px -12px rgba(57, 41, 29, .25), inset 0 1px 0 rgba(255, 255, 255, .8);

	display: flex; flex-direction: column; gap: 0.75rem;
	width: min(100%, 26rem);
	color: var(--wk-ecorce);
}

/* ---------- Grille ---------- */
.wk-grille { container-type: inline-size; display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 412px; }
.wk-temps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }

.wk-carte {
	--wk-t: calc((100cqw - 12px) / 4);
	--wk-b: max(1.5px, calc(var(--wk-t) * 0.035));
	--wk-r: min(8px, calc(var(--wk-t) * 0.14));
	position: relative; aspect-ratio: 1;
	display: grid; place-items: center;
	background: var(--wk-creme);
	border: var(--wk-b) solid var(--wk-c, var(--wk-vide));
	border-radius: var(--wk-r);
	font: 700 calc(var(--wk-t) * 0.30)/1 "Nunito", "Poppins", system-ui, sans-serif;
	color: var(--wk-ecorce);
}
.wk-carte__num {
	position: absolute; top: calc(var(--wk-t) * 0.05); left: 50%; translate: -50% 0;
	display: grid; place-items: center; width: 1.7em; height: 1.7em;
	border-radius: 50%; background: rgba(239, 234, 226, .7);
	font-size: clamp(7px, calc(var(--wk-t) * 0.15), 12px); line-height: 1;
	color: rgba(30, 21, 9, .7);
}
.wk-carte__mod { position: absolute; bottom: calc(var(--wk-t) * 0.07); left: 50%; translate: -50% 0; font-size: calc(var(--wk-t) * 0.16); line-height: 1; }
/* Case en cours de lecture : bordure 2 px + voile, comme _playheadColor. */
.wk-carte.est-jouee::after {
	content: ""; position: absolute; inset: calc(var(--wk-b) * -1);
	border: 2px solid var(--wk-tete-bord); border-radius: var(--wk-r);
	background: var(--wk-tete-fond); pointer-events: none;
}

/* ---------- Mise en page « simple » : paysages + koala + barre ---------- */
.wk-scene { position: relative; width: 100%; max-width: 412px; padding-top: 3.9rem; }
.wk-decor { position: absolute; z-index: 0; top: -0.25rem; left: -1.5rem; right: -1.5rem; height: 9rem; pointer-events: none; }
.wk-decor__gauche, .wk-decor__droite { position: absolute; bottom: 0; height: 100%; }
.wk-decor__gauche { left: -12%; -webkit-mask-image: linear-gradient(to right, #000 55%, transparent); mask-image: linear-gradient(to right, #000 55%, transparent); }
.wk-decor__droite { right: -12%; -webkit-mask-image: linear-gradient(to left, #000 55%, transparent); mask-image: linear-gradient(to left, #000 55%, transparent); }
.wk-decor picture { display: contents; }
.wk-decor img { display: block; height: 100%; width: auto; max-width: none; opacity: .8; filter: saturate(.45); }
.wk-decor img.est-retourne { transform: scaleX(-1); }
.wk-koala { position: absolute; z-index: 2; top: 0.9rem; left: 50%; translate: -50% 0; height: 4.4rem; width: auto; pointer-events: none; filter: drop-shadow(0 4px 6px rgba(57, 41, 29, .15)); }
.wk-scene .wk-grille { position: relative; z-index: 1; }

.wk-barre { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; width: 100%; max-width: 412px; }
.wk-infos { display: flex; align-items: center; gap: 0.5rem; min-width: 0; font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.wk-sections { display: flex; gap: 0.4rem; }
.wk-puce {
	width: 2.5rem; height: 2.5rem; border-radius: 50%; cursor: pointer;
	font-family: inherit; font-size: 0.9375rem; font-weight: 800;
	background: var(--wk-creme); color: var(--wk-ecorce); border: 1.5px solid var(--wk-trait);
}
.wk-puce[aria-pressed="true"] { background: var(--wk-ecorce); color: var(--wk-creme); border-color: var(--wk-ecorce); }
.wk-rep {
	min-width: 3.4em; padding: 0.3rem 0.6rem; border-radius: 100px; text-align: center;
	background: var(--wk-creme); border: 1.5px solid var(--wk-trait);
	font-size: 0.8125rem; font-weight: 800; letter-spacing: 0; font-variant-numeric: tabular-nums;
}
.wk-lecture {
	flex: none; width: 56px; height: 56px; border-radius: 50%; cursor: pointer;
	display: grid; place-items: center; padding: 0;
	background: var(--wk-or); color: #FAF7F4; border: 1.5px solid #fff;
	box-shadow: 0 3px 8px rgba(57, 41, 29, .22);
}
.wk-lecture svg { width: 58%; height: 58%; fill: currentColor; }
.wk-lecture[aria-busy="true"] { opacity: .7; cursor: progress; }
.wk-lecteur button:focus-visible { outline: 3px solid var(--wk-or); outline-offset: 2px; }

/* ================= Post « feed » : un iPhone 15 Pro ================= */
.wk-lecteur.wk-post { width: min(100%, 21rem); gap: 0; }

/* Carte de verre (« liquid glass ») aux proportions de l'écran d'iPhone 15 Pro. */
.wk-telephone {
	position: relative; padding: 0.8%; border-radius: 10.7% / 5%;
	background: var(--wk-verre-fond);
	-webkit-backdrop-filter: blur(24px) saturate(1.1); backdrop-filter: blur(24px) saturate(1.1);
	border: 1px solid var(--wk-verre-bord);
	box-shadow: var(--wk-verre-ombre);
}
.wk-ecran {
	position: relative; container-type: inline-size;
	aspect-ratio: 1179 / 2556; overflow: hidden;
	border-radius: 10.1% / 4.65%;
	background: var(--wk-fond); color: var(--wk-ecorce);
	font-family: "Poppins", system-ui, sans-serif;
}
.wk-ecran button { font-family: inherit; border: 0; padding: 0; cursor: pointer; color: inherit; background: none; }
.wk-ecran p { margin: 0; }

/* Haut : la vidéo en fond, voilée, avec les paysages, fondue vers le fond. */
.wk-feed__haut { position: absolute; left: 0; right: 0; top: 0; height: 88cqw; overflow: hidden; isolation: isolate; }
.wk-feed__video { position: absolute; inset: 0; z-index: -3; background: #000 center 30% / cover no-repeat; filter: blur(1px) saturate(.9); }
.wk-feed__haut::before {
	content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
	background: linear-gradient(to bottom, rgba(var(--wk-fond-rgb), .22), rgba(var(--wk-fond-rgb), .4) 62%, rgb(var(--wk-fond-rgb)) 96%);
}
/* Paysages : du milieu du haut jusqu'au milieu de la première rangée de cartes (la grille passe devant). */
.wk-decor.wk-feed__decor { top: 50cqw; bottom: auto; left: 0; right: 0; height: 64cqw; z-index: 1; }
.video-lancee .wk-feed__decor { display: none; }
.wk-feed__decor .wk-decor__gauche { left: -12%; height: 78%; }
.wk-feed__decor .wk-decor__droite { right: -14%; }
.wk-feed__decor img { opacity: .45; }
.wk-feed__haut iframe { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; border: 0; }
.wk-video__maquette {
	position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; padding: 12cqw 8cqw 0; text-align: center;
	font-size: 3.4cqw; font-weight: 700; color: #FAF7F4; background: rgba(0, 0, 0, .72);
}

/* Barre d'état. */
.wk-statut { position: absolute; z-index: 5; left: 0; right: 0; top: 0; height: 12cqw; color: #000; }
.wk-statut__heure {
	position: absolute; left: 10.2cqw; top: 4.4cqw; display: flex; align-items: center; gap: 1.2cqw;
	font: 600 4.3cqw/1 -apple-system, "SF Pro Text", "Poppins", sans-serif; letter-spacing: -0.02em;
}
.wk-statut__heure i { display: block; width: 3.6cqw; height: 3.6cqw; }
.wk-statut__heure svg { width: 100%; height: 100%; fill: currentColor; }
.wk-statut__icones { position: absolute; right: 7.8cqw; top: 5cqw; display: flex; align-items: center; gap: 1.6cqw; }
.wk-statut__icones svg { height: 2.9cqw; width: auto; fill: currentColor; }
.wk-statut__batterie {
	display: grid; place-items: center; min-width: 6.4cqw; height: 3.2cqw; padding: 0 0.6cqw; border-radius: 1cqw;
	background: #000; color: #fff; font: 700 2.3cqw/1 -apple-system, "SF Pro Text", "Poppins", sans-serif;
}

/* Onglets Feed / Autour de moi. */
.wk-onglet {
	position: absolute; z-index: 5; top: 20.6cqw; height: 6.5cqw; border-radius: 100px;
	font-size: 3.6cqw !important; font-weight: 800; line-height: 1;
}
.wk-onglet--feed { left: 21.1cqw; width: 14.4cqw; background: rgba(var(--wk-creme-rgb), .82) !important; color: var(--wk-ecorce); }
.wk-onglet--autour { left: 55.8cqw; width: 31.5cqw; background: rgba(var(--wk-creme-rgb), .5) !important; color: rgba(57, 41, 29, .5) !important; }
.wk-onglet__trait { position: absolute; z-index: 5; left: 21.1cqw; top: 29.6cqw; width: 14.4cqw; height: 0.75cqw; border-radius: 100px; background: var(--wk-ecorce); }

/* Titre, chaîne, boutons, boucles. */
.wk-feed__titre, .wk-feed__chaine {
	position: absolute; z-index: 5; left: 0; right: 0; text-align: center;
	color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}
.wk-feed__titre { top: 38cqw; font-size: 2.9cqw; font-weight: 700; line-height: 1.2; }
.wk-feed__chaine { top: 41.7cqw; display: flex; justify-content: center; align-items: center; gap: 1.1cqw; font-size: 2.5cqw; font-weight: 500; }
.wk-feed__yt { display: grid; place-items: center; width: 2.8cqw; height: 2.8cqw; border-radius: 50%; background: #FF0000; }
.wk-feed__yt svg { width: 70%; height: 70%; fill: #fff; margin-left: 10%; }
.wk-feed__bouton-yt, .wk-feed__bouton-plein {
	position: absolute; z-index: 5; top: 47.1cqw; width: 18.2cqw; height: 12.7cqw; border-radius: 3cqw;
	display: grid; place-items: center;
}
.wk-feed__bouton-yt { left: 40.9cqw; background: #FF0000 !important; box-shadow: 0 1cqw 3cqw rgba(0, 0, 0, .25); }
.wk-feed__bouton-yt svg { width: 55%; height: 55%; fill: #fff; }
.wk-feed__bouton-plein { left: 51.6cqw; background: rgba(60, 60, 60, .55) !important; color: #fff !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.wk-feed__bouton-plein svg { width: 42%; height: 42%; }
.wk-feed__boucle {
	position: absolute; z-index: 5; top: 62.4cqw; left: 50%; translate: -50% 0; white-space: nowrap;
	height: 6.3cqw; padding: 0 2.4cqw; border-radius: 1.3cqw; display: flex; align-items: center;
	background: rgba(60, 60, 60, .55); color: #fff;
	font-size: 3.3cqw; font-weight: 600; font-variant-numeric: tabular-nums;
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}

/* Grille (74,6 % de la largeur) et personnages posés dessus. */
.wk-feed__zone { position: absolute; z-index: 6; top: 81.8cqw; left: 4.1cqw; width: 74.6cqw; }
.wk-ecran .wk-grille { max-width: none; gap: 1.4cqw; position: relative; z-index: 2; }
.wk-ecran .wk-temps { gap: 1.02cqw; }
.wk-ecran .wk-carte { --wk-t: calc((100cqw - 3.06cqw) / 4); }
.wk-feed__persos { position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: 0; pointer-events: none; }
.wk-feed__wombat { position: absolute; bottom: -1.1cqw; left: 21.1cqw; height: 18.2cqw; aspect-ratio: 360 / 527; }
.wk-feed__wombat img { position: absolute; inset: 0; width: 100%; height: 100%; transform: scaleX(-1); }
.wk-feed__wombat .pose-2, .wk-feed__wombat.est-secoue .pose-1 { visibility: hidden; }
.wk-feed__wombat.est-secoue .pose-2 { visibility: visible; }
.wk-feed__koala { position: absolute; bottom: -4cqw; left: 42.2cqw; height: 15.7cqw; aspect-ratio: 450 / 314; }
.wk-feed__koala.est-retourne { transform: scaleX(-1); }
.wk-feed__koala img { position: absolute; inset: 0; width: 100%; height: 100%; }
.wk-feed__joues { visibility: hidden; }
.wk-feed__joues.est-visible { visibility: visible; }

/* Colonne d'actions : positions du centre de chaque bouton. */
.wk-action { position: absolute; z-index: 6; left: 89cqw; translate: -50% -50%; display: grid; place-items: center; color: var(--wk-ecorce); }
.wk-action svg { width: 100%; height: 100%; fill: currentColor; }
.wk-action--signet { top: 93.7cqw; width: 5.2cqw; height: 5.8cqw; }
.wk-action--coeur { top: 106.7cqw; width: 6.4cqw; height: 5.8cqw; }
.wk-action--partage { top: 119.7cqw; width: 6.6cqw; height: 6cqw; }
.wk-action--bpm {
	top: 134.7cqw; width: 12.8cqw; height: 12.8cqw; border-radius: 50%;
	display: flex !important; flex-direction: column; align-items: center; justify-content: center;
	background: var(--wk-creme) !important; box-shadow: 0 0.6cqw 2.4cqw rgba(57, 41, 29, .12);
	font-size: 2.1cqw !important; font-weight: 800; line-height: 1; letter-spacing: 0.02em;
}
.wk-action--bpm b { font-size: 4.7cqw; font-weight: 900; }
.wk-ecran .wk-action--lecture { position: absolute; z-index: 6; left: 89cqw; top: 151.1cqw; translate: -50% -50%; width: 13cqw; height: 13cqw; background: var(--wk-or); border: 1.5px solid #fff; color: #FAF7F4; }
/* Invitation à appuyer : deux cercles concentriques s'élargissent autour du bouton lecture, jusqu'au premier appui. */
.wk-ecran .wk-action--lecture::before, .wk-ecran .wk-action--lecture::after {
	content: ""; position: absolute; inset: -1.5px; border-radius: 50%; pointer-events: none;
	border: 0.6cqw solid var(--wk-or);
	animation: wk-onde 2.4s cubic-bezier(.2, .6, .35, 1) infinite;
}
.wk-ecran .wk-action--lecture::after { animation-delay: 1.2s; }
.wk-lecteur.a-ete-touche .wk-action--lecture::before, .wk-lecteur.a-ete-touche .wk-action--lecture::after { content: none; animation: none; }
@keyframes wk-onde { from { transform: scale(1); opacity: .9; } to { transform: scale(1.75); opacity: 0; } }
/* Main du koala qui mime un appui (KoalaTapHand de l'app) : cycle de 1,2 s, pression puis relâche,
   pause. Elle ne vole jamais le tap et s'efface au premier appui. */
.wk-main { position: absolute; z-index: 8; width: 18cqw; aspect-ratio: 1; pointer-events: none; animation: 1.2s infinite; transition: opacity .25s ease, visibility .25s; }
.wk-main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 1cqw 1.5cqw rgba(57, 41, 29, .25)); }
/* Bouton lecture du post : collé au bord droit, la main arrive d'en bas à gauche (image retournée). */
.wk-main--lecture { left: 68.7cqw; top: 153.8cqw; animation-name: wk-tape-droite; }
.wk-main--lecture img { transform: scaleX(-1) rotate(-30deg); }
@keyframes wk-tape-droite {
	0% { translate: 0 0; scale: 1; animation-timing-function: ease-out; }
	30% { translate: 2.5cqw -2.5cqw; scale: .9; animation-timing-function: ease-in-out; }
	60%, 100% { translate: 0 0; scale: 1; }
}
/* Jeu des paires : la main désigne le premier haut-parleur, doigt vers le haut-gauche comme dans l'app. */
.wk-main--paires { left: 33.9cqw; top: calc(var(--wk-haut-grille) + 10.4cqw); animation-name: wk-tape-gauche; }
.wk-main--paires img { transform: rotate(-45deg); }
@keyframes wk-tape-gauche {
	0% { translate: 0 0; scale: 1; animation-timing-function: ease-out; }
	30% { translate: -3.6cqw -3.6cqw; scale: .9; animation-timing-function: ease-in-out; }
	60%, 100% { translate: 0 0; scale: 1; }
}
.wk-lecteur.a-ete-touche .wk-main { opacity: 0; visibility: hidden; animation: none; }
@media (prefers-reduced-motion: reduce) { .wk-main { animation: none; } }
@media (prefers-reduced-motion: reduce) {
	.wk-ecran .wk-action--lecture::before { animation: none; transform: scale(1.3); opacity: .5; }
	.wk-ecran .wk-action--lecture::after { display: none; }
}

/* Points des parties + compteur. */
.wk-feed__pied { position: absolute; z-index: 6; top: 158.7cqw; left: 4.1cqw; width: 74.6cqw; display: flex; justify-content: center; align-items: center; gap: 2cqw; }
.wk-feed__points { display: flex; align-items: center; }
.wk-feed__point { display: grid; place-items: center; width: 5.6cqw; height: 5.6cqw; }
.wk-feed__point::after { content: ""; width: 1.95cqw; height: 1.95cqw; border-radius: 100px; background: rgba(57, 41, 29, .22); transition: width .2s ease, background-color .2s ease; }
.wk-feed__point[aria-pressed="true"]::after { width: 4.1cqw; background: var(--wk-ecorce); }
.wk-ecran .wk-rep { font-size: 2.5cqw; padding: 0.3cqw 1.6cqw; min-width: 0; border-width: 1px; }

/* Auteur : avatar et son « + », nom, drapeau, options. */
.wk-feed__auteur { position: absolute; z-index: 6; top: 165.5cqw; left: 4.3cqw; right: 4.9cqw; height: 10.8cqw; display: flex; align-items: center; gap: 4.4cqw; }
.wk-feed__avatar { position: relative; flex: none; width: 10.8cqw; height: 10.8cqw; }
.wk-feed__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 0.4cqw var(--wk-creme); }
.wk-feed__plus {
	position: absolute; right: -1.2cqw; bottom: -0.8cqw; display: grid; place-items: center;
	width: 4.6cqw; height: 4.6cqw; border-radius: 50%; background: var(--wk-or) !important; color: #fff !important;
	font-size: 3.4cqw !important; font-weight: 700; line-height: 1;
}
.wk-feed__auteur b { font-size: 2.9cqw; font-weight: 800; }
.wk-feed__drapeau { font-size: 2.3cqw; margin-left: -2.6cqw; }
.wk-feed__options { margin-left: auto; width: 4.4cqw; height: 4.4cqw; color: rgba(57, 41, 29, .45) !important; }
.wk-feed__options svg { width: 100%; height: 100%; fill: currentColor; }

/* Barre de navigation de l'app (verre) et bouton « + ». */
.wk-nav {
	position: absolute; z-index: 7; top: 195.6cqw; left: 5.4cqw; width: 73.1cqw; height: 14.6cqw;
	display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; padding: 0 1cqw;
	border-radius: 100px; background: rgba(var(--wk-creme-rgb), .62);
	border: 1px solid rgba(255, 255, 255, .8); box-shadow: 0 1cqw 3.5cqw rgba(0, 0, 0, .08);
	-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.wk-nav__item { height: 12.4cqw; border-radius: 100px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6cqw; }
.wk-nav__item > svg, .wk-nav__icone { width: 4.8cqw; height: 4.8cqw; fill: currentColor; }
.wk-nav__icone { position: relative; display: block; }
.wk-nav__icone svg { width: 100%; height: 100%; fill: currentColor; }
.wk-nav__icone em {
	position: absolute; right: -1.6cqw; top: -1.6cqw; display: grid; place-items: center;
	width: 3.3cqw; height: 3.3cqw; border-radius: 50%; background: #EC5747; color: #fff;
	font-style: normal; font-size: 2cqw; font-weight: 700;
}
.wk-nav__item span { font-size: 2.4cqw; font-weight: 500; line-height: 1; }
.wk-nav__item.est-actif { background: rgba(var(--wk-creme-rgb), .95) !important; color: var(--wk-or) !important; }
.wk-nav__profil { display: block; width: 5.6cqw; height: 5.6cqw; border-radius: 50%; overflow: hidden; }
.wk-nav__profil img { width: 100%; height: 100%; object-fit: cover; }
.wk-nav__creer {
	position: absolute; z-index: 7; top: 195.6cqw; left: 81.8cqw; width: 14.6cqw; height: 14.6cqw;
	display: grid; place-items: center; border-radius: 50% !important;
	background: rgba(var(--wk-creme-rgb), .62) !important; border: 1px solid rgba(255, 255, 255, .8) !important;
	box-shadow: 0 1cqw 3.5cqw rgba(0, 0, 0, .08);
	-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.wk-nav__creer svg { width: 6.4cqw; height: 6.4cqw; }

/* Copie de NotificationPill : fond du logo, texte blanc gras, croix, entrée avec rebond. */
.wk-pastille {
	position: absolute; z-index: 30; left: 5.1cqw; right: 5.1cqw; bottom: 14.8cqw;
	display: flex; justify-content: center; pointer-events: none;
}
.wk-pastille__corps {
	display: flex; align-items: center; gap: 2.5cqw; max-width: 100%;
	padding: 2.5cqw 2cqw 2.5cqw 4.1cqw; border-radius: 7.6cqw;
	background: #39291D; color: #fff; box-shadow: 0 1.3cqw 3cqw rgba(0, 0, 0, .25);
	opacity: 0; transform: translateY(150%);
	transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), opacity .3s ease;
}
.wk-pastille.est-visible .wk-pastille__corps { opacity: 1; transform: none; pointer-events: auto; }
.wk-pastille__icone { flex: none; width: 5.1cqw; height: 5.1cqw; color: #E8B84C; }
.wk-pastille__icone svg { width: 100%; height: 100%; fill: currentColor; }
.wk-pastille__texte { font-size: 3.6cqw; font-weight: 700; line-height: 1.25; }
.wk-pastille__fermer {
	flex: none; display: grid; place-items: center; width: 7.1cqw; height: 7.1cqw; border-radius: 50%;
	background: rgba(255, 255, 255, .15) !important; color: #fff !important;
}
.wk-pastille__fermer svg { width: 4cqw; height: 4cqw; }

/* ---------- Mode sombre : la palette dark de l'app (app_colors.dart) ---------- */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .wk-lecteur {
		--wk-fond: #1C1C1E; --wk-fond-rgb: 28, 28, 30;
		--wk-creme: #2C2C2E; --wk-creme-rgb: 44, 44, 46; --wk-sable: #3A3A3C; --wk-ecorce: #F2F2F7; --wk-taupe: #8E8E93;
		--wk-souffle: #346D58; --wk-classique: #A26C35; --wk-accent: #974E34; --wk-structure: #613F63; --wk-voix: #A28135; --wk-vide: #3A3A3C;
		--wk-tete-bord: rgba(242, 242, 247, .55); --wk-tete-fond: rgba(242, 242, 247, .08);
		--wk-trait: rgba(255, 255, 255, .16);
		--wk-ombre: 0 18px 40px rgba(0, 0, 0, .45), 0 3px 8px rgba(0, 0, 0, .3);
		--wk-verre-fond: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)), rgba(58, 58, 60, .55);
		--wk-verre-bord: rgba(255, 255, 255, .12);
		--wk-verre-ombre: 0 25px 50px -12px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .08);
	}
	:root:not([data-theme="light"]) .wk-statut { color: #fff; }
}
:root[data-theme="dark"] .wk-lecteur {
	--wk-fond: #1C1C1E; --wk-fond-rgb: 28, 28, 30;
	--wk-creme: #2C2C2E; --wk-creme-rgb: 44, 44, 46; --wk-sable: #3A3A3C; --wk-ecorce: #F2F2F7; --wk-taupe: #8E8E93;
	--wk-souffle: #346D58; --wk-classique: #A26C35; --wk-accent: #974E34; --wk-structure: #613F63; --wk-voix: #A28135; --wk-vide: #3A3A3C;
	--wk-tete-bord: rgba(242, 242, 247, .55); --wk-tete-fond: rgba(242, 242, 247, .08);
	--wk-trait: rgba(255, 255, 255, .16);
	--wk-ombre: 0 18px 40px rgba(0, 0, 0, .45), 0 3px 8px rgba(0, 0, 0, .3);
		--wk-verre-fond: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)), rgba(58, 58, 60, .55);
		--wk-verre-bord: rgba(255, 255, 255, .12);
		--wk-verre-ombre: 0 25px 50px -12px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .08);
}
:root[data-theme="dark"] .wk-statut { color: #fff; }

/* ================= Associe les paires (fork de game_pairs_screen.dart) : un iPhone 15 Pro ================= */
.wk-lecteur.wk-paires { --wk-succes: #6AB652; --wk-erreur: #EC5747; --wk-subtil: #F3F1EE; position: relative; width: min(100%, 21rem); gap: 0; }
/* Zone de jeu entre la consigne (47,3) et le pied (185,8) : koala + rangées, centrés comme dans l'app. */
.wk-paires .wk-ecran { --wk-haut-grille: calc(47.3cqw + (138.5cqw - (21.35cqw + var(--wk-rangs, 3) * 22.35cqw)) / 2 + 24.4cqw); }
.wk-paires .wk-statut { color: var(--wk-ecorce); }
.wk-paires .wk-statut__batterie { background: var(--wk-ecorce); color: var(--wk-fond); }
.wk-decor.wk-paires__decor { top: calc(var(--wk-haut-grille) - 36cqw); bottom: auto; left: 0; right: 0; height: 52cqw; z-index: 0; }
.wk-paires__decor img { opacity: .5; }
.wk-ecran .wk-paires__fermer {
	position: absolute; z-index: 5; left: 7.1cqw; top: 22.1cqw; translate: -50% -50%;
	width: 10.2cqw; height: 10.2cqw; border-radius: 50%; display: grid; place-items: center;
	background: var(--wk-creme); color: var(--wk-ecorce); box-shadow: 0 0.5cqw 2cqw rgba(57, 41, 29, .12);
}
.wk-paires__fermer svg { width: 5.1cqw; height: 5.1cqw; }
.wk-ecran .wk-paires__etapes { position: absolute; z-index: 5; left: 18.3cqw; right: 6.1cqw; top: 19.6cqw; height: 5cqw; display: flex; align-items: center; gap: 1cqw; }
.wk-paires__etapes i { flex: 1; height: 1.3cqw; border-radius: 100px; background: color-mix(in srgb, var(--wk-taupe) 25%, transparent); }
.wk-paires__etapes i.est-fait { background: var(--wk-succes); }
.wk-paires__consigne {
	position: absolute; z-index: 4; left: 6.1cqw; right: 6.1cqw; top: 33.3cqw;
	padding: 2cqw 3.05cqw; border-radius: 3.6cqw; background: rgba(var(--wk-creme-rgb), .82);
	font-size: 6.6cqw; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em;
}
.wk-paires__grille { position: absolute; z-index: 2; left: 4.07cqw; right: 4.07cqw; top: var(--wk-haut-grille); display: grid; grid-template-columns: 1fr 1fr; column-gap: 4.07cqw; }
.wk-paires__colonne { display: flex; flex-direction: column; gap: 3.05cqw; }
.wk-ecran .wk-paires__son, .wk-ecran .wk-paires__carte {
	position: relative; height: 19.3cqw; display: grid; place-items: center;
	border-radius: 3.8cqw; border: 1.5px solid color-mix(in srgb, var(--wk-ecorce) 18%, transparent);
	background: var(--wk-creme); color: color-mix(in srgb, var(--wk-ecorce) 65%, transparent);
	transition: background-color .15s ease, border-color .15s ease, color .15s ease, scale .1s ease;
}
.wk-ecran .wk-paires__son:active, .wk-ecran .wk-paires__carte:active { scale: .95; }
.wk-paires__son svg { width: 7.6cqw; height: 7.6cqw; fill: currentColor; }
.wk-ecran .wk-paires__carte .wk-carte { --wk-t: 14.8cqw; width: 14.8cqw; pointer-events: none; }
.wk-ecran .wk-paires__son.est-choisi { border-color: var(--wk-or); background: color-mix(in srgb, var(--wk-or) 8%, var(--wk-creme)); color: var(--wk-or); }
.wk-ecran .est-trouvee:not(.est-flash) { background: var(--wk-subtil); border-color: color-mix(in srgb, var(--wk-ecorce) 10%, transparent); color: color-mix(in srgb, var(--wk-ecorce) 22%, transparent); cursor: default; }
.wk-paires__carte.est-trouvee:not(.est-flash) .wk-carte { opacity: .4; filter: grayscale(1); }
.wk-ecran .wk-paires__son.est-erreur, .wk-ecran .wk-paires__carte.est-erreur { border: 2px solid var(--wk-erreur); background: color-mix(in srgb, var(--wk-erreur) 8%, var(--wk-creme)); color: var(--wk-erreur); }
.wk-ecran .est-flash { border: 2px solid var(--wk-succes); background: color-mix(in srgb, var(--wk-succes) 12%, var(--wk-creme)); color: var(--wk-succes); }
.wk-paires .est-tremble { animation: wk-tremble 0.45s ease; }
@keyframes wk-tremble { 0%, 100% { translate: 0; } 20% { translate: -2cqw; } 40% { translate: 1.8cqw; } 60% { translate: -1.2cqw; } 80% { translate: 0.6cqw; } }
.wk-paires .est-refusee { animation: wk-refus 0.4s ease; }
@keyframes wk-refus { 0%, 100% { translate: 0; } 25% { translate: -1cqw; } 75% { translate: 1cqw; } }
.wk-paires__badge {
	position: absolute; top: -2.5cqw; right: -2.5cqw; width: 6.6cqw; height: 6.6cqw; border-radius: 50%;
	display: grid; place-items: center; background: var(--wk-succes); color: #fff; box-shadow: 0 0.5cqw 1.5cqw rgba(0, 0, 0, .18);
	animation: wk-badge 0.25s cubic-bezier(.34, 1.56, .64, 1) both;
}
.wk-paires__badge svg { width: 70%; height: 70%; fill: currentColor; }
@keyframes wk-badge { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.wk-paires__koala { position: absolute; z-index: 3; top: calc(var(--wk-haut-grille) - 17.6cqw); left: 50%; translate: -50% 0; height: 20.4cqw; aspect-ratio: 450 / 314; pointer-events: none; }
.wk-paires__koala img { position: absolute; inset: 0; width: 100%; height: 100%; }
.wk-paires__pied { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: stretch; gap: 2.5cqw; padding: 4.07cqw 4.07cqw 12.7cqw; transition: background-color .3s ease; }
.wk-paires__pied.est-succes { background: color-mix(in srgb, var(--wk-succes) 10%, transparent); }
.wk-paires__bandeau { display: none; justify-content: center; align-items: center; gap: 2cqw; color: var(--wk-succes); font-size: 4.6cqw; font-weight: 800; }
.wk-paires__pied.est-succes .wk-paires__bandeau { display: flex; animation: wk-monte-paire 0.4s ease both; }
@keyframes wk-monte-paire { from { opacity: 0; translate: 0 60%; } to { opacity: 1; translate: 0 0; } }
.wk-paires__icone { display: inline-grid; width: 7.1cqw; height: 7.1cqw; }
.wk-paires__icone svg { width: 100%; height: 100%; fill: currentColor; }
.wk-ecran .wk-paires__valider { height: 14.25cqw; border-radius: 100px; background: var(--wk-or); color: #FAF7F4; font-size: 4.1cqw; font-weight: 800; letter-spacing: 0.06em; transition: background-color .2s ease; }
.wk-ecran .wk-paires__valider:disabled { background: var(--wk-sable); color: var(--wk-taupe); cursor: default; }
.wk-ecran .wk-paires__valider.est-succes { background: var(--wk-succes); }
.wk-paires .wk-pastille { bottom: 34cqw; }
.wk-confettis { position: absolute; z-index: 10; top: -3rem; left: -1.5rem; width: calc(100% + 3rem); height: calc(100% + 6rem); pointer-events: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wk-lecteur.wk-paires { --wk-subtil: #252527; } }
:root[data-theme="dark"] .wk-lecteur.wk-paires { --wk-subtil: #252527; }
@media (prefers-reduced-motion: reduce) {
	.wk-paires .est-tremble, .wk-paires .est-refusee, .wk-paires__badge, .wk-paires__pied.est-succes .wk-paires__bandeau { animation: none; }
}