/* Copyright (c) 2026 LB IT Cloud SAS. All rights reserved.
   Proprietary source of the LB IT Cloud website. See LICENSE.

   Presentation mode's own chrome: the button that starts it, the pager that
   drives it, the progress bar and the one-off hint. Identical on both product
   pages because both load this one file and present.js builds the markup.

   WHERE THINGS SIT. The PowerPoint control is bottom RIGHT (deck-export.css);
   this one is bottom LEFT. Two reasons rather than one: they must never overlap
   whatever the wording or the language, and the two controls answer two
   different questions — présenter maintenant, emporter pour plus tard.

   Nothing here touches `header.site`. Julien, 31/08/2026: *« le menu du haut ne
   doit en aucun cas changer ou bouger quoi qu'il arrive »* — including in a mode
   that would love the extra 71 px. `siteNavigation.test.ts` fails if any
   stylesheet but chrome.css positions or hides it, and that check is the reason
   this file does not try.

   No palette variables: this is dropped onto two pages whose stylesheets define
   different ones, so every colour here is literal — the same rule deck-export.css
   follows, for the same reason. */

.present-launch,
.present-pager {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 40; /* under the header's 50 — a pinned menu wins over a page control */
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
}

.present-launch-btn,
.present-step,
.present-view,
.present-quit,
.present-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  border: 1px solid rgba(148, 163, 184, .28);
  background: rgba(15, 23, 42, .82);
  color: #e2e8f0;
  /* The controls float over screenshots, so they need their own separation from
     whatever scrolls beneath them. */
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 28px rgba(2, 6, 23, .35);
  transition: background .15s ease, border-color .15s ease, transform .15s ease, opacity .15s ease;
}

.present-launch-btn { padding: 11px 16px; cursor: pointer; }
.present-launch-btn:hover { background: rgba(30, 41, 59, .92); }
.present-launch-btn:active { transform: translateY(1px); }

.present-step,
.present-view,
.present-quit {
  width: 34px;
  height: 34px;
  padding: 0;
  font-size: 17px;
  cursor: pointer;
}

.present-step:hover:not([disabled]),
.present-view:hover,
.present-quit:hover { background: rgba(30, 41, 59, .92); }

/* The second screen. Separated from the pager's arrows by a little air, because
   it is not a step: it opens another window. */
.present-view {
  margin-left: 6px;
  border-color: rgba(59, 130, 246, .45);
  color: #93c5fd;
}
.present-view:hover { color: #dbeafe; }
.present-step:active:not([disabled]) { transform: translateY(1px); }

/* The end of the deck, said by the control rather than by nothing happening. */
.present-step[disabled] { opacity: .35; cursor: default; }

.present-quit {
  margin-left: 4px;
  border-color: rgba(148, 163, 184, .18);
  color: #94a3b8;
}
.present-quit:hover { color: #e2e8f0; }

.present-count {
  padding: 0 14px;
  height: 34px;
  font-variant-numeric: tabular-nums; /* the width must not jump from 9/45 to 10/45 */
  letter-spacing: .02em;
}

.present-launch-btn:focus-visible,
.present-step:focus-visible,
.present-view:focus-visible,
.present-quit:focus-visible {
  outline: 2px solid #60a5fa;
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   The progress bar — pinned to the BOTTOM edge, not under the header.
   Under the header it would have to know the header's height, which chrome.css
   owns and has changed before; at the bottom it depends on nothing. -------- */
.present-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  z-index: 41;
  background: #3b82f6;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .35s ease;
}

/* -------------------------------------------------------------- the one hint */
/* Above the pager, not beside it: side by side they touch on a narrow window —
   at 800 px the hint's left edge reached the pager's ✕. */
.present-hint {
  position: fixed;
  left: 50%;
  bottom: 72px;
  transform: translateX(-50%);
  max-width: calc(100% - 36px);
  text-align: center;
  z-index: 41;
  padding: 10px 18px;
  border-radius: 999px;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: #e2e8f0;
  background: rgba(15, 23, 42, .88);
  border: 1px solid rgba(148, 163, 184, .28);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}
.present-hint[data-show="1"] { opacity: 1; }

/* --------------------------------------------------------------------------
   Which of the two states is showing. Everything is built once and hidden by
   this attribute rather than created and destroyed, so nothing has to be
   re-wired when the mode is entered a second time. ------------------------- */
.present-pager,
.present-bar,
.present-hint { display: none; }

html[data-present="1"] .present-launch { display: none; }
html[data-present="1"] .present-pager { display: flex; }
html[data-present="1"] .present-bar { display: block; }
html[data-present="1"] .present-hint { display: block; }

/* The PowerPoint control steps aside while presenting: a blue pill in the corner
   of a screen a client is reading is noise, and the export is a thing you do
   before or after the meeting, never during it. */
html[data-present="1"] .deckexport { display: none; }

/* Light theme: the same controls, readable on a white page. */
html[data-theme="light"] .present-launch-btn,
html[data-theme="light"] .present-step,
html[data-theme="light"] .present-view,
html[data-theme="light"] .present-quit,
html[data-theme="light"] .present-count,
html[data-theme="light"] .present-hint {
  background: rgba(255, 255, 255, .92);
  border-color: rgba(15, 23, 42, .16);
  color: #1e293b;
}
html[data-theme="light"] .present-launch-btn:hover,
html[data-theme="light"] .present-step:hover:not([disabled]),
html[data-theme="light"] .present-view:hover,
html[data-theme="light"] .present-quit:hover { background: #f1f5f9; }
html[data-theme="light"] .present-quit { color: #64748b; }
html[data-theme="light"] .present-view { color: #1d4ed8; border-color: rgba(37, 99, 235, .35); }

/* A phone is not where anybody presents to a client, and down here the two
   corners of controls cover the content they are meant to help read. The same
   call deck-export.css makes about the partner-logo picker. */
@media (max-width: 700px) {
  .present-launch { display: none; }
}

/* A reader who asked their system for less motion gets the jump, not the glide.
   The mode still works; it simply stops animating between pages. */
@media (prefers-reduced-motion: reduce) {
  .present-bar { transition: none; }
  .present-hint { transition: none; }
}

@media print {
  .present-launch,
  .present-pager,
  .present-bar,
  .present-hint { display: none; }
}

/* ==========================================================================
   AN EMBEDDED COPY OF THE DECK
   The presenter view previews the deck in iframes of the page itself. That copy
   has to look like what the audience sees, and the audience never sees a floating
   export button or a "Présenter" pill. present.js sets the attribute the moment it
   notices it is framed, before anything is painted.
   ========================================================================== */
html[data-embed="1"] .present-launch,
html[data-embed="1"] .present-pager,
html[data-embed="1"] .present-bar,
html[data-embed="1"] .present-hint,
html[data-embed="1"] .deckexport { display: none !important; }

/* ==========================================================================
   THE PRESENTER VIEW — the second window, on the presenter's own screen
   ==========================================================================
   Always dark, whatever the reader's theme. This is a tool used in a dimmed room
   while the projector carries the page, and the previews inside it keep the
   audience's real colours — a dark frame around them is what makes it obvious at
   a glance which of the two screens is the one the client is looking at. */

html[data-view="presenter"],
html[data-view="presenter"] body { overflow: hidden; height: 100%; }

/* Everything the deck page brought with it — header, glows, sections, footer,
   the floating controls — stays in the document so the deck's own scripts keep
   finding their nodes, and is simply not shown. Emptying the body under scripts
   that have already run is how you get a console full of nulls. */
html[data-view="presenter"] body > *:not(.pv) { display: none !important; }

.pv {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.95fr);
  gap: 16px;
  padding: 16px 16px 22px;
  background: #070b16;
  color: #e2e8f0;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.pv-pane { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.pv-side { display: flex; flex-direction: column; gap: 14px; min-height: 0; min-width: 0; }

.pv-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 8px;
}

/* The preview box. The iframe inside it is the PROJECTOR's viewport at full size,
   scaled down by a transform — that is what makes the preview true rather than a
   re-flow of the same page at another width. */
.pv-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #0b1220;
  border: 1px solid rgba(148, 163, 184, .18);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}

/* A FIXED SHARE OF THE WINDOW'S HEIGHT, not an aspect ratio and not a flex share.
   Both of those collapsed it: as `flex: 1` it depended on its parent having a height
   to give, which the parent does not in the stacked layout, and it rendered 2 px tall.
   The frame inside is centred and scaled to fit whatever box it is given — see
   fitFrame() — so this box does not need the projector's proportions, and letterboxing
   is what tells the presenter their audience's screen is a different shape. */
.pv-stage--next {
  flex: none;
  height: 30vh;
  min-height: 120px;
}

.pv-frame {
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  transform-origin: 0 0;
  /* A preview is looked at, not used: a stray click must not follow a link inside
     the audience's page, and a scroll must not desynchronise the two screens. */
  pointer-events: none;
}

/* Past the last screen there is nothing to show next, and an empty black box
   reads as a fault. Say so instead. */
.pv-stage[data-empty="1"] .pv-frame { visibility: hidden; }
.pv-stage[data-empty="0"] .pv-end { display: none; }
.pv-end {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  color: #64748b;
}

.pv-clockrow { display: flex; align-items: center; gap: 10px; }

.pv-clock {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums; /* the width must not jump every second */
  color: #f1f5f9;
}

.pv-reset,
.pv-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, .28);
  background: rgba(15, 23, 42, .9);
  color: #94a3b8;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, opacity .15s ease;
}
.pv-reset { width: 30px; height: 30px; font-size: 15px; }
.pv-reset:hover, .pv-step:hover:not([disabled]) { background: #1e293b; color: #e2e8f0; }
.pv-reset:focus-visible, .pv-step:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; }

.pv-notes {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  border-top: 1px solid rgba(148, 163, 184, .14);
  padding-top: 12px;
}

.pv-notelist { list-style: none; margin: 0; padding: 0; }

.pv-note {
  font-size: 13px;
  line-height: 1.45;
  color: #94a3b8;
  padding: 5px 0 5px 14px;
  position: relative;
}
.pv-note::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #334155;
}
/* An h1 or h2 is the screen's subject; an h3 is one of its points. */
.pv-note--big { font-size: 15px; font-weight: 600; color: #f1f5f9; }
.pv-note--big::before { background: #3b82f6; }
.pv-note--none::before { display: none; }

.pv-controls { display: flex; align-items: center; justify-content: center; gap: 10px; }
.pv-step { width: 42px; height: 38px; font-size: 20px; }
.pv-step[disabled] { opacity: .3; cursor: default; }

.pv-count {
  min-width: 86px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #e2e8f0;
}

.pv-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: #3b82f6;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .3s ease;
  z-index: 101;
}

/* Before the deck has said anything, and after its window is gone. A presenter
   view that silently shows a stale screen is worse than one that says it is on
   its own. */
.pv-veil {
  position: fixed;
  inset: 0;
  z-index: 102;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px;
  text-align: center;
  font-size: 15px;
  color: #94a3b8;
  background: rgba(7, 11, 22, .94);
}
.pv-veil[data-show="1"] { display: flex; }

/* A narrow presenter window — a laptop screen in portrait, a half-tiled window —
   stacks instead of squeezing the previews into strips. */
@media (max-width: 900px) {
  .pv { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1.15fr) minmax(0, 1fr); }
  .pv-stage--next { height: 20vh; }
  /* Stacked, the column runs out of room and the first thing squeezed to nothing was
     the notes — the half a presenter actually reads. So the column scrolls instead of
     crushing, and the notes keep a floor. */
  .pv-side { overflow-y: auto; }
  .pv-notes { flex: none; min-height: 84px; }
}