/* =========================================================
   PCR — Boutons flottants (FAB)
   Dépend : variables.css
   - Opaque, sans halo/blur
   - Radius = hamburger
   - Dashicons only (blanc)
   - Centrage parfait
   ========================================================= */

:root{
  --pcr-fab-size: 58px;
  --pcr-fab-gap: 12px;
  --pcr-fab-right: 18px;
  --pcr-fab-bottom: 18px;

  --pcr-fab-radius: var(--pcr-radius-md, 12px);
  --pcr-fab-fg: #fff;

  --pcr-fab-bg: var(--pcr-color-primary, #0a5cff);
  --pcr-fab-bg-hover: var(--pcr-color-primary-hover, #0848c9);

  --pcr-fab-item-bg: var(--pcr-color-surface-2, #111c33);
  --pcr-fab-item-bg-hover: var(--pcr-menu-hover-bg, rgba(255,255,255,.06));

  --pcr-fab-border: var(--pcr-color-border, rgba(255,255,255,.12));
  --pcr-fab-shadow: var(--pcr-shadow-md, 0 10px 30px rgba(0,0,0,.45));
}

/* Wrapper */
.pcr-fab{
  position: fixed;
  right: max(var(--pcr-fab-right), env(safe-area-inset-right));
  bottom: max(var(--pcr-fab-bottom), env(safe-area-inset-bottom));
  z-index: var(--pcr-z-fab, 5000);
  -webkit-tap-highlight-color: transparent;
}

/* Backdrop click-outside : toujours sous les boutons */
.pcr-fab__backdrop{
  position: fixed;
  inset: 0;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

/* Stack vertical */
.pcr-fab__stack{
  position: absolute;
  right: 0;
  bottom: calc(var(--pcr-fab-size) + var(--pcr-fab-gap));
  display: flex;
  flex-direction: column;
  gap: var(--pcr-fab-gap);

  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity var(--pcr-dur, .25s) var(--pcr-ease, ease),
              transform var(--pcr-dur, .25s) var(--pcr-ease, ease);

  z-index: 1; /* au-dessus du backdrop */
}

/* =========================================================
   Reset commun pour A et BUTTON
   ========================================================= */

.pcr-fab__item,
.pcr-fab__toggle{
  appearance: none;
  -webkit-appearance: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: var(--pcr-fab-size);
  height: var(--pcr-fab-size);
  padding: 0;
  margin: 0;

  border-radius: var(--pcr-fab-radius);
  border: 1px solid var(--pcr-fab-border);

  text-decoration: none;
  cursor: pointer;
  user-select: none;

  outline: none;
  box-shadow: none;

  -webkit-tap-highlight-color: transparent;
}

/* Actions */
.pcr-fab__item{
  background: var(--pcr-fab-item-bg);
  color: var(--pcr-fab-fg);

  opacity: 0;
  transform: translateY(12px);
  transition: transform var(--pcr-dur, .25s) var(--pcr-ease, ease),
              opacity var(--pcr-dur, .25s) var(--pcr-ease, ease),
              background var(--pcr-dur-fast, .18s) var(--pcr-ease, ease);
}

.pcr-fab__item:hover{
  background: var(--pcr-fab-item-bg-hover);
}

/* Toggle */
.pcr-fab__toggle{
  background: var(--pcr-fab-bg);
  box-shadow: var(--pcr-fab-shadow);
  position: relative;
  z-index: 2;
}

.pcr-fab__toggle:hover{ background: var(--pcr-fab-bg-hover); }
.pcr-fab__toggle:active{ transform: translateY(1px); }

/* =========================================================
   Wrappers icônes (ne doivent pas perturber le centrage)
   ========================================================= */

.pcr-fab__icon,
.pcr-fab__mainIcon,
.pcr-fab__x{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* IMPORTANT : croix cachée par défaut (sinon double icône) */
.pcr-fab__x{
  display: none; /* ✅ fermé => invisible */
}

/* Dashicons : centrage parfait */
.pcr-fab .dashicons{
  display: inline-block;
  vertical-align: middle;

  color: var(--pcr-fab-fg);

  /* Dashicons sont des icônes font : centré via line-height = height */
  width: 24px;
  height: 24px;
  font-size: 24px;
  line-height: 24px;

  margin: 0;
  padding: 0;

  /* évite certains décalages sur mobiles */
  transform: translateZ(0);
}

/* Option : taille un poil plus grande sur le bouton principal */
.pcr-fab__toggle .dashicons{
  width: 26px;
  height: 26px;
  font-size: 26px;
  line-height: 26px;
}

/* Labels off */
.pcr-fab__label{ display: none; }

/* =========================================================
   ÉTAT OUVERT
   ========================================================= */

.pcr-fab.is-open .pcr-fab__backdrop{
  pointer-events: auto;
  opacity: 1;
}

.pcr-fab.is-open .pcr-fab__stack{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.pcr-fab.is-open .pcr-fab__item{
  opacity: 1;
  transform: translateY(0);
}

/* Stagger */
.pcr-fab.is-open .pcr-fab__item:nth-child(1){ transition-delay: 0ms; }
.pcr-fab.is-open .pcr-fab__item:nth-child(2){ transition-delay: 45ms; }
.pcr-fab.is-open .pcr-fab__item:nth-child(3){ transition-delay: 90ms; }
.pcr-fab.is-open .pcr-fab__item:nth-child(4){ transition-delay: 135ms; }

/* Switch icon -> X */
.pcr-fab.is-open .pcr-fab__mainIcon{ display: none; }
.pcr-fab.is-open .pcr-fab__x{ display: inline-flex; }

/* Focus visible (propre) */
.pcr-fab__item:focus-visible,
.pcr-fab__toggle:focus-visible{
  box-shadow: var(--pcr-focus-ring, 0 0 0 3px rgba(64,196,255,.28));
}

/* WP admin bar */
#wpadminbar{
  z-index: var(--pcr-z-adminbar, 100000) !important;
}