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

   The PowerPoint export control, identical on both product pages because both
   load this one file and deck-export.js builds the markup. Julien, 31/08/2026:
   *« La fonction d'export PPTX doit être la même dans entris et exact. »* —
   which covers where the button sits and what it looks like, not only what it
   writes.

   It sits at the bottom right rather than in the bar at the top, because the top
   bar is frozen: *« le menu du haut ne doit en aucun cas changer ou bouger quoi
   qu'il arrive »*. Anything a page needs beyond the menu goes below it.

   No palette variables: this control is dropped onto two pages whose stylesheets
   define different ones, so every colour here is literal. */

.deckexport {
  position: fixed;
  right: 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: 8px;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
}

.deckexport-btn,
.deckexport-logo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  padding: 11px 16px;
  cursor: pointer;
  border: 1px solid rgba(148, 163, 184, .28);
  background: rgba(15, 23, 42, .82);
  color: #e2e8f0;
  /* The control floats over screenshots, so it needs its own separation from
     whatever scrolls beneath it. */
  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;
}

.deckexport-btn {
  background: #2563eb;
  border-color: rgba(37, 99, 235, .5);
  color: #ffffff;
}

.deckexport-btn:hover { background: #3b82f6; }
.deckexport-logo:hover { background: rgba(30, 41, 59, .92); }
.deckexport-btn:active, .deckexport-logo:active { transform: translateY(1px); }

.deckexport-btn:focus-visible,
.deckexport-logo:focus-visible,
.deckexport-logo:focus-within {
  outline: 2px solid #60a5fa;
  outline-offset: 2px;
}

.deckexport-btn[disabled] { opacity: .65; cursor: progress; }

/* The partner-logo picker is a "+" and nothing more: its wording lives in the tooltip
   and in the accessible name, so the control stays out of the way of the page it
   floats over. Once a logo is stored the pill turns green — a state worth seeing
   before you export, since that logo goes on the cover. */
.deckexport-logo { padding: 11px 13px; }
.deckexport-logo[data-set="1"] {
  border-color: rgba(52, 211, 153, .5);
  color: #34d399;
}

/* Readable by assistive technology, invisible on screen — the same trick the site's
   skip link uses. Not display:none, which would remove it from the accessible name. */
.deckexport-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* The file input is the label's own control: clicking the pill opens the picker.
   Hidden with clip rather than display:none, so it stays focusable by keyboard. */
.deckexport-logo input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Light theme: the same two pills, readable on a white page. */
html[data-theme="light"] .deckexport-logo {
  background: rgba(255, 255, 255, .92);
  border-color: rgba(15, 23, 42, .16);
  color: #1e293b;
}
html[data-theme="light"] .deckexport-logo:hover { background: #f1f5f9; }

/* Narrow screens: the partner-logo picker is a presenter's affordance, not a
   visitor's, and on a phone the two pills together cover the content. */
@media (max-width: 700px) {
  .deckexport-logo { display: none; }
  .deckexport { right: 12px; bottom: 12px; }
  .deckexport-btn { padding: 10px 14px; font-size: 12px; }
}

@media print {
  .deckexport { display: none; }
}