/* SIXFINGERS, la laverie.
 * Copyright (c) 2026 Tristan Ulrich. All rights reserved.
 *
 * Deux mondes sur la même page, et ils ne se mélangent pas :
 *   - la SCÈNE, photographique, dans une boîte de 6336 x 3564 ramenée à l'écran ;
 *   - l'INTERFACE, en pixel, posée par-dessus en pixels d'écran.
 * Les couleurs de l'interface sont prises dans la scène : la crème du mur, le
 * noir des joints, le jaune du panneau, le rose du néon.
 */

@font-face { font-family: Sixfingers; src: url("../fonts/sixfingers.woff2") format("woff2"); font-display: block; }

:root {
  --encre: #1d1b19;
  --creme: #f3ead6;
  --jaune: #f4c22b;
  --rose: #ff5c9a;
  --neon: #ff5c9a;
  --gris: #8a8172;
}

html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: #0d0b0a;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
body { user-select: none; -webkit-user-select: none; font-family: Sixfingers, monospace; font-size: var(--fs, 22px); line-height: 1; color: var(--creme); -webkit-font-smoothing: antialiased; }
button, input { font-family: inherit; }
.txt { font-size: var(--fs); line-height: 1; white-space: nowrap; }

/* ------------------------------------------------------------ la scène */
.scene {
  position: absolute; left: 0; top: 0;
  width: 6336px; height: 3564px;
  transform-origin: 0 0;
  contain: layout style;
}
.fond { position: absolute; inset: 0; background-size: 6336px 3564px; }
/* le doigt fait glisser la rangée et passe d'une machine à l'autre : le navigateur ne doit pas le prendre pour lui */
#laverie { touch-action: none; }

.m-vide, .m, .m-panne, .m-zone, .vie { position: absolute; }
.m-vide { z-index: 1; background-size: 5080px 1320px; opacity: 0; transition: opacity .15s; visibility: hidden; }
.m-vide[data-on="1"] { visibility: visible; }
.m-vide[data-on="1"] { opacity: 1; }
.m { z-index: 2; perspective: 2600px; }
.m[data-actif="1"] { z-index: 5; }

.m-caisse { position: absolute; inset: 0; background-size: 6336px 3564px; }
.m-panne {
  z-index: 3; background-size: 5080px 1460px; opacity: 0; pointer-events: none;
  transition: opacity .6s;
}
.m-panne[data-on="1"] { opacity: 1; }
.m-zone {
  z-index: 6; background: none; border: 0; padding: 0; margin: 0;
  cursor: inherit; outline: none;
}
.m-zone[data-panne="1"] { cursor: not-allowed; }

/* Le tambour, sous la porte. Le remous ne se montre que pendant un lavage. */
.m-tambour {
  position: absolute; border-radius: 50%; overflow: hidden;
  background-size: 5080px 1320px;
}
/* La porte : un rond découpé dans le fond, qui pivote sur sa charnière à droite
   (la poignée est à gauche sur les sept machines). */
:root { --lent: 1; }
.m-porte {
  position: absolute; border-radius: 50%;
  background-size: 6336px 3564px;
  transform-origin: 97% 50%;
  transition: transform calc(.55s * var(--lent)) cubic-bezier(.3,.7,.2,1), filter calc(.55s * var(--lent));
  backface-visibility: visible;
  will-change: transform;
}
.m[data-porte="ouverte"] .m-porte { transform: rotateY(-76deg); filter: brightness(.85); }
.m[data-porte="explose"] .m-porte {
  transform: rotateY(-128deg);
  transition: transform .32s cubic-bezier(.15,1.7,.35,1), filter .32s;
  filter: brightness(.65);
}
.m[data-porte="claque"] .m-porte { transform: rotateY(0deg); transition: transform .2s cubic-bezier(.6,0,.9,.4); }
/* La vitre pendant un lavage : les lettres de la phrase qui tournent derrière
   le verre, et un reflet du verre par-dessus. Rien de tout ça n'existe au repos. */
.m-porte { z-index: 2; }
.m-vitre { position: absolute; z-index: 3; border-radius: 50%; overflow: hidden; opacity: 0; transition: opacity .5s; pointer-events: none; }
/* porte ouverte (ou en train de se fermer) : le linge est DANS le tambour,
   derrière la porte, et il n'y a pas de verre devant lui */
.m:is([data-porte="ouverte"], [data-porte="explose"], [data-fermeture="1"]) .m-vitre { z-index: 1; }
.m:is([data-porte="ouverte"], [data-porte="explose"], [data-fermeture="1"]) .m-vitre::after { opacity: 0; }
.m-vitre::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(ellipse 55% 35% at 32% 22%, rgba(255,255,255,.22), rgba(255,255,255,0) 70%), radial-gradient(circle, rgba(0,0,0,0) 62%, rgba(0,0,0,.45) 100%); }
.m[data-lave="1"] .m-vitre, .m[data-lave="repos"] .m-vitre { opacity: 1; }
.m-linge { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }

.m-led { position: absolute; }

/* --------------------------------------------- les machines qui tremblent
   C'est toute la machine qui bouge, comme une vraie : derrière elle, le mur
   sans machine (.m-vide) se découvre, donc on ne voit jamais sa découpe.
   1 elle attend son tour (un ronron), 2 elle lave (elle tangue d'un pied sur
   l'autre), 3 elle essore (elle danse), 4 la pression avant que la porte saute. */
.m[data-tremble] { transform-origin: 50% 100%; }
.m[data-tremble="1"] { animation: tremble1 .09s linear infinite; }
.m[data-tremble="2"] { animation: tangue .52s ease-in-out infinite; }
.m[data-tremble="3"] { animation: danse .075s linear infinite; }
.m[data-tremble="4"] { animation: tremble4 .05s linear infinite; }
@keyframes tremble1 { 0%,100% { translate: 0 0 } 50% { translate: 2px -1px } }
@keyframes tangue { 0%,100% { rotate: 0deg; translate: 0 0 } 25% { rotate: .5deg; translate: 4px -3px } 50% { rotate: 0deg; translate: 0 0 } 75% { rotate: -.5deg; translate: -4px -3px } }
@keyframes danse { 0%,100% { translate: 0 0; rotate: 0deg } 25% { translate: 7px -4px; rotate: .25deg } 50% { translate: -6px -1px; rotate: -.2deg } 75% { translate: 5px -5px; rotate: .15deg } }
@keyframes tremble4 { 0%,100% { translate: 0 0; rotate: 0deg } 20% { translate: 12px -8px; rotate: .6deg } 45% { translate: -11px -3px; rotate: -.5deg } 70% { translate: 9px -10px; rotate: .4deg } 85% { translate: -8px -2px; rotate: -.3deg } }
/* un sursaut : la pièce tombe, la machine encaisse */
@keyframes sursaut { 0% { translate: 0 0 } 30% { translate: 0 6px; scale: 1.004 .992 } 60% { translate: 0 -3px } 100% { translate: 0 0 } }
.m[data-sursaut="1"] { animation: sursaut .28s ease-out 1; transform-origin: 50% 100%; }
/* la pièce entière qui encaisse : un ou deux pixels d'écran, pas plus */
#laverie[data-secousse="3"] { animation: cam3 .08s linear infinite; }
#laverie[data-secousse="4"] { animation: cam4 .06s linear infinite; }
@keyframes cam3 { 0%,100% { translate: 0 0 } 33% { translate: 1px -1px } 66% { translate: -1px 1px } }
@keyframes cam4 { 0%,100% { translate: 0 0 } 25% { translate: 2px -2px } 50% { translate: -2px 2px } 75% { translate: 2px 1px } }
/* la lueur, quand c'est prêt : le hublot s'allume de l'intérieur, comme un
   coffre qu'on n'a pas encore ouvert. Des rayons tournent lentement derrière,
   et de petites étincelles en pixel clignotent autour. La machine ne bouge
   plus : elle a fini de travailler, elle attend qu'on vienne. */
.m-lueur { position: absolute; pointer-events: none; opacity: 0; mix-blend-mode: screen; transition: opacity .8s; z-index: 2; }
/* la lueur et ses rayons : une planche de huit images en pixels, qui défile d'un cran à la fois */
.m-rayons { position: absolute; inset: 0; background: var(--rayons-px) 0 0 / 800% 100% no-repeat; image-rendering: pixelated; }
.m[data-pret="1"] .m-lueur { opacity: 1; animation: lueur 1.6s steps(3) infinite alternate; }
.m[data-pret="1"] .m-rayons { animation: rayons 2.4s steps(8, jump-none) infinite alternate; }
@keyframes lueur { from { opacity: .7; } to { opacity: 1; } }
@keyframes rayons { from { background-position: 0% 0; } to { background-position: 100% 0; } }
.m[data-pret="1"] .m-porte { filter: brightness(1.3) saturate(1.1); }
.etincelle { position: absolute; z-index: 21; pointer-events: none; image-rendering: pixelated; background: 0 0 / 500% 100% no-repeat; animation: etincelle 1.2s steps(5, jump-none) infinite; }
@keyframes etincelle { from { background-position: 0% 0; } to { background-position: 100% 0; } }

.m[data-choisie="1"] .m-caisse { filter: brightness(1.07) saturate(1.06); }

/* ------------------------------------------------- la vie de la pièce */
.vie { z-index: 4; pointer-events: none; }

/* Le néon qui grésille : il s'éteint par à-coups, une fraction de seconde. */
.neon-eteint { background-size: 100% 100%; opacity: 0; }
.neon-eteint[data-on="1"] { animation: gresille 1.1s steps(1) 1; }
.neon-eteint[data-eteint="1"] { opacity: 1; animation: none; }
@keyframes gresille {
  0% { opacity: 1 } 7% { opacity: 0 } 13% { opacity: .85 } 19% { opacity: .2 } 24% { opacity: 1 }
  31% { opacity: 0 } 52% { opacity: .9 } 56% { opacity: 0 } 100% { opacity: 0 }
}

/* Le tube fatigué : toute la pièce perd un peu de lumière, deux fois. */
.tube { inset: 0; background: #000; opacity: 0; }
.tube[data-on="1"] { animation: tube .7s steps(1) 1; }
@keyframes tube { 0% { opacity: .12 } 12% { opacity: 0 } 30% { opacity: .08 } 38% { opacity: 0 } 100% { opacity: 0 } }

@media (prefers-reduced-motion: reduce) {
  .m[data-tremble], .m[data-sursaut], #laverie[data-secousse], .m-rayons, .etincelle { animation: none !important; }
  .vie { display: none; }
}

/* ------------------------------------------------- l'interface en pixel */
#ui { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#ui canvas { image-rendering: pixelated; image-rendering: crisp-edges; }
#ui .pix { position: absolute; pointer-events: auto; transition: opacity .5s .25s; }
#vol { position: fixed; inset: 0; pointer-events: none; z-index: 11; }

.saisie {
  position: absolute; opacity: 0; pointer-events: none;
  width: 1px; height: 1px; border: 0; padding: 0; left: -10px; top: 0;
}
.curseur-texte {
  position: absolute; background: var(--encre); pointer-events: none;
  animation: clignote 1.06s steps(1) infinite;
}
@keyframes clignote { 50% { opacity: 0 } }

/* ------------------------------------------------- le pixel, partout */
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.px-btn {
  background: none; border: 0; padding: 0; margin: 0; cursor: inherit; color: inherit;
  display: inline-flex; align-items: center; gap: calc(var(--u, 3px) * 2);
  pointer-events: auto; outline: none; -webkit-tap-highlight-color: transparent;
  transition: transform .08s steps(2), filter .12s;
}
.px-btn canvas { display: block; image-rendering: pixelated; }
.px-btn:hover:not([disabled]) { filter: brightness(1.18); }
.px-btn:active:not([disabled]) { filter: brightness(1.7); }
.px-btn[disabled] { opacity: .45; }
.px-btn[hidden] { display: none; }
.px-btn:focus-visible { outline: var(--u, 3px) solid var(--rose); outline-offset: var(--u, 3px); }
.px-cadre { padding: 0 calc(var(--u, 3px) * 2); box-sizing: border-box; }
.px-cadre[data-actif="1"] { filter: brightness(1.25) sepia(.4); }
.px-lien { display: inline-block; pointer-events: auto; }
.px-lien canvas { display: block; image-rendering: pixelated; }
.px-lien:focus-visible { outline: 3px solid var(--rose); outline-offset: 2px; }
.px-texte canvas { display: block; }

/* ------------------------------------------------- la phrase */
.saisie-zone { position: absolute; inset: 0; pointer-events: none; }
.saisie-zone canvas { position: absolute; image-rendering: pixelated; }
.saisie-zone[data-verrou="1"] .saisie-ligne, .saisie-zone[data-verrou="1"] .saisie-outils, .saisie-zone[data-verrou="1"] .saisie-idees { opacity: 0; pointer-events: none !important; }
.saisie-ligne { transition: opacity .3s; }
.saisie-voile {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,8,7,0) 0%, rgba(10,8,7,.55) 45%, rgba(10,8,7,.78) 100%);
  transition: opacity .5s;
}
.saisie-voile[data-verrou="1"] { opacity: .35; }
.saisie-outils { position: absolute; display: flex; gap: calc(var(--p) * 1); pointer-events: auto; transition: opacity .3s; }
.saisie-outils .px-btn { pointer-events: auto; }
.saisie-idees {
  position: absolute; left: 0; right: 0; display: flex; justify-content: center; flex-wrap: wrap;
  gap: calc(var(--p) * 3); pointer-events: none;
}
.saisie-idee { pointer-events: auto; position: relative; }
.saisie-idee canvas { position: static; }
.saisie-idee:hover canvas { filter: brightness(1.6); }
.saisie-info { pointer-events: none; }
.curseur-texte { position: absolute; background: var(--creme); pointer-events: none; animation: clignote 1.06s steps(1) infinite; box-shadow: 2px 2px 0 rgba(0,0,0,.5); }

/* ------------------------------------------------- en haut */
.hud { position: absolute; top: calc(var(--u, 3px) * 5); right: calc(var(--u, 3px) * 5); display: flex; align-items: center; gap: calc(var(--u, 3px) * 4); pointer-events: auto; transition: opacity .6s; }
.hud-gauche { position: absolute; top: calc(var(--u, 3px) * 5); left: calc(var(--u, 3px) * 5); pointer-events: auto; transition: opacity .6s; }
.hud[data-cache="1"], .hud-gauche[data-cache="1"] { opacity: 0; pointer-events: none; }
.hud-jetons { position: relative; }
.hud-delai { position: absolute; top: calc(100% + var(--u) * 0.5); right: var(--u); image-rendering: pixelated; pointer-events: none; }
.hud-delai[hidden] { display: none; }
.hud-collection { position: relative; }
.hud-compte { position: absolute; image-rendering: pixelated; pointer-events: none; }
.hud-coeur:hover canvas { animation: battement .5s steps(2) 2; }
@keyframes battement { 50% { transform: scale(1.15); } }

/* ------------------------------------------------- le panneau d'une machine */
.panneau { position: absolute; z-index: 3; pointer-events: auto; box-sizing: border-box; display: flex; flex-direction: column; gap: calc(var(--u) * 3);
  padding: calc(var(--u) * 1) calc(var(--u) * 3) calc(var(--u) * 3); font-size: var(--fs); line-height: 1.25;
  filter: drop-shadow(var(--u) var(--u) 0 rgba(0,0,0,.6)); }
.panneau[hidden] { display: none; }
.panneau-tete { display: flex; justify-content: space-between; align-items: center; gap: calc(var(--u) * 2); margin-right: calc(var(--u) * -2); }
.panneau-titre { margin: 0; font-size: var(--fs); font-weight: normal; line-height: 1; color: var(--machine, var(--creme)); }
.panneau-note { margin: 0; color: var(--creme); }
.panneau-note[data-etape="1"] { color: var(--machine, var(--rose)); }
.panneau-gout { margin: 0; color: #8f8676; }
.panneau-alerte { margin: 0; color: var(--rose); }
.panneau-ligne { margin: 0; color: #8f8676; display: flex; justify-content: space-between; gap: calc(var(--u) * 3); }
.panneau-ligne span { white-space: nowrap; }
.panneau-ligne span:first-child { color: var(--creme); }
.panneau-ligne[hidden] { display: none; }
.panneau-chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--u); padding: calc(var(--u) * 2.5) var(--u) calc(var(--u) * 2); }
.cellule { display: flex; flex-direction: column; align-items: center; gap: var(--u); }
.cellule[hidden] { display: none; }
.cellule-n { color: #8fd47a; }
.cellule-t { color: #8f8676; }
.panneau-chiffres[hidden], .panneau-barre[hidden], .panneau-action[hidden], .panneau-note[hidden], .panneau-gout[hidden], .panneau-alerte[hidden] { display: none; }
.panneau-barre { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--u); }
.panneau-barre i { height: calc(var(--u) * 4); background: #110f0d; box-shadow: inset 0 var(--u) 0 #000; }
.panneau-barre i[data-fait="peint"] { background: color-mix(in srgb, var(--machine, var(--rose)) 45%, #110f0d); animation: peindre 1s steps(2) infinite; }
@keyframes peindre { 50% { background: color-mix(in srgb, var(--machine, var(--rose)) 75%, #fff); } }
@media (prefers-reduced-motion: reduce) { .panneau-barre i[data-fait="peint"] { animation: none; } }
.panneau-barre i[data-fait="1"] { background: var(--machine, var(--rose)); box-shadow: inset 0 var(--u) 0 rgba(255,255,255,.35), inset 0 calc(var(--u) * -1) 0 rgba(0,0,0,.3); }
.panneau-action { margin-top: var(--u); }
.panneau { animation: surgir .2s steps(4); }
@keyframes surgir { from { transform: translateY(calc(var(--u) * 2)); opacity: 0; } }
.fleche-machine { position: absolute; z-index: 3; transform: translateY(-50%); padding: calc(var(--u) * 3); }

/* ------------------------------------------------- les fenêtres
   Une seule unité partout (--u) : le texte fait 11 unités de haut, les traits
   une unité, les marges des multiples d'unité. Rien n'est plus fin ni plus
   gros que le reste. */
.fenetre-fond {
  position: fixed; inset: 0; z-index: 30; background: rgba(8,6,5,.62);
  display: flex; align-items: center; justify-content: center; padding: 12px; box-sizing: border-box;
}
.fenetre-fond + .fenetre-fond { background: rgba(8,6,5,.45); }
.fenetre {
  position: relative; box-sizing: border-box; color: var(--creme);
  max-height: calc(100dvh - 24px); display: flex; flex-direction: column;
  padding: calc(var(--u) * 2) calc(var(--u) * 4) calc(var(--u) * 4);
  font-size: var(--fs); line-height: 1.3;
  filter: drop-shadow(var(--u) var(--u) 0 rgba(0,0,0,.6)) drop-shadow(0 calc(var(--u) * 3) 0 rgba(0,0,0,.25));
}
.fenetre.petite { width: min(calc(var(--u) * 185), 100%); }
.fenetre.moyenne { width: min(calc(var(--u) * 230), 100%); }
.fenetre.large { width: min(calc(var(--u) * 330), 100%); }
.fenetre.profil { width: min(calc(var(--u) * 290), 100%); }
.fenetre.paquet { width: min(calc(var(--u) * 230), 100%, calc((100dvh - var(--u) * 70) * 1.5 + var(--u) * 20)); }
.fenetre.image { width: min(calc(var(--u) * 250), 100%, calc(100dvh - var(--u) * 40)); }
.fenetre canvas { display: block; image-rendering: pixelated; }
.fenetre-tete { display: flex; align-items: center; gap: calc(var(--u) * 3); padding: 0 0 calc(var(--u) * 3); margin: 0 calc(var(--u) * -2) calc(var(--u) * 4); min-height: calc(var(--u) * 13);
  box-shadow: 0 var(--u) 0 #2c2824; padding-left: calc(var(--u) * 2); padding-right: calc(var(--u) * 1); }
.fenetre-ic { display: flex; flex: none; }
.fenetre-titre { margin: 0; min-width: 0; font-size: var(--fs); font-weight: normal; line-height: 1; color: var(--creme); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fenetre-annexe { flex: 1; color: #6f675b; font-size: var(--fs); }
.f-paquet .fenetre-titre, .f-image .fenetre-titre { color: #c9bfab; }
.fenetre-tete .ib[hidden] { display: none; }
.fenetre-corps { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: calc(var(--u) * 5); padding: 2px; scrollbar-color: #4a443c transparent; scrollbar-width: thin; }
.fenetre-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: calc(var(--u) * 2) calc(var(--u) * 5); padding-top: calc(var(--u) * 4); margin-top: calc(var(--u) * 3); box-shadow: inset 0 var(--u) 0 #2c2824; padding-top: calc(var(--u) * 5); }
.fenetre-pied[hidden] { display: none; }
.fenetre-texte { margin: 0; }
.centre { text-align: center; margin-left: auto; margin-right: auto; }
.discret { color: #8f8676; }
.rose { color: var(--rose); }
.vert { color: #8fd47a; }
.or { color: #f4b13a; }
.gros, .petit, .fenetre-texte.gros { font-size: var(--fs); }
.ic { display: inline-flex; vertical-align: middle; flex: none; }

/* les petites icônes d'action, sans cadre */
.ib { padding: var(--u); }
.ib:hover:not([disabled]) { background: rgba(243,234,214,.08); filter: none; }
.ib[data-actif="1"] { background: none; }
.lien-btn { color: #c9bfab; font-size: var(--fs); padding: var(--u) 0; text-decoration: none; }
.lien-btn .txt { color: inherit !important; }
.lien-btn:hover { color: var(--rose); filter: none; }
.lien-btn.rose, .lien-btn.rose .txt { color: var(--rose) !important; }
.gros-btn { padding: 0 calc(var(--u) * 2) var(--u); min-height: calc(var(--u) * 13); justify-content: center; gap: calc(var(--u) * 2); }
.gros-btn:active:not([disabled]) { transform: translateY(var(--u)); }
.px-lien { color: #a99f8c; text-decoration: none; }
.px-lien:hover { color: var(--rose); }
.px-lien:focus-visible { outline: var(--u) solid var(--rose); outline-offset: var(--u); }
.liens-legaux { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--u) calc(var(--u) * 5); width: 100%; }
.liens-legaux .px-lien { color: #6f675b; }
.infobulle { position: fixed; z-index: 70; pointer-events: none; display: none; background: #0b0908; color: var(--creme); font-size: var(--fs); line-height: 1; padding: var(--u) calc(var(--u) * 2) calc(var(--u) * 1.5); white-space: nowrap; box-shadow: 0 0 0 var(--u) #3a3530, var(--u) var(--u) 0 var(--u) rgba(0,0,0,.5); }
.actions { display: flex; gap: var(--u); align-items: center; }

/* un creux : une zone enfoncée (ombre d'une unité en haut, lumière en bas) */
.creux { padding: 0; box-sizing: border-box; }

/* le champ */
.champ { display: flex; align-items: center; gap: calc(var(--u) * 2); padding: 0 var(--u); height: calc(var(--fs) + var(--u) * 6); cursor: text; box-sizing: border-box; min-width: 0; }
.champ input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: var(--creme); caret-color: var(--rose); font-size: var(--fs); padding: 0; }
.champ input::placeholder { color: #5f584d; }

/* les lignes de réglage */
.liste { display: flex; flex-direction: column; width: 100%; }
.reglage { display: flex; align-items: center; gap: calc(var(--u) * 3); width: 100%; padding: calc(var(--u) * 2.5) var(--u); font-size: var(--fs); color: var(--creme); box-shadow: inset 0 calc(var(--u) * -1) 0 #2c2824; box-sizing: border-box; text-align: left; }
.reglage-nom { flex: 1; }
.reglage:hover:not(.inerte) { background: #221e1b; filter: none; }
.reglage-val { color: #5f584d; }
.reglage[data-danger="1"] { color: #ff6b6b; }
.reglage.inerte .reglage-val { color: #5f584d; }
.ligne-champ { display: flex; gap: var(--u); align-items: center; padding: var(--u) 0 calc(var(--u) * 2); }
.ligne-champ .champ { flex: 1; }
.ligne { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 2); }

/* la collection */
.barre { display: flex; align-items: center; gap: calc(var(--u) * 3); }
.barre .champ { flex: 1; }
.collection-zone { display: flex; flex-direction: column; }
.vide-texte { padding: calc(var(--u) * 10) 0; }
.collection-vide { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 5); padding: calc(var(--u) * 12) 0; }
.grille-paquets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 6) calc(var(--u) * 5); }
@media (max-width: 760px) { .grille-paquets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .grille-paquets { grid-template-columns: minmax(0, 1fr); } }
.tuile { padding: 0; border: 0; background: none; cursor: inherit; color: inherit; display: flex; flex-direction: column; gap: calc(var(--u) * 2); text-align: left; min-width: 0; font-size: var(--fs); }
.tuile:focus-visible { outline: var(--u) solid var(--rose); outline-offset: calc(var(--u) * 2); }
.mosaique { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--u); padding: var(--u); background: #0b0908; transition: transform .1s steps(2); }
.mosaique img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: #2c2824; }
.tuile:hover .mosaique { transform: translateY(calc(var(--u) * -1)); box-shadow: 0 var(--u) 0 var(--machine, var(--rose)); }
.mosaique img.lavee, .image-case.lavee { background: var(--lavee) var(--lx, 0) var(--ly, 0) / calc(var(--u) * 288) calc(var(--u) * 288); image-rendering: pixelated; }
.tuile-phrase { line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--creme); }
.tuile-meta { display: flex; align-items: center; gap: calc(var(--u) * 4); }
.tuile-meta .a-droite { margin-left: auto; }

/* un paquet */
.grille-paquet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--u); padding: var(--u); background: #0b0908; }
@media (max-width: 520px) { .grille-paquet { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.image-case { padding: 0; border: 0; background: #2c2824; cursor: inherit; aspect-ratio: 1; position: relative; overflow: hidden; }
.image-case img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter .15s; }
.image-case:hover img { filter: brightness(1.12); }
.image-case .aime { position: absolute; right: var(--u); top: var(--u); }
.image-case:focus-visible { outline: var(--u) solid var(--rose); outline-offset: calc(var(--u) * -1); }
.meta { display: flex; align-items: center; gap: calc(var(--u) * 3); margin-right: auto; }
.f-paquet .fenetre-pied, .f-image .fenetre-pied, .f-collection .fenetre-pied { justify-content: space-between; }

/* une image */
.f-image .fenetre-corps { overflow: hidden; }
.visionneuse { position: relative; aspect-ratio: 1; width: 100%; background: #0b0908; display: flex; align-items: center; justify-content: center; }
.visionneuse img { display: block; width: 100%; height: 100%; object-fit: contain; }
.visionneuse img[hidden], .visionneuse span[hidden] { display: none; }
.visionneuse .fleche { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(11,9,8,.7); padding: calc(var(--u) * 3) calc(var(--u) * 2); opacity: 0; transition: opacity .15s; }
.visionneuse:hover .fleche, .visionneuse .fleche:focus-visible { opacity: 1; }
@media (pointer: coarse) { .visionneuse .fleche { opacity: .85; } }
.visionneuse .fleche.g { left: var(--u); } .visionneuse .fleche.d { right: var(--u); }
.compteur { margin-right: auto; }

/* le profil */
.profil-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(var(--u) * 10); }
@media (max-width: 640px) { .profil-cols { grid-template-columns: minmax(0, 1fr); } }
.profil-gauche, .profil-droite { display: flex; flex-direction: column; gap: calc(var(--u) * 5); min-width: 0; }
.profil-tete { display: flex; gap: calc(var(--u) * 4); align-items: center; }
.profil-bloc { display: flex; flex-direction: column; gap: calc(var(--u) * 1.5); min-width: 0; }
.profil-bloc span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chiffres { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--u); padding: calc(var(--u) * 3) var(--u); }
.chiffre { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 1.5); }
.chiffre-n { color: var(--creme); }
.barres { display: flex; flex-direction: column; gap: calc(var(--u) * 1.5); }
.barre-m { display: grid; grid-template-columns: calc(var(--u) * 50) 1fr calc(var(--u) * 10); align-items: center; gap: calc(var(--u) * 2); }
.barre-nom { color: #8f8676; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barre-piste { height: calc(var(--u) * 4); background: #110f0d; box-shadow: inset 0 var(--u) 0 #000; position: relative; }
.barre-piste i { position: absolute; left: 0; top: 0; bottom: 0; box-shadow: inset 0 var(--u) 0 rgba(255,255,255,.3), inset 0 calc(var(--u) * -1) 0 rgba(0,0,0,.35); }
.barre-m span:last-child { text-align: right; }
.recentes { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--u); padding: var(--u); background: #0b0908; border: 0; cursor: inherit; }
.recentes img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.recentes:hover img { filter: brightness(1.12); }
.reglage-rail { flex: none; }

/* soutenir */
.deux { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 4); }
@media (max-width: 560px) { .deux { grid-template-columns: 1fr; } }
.porte-soutien { padding: calc(var(--u) * 6) calc(var(--u) * 4) calc(var(--u) * 4) !important; display: flex; flex-direction: column; align-items: center; text-align: center; gap: calc(var(--u) * 3); padding: calc(var(--u) * 6) calc(var(--u) * 4) calc(var(--u) * 4); }
.porte-soutien .gros-btn { margin-top: auto; align-self: stretch; }
.porte-titre { color: var(--creme); }
.etapes { margin: 0; padding: 0; list-style: none; counter-reset: e; display: flex; flex-direction: column; gap: calc(var(--u) * 4); }
.etapes li { counter-increment: e; display: grid; grid-template-columns: calc(var(--u) * 8) 1fr; column-gap: calc(var(--u) * 2); row-gap: var(--u); }
.etapes li::before { content: counter(e); color: var(--rose); grid-row: span 2; }
.etapes li .px-lien { grid-column: 2; color: var(--rose); }

/* les jetons */
.poche { display: flex; justify-content: center; gap: calc(var(--u) * 2); padding: calc(var(--u) * 5) calc(var(--u) * 3); }
.alveole { display: flex; animation: tombe .36s steps(4) both; }
@keyframes tombe { from { transform: translateY(calc(var(--u) * -6)); opacity: 0; } }
.jauge-ligne { display: flex; align-items: center; gap: calc(var(--u) * 3); }
.jauge { display: block; flex: 1; height: calc(var(--u) * 4); background: #110f0d; box-shadow: inset 0 var(--u) 0 #000; position: relative; }
.jauge i { position: absolute; left: 0; top: 0; bottom: 0; background: #f4b13a; box-shadow: inset 0 var(--u) 0 #ffe7a0, inset 0 calc(var(--u) * -1) 0 #c98219; }
.regles { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: calc(var(--u) * 3); }
.regles li { display: grid; grid-template-columns: calc(var(--u) * 14) 1fr; align-items: center; }
.regles .ic { justify-self: center; }

/* comment ça marche */
.bd { margin: 0; padding: 0; list-style: none; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--u); }
.bd-case { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 1.5); text-align: center; flex: 1; min-width: 0; }
.bd-n { color: var(--rose); }
.bd-image { padding: 0 !important; width: calc(var(--u) * 28); height: calc(var(--u) * 24); display: flex; align-items: center; justify-content: center; padding: 0; margin-bottom: var(--u); }
.bd-fleche { margin-top: calc(var(--u) * 20); }
@media (max-width: 560px) { .bd { flex-wrap: wrap; } .bd-case { flex: 1 1 40%; } .bd-fleche { display: none; } }
.explication { display: flex; gap: calc(var(--u) * 4); align-items: center; }
.explication-texte { display: flex; flex-direction: column; gap: var(--u); }
.led-exemple { flex: none; background: #1a0606; color: #ff3a2c; text-shadow: 0 0 6px rgba(255,58,44,.8); padding: var(--u) calc(var(--u) * 2) calc(var(--u) * 1.5); box-shadow: inset 0 0 0 var(--u) #000, 0 0 0 var(--u) #3a3530; }

/* ------------------------------------------------- les six images */
.sortie { position: fixed; inset: 0; z-index: 20; pointer-events: auto; }
.image-sortie { position: absolute; left: 0; top: 0; padding: 0; border: 0; background: none; box-sizing: border-box; cursor: inherit; pointer-events: auto; outline: none;
  filter: drop-shadow(0 calc(var(--p) * 2) 0 rgba(0,0,0,.45)); }
.image-sortie[hidden] { display: none; }
.image-sortie img { display: block; width: 100%; height: 100%; object-fit: cover; }
.image-sortie.lavee::after { content: ''; position: absolute; inset: 0; background: var(--lavee) var(--lx, 0) var(--ly, 0) / calc(var(--u) * 288) calc(var(--u) * 288); image-rendering: pixelated; }
.image-sortie:focus-visible { outline: 3px solid var(--rose); outline-offset: 6px; }
.sortie-barre { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: var(--q); pointer-events: auto;
  background: rgba(16,14,12,.88); padding: var(--q); box-shadow: 0 0 0 var(--q) #2c2723; }
.sortie-barre .px-btn { padding: calc(var(--q) * 2.5); }
.sortie-barre .px-btn[hidden] { display: none; }
.gerbe { position: fixed; left: 0; top: 0; z-index: 25; pointer-events: none; }

/* ------------------------------------------------- l'arrivée, le choc */
.arrivee { position: fixed; inset: 0; z-index: 60; background: radial-gradient(ellipse 80% 70% at 50% 45%, rgba(4,3,3,.84), rgba(2,1,1,.96)); }
.arrivee-invite { position: absolute; left: 50%; bottom: 14%; transform: translateX(-50%); animation: respire 2.8s ease-in-out infinite; outline: none; }
.arrivee-invite:focus-visible { outline: 3px solid var(--rose); outline-offset: 8px; }
@keyframes respire { 0%, 100% { opacity: .9; } 50% { opacity: .35; } }
.vignette { position: fixed; inset: 0; z-index: 8; pointer-events: none; opacity: 0; background: radial-gradient(ellipse 45% 55% at 50% 42%, transparent 30%, rgba(0,0,0,.9) 100%); }
.eclair { position: fixed; left: 0; top: 0; width: 10px; height: 10px; border-radius: 50%; opacity: 0; pointer-events: none; z-index: 19; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255,252,240,1) 0%, rgba(255,230,170,.8) 25%, rgba(255,200,120,0) 70%); }
.jeton-vol { position: fixed; left: 0; top: 0; z-index: 40; pointer-events: none; image-rendering: pixelated; margin: -12px 0 0 -12px; }
.haptique { position: fixed; left: -100px; top: 0; }
#laverie { position: fixed; inset: 0; overflow: hidden; transform-origin: 50% 45%; }

@media (prefers-reduced-motion: reduce) {
  .curseur-texte { animation: none; }
  .arrivee-invite { animation: none; }
}

/* ------------------------------------------------- V2.5 : pages à lire */
.fenetre.lecture { width: min(calc(var(--u) * 250), 100%); }
.section { display: flex; flex-direction: column; gap: calc(var(--u) * 2.5); }
.section-titre { color: var(--rose); }
.para { margin: 0; line-height: 1.35; }
.chapeau { color: var(--creme); }
.f-infos .fenetre-corps { gap: calc(var(--u) * 7); padding-right: calc(var(--u) * 2); }
.f-infos .etapes li { color: #c9bfab; }
.machines { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 4) calc(var(--u) * 6); }
@media (max-width: 640px) { .machines { grid-template-columns: 1fr; } }
.machines li { display: flex; gap: calc(var(--u) * 3); align-items: flex-start; }
.machines li > div { display: flex; flex-direction: column; gap: var(--u); }
.pastille { flex: none; width: calc(var(--u) * 4); height: calc(var(--u) * 4); margin-top: calc(var(--u) * 1.5); box-shadow: 0 0 0 var(--u) #0b0908; }
.legende { margin: 0; display: flex; gap: calc(var(--u) * 4); align-items: center; }
.legende figcaption { color: #c9bfab; line-height: 1.35; }
.touches { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: calc(var(--u) * 2) calc(var(--u) * 4); align-items: center; }
.touches dt { color: var(--creme); background: #2c2824; padding: var(--u) calc(var(--u) * 2) calc(var(--u) * 1.5); box-shadow: 0 var(--u) 0 #0b0908; text-align: center; min-width: calc(var(--u) * 10); }
.touches dd { margin: 0; color: #8f8676; }

/* la collection : le tri en onglets, les paquets en cartes */
.onglets { display: flex; gap: var(--u); }
.onglet { padding: var(--u) calc(var(--u) * 2) calc(var(--u) * 1.5); color: #8f8676; font-size: var(--fs); }
.onglet[data-on="1"] { color: var(--creme); background: #2c2824; box-shadow: 0 var(--u) 0 var(--rose); }
.onglet:hover { color: var(--creme); filter: none; }
.tuile { padding: calc(var(--u) * 1); }
.tuile .mosaique { padding: 0; background: none; }
.tuile-phrase, .tuile-meta { padding: 0 calc(var(--u) * 1); }
.tuile-meta { padding-bottom: var(--u); }
.tuile:hover .mosaique { transform: none; box-shadow: none; }
.tuile:hover { transform: translateY(calc(var(--u) * -1)); }

/* le profil */
.fidelite { display: flex; flex-direction: column; gap: calc(var(--u) * 3); padding: calc(var(--u) * 4); box-shadow: inset calc(var(--u) * 2) 0 0 var(--machine); }
.fidelite-tete { display: flex; flex-direction: column; gap: var(--u); }
.fidelite-tete span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fidelite-trous { max-width: 100%; }
.stats { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: calc(var(--u) * 2.5) calc(var(--u) * 4); }
.stats dt { color: #8f8676; }
.stats dd { margin: 0; text-align: right; color: var(--creme); }
.jauge-tete { display: flex; justify-content: space-between; gap: calc(var(--u) * 3); }
.f-jetons .fenetre-corps { gap: calc(var(--u) * 4); }

/* --- les pièces, façon recharge (12 octobre) --- */
.alveole { position: relative; }
.alveole .remplit { position: absolute; left: 0; top: 0; }
.jetons-temps { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 6); }
.jetons-compte { display: flex; align-items: baseline; gap: var(--u); }
.jetons-n { font-size: var(--fsg); line-height: 1; color: #f4b13a; }
.jetons-delais { display: flex; flex-direction: column; gap: calc(var(--u) * 2); min-width: 0; flex: 1; }
.jetons-delais .ligne span:last-child { text-align: right; }
.or { color: #f4b13a; }
.regles { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 3); }
.regles li { display: grid; grid-template-columns: calc(var(--u) * 13) 1fr; align-items: center; gap: calc(var(--u) * 3); color: #c9bfab; }
.regles li .ic { justify-self: center; }
.plus-ligne { align-items: center; }
.plus-ligne .reglage-nom { display: flex; flex-direction: column; gap: var(--u); line-height: 1.3; }
.plus-ligne > .ic { flex: none; width: calc(var(--u) * 13); display: flex; justify-content: center; }
.f-cle .fenetre-corps { gap: calc(var(--u) * 4); }
@media (min-width: 700px) { .f-jetons .regles { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 3) calc(var(--u) * 6); } }
.puces { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 2); text-align: left; align-self: stretch; color: #c9bfab; }
.puces li { display: grid; grid-template-columns: calc(var(--u) * 7) 1fr; line-height: 1.3; }
.puces li::before { content: '>'; color: var(--rose); }
.f-preter .stats dd { text-align: right; }

/* --- le profil, une colonne (12 octobre) --- */
.f-profil .fenetre-corps { gap: calc(var(--u) * 5); }
.f-profil .fidelite { align-items: flex-start; padding: calc(var(--u) * 5) calc(var(--u) * 5) calc(var(--u) * 5) calc(var(--u) * 7); }
.fidelite-dit { color: #c9bfab; line-height: 1.35; }
.tuiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 2); }
.tuile { display: flex; flex-direction: column; gap: calc(var(--u) * 1.5); padding: calc(var(--u) * 3); background: #15130f; box-shadow: inset 0 0 0 var(--u) #2c2824; min-width: 0; }
.tuile-v { font-size: var(--fsg); line-height: 1; color: var(--creme); }
.tuile .discret { line-height: 1.25; }
@media (max-width: 520px) { .tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.legende-led { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: calc(var(--u) * 3) calc(var(--u) * 4); align-items: center; }
.legende-led dt { display: flex; }
.legende-led dd { margin: 0; color: #c9bfab; line-height: 1.3; }
.led-exemple { display: block; padding: 0; box-shadow: 0 0 0 var(--u) #000, 0 0 0 calc(var(--u) * 2) #6f675b; }
.legende-led dt { margin-right: calc(var(--u) * 2); }
/* le tambour pilote la secousse (charge réelle) : plus de boucle fixe */
.m[data-js="1"] { animation: none !important; transform-origin: 50% 100%; }
/* La machine qui bouge (12 octobre au soir : « on voit qu'on a juste coupé »).
   Ses bords latéraux, coupés au milieu de l'ombre entre deux machines, se
   fondent sur quelques pixels ; le mur découvert derrière elle est assombri
   comme un recoin, donc la découpe ne se voit plus quand elle danse. */
.m:is([data-tremble]:not([data-tremble='']), [data-js='1'], [data-sursaut='1']) .m-caisse { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%); }
.m-vide { filter: brightness(.72);
  /* seulement la silhouette de la machine (le rectangle a 46 px de marge tout
     autour) : ailleurs, le mur vide n'a rien à montrer (« rectangles gris ») */
  -webkit-mask-image: linear-gradient(to right, transparent 50px, #000 70px, #000 calc(100% - 70px), transparent calc(100% - 50px)), linear-gradient(to bottom, transparent 44px, #000 64px);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 50px, #000 70px, #000 calc(100% - 70px), transparent calc(100% - 50px)), linear-gradient(to bottom, transparent 44px, #000 64px);
  mask-composite: intersect; }

/* ===================================================================== */
/* les fenêtres, V2.7 (12 octobre au soir) : texte serré, tout centré,     */
/* des tuiles arrondies en pixel, une chose en grand par fenêtre          */
/* ===================================================================== */
.fenetre { line-height: 1.08; word-spacing: calc(var(--u) * -1); }
.para, .legende figcaption, .fidelite-dit, .tuile .discret, .legende-led dd { line-height: 1.08; }
.para { color: #c9bfab; }
.para.chapeau { color: var(--creme); }
.fenetre-corps { gap: calc(var(--u) * 6); }
.section { display: flex; flex-direction: column; gap: calc(var(--u) * 3); }
.section-titre { color: var(--rose); }

/* les tuiles : une zone enfoncée arrondie, contenu centré */
.tuile-c { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 4) calc(var(--u) * 2) !important; min-width: 0; }
.tuile-c .txt { white-space: normal; line-height: 1.08; }
.tuile-c-grand { color: var(--creme); }
.tuile-v { font-size: var(--fsg); line-height: 1; color: var(--creme); white-space: nowrap; }
.tuiles-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 2); }
.tuiles-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--u) * 2); }
@media (max-width: 560px) { .tuiles-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tuile-bouton { cursor: inherit; font: inherit; color: inherit; line-height: 1.08; }
.tuile-bouton:hover:not([disabled]) { filter: brightness(1.25); }

/* les pièces : la poche en grand, le compte en or, les deux temps */
.f-jetons .jetons-hero { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 3); }
.f-jetons .poche { align-self: stretch; }
.jetons-compte { display: flex; align-items: baseline; gap: var(--u); }
.jetons-n { font-size: var(--fsg); line-height: 1; color: #f4b13a; }
.jetons-max { color: #8f8676; }
.jetons-quand { white-space: pre; }

/* soutenir */
.f-soutien .porte-soutien { gap: calc(var(--u) * 3); padding: calc(var(--u) * 5) calc(var(--u) * 4) calc(var(--u) * 4) !important; }
.f-soutien .porte-soutien .para { text-align: center; }
.porte-nombre { font-size: var(--fsg); line-height: 1; color: #8fd47a; }

/* le carton de fidélité */
.carton { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 3); color: #3a3026; padding-bottom: calc(var(--u) * 2); }
.carton-bandeau { align-self: stretch; display: flex; justify-content: space-between; padding: calc(var(--u) * 2) calc(var(--u) * 3);
  background: var(--machine); color: #1a1714; margin: calc(var(--u) * -2) calc(var(--u) * -2) 0; }
.carton-cases { margin: calc(var(--u) * 1) 0; }
.carton-dit { color: #3a3026; }
.carton-pleines { color: #8a7a5c; }

/* la page d'infos */
.gestes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(var(--u) * 2); }
.gestes li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: calc(var(--u) * 2); }
.gestes li > div { display: flex; flex-direction: column; gap: var(--u); }
.gestes .txt { white-space: normal; line-height: 1.08; }
.geste-titre { color: var(--creme); }
@media (max-width: 640px) { .gestes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.puces-machines { display: flex; flex-direction: column; gap: calc(var(--u) * 1.5); }
.puce-machine { display: grid; grid-template-columns: calc(var(--u) * 62) 1fr; align-items: center; gap: calc(var(--u) * 3); padding: calc(var(--u) * 3) calc(var(--u) * 3) calc(var(--u) * 3) calc(var(--u) * 6) !important;
  box-shadow: inset calc(var(--u) * 2) 0 0 var(--machine); }
.puce-machine .txt { white-space: normal; line-height: 1.08; }
.puce-nom { color: var(--machine); }
.tuiles-led { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--u) * 2); }
@media (max-width: 560px) { .tuiles-led { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.touches { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(var(--u) * 2); }
@media (max-width: 560px) { .touches { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.touche { color: var(--rose); }
.fenetre.lecture { width: min(calc(var(--u) * 300), 100%); }

/* une image bloquée par le filtre : la mosaïque, et pourquoi, au milieu */
.lavee-dit { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 12%; color: #c9bfab; line-height: 1.1; white-space: normal; pointer-events: none; text-shadow: 0 var(--u) 0 #000; }
.lavee-dit b { display: block; color: var(--creme); font-weight: normal; margin-bottom: calc(var(--u) * 2); }

/* la collection, deux paquets par ligne (12 octobre au soir) */
.grille-paquets { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: calc(var(--u) * 3) !important; }
@media (max-width: 520px) { .grille-paquets { grid-template-columns: minmax(0, 1fr) !important; } }
.paquet-carte { display: flex; flex-direction: column; align-items: stretch; gap: calc(var(--u) * 2.5); padding: calc(var(--u) * 3) !important;
  text-align: left; min-width: 0; font: inherit; color: inherit; line-height: 1.08; cursor: inherit; }
.paquet-carte:hover:not([disabled]) { filter: brightness(1.18); }
.bande { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--u); }
.bande img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: #2c2824; }
.bande img.lavee { background: var(--lavee) var(--lx, 0) var(--ly, 0) / calc(var(--u) * 288) calc(var(--u) * 288); image-rendering: pixelated; }
.paquet-phrase { white-space: normal; color: var(--creme); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.paquet-meta { display: flex; align-items: center; gap: calc(var(--u) * 4); }
.paquet-meta .a-droite { margin-left: auto; }

/* les pièces, troisième version : présentoir, jauge épaisse, gros boutons */
.f-jetons .fenetre-corps { align-items: center; gap: calc(var(--u) * 5); }
.presentoir { display: block; }
.jetons-ligne { display: flex; align-items: center; gap: calc(var(--u) * 5); align-self: stretch; }
.jauge-jeu { position: relative; flex: 1; height: calc(var(--u) * 13); background: #0b0908;
  box-shadow: 0 0 0 var(--u) #000, inset 0 var(--u) 0 #000; clip-path: polygon(var(--u) 0, calc(100% - var(--u)) 0, 100% var(--u), 100% calc(100% - var(--u)), calc(100% - var(--u)) 100%, var(--u) 100%, 0 calc(100% - var(--u)), 0 var(--u)); }
.jauge-jeu i { position: absolute; left: 0; top: 0; bottom: 0; background:
  linear-gradient(#ffe7a0 0 var(--u), #f4b13a var(--u) calc(100% - var(--u) * 2), #c98219 calc(100% - var(--u) * 2)); }
.jauge-dit { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #f3ead6; text-shadow: var(--u) 0 0 #000, calc(var(--u) * -1) 0 0 #000, 0 var(--u) 0 #000, 0 calc(var(--u) * -1) 0 #000; white-space: nowrap; }
.regle-ligne { color: #c9bfab; text-align: center; white-space: normal; }
.btns-jeu { display: flex; flex-direction: column; gap: calc(var(--u) * 2); align-self: stretch; }
.btn-jeu { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 3); width: 100%; box-sizing: border-box;
  padding: calc(var(--u) * 2) calc(var(--u) * 4) calc(var(--u) * 3); font: inherit; color: #1a1612; cursor: inherit; }
.btn-jeu:hover:not([disabled]) { filter: brightness(1.12); }
.btn-jeu:active:not([disabled]) { transform: translateY(var(--u)); filter: brightness(.95); }
.btn-jeu[disabled] { opacity: .5; }
.btn-jeu-p { background: #1a1612; color: #f3ead6; padding: var(--u) calc(var(--u) * 2) calc(var(--u) * 1.5); white-space: nowrap;
  clip-path: polygon(var(--u) 0, calc(100% - var(--u)) 0, 100% var(--u), 100% calc(100% - var(--u)), calc(100% - var(--u)) 100%, var(--u) 100%, 0 calc(100% - var(--u)), 0 var(--u)); }

/* la page d'infos, troisième version : de vrais morceaux de la laverie */
.morceau { display: block; flex: none; image-rendering: auto; background-repeat: no-repeat; }
.vues { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(var(--u) * 3); }
@media (max-width: 640px) { .vues { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vues li { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 2); }
.vue-img { position: relative; overflow: hidden; clip-path: polygon(calc(var(--u) * 2) 0, calc(100% - var(--u) * 2) 0, 100% calc(var(--u) * 2), 100% calc(100% - var(--u) * 2), calc(100% - var(--u) * 2) 100%, calc(var(--u) * 2) 100%, 0 calc(100% - var(--u) * 2), 0 calc(var(--u) * 2)); }
.vue-phrase { position: absolute; left: 0; right: 0; top: 40%; text-align: center; color: var(--creme); text-shadow: 0 var(--u) 0 #000; }
.vue-phrase::first-letter { color: var(--rose); }
.vue-rayons { position: absolute; inset: -20%; background: var(--rayons-px) 0 0 / 800% 100% no-repeat; image-rendering: pixelated; mix-blend-mode: screen; animation: rayons 1.9s steps(8, jump-none) infinite; }
.vue-t { color: var(--creme); white-space: normal; text-align: center; line-height: 1.08; }
.fiches { display: flex; flex-direction: column; gap: calc(var(--u) * 3); }
.fiche { display: flex; align-items: center; gap: calc(var(--u) * 4); }
.fiche-img { clip-path: polygon(var(--u) 0, calc(100% - var(--u)) 0, 100% var(--u), 100% calc(100% - var(--u)), calc(100% - var(--u)) 100%, var(--u) 100%, 0 calc(100% - var(--u)), 0 var(--u)); }
.fiche-t { display: flex; flex-direction: column; gap: calc(var(--u) * 1.5); min-width: 0; }
.fiche-t .txt { white-space: normal; line-height: 1.08; color: #c9bfab; }
.fiche-t .fiche-nom { color: var(--machine); }
.fiche-t .discret { color: #8f8676; }
.tuiles-led { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: calc(var(--u) * 4) calc(var(--u) * 2) !important; }
@media (max-width: 560px) { .tuiles-led { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
.led-case { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 2); text-align: center; }
.led-case .txt { white-space: normal; line-height: 1.08; color: #c9bfab; }
.faits { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: calc(var(--u) * 3) calc(var(--u) * 5); }
.faits dt { color: var(--creme); white-space: nowrap; }
.faits dd { margin: 0; color: #c9bfab; }
.touches { gap: calc(var(--u) * 2) !important; }
.touche-case { display: flex; flex-direction: column; align-items: center; gap: var(--u); text-align: center; }
.touche { color: var(--rose); padding: var(--u) calc(var(--u) * 2) calc(var(--u) * 1.5); box-shadow: inset 0 0 0 var(--u) #4a443c, inset 0 calc(var(--u) * -2) 0 #2c2824; }

/* ---- V2.9 : hiérarchie du texte, panneau à la taille de la machine, grosses flèches ---- */
.fenetre-titre, .panneau-titre, .porte-titre, .geste-titre, .vue-t, .fiche-nom, .faits dt, .tuile-c-grand { font-size: var(--fst); line-height: 1; }
.discret, .paquet-meta, .fiche-t .discret, .regle-ligne, .btn-jeu-p { font-size: var(--fss); }
.panneau { line-height: 1.08; overflow: hidden; }
.panneau-note { font-size: var(--fs); }
.panneau-gout { font-size: var(--fss); }
.panneau-action { margin-top: auto !important; }
.fleche-machine { padding: calc(var(--u) * 4); background: rgba(11,9,8,.72); border-radius: 0;
  clip-path: polygon(calc(var(--u) * 2) 0, calc(100% - var(--u) * 2) 0, 100% calc(var(--u) * 2), 100% calc(100% - var(--u) * 2), calc(100% - var(--u) * 2) 100%, calc(var(--u) * 2) 100%, 0 calc(100% - var(--u) * 2), 0 calc(var(--u) * 2)); }
.fleche-machine canvas { zoom: 2.5; }
.fleche-machine:hover:not([disabled]) { background: rgba(11,9,8,.9); }

/* la collection, V2.9 : la phrase sur une ligne, de plus grandes images, le cœur sur l'image */
.paquet-carte { background: #15130f; box-shadow: 0 0 0 var(--u) #2c2824; padding: calc(var(--u) * 2) calc(var(--u) * 2) calc(var(--u) * 3) !important; gap: calc(var(--u) * 2) !important;
  clip-path: polygon(calc(var(--u) * 2) 0, calc(100% - var(--u) * 2) 0, 100% calc(var(--u) * 2), 100% calc(100% - var(--u) * 2), calc(100% - var(--u) * 2) 100%, calc(var(--u) * 2) 100%, 0 calc(100% - var(--u) * 2), 0 calc(var(--u) * 2)); }
.paquet-carte:hover:not([disabled]) { background: #1d1a16; filter: none; }
.bande { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: var(--u) !important; }
.bande-case { position: relative; aspect-ratio: 1; overflow: hidden; background: #2c2824; }
.bande-case img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bande-case.lavee { background: var(--lavee) var(--lx, 0) var(--ly, 0) / calc(var(--u) * 288) calc(var(--u) * 288); image-rendering: pixelated; }
.bande-case .aime { position: absolute; right: var(--u); bottom: var(--u); }
.paquet-phrase { -webkit-line-clamp: 1 !important; display: block !important; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; padding: 0 var(--u); }
.paquet-meta { padding: 0 var(--u); color: #8f8676; justify-content: space-between; }
.grille-aimees { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--u) * 2); }
@media (max-width: 560px) { .grille-aimees { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.aimee { aspect-ratio: 1; overflow: hidden; padding: 0; background: #2c2824; }
.aimee img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aimee.lavee { background: var(--lavee) var(--lx, 0) var(--ly, 0) / calc(var(--u) * 288) calc(var(--u) * 288); image-rendering: pixelated; }

/* le profil, V2.9 : la carte de fidélité dans le ton sombre, des chiffres sobres */
.carton { background: #15130f; color: var(--creme); padding: 0 0 calc(var(--u) * 3);
  clip-path: polygon(calc(var(--u) * 2) 0, calc(100% - var(--u) * 2) 0, 100% calc(var(--u) * 2), 100% calc(100% - var(--u) * 2), calc(100% - var(--u) * 2) 100%, calc(var(--u) * 2) 100%, 0 calc(100% - var(--u) * 2), 0 calc(var(--u) * 2)); }
.carton-bandeau { margin: 0 !important; color: #15130f; font-size: var(--fst); }
.carton-dit { color: #c9bfab; font-size: var(--fss); }
.carton-pleines { color: #8f8676; font-size: var(--fss); }
.stats-ligne { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 4) calc(var(--u) * 2); }
.stat { display: flex; flex-direction: column; align-items: center; gap: var(--u); text-align: center; }
.stat-v { font-size: var(--fst); color: var(--creme); line-height: 1; }

.carton-bandeau { background: none !important; color: var(--creme) !important; font-size: var(--fs) !important; box-shadow: inset 0 calc(var(--u) * -1) 0 #2c2824; padding: calc(var(--u) * 3) calc(var(--u) * 4) !important; }
.carton-bandeau .txt:first-child { color: var(--machine); }
.carton { box-shadow: inset calc(var(--u) * 2) 0 0 var(--machine); }
/* le panneau d'une machine : les trois chiffres en colonne, grands, qui remplissent la hauteur */
.panneau .panneau-chiffres { display: flex !important; flex-direction: column; flex: 1; justify-content: space-evenly; padding: calc(var(--u) * 2) calc(var(--u) * 3) !important; }
.panneau .cellule { display: flex; align-items: baseline; justify-content: space-between; gap: calc(var(--u) * 3); }

.panneau .cellule-t { color: #8f8676; }
.panneau .cellule { flex-direction: row !important; }

/* le tutoriel, deuxième version : un projecteur. Le voile laisse passer les
   clics (on touche la chose allumée) ; le trou porte l'ombre géante qui
   assombrit tout le reste. */
.tuto-voile { position: fixed; inset: 0; z-index: 55; pointer-events: none; }
.tuto-trou { position: fixed; opacity: 0; transition: left .5s cubic-bezier(.65,0,.25,1), top .5s cubic-bezier(.65,0,.25,1), width .5s cubic-bezier(.65,0,.25,1), height .5s cubic-bezier(.65,0,.25,1), opacity .4s;
  box-shadow: 0 0 0 200vmax rgba(8,7,6,.78);
  clip-path: none; border-radius: calc(var(--u) * 3); }
.tuto-voile[data-sombre="1"] .tuto-trou { opacity: 1; }
.tuto-mots { position: fixed; z-index: 56; pointer-events: none; text-align: center; max-width: min(calc(var(--u) * 150), 90vw); line-height: 1.1;
  text-shadow: 0 var(--u) 0 #000, var(--u) 0 0 #000, calc(var(--u) * -1) 0 0 #000, 0 calc(var(--u) * -1) 0 #000; }
.tuto-mots[data-on="1"] { animation: tuto-entre .3s steps(4) both; }
.tuto-titre { font-size: var(--fsg); color: var(--creme); }
.tuto-texte { font-size: var(--fs); color: #c9bfab; margin-top: calc(var(--u) * 2); }
.tuto-passer { position: fixed; z-index: 57; right: calc(var(--u) * 5); bottom: calc(var(--u) * 4); font-size: var(--fss) !important; color: #8f8676 !important; }
@keyframes tuto-entre { from { opacity: 0; translate: 0 calc(var(--u) * 2); } }
@media (prefers-reduced-motion: reduce) { .tuto-mots[data-on="1"] { animation: none; } .tuto-trou { transition: none; } }
.panneau .panneau-chiffres[hidden] { display: none !important; }

@media (max-width: 560px) { .f-collection .barre { flex-wrap: wrap; } .f-collection .barre .champ { flex: 1 1 100%; } }

/* ---- le panneau d'une machine, troisième version : le même gabarit pour les sept ---- */
.fleche-machine { background: none !important; clip-path: none !important; }
.fleche-machine:hover:not([disabled]) { background: none !important; filter: brightness(1.3); }
.panneau { padding: calc(var(--u) * 4) calc(var(--u) * 4) calc(var(--u) * 4) !important; gap: 0 !important; }
.panneau-tete { margin-bottom: calc(var(--u) * 3); }
.panneau-titre { font-size: var(--fst); white-space: nowrap; overflow: hidden; min-width: 0; flex: 1; }
.panneau-note { font-size: var(--fs); color: #c9bfab !important; line-height: 1.12;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.24em; }
.panneau-note[data-etape="1"] { display: block; min-height: 0; color: var(--machine) !important; }
.panneau .panneau-chiffres { display: grid !important; grid-template-columns: 1fr auto; flex: none !important; gap: calc(var(--u) * 2.5) calc(var(--u) * 3);
  margin: auto 0; padding: calc(var(--u) * 4) 0 !important; box-shadow: inset 0 var(--u) 0 #2c2824, inset 0 calc(var(--u) * -1) 0 #2c2824; }
.panneau .panneau-chiffres[hidden] { display: none !important; }
.panneau .cellule-t { margin: 0; color: #8f8676; font-size: var(--fs); }
.panneau .cellule-n { margin: 0; text-align: right; font-size: var(--fs) !important; color: var(--creme); white-space: nowrap; }
.panneau .cellule-n:first-of-type { color: #8fd47a; }
.panneau .cellule-t[hidden], .panneau .cellule-n[hidden] { display: none; }
.panneau-alerte { margin: auto 0; }
.panneau-ligne { margin: auto 0 calc(var(--u) * 3); }
.panneau-barre { margin-bottom: calc(var(--u) * 3); }
.panneau-action { width: 100%; justify-content: center; font-size: var(--fst) !important; padding: calc(var(--u) * 3) calc(var(--u) * 3) calc(var(--u) * 4) !important; }
.panneau-action .txt { font-size: var(--fst); }

/* les pièces, quatrième version */
.f-jetons .fenetre-corps { gap: calc(var(--u) * 5); align-items: stretch; }
.poche-v4 { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 3); padding: calc(var(--u) * 3) 0 0; }
.poche-etat { text-align: center; display: flex; flex-direction: column; gap: calc(var(--u) * 1.5); }
.poche-a { font-size: var(--fst); color: #f4b13a; }
.poche-b { font-size: var(--fs); color: #c9bfab; }
.poche-regle { white-space: pre !important; text-align: center; color: #8f8676; font-size: var(--fss); line-height: 1.15 !important; }
.boutique { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--u) * 2); }
@media (max-width: 560px) { .boutique { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.boutique-case { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: calc(var(--u) * 2.5); text-align: center;
  padding: calc(var(--u) * 5) calc(var(--u) * 2) calc(var(--u) * 4) !important; font: inherit; color: inherit; cursor: inherit; }
.boutique-case:hover:not([disabled]) { filter: brightness(1.3); }
.boutique-case .dessin { height: calc(var(--u) * 16); display: flex; align-items: flex-end; }
.boutique-t { color: var(--creme); white-space: normal !important; line-height: 1.08; }
.boutique-g { color: #8fd47a; font-size: var(--fss); white-space: normal !important; }
.boutique-g.bientot { color: #6f675b; }
.boutique-case[disabled] { opacity: .6; }

/* infos : des parties nettement séparées, le texte long en plus petit */
.f-infos .fenetre-corps { gap: calc(var(--u) * 9); }
.f-infos .section + .section { padding-top: calc(var(--u) * 7); box-shadow: inset 0 var(--u) 0 #2c2824; }
.section-petite .faits dt { font-size: var(--fs); }
.section-petite .faits dd, .faits.petits dd { font-size: var(--fss); line-height: 1.2; }
.faits.petits dt { font-size: var(--fss); color: var(--creme); }
.fiche-t .txt:not(.fiche-nom) { font-size: var(--fss); line-height: 1.15; }
.vues li { gap: calc(var(--u) * 3); }
.fiches { gap: calc(var(--u) * 4); }
.fiche { gap: calc(var(--u) * 5); }

/* prêter sa carte graphique */
.f-preter .fenetre-corps { gap: calc(var(--u) * 6); }
.preter-tete { display: flex; align-items: center; gap: calc(var(--u) * 5); }
.preter-tete .para { font-size: var(--fs); line-height: 1.15; }
.preter-etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 2); }
@media (max-width: 560px) { .preter-etapes { grid-template-columns: minmax(0, 1fr); } }
.preter-etape { display: flex; flex-direction: column; align-items: center; text-align: center; gap: calc(var(--u) * 2.5); padding: calc(var(--u) * 4) calc(var(--u) * 3) !important; }
.preter-n { font-size: var(--fsg); color: var(--rose); line-height: 1; }
.preter-t { white-space: normal !important; font-size: var(--fss); color: #c9bfab; line-height: 1.15; }
.preter-etape .px-lien { font-size: var(--fss); color: var(--rose); }

/* la visionneuse : des flèches sans fond */
.visionneuse .fleche { background: none !important; }
.visionneuse .fleche canvas { zoom: 2; }

/* le profil, quatrième version : aéré, centré, sans bande de couleur */
.f-profil .fenetre-corps { gap: calc(var(--u) * 9); }
.p-carte { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 4); padding-top: calc(var(--u) * 2); }
.p-carte-t { font-size: var(--fst); color: var(--creme); }
.p-carte-d { font-size: var(--fss); color: #8f8676; }
.p-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 6) calc(var(--u) * 2); }
.p-stats .stat { gap: calc(var(--u) * 2); }
.p-stats .stat-v { font-size: var(--fst); }
.stat-t { font-size: var(--fss); color: #8f8676; }
.p-plus { display: flex; flex-direction: column; gap: calc(var(--u) * 3); }
.p-ligne { display: flex; justify-content: space-between; gap: calc(var(--u) * 4); }
.p-plus .lien-btn { align-self: center; margin-top: calc(var(--u) * 2); }
.p-section { display: flex; flex-direction: column; gap: calc(var(--u) * 2); }
.p-section-t { font-size: var(--fss); color: #6f675b; letter-spacing: var(--u); }
.p-note { font-size: var(--fss); color: #6f675b; white-space: normal !important; margin-top: calc(var(--u) * 2); }
.panneau-ligne { flex-direction: column; gap: calc(var(--u) * 1.5) !important; }
.panneau-ligne span { white-space: normal !important; }
.tuto-mots { text-align: center; }

/* --- V3.1 : plus de « titre à gauche, texte à droite » : tout s'empile --- */
.bloc-centre { display: flex; flex-direction: column; align-items: center; text-align: center; gap: calc(var(--u) * 4); }
.bloc-centre .para { max-width: calc(var(--u) * 200); font-size: var(--fs); line-height: 1.18; }
.blocs-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 6); }
@media (max-width: 560px) { .blocs-2 { grid-template-columns: minmax(0, 1fr); } }
.bloc { display: flex; flex-direction: column; gap: calc(var(--u) * 2); }
.bloc-t, .chapitre-t { color: var(--creme); font-size: var(--fs); }
.bloc-p, .chapitre-p { color: #a99f8c; font-size: var(--fss); line-height: 1.3; margin: 0; }
.chapitre { gap: calc(var(--u) * 2.5) !important; max-width: calc(var(--u) * 230); }
.chapitre .px-lien { font-size: var(--fss); color: var(--rose); }
.preter-etapes { gap: calc(var(--u) * 3) !important; }
.preter-etape { padding: calc(var(--u) * 5) calc(var(--u) * 4) !important; }
.preter-t { font-size: var(--fss) !important; }

/* le profil, cinquième version */
.f-profil .fenetre-corps { gap: calc(var(--u) * 12) !important; }
.p-carte { position: relative; align-self: center; width: min(100%, calc(var(--u) * 150)); padding: calc(var(--u) * 5) calc(var(--u) * 6) calc(var(--u) * 5) calc(var(--u) * 10) !important;
  background: #1d1a17; box-shadow: 0 0 0 var(--u) #3a3530, var(--u) calc(var(--u) * 2) 0 var(--u) rgba(0,0,0,.4);
  clip-path: polygon(calc(var(--u) * 2) 0, calc(100% - var(--u) * 2) 0, 100% calc(var(--u) * 2), 100% calc(100% - var(--u) * 2), calc(100% - var(--u) * 2) 100%, calc(var(--u) * 2) 100%, 0 calc(100% - var(--u) * 2), 0 calc(var(--u) * 2)); }
/* le bord prédécoupé : une colonne de trous à gauche */
.p-carte::before { content: ''; position: absolute; left: calc(var(--u) * 3); top: calc(var(--u) * 4); bottom: calc(var(--u) * 4); width: calc(var(--u) * 2);
  background: repeating-linear-gradient(#0b0908 0 calc(var(--u) * 2), transparent calc(var(--u) * 2) calc(var(--u) * 5)); }
.p-carte-entete { align-self: stretch; display: flex; justify-content: space-between; align-items: baseline; }
.p-carte-no { font-size: var(--fss); color: #6f675b; }
.p-stats { gap: 0 !important; }
.p-stats .stat { padding: calc(var(--u) * 4) 0; box-shadow: inset calc(var(--u) * -1) 0 0 #2c2824, inset 0 calc(var(--u) * -1) 0 #2c2824; }
.p-stats .stat:nth-child(3n) { box-shadow: inset 0 calc(var(--u) * -1) 0 #2c2824; }
.p-stats .stat:nth-child(n+4) { box-shadow: inset calc(var(--u) * -1) 0 0 #2c2824; }
.p-stats .stat:nth-child(6) { box-shadow: none; }
.p-plus { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 2) !important; }
.stat-v.petit { font-size: var(--fs) !important; }
.reglage { padding: calc(var(--u) * 3) var(--u) !important; }
/* le paquet et l'image : plus grands, c'est là qu'on regarde */
.fenetre.paquet { width: min(calc(var(--u) * 330), 100%, calc((100dvh - var(--u) * 60) * 1.5 + var(--u) * 20)) !important; }
.fenetre.image { width: min(calc(var(--u) * 380), 100%, calc(100dvh - var(--u) * 34)) !important; }
/* le projecteur, plus souple : ombre plus légère, bord flou, glissements lents */
.tuto-trou { box-shadow: 0 0 0 200vmax rgba(8,7,6,.62) !important; filter: blur(calc(var(--u) * 3));
  transition: left .8s cubic-bezier(.45,0,.2,1), top .8s cubic-bezier(.45,0,.2,1), width .8s cubic-bezier(.45,0,.2,1), height .8s cubic-bezier(.45,0,.2,1), opacity .6s !important; }
.tuto-mots { transition: left .6s cubic-bezier(.45,0,.2,1), top .6s cubic-bezier(.45,0,.2,1); }

/* la lueur reste DANS le hublot (le verre fait 0,8 du rayon, la lueur 2,1 fois le rayon) */
.m-lueur { -webkit-mask-image: radial-gradient(circle, #000 34%, rgba(0,0,0,.6) 37%, transparent 39%); mask-image: radial-gradient(circle, #000 34%, rgba(0,0,0,.6) 37%, transparent 39%); }
.panneau[data-mode="ticket"] .panneau-gout { color: var(--creme) !important; font-size: var(--fs); line-height: 1.12; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: calc(var(--u) * 2); }
.panneau[data-mode="ticket"] .cellule-n:first-of-type { color: var(--machine); }
.fleche-machine { transform: none !important; translate: 0 -50%; }
/* les icônes de la boutique n'ont pas la même hauteur : une case fixe pour que
   les titres tombent sur la même ligne */
.boutique-case .ic { height: calc(var(--u) * 24); display: flex; align-items: center; justify-content: center; }

/* keep it running, lend your gpu, la clé (12 octobre, cinquième version) */
.soutien-chapeau { text-align: center; max-width: calc(var(--u) * 220); margin: 0 auto calc(var(--u) * 2) !important; }
.soutien-rang { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 3); }
.soutien-rang.deux-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: calc(var(--u) * 4); }
@media (max-width: 640px) { .soutien-rang, .soutien-rang.deux-cases { grid-template-columns: minmax(0, 1fr); } }
.soutien-rang .ic { height: calc(var(--u) * 24); display: flex; align-items: center; justify-content: center; }
.soutien-rang .para { text-align: center; }
.preter-haut { gap: calc(var(--u) * 2) !important; padding: calc(var(--u) * 2) 0 calc(var(--u) * 4); }
.preter-haut .chapeau { margin-top: calc(var(--u) * 2) !important; }
.preter-pas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 3); }
.preter-pas-un { display: flex; flex-direction: column; align-items: center; text-align: center; gap: calc(var(--u) * 1.5); max-width: calc(var(--u) * 170); }
.preter-pas-un .para { text-align: center; }
.preter-pas-un .px-lien { color: var(--rose); font-size: var(--fss); margin-top: var(--u); }
.f-cle .bloc-centre { margin-bottom: calc(var(--u) * 4); }
.f-cle .cle-etat { text-align: center; margin: calc(var(--u) * 4) 0 calc(var(--u) * 2) !important; min-height: 1em; }
.preter-trait { display: block; width: var(--u); height: calc(var(--u) * 8); background: repeating-linear-gradient(#5f584d 0 var(--u), transparent var(--u) calc(var(--u) * 2)); }
/* le profil, sixième version : le carton sur toute la largeur, les chiffres dans
   un creux, les réglages en deux groupes bien séparés */
.p-carte { width: 100% !important; box-sizing: border-box; gap: calc(var(--u) * 5) !important; }
.p-carte-t { font-size: var(--fst); }
.p-stats { background: #14120f; box-shadow: inset 0 var(--u) 0 #000; padding: calc(var(--u) * 2) 0; }
.p-stats .stat { padding: calc(var(--u) * 3) 0 !important; }
.p-stats .stat-v { font-size: var(--fs) !important; color: var(--creme); }
.p-reglages { gap: calc(var(--u) * 10) !important; }
.p-reglages .liste + .liste { padding-top: 0; }

/* les coins des images, arrondis en escalier de pixels, au lieu d'un cadre
   (12 octobre : « arrondir les bords des images plutôt que rajouter un bord ») */
:root { --arrondi: polygon(0px calc(calc(var(--u) * 2) * 5), 0px calc(calc(var(--u) * 2) * 5), 0px calc(calc(var(--u) * 2) * 4), 0px calc(calc(var(--u) * 2) * 4), 0px calc(calc(var(--u) * 2) * 3), calc(calc(var(--u) * 2) * 1) calc(calc(var(--u) * 2) * 3), calc(calc(var(--u) * 2) * 1) calc(calc(var(--u) * 2) * 2), calc(calc(var(--u) * 2) * 1) calc(calc(var(--u) * 2) * 2), calc(calc(var(--u) * 2) * 1) calc(calc(var(--u) * 2) * 1), calc(calc(var(--u) * 2) * 3) calc(calc(var(--u) * 2) * 1), calc(calc(var(--u) * 2) * 3) 0px, calc(100% - calc(var(--u) * 2) * 3) 0px, calc(100% - calc(var(--u) * 2) * 3) calc(calc(var(--u) * 2) * 1), calc(100% - calc(var(--u) * 2) * 1) calc(calc(var(--u) * 2) * 1), calc(100% - calc(var(--u) * 2) * 1) calc(calc(var(--u) * 2) * 2), calc(100% - calc(var(--u) * 2) * 1) calc(calc(var(--u) * 2) * 2), calc(100% - calc(var(--u) * 2) * 1) calc(calc(var(--u) * 2) * 3), 100% calc(calc(var(--u) * 2) * 3), 100% calc(calc(var(--u) * 2) * 4), 100% calc(calc(var(--u) * 2) * 4), 100% calc(calc(var(--u) * 2) * 5), 100% calc(calc(var(--u) * 2) * 5), 100% calc(100% - calc(var(--u) * 2) * 5), 100% calc(100% - calc(var(--u) * 2) * 5), 100% calc(100% - calc(var(--u) * 2) * 4), 100% calc(100% - calc(var(--u) * 2) * 4), 100% calc(100% - calc(var(--u) * 2) * 3), calc(100% - calc(var(--u) * 2) * 1) calc(100% - calc(var(--u) * 2) * 3), calc(100% - calc(var(--u) * 2) * 1) calc(100% - calc(var(--u) * 2) * 2), calc(100% - calc(var(--u) * 2) * 1) calc(100% - calc(var(--u) * 2) * 2), calc(100% - calc(var(--u) * 2) * 1) calc(100% - calc(var(--u) * 2) * 1), calc(100% - calc(var(--u) * 2) * 3) calc(100% - calc(var(--u) * 2) * 1), calc(100% - calc(var(--u) * 2) * 3) 100%, calc(calc(var(--u) * 2) * 3) 100%, calc(calc(var(--u) * 2) * 3) calc(100% - calc(var(--u) * 2) * 1), calc(calc(var(--u) * 2) * 1) calc(100% - calc(var(--u) * 2) * 1), calc(calc(var(--u) * 2) * 1) calc(100% - calc(var(--u) * 2) * 2), calc(calc(var(--u) * 2) * 1) calc(100% - calc(var(--u) * 2) * 2), calc(calc(var(--u) * 2) * 1) calc(100% - calc(var(--u) * 2) * 3), 0px calc(100% - calc(var(--u) * 2) * 3), 0px calc(100% - calc(var(--u) * 2) * 4), 0px calc(100% - calc(var(--u) * 2) * 4), 0px calc(100% - calc(var(--u) * 2) * 5), 0px calc(100% - calc(var(--u) * 2) * 5)); --arrondi-petit: polygon(0px calc(var(--u) * 3), 0px calc(var(--u) * 3), 0px calc(var(--u) * 2), 0px calc(var(--u) * 2), 0px calc(var(--u) * 1), calc(var(--u) * 1) calc(var(--u) * 1), calc(var(--u) * 1) 0px, calc(100% - var(--u) * 1) 0px, calc(100% - var(--u) * 1) calc(var(--u) * 1), 100% calc(var(--u) * 1), 100% calc(var(--u) * 2), 100% calc(var(--u) * 2), 100% calc(var(--u) * 3), 100% calc(var(--u) * 3), 100% calc(100% - var(--u) * 3), 100% calc(100% - var(--u) * 3), 100% calc(100% - var(--u) * 2), 100% calc(100% - var(--u) * 2), 100% calc(100% - var(--u) * 1), calc(100% - var(--u) * 1) calc(100% - var(--u) * 1), calc(100% - var(--u) * 1) 100%, calc(var(--u) * 1) 100%, calc(var(--u) * 1) calc(100% - var(--u) * 1), 0px calc(100% - var(--u) * 1), 0px calc(100% - var(--u) * 2), 0px calc(100% - var(--u) * 2), 0px calc(100% - var(--u) * 3), 0px calc(100% - var(--u) * 3)); --arrondi-moyen: polygon(0px calc(var(--u) * 4), 0px calc(var(--u) * 4), 0px calc(var(--u) * 3), 0px calc(var(--u) * 3), 0px calc(var(--u) * 2), calc(var(--u) * 1) calc(var(--u) * 2), calc(var(--u) * 1) calc(var(--u) * 1), calc(var(--u) * 2) calc(var(--u) * 1), calc(var(--u) * 2) 0px, calc(100% - var(--u) * 2) 0px, calc(100% - var(--u) * 2) calc(var(--u) * 1), calc(100% - var(--u) * 1) calc(var(--u) * 1), calc(100% - var(--u) * 1) calc(var(--u) * 2), 100% calc(var(--u) * 2), 100% calc(var(--u) * 3), 100% calc(var(--u) * 3), 100% calc(var(--u) * 4), 100% calc(var(--u) * 4), 100% calc(100% - var(--u) * 4), 100% calc(100% - var(--u) * 4), 100% calc(100% - var(--u) * 3), 100% calc(100% - var(--u) * 3), 100% calc(100% - var(--u) * 2), calc(100% - var(--u) * 1) calc(100% - var(--u) * 2), calc(100% - var(--u) * 1) calc(100% - var(--u) * 1), calc(100% - var(--u) * 2) calc(100% - var(--u) * 1), calc(100% - var(--u) * 2) 100%, calc(var(--u) * 2) 100%, calc(var(--u) * 2) calc(100% - var(--u) * 1), calc(var(--u) * 1) calc(100% - var(--u) * 1), calc(var(--u) * 1) calc(100% - var(--u) * 2), 0px calc(100% - var(--u) * 2), 0px calc(100% - var(--u) * 3), 0px calc(100% - var(--u) * 3), 0px calc(100% - var(--u) * 4), 0px calc(100% - var(--u) * 4)); }
.arrondi { clip-path: var(--arrondi); }
.arrondi-petit { clip-path: var(--arrondi-petit); }
/* la fente où entre la pièce : un trait noir, une lèvre claire dessous */
.fente { position: fixed; z-index: 39; pointer-events: none; background: #050403; box-shadow: 0 var(--u) 0 rgba(255,255,255,.25), 0 calc(var(--u) * -1) 0 rgba(0,0,0,.5); opacity: 0; }
/* le ticket ne coupe jamais une étiquette en deux : une ligne, quitte à la
   raccourcir (12 octobre, « volunteers / able ») */
.panneau-chiffres dt, .panneau-chiffres dd { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panneau-note[data-etape] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panneau-gout { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* 13 octobre : les coins plus ronds et en plus gros pixels ; un voile derrière
   les images qui sortent */
.arrondi-moyen { clip-path: var(--arrondi-moyen); }
.sortie-voile { position: absolute; inset: 0; background: rgba(8,6,5,.62); animation: voileEntre .35s ease-out; pointer-events: none; }
@keyframes voileEntre { from { opacity: 0; } }
.image-sortie { will-change: transform; }

/* LES BOUTONS RÉPONDENT (13 octobre, « pas juste plus clair au survol »).
   Un bouton encadré se soulève au survol (son ombre s'allonge) et s'enfonce
   quand on appuie ; une icône sautille d'un pixel au survol et s'écrase au
   clic ; la croix grossit, se cale dans le coin et pivote. Des pas de pixel,
   pas de glissés flous. */
.px-btn { transition: transform .09s steps(2), filter .09s steps(2); }
.px-cadre:hover:not([disabled]) { transform: translateY(calc(var(--u) * -1)); filter: brightness(1.12) drop-shadow(0 calc(var(--u) * 2) 0 rgba(0,0,0,.55)); }
.px-cadre:active:not([disabled]) { transform: translateY(var(--u)); filter: brightness(.9) drop-shadow(0 0 0 rgba(0,0,0,0)); transition-duration: .03s; }
.gros-btn:active:not([disabled]) { transform: translateY(var(--u)); }
.ib canvas, .hud .px-btn > canvas:first-child, .hud-gauche .px-btn > canvas:first-child { transition: transform .1s steps(2); }
.ib:hover:not([disabled]) canvas, .hud .px-btn:hover > canvas:first-child, .hud-gauche .px-btn:hover > canvas:first-child { transform: translateY(calc(var(--u) * -1)); }
.ib:active:not([disabled]) canvas, .hud .px-btn:active > canvas:first-child, .hud-gauche .px-btn:active > canvas:first-child { transform: translateY(var(--u)) scale(.9, .85); transition-duration: .03s; }
.px-btn:hover:not([disabled]), .px-btn:active:not([disabled]) { filter: none; }
.px-cadre:hover:not([disabled]) { filter: brightness(1.12) drop-shadow(0 calc(var(--u) * 2) 0 rgba(0,0,0,.55)); }
.fenetre-tete .fermer-x { margin: calc(var(--u) * -3) calc(var(--u) * -3) 0 auto; padding: calc(var(--u) * 2); align-self: flex-start; }
.fermer-x:hover:not([disabled]) { background: rgba(255,92,154,.16) !important; }
.fermer-x:hover:not([disabled]) canvas { transform: rotate(90deg) !important; transition: transform .16s steps(3) !important; }
.fermer-x:active canvas { transform: rotate(90deg) scale(.85) !important; }
/* le tri : un creux gris, trois cases ; celle qui est prise est levée, claire */
.onglets { gap: var(--u) !important; padding: 0 !important; }
.onglet { padding: calc(var(--u) * 2) calc(var(--u) * 3) !important; color: #8f8676; background: transparent; box-shadow: none !important; }
.onglet[data-on="1"] { color: var(--creme); background: #3a3530 !important; box-shadow: none !important; }
.onglet:hover:not([data-on="1"]) { color: var(--creme); background: #241f1b; }
/* le ticket, 13 octobre : six cases carrées (attente, peinture, aperçu) et deux
   boutons côte à côte */
.panneau-barre { gap: calc(var(--u) * 1.5) !important; }
.panneau-barre canvas { display: block; width: 100%; aspect-ratio: 1; height: auto; background: #110f0d; image-rendering: pixelated; }
.panneau-barre canvas[data-fait="peint"] { background: color-mix(in srgb, var(--machine, var(--rose)) 40%, #110f0d); animation: peindre 1s steps(2) infinite; }
.panneau-barre canvas[data-fait="1"] { background: var(--machine, var(--rose)); }
.panneau-duo { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 2); margin-top: var(--u); }
.panneau-duo[hidden] { display: none; }
.panneau-duo .gros-btn { width: 100%; justify-content: center; }
/* la boutique deux par deux (13 octobre) : une icône, un titre d'une ligne, deux
   ou trois lignes d'explication, l'action en bas ; la case se soulève au survol */
.boutique.boutique-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: calc(var(--u) * 3); }
@media (max-width: 420px) { .boutique.boutique-2 { grid-template-columns: minmax(0, 1fr) !important; } }
.boutique-2 .boutique-case { padding: calc(var(--u) * 5) calc(var(--u) * 5) calc(var(--u) * 4) !important; gap: calc(var(--u) * 2) !important; }
.boutique-2 .boutique-t { white-space: nowrap !important; font-size: var(--fst); }
.boutique-2 .boutique-p { text-align: center; line-height: 1.2; max-width: calc(var(--u) * 120); }
.boutique-2 .boutique-g { color: var(--rose); margin-top: auto; }
.boutique-2 .boutique-case:hover:not([disabled]) { filter: brightness(1.15); transform: translateY(calc(var(--u) * -1)); }
.boutique-2 .boutique-case:active:not([disabled]) { transform: translateY(var(--u)); }
.soutien-chapeau { text-align: center; max-width: calc(var(--u) * 240) !important; line-height: 1.25; }
.f-soutien .porte-titre { white-space: nowrap; }
.f-soutien .porte-soutien .para { min-height: 3.6em; }
.preter-besoins { display: flex; flex-direction: column; gap: calc(var(--u) * 3); margin-top: calc(var(--u) * 6); }
.besoin { display: flex; flex-direction: column; gap: calc(var(--u) * 2); padding: calc(var(--u) * 4) calc(var(--u) * 5) !important; }
.besoin .para { line-height: 1.25; }

/* LE PROFIL, septième version (13 octobre) */
/* la carte de fidélité : un vrai carton gris beige, l'encre sombre */
.p-carte { background: #d9cfb8 !important; color: #3a3329; box-shadow: 0 0 0 var(--u) #8f8676, var(--u) calc(var(--u) * 2) 0 var(--u) rgba(0,0,0,.45) !important; }
.p-carte::before { background: repeating-linear-gradient(#a99f8c 0 calc(var(--u) * 2), transparent calc(var(--u) * 2) calc(var(--u) * 5)) !important; }
.p-carte .p-carte-t { color: #2a241d !important; }
.p-carte .p-carte-no { color: #8a7f6c !important; }
.p-carte .p-carte-d { color: #6b6152 !important; }
/* les grands titres qui séparent le profil des réglages et des données */
.p-grand-titre { display: block; font-size: var(--fst); color: var(--creme); padding: 0 var(--u) calc(var(--u) * 2); }
.p-reglages { margin-top: calc(var(--u) * 6); }
/* chaque réglage est une tuile arrondie, pas une ligne sur un trait */
.f-profil .liste { gap: calc(var(--u) * 1.5); }
.f-profil .reglage { background: #161311; box-shadow: none !important; clip-path: var(--arrondi-petit); padding: calc(var(--u) * 3) calc(var(--u) * 4) !important; }
.f-profil .reglage:hover:not(.inerte) { background: #201c18; }
.reglage-mots { flex: 1; display: flex; flex-direction: column; gap: var(--u); min-width: 0; }
.reglage-v3 .reglage-nom { flex: none; }
.reglage-detail { font-size: var(--fss); color: #6f675b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.curseur-rail { flex: none; touch-action: none; cursor: inherit; image-rendering: pixelated; }
.curseur-rail:focus-visible { outline: var(--u) solid var(--rose); outline-offset: var(--u); }
.reglage-v3:active:not([disabled]) .reglage-rail { transform: scale(.96); }
/* les vignettes de « How it works » : cinq carrés de la même taille, coins en
   escalier, du jour entre l'image et son mot (13 octobre) */
.vue-img { clip-path: var(--arrondi-moyen) !important; aspect-ratio: 1; flex: none; }
.vues li { gap: calc(var(--u) * 3.5) !important; }
.fiche-img { clip-path: var(--arrondi-moyen) !important; flex: none; }
.fiche { gap: calc(var(--u) * 6) !important; align-items: center; }
.fiches { gap: calc(var(--u) * 5) !important; }
.led-case { gap: calc(var(--u) * 2.5) !important; }
.f-infos .section { margin-top: calc(var(--u) * 6); }
.f-infos .section-titre { display: block; margin-bottom: calc(var(--u) * 4); }
.sortie-barre { background: none !important; box-shadow: none !important; padding: calc(var(--u) * 1.5) calc(var(--u) * 2) !important; }
/* le projecteur ne voyage plus : il s'éteint et se rallume ailleurs (13 octobre) */
.tuto-trou { transition: opacity .32s ease !important; }
.tuto-trou[data-rond="1"] { border-radius: 50%; }
.tuto-mots { transition: opacity .3s ease !important; }
.tuto-mots:not([data-on="1"]) { opacity: 0; }
/* la bande d'aperçus dans le panneau d'une machine */
.panneau-apercus { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(var(--u) * 1.5); margin: calc(var(--u) * 2) 0; }
.panneau-apercus[hidden] { display: none; }
.panneau-apercus img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: #110f0d; transition: transform .12s steps(2); }
@media (hover: hover) { .panneau-apercus img:hover { transform: scale(1.9); position: relative; z-index: 3; } }
@media (min-width: 760px) { .panneau-apercus { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: calc(var(--u) * 3) 0; } .panneau-apercus img:nth-child(n+4) { grid-column: span 1; } }
@media (min-width: 760px) {
  .panneau .panneau-action, .panneau .panneau-duo { flex-shrink: 0; }
  .panneau-apercus { flex: 1 1 0; min-height: 0; grid-auto-rows: minmax(0, 1fr); }
  .panneau-apercus img { height: 100%; aspect-ratio: auto; min-height: 0; }
}

/* 13 octobre, soir : le bouton de lavage, « Wash » et la pièce à droite */
.bouton-laver { flex-direction: row-reverse; gap: calc(var(--u) * 4) !important; }
.bouton-laver .txt { font-size: var(--fsg) !important; letter-spacing: var(--u); }
/* les croix : pas de fond, une rotation douce */
.fermer-x:hover:not([disabled]) { background: none !important; }
.fermer-x canvas { transition: transform .28s cubic-bezier(.3,1.6,.5,1) !important; }
.fermer-x:hover:not([disabled]) canvas { transform: rotate(90deg) !important; transition: transform .28s cubic-bezier(.3,1.6,.5,1) !important; }
.fermer-x:active canvas { transform: rotate(90deg) scale(.82) !important; transition-duration: .08s !important; }
/* plus de traits pour séparer : de l'air suffit */
.fenetre-tete { box-shadow: none !important; border: 0 !important; }
.fenetre-pied { box-shadow: none !important; border: 0 !important; }
.panneau-chiffres, .panneau-chiffres dt, .panneau-chiffres dd { box-shadow: none !important; border: 0 !important; }
/* le ticket : six aperçus en trois sur deux, grands */
.panneau-barre { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: calc(var(--u) * 2) !important; }
.panneau .panneau-chiffres { box-shadow: none !important; }
.f-infos .section + .section { box-shadow: none !important; }
.carton-bandeau { box-shadow: none !important; }
/* trois cases d'action, la même structure dans Coins et Keep it running */
.boutique.boutique-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: calc(var(--u) * 3); }
@media (max-width: 640px) { .boutique.boutique-3 { grid-template-columns: minmax(0, 1fr) !important; } }
.boutique-3 .boutique-case { padding: calc(var(--u) * 5) calc(var(--u) * 4) calc(var(--u) * 4) !important; gap: calc(var(--u) * 2) !important; }
.boutique-3 .boutique-t { white-space: nowrap !important; font-size: var(--fst); }
.boutique-3 .boutique-p { text-align: center; line-height: 1.2; min-height: 3.6em; }
.boutique-3 .boutique-g { color: var(--rose); margin-top: auto; }
.boutique-3 .boutique-case:hover:not([disabled]) { filter: brightness(1.15); transform: translateY(calc(var(--u) * -1)); }
.boutique-3 .boutique-case:active:not([disabled]) { transform: translateY(var(--u)); }
/* la carte de fidélité tout en pixels */
.p-carte-v4 { width: 100%; }
.carton-v4 { display: block; image-rendering: pixelated; }
/* les chiffres du profil : chacun sa tuile arrondie, les trois faits aussi */
.p-stats { background: none !important; box-shadow: none !important; padding: 0 !important; gap: calc(var(--u) * 2) !important; }
.p-stats .stat, .p-plus .stat { background: #161311; clip-path: var(--arrondi-moyen); box-shadow: none !important; padding: calc(var(--u) * 4) calc(var(--u) * 2) !important; }
.p-plus { gap: calc(var(--u) * 2) !important; margin-top: calc(var(--u) * -6); }
/* How it works : des lignes plus longues, plus serrées entre elles, et de
   l'air au-dessus des afficheurs (13 octobre) */
.f-infos .chapitre { max-width: none !important; }
.f-infos .chapitre-p, .f-infos .para { line-height: 1.16 !important; max-width: none !important; }
.f-infos .tuiles-led { margin-top: calc(var(--u) * 7); }
/* « Made by Tristan Ulrich », en bas dans le coin sombre de la salle */
.signature { position: absolute; left: calc(var(--u) * 5); bottom: calc(var(--u) * 4); z-index: 2; font-size: var(--fss); color: rgba(243,234,214,.32); pointer-events: none; transition: opacity .6s; white-space: nowrap; }
.signature[data-cache="1"] { opacity: 0; }
html[data-cam="1"] .signature { opacity: 0; }
/* une fenêtre ouverte pendant le tour : le projecteur se met de côté */
body:has(.fenetre[data-ouverte="1"]) .tuto-voile, body:has(.fenetre[data-ouverte="1"]) .tuto-mots { opacity: 0 !important; transition: opacity .2s; }
/* la lueur reste DANS le hublot : coupée au bord du verre (0,82 du rayon) */
.m-lueur { -webkit-mask-image: radial-gradient(circle closest-side, #000 0 33%, rgba(0,0,0,.55) 36%, transparent 38.5%) !important; mask-image: radial-gradient(circle closest-side, #000 0 33%, rgba(0,0,0,.55) 36%, transparent 38.5%) !important; }
@media (min-width: 760px) {
  .panneau > * { flex-shrink: 0; }
  .panneau .panneau-barre { flex: 1 1 0; min-height: 0; grid-auto-rows: minmax(0, 1fr); align-content: stretch; }
  .panneau .panneau-barre canvas { height: 100%; aspect-ratio: auto; }
}
.panneau-note[data-etape] { min-height: 1.1em; }
/* la signature : plus petite, plus grise, et elle mène au GitHub de Tristan */
.signature { font-size: var(--fss) !important; color: rgba(243,234,214,.2) !important; pointer-events: auto !important; text-decoration: none; }
.signature:hover { color: rgba(243,234,214,.5) !important; }

/* LE PANNEAU AVANT LE LAVAGE (13 octobre, soir) : le modèle, son caractère en
   entier, ce pour quoi il est bon, les chiffres ; rien de coupé */
.panneau-sous { margin: calc(var(--u) * -1) 0 0; font-size: var(--fss); color: #8f8676; }
.panneau-sous[hidden] { display: none; }
.panneau[data-mode="choix"] .panneau-note { -webkit-line-clamp: unset !important; display: block !important; min-height: 0 !important; color: var(--creme) !important; line-height: 1.18; }
.panneau[data-mode="choix"] .panneau-gout { color: var(--machine, #c9bfab) !important; font-size: var(--fss); line-height: 1.2; }
/* LE BOUTON « GENERATE » : un vrai bouton de machine, avec son épaisseur. Il
   se soulève au survol (l'épaisseur grandit), s'enfonce au clic (elle
   disparaît), en pas de pixel. */
.bouton-laver { min-height: 0 !important; padding: calc(var(--u) * 2) calc(var(--u) * 4) calc(var(--u) * 2.5) !important; transition: transform .07s steps(2), filter .07s steps(2) !important;
  filter: drop-shadow(0 calc(var(--u) * 2) 0 color-mix(in srgb, var(--machine, #e8913f) 45%, #000)) !important; }
.bouton-laver .txt { font-size: var(--fst) !important; letter-spacing: 0; }
.bouton-laver:hover:not([disabled]) { transform: translateY(calc(var(--u) * -1)) !important; filter: brightness(1.08) drop-shadow(0 calc(var(--u) * 3) 0 color-mix(in srgb, var(--machine, #e8913f) 45%, #000)) !important; }
.bouton-laver:active:not([disabled]) { transform: translateY(calc(var(--u) * 2)) !important; filter: brightness(.95) drop-shadow(0 0 0 transparent) !important; }
.panneau .panneau-action.bouton-laver { margin-bottom: calc(var(--u) * 2); }
.panneau[data-mode="choix"] .panneau-note { font-size: var(--fss) !important; line-height: 1.22 !important; }
.panneau[data-mode="choix"] { gap: calc(var(--u) * 2.5) !important; }
/* avant le lavage, les trois chiffres en trois colonnes : l'étiquette au-dessus */
.panneau[data-mode="choix"] .panneau-chiffres { display: grid !important; grid-template-rows: auto auto; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--u) calc(var(--u) * 2) !important; margin: 0 !important; padding: calc(var(--u) * 3) 0 !important; text-align: center; }
.panneau[data-mode="choix"] .panneau-chiffres dt { font-size: var(--fss); color: #8f8676; }
.panneau[data-mode="choix"] .panneau-chiffres dd { margin: 0; font-size: var(--fst); text-align: center; }
.panneau[data-mode="choix"] .panneau-chiffres [hidden] { display: none; }
/* plus de mode de fusion « screen » (les dessins sont transparents) : sur
   iPhone il peut rendre des carrés noirs (13 octobre) */
.m-lueur, .eclair, .vue-rayons { mix-blend-mode: normal !important; }
/* TÉLÉPHONE : une seule fenêtre visible à la fois, celle du dessus (13 octobre :
   la collection, le paquet et l'image empilés faisaient un fouillis) */
html.petit .fenetre-fond:has(~ .fenetre-fond.plein) > .fenetre { visibility: hidden; }
/* la grille d'un paquet : de l'air entre les images, des coins plus petits,
   pas de fond sombre qui se voit dans les coins découpés */
.grille-paquet { gap: calc(var(--u) * 2) !important; padding: 0 !important; background: none !important; }
.grille-paquet .image-case { clip-path: var(--arrondi-petit) !important; background: none !important; }
.grille-aimees { gap: calc(var(--u) * 2) !important; }
html.petit .poche-regle { font-size: var(--fsm) !important; }
/* Coins et Keep it running : deux actions côte à côte, la troisième en large dessous */
.boutique.boutique-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.boutique-3 .boutique-case:last-child { grid-column: 1 / -1; }
.boutique-3 .boutique-case:last-child .boutique-p { max-width: calc(var(--u) * 200); min-height: 0; }
@media (max-width: 640px) { .boutique.boutique-3 { grid-template-columns: minmax(0, 1fr) !important; } }
/* les cases grouillent en canvas : plus de fond plat ni de clignotement CSS */
.panneau-barre canvas[data-fait="peint"], .panneau-barre canvas[data-fait=""], .panneau-barre canvas:not([data-fait]) { animation: none !important; background: #14110f !important; }
/* la radio en pixels, posée par terre (en attendant sa photo) */
.radio-sol { position: absolute; image-rendering: pixelated; pointer-events: none; filter: drop-shadow(0 18px 8px rgba(0,0,0,.55)); }
#vol, .gerbe { image-rendering: pixelated; }

/* LA MÊME LECTURE PARTOUT (13 octobre : « dans la partie information les
   titres sont en rose et le texte en dessous est gris, j'aime bien ; dans le
   profil ce n'est pas pareil »). Un titre de partie : rose, à la taille du
   texte courant. Le texte dessous : gris chaud. Dans toutes les fenêtres. */
.fenetre .section-titre, .fenetre .chapitre-t { display: block; color: var(--rose); font-size: var(--fs); margin: 0 0 calc(var(--u) * 3); padding: 0; }
.fenetre .chapitre-p, .fenetre .para.discret, .fenetre .p-note { color: #a99f8c; }

/* le profil, septième version : la personne, trois chiffres, la connexion */
.p-moi { display: flex; align-items: center; gap: calc(var(--u) * 5); }
.p-avatar { flex: none; background: #14120f; clip-path: var(--arrondi-moyen); padding: calc(var(--u) * 3); display: grid; place-items: center; }
.p-qui { display: flex; flex-direction: column; gap: calc(var(--u) * 1.5); min-width: 0; }
.p-nom { font-size: var(--fst); color: var(--creme); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-sous { font-size: var(--fss); color: #a99f8c; }
.p-chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 2); }
.p-chiffres .stat { background: #14120f; clip-path: var(--arrondi-petit); padding: calc(var(--u) * 4) calc(var(--u) * 2); gap: calc(var(--u) * 2); }
.p-chiffres .stat-v { font-size: var(--fs); color: var(--creme); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-compte .para { margin: 0 0 calc(var(--u) * 4); }
.p-connexions { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 2); }
.p-connexion { flex: 1 1 0; min-width: calc(var(--u) * 30); justify-content: center; }
.p-connexion[disabled] { opacity: .45; cursor: default; }
.p-mail { display: flex; gap: calc(var(--u) * 2); align-items: stretch; flex-wrap: wrap; }
.p-mail .champ { flex: 1 1 calc(var(--u) * 60); }
.panneau-barre canvas { width: 100% !important; height: auto !important; aspect-ratio: 1; image-rendering: pixelated; }

/* LE PANNEAU D'UNE MACHINE, quatrième version (13 octobre) : un seul
   squelette, le bouton toujours en bas, les trois chiffres toujours au même
   endroit, juste au-dessus de lui. */
.panneau { gap: 0 !important; }
.panneau .panneau-tete { margin-bottom: calc(var(--u) * 1.5); }
.pm-sous { margin: 0 0 calc(var(--u) * 4); font-size: var(--fss); color: #8f8676; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1.2em; }
.pm-corps { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 3); overflow: hidden; }
.pm-corps.ouvert { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.pm-note { margin: 0; font-size: var(--fss); line-height: 1.25; color: var(--creme); display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.pm-corps.ouvert .pm-note { display: block; -webkit-line-clamp: unset; }
.pm-plus { all: unset; cursor: pointer; align-self: flex-start; margin-top: calc(var(--u) * -2); font-size: var(--fss); color: var(--machine, var(--rose)); }
.pm-plus:hover { filter: brightness(1.2); }
.pm-plus[hidden], .pm-note[hidden], .pm-gout[hidden], .pm-phrase[hidden], .pm-sous[hidden] { display: none; }
.pm-gout { margin: 0; font-size: var(--fss); line-height: 1.25; color: var(--machine, #c9bfab); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pm-corps.ouvert .pm-gout { display: block; -webkit-line-clamp: unset; }
.pm-phrase { margin: 0; font-size: var(--fs); color: var(--creme); white-space: nowrap; overflow: hidden; flex: none; }
.pm-phrase span { display: inline-block; }
.pm-phrase.defile span { animation: defiler var(--duree, 8s) linear infinite alternate; }
@keyframes defiler { 0%, 12% { transform: translateX(0); } 88%, 100% { transform: translateX(calc(var(--trop) * -1)); } }
/* les six cases : serrées entre elles, de l'air autour */
.panneau .pm-barre { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: var(--u) !important; margin: auto 0 !important; flex: none !important; align-content: center; }
.panneau .pm-barre[hidden] { display: none !important; }
.panneau .pm-barre canvas { width: 100% !important; height: auto !important; aspect-ratio: 1; }
/* les trois chiffres, trois cases arrondies en escalier */
.pm-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 1.5); margin: calc(var(--u) * 4) 0 calc(var(--u) * 3); flex: none; }
.pm-stat { background: #110f0d; clip-path: var(--arrondi-petit); padding: calc(var(--u) * 2.5) var(--u) calc(var(--u) * 2); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 1.5); min-width: 0; }
.pm-stat dd { margin: 0; font-size: var(--fs) !important; color: var(--creme); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; text-align: center !important; }
.pm-stat dt { margin: 0; font-size: calc(var(--fss) * .82); color: #8f8676; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; text-align: center; }
.pm-stat:first-child dd { color: var(--machine, var(--creme)); }
.pm-stat.vide dd, .pm-stat.vide dt { visibility: hidden; }
.panneau .panneau-alerte { margin: calc(var(--u) * 2) 0 0 !important; font-size: var(--fss); }
.panneau .panneau-action, .panneau .panneau-duo { margin-top: 0 !important; flex: none; }
@media (max-width: 759px) { .pm-corps { flex: none; } .pm-note { -webkit-line-clamp: 4; } .pm-corps.ouvert { max-height: 40vh; } }
.panneau .pm-stat dt.cellule-t { font-size: calc(var(--fss) * .82) !important; }
.panneau .pm-stat dd.cellule-n { font-size: var(--fs) !important; }
.panneau .pm-stat dd.cellule-n { color: var(--creme) !important; }
.panneau .pm-stat:first-child dd.cellule-n { color: var(--machine, var(--creme)) !important; }

/* le profil, huitième version : moins de rose (les titres en crème), les
   cases des chiffres arrondies en escalier comme partout */
.f-profil .p-titre { display: block; color: var(--creme); font-size: var(--fst); margin: 0 0 calc(var(--u) * 3); }
.f-profil .p-chiffres .stat { clip-path: var(--arrondi-moyen) !important; border-radius: 0; }

/* Coins et Keep it running : des blocs l'un sous l'autre */
.blocs-v { display: flex; flex-direction: column; gap: calc(var(--u) * 3); }
.bloc-v { display: grid; grid-template-columns: calc(var(--u) * 24) 1fr; gap: calc(var(--u) * 5); align-items: start; background: #14120f; clip-path: var(--arrondi-moyen); padding: calc(var(--u) * 6) calc(var(--u) * 6) calc(var(--u) * 5); }
.bloc-v-ic { display: grid; place-items: center; padding-top: var(--u); }
.bloc-v-d { display: flex; flex-direction: column; gap: calc(var(--u) * 2.5); min-width: 0; }
.bloc-v-tete { display: flex; align-items: baseline; gap: calc(var(--u) * 3); }
.bloc-v-t { font-size: var(--fst); color: var(--creme); }
.bloc-v-bientot { font-size: var(--fss); color: #8f8676; }
.bloc-v-p { margin: 0; font-size: var(--fss); line-height: 1.3; color: #a99f8c; }
.bloc-v-apres { color: #8f8676; }
.bloc-v-etapes { margin: 0; padding: 0; list-style: none; counter-reset: e; display: flex; flex-direction: column; gap: calc(var(--u) * 1.5); }
.bloc-v-etapes li { counter-increment: e; display: flex; gap: calc(var(--u) * 2.5); font-size: var(--fss); line-height: 1.25; color: var(--creme); }
.bloc-v-etapes li::before { content: counter(e); flex: none; width: calc(var(--u) * 6); height: calc(var(--u) * 6); display: grid; place-items: center; background: #2a2622; color: var(--rose); clip-path: var(--arrondi-petit); }
.bloc-v-a { all: unset; cursor: pointer; align-self: flex-start; font-size: var(--fss); color: var(--rose); margin-top: var(--u); }
.bloc-v-a:hover { filter: brightness(1.25); }
@media (max-width: 560px) { .bloc-v { grid-template-columns: 1fr; gap: calc(var(--u) * 3); padding: calc(var(--u) * 5); } .bloc-v-ic { justify-items: start; } }
.soutien-direct { display: grid; grid-template-columns: auto 1fr auto 1fr; align-items: baseline; gap: calc(var(--u) * 2) calc(var(--u) * 3); background: #14120f; clip-path: var(--arrondi-petit); padding: calc(var(--u) * 4) calc(var(--u) * 5); }
.soutien-direct[hidden] { display: none; }
.soutien-n { font-size: var(--fst); color: var(--rose); }
.soutien-l { font-size: var(--fss); color: #a99f8c; }
@media (max-width: 560px) { .soutien-direct { grid-template-columns: auto 1fr; } }
.soutien-chapeau { margin: calc(var(--u) * 2) 0 !important; font-size: var(--fs); line-height: 1.3; color: var(--creme); }
.f-soutien .fenetre-corps, .f-jetons .fenetre-corps { overflow-y: auto; }
.bloc-v { grid-template-columns: calc(var(--u) * 34) 1fr !important; }
.bloc-v-ic { justify-items: center; overflow: visible; }
@media (max-width: 560px) { .bloc-v { grid-template-columns: 1fr !important; } .bloc-v-ic { justify-items: start; } }
/* la radio en photo : celle de l'heure seulement */
.radio-sol { filter: none !important; image-rendering: auto !important; }
.radio-sol img { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.scene[data-heure="jour"] .radio-jour, .scene[data-heure="couchant"] .radio-couchant, .scene[data-heure="nuit"] .radio-nuit { display: block; }
.radio-sol[data-on="1"] img { filter: brightness(1.06) saturate(1.1); }

/* les trois cases de chiffres : carrées, arrondies en escalier, tout centré
   (13 octobre : « trop rectangulaires, pas centrés ») */
.pm-stat { aspect-ratio: 1 / .78; justify-content: center; padding: var(--u) !important; gap: var(--u) !important; clip-path: var(--arrondi-moyen) !important; }
.pm-stats { gap: calc(var(--u) * 2) !important; }
.panneau .pm-stat dd.cellule-n { font-size: var(--fst) !important; line-height: 1; }
.panneau .pm-stat dt.cellule-t { font-size: var(--fss) !important; line-height: 1; text-transform: lowercase; }
@media (max-width: 759px) { .pm-stat { aspect-ratio: auto; padding: calc(var(--u) * 2.5) var(--u) !important; } }

/* LA MACHINE TRAVAILLE (13 octobre : « elle ne bouge plus trop »). Les
   anciennes secousses faisaient 2 pixels de la photo maîtresse, moins d'un
   pixel à l'écran. Deux mouvements superposés, à des rythmes qui ne tombent
   jamais juste ensemble : un tremblement court (translate) et un balancement
   lent d'un pied sur l'autre (rotate). La machine est sa propre couche pendant
   qu'elle bouge : la carte graphique la déplace sans la redessiner. */
.m[data-tremble]:not([data-tremble='']) { will-change: translate, rotate; }
.m[data-tremble="1"] { animation: vib1 .13s linear infinite, roule1 1.9s ease-in-out infinite !important; }
.m[data-tremble="2"] { animation: vib2 .1s linear infinite, roule2 .95s ease-in-out infinite !important; }
.m[data-tremble="3"] { animation: vib3 .065s linear infinite, roule3 .31s ease-in-out infinite !important; }
.m[data-tremble="4"] { animation: vib4 .05s linear infinite, roule4 .17s ease-in-out infinite !important; }
@keyframes vib1 { 0%,100% { translate: 0 0 } 33% { translate: 2px -1px } 66% { translate: -1px -1px } }
@keyframes vib2 { 0%,100% { translate: 0 0 } 25% { translate: 3px -2px } 50% { translate: -2px -1px } 75% { translate: 2px -3px } }
@keyframes vib3 { 0%,100% { translate: 0 0 } 25% { translate: 5px -3px } 50% { translate: -4px -1px } 75% { translate: 4px -4px } }
@keyframes vib4 { 0%,100% { translate: 0 0 } 20% { translate: 8px -5px } 45% { translate: -7px -2px } 70% { translate: 6px -6px } 85% { translate: -5px -2px } }
@keyframes roule1 { 0%,100% { rotate: 0deg } 50% { rotate: .15deg } }
@keyframes roule2 { 0%,100% { rotate: -.25deg } 50% { rotate: .25deg } }
@keyframes roule3 { 0%,100% { rotate: -.18deg } 50% { rotate: .18deg } }
@keyframes roule4 { 0%,100% { rotate: -.35deg } 50% { rotate: .35deg } }
@media (prefers-reduced-motion: reduce) { .m[data-tremble] { animation: none !important; } }

/* LA MÊME LECTURE QUE « HOW IT WORKS », PARTOUT (13 octobre) : un titre rose
   à la taille du texte, de l'air au-dessus ; les réglages espacés, leur nom
   en crème, leur détail en gris plus petit ; le rose réservé aux titres. */
.f-profil .fenetre-corps { gap: calc(var(--u) * 10) !important; }
.f-profil .section-titre { margin-bottom: calc(var(--u) * 4) !important; }
.f-profil .liste { gap: calc(var(--u) * 2.5) !important; }
.f-profil .reglage { padding: calc(var(--u) * 3.5) calc(var(--u) * 4) !important; }
.f-profil .reglage-mots, .f-profil .reglage-nom { font-size: var(--fs); }
.f-profil .reglage-mots .discret, .f-profil .reglage small { font-size: var(--fss); color: #8f8676; }
.f-profil .p-reglages .liste + .liste { margin-top: calc(var(--u) * 6); }
.p-connexion { color: var(--creme) !important; }
/* les blocs : l'icône à côté du titre, le texte sur toute la largeur */
.bloc-v { display: flex !important; flex-direction: column; gap: calc(var(--u) * 2.5) !important; grid-template-columns: none !important; }
.bloc-v-tete { align-items: center !important; gap: calc(var(--u) * 3) !important; }
.bloc-v-ic { display: inline-grid; place-items: center; padding: 0 !important; }
.direct { margin: 0; text-align: center; font-size: var(--fss); color: #a99f8c; line-height: 1.5; background: #14120f; clip-path: var(--arrondi-petit); padding: calc(var(--u) * 3.5) calc(var(--u) * 4); }
.direct[hidden] { display: none; }
.direct b { font-weight: normal; color: var(--rose); font-size: var(--fs); }
.soutien-chapeau { font-size: var(--fss) !important; color: #c9bfab !important; text-align: center; margin: calc(var(--u) * 3) auto calc(var(--u) * 4) !important; max-width: calc(var(--u) * 190); }
.cle-chapeau { margin: 0 0 calc(var(--u) * 3) !important; text-align: center; }
.cle-sans { text-align: center; margin: calc(var(--u) * 2) 0 calc(var(--u) * 5); font-size: var(--fss); }
.f-cle .cle-etat { margin: calc(var(--u) * 2) 0 !important; }
.preter-chapeau { text-align: center; margin: calc(var(--u) * 3) 0 !important; }
.f-profil .p-chiffres .stat { aspect-ratio: 4 / 3; justify-content: center; align-items: center; padding: calc(var(--u) * 2) !important; }
.pm-note[data-coupe="1"], .pm-corps.ouvert .pm-note { cursor: pointer; }
.pm-note[data-coupe="1"]:hover { color: #fff; }

/* LA LUEUR DE FIN (13 octobre : « pas bien transitionné ») : elle monte en
   douceur en une seconde et demie, respire trois fois, puis se pose ; les
   rayons tournent lentement une fois. Que de l'opacité et de la rotation,
   que la carte graphique fait seule : plus de fond qui saute par paliers. */
.m-lueur { transition: opacity 1.5s cubic-bezier(.2,.7,.2,1) !important; will-change: opacity; }
.m[data-pret="1"] .m-lueur { opacity: 1; animation: lueur-v2 2.2s ease-in-out 1.5s 6 alternate !important; }
@keyframes lueur-v2 { from { opacity: 1; } to { opacity: .72; } }
.m-rayons { background-position: 0 0 !important; will-change: transform; }
.m[data-pret="1"] .m-rayons { animation: rayons-v2 14s cubic-bezier(.3,0,.6,1) 1 forwards !important; }
@keyframes rayons-v2 { from { transform: rotate(0deg) scale(.92); } to { transform: rotate(140deg) scale(1); } }
/* le voile de la pression : sa propre couche (avant : tout l'écran redessiné à chaque image) */
.vignette { will-change: opacity; }
/* les reflets sur le verre : ils apparaissent en fondu, chacun à son tour,
   scintillent un moment puis se posent (rien ne tourne sans fin au repos) */
.etincelle { animation: etincelle 1.2s steps(5, jump-none) 7, etincelle-vient .9s ease-out backwards; }
@keyframes etincelle-vient { from { opacity: 0; } to { opacity: 1; } }

/* OPTIMISATIONS DE LA PORTE TENUE (13 octobre, mesurées : laverie/outils/mesure.py) */
/* les reflets du verre scintillent en opacité et en taille (la carte graphique
   le fait seule) au lieu de changer d'image par paliers */
.etincelle { background-position: 40% 0 !important; animation: etincelle-vient .9s ease-out backwards, scintille 1.5s ease-in-out .9s 6 alternate !important; will-change: opacity, transform; }
@keyframes scintille { from { opacity: 1; transform: scale(1); } to { opacity: .35; transform: scale(.7); } }
/* plus de masque sur la caisse : les secousses sont petites, le bord ne se voit pas */
.m:is([data-tremble]:not([data-tremble='']), [data-js='1'], [data-sursaut='1']) .m-caisse { -webkit-mask-image: none !important; mask-image: none !important; }
/* les cases de chiffres : de l'air sur les bords, et la valeur jamais coupée */
.pm-stat { padding: calc(var(--u) * 2) calc(var(--u) * 2.5) !important; }
.panneau .pm-stat dd.cellule-n { font-size: var(--fs) !important; text-overflow: clip !important; letter-spacing: 0; }

/* le pourboire : un vrai bouton, bien visible */
.bloc-v-plein { align-self: flex-start; margin-top: calc(var(--u) * 2); }
/* la carte graphique : les trois étapes sur UNE ligne, reliées par un trait
   plein qui passe derrière les numéros (13 octobre : « des points bizarres ») */
.f-preter .preter-pas { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 4) !important; position: relative; align-items: start !important; margin: calc(var(--u) * 4) 0 calc(var(--u) * 6) !important; }
.f-preter .preter-pas::before { content: ""; position: absolute; left: 16%; right: 16%; top: calc(var(--u) * 4.5); height: var(--u); background: #3a3530; }
.f-preter .preter-pas-un { position: relative; max-width: none !important; }
.f-preter .preter-n { position: relative; z-index: 1; display: grid; place-items: center; width: calc(var(--u) * 9); height: calc(var(--u) * 9); background: #2a2622; color: var(--rose); clip-path: var(--arrondi-petit); }
.f-preter .preter-trait { display: none !important; }
@media (max-width: 560px) { .f-preter .preter-pas { grid-template-columns: 1fr; } .f-preter .preter-pas::before { display: none; } }
/* Coins : plus d'air */
.f-jetons .fenetre-corps { gap: calc(var(--u) * 7) !important; }
.f-jetons .blocs-v { gap: calc(var(--u) * 5) !important; }
.f-jetons .bloc-v { padding: calc(var(--u) * 7) !important; gap: calc(var(--u) * 3.5) !important; }
.f-preter .preter-chapeau { font-size: var(--fss) !important; line-height: 1.35 !important; color: #c9bfab !important; max-width: none !important; }
.f-preter .preter-pas-un .porte-titre { font-size: var(--fs) !important; line-height: 1.15; }
.f-preter .preter-pas-un .para { font-size: var(--fss) !important; }
.f-preter .preter-n { font-size: var(--fs) !important; line-height: 1; color: var(--rose) !important; width: calc(var(--u) * 10) !important; height: calc(var(--u) * 10) !important; margin-bottom: calc(var(--u) * 2); }
.f-preter .preter-pas::before { top: calc(var(--u) * 5) !important; }

/* DE L'AIR (13 octobre : « un gros pâté d'informations ») : plus d'espace
   vertical entre les blocs, les paragraphes et les étapes, partout */
.fenetre-corps { gap: calc(var(--u) * 7) !important; }
.blocs-v { gap: calc(var(--u) * 6) !important; }
.bloc-v { gap: calc(var(--u) * 4) !important; padding: calc(var(--u) * 7) calc(var(--u) * 7) calc(var(--u) * 6) !important; }
.bloc-v-p { line-height: 1.45 !important; }
.bloc-v-etapes { gap: calc(var(--u) * 2.5) !important; margin: calc(var(--u) * 1) 0 !important; }
.fenetre .para + .para, .fenetre .chapitre-p + .chapitre-p { margin-top: calc(var(--u) * 3) !important; }
.fenetre .chapitre { margin-top: calc(var(--u) * 4); }
.soutien-chapeau { margin: calc(var(--u) * 4) auto calc(var(--u) * 5) !important; line-height: 1.45 !important; }
/* les étapes : un simple numéro rose, sans case (13 octobre : « un truc
   visuel devant, bizarrement fait ») */
.bloc-v-etapes li::before { content: counter(e) "." !important; width: auto !important; height: auto !important; background: none !important; clip-path: none !important; display: inline !important; color: var(--rose) !important; min-width: calc(var(--u) * 5); }
/* le bouton du pourboire : grand, avec son cœur */
.bloc-v-plein { font-size: var(--fs) !important; padding: calc(var(--u) * 3) calc(var(--u) * 6) !important; margin-top: calc(var(--u) * 3) !important; gap: calc(var(--u) * 3); }
/* les cases du profil : des coins vraiment arrondis */
.f-profil .p-chiffres .stat { clip-path: var(--arrondi) !important; }
/* la carte graphique, plus large : les étapes respirent sur une ligne */
.f-preter .preter-pas-un .porte-titre { white-space: normal; }
.f-profil .p-chiffres .stat { aspect-ratio: 5 / 4 !important; height: auto !important; display: flex !important; flex-direction: column; justify-content: center !important; align-items: center !important; }
.f-profil .p-chiffres { max-width: calc(var(--u) * 200); margin: 0 auto; width: 100%; }


/* les étincelles du hublot, une à une (14 octobre) : quatre images de pixel,
   aller puis retour, une seule fois */
.etincelle2 { position: absolute; z-index: 21; pointer-events: none; image-rendering: pixelated; background: 0 0 / 500% 100% no-repeat; animation: etincelle2 .9s steps(1) 1 forwards; }
@keyframes etincelle2 {
  0% { background-position: 0% 0; } 15% { background-position: 25% 0; } 32% { background-position: 50% 0; }
  52% { background-position: 75% 0; } 70% { background-position: 50% 0; } 85% { background-position: 25% 0; } 100% { background-position: 0% 0; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .etincelle2 { display: none; } }
/* l'image bloquée (14 octobre) : un mot plus grand, une ligne calme dessous */
.lavee-dit { font-size: calc(var(--fs) * 1.05); color: #9c9283 !important; padding: 10% !important; }
.lavee-dit b { font-size: calc(var(--fs) * 1.6); color: #d8ccb6 !important; letter-spacing: .02em; margin-bottom: calc(var(--u) * 3) !important; }

/* FLUIDITÉ DES FENÊTRES (14 octobre : « des rectangles qui apparaissent, des
   éléments qui disparaissent puis reviennent, dans la collection, au téléphone »).
   L'ombre portée était un filtre sur TOUTE la fenêtre : le contenu qui défile
   dedans devait être refiltré à chaque image, et le téléphone découpait le
   travail en tuiles qu'il n'avait pas le temps de finir (les rectangles).
   Au téléphone, plus de filtre ; partout, la liste qui défile vit sur sa
   propre couche, et chaque tuile se dessine à part. */
html.petit .fenetre { filter: none !important; }
.fenetre-corps { -webkit-overflow-scrolling: touch; transform: translateZ(0); }
.paquet-carte, .aimee, .bande-case { contain: layout paint; }
.paquet-carte:hover:not([disabled]) { filter: none; }
@media (hover: hover) { .paquet-carte:hover:not([disabled]) { filter: brightness(1.18); } }

/* l'image bloquée, sans le mot « blocked » : la phrase seule, au milieu (14 octobre) */
.lavee-dit { font-size: calc(var(--fs) * 1.15) !important; color: #b3a895 !important; }

/* LA MACHINE CHOISIE (14 octobre : « des rectangles qui flashent quand la
   souris passe sur une machine »). Un filtre sur la caisse obligeait la carte
   graphique à redessiner un grand morceau de photo ; un voile clair posé
   par-dessus, qui ne fait que changer d'opacité, ne coûte rien. */
.m[data-choisie="1"] .m-caisse { filter: none !important; }
.m-caisse::after { content: ''; position: absolute; inset: 0; background: rgba(255, 244, 226, .06); opacity: 0; transition: opacity .25s; pointer-events: none; }
.m[data-choisie="1"] .m-caisse::after { opacity: 1; }

/* AU TÉLÉPHONE, UN TIROIR PLUS PETIT (14 octobre : « la fenêtre de la machine
   prend toute la machine ») : les six cases sur une seule ligne pendant le
   lavage, trois lignes de texte au plus sur la carte */
@media (max-width: 759px) {
  .panneau .panneau-barre { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: var(--u) !important; flex: none !important; }
  .panneau .panneau-barre canvas { aspect-ratio: 1; }
  .pm-note { -webkit-line-clamp: 3 !important; }
}

/* SAFARI AU TÉLÉPHONE (14 octobre, après « encore énormément de bugs visuels »).
   Safari dessine la salle par carreaux. Trois effets l'obligent à redessiner
   ces carreaux hors de l'écran à chaque image, et c'est ce qui clignote :
   un mélange « écran » (la lueur), un masque sur une machine qui bouge, un
   filtre de couleur sur une porte qui tourne. Au téléphone on les remplace
   par des équivalents qui ne demandent rien : une lueur posée simplement, des
   bords nets, un voile sombre au lieu d'un filtre. */
html.petit .m-lueur, html.petit .vue-rayons, html.petit .eclair { mix-blend-mode: normal !important; }
html.petit .m-lueur { opacity: 0; }
html.petit .m[data-pret="1"] .m-lueur { animation: lueur-tel 1.6s steps(3) infinite alternate; }
@keyframes lueur-tel { from { opacity: .5; } to { opacity: .75; } }
html.petit .m .m-caisse { -webkit-mask-image: none !important; mask-image: none !important; }
html.petit .m-vide { filter: none !important; box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, .28); }
html.petit .m-porte, html.petit .m[data-porte] .m-porte, html.petit .m[data-pret="1"] .m-porte { filter: none !important; }
html.petit .m-porte { transition: transform calc(.55s * var(--lent)) cubic-bezier(.3,.7,.2,1); }
html.petit .px-btn:hover:not([disabled]), html.petit .px-btn:active:not([disabled]), html.petit .tuile-bouton:hover:not([disabled]) { filter: none !important; }

/* LE TÉLÉPHONE, 14 octobre au soir (Tristan : « les pages en plein écran, la
   carte toujours de la même taille, plus grand »).
   1. Les pages (coins, keep it running, profil, collection, how it works) :
      tout l'écran, les marges du téléphone respectées (encoche, barre du bas).
      Ce qui s'ouvre par-dessus (une image, un paquet) reste une fenêtre. */
html.petit .fenetre-fond.plein { padding: 0; align-items: stretch; background: #110f0d; }
html.petit .fenetre.plein { width: 100% !important; height: 100dvh; max-height: none; border-left-width: 0 !important; border-right-width: 0 !important;
  padding: calc(env(safe-area-inset-top, 0px) + var(--u) * 3) calc(var(--u) * 5) calc(env(safe-area-inset-bottom, 0px) + var(--u) * 4); }
html.petit .fenetre.plein .fenetre-tete { min-height: calc(var(--u) * 20); margin-bottom: calc(var(--u) * 3); }
html.petit .fenetre.plein .fenetre-titre { font-size: var(--fst); }
html.petit .fenetre.plein .fenetre-tete .ib:not([hidden]) { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
html.petit .fenetre.plein .fenetre-corps { gap: calc(var(--u) * 6); }
/* 2. La carte de la machine : une hauteur fixe (posée par main.js), le même
      squelette avant et pendant. Le texte de la machine tient en deux lignes
      (un toucher le déroule), les six cases sur une ligne, les chiffres et le
      bouton toujours en bas, au même endroit. */
@media (max-width: 759px) {
  .panneau { overflow: hidden; }
  .panneau .pm-corps { flex: 1 1 auto !important; min-height: 0; justify-content: flex-start; gap: calc(var(--u) * 2); }
  .panneau .pm-note { -webkit-line-clamp: 2 !important; }
  .panneau .pm-gout { -webkit-line-clamp: 1; }
  .panneau .pm-sous { margin-bottom: calc(var(--u) * 2); }
  .panneau .pm-stats { margin: calc(var(--u) * 2) 0; }
  .panneau .pm-barre { margin: 0 !important; }
  .panneau .pm-corps.ouvert { position: absolute; left: 0; right: 0; bottom: 100%; max-height: 50vh; background: #1a1714; padding: calc(var(--u) * 3); }
}
@media (max-width: 759px) { .panneau .pm-note, .panneau .pm-gout, .panneau .pm-phrase { flex: none !important; } }
/* how it works au téléphone : les cinq gestes sur UNE ligne, serrés, le mot
   dessous un cran plus petit (14 octobre au soir) */
@media (max-width: 640px) {
  .vues { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: calc(var(--u) * 1.5) !important; }
  .vues li { gap: calc(var(--u) * 1.5) !important; }
  .vues .vue-img { width: 100%; height: auto; }
  .vues .vue-t { font-size: var(--fsm); white-space: nowrap; }
}
/* le délai de la prochaine pièce, au téléphone : collé aux pièces, sur une
   petite plaque sombre pour se lire sur le carrelage clair */
html.petit .hud-delai { top: calc(100% - var(--u) * 1.5); padding: 1px calc(var(--u) * 1.5); background: rgba(17, 15, 13, .7); }
/* LES IMAGES AU TÉLÉPHONE (14 octobre au soir : « saccades en ouvrant un
   paquet, des images qui ne chargent pas complètement »). Chaque coin en
   escalier (clip-path) oblige Safari à découper l'image hors de l'écran ; un
   coin arrondi simple ne coûte rien. Les images se posent une fois décodées. */
html.petit :is(.image-case, .bande-case, .aimee, .vue-img, .fiche-img, .visionneuse img, .grille-paquet .image-case, .paquet-carte .bande) { clip-path: none !important; border-radius: calc(var(--u) * 2); overflow: hidden; }
html.petit .fenetre { animation: none !important; }
/* « tell us » */
.f-retour { display: flex; flex-direction: column; gap: calc(var(--u) * 3); }
.retour-texte { width: 100%; box-sizing: border-box; min-height: calc(var(--u) * 60); resize: vertical; background: #110f0d; color: var(--creme); border: var(--u) solid #3d3731; padding: calc(var(--u) * 3);
  font: inherit; font-size: max(16px, var(--fs)); line-height: 1.3; user-select: text; -webkit-user-select: text; }
.retour-texte:focus { outline: none; border-color: var(--rose); }
.retour-bas { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 3); }