/* Le portant (mode.html), chargée après style.css.
   Au portant : la tringle de face, sur toute la largeur, sous l'en-tête ; les filtres dans leur carton, à gauche ;
   la pièce de l'écart porte sa grande étiquette, pendue à sa ficelle sous le tirage.
   « Tout voir » : les tirages posés à plat sur la table, sur la nappe de lin de la boutique (c'est aussi la page sans 3D).
   Avant la première image de la 3D, son esquisse (un canvas 2D) montre déjà la tringle et les cintres, à la même place.
   Classes de la page : html.vue-portant / html.vue-table (la bascule), html.tire (on pousse les cintres à la main). */

/* ------------------------------------------------------------ la scène : un écran, pleine largeur */
.mode-scene {
  --colonne: var(--colonne-mode);
  --entre: clamp(1.2rem, 2.6vw, 2.8rem);
  display: grid;
  grid-template-columns: var(--colonne) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "filtres outils" "filtres scene";
  column-gap: var(--entre);
  align-items: start;
}
html.vue-portant .mode-scene { height: 100vh; height: 100svh; min-height: 0; overflow: hidden; user-select: none; -webkit-user-select: none; }
html.tire, html.tire * { cursor: grabbing !important; }
/* la pièce en main, sa fiche ouverte : pas de voile sur elle (la boutique baisse sa lumière autour, mode.js) */
.fiche.sans-photo::backdrop { background: transparent; }
@media (hover: hover) {
  html.vue-portant .mode-scene { cursor: grab; }   /* le mur : on y attrape les cintres */
  html.vue-portant .mode-scene > * { cursor: auto; }
  html.vue-portant.sur-cintre .mode-scene { cursor: pointer; }
}

/* le titre de la page : peint sur le mur, au portant (il reste ici pour les lecteurs d'écran) ; écrit en grand sur la table */
.mode-titre { grid-area: outils; justify-self: start; align-self: end; margin: 1.1rem 0 0; font-size: clamp(2.3rem, 3.6vw, 3.6rem); }
.mode-titre::after { content: '.'; }
html.vue-portant .mode-titre { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* la bascule « Au portant / Tout voir » : deux étiquettes, celle qu'on regarde est dorée */
.mode-outils { grid-area: outils; justify-self: end; display: flex; align-items: center; gap: .8rem; margin-top: 1rem; position: relative; z-index: 3; }
.vue { display: flex; gap: .35rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.vue .filtre span { --h: 2.35rem; padding-right: .95em; font-size: 1rem; box-shadow: inset 0 0 0 1px rgb(21 20 18 / .14), 0 3px 8px rgb(30 20 10 / .12); }
html.statique .vue { display: none; }   /* sans 3D, la table est la seule vue */

/* ------------------------------------------------------------ les filtres : le carton ivoire de la colonne de gauche */
.mode-scene .filtres {
  grid-area: filtres; width: auto; margin-top: 1rem;
  max-height: calc(100svh - var(--entete) - 2rem); overflow: auto; overscroll-behavior: contain;
  gap: .95rem; padding: 1.15rem 1.1rem 1.25rem;
  scrollbar-width: thin; scrollbar-color: var(--or) transparent;
}
.filtres-tete { position: relative; flex-wrap: wrap; row-gap: .2rem; padding-bottom: .7rem; border-bottom: 1px solid rgb(21 20 18 / .12); }
/* sous le nombre de pièces, une information : le portant n'est qu'un aperçu de la boutique */
.filtres-plus { flex-basis: 100%; order: 3; font: 500 .86rem/1.3 var(--f-texte); color: #5f584d; }
/* sous les tranches de prix : les pièces sans prix affiché, qui n'y sont pas */
.filtres-note { flex-basis: 100%; margin-top: .1rem; font: 500 .84rem/1.3 var(--f-texte); color: #5f584d; }
.filtres-note[hidden] { display: none; }
.filtres-groupe { gap: .38rem .32rem; }
.filtres-groupe legend { margin-bottom: .38rem; font-size: 1.02rem; }
.mode-scene .filtre span { --h: 2rem; padding: .25em .62em .25em calc(var(--h) * .42 + .55em); font-size: .9rem; }
.mode-scene .filtre span small { margin-left: .1em; color: #6d665b; }   /* l'étiquette reste claire, la nuit aussi */
.mode-scene .filtre input:disabled + span small { color: inherit; }
/* le voile de l'en-tête (son fondu sur la scène) ne descend pas sur le carton des filtres ni sur la bascule :
   ils restent nets, la nuit aussi (le voile est alors sombre) */
html.mode { --colonne-mode: clamp(16.6rem, 19vw, 18.5rem); }   /* assez large pour deux étiquettes par ligne (rayons, occasions) */
@media (min-width: 761px) {
  html.mode .entete::before {
    -webkit-mask: linear-gradient(#000 0 var(--entete), #0000 var(--entete)), linear-gradient(90deg, #0000 0 calc(var(--gouttiere) + var(--colonne-mode) + 1rem), #000 calc(var(--gouttiere) + var(--colonne-mode) + 3rem) calc(100% - 25rem), #0000 calc(100% - 23rem));
            mask: linear-gradient(#000 0 var(--entete), #0000 var(--entete)), linear-gradient(90deg, #0000 0 calc(var(--gouttiere) + var(--colonne-mode) + 1rem), #000 calc(var(--gouttiere) + var(--colonne-mode) + 3rem) calc(100% - 25rem), #0000 calc(100% - 23rem));
  }
}
@media (max-width: 760px) {
  html.mode .entete::before { inset: 0; }   /* sur téléphone, la bascule et le carton des filtres sont juste sous l'en-tête */
}
/* les tailles : une grille d'étiquettes, chacune à sa place */
.filtres-groupe--tailles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .32rem .28rem; }
.filtres-groupe--tailles legend { grid-column: 1 / -1; }
.mode-scene .filtres-groupe--tailles .filtre span { justify-content: center; width: 100%; padding-right: .3em; padding-left: calc(var(--h) * .42 + .3em); }
/* un écran bas : le carton des filtres se resserre, et tient dans l'écran sans défiler (1280 × 800, 1366 × 768) */
@media (min-width: 761px) and (max-height: 860px) {
  .mode-scene .filtres { gap: .62rem; padding-block: .9rem 1rem; }
  .mode-scene .filtres-groupe { row-gap: .3rem; }
  .mode-scene .filtres-groupe legend { margin-bottom: .3rem; }
  .mode-scene .filtre span { --h: 1.82rem; }
}
@media (min-width: 761px) and (max-height: 780px) {
  .mode-scene .filtres { gap: .5rem; padding-block: .8rem .9rem; }
  .mode-scene .filtres-groupe { row-gap: .26rem; }
  .mode-scene .filtre span { --h: 1.72rem; }
  .mode-scene .filtres-tete { padding-bottom: .5rem; }
}
.filtres-fermer, .filtres-voir { display: none; }
html.nuit .mode-scene .filtres { box-shadow: 0 10px 34px rgb(0 0 0 / .5); }
/* la nuit, le carton des filtres n'est plus en plein jour : une lampe l'éclaire d'en haut, chaude, il s'assombrit vers le bas
   (l'encre reste franche, les étiquettes claires) */
html.nuit .mode-scene .filtres {
  background:
    radial-gradient(ellipse 120% 55% at 50% 0%, rgb(255 222 170 / .22), rgb(255 222 170 / 0) 72%),
    linear-gradient(rgb(20 14 8 / 0) 28%, rgb(20 14 8 / .3)),
    var(--papier);
}

/* ------------------------------------------------------------ l'esquisse du portant : la tringle et les cintres dessinés à plat,
   à la place exacte de la scène 3D, le temps qu'elle se prépare (sa première image la remplace) */
.esquisse { position: fixed; inset: 0; z-index: -2; width: 100%; height: 100%; display: block; pointer-events: none; }
html.vue-table .esquisse { display: none; }

/* ------------------------------------------------------------ au portant : l'étiquette de la pièce de l'écart
   .piece est le point d'accroche (le bas du tirage), suivi à chaque image par le script ; l'étiquette pend à sa ficelle
   et se balance avec le cintre. Les deux étiquettes « Précédente » et « Suivante » l'encadrent, pointes vers l'extérieur. */
.portant { grid-area: scene; }
.piece { --l: 21rem; --fil: 1rem; --trou: 1.12rem; position: fixed; left: 0; top: 0; z-index: 4; width: 0; height: 0; pointer-events: none; }
.piece[hidden] { display: none; }
.piece-suspension { position: absolute; left: calc(var(--l) / -2); top: 0; width: var(--l); padding-top: var(--fil); transform-origin: 50% 0; filter: drop-shadow(0 4px 7px rgb(30 20 10 / .26)); }
.piece-suspension::before { content: ''; position: absolute; z-index: 1; left: calc(50% - .75px); top: 0; width: 1.5px; height: calc(var(--fil) + var(--trou)); background: #2b2722; pointer-events: none; }
html.nuit .piece-suspension::before { background: #e8dcc4; }
.piece-carton {
  position: relative; display: grid; justify-items: center; gap: .22rem;
  padding: 2.1rem 1.3rem 1rem; pointer-events: auto;
  background: radial-gradient(circle at 50% var(--trou), #0000 .4rem, var(--or-clair) .43rem, var(--or) .55rem, var(--or-fonce) .68rem, #0000 .71rem), var(--papier);
  color: var(--noir); text-align: center;
  clip-path: polygon(17% 0, 83% 0, 100% 2.1rem, 100% 100%, 0 100%, 0 2.1rem);
  -webkit-mask: radial-gradient(circle at 50% var(--trou), #0000 .38rem, #000 .44rem);
          mask: radial-gradient(circle at 50% var(--trou), #0000 .38rem, #000 .44rem);
}
.piece-carton.accroche { animation: accroche 1.05s cubic-bezier(.2, .9, .3, 1); transform-origin: 50% 0; }
.piece-haut { margin-bottom: -.15rem; font: 800 .86rem/1.2 var(--f-enseigne); color: var(--or-fonce); }
.piece-haut[hidden] { display: none; }
.piece-prix { font: 800 1.95rem/1 var(--f-enseigne); letter-spacing: -.01em; white-space: nowrap; }
/* une tenue n'a pas un prix : « dès » et « la pièce » en petit, autour du prix de sa pièce la moins chère */
.prix-mot { font-size: .56em; font-weight: 700; letter-spacing: 0; }
/* sans prix publié : à la place du prix, l'étiquette « Demander le prix » ; elle ouvre la fiche de la pièce (qui dit comment le demander) */
.piece-prix.sans-prix { margin: .2rem 0 .05rem; font-size: 1rem; }
.piece-demander { --h: 2.3rem; --fond-etiquette: linear-gradient(97deg, #e6dccb 0%, #d9cdb8 55%, #e2d7c4 100%); font-size: 1rem; }   /* le papier kraft : l'étiquette se détache du carton */
/* sans prix publié, le nom de la pièce passe devant, en grand, ses tailles dessous ; les deux étiquettes d'action ensemble */
.piece-carton.sans-prix .piece-haut { order: -2; }
.piece-carton.sans-prix .piece-titre { order: -1; margin: 0 0 .1rem; font-size: 1.36rem; line-height: 1.04; }
.piece-carton.sans-prix .piece-tailles { order: -1; }
.piece-titre { margin: .05rem 0 0; font: 700 1.12rem/1.1 var(--f-enseigne); letter-spacing: 0; }
.piece-titre button {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  padding: 0 .2rem; border: 0; background: none; cursor: pointer; font: inherit; color: inherit; text-wrap: balance;
  text-decoration: underline; text-decoration-color: rgb(200 161 93 / 0); text-underline-offset: .18em; transition: text-decoration-color .2s;
}
.piece-titre button:hover { text-decoration-color: var(--or); }
.piece-titre button:focus-visible { outline: 3px solid var(--cocotte); outline-offset: 2px; }
.piece-tailles { font: 600 .92rem/1.2 var(--f-texte); color: #332f29; }
.piece-tailles:empty { display: none; }
.piece-cabine { --h: 2.45rem; margin-top: .45rem; font-size: 1rem; }
.piece-cabine.dedans { --fond-etiquette: var(--papier-or); color: var(--noir); }
html.nuit .piece-carton .etiquette--noire:not(.dedans) { --fond-etiquette: var(--papier-noir); color: var(--ivoire); }

/* Précédente, Suivante : la pointe de l'étiquette montre le sens, l'œillet est du côté de la pointe */
.piece-pousser { --h: 2.65rem; position: absolute; top: calc(var(--bas, 12rem) / 2 - 1.1rem); pointer-events: auto; font-size: 1rem; box-shadow: 0 4px 10px rgb(30 20 10 / .14); }
.piece-pousser--avant { right: calc(var(--l) / 2 + 1.1rem); }
.piece-pousser--apres {
  left: calc(var(--l) / 2 + 1.1rem);
  padding: .5em calc(var(--pointe) + 1.15em) .5em 1.3em;
  background: radial-gradient(circle at calc(100% - var(--trou)) 50%, #0000 4.6px, var(--or-clair) 5px, var(--or) 6.4px, var(--or-fonce) 7.6px, #0000 8px), var(--fond-etiquette);
  clip-path: polygon(0 0, calc(100% - var(--pointe)) 0, 100% 50%, calc(100% - var(--pointe)) 100%, 0 100%);
  -webkit-mask: radial-gradient(circle at calc(100% - var(--trou)) 50%, #0000 4.4px, #000 5.1px);
          mask: radial-gradient(circle at calc(100% - var(--trou)) 50%, #0000 4.4px, #000 5.1px);
  transform-origin: calc(100% - var(--trou)) 50%;
}
.piece-pousser--apres:active { transform: rotate(4deg); }
.piece-pousser[aria-disabled="true"], .piece-pousser[aria-disabled="true"]:active { opacity: .38; cursor: default; animation: none; filter: none; transform: none; }
/* la part d'écran du portant est étroite (tablette debout) : les deux étiquettes passent sous l'étiquette de la pièce */
.piece.serree .piece-pousser { top: calc(var(--bas, 12rem) + .55rem); box-shadow: none; }
.piece.serree .piece-pousser--avant { right: auto; left: calc(var(--l) / -2); }
.piece.serree .piece-pousser--apres { left: auto; right: calc(var(--l) / -2); }

/* ------------------------------------------------------------ aucun résultat : une étiquette pendue à la tringle vide */
.vide { --fil: 3.2rem; --trou: 1.2rem; position: fixed; left: 0; top: 0; z-index: 4; width: 0; height: 0; }
.vide[hidden] { display: none; }
.vide-carton {
  position: absolute; left: -13rem; top: var(--fil); width: 26rem; display: grid; justify-items: center; gap: .45rem;
  padding: 2.5rem 1.6rem 1.5rem; text-align: center; color: var(--noir);
  background: radial-gradient(circle at 50% var(--trou), #0000 .4rem, var(--or-clair) .43rem, var(--or) .55rem, var(--or-fonce) .68rem, #0000 .71rem), var(--papier);
  clip-path: polygon(17% 0, 83% 0, 100% 2.1rem, 100% 100%, 0 100%, 0 2.1rem);
  -webkit-mask: radial-gradient(circle at 50% var(--trou), #0000 .38rem, #000 .44rem);
          mask: radial-gradient(circle at 50% var(--trou), #0000 .38rem, #000 .44rem);
  transform-origin: 50% calc(var(--fil) * -1);
  animation: accroche 1.1s cubic-bezier(.2, .9, .3, 1);
}
.vide-fil { position: absolute; left: -.75px; top: 0; width: 1.5px; height: calc(var(--fil) + var(--trou)); background: #2b2722; }
html.nuit .vide-fil { background: #e8dcc4; }
.vide-titre { font: 800 1.6rem/1.05 var(--f-enseigne); text-wrap: balance; }
.vide .actions { justify-content: center; margin-top: .7rem; }
.vide .etiquette { --h: 2.6rem; font-size: 1rem; }

/* ------------------------------------------------------------ sur la table : les tirages posés sur la nappe de lin
   La vraie table de la boutique est habillée d'un lin naturel : la trame (fils croisés, flammes du lin), un jour doux au milieu. */
.table { grid-area: scene; position: relative; z-index: 1; }
html.vue-portant .table { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html.vue-table .mode-scene { height: auto; min-height: 100vh; min-height: 100svh; padding-bottom: clamp(2.5rem, 5vw, 4.5rem); }
@media (min-width: 761px) { html.vue-table .mode-scene .filtres { position: sticky; top: calc(var(--entete) + 1rem); } }
html.vue-table #boutique { visibility: hidden; }
html.vue-table .piece { display: none; }
.table {
  --lin: #d8ccb5;
  margin-top: 1.1rem; padding: clamp(1.8rem, 3.4vw, 3.4rem) clamp(1.3rem, 3.2vw, 3.6rem) clamp(2.4rem, 4vw, 3.8rem);
  border-radius: 3px;
  background:
    radial-gradient(ellipse 70% 60% at 50% 38%, rgb(255 251 242 / .5), rgb(255 251 242 / 0) 70%),
    radial-gradient(ellipse 120% 100% at 50% 50%, rgb(0 0 0 / 0) 55%, rgb(70 50 25 / .18) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .045' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .26 0 0 0 0 .17 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23f)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.05 .85' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .98 0 0 0 0 .93 0 0 0 .32 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E"),
    repeating-linear-gradient(0deg, rgb(110 88 55 / .07) 0 1px, rgb(0 0 0 / 0) 1px 3px),
    repeating-linear-gradient(90deg, rgb(255 255 255 / .1) 0 1px, rgb(0 0 0 / 0) 1px 3px),
    var(--lin);
  box-shadow: 0 1px 0 rgb(255 255 255 / .35) inset, 0 22px 50px -18px rgb(40 28 14 / .45);
}
html.nuit .table {
  --lin: #4a4337;
  background:
    radial-gradient(ellipse 55% 45% at 50% 30%, rgb(255 214 150 / .26), rgb(255 214 150 / 0) 75%),
    radial-gradient(ellipse 120% 100% at 50% 50%, rgb(0 0 0 / 0) 40%, rgb(0 0 0 / .45) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .045' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .08 0 0 0 0 .05 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23f)'/%3E%3C/svg%3E"),
    repeating-linear-gradient(0deg, rgb(0 0 0 / .12) 0 1px, rgb(0 0 0 / 0) 1px 3px),
    repeating-linear-gradient(90deg, rgb(255 255 255 / .05) 0 1px, rgb(0 0 0 / 0) 1px 3px),
    var(--lin);
}
/* l'ourlet de la nappe : une piqûre à un doigt du bord */
.table::before { content: ''; position: absolute; inset: .7rem; border: 1.5px dashed rgb(110 88 55 / .32); border-radius: 2px; pointer-events: none; }
html.nuit .table::before { border-color: rgb(255 240 210 / .14); }
.table-pieces { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(12.6rem, 100%), 1fr)); grid-auto-flow: row dense; gap: clamp(2rem, 3vw, 3rem) clamp(1.3rem, 2.4vw, 2.4rem); align-items: start; }
.tirage { position: relative; display: grid; align-content: start; gap: .5rem; min-width: 0; }
.tirage[hidden] { display: none; }
.tirage--long { grid-row: span 2; align-self: center; }
.tirage-photo { position: relative; display: block; width: 100%; padding: .45rem; border: 0; cursor: pointer; background: var(--blanc); rotate: var(--r, 0deg);
  box-shadow: 0 1px 1px rgb(40 28 14 / .22), 0 6px 10px -2px rgb(40 28 14 / .22), 0 18px 28px -10px rgb(40 28 14 / .35);
  transition: rotate .5s cubic-bezier(.3, .7, .3, 1), translate .5s cubic-bezier(.3, .7, .3, 1), box-shadow .5s; }
.tirage-photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 25%; -webkit-user-drag: none; }
.tirage--long .tirage-photo img { aspect-ratio: 34 / 77; }
/* on soulève un tirage du bout des doigts : il quitte la nappe, son ombre s'élargit */
.tirage-photo:hover { rotate: calc(var(--r, 0deg) * .4); translate: 0 -4px; box-shadow: 0 2px 2px rgb(40 28 14 / .18), 0 12px 18px -4px rgb(40 28 14 / .24), 0 30px 40px -14px rgb(40 28 14 / .38); }
.tirage-photo:focus-visible { outline: 3px solid var(--cocotte); outline-offset: 4px; }
/* le prix : une petite étiquette posée en travers du coin du tirage */
.tirage-prix {
  position: absolute; right: -.6rem; bottom: 12%; z-index: 1; rotate: var(--rt, -6deg);
  display: inline-flex; align-items: center; min-height: 1.95rem; padding: .25rem .7rem .25rem 1.45rem;
  background: radial-gradient(circle at .78rem 50%, #0000 3px, var(--or-clair) 3.3px, var(--or) 4.4px, var(--or-fonce) 5.2px, #0000 5.5px), var(--papier);
  font: 800 1.08rem/1 var(--f-enseigne); color: var(--noir); white-space: nowrap; pointer-events: none;
  clip-path: polygon(.8rem 0, 100% 0, 100% 100%, .8rem 100%, 0 50%);
  -webkit-mask: radial-gradient(circle at .78rem 50%, #0000 2.8px, #000 3.4px);
          mask: radial-gradient(circle at .78rem 50%, #0000 2.8px, #000 3.4px);
  filter: drop-shadow(0 2px 2px rgb(40 28 14 / .3));
}
.tirage-prix .prix-mot { font-size: .78em; }
.tirage-texte { display: grid; gap: .2rem; padding: .35rem .15rem 0; }
.tirage-titre { margin: 0; font: 700 1.04rem/1.15 var(--f-enseigne); letter-spacing: 0; color: var(--noir); text-wrap: balance; }
.tirage-tailles { font: 600 .84rem/1.25 var(--f-texte); color: #4a4338; }
.tirage-cabine { --h: 2.2rem; justify-self: start; margin-top: .35rem; font-size: .9rem; }
.tirage-cabine.dedans { --fond-etiquette: var(--papier-or); }
html.nuit .tirage-titre { color: #f3eee5; }
html.nuit .tirage-tailles { color: #d6cfc3; }
/* à la pose, chaque tirage tombe sur la nappe et s'y couche */
.tirage.pose .tirage-photo { animation: pose .6s cubic-bezier(.25, .9, .35, 1) backwards; animation-delay: var(--d, 0s); }
@keyframes pose { 0% { translate: 0 -14px; scale: 1.05; rotate: calc(var(--r, 0deg) * 3); box-shadow: 0 30px 40px -10px rgb(40 28 14 / .3); } 70% { scale: .995; } 100% { translate: 0; scale: 1; } }
/* aucun résultat sur la table : la même étiquette, posée */
html.vue-table .vide { position: static; display: block; width: auto; height: auto; grid-area: scene; margin-top: 1.1rem; }
html.vue-table .vide[hidden] { display: none; }
html.vue-table .vide-fil { display: none; }
html.vue-table .vide-carton { position: relative; left: auto; top: auto; margin: 2.5rem auto; rotate: -1.5deg; animation: none; box-shadow: none; }

/* ------------------------------------------------------------ téléphone : le portant en pleine largeur, le carton des filtres descend */
@media (max-width: 760px) {
  .mode-scene { display: flex; flex-direction: column; padding: var(--entete) 16px 0; }
  html.vue-portant .mode-scene { touch-action: pan-y pinch-zoom; }
  .mode-outils { order: -1; justify-self: auto; justify-content: space-between; width: 100%; margin-top: .55rem; }
  .vue .filtre span { --h: 2.25rem; font-size: .94rem; }
  .bouton-filtrer .compte { margin-left: .1rem; }
  .bouton-filtrer .compte[hidden] { display: none; }
  .mode-titre { align-self: flex-start; margin-top: 1rem; font-size: 2.3rem; }
  .mode-scene .filtres { position: fixed; top: calc(var(--entete) + .4rem); z-index: 6; width: auto; max-height: calc(100svh - var(--entete) - 1.2rem); margin: 0; padding: 1.1rem 1rem 1.2rem; }
  .filtres-fermer { display: inline-block; margin: 0; font-size: .95rem; }
  .filtres-tete { gap: .6rem; }
  .filtres-tete .filtres-effacer { margin-left: auto; }
  .filtres-voir { display: inline-flex; justify-self: start; --h: 2.7rem; font-size: 1.04rem; }
  .filtres-groupe--tailles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  html.filtres-ouverts .mode-scene::after { z-index: 5; }
  /* l'étiquette de la pièce, et dessous les deux étiquettes qui poussent les cintres, aux bords de l'écran */
  .piece { --l: min(19rem, calc(100vw - 3rem)); --fil: .75rem; --trou: 1.02rem; }
  /* l'étiquette se lit sans lunettes : le nom, les tailles, « Taille à vérifier » à 16 px au moins, en encre franche */
  .piece-carton { padding: 1.9rem 1rem .85rem; gap: .16rem; clip-path: polygon(17% 0, 83% 0, 100% 1.85rem, 100% 100%, 0 100%, 0 1.85rem); }
  .piece-prix { font-size: 1.75rem; }
  .piece-prix.sans-prix { font-size: 1rem; }
  .piece-titre { font-size: 1.12rem; line-height: 1.12; }
  .piece-carton.sans-prix .piece-titre { font-size: 1.22rem; }
  .piece-tailles { font-size: 1rem; color: #2a2621; }
  .piece-cabine { --h: 2.45rem; margin-top: .35rem; font-size: 1rem; }
  .piece-pousser { --h: 2.4rem; top: calc(var(--bas, 12rem) + .55rem); font-size: .98rem; box-shadow: none; }
  .piece-pousser--avant { right: auto; left: calc(50vw * -1 + 16px); }
  .piece-pousser--apres { left: auto; right: calc(50vw * -1 + 16px); }
  .vide-carton { left: calc(50vw * -1 + 16px); width: calc(100vw - 32px); }
  /* la table : deux colonnes de tirages */
  .table { margin-top: .9rem; padding: 1.4rem 1rem 2rem; }
  .table-pieces { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 1rem; }
  .tirage-titre { font-size: 1.02rem; }
  .tirage-tailles { font-size: .96rem; color: #3a342b; }
  .tirage-cabine { --h: 2.25rem; padding: .32em .7em .32em calc(var(--pointe) + .8em); font-size: .9rem; line-height: 1.08; white-space: normal; text-align: left; }
  .tirage-prix { font-size: .98rem; right: -.35rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tirage.pose .tirage-photo, .piece-carton.accroche { animation: none; }
}