/* Hall de Montréal : intérieur 2000 × 720 (repères de la photographie 2000 × 670).
   La baie vitrée occupe toute la largeur, de y=120 (sous le plafond) à y=526 (le sol).
   Les portes s'arrêtent à y=236. Les mêmes repères placent la ville, les modules de verre et les rails. */
.hall[data-hall-volume] {
  --hall-jour: url("photos/hall-interieur-jour.webp");
  --hall-ville: url("photos/hall-ville-jour-ete.webp");
  --hall-ville-fond: var(--hall-ville);
  --hall-soleil: .7;
  --hall-eclairage: 1;
  --hall-chaleur: 0;
  --hall-reflet: .36;
}

/* Porte : ouverture dans la baie, huisserie inox, battant de verre avec son illustration imprimée. */
.hall[data-hall-volume]:is(.en-volume,.en-mobile) .station-hall .porte .baie {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow:
    inset 0 0 0 1px #3f4547,
    inset 1px 1px 0 2px #f2f4f4,
    inset 0 0 0 4px #b3b8b9,
    inset -1px -1px 0 5px #7d8486,
    inset 0 0 0 7px #5a6163,
    inset 0 0 0 8px rgba(0,0,0,.25),
    0 0 0 1px rgba(36,40,42,.55),
    calc(2px + var(--hall-soleil) * 5px) calc(2px + var(--hall-soleil) * 3px) calc(8px + (1 - var(--hall-soleil)) * 8px) rgba(30,26,20,calc(.12 + var(--hall-soleil) * .1));
}
.hall[data-hall-volume]:is(.en-volume,.en-mobile) .station-hall .porte .ouverture {
  inset: 8px 8px 0;
  background: transparent;
  box-shadow: none;
  perspective: 1700px;
  perspective-origin: 50% 50%;
  transition: background .35s ease, box-shadow .35s ease;
}
/* Lumière de la couleur de la porte, visible dans l'entrebâillement. */
.hall[data-hall-volume]:is(.en-volume,.en-mobile) .station-hall .porte:is(:hover,:focus-visible,.ouverte) .ouverture {
  background: radial-gradient(120% 70% at 50% 75%,color-mix(in srgb,var(--c1) 16%,#fffaf0) 0%,color-mix(in srgb,var(--c1) 42%,#f1e9da) 100%);
  box-shadow: inset 0 8px 12px color-mix(in srgb,var(--c1) 28%,transparent);
}
.hall[data-hall-volume]:is(.en-volume,.en-mobile) .station-hall .porte .battant {
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 4px 3px,rgba(255,255,255,.62) 0 1.2px,transparent 1.7px) 0 69% / 8px 11px repeat-x,
    radial-gradient(circle at 0 8px,rgba(255,255,255,.62) 0 1.2px,transparent 1.7px) 0 69% / 8px 11px repeat-x,
    linear-gradient(106deg,transparent 0 12%,rgba(255,255,255,.22) 20%,rgba(255,255,255,.06) 27%,transparent 34%,transparent 58%,rgba(255,255,255,.12) 64%,transparent 72%),
    linear-gradient(180deg,rgba(255,255,255,.12),transparent 30%,transparent 80%,rgba(255,255,255,.06)),
    rgba(186,210,216,.13);
  box-shadow:
    inset 0 0 0 2px #c9cdce,
    inset 0 0 0 3px #6c7273,
    inset 0 0 0 4px rgba(120,170,160,.5),
    inset 3px 3px 6px 3px rgba(255,255,255,.18),
    inset -2px -2px 5px 3px rgba(0,0,0,.12);
  transform-origin: 0 50%;
  transition: transform .55s var(--ease);
}
.hall[data-hall-volume]:is(.en-volume,.en-mobile) .station-hall .porte .battant::before { display: none; }
/* Lisse basse inox du battant. */
.hall[data-hall-volume]:is(.en-volume,.en-mobile) .station-hall .porte .battant::after {
  display: block;
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: auto;
  bottom: 0;
  height: 8%;
  border: 0;
  background: linear-gradient(180deg,#e9ebeb,#a9aeaf 35%,#868c8d 70%,#5d6365);
  box-shadow: inset 0 1px 0 #fff;
}
/* Poignée bec-de-cane en inox brossé, sur rosace ronde ; la béquille s'abaisse avant l'ouverture. */
.hall[data-hall-volume]:is(.en-volume,.en-mobile) .station-hall .porte .poignee {
  display: block;
  position: absolute;
  top: 56%;
  inset-inline-end: 2%;
  inset-inline-start: auto;
  width: 42%;
  min-width: 40px;
  height: auto;
  aspect-ratio: 160 / 52;
  border: 0;
  border-radius: 0;
  background: url("poignee-inox.svg") center / 100% 100% no-repeat;
  box-shadow: none;
  z-index: 3;
  transform-origin: 83.75% 50%;
  transform: translateY(-50%) rotate(0deg);
  transition: transform .26s cubic-bezier(.3,.7,.3,1.25);
}
.hall[data-hall-volume]:is(.en-volume,.en-mobile) .station-hall .porte .poignee::before,
.hall[data-hall-volume]:is(.en-volume,.en-mobile) .station-hall .porte .poignee::after { display: none; content: none; }
.hall[data-hall-volume]:is(.en-volume,.en-mobile) .station-hall .porte:is(:hover,:focus-visible,.ouverte) .poignee {
  transform: translateY(-50%) rotate(-32deg);
}
/* La béquille s'abaisse d'abord, puis le battant s'entrouvre. */
.hall[data-hall-volume]:is(.en-volume,.en-mobile) .station-hall .porte:is(:hover,:focus-visible):not(.ouverte) .battant { transition-delay: .18s; }
/* Illustration de chaque porte, imprimée dans le haut du verre. */
.hall[data-hall-volume]:is(.en-volume,.en-mobile) .station-hall .porte .vignette {
  display: block;
  position: absolute;
  top: 5%;
  inset-inline-start: 10%;
  inset-inline-end: 14%;
  height: 45%;
  border: 0;
  border-radius: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 0 0 2px #c9cdce, 0 0 0 3px #737a7b, 0 3px 8px rgba(20,24,26,.25);
}
.hall[data-hall-volume]:is(.en-volume,.en-mobile) .station-hall .porte .vignette::before { content: none; }
.hall[data-hall-volume]:is(.en-volume,.en-mobile) .station-hall .porte .vignette::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(116deg,rgba(255,255,255,.2),transparent 24% 72%,rgba(255,255,255,.06));
  box-shadow: none;
}
.hall[data-hall-volume]:is(.en-volume,.en-mobile) .station-hall .porte .apercu {
  color: color-mix(in srgb,var(--c1) 78%,#10201f);
  text-shadow: none;
}

/* Panneaux épinglés sur la vitre : plaque blanche mate sur quatre entretoises inox. */
.hall[data-hall-volume]:is(.en-volume,.en-mobile) .station-hall .panneau-hall {
  box-sizing: border-box;
  padding: 15px 17px 13px;
  border: 0;
  border-radius: 2px;
  background:
    radial-gradient(circle at 9px 9px,#fcfcfa 0 1.1px,#c3c6c4 1.6px 2.9px,#80857f 3.3px 3.9px,rgba(40,36,30,.22) 4.3px 5.2px,transparent 5.6px),
    radial-gradient(circle at calc(100% - 9px) 9px,#fcfcfa 0 1.1px,#c3c6c4 1.6px 2.9px,#80857f 3.3px 3.9px,rgba(40,36,30,.22) 4.3px 5.2px,transparent 5.6px),
    radial-gradient(circle at 9px calc(100% - 9px),#fcfcfa 0 1.1px,#c3c6c4 1.6px 2.9px,#80857f 3.3px 3.9px,rgba(40,36,30,.22) 4.3px 5.2px,transparent 5.6px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px),#fcfcfa 0 1.1px,#c3c6c4 1.6px 2.9px,#80857f 3.3px 3.9px,rgba(40,36,30,.22) 4.3px 5.2px,transparent 5.6px),
    linear-gradient(162deg,rgba(255,255,255,calc(.86 + var(--hall-nuit,0) * .07)) 0%,rgba(250,250,247,calc(.78 + var(--hall-nuit,0) * .07)) 55%,rgba(241,240,236,calc(.74 + var(--hall-nuit,0) * .07)) 100%);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  box-shadow:
    0 0 0 .5px rgba(255,255,255,.55),
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 3px 0 var(--c1),
    inset 0 -1px 0 rgba(130,118,98,.16),
    4px 6px 14px rgba(20,24,28,.22);
  overflow: visible;
}
.hall[data-hall-volume]:is(.en-volume,.en-mobile) .station-hall .panneau-hall h3 {
  margin: 0 0 8px;
  padding: 0 0 8px;
  border-bottom: 1px solid color-mix(in srgb,var(--c1) 30%,#e4dfd4);
  font: 600 15px/1.28 var(--sans);
  color: color-mix(in srgb,var(--c1) 82%,#0b1716);
}
.hall[data-hall-volume]:is(.en-volume,.en-mobile) .station-hall .panneau-hall h3 button {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 28px;
  color: inherit;
  text-align: start;
}
.hall[data-hall-volume]:is(.en-volume,.en-mobile) .station-hall .panneau-hall h3 bdi {
  display: grid;
  place-items: center;
  width: 28px;
  height: 24px;
  flex: none;
  border: 0;
  border-radius: 4px;
  background: var(--c1);
  color: #fff;
  font: 600 14px/1 ui-monospace,"Cascadia Mono",Consolas,monospace;
}
.hall[data-hall-volume]:is(.en-volume,.en-mobile) .station-hall .sous-portes-murales {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 0 16px;
}
.hall[data-hall-volume]:is(.en-volume,.en-mobile) .station-hall .sous-portes-murales > :is(button,a) {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 38px;
  padding: 4px 2px;
  border: 0;
  border-bottom: 1px solid #e3ded3;
  border-radius: 0;
  color: #253433;
  background: transparent;
  box-shadow: none;
  font: 500 15px/1.25 var(--sans);
  text-align: start;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
.hall[data-hall-volume]:is(.en-volume,.en-mobile) .station-hall .sous-portes-murales > :is(button,a)::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c1);
}
.hall[data-hall-volume]:is(.en-volume,.en-mobile) .station-hall .sous-portes-murales > :is(button,a):hover {
  color: color-mix(in srgb,var(--c1) 87%,#0d1f1e);
  background: linear-gradient(90deg,color-mix(in srgb,var(--c1) 44%,transparent),color-mix(in srgb,var(--c1) 23%,transparent));
  border-bottom-color: var(--c1);
  box-shadow: inset 3px 0 0 var(--c1);
}
.hall[data-hall-volume]:is(.en-volume,.en-mobile) .station-hall .sous-portes-murales > :is(button,a):focus-visible,
.hall[data-hall-volume]:is(.en-volume,.en-mobile) .station-hall .panneau-hall h3 button:focus-visible {
  outline: 2px solid var(--c1);
  outline-offset: 2px;
}

/* Calques : la ville derrière la baie, puis l'intérieur du hall par-dessus. */
.hall-ville,
.hall-ville span,
.hall-ville canvas,
.hall-interieur,
.hall-calque,
.hall-reflet {
  position: absolute;
  display: block;
  pointer-events: none;
}
.hall-ville { overflow: hidden; }
.hall-ville > span,
.hall-ville > canvas,
.hall-ville-plan > span,
.hall-ville-plan > canvas {
  inset: 0;
  width: 100%;
  height: 100%;
}
/* La ville (3800 × 1090) est agrandie pour que le fleuve passe juste au-dessus des portes ;
   plus lointaine que la vitre, elle défile un peu moins vite : effet de profondeur. */
.hall-ville .hall-ville-plan {
  /* Hauteur de la vitre ; la ville la couvre toujours, fleuve (30,5 % de la photo) à 21 % de la vitre. */
  --hv: calc(var(--mur-bas) - var(--verre-haut));
  --plan-l: max(calc((var(--mur-d) - var(--mur-g)) * 1.04), calc(var(--hv) * 1.3 * 3800 / 1090));
  left: 50%;
  top: calc(var(--hv) * .21 - var(--plan-l) * 1090 / 3800 * .305);
  width: var(--plan-l);
  height: auto;
  aspect-ratio: 3800 / 1090;
  transform: translateX(calc(-50% + (.5 - var(--hall-defile,.5)) * 6%));
}
.hall-ville-plan > span {
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.hall-bateaux {
  -webkit-mask: url("photos/hall-ville-fleuve.png") 0 0 / 100% 100% no-repeat;
  mask: url("photos/hall-ville-fleuve.png") 0 0 / 100% 100% no-repeat;
}
.hall-ville .hall-ville-calque,
.hall-calque {
  opacity: 0;
  transition: opacity 2.4s ease;
}
/* Reflet du soleil sur le vitrage. */
.hall-ville .hall-eblouissement {
  opacity: calc(var(--hall-eblouissement,0) * .55);
  mix-blend-mode: screen;
  background:
    radial-gradient(60% 90% at 88% -10%,rgba(255,244,214,.55),rgba(255,236,200,.18) 40%,transparent 70%),
    linear-gradient(118deg,transparent 0 52%,rgba(255,250,235,.10) 56%,transparent 60%,transparent 66%,rgba(255,250,235,.07) 69%,transparent 72%);
  transition: opacity 2.4s ease;
}
.hall-brume {
  opacity: 0;
  background: color-mix(in srgb,#cdd2d9,#3f3e4b calc(var(--hall-brume-nuit,0) * 100%));
  transition: opacity 2.4s ease;
}
.hall-eclair {
  opacity: 0;
  background: #eef1ff;
}
.hall-interieur,
.hall-calque {
  inset: 0;
  background-repeat: no-repeat;
}
.hall-interieur { background-image: var(--hall-jour); }
/* Reflet de la ville sur le sol poli. */
.hall-reflet {
  background-image: var(--hall-ville-fond);
  background-repeat: no-repeat;
  transform: scaleY(-1);
  mix-blend-mode: screen;
  opacity: var(--hall-reflet);
  filter: blur(1.4px);
  -webkit-mask-image: linear-gradient(to top,#000 0%,rgba(0,0,0,.35) 45%,transparent 85%);
  mask-image: linear-gradient(to top,#000 0%,rgba(0,0,0,.35) 45%,transparent 85%);
  transition: opacity 2.4s ease;
}
@media(prefers-reduced-motion:reduce) {
  .hall-ville .hall-ville-calque,
  .hall-calque,
  .hall-brume,
  .hall-reflet,
  .hall-ville .hall-eblouissement { transition: none; }
  .hall-ville .hall-ville-plan { transform: translateX(-50%); }
}

@media(min-width:1000px) {
  .hall.en-volume {
    /* Le hall, sa barre de rubriques et l'en-tête tiennent ensemble dans la fenêtre. */
    --eb-hall-hauteur: clamp(350px, calc(100svh - var(--entete-h, 136px) - 194px), 620px);
    /* Vue rapprochée : la photo est agrandie et le haut de la verrière recadré. */
    --hall-zoom: 1.3;
    /* Largeur de porte rapportée à sa hauteur, et espace égal entre porte et panneau. */
    --hall-porte-ratio: .543;
    --hall-ecart: 30;
    --hall-recadrage: 72;
    /* Haut des portes, dans la photo ; le fleuve reste visible au-dessus. */
    --hall-porte-haut: 222.8;
  }
  .hall.en-volume .hall-espace {
    height: var(--eb-hall-hauteur);
    container-type: size;
    background: #cfc5b4;
  }
  .hall.en-volume .hall-espace::before,
  .hall.en-volume .hall-espace::after { content: none; }
  .hall.en-volume .hall-univers {
    /* Le haut de la vue reste fixe : une fine bande de plafond (depuis y=88) au-dessus de la baie ;
       le sol s'allonge ou se raccourcit selon la hauteur disponible. */
    --px: max(calc(100cqw / 1850), calc(100cqh / 575 + .149px));
    --iw: calc(var(--px) * 2000);
    --ih: calc(var(--px) * 720);
    --ix: calc((100cqw - var(--iw)) / 2);
    --iy: calc(var(--px) * -88);
    --verre-haut: calc(var(--iy) + var(--px) * 120);
    --mur-haut: calc(var(--iy) + var(--px) * var(--hall-porte-haut));
    --mur-bas: calc(var(--iy) + var(--px) * 526);
    --mur-g: max(0px, var(--ix));
    --mur-d: min(100cqw, calc(var(--ix) + var(--px) * 2000));
    --hauteur-mur: calc(var(--mur-bas) - var(--mur-haut));
    --hall-porte-l: calc(var(--hauteur-mur) * var(--hall-porte-ratio));
  }
  .hall.en-volume .architecture-hall {
    inset: 0;
    transform: none;
    isolation: isolate;
    background: #d6ccbb;
  }
  .hall.en-volume .architecture-hall::before,
  .hall.en-volume .architecture-hall::after,
  .hall.en-volume[data-moment] .architecture-hall::before { content: none; display: none; }
  .hall.en-volume :is(.paroi-hall,.plafond-hall,.verriere-hall,.dallage-hall) { display: none; }
  .hall.en-volume .hall-ville {
    left: var(--mur-g);
    width: calc(var(--mur-d) - var(--mur-g));
    top: var(--verre-haut);
    height: calc(var(--mur-bas) - var(--verre-haut) + 2px);
  }
  .hall.en-volume :is(.hall-interieur,.hall-calque) {
    background-position: var(--ix) var(--iy);
    background-size: var(--iw) var(--ih);
  }
  /* Le sol poli renvoie la vue de la baie en miroir, au même cadrage que la ville derrière la vitre. */
  .hall.en-volume .hall-reflet {
    --hv: calc(var(--mur-bas) - var(--verre-haut));
    --plan-l: max(calc((var(--mur-d) - var(--mur-g)) * 1.04), calc(var(--hv) * 1.3 * 3800 / 1090));
    --plan-h: calc(var(--plan-l) * 1090 / 3800);
    left: var(--mur-g);
    width: calc(var(--mur-d) - var(--mur-g));
    top: var(--mur-bas);
    bottom: 0;
    background-size: var(--plan-l) var(--plan-h);
    background-position:
      calc((var(--mur-d) - var(--mur-g) - var(--plan-l)) / 2 + (.5 - var(--hall-defile,.5)) * .06 * var(--plan-l))
      calc(100cqh - var(--mur-bas) - var(--hv) + var(--hv) * .21 - var(--plan-h) * .305);
    mix-blend-mode: normal;
    filter: blur(1.2px) saturate(.85);
    -webkit-mask-image: linear-gradient(to top,#000 0%,rgba(0,0,0,.78) 16%,rgba(0,0,0,.4) 45%,rgba(0,0,0,.12) 80%,transparent 100%);
    mask-image: linear-gradient(to top,#000 0%,rgba(0,0,0,.78) 16%,rgba(0,0,0,.4) 45%,rgba(0,0,0,.12) 80%,transparent 100%);
  }
  .hall.en-volume .station-hall .porte {
    -webkit-box-reflect: below 1px linear-gradient(transparent 62%,rgba(255,255,255,.05) 80%,rgba(255,255,255,.22));
  }

  /* La baie coulisse avec les portes et les panneaux, entre les deux piliers.
     Le cadrage par débordement laisse passer le flou des panneaux en verre dépoli. */
  .hall.en-volume .portes {
    inset: 0 auto 0 var(--mur-g);
    width: calc(var(--mur-d) - var(--mur-g));
    overflow: hidden;
    clip-path: none;
    transform-style: flat;
  }
  /* Rail haut : profilé inox qui porte les modules de verre. */
  .hall.en-volume .portes::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--verre-haut) - 2px);
    bottom: auto;
    height: 6px;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg,#f2f3f2 0%,#b9bdbd 35%,#7f8586 65%,#c4c8c8 100%);
    box-shadow: 0 2px 3px rgba(20,22,24,.35);
    filter: brightness(var(--hall-eclairage));
    -webkit-mask-image: none;
    mask-image: none;
  }
  /* Rail au sol : glissière inox sous les modules et les portes. */
  .hall.en-volume .portes::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--mur-bas) - 3px);
    height: 9px;
    z-index: 2;
    pointer-events: none;
    background:
      linear-gradient(180deg,rgba(0,0,0,0) 0 46%,rgba(25,28,30,.55) 46% 58%,rgba(0,0,0,0) 58%),
      linear-gradient(180deg,#f4f5f4 0%,#c3c7c7 25%,#8e9495 60%,#5c6264 85%,#3d4244 100%);
    box-shadow: 0 2px 4px rgba(20,18,14,.4), 0 -1px 0 rgba(255,255,255,.5);
    filter: brightness(var(--hall-eclairage));
  }
  .hall.en-volume .station-hall {
    top: var(--mur-haut);
    bottom: auto;
    width: var(--hall-station-l,446px);
    height: var(--hauteur-mur);
    transform: translateX(calc(var(--panorama-x,40px) - var(--mur-g)));
    filter: none;
  }
  .hall.en-volume .station-hall .porte { filter: brightness(var(--hall-eclairage)) sepia(var(--hall-chaleur)); }
  .hall.en-volume .station-hall::before {
    content: "";
    position: absolute;
    left: -5px;
    top: calc(100% + 4px);
    bottom: auto;
    width: calc(var(--hall-porte-l) + 10px);
    height: 10px;
    pointer-events: none;
    background: radial-gradient(ellipse 50% 50% at 50% 30%,rgba(30,26,20,.3),transparent 78%);
    filter: blur(1.5px);
    z-index: 0;
  }
  /* Module de verre : montant inox à gauche, tranche verte du vitrage, reflets du ciel et du hall,
     grain très léger ; givre en bas quand il neige. */
  .hall.en-volume .station-hall::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: calc(var(--hall-ecart) * -.5px);
    width: calc(var(--hall-station-l,446px) + var(--hall-ecart) * 1px);
    top: calc(var(--verre-haut) - var(--mur-haut));
    bottom: 0;
    pointer-events: none;
    background:
      linear-gradient(90deg,#41474a 0,#9ea4a6 1px,#e9ecec 3px,#c4c9ca 5px,#8a9193 8px,#4c5255 10px,rgba(120,170,160,.45) 10px,rgba(120,170,160,.2) 11.5px,rgba(0,0,0,.22) 12px,rgba(0,0,0,.08) 16px,transparent 22px) left top / 22px 100% no-repeat,
      linear-gradient(104deg,transparent 0 16%,rgba(255,255,255,.11) 22%,rgba(255,255,255,.035) 28%,transparent 34%,transparent 60%,rgba(255,255,255,.07) 66%,rgba(255,255,255,.02) 70%,transparent 76%),
      linear-gradient(180deg,rgba(255,255,255,.09) 0%,transparent 28%,transparent 72%,rgba(255,255,255,.04) 100%),
      linear-gradient(0deg,rgba(250,252,255,calc(var(--hall-givre,0) * .62)) 0,rgba(250,252,255,calc(var(--hall-givre,0) * .28)) 5%,transparent 13%),
      linear-gradient(0deg,rgba(245,244,240,calc(var(--hall-nuit,0) * .12)) 0%,transparent 42%),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
      rgba(170,200,206,.07);
  }
  /* Cadre de porte : huisserie inox autour de l'ouverture, sans traverse sur le reste du vitrage. */
  .hall.en-volume .station-hall .porte .baie::after {
    content: "";
    position: absolute;
    inset: -7px -7px 0;
    z-index: 2;
    pointer-events: none;
    background: none;
    border: 7px solid #b3b8b9;
    border-bottom: 0;
    border-image: linear-gradient(135deg,#f2f4f4,#b9bebf 30%,#7f8688 60%,#c9cdce 85%,#6b7274) 1;
    box-shadow: 0 0 0 1px rgba(30,34,36,.6), inset 0 0 0 1px rgba(30,34,36,.45), 2px 3px 8px rgba(20,24,26,.3);
  }
  .hall.en-volume .station-hall .porte {
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--hall-porte-l);
    height: 100%;
    transform: none;
  }
  .hall.en-volume .station-hall .porte:hover,
  .hall.en-volume .station-hall .porte:focus-visible { transform: none; }
  .hall.en-volume .station-hall .porte::before,
  .hall.en-volume .station-hall .porte::after { content: none; }
  .hall.en-volume .station-hall .porte:not(.ouverte):focus-visible .battant { transform: rotateY(-34deg); }
  .hall.en-volume .station-hall .porte.ouverte .battant { transform: rotateY(-82deg); }
  .hall.en-volume .station-hall .panneau-hall {
    top: 40%;
    bottom: auto;
    left: calc(var(--hall-porte-l) + var(--hall-ecart) * 1px);
    width: calc((var(--hall-station-l,446px) - var(--hall-porte-l) - var(--hall-ecart) * 1px) / .95);
    height: auto;
    min-height: 0;
    max-height: none;
    transform: translateY(-50%) scale(.95);
    transform-origin: 0 50%;
  }
  .hall[data-hall-volume].en-volume .station-hall .panneau-hall { padding: 16px 20px 14px; }
  .hall[data-hall-volume].en-volume .station-hall .panneau-hall h3 { font-size: 16.5px; margin-bottom: 8px; padding-bottom: 9px; }
  .hall.en-volume .station-hall .panneau-hall > p {
    margin: 0 0 6px;
    font-size: 12px;
    line-height: 1.35;
    text-align: start !important;
    text-wrap: pretty;
    hyphens: manual !important;
  }
}

@media(max-width:999px) {
  /* Téléphone et tablette : une porte par écran, dans la même scène que sur ordinateur.
     Image intérieure 1400 × 1150 (repères de la photo : baie de y=120 à y=526, porte de y=224 à y=526),
     affichée à partir de y=88 ; --m = pixels d'écran par unité de la photo. */
  .hall.en-mobile .hall-espace { border: 0; border-radius: 16px; background: #5f5e5b; box-shadow: 0 18px 36px -24px rgba(15,30,40,.55); }
  .hall.en-mobile .portes { container-type: inline-size; padding: 0; gap: 0; scroll-padding-inline: 0; }
  .hall.en-mobile .station-hall {
    --m: min(calc(100cqw / 600), .84px);
    --verre-h: calc(var(--m) * 32);
    --verre-b: calc(var(--m) * 438);
    --porte-h: calc(var(--m) * 302);
    --porte-l: calc(var(--porte-h) * .57);
    --plan-l: max(104cqw, calc((var(--verre-b) - var(--verre-h)) * 1.3 * 3800 / 1090));
    position: relative;
    isolation: isolate;
    display: block;
    flex: 0 0 100cqw;
    min-height: 0;
    padding: calc(var(--verre-b) + 18px) 16px 22px;
    border: 0;
    border-radius: 0;
    overflow: hidden;
    background: #605f5c var(--hall-interieur-mobile, url("photos/hall-interieur-mobile-jour.webp")) center calc(var(--m) * -88) / calc(var(--m) * 1400) calc(var(--m) * 1150) no-repeat;
  }
  /* La ville derrière la vitre, le fleuve juste au-dessus de la porte. */
  .hall.en-mobile .station-hall::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: var(--verre-h) 0 auto;
    height: calc(var(--verre-b) - var(--verre-h));
    background: var(--hall-ville-fond) center calc((var(--verre-b) - var(--verre-h)) * .21 - var(--plan-l) * 1090 / 3800 * .305) / var(--plan-l) auto no-repeat, #8fa3b5;
    box-shadow: none;
  }
  /* Montants du vitrage, reflets et rail au sol, sur toute la largeur. */
  .hall.en-mobile .station-hall::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: var(--verre-h) 0 auto;
    height: calc(var(--verre-b) - var(--verre-h) + 9px);
    pointer-events: none;
    background:
      linear-gradient(90deg,#41474a 0,#9ea4a6 1px,#e9ecec 3px,#c4c9ca 5px,#8a9193 8px,#4c5255 10px,rgba(0,0,0,.2) 11px,transparent 18px) 6% 0 / 18px calc(100% - 9px) no-repeat,
      linear-gradient(90deg,#41474a 0,#9ea4a6 1px,#e9ecec 3px,#c4c9ca 5px,#8a9193 8px,#4c5255 10px,rgba(0,0,0,.2) 11px,transparent 18px) 94% 0 / 18px calc(100% - 9px) no-repeat,
      linear-gradient(104deg,transparent 0 16%,rgba(255,255,255,.12) 22%,rgba(255,255,255,.03) 28%,transparent 34%,transparent 60%,rgba(255,255,255,.08) 66%,transparent 74%) 0 0 / 100% calc(100% - 9px) no-repeat,
      linear-gradient(0deg,rgba(250,252,255,calc(var(--hall-givre,0) * .6)) 0,transparent 14%) 0 0 / 100% calc(100% - 9px) no-repeat,
      linear-gradient(180deg,#f4f5f4 0%,#c3c7c7 25%,#8e9495 60%,#5c6264 85%,#3d4244 100%) 0 100% / 100% 9px no-repeat;
  }
  .hall.en-mobile .station-hall .porte {
    position: absolute;
    z-index: 2;
    top: calc(var(--verre-b) - var(--porte-h));
    left: calc(50% - var(--porte-l) / 2);
    width: var(--porte-l);
    height: var(--porte-h);
    margin: 0;
    filter: brightness(var(--hall-eclairage,1));
  }
  .hall.en-mobile .station-hall .porte .baie { height: 100%; transform: none; }
  .hall.en-mobile .station-hall .porte .baie::after { content: none; }
  .hall.en-mobile .station-hall .porte .porte-texte { display: none; }
  /* Ombre de la porte sur le sol. */
  .hall.en-mobile .station-hall .porte::after {
    content: "";
    position: absolute;
    left: -6%;
    right: -6%;
    top: calc(100% + 6px);
    height: 14px;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 20%,rgba(20,18,14,.45),transparent 70%);
    filter: blur(2px);
  }
  .hall.en-mobile .station-hall .panneau-hall {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    max-width: 460px;
    margin-inline: auto;
    text-align: start;
  }
  .hall.en-mobile .station-hall .panneau-hall h3 { font-size: 17px; }
  .hall.en-mobile .station-hall .sous-portes-murales { padding-top: 0; border-top: 0; }
  .hall.en-mobile .station-hall .sous-portes-murales > :is(button,a) { min-height: 44px; font-size: 15px; background: transparent; border-width: 0 0 1px; border-radius: 0; }
  .hall.en-mobile .station-hall .sous-portes-murales > :last-child:nth-child(odd) { grid-column: 1/-1; }
  .hall.en-mobile .hall-commandes { background: linear-gradient(180deg,rgba(40,40,38,.0),rgba(40,40,38,.35)); }
  .hall.en-mobile .hall-position-mobile { color: #f2f2ee; }
}
/* Tablette : la porte à gauche, le panneau épinglé sur la vitre à sa droite, comme sur ordinateur. */
@media(min-width:640px) and (max-width:999px) {
  .hall.en-mobile .station-hall {
    --m: min(calc(100cqw / 900), .86px);
    min-height: calc(var(--verre-b) + 120px);
    padding: 0;
  }
  .hall.en-mobile .station-hall .porte { left: 9%; }
  .hall.en-mobile .station-hall .panneau-hall {
    position: absolute;
    top: calc(var(--verre-h) + (var(--verre-b) - var(--verre-h)) * .5);
    left: calc(9% + var(--porte-l) + 34px);
    right: 6%;
    width: auto;
    max-width: none;
    margin: 0;
    transform: translateY(-50%);
  }
}
@media(min-width:1000px) and (max-height:850px) {
  .hall[data-hall-volume].en-volume .station-hall .panneau-hall { padding: 13px 17px 11px; }
  .hall[data-hall-volume].en-volume .station-hall .panneau-hall h3 { margin-bottom: 6px; padding-bottom: 7px; font-size: 15.5px; }
  .hall[data-hall-volume].en-volume .station-hall .panneau-hall h3 bdi { height: 22px; font-size: 13px; }
  .hall[data-hall-volume].en-volume .station-hall .sous-portes-murales > :is(button,a) { min-height: 32px; padding-block: 3px; font-size: 14px; line-height: 1.2; }
}
@media(prefers-reduced-motion:reduce) {
  .hall[data-hall-volume]:is(.en-volume,.en-mobile) .station-hall .porte .battant { transition: none; }
}
@media(forced-colors:active) {
  .hall[data-hall-volume]:is(.en-volume,.en-mobile) .station-hall .panneau-hall { background: Canvas; border: 1px solid CanvasText; }
  .hall[data-hall-volume]:is(.en-volume,.en-mobile) .station-hall .sous-portes-murales > :is(button,a) { color: LinkText; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hall[data-hall-volume]:is(.en-volume,.en-mobile) .station-hall .panneau-hall { background-color: rgba(250,250,247,.90); }
}

/* Ligne d'état : heure, météo et activité à Montréal. */
.direct-montreal {
  --statut: #6b7a90;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: var(--ink, #173f52);
  font: 500 13px/1.2 var(--sans);
  white-space: nowrap;
}
.direct-montreal .direct-ciel {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 34px;
  flex: none;
  overflow: hidden;
  border-radius: 10px;
  background: linear-gradient(175deg,#3f8fdc 0%,#7fbaf0 55%,#cfe6fb 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), 0 1px 2px rgba(15,49,66,.12), 0 6px 14px -8px rgba(15,49,66,.45);
}
.direct-montreal[data-moment=aube] .direct-ciel { background: linear-gradient(175deg,#6c7fcf 0%,#e9a3a6 55%,#ffd3a0 100%); }
.direct-montreal[data-moment=crepuscule] .direct-ciel { background: linear-gradient(175deg,#2f3d82 0%,#b9668c 55%,#f4a266 100%); }
.direct-montreal[data-moment=nuit] .direct-ciel { background: linear-gradient(175deg,#0b1430 0%,#1b2a5a 60%,#33467d 100%); }
.direct-montreal:is([data-temps=couvert],[data-temps=pluie],[data-temps=bruine],[data-temps=verglas],[data-temps=orage],[data-temps=brouillard],[data-temps=neige]):not([data-moment=nuit]) .direct-ciel {
  background: linear-gradient(175deg,#7d8b9b 0%,#a8b4c1 55%,#d7dee6 100%);
}
.direct-montreal .direct-etoiles {
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(circle at 14% 24%,#fff 0 .7px,transparent 1.2px),
    radial-gradient(circle at 34% 70%,#fff 0 .5px,transparent 1px),
    radial-gradient(circle at 62% 16%,#fff 0 .6px,transparent 1.1px),
    radial-gradient(circle at 86% 58%,#fff 0 .5px,transparent 1px),
    radial-gradient(circle at 76% 84%,#fff 0 .4px,transparent .9px);
}
.direct-montreal[data-moment=nuit] .direct-etoiles { opacity: 1; animation: direct-scintille 5s ease-in-out infinite; }
.direct-montreal .direct-ciel svg { position: relative; width: 26px; height: 26px; overflow: visible; }
.direct-montreal .i-soleil { fill: #ffd34a; }
.direct-montreal .i-halo { fill: #fff3b0; opacity: .35; transform-box: fill-box; transform-origin: center; animation: direct-halo 4s ease-in-out infinite; }
.direct-montreal .i-lune { fill: #f6ecc4; filter: drop-shadow(0 0 2px rgba(255,240,190,.55)); }
.direct-montreal .i-nuage { fill: #fff; filter: drop-shadow(0 1px 1px rgba(20,40,70,.18)); animation: direct-nuage 7s ease-in-out infinite; }
.direct-montreal .i-fond { fill: #e5ebf2; animation-duration: 9s; animation-direction: reverse; }
.direct-montreal .i-sombre { fill: #d9dee6; }
.direct-montreal[data-moment=nuit] .i-nuage { fill: #c9d2e3; }
.direct-montreal .i-goutte { fill: none; stroke: #f2f8ff; stroke-width: 1.7; stroke-linecap: round; animation: direct-pluie 1.1s linear infinite; }
.direct-montreal .i-flocon { fill: #fff; animation: direct-neige 2.4s ease-in-out infinite; }
.direct-montreal .i-eclair { fill: #ffd34a; animation: direct-eclair 3.5s linear infinite; }
.direct-montreal .i-brume { fill: #f2f5f8; opacity: .9; }
.direct-montreal .direct-texte,
.direct-montreal .direct-meteo { display: grid; gap: 3px; align-content: center; }
.direct-montreal .direct-heure {
  font: 400 19px/1 var(--serif, Georgia, serif);
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--ink-deep, #0f3142);
}
.direct-montreal .direct-ville { font-size: 11.5px; font-weight: 600; color: var(--muted, #56707a); }
.direct-montreal .direct-meteo { margin-inline-start: -2px; }
.direct-montreal .direct-meteo[hidden] { display: none; }
.direct-montreal .direct-meteo[hidden] + .direct-filet { display: none; }
.direct-montreal .direct-temp {
  font: 400 19px/1 var(--serif, Georgia, serif);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--ink-deep, #0f3142);
}
.direct-montreal .direct-cond { font-size: 11.5px; color: var(--muted, #56707a); }
.direct-montreal .direct-filet { width: 1px; height: 30px; background: linear-gradient(180deg,transparent,rgba(23,63,82,.22),transparent); }
.direct-montreal .direct-activite { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; color: var(--ink-deep, #0f3142); }
.direct-montreal .direct-point {
  position: relative;
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  background: var(--statut);
  box-shadow: 0 0 0 3px color-mix(in srgb,var(--statut) 18%,transparent);
}
.direct-montreal .direct-point::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--statut);
  animation: direct-pouls 2.6s ease-out infinite;
}
@keyframes direct-pouls { 0% { transform: scale(1); opacity: .5; } 70%, 100% { transform: scale(3); opacity: 0; } }
@keyframes direct-halo { 0%, 100% { transform: scale(1); opacity: .3; } 50% { transform: scale(1.15); opacity: .5; } }
@keyframes direct-nuage { 0%, 100% { transform: translateX(-1px); } 50% { transform: translateX(1.2px); } }
@keyframes direct-pluie { 0% { transform: translateY(-1.5px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(2px); opacity: 0; } }
@keyframes direct-neige { 0%, 100% { transform: translateY(-.6px); } 50% { transform: translateY(.8px); } }
@keyframes direct-eclair { 0%, 86%, 100% { opacity: .85; } 88%, 93% { opacity: 1; filter: drop-shadow(0 0 3px #fff3a0); } 90% { opacity: .3; } }
@keyframes direct-scintille { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media(prefers-reduced-motion:reduce) {
  .direct-montreal *, .direct-montreal *::after { animation: none !important; }
}
.entete .direct-entete {
  position: absolute;
  right: var(--gouttiere, 48px);
  bottom: 15px;
}
.hall-tete .direct-hall { display: none; text-transform: none; letter-spacing: 0; }
@media(max-width:1279px) {
  .entete .direct-entete { display: none; }
  .hall-tete .direct-hall { display: inline-flex; margin-inline: auto; }
}
html.direct-serre .entete .direct-entete { display: none; }
html.direct-serre .hall-tete .direct-hall { display: inline-flex; margin-inline: auto; }
@media(max-width:640px) {
  .hall-tete { flex-wrap: wrap; row-gap: 12px; }
  .hall-tete .direct-hall { order: 3; margin-inline: 0; flex-wrap: wrap; row-gap: 10px; max-width: 100%; }
  .hall-tete .direct-hall .direct-filet:nth-last-child(2) { display: none; }
  .hall-tete .direct-hall .direct-activite { flex-basis: 100%; white-space: normal; }
}
[dir=rtl] .entete .direct-entete { right: auto; left: var(--gouttiere, 48px); }
@media(forced-colors:active) {
  .direct-montreal .direct-ciel { border: 1px solid CanvasText; }
}