/* Fiche « appartement ». Trois mises en page selon l'état :
   - appart--portrait : flux vertical (stream.height > width). Mobile : lecteur 9:16 centré, plaque, chat. Desktop : lecteur à gauche, plaque + chat à droite.
   - appart--paysage  : flux horizontal ou inconnu. Mobile : lecteur 16:9 bord à bord, plaque, chat. Desktop : lecteur + plaque à gauche, chat à droite à hauteur du lecteur.
   - appart--volets   : hors ligne. Dernière image voilée de lames de volet, quand revenir, sonnette, voisines en ligne. */
.appart { display: grid; gap: 14px; padding-block: 14px 8px; grid-template-areas: "scene" "plaque" "chat"; }
.appart__scene { grid-area: scene; position: relative; background: #000; overflow: hidden; border-radius: var(--r-panneau); }
.appart__plaque { grid-area: plaque; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.appart__chat { grid-area: chat; }
.appart__scene iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 1; }
.appart__affiche { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Portrait : hauteur bornée par l'écran, largeur déduite (9:16), centré sur mobile */
.appart--portrait .appart__scene { aspect-ratio: 9 / 16; height: min(74svh, calc((100vw - 32px) * 16 / 9)); max-width: 100%; margin-inline: auto; }
/* Paysage : 16:9 bord à bord sur mobile */
.appart--paysage .appart__scene { aspect-ratio: 16 / 9; margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px))); border-radius: 0; }
/* Volets : 3:4 avec lames */
.appart--volets .appart__scene { aspect-ratio: 3 / 4; max-height: 82svh; min-height: 420px; }
.appart--volets .appart__scene::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, color-mix(in srgb, var(--fond) 35%, transparent), color-mix(in srgb, var(--fond) 88%, transparent)); }
.appart--volets .appart__affiche { filter: blur(22px) brightness(.55) saturate(1.2); transform: scale(1.15); }
:root[data-variante="fenetres"] .appart--volets .appart__affiche { filter: brightness(.35) saturate(.6); transform: none; }
:root[data-variante="fenetres"] .appart--volets .appart__scene::before { background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--surface) 82%, transparent) 0 13px, color-mix(in srgb, var(--fond) 92%, transparent) 13px 15px); }

.appart__nom { display: grid; gap: 4px; margin-right: auto; min-width: 0; }
.appart__nom h1 { font-size: clamp(28px, 7vw, 44px); overflow-wrap: anywhere; }
.appart__etat { display: inline-flex; align-items: center; gap: 8px; color: var(--texte-2); font-size: 14px; font-weight: 600; }

.appart__plaque .court { display: none; }
@media only screen and (max-width: 600px) {
  .appart__plaque .long { display: none; }
  .appart__plaque .court { display: inline; }
  .appart__entrer { --btn-padding: 22px; }
}
.appart__chat iframe { display: block; width: 100%; height: clamp(320px, 52svh, 540px); border: 1px solid var(--ligne); border-radius: var(--r-panneau); background: var(--surface); }

@media only screen and (min-width: 993px) {
  .appart--portrait { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "scene plaque" "scene chat"; column-gap: 24px; align-items: start; }
  .appart--portrait .appart__scene { height: min(80vh, 780px); margin: 0; }
  .appart--portrait .appart__chat, .appart--portrait .appart__chat iframe { height: 100%; }
  .appart--portrait .appart__chat { align-self: stretch; }
  .appart--portrait .appart__chat iframe { min-height: 420px; }
  .appart--paysage { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); grid-template-areas: "scene chat" "plaque chat"; column-gap: 20px; align-items: start; }
  .appart--paysage .appart__scene { margin: 0; border-radius: 3px; }
  .appart--paysage .appart__chat { align-self: stretch; }
  .appart--paysage .appart__chat iframe { height: 100%; min-height: 420px; }
  .appart--volets { grid-template-columns: minmax(0, 560px) minmax(0, 1fr); grid-template-areas: "scene plaque"; column-gap: 28px; align-items: start; }
}

/* Plein écran : natif sur la scène ; iPhone = scène fixée sur tout l'écran */
.appart__plein { position: absolute; z-index: 3; right: 10px; bottom: 10px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; cursor: pointer; }
.appart__plein svg { width: 20px; height: 20px; }
.appart__plein .ic-fermer, .appart__plein.est-actif .ic-ouvrir { display: none; }
.appart__plein.est-actif .ic-fermer { display: block; }
.appart__scene.est-plein { position: fixed; inset: 0; z-index: 90; width: 100vw; height: 100svh; max-height: none; aspect-ratio: auto; margin: 0; border-radius: 0; }
html.a-plein { overflow: hidden; }

/* Bloqueur de pub : le widget se tait → affiche + message */
.appart__bloque { position: absolute; z-index: 4; inset: auto 0 0 0; padding: 14px; background: color-mix(in srgb, var(--fond) 94%, transparent); display: grid; gap: 10px; font-size: 14px; }
.appart__bloque p { margin: 0; }
.appart__scene.est-bloque iframe { visibility: hidden; }

/* Volets (hors ligne au rendu, ou fermés par appart.js) */
.volet { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 22px 18px; text-align: left; }
.appart__scene.est-clos iframe { visibility: hidden; }
.appart__scene.est-clos::before { content: ""; position: absolute; inset: 0; z-index: 1; background: color-mix(in srgb, var(--fond) 86%, transparent); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.volet h2 { font-size: clamp(26px, 6.5vw, 38px); }
.volet p { margin: 0; color: var(--texte); max-width: 40ch; }
.volet__quand { font-size: 15px; }
.volet__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.volet__voisines-titre { font-size: 13.5px; color: var(--texte-2) !important; }
.volet__voisines { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.volet__voisines a { display: grid; gap: 4px; text-decoration: none; font-size: 12px; min-width: 0; }
.volet__voisines img { aspect-ratio: 3 / 4; width: 100%; object-fit: cover; border-radius: var(--r-carte); box-shadow: 0 0 0 2px var(--direct), 0 0 12px var(--direct-halo); }

/* Sonnette (alerte push) */
.sonnette { gap: 8px; }
.sonnette svg { width: 18px; height: 18px; flex: none; }
.sonnette.est-active { border-color: var(--direct); color: var(--direct); }
.sonnette.est-astuce { white-space: normal; height: auto; min-height: 42px; padding-block: 8px; text-align: left; }
.volet .sonnette { align-self: flex-start; }

/* À propos */
.apropos .card { margin: 10px 0 0; background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-panneau); box-shadow: var(--ombre); }
.apropos .card-content { padding: 18px 16px; display: grid; gap: 16px; }
.apropos h2 { font-size: 26px; }
.apropos__fiche { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 20px; margin: 0; }
.apropos__fiche dt { font-size: 12.5px; color: var(--texte-2); }
.apropos__fiche dd { margin: 2px 0 0; font-weight: 600; }
.horaire { display: grid; gap: 8px; }
.horaire h3 { font-size: 15px; font-weight: 600; }
.horaire__grille { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 3px; max-width: 720px; }
.horaire__grille i { aspect-ratio: 3 / 5; border-radius: 3px; background: color-mix(in srgb, var(--direct) calc(var(--allume, 0) * 100%), var(--surface-2)); box-shadow: inset 0 0 0 1px var(--ligne); }
.horaire__grille i.fort { box-shadow: 0 0 6px var(--direct-halo); }
@media only screen and (max-width: 600px) { .horaire__grille { grid-template-columns: repeat(12, minmax(0, 1fr)); } }
.horaire__axe { display: flex; justify-content: space-between; font-size: 11px; color: var(--texte-2); max-width: 720px; }
@media only screen and (max-width: 600px) { .horaire__axe { display: none; } }
.horaire p { margin: 0; font-size: 14.5px; }
.horaire strong { color: var(--direct); font-weight: 600; }
.apropos__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.apropos__tags .chip { height: 30px; border-radius: var(--r-pilule); background: var(--surface-2); color: var(--texte); font-size: 13px; }
.apropos__note { margin: 0; color: var(--texte-2); font-size: 13.5px; }
.apropos__entrer { justify-self: start; }
.voisines { padding-top: 26px; }

/* Repli quand le lecteur et le chat sont bloqués (bloqueur de publicité) : bouton vers le salon plutôt qu'une case vide */
.appart__bloque-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.appart__chat-repli { display: grid; gap: 12px; align-content: center; justify-items: start; min-height: 200px; height: 100%; padding: 20px; border: 1px dashed var(--ligne); border-radius: var(--r-panneau); background: var(--surface); color: var(--texte-2); font-size: 14.5px; }
.appart__chat-repli p { margin: 0; }

/* Favori (fiche) et actions du bas de « À propos » (salon + sonnette) */
.favori { gap: 8px; }
.favori svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.favori.est-active { color: var(--direct); }
.favori.est-active svg { fill: currentColor; }
.apropos__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }

/* Objectif du show en cours (sync toutes les 5 min) */
.objectif { flex: 1 0 100%; display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--ligne); border-radius: var(--r-carte); background: var(--surface); }
.objectif p { margin: 0; }
.objectif__titre { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--texte-2); }
.objectif__chiffres { font-variant-numeric: tabular-nums; }
.objectif__message { font-weight: 600; overflow-wrap: anywhere; }
.objectif__jauge { height: 6px; border-radius: var(--r-pilule); background: var(--surface-2); overflow: hidden; }
.objectif__jauge i { display: block; height: 100%; border-radius: inherit; background: var(--action); }