/* Focal Pictures — écran de chargement UNIQUE (source de vérité de tous les loaders du site vitrine).
   Voile blanc plein écran : logotype, baseline, « Paris hh:mm », contact, % réel, filet ocre ; à la fin il se réduit vers le haut (0,5 s).
   Même habillage que la carte de visite de la home v2. Piloté par focal-loader.js (FocalLoader.show / set / hide). */
.fl {
  --fl-margin: 36px; --fl-gutter: 12px;
  position: fixed; inset: 0 0 auto 0; height: 100%; z-index: 9999;
  overflow: hidden;
  background: #F8F6F3; color: #6B6560;
  font: 14px/1.4 'Host Grotesk', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  transition: height .5s cubic-bezier(0.22, 1, 0.36, 1), opacity .2s ease;
}
.fl.is-fading { opacity: 0; }
.fl.is-hiding { height: 0; }
.fl.is-off { display: none; }
.fl-in { position: absolute; left: 0; right: 0; top: 0; height: 100vh; height: 100svh; } /* contenu immobile pendant que le voile se réduit */
.fl-logo {
  position: absolute; top: 24px; left: var(--fl-margin);
  width: calc((100% - 2 * var(--fl-margin) - 5 * var(--fl-gutter)) / 6 * 4 + 3 * var(--fl-gutter));
  line-height: 0;
}
.fl-logo img { display: block; width: 100%; height: auto; }
.fl-row {
  position: absolute; left: 0; right: 0; bottom: 24px; padding: 0 var(--fl-margin);
  display: grid; grid-template-columns: repeat(6, 1fr); column-gap: var(--fl-gutter); align-items: baseline;
  color: #141210;
}
.fl-base { grid-column: 1 / 3; }
.fl-city { grid-column: 3 / 4; }
.fl-mail { grid-column: 5 / 6; color: inherit; text-decoration: none; }
.fl-pct { grid-column: 6 / 7; justify-self: end; font-weight: 500; font-variant-numeric: tabular-nums; }
.fl-time { margin-left: 8px; font-variant-numeric: tabular-nums; }
.fl-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: #ECEAE7; }
.fl-fill { height: 100%; background: #C4903A; transform-origin: left center; transform: scaleX(0); transition: transform .3s cubic-bezier(0.22, 1, 0.36, 1); }
.fl.is-reset .fl-fill { transition: none; }
@media (max-width: 767px) {
  .fl { --fl-margin: 20px; --fl-gutter: 8px; }
  .fl-logo { width: calc(100% - 2 * var(--fl-margin)); }
  .fl-row { bottom: 16px; row-gap: 8px; }
  .fl-base { grid-column: 1 / 5; grid-row: 1; }
  .fl-city { grid-column: 5 / 7; grid-row: 1; justify-self: end; }
  .fl-mail { grid-column: 1 / 5; grid-row: 2; }
  .fl-pct { grid-column: 5 / 7; grid-row: 2; }
}
@media (prefers-reduced-motion: reduce) { .fl, .fl-fill { transition: none; } }