/* facade.css — L'Hellébore, la façade qui s'ouvre (V339, conversation 61). Placée comme la carte d'Easter road trip :
   dans l'en-tête, sous l'introduction, à la même largeur (choix d'Anne, 19 octobre 2026). Le dessin est un SVG écrit
   dans la page (il doit se cliquer) ; il se fabrique avec contexte/outils-albums/v341/facade.py. */
/* V341 (Anne, 20 octobre, la variante « D ») : le dessin est une PIÈCE de l'album, posé sur un carton ivoire avec les
   coins des photos, une ombre et une légère inclinaison, à la largeur de la grille des photos (et non plus de
   l'introduction) ; un rien plus contrasté et plus saturé (contrast 1.1, saturate 1.08) — les teintes ne bougent pas, le
   turquoise de la piscine et des volets répond mieux à celui de la vitrine. Un cadre doré a été envisagé par Anne puis
   écarté : trop différent des cartons de la vitrine et du diaporama, juste au-dessus et juste en dessous. */
.facade { margin:22px auto 26px; max-width:820px; position:relative; --pad:18px; }
.facade-feuille { position:relative; background:#FFFDF8; padding:var(--pad); border:1px solid #ded0b4; border-radius:2px;
  box-shadow:0 6px 16px rgba(58,46,36,0.22); transform:rotate(-0.5deg); }
.facade-feuille .cn { position:absolute; width:0; height:0; opacity:0.92; z-index:2; pointer-events:none; }
.facade-feuille .cn.tl { top:7px; left:7px; border-top:16px solid #c9b896; border-right:16px solid transparent; }
.facade-feuille .cn.tr { top:7px; right:7px; border-top:16px solid #c9b896; border-left:16px solid transparent; }
.facade-feuille .cn.bl { bottom:7px; left:7px; border-bottom:16px solid #c9b896; border-right:16px solid transparent; }
.facade-feuille .cn.br { bottom:7px; right:7px; border-bottom:16px solid #c9b896; border-left:16px solid transparent; }
.facade-svg { display:block; width:100%; height:auto; filter:contrast(1.1) saturate(1.08); }
@media (max-width:620px) {
  .facade { --pad:8px; margin-left:-4px; margin-right:-4px; }
  .facade-feuille { transform:rotate(-0.4deg); }
  .facade-feuille .cn.tl, .facade-feuille .cn.tr { top:2px; } .facade-feuille .cn.bl, .facade-feuille .cn.br { bottom:2px; }
  .facade-feuille .cn.tl, .facade-feuille .cn.bl { left:2px; } .facade-feuille .cn.tr, .facade-feuille .cn.br { right:2px; }
  .facade-feuille .cn { border-width:11px !important; }
}
/* V341 : LA NUIT (Anne : « activer jour/nuit à la demande, comme le ciel de la fresque ; un soleil, une lune cliquables »).
   La couche .nuit du dessin (fabriquée par facade.py) apparaît en fondu ; le soleil ou la lune, posé dans le ciel du
   dessin, la fait tomber ou se lever. Au chargement : la nuit de 20 h à 6 h à l'heure du visiteur, comme la fresque. */
.facade-svg .nuit { opacity:0; visibility:hidden; transition:opacity 1.4s ease, visibility 0s linear 1.4s; }
.facade.de-nuit .facade-svg .nuit { opacity:1; visibility:visible; transition:opacity 1.4s ease; }
/* L'ÉTOILE FILANTE (Anne, 9 h 12 : « une étoile filante n'apparaît que très brièvement ») : elle ne reste plus posée dans
   le ciel. Elle file, à peine plus d'une seconde, un peu avant que la nuit noire soit tout à fait tombée, puis repasse
   toutes les trente secondes tant qu'il fait nuit. Sur les fonds d'écran, image fixe, elle reste posée. */
.facade-svg .filante { opacity:0; }
@keyframes filante { 0% { opacity:0; transform:translate(46px, -22px); } 1.2% { opacity:1; } 3.6% { opacity:1; } 4.4% { opacity:0; transform:translate(-34px, 16px); } 100% { opacity:0; transform:translate(-34px, 16px); } }
.facade.de-nuit .facade-svg .filante { animation:filante 30s linear 3.2s infinite; }
@media (prefers-reduced-motion:reduce) { .facade.de-nuit .facade-svg .filante { animation:none; opacity:1; } }
/* 19e jet (Anne, 11 h 53) : une nuit CLAIRE, sans nuages (l'étoile filante ne passe plus devant un nuage).
   20e jet (Anne, 12 h 02) : pas de tour de magie — le VENT D'OUEST les chasse. Quand la nuit tombe, ils glissent vers la
   droite en s'effaçant ; quand le jour se lève, ils reviennent par la gauche et poursuivent vers la droite jusqu'à leur
   place. Toujours vers la droite, à l'inverse de la course du soleil. */
.facade.de-nuit .facade-svg .nuage { opacity:0; }
@keyframes nuages-partent { 0%, 20% { transform:none; opacity:.85; } 100% { transform:translate(170px, 0); opacity:0; } }
@keyframes nuages-reviennent { 0%, 25% { transform:translate(-170px, 0); opacity:0; } 100% { transform:none; opacity:.85; } }
.facade.va-nuit .facade-svg .nuage { animation:nuages-partent 4.2s ease-in both; }
.facade.va-jour .facade-svg .nuage { animation:nuages-reviennent 4.2s ease-out both; }
@media (prefers-reduced-motion:reduce) { .facade.va-nuit .facade-svg .nuage, .facade.va-jour .facade-svg .nuage { animation:none; } }
/* V342 (Anne, 14 h 57) : LES ÉTOILES ARRIVENT AUSSI EN MOUVEMENT — elles glissent un peu, d'est en ouest (de droite à
   gauche, comme la course des astres), en s'allumant chacune à son heure (délai écrit dans le dessin) ; le matin elles
   poursuivent leur chemin vers la gauche en s'effaçant. */
@keyframes etoiles-arrivent { 0%, 40% { transform:translate(16px, 5px); opacity:0; } 100% { transform:none; } }
@keyframes etoiles-partent { 0% { transform:none; } 70%, 100% { transform:translate(-16px, -5px); opacity:0; } }
.facade.va-nuit .facade-svg .etoile { animation:etoiles-arrivent 4.2s ease-out both; }
.facade.va-jour .facade-svg .etoile { animation:etoiles-partent 3.4s ease-in both; animation-delay:0s !important; }
@media (prefers-reduced-motion:reduce) { .facade-svg .etoile { animation:none !important; } }
/* Le voile de la nuit (16e jet) : hors du groupe .nuit, pour que sa multiplication reste vraie pendant le fondu ; il suit
   exactement le même rythme que le groupe. */
.facade-svg .voile-nuit { opacity:0; transition:opacity 1.4s ease; }
.facade.de-nuit .facade-svg .voile-nuit { opacity:0.86; }
/* V341, 7e jet (Anne, 7 h 31) : LE PASSAGE. Au clic (et seulement au clic : au chargement, on arrive directement de jour
   ou de nuit), la façade traverse le crépuscule pour aller à la nuit (.va-nuit), l'aube pour revenir au jour (.va-jour) :
   les couches .soir et .aube du dessin montent puis s'effacent pendant que la nuit arrive ou s'en va ; le soleil se
   couche vers la gauche, la lune se lève, et l'inverse. Environ 4 s. Sans animation pour qui l'a demandé au système. */
.facade-svg .aube, .facade-svg .soir { opacity:0; }
@keyframes passage { 0% { opacity:0; } 38% { opacity:1; } 52% { opacity:1; } 100% { opacity:0; } }
.facade.va-nuit .facade-svg .soir, .facade.va-jour .facade-svg .aube { animation:passage 4.2s ease-in-out both; }

.facade.va-nuit.de-nuit .facade-svg .nuit { transition:opacity 2.8s ease-in 1.3s; }
.facade.va-nuit.de-nuit .facade-svg .voile-nuit { transition:opacity 2.8s ease-in 1.3s; }
.facade.va-jour .facade-svg .nuit { transition:opacity 2.6s ease-out .2s, visibility 0s linear 2.8s; }
.facade.va-jour .facade-svg .voile-nuit { transition:opacity 2.6s ease-out .2s; }
/* La course des astres (Anne, 7 h 38) : la façade regarde le sud, l'est est donc À DROITE. Le soleil comme la lune se
   lèvent à droite et se couchent à gauche, d'un mouvement continu : l'astre qui part glisse vers la gauche et descend en
   s'effaçant ; celui qui vient monte depuis la droite, déjà en route avant d'apparaître.
   8e jet (Anne, 7 h 43) : les astres visibles sont DANS LE DESSIN (groupe .course de facade.py), masqués par le grand
   arbre et le toit : ils se couchent derrière l'arbre, se lèvent derrière le toit. Le bouton, au-dessus, reste invisible
   (on le clique, il porte la bulle). Unités : celles du dessin (1200 × 720). */
.facade-astre svg { visibility:hidden; }
.facade-svg .c-lune { opacity:0; } .facade.de-nuit .facade-svg .c-soleil { opacity:0; } .facade.de-nuit .facade-svg .c-lune { opacity:1; }
.facade-svg .c-taille, .facade-svg .c-pivot { transform-origin:450px 86px; }
.facade-svg .c-pivot { transition:transform .5s ease; }
@media (hover:hover) { .facade:has(.facade-astre:hover) .facade-svg .c-pivot { transform:rotate(12deg) scale(1.08); } }
@media (max-width:620px) { .facade-svg .c-taille { transform:translate(0, 8px) scale(.84); } }   /* plus petit au téléphone (Anne) */
@keyframes astre-se-couche { from { transform:none; opacity:1; } to { transform:translate(-132px, 84px); opacity:0; } }
@keyframes astre-se-leve { 0% { transform:translate(132px, 84px); opacity:0; } 46% { opacity:0; } 100% { transform:none; opacity:1; } }
.facade.va-nuit .facade-svg .c-soleil, .facade.va-jour .facade-svg .c-lune { animation:astre-se-couche 2.4s ease-in forwards; }
.facade.va-nuit .facade-svg .c-lune, .facade.va-jour .facade-svg .c-soleil { animation:astre-se-leve 4.2s ease-out both; }
/* 13e jet (Anne, 8 h 31) : le soleil fait TOUTE sa course, d'un seul mouvement. Le soir, il descend vers la gauche, passe
   derrière la couronne du grand arbre (le masque le cache), reparaît dessous, rougeoie et se couche. Le matin, il sort de
   derrière le toit, à droite de la cheminée, et monte à sa place. Jamais deux soleils. */
/* V341 (Anne, 14 h 46) : le soleil marquait un temps d'arret a moitie derriere l'arbre — chaque etape d'une animation a
   plusieurs etapes ralentissait puis repartait (ease-in-out PAR SEGMENT). Desormais une courbe lissee, echantillonnee en
   24 points, vitesse reglee d'un seul tenant (douce au depart et a l'arrivee) et animation lineaire entre les points. */
@keyframes soleil-se-couche { 0.00% { transform:translate(0.0px, 0.0px); opacity:1; } 4.17% { transform:translate(-1.5px, 0.5px); } 8.33% { transform:translate(-6.0px, 2.0px); } 12.50% { transform:translate(-13.4px, 4.4px); } 16.67% { transform:translate(-23.6px, 7.6px); } 20.83% { transform:translate(-36.4px, 11.6px); } 25.00% { transform:translate(-51.6px, 16.3px); } 29.17% { transform:translate(-68.9px, 22.0px); } 33.33% { transform:translate(-87.8px, 28.9px); } 37.50% { transform:translate(-107.7px, 37.5px); } 41.67% { transform:translate(-128.3px, 47.5px); } 45.83% { transform:translate(-149.2px, 58.8px); } 50.00% { transform:translate(-169.9px, 71.1px); } 54.17% { transform:translate(-190.2px, 84.2px); } 58.33% { transform:translate(-209.8px, 97.6px); } 62.50% { transform:translate(-228.2px, 111.2px); } 66.67% { transform:translate(-245.2px, 124.7px); } 70.83% { transform:translate(-260.2px, 138.1px); } 75.00% { transform:translate(-272.6px, 151.4px); } 79.17% { transform:translate(-281.2px, 164.8px); } 83.33% { transform:translate(-286.6px, 177.1px); opacity:0.83; } 87.50% { transform:translate(-290.3px, 187.1px); opacity:0.63; } 91.67% { transform:translate(-293.3px, 194.3px); opacity:0.42; } 95.83% { transform:translate(-295.3px, 198.6px); opacity:0.21; } 100.00% { transform:translate(-296.0px, 200.0px); opacity:0.00; } }
@keyframes soleil-se-leve { 0% { transform:translate(310px, 118px); } 45% { transform:translate(180px, 52px); } 100% { transform:none; } }
.facade.va-nuit .facade-svg .c-soleil { animation:soleil-se-couche 4.2s linear forwards; }
/* 14e jet (Anne, 8 h 39) : caché par la couronne, le soleil s'éteint ; il ressort dessous en simple LUEUR orangée, sans
   rayons, plus douce qu'avant d'entrer, et va en mourant. */
@keyframes soleil-net-part { 0%, 52% { opacity:1; } 62%, 100% { opacity:0; } }
@keyframes soleil-lueur-vient { 0%, 55% { opacity:0; } 68% { opacity:0.55; } 80% { opacity:0.6; } 97%, 100% { opacity:0; } }   /* elle meurt avant la nuit noire : sinon, la nuit tombée, elle brillait comme une lampe */
.facade.va-nuit .facade-svg .c-soleil .c-net { animation:soleil-net-part 4.2s linear forwards; }
.facade.va-nuit .facade-svg .c-soleil .c-lueur { animation:soleil-lueur-vient 4.2s linear forwards; }
/* 15e jet (Anne, 8 h 49) : de même le matin. Sur le ciel encore sombre, le soleil net qui sortait du toit paraissait blanc
   et plus découpé qu'à midi : il se lève donc en LUEUR, et ne retrouve son disque et ses rayons qu'en montant. */
@keyframes soleil-net-vient { 0%, 42% { opacity:0; } 78%, 100% { opacity:1; } }
@keyframes soleil-lueur-part { 0%, 42% { opacity:0.6; } 78%, 100% { opacity:0; } }
.facade.va-jour .facade-svg .c-soleil .c-net { animation:soleil-net-vient 4.2s linear both; }
.facade.va-jour .facade-svg .c-soleil .c-lueur { animation:soleil-lueur-part 4.2s linear both; }
.facade.va-jour .facade-svg .c-soleil { opacity:1; animation:soleil-se-leve 4.2s ease-out both; }
@media (prefers-reduced-motion:reduce) { .facade.va-nuit .facade-svg .soir, .facade.va-jour .facade-svg .aube,
  .facade.va-nuit .facade-svg .course *, .facade.va-jour .facade-svg .course * { animation:none !important; } }
.facade-astre { position:absolute; z-index:3; left:calc(var(--pad) + (100% - 2 * var(--pad)) * 0.375);   /* V341 (Anne) : entre les fenêtres 6 et 7, plus près de la 7, au-dessus du petit nuage */
  top:calc(var(--pad) + (100% - 2 * var(--pad)) * 0.072); width:7%; min-width:30px; aspect-ratio:1;
  transform:translate(-50%, -50%); padding:0; border:none; background:none; cursor:pointer; }
.facade-astre svg { display:block; width:100%; height:100%; overflow:visible; transition:transform .5s ease; }
/* V341, cinquième jet (Anne) : sur téléphone le soleil était bien plus gros, en proportion, que sur l'ordinateur (le
   min-width de 30px) et son rayon du haut mordait le carton : le bouton garde sa taille (le doigt), le dessin rétrécit
   et descend un peu, sans toucher le petit nuage. */
@media (max-width:620px) { .facade-astre svg { transform:translateY(8%) scale(.74); } }
@media (hover:hover) { .facade-astre:hover svg { transform:rotate(12deg) scale(1.08); } }
.facade-astre:focus-visible { outline:2px dashed rgba(143,108,136,0.75); outline-offset:3px; border-radius:50%; }
.facade-astre .lune { display:none; } .de-nuit .facade-astre .soleil { display:none; } .de-nuit .facade-astre .lune { display:inline; }
.facade .porte { cursor:pointer; outline:none; }
.facade .porte rect { fill:transparent; stroke:transparent; stroke-width:3; transition:fill .25s, stroke .25s; }
/* V341 : la prise, plus grande que la fenêtre (volets compris), reçoit le doigt ; elle ne se dessine jamais */
.facade .porte rect.prise { fill:transparent; stroke:none; }
.facade .porte.allumee rect:not(.prise), .facade .porte:focus-visible rect:not(.prise) { fill:rgba(143,108,136,0.16); stroke:rgba(143,108,136,0.75); stroke-dasharray:6 4; }
.facade-mot { position:absolute; pointer-events:none; transform:translate(-50%,-100%) rotate(-2deg); z-index:3;
  background:#F6EEDC; border:1px solid #d8c9ae; padding:2px 12px 3px; border-radius:2px;
  font-family:'Caveat', cursive; font-weight:600; font-size:22px; color:#6b553a; white-space:nowrap;
  box-shadow:0 4px 10px rgba(58,46,36,0.2); opacity:0; transition:opacity .2s; }
.facade-mot.vu { opacity:1; }
.facade-legende { text-align:center; font-family:'Caveat', cursive; font-weight:600; font-size:20px; color:#8a7550; margin:8px 0 0; }
.facade-legende .ensemble { white-space:nowrap; }
@media (max-width:460px) {
  .facade-mot { font-size:19px; } .facade-legende { font-size:18px; }
}
/* V340 : la fenêtre-mosaïque (idée d'Anne) : un papier posé sur la page, toutes les photos de la pièce d'un coup ;
   un clic en agrandit une dans le même papier. Ni page nouvelle, ni feuillet voisin. */
html.ff-ouverte { overflow:hidden; }
.facade-fenetre { position:fixed; inset:0; z-index:100001; display:flex; align-items:center; justify-content:center;
  background:rgba(58,46,36,0.38); padding:14px; }
.facade-fenetre[hidden], .facade-fenetre [hidden] { display:none; }
.ff-carte { position:relative; width:min(900px, 100%); max-height:calc(100vh - 28px); overflow:auto;
  background:#F6EEDC; border:1px solid #d8c9ae; border-radius:3px; padding:14px 22px 22px;
  box-shadow:0 18px 40px rgba(58,46,36,0.35); transform:rotate(-0.4deg); }
.ff-titre { margin:0 0 10px; text-align:center; font-family:'Caveat', cursive; font-weight:600; font-size:30px; color:#8F6C88; }
.ff-fermer { position:absolute; top:4px; right:10px; background:none; border:none; cursor:pointer;
  font-size:30px; line-height:1; color:#9b8763; padding:2px 6px; }
.ff-fermer:hover, .ff-fermer:focus-visible { color:#3A2E24; outline:none; }
.ff-mosaique { --h:clamp(96px, 17vw, 168px); display:flex; flex-wrap:wrap; justify-content:center; gap:14px 16px; padding:4px 4px 8px; }
.ff-photo { height:var(--h); aspect-ratio:3 / 2; padding:5px; background:#FFFDF8; border:none; cursor:zoom-in;
  box-shadow:0 3px 9px rgba(58,46,36,0.25); transition:transform .2s; }
.ff-photo.debout { aspect-ratio:2 / 3; }
.ff-photo img { display:block; width:100%; height:100%; object-fit:cover; }
.ff-photo:nth-child(4n+1) { transform:rotate(-1.6deg); }
.ff-photo:nth-child(4n+2) { transform:rotate(1.1deg) translateY(6px); }
.ff-photo:nth-child(4n+3) { transform:rotate(-0.6deg) translateY(-3px); }
.ff-photo:nth-child(4n+4) { transform:rotate(1.7deg) translateY(4px); }
.ff-photo:hover, .ff-photo:focus-visible { transform:rotate(0) scale(1.04); outline:none; z-index:1; }
/* la vue du toit : les deux panoramas, l'un sous l'autre, en grand */
.ff-panos .ff-mosaique { flex-direction:column; align-items:center; gap:16px; }
.ff-panos .ff-photo { height:auto; aspect-ratio:auto; width:100%; transform:none; }
.ff-panos .ff-photo img { height:auto; }
.ff-panos .ff-photo:nth-child(2) { transform:rotate(0.4deg); }
/* une photo agrandie, dans le même papier */
.ff-grand { position:relative; text-align:center; }
.ff-grand img { display:block; margin:0 auto; max-width:100%; max-height:calc(100vh - 150px); padding:6px; background:#FFFDF8;
  box-shadow:0 4px 12px rgba(58,46,36,0.25); cursor:zoom-out; }
.ff-fleche { position:absolute; top:50%; transform:translateY(-60%); width:42px; height:42px; border-radius:50%;
  border:1px solid #d8c9ae; background:rgba(246,238,220,0.92); color:#6b553a; font-size:30px; line-height:36px; cursor:pointer; }
.ff-prec { left:-8px; } .ff-suiv { right:-8px; }
.ff-fleche:hover, .ff-fleche:focus-visible { background:#F6EEDC; color:#3A2E24; outline:none; }
.ff-grand.seule .ff-fleche { display:none; }
.ff-compte { margin:8px 0 0; font-family:'Caveat', cursive; font-weight:600; font-size:20px; color:#8a7550; }
@media (max-width:560px) {
  .facade-fenetre { padding:8px; }
  .ff-carte { padding:10px 10px 14px; transform:none; }
  .ff-titre { font-size:24px; margin-bottom:6px; padding:0 26px; }
  .ff-mosaique { --h:96px; gap:10px; }
  .ff-fleche { width:36px; height:36px; font-size:26px; line-height:30px; }
  .ff-prec { left:-4px; } .ff-suiv { right:-4px; }
}
/* V340 : la visite en photos. Des flèches posées sur la photo (à la manière de Street View), chacune avec le nom de
   la pièce où elle mène, sur une étiquette de papier ; la position est dans facade.js (table FLÈCHES). */
.ff-scene { position:relative; display:inline-block; max-width:100%; }
.ff-grand .ff-scene img { cursor:zoom-out; }
.ff-grand.avec-fleches .ff-scene img { cursor:default; }
.ff-poses { position:absolute; inset:6px; pointer-events:none; }
.ff-pose { position:absolute; transform:translate(-50%, -50%); pointer-events:auto; display:flex; align-items:center; gap:4px;
  background:rgba(246,238,220,0.94); border:1px solid #d8c9ae; border-radius:14px; padding:1px 10px 2px 6px; cursor:pointer;
  font-family:'Caveat', cursive; font-weight:600; font-size:24px; line-height:1.05; color:#6b553a; text-align:left;
  box-shadow:0 3px 8px rgba(58,46,36,0.3); max-width:72%; transition:transform .15s, background .15s; }
.ff-pose .ff-sens { width:19px; height:19px; color:#8F6C88; flex:none; }
/* le survol ne vaut qu'à la souris : au doigt, il resterait accroché (« une étiquette dans l'étiquette ») */
@media (hover:hover) { .ff-pose:hover { background:#FFFDF8; color:#3A2E24; } }
.ff-pose:focus-visible { background:#FFFDF8; color:#3A2E24; outline:none; }
.ff-pose.a-droite { transform:translate(0, -50%); }
.ff-pose.a-gauche { transform:translate(-100%, -50%); }
.ff-pose { white-space:nowrap; }
.ff-pose.deux-lignes { white-space:normal; }
/* l'étage : la montée et l'autre bout du couloir à gauche, le couloir et ses portes à droite */
.ff-etage .ff-mosaique { flex-wrap:nowrap; align-items:center; gap:20px; }
.ff-etage .ff-cote { display:flex; flex-direction:column; gap:18px; align-items:center; flex:0 0 auto; }
.ff-etage .ff-cote .ff-photo { --h:clamp(130px, 22vh, 205px); }
.ff-couloir img { display:block; height:min(68vh, 600px); width:auto; max-width:100%; padding:6px; background:#FFFDF8;
  box-shadow:0 4px 12px rgba(58,46,36,0.25); }
/* V341 : le « petit écran » de la visite = un téléphone debout, une fenêtre étroite (600 à 820 px : le couloir s'écrasait en
   lanière) OU un téléphone couché (844 × 390 : les étiquettes se chevauchaient). La même condition est dans facade.js
   (fonction fleches) : les deux doivent rester pareilles. */
@media (max-width:820px), (max-height:500px) {
  .ff-pose { font-size:clamp(15px, 4.4vw, 17px); padding:0 7px 1px 4px; max-width:none; white-space:nowrap; }
  .ff-pose .ff-sens { width:15px; height:15px; }
  .ff-panneau .ff-pose { font-size:clamp(14px, 4.1vw, 16px); }   /* 360 px (petits Samsung) : un rien plus petit */
}
@media (max-width:820px) {
  .ff-etage .ff-mosaique { flex-direction:column; }
  .ff-etage .ff-cote { flex-direction:row; gap:10px; }
  .ff-etage .ff-cote .ff-photo { --h:90px; }
  .ff-couloir img { height:auto; width:100%; max-height:none; }
}
/* téléphone couché : le couloir garde une taille où ses étiquettes se lisent, et le papier défile */
@media (min-width:821px) and (max-height:500px) {
  .ff-etage .ff-cote .ff-photo { --h:110px; }
  .ff-couloir img { height:520px; }
}
/* le panneau du fond du couloir (Anne) : une seule pancarte, trois directions, au-dessus de la salle de bain */
.ff-panneau { position:absolute; transform:translate(-50%, 0); pointer-events:auto; display:flex; flex-direction:column; gap:3px;
  background:rgba(246,238,220,0.95); border:1px solid #d8c9ae; border-radius:4px; padding:5px 6px; box-shadow:0 4px 10px rgba(58,46,36,0.3); }
.ff-panneau .ff-pose { position:static; transform:none; box-shadow:none; border:none; background:none; padding:0 4px; white-space:nowrap; max-width:none; }
@media (hover:hover) { .ff-panneau .ff-pose:hover { background:#FFFDF8; } }
/* V340 : le panneau du couloir peut partir de sa gauche (« d ») ou finir à sa droite (« f »), et déborder de la photo */
.ff-panneau.a-droite { transform:none; }
.ff-panneau.a-gauche { transform:translate(-100%, 0); }
@media (min-width:821px) and (min-height:501px) { .ff-etage .ff-couloir { margin-right:140px; } }
/* au doigt, la bulle du soleil / de la lune resterait accrochée après le toucher : on ne la montre qu'à la souris */
@media (hover:none) { .facade-astre[data-tip]::after, .facade-astre[data-tip]::before { display:none; } }