/* maison.html : l'étagère bleu canard qu'on descend planche par planche, le carton des filtres, la table.
   La scène 3D est le canvas #boutique, fixe, derrière tout (style.css) ; la page la cadre à droite de la colonne.
   Les mêmes étiquettes à œillet que partout : les filtres, la bascule, les idées cadeaux, l'étiquette du survol. */

/* ------------------------------------------------------------ la page : la colonne à gauche, la scène (ou la table) à droite */
.maison {
  display: grid;
  grid-template-columns: minmax(15.5rem, 18.5rem) minmax(0, 1fr);
  grid-template-areas: "colonne titre" "colonne aucun" "colonne table";
  grid-template-rows: auto auto 1fr;
  column-gap: clamp(1.2rem, 2.2vw, 2.4rem);
  align-items: start;
}
.maison-titre { grid-area: titre; margin: 1.1rem 0 .2rem; font-size: clamp(2.4rem, 4vw, 4rem); }
/* à l'étagère, le titre est peint sur la plaque émaillée du fronton : il reste ici pour les lecteurs d'écran */
html.vue-etagere:not(.statique) .maison-titre { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* la scène 3D se montre dès que le meuble est là (les photos arrivent ensuite, chacune se pose sur sa planche) ;
   avant elle, dès la première image, l'esquisse du meuble (un canvas 2D à sa place exacte, sous elle) */
html.page #boutique { opacity: 0; transition: opacity .25s ease-out; }
.esquisse { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: -2; pointer-events: none; }
html.vue-table .esquisse, html.statique .esquisse { display: none; }
html.page.scene-prete #boutique { opacity: 1; }
html.vue-table #boutique { visibility: hidden; }
/* la fiche ouverte : on voit encore l'étagère ; l'objet en main (fiche sans photo), sans voile : la boutique baisse sa lumière
   autour, l'objet reste sous son spot (maison.js) */
html.scene3d .fiche:not(.sans-photo)::backdrop { background: rgb(10 14 15 / .26); }
.fiche.sans-photo::backdrop { background: transparent; }

/* ------------------------------------------------------------ la colonne : la bascule, le carton des filtres, les idées cadeaux */
.maison-colonne {
  grid-area: colonne;
  position: sticky; top: calc(var(--entete) + .6rem); z-index: 31;
  display: grid; gap: .8rem; align-content: start;
  padding: .55rem 0 1rem;
}
.maison-bande { display: flex; align-items: center; gap: .6rem; }
.maison .filtres { width: 100%; gap: 1rem; padding: 1.15rem 1.15rem 1.25rem; }
.filtres-tete { flex-wrap: wrap; }
.filtres-ombre { margin: -.45rem 0 0; font-size: .88rem; line-height: 1.35; color: var(--texte-doux); }
html.nuit .filtres-ombre { color: #4a463f; }
/* 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 .maison .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);
}
.filtres-ombre::before { content: ''; display: inline-block; width: .75em; height: .75em; margin-right: .45em; border-radius: 50%; vertical-align: -.05em; background: radial-gradient(circle at 35% 35%, #9a948a, #4d4840); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .2); }
.filtres-voir { display: none; }
.filtres-groupe[data-groupe="budget"] .filtre span { min-width: 7.2rem; }

/* la bascule : deux étiquettes, celle de la vue en cours est d'or */
.bascule { display: inline-flex; gap: .35rem; }
.bascule button {
  --h: 2.35rem;
  position: relative; display: inline-flex; align-items: center; min-height: var(--h);
  padding: .3em .85em .3em calc(var(--h) * .42 + .72em);
  border: 0; cursor: pointer;
  background: var(--blanc); color: var(--noir);
  font: 700 1rem/1.1 var(--f-enseigne); white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgb(21 20 18 / .12);
  clip-path: polygon(calc(var(--h) * .42) 0, 100% 0, 100% 100%, calc(var(--h) * .42) 100%, 0 50%);
  -webkit-mask: radial-gradient(circle at calc(var(--h) * .41) 50%, #0000 3px, #000 3.6px);
          mask: radial-gradient(circle at calc(var(--h) * .41) 50%, #0000 3px, #000 3.6px);
  transform-origin: calc(var(--h) * .41) 50%;
}
.bascule button[aria-pressed="true"] { background: var(--papier-or); box-shadow: none; cursor: default; }
.bascule button:not([aria-pressed="true"]):hover { animation: balance 1s cubic-bezier(.25, .8, .35, 1); }
.bascule button:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--cocotte), inset 0 0 0 5px var(--noir); }
html.statique .bascule { display: none; }

/* un cadeau à faire : l'étiquette noire, bien en vue sous les filtres */
.cadeau { display: grid; justify-items: start; gap: .45rem; padding-top: .2rem; }
.cadeau > p { font: 800 1.3rem/1.05 var(--f-enseigne); }
/* trois objets de l'étagère en exemple, sous l'étiquette : de petits tirages à bord blanc, posés un peu de travers, et leur nom.
   On les soulève du bout des doigts, comme ceux de la table */
.exemples { display: grid; gap: .4rem; width: 100%; margin-top: .35rem; }
.exemples-titre { font: 500 .9rem/1.3 var(--f-texte); color: var(--texte-doux); }
.exemples-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.exemple {
  display: grid; gap: .32rem; justify-items: center; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; color: inherit; text-align: center;
  rotate: var(--r, 0deg); transition: rotate .35s cubic-bezier(.2, .8, .3, 1), translate .35s cubic-bezier(.2, .8, .3, 1);
}
.exemple .tirage { padding: .28rem; }
.exemple .tirage img { aspect-ratio: 4 / 3; object-position: 50% 50%; }
.exemple-nom { font: 700 .92rem/1.08 var(--f-enseigne); text-wrap: balance; }
.exemple:hover, .exemple:focus-visible { rotate: 0deg; translate: 0 -4px; }
.exemple:hover .tirage, .exemple:focus-visible .tirage { box-shadow: 0 2px 2px rgb(60 40 20 / .22), 0 12px 20px rgb(60 40 20 / .26); }
.exemple:focus-visible { outline: none; }
.exemple:focus-visible .tirage { outline: 3px solid var(--cocotte); outline-offset: 2px; }

/* ------------------------------------------------------------ l'étagère : la surface du geste, le rail des planches, l'étiquette du survol */
.etagere-geste { position: fixed; inset: var(--entete) 0 0 0; z-index: 2; touch-action: none; }
html.vue-table .etagere-geste, html.statique .etagere-geste { display: none; }
html.vue-etagere .page-scene { min-height: 100vh; min-height: 100svh; }

/* le rail : une tringle de laiton, une bague par planche ; la bague de la planche à l'écran est plus grosse */
.rail {
  position: fixed; z-index: 4;
  right: clamp(12px, 1.3vw, 26px); top: calc(var(--entete) + 26px); bottom: 26px; width: 26px;
  display: flex; flex-direction: column; justify-content: space-between; align-items: center;
}
.rail[hidden], html.vue-table .rail, html.statique .rail { display: none; }
.rail::before {
  content: ''; position: absolute; left: 50%; top: -8px; bottom: -8px; width: 4px; translate: -50% 0; border-radius: 3px;
  background: linear-gradient(90deg, #f3dca0, var(--or) 45%, var(--or-fonce)); box-shadow: 0 2px 6px rgb(0 0 0 / .35);
}
.rail::after {
  content: ''; position: absolute; left: 50%; top: -12px; bottom: -12px; width: 11px; translate: -50% 0; pointer-events: none;
  background: radial-gradient(circle at 5.5px 5.5px, var(--or-clair) 0 4px, var(--or-fonce) 5px, #0000 5.5px) top / 11px 11px no-repeat,
              radial-gradient(circle at 5.5px 5.5px, var(--or-clair) 0 4px, var(--or-fonce) 5px, #0000 5.5px) bottom / 11px 11px no-repeat;
}
.rail-arret { position: relative; z-index: 1; width: 26px; height: 26px; padding: 0; border: 0; background: none; cursor: pointer; }
.rail-arret::before {
  content: ''; position: absolute; inset: 8px; border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #f6e2ad, var(--or) 55%, var(--or-fonce));
  box-shadow: 0 1px 3px rgb(0 0 0 / .45);
  transition: inset .35s cubic-bezier(.2, .9, .3, 1.3), background .3s;
}
.rail-arret--univers::before { inset: 6px; }
.rail-arret.ici::before { inset: 1px; background: radial-gradient(circle, #0000 4px, #f6e2ad 4.5px, var(--or) 7px, var(--or-fonce) 11px, #0000 11.5px); box-shadow: none; filter: drop-shadow(0 2px 3px rgb(0 0 0 / .45)); }
.rail-arret.hors::before { opacity: .38; }
.rail-arret:focus-visible { outline: 3px solid var(--cocotte); outline-offset: 2px; border-radius: 50%; }
.rail-nom {
  --h: 2rem;
  position: absolute; right: calc(100% + 6px); top: 50%; translate: 0 -50%;
  display: inline-flex; align-items: center; min-height: var(--h); padding: .2em calc(var(--h) * .42 + .6em) .2em .8em;
  background: var(--papier); color: var(--noir); white-space: nowrap;
  font: 700 .92rem/1 var(--f-enseigne);
  clip-path: polygon(0 0, calc(100% - var(--h) * .42) 0, 100% 50%, calc(100% - var(--h) * .42) 100%, 0 100%);
  -webkit-mask: radial-gradient(circle at calc(100% - var(--h) * .41) 50%, #0000 2.6px, #000 3.2px);
          mask: radial-gradient(circle at calc(100% - var(--h) * .41) 50%, #0000 2.6px, #000 3.2px);
  filter: drop-shadow(0 3px 5px rgb(30 20 10 / .25));
  opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s linear .2s; pointer-events: none;
}
.rail-arret:hover .rail-nom, .rail-arret:focus-visible .rail-nom { opacity: 1; visibility: visible; transition: opacity .2s; }

/* l'étiquette de l'objet survolé : elle pend au coin du tirage, au bout de sa ficelle */
.survol { position: fixed; left: 0; top: 0; z-index: 5; margin: 0; pointer-events: none; visibility: hidden; }
.survol.vue { visibility: visible; }
.survol::before { content: ''; position: absolute; left: -.75px; top: 0; width: 1.5px; height: 1.6rem; background: #2b2722; }
html.nuit .survol::before { background: #e8dcc4; }
.survol-etiquette {
  --h: 2.6rem;
  position: absolute; left: calc(var(--h) * -.41); top: 1.05rem;
  display: grid; gap: .12rem; width: max-content; max-width: 16rem;
  padding: .5rem .9rem .55rem calc(var(--h) * .42 + .75rem);
  background:
    radial-gradient(circle at calc(var(--h) * .41) 1.3rem, #0000 3.4px, var(--or-clair) 3.8px, var(--or) 5.2px, var(--or-fonce) 6.2px, #0000 6.6px),
    var(--papier);
  color: var(--noir);
  font: 700 .98rem/1.15 var(--f-enseigne);
  clip-path: polygon(calc(var(--h) * .42) 0, 100% 0, 100% 100%, calc(var(--h) * .42) 100%, 0 1.3rem);
  filter: drop-shadow(0 4px 7px rgb(30 20 10 / .28));
  transform-origin: calc(var(--h) * .41) 1.3rem;
}
.survol.vue .survol-etiquette { animation: accroche .9s cubic-bezier(.2, .9, .3, 1); }
/* près du bord droit, l'étiquette s'ouvre vers la gauche : l'œillet passe à droite */
.survol.gauche .survol-etiquette {
  left: auto; right: calc(var(--h) * -.41);
  padding: .5rem calc(var(--h) * .42 + .75rem) .55rem .9rem;
  background:
    radial-gradient(circle at calc(100% - var(--h) * .41) 1.3rem, #0000 3.4px, var(--or-clair) 3.8px, var(--or) 5.2px, var(--or-fonce) 6.2px, #0000 6.6px),
    var(--papier);
  clip-path: polygon(0 0, calc(100% - var(--h) * .42) 0, 100% 1.3rem, calc(100% - var(--h) * .42) 100%, 0 100%);
  transform-origin: calc(100% - var(--h) * .41) 1.3rem;
  text-align: right; justify-items: end;
}
.survol b { font-size: 1.22rem; font-weight: 800; }
.survol b:empty { display: none; }

/* ------------------------------------------------------------ rien dans ce budget : un carton ivoire qui descend devant l'étagère */
.aucun { grid-area: aucun; justify-self: center; position: sticky; top: calc(var(--entete) + .4rem); z-index: 3; width: min(30rem, 100%); padding-top: 2.4rem; transform-origin: 50% 0; }
.aucun[hidden] { display: none; }
.aucun.descend { animation: descend 1.1s cubic-bezier(.2, .85, .25, 1) both; }
.aucun::before, .aucun::after { content: ''; position: absolute; top: 0; height: 2.6rem; width: 1.5px; background: #2b2722; }
.aucun::before { left: 22%; rotate: 9deg; transform-origin: 50% 0; }
.aucun::after { right: 22%; rotate: -9deg; transform-origin: 50% 0; }
html.nuit .aucun::before, html.nuit .aucun::after { background: #e8dcc4; }
.aucun-carton {
  position: relative; padding: 1.5rem 1.6rem 1.5rem;
  background: var(--papier); color: var(--noir);
  box-shadow: 0 14px 34px rgb(20 14 8 / .3);
}
.aucun-carton::before, .aucun-carton::after { content: ''; position: absolute; top: .55rem; width: 1rem; height: 1rem; border-radius: 50%; background: radial-gradient(circle, #0000 .3rem, var(--or-clair) .33rem, var(--or) .42rem, var(--or-fonce) .5rem, #0000 .52rem); }
.aucun-carton::before { left: calc(22% - .5rem); }
.aucun-carton::after { right: calc(22% - .5rem); }
.aucun-titre { font: 800 clamp(1.5rem, 2.2vw, 2rem)/1.05 var(--f-enseigne); text-wrap: balance; }
.aucun-texte { margin-top: .55rem; font-size: 1rem; text-wrap: pretty; }
.aucun .actions { margin-top: 1rem; }

/* ------------------------------------------------------------ sur la table : les objets à plat sur la nappe de lin de la boutique, vus de dessus */
.table {
  grid-area: table;
  position: relative; isolation: isolate;
  margin: .6rem 0 3rem;
  padding: clamp(1.4rem, 2.6vw, 2.6rem) clamp(1.1rem, 2.8vw, 3rem) clamp(2rem, 3vw, 3rem);
  color: var(--noir);
  background:
    repeating-linear-gradient(0deg, rgb(255 255 255 / .07) 0 1px, #0000 1px 3px),
    repeating-linear-gradient(90deg, rgb(110 86 52 / .07) 0 1px, #0000 1px 3px),
    repeating-linear-gradient(90deg, rgb(255 255 255 / .05) 0 2px, #0000 2px 7px),
    radial-gradient(ellipse 80% 70% at 35% 25%, #ede2ce, #dccdb2 60%, #cdbc9f 100%);
  box-shadow: 0 18px 40px rgb(40 28 14 / .22), inset 0 0 0 1px rgb(110 86 52 / .12);
}
/* l'ourlet de la nappe, cousu main */
.table::after { content: ''; position: absolute; inset: .8rem; border: 1.5px dashed rgb(110 86 52 / .32); pointer-events: none; z-index: -1; }
/* à l'étagère, la table reste dans la page pour les lecteurs d'écran (et elle s'ouvre si le clavier y entre) */
html.vue-etagere:not(.statique) .table { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.table.posee .table-univers { animation: pose .7s cubic-bezier(.2, .8, .3, 1) both; }
.table.posee .table-univers:nth-of-type(2) { animation-delay: .06s; }
.table.posee .table-univers:nth-of-type(3) { animation-delay: .12s; }
.table.posee .table-univers:nth-of-type(n + 4) { animation-delay: .18s; }
@keyframes pose { 0% { opacity: 0; transform: translateY(-10px) scale(1.015); } 100% { opacity: 1; transform: none; } }

.table-tete { display: none; font: 800 1.5rem/1 var(--f-enseigne); margin: 0 0 1.2rem; }
.table-univers { margin-top: 2.2rem; }
.table-univers[hidden] { display: none; }
.table-tete + .table-univers { margin-top: 0; }
/* le petit carton d'or de l'univers (le même que sur l'étagère), couché sur la nappe */
.table-carton {
  display: inline-block; margin: 0 0 1.15rem; padding: .6rem 1.15rem .55rem;
  background: var(--papier-or); color: #16120d;
  font: 800 clamp(1.3rem, 1.7vw, 1.6rem)/1 var(--f-enseigne); letter-spacing: -.005em;
  rotate: var(--r, 0deg);
  box-shadow: 0 1px 1px rgb(60 40 20 / .25), 0 5px 12px rgb(60 40 20 / .18);
}

.table-objets { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(10.6rem, 1fr)); gap: 1.7rem 1.4rem; align-items: start; }
.objet { position: relative; }
.objet[hidden] { display: none; }
.objet button {
  position: relative; display: grid; gap: .5rem; justify-items: start; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; color: inherit;
  rotate: var(--r, 0deg); translate: 0 var(--dy, 0px);
  transition: rotate .35s cubic-bezier(.2, .8, .3, 1), translate .35s cubic-bezier(.2, .8, .3, 1);
}
.tirage { display: block; width: 100%; padding: .42rem; background: var(--blanc); box-shadow: 0 1px 1px rgb(60 40 20 / .3), 0 5px 12px rgb(60 40 20 / .2); transition: box-shadow .35s; }
.tirage img { width: 100%; height: auto; aspect-ratio: var(--a, 3 / 4); object-fit: cover; object-position: 50% 42%; }
.objet-titre { font: 700 1.02rem/1.18 var(--f-enseigne); text-wrap: balance; }
.objet-prix { position: relative; padding-left: 1.45rem; font: 800 1.2rem/1 var(--f-enseigne); }
.objet-prix::before {
  content: ''; position: absolute; left: 0; top: .22em; width: 1.05rem; height: .62rem; background: var(--or);
  clip-path: polygon(32% 0, 100% 0, 100% 100%, 32% 100%, 0 50%);
  -webkit-mask: radial-gradient(circle at 34% 50%, #0000 1.6px, #000 2.2px);
          mask: radial-gradient(circle at 34% 50%, #0000 1.6px, #000 2.2px);
}
.objet button:hover, .objet button:focus-visible { rotate: 0deg; translate: 0 -5px; }
.objet button:hover .tirage, .objet button:focus-visible .tirage { box-shadow: 0 2px 2px rgb(60 40 20 / .22), 0 16px 26px rgb(60 40 20 / .26); }
.objet button:focus-visible { outline: none; }
.objet button:focus-visible .tirage { outline: 3px solid var(--cocotte); outline-offset: 3px; }
/* mise de côté dans ma cabine : une petite étiquette d'or épinglée au tirage */
.objet-cabine {
  position: absolute; left: -.4rem; top: .9rem; display: none;
  padding: .2rem .55rem .2rem 1rem; background: var(--or-clair); color: var(--noir); font: 600 .74rem/1.25 var(--f-texte);
  clip-path: polygon(.55rem 0, 100% 0, 100% 100%, .55rem 100%, 0 50%);
  -webkit-mask: radial-gradient(circle at .62rem 50%, #0000 1.5px, #000 2.1px);
          mask: radial-gradient(circle at .62rem 50%, #0000 1.5px, #000 2.1px);
  box-shadow: 0 2px 4px rgb(0 0 0 / .2);
}
.objet.en-cabine .objet-cabine { display: block; }

/* le budget, sur la table aussi : les objets du budget restent sous la lampe, ceux sans prix à mi-ombre, les autres dans l'ombre */
.objet .tirage, .objet-titre, .objet-prix { transition: filter .6s ease, opacity .6s ease; }
.objet.mi-ombre .tirage { filter: brightness(.66) saturate(.85); }
.objet.mi-ombre .objet-titre { opacity: .62; }
.objet.ombre .tirage { filter: brightness(.36) saturate(.5); }
.objet.ombre .objet-titre, .objet.ombre .objet-prix { opacity: .45; }
.objet.lumiere::before {
  content: ''; position: absolute; inset: -28% -30% -18%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgb(255 226 172 / .7), rgb(255 214 150 / .28) 55%, rgb(255 214 150 / 0));
  animation: spot .5s steps(1) both;
}
@keyframes spot { 0% { opacity: 0; } 15% { opacity: .8; } 25% { opacity: .1; } 45% { opacity: .9; } 60% { opacity: .35; } 80%, 100% { opacity: 1; } }

/* la nuit, la table est éclairée par la seule lampe qui reste allumée au-dessus */
html.nuit .table { box-shadow: 0 18px 40px rgb(0 0 0 / .5), inset 0 0 0 1px rgb(110 86 52 / .12); }
html.nuit .table::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 75% 60% at 50% 30%, rgb(16 12 8 / 0), rgb(16 12 8 / .38)); }

/* ------------------------------------------------------------ sans 3D : la table, d'emblée */
html.statique .maison-titre { position: static; }
html.statique .page-scene { padding-bottom: 0; }

/* ------------------------------------------------------------ fenêtre basse : la colonne se resserre pour tenir dans l'écran */
@media (min-width: 761px) and (max-height: 860px) {
  .maison-colonne { gap: .6rem; padding-top: .35rem; }
  .maison .filtres { gap: .75rem; padding: .95rem 1rem 1rem; }
  .maison .filtre span { --h: 1.95rem; font-size: .9rem; }
  .maison .filtres-groupe { gap: .36rem .34rem; }
  .maison .filtres-groupe legend { margin-bottom: .3rem; }
  .bascule button { --h: 2.15rem; font-size: .94rem; }
  .cadeau > p { font-size: 1.12rem; }
  .cadeau .etiquette { --h: 2.7rem; font-size: 1.04rem; }
  .exemples { gap: .3rem; margin-top: .15rem; }
  .exemples-titre { font-size: .84rem; }
  .exemple .tirage img { aspect-ratio: 3 / 2; }
  .exemple-nom { font-size: .86rem; }
}
/* plus bas encore (1280 × 720) : le carton et les exemples se resserrent, la colonne tient toujours dans l'écran */
@media (min-width: 761px) and (max-height: 760px) {
  .maison-colonne { gap: .45rem; padding-top: .25rem; }
  .maison .filtres { gap: .55rem; padding: .8rem .95rem .85rem; }
  .maison .filtre span { --h: 1.8rem; }
  .maison .filtres-groupe { gap: .3rem .3rem; }
  .bascule button { --h: 2rem; }
  .cadeau { gap: .35rem; }
  .cadeau > p { font-size: 1.02rem; }
  .cadeau .etiquette { --h: 2.45rem; }
  .exemple .tirage img { aspect-ratio: 2 / 1; }
  .exemple-nom { font-size: .82rem; }
}

/* ------------------------------------------------------------ téléphone : une bande sous l'en-tête, le carton qui descend, la bande des cadeaux en bas */
@media (max-width: 760px) {
  .maison { display: block; }
  .maison-colonne { position: static; display: block; padding: 0; }
  .maison-bande {
    position: fixed; z-index: 31; left: 0; right: 0; top: var(--entete);
    justify-content: space-between; padding: .25rem 16px .35rem;
    background: linear-gradient(rgb(var(--voile) / .92), rgb(var(--voile) / .78) 70%, rgb(var(--voile) / 0));
  }
  .bouton-filtrer { --h: 2.45rem; font-size: 1rem; padding-right: 1em; }
  .bascule button { --h: 2.25rem; font-size: .92rem; padding-right: .7em; padding-left: calc(var(--h) * .42 + .6em); }
  .maison .filtres { position: fixed; width: auto; top: calc(var(--entete) + 3.4rem); padding-bottom: 1.1rem; }
  .filtres-voir { display: inline-flex; justify-self: start; }
  /* les idées cadeaux : une bande au pied de l'écran, comme celle des filtres en haut ; l'étagère se cadre entre les deux */
  .cadeau {
    position: fixed; z-index: 6; left: 0; right: 0; bottom: 0; padding: 1.2rem 16px calc(12px + env(safe-area-inset-bottom));
    background: linear-gradient(rgb(var(--voile) / 0), rgb(var(--voile) / .84) 42%, rgb(var(--voile) / .95));
    grid-template-columns: auto minmax(0, 1fr); align-items: end; column-gap: .7rem;
  }
  .cadeau > p { display: none; }
  .cadeau .etiquette { --h: 2.6rem; font-size: 1rem; box-shadow: none; filter: drop-shadow(0 4px 8px rgb(0 0 0 / .3)); }
  /* les exemples, à droite de l'étiquette, à sa hauteur (la bande ne grandit pas) : trois petits tirages, « Ce mois-ci, par exemple : »
     au-dessus d'eux ; leur nom, dans la fiche qu'ils ouvrent (et pour les lecteurs d'écran) */
  .exemples { position: relative; justify-self: end; width: auto; margin: 0; }
  .exemples-titre {
    position: absolute; right: 0; bottom: calc(100% + .35rem); white-space: nowrap;
    padding: .12rem .5rem .1rem; background: var(--papier); color: var(--noir); font-size: .8rem; font-weight: 600;
    box-shadow: 0 2px 6px rgb(30 20 10 / .22);   /* un petit carton au-dessus des tirages : il se lit sur l'étagère */
  }
  .exemples-liste { grid-template-columns: repeat(3, 2.7rem); gap: .4rem; }
  .exemple .tirage { padding: .14rem; box-shadow: 0 1px 1px rgb(60 40 20 / .3), 0 3px 8px rgb(30 20 10 / .3); }
  .exemple .tirage img { aspect-ratio: 1; }
  .exemple-nom { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* sur la table (et sans 3D), la bande rentre dans la page : les exemples comme sur ordinateur, leur nom dessous */
  html.vue-table .cadeau, html.statique .cadeau { position: static; padding: 0 16px 2rem; background: none; grid-template-columns: minmax(0, 1fr); }
  html.vue-table .cadeau > p, html.statique .cadeau > p { display: block; }
  html:is(.vue-table, .statique) .exemples { position: static; justify-self: stretch; width: 100%; max-width: 24rem; margin-top: .35rem; }
  html:is(.vue-table, .statique) .exemples-titre { position: static; white-space: normal; padding: 0; background: none; box-shadow: none; color: var(--texte-doux); font-size: .9rem; font-weight: 500; }
  html:is(.vue-table, .statique) .exemples-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
  html:is(.vue-table, .statique) .exemple .tirage { padding: .26rem; }
  html:is(.vue-table, .statique) .exemple .tirage img { aspect-ratio: 4 / 3; }
  html:is(.vue-table, .statique) .exemple-nom { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; }
  .rail { display: none; }
  .survol { display: none; }
  .maison-titre { margin: 3.7rem 0 .5rem; font-size: 2.3rem; }
  .table-tete { display: block; }
  .aucun { position: fixed; left: 16px; right: 16px; width: auto; top: calc(var(--entete) + 3rem); }
  html.vue-table .aucun, html.statique .aucun { position: relative; left: auto; right: auto; top: auto; margin: 0 0 1rem; }
  .table { margin: .4rem -16px 1.5rem; padding: 1.3rem 16px 2rem; }
  .table::after { inset: .5rem; }
  .table-objets { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem .9rem; }
  .objet-titre { font-size: .95rem; }
  .page-scene { padding-left: 16px; padding-right: 16px; }
}