/* =========================================================================
 *  floating-cta.css — CTA flottant premium (mobile only)
 *  encheres-chu-lille · Fonds de dotation du CHU de Lille
 *  -----------------------------------------------------------------------
 *  Activé sous 768px. Masque le `.header-cta` du header sticky et affiche
 *  un CTA fixé en bas de viewport, or institutionnel sur navy, halo doré
 *  animé (respect prefers-reduced-motion), safe-area-inset-bottom géré.
 * ========================================================================= */

/* Caché par défaut (desktop / tablet ≥ 768px) */
.floating-cta { display: none; }

@media (max-width: 767px) {

  /* Masque le CTA du header sticky en mobile (remplacé par le flottant) */
  .header-cta { display: none !important; }

  /* CTA flottant premium */
  .floating-cta {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 40; /* sous .skip-link (9999) et sous le header sticky (50) */

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-height: 56px;
    padding: 16px 22px;

    background: var(--accent, #C9A844);
    color: var(--accent-fg, #07152A);
    font-family: inherit;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.01em;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;

    border: none;
    border-radius: 14px;

    /* Ombre portée intense + halo doré sous-jacent */
    box-shadow:
      0 18px 42px -10px rgba(0, 0, 0, 0.60),
      0 8px 22px -6px rgba(201, 168, 68, 0.50);

    /* Permet à ::before de se placer en dessous via z-index local */
    isolation: isolate;

    transition:
      opacity 250ms cubic-bezier(0.4, 0, 0.2, 1),
      transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
      filter .18s ease,
      box-shadow .18s ease;
    -webkit-tap-highlight-color: transparent;
  }

  /* État masqué : CTA glisse vers le bas et disparaît (anti-doublon
     quand le formulaire #form ou la confirmation #confirm est visible) */
  .floating-cta.is-hidden {
    opacity: 0;
    transform: translateY(120%);
    pointer-events: none;
  }
  /* Empêche le halo de pulser quand le CTA est masqué */
  .floating-cta.is-hidden::before { animation: none; opacity: 0; }

  /* Halo doré pulsant (effet premium) */
  .floating-cta::before {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 20px;
    background: radial-gradient(closest-side,
                                rgba(201, 168, 68, 0.55) 0%,
                                rgba(201, 168, 68, 0.0) 70%);
    z-index: -1;
    opacity: 0;
    animation: floating-cta-glow 2400ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
    pointer-events: none;
  }

  @keyframes floating-cta-glow {
    0%, 100% { opacity: 0;   transform: scale(0.96); }
    50%      { opacity: 1;   transform: scale(1.06); }
  }

  .floating-cta:hover,
  .floating-cta:focus-visible {
    filter: brightness(1.06);
  }
  .floating-cta:active {
    transform: translateY(1px);
    box-shadow:
      0 10px 24px -8px rgba(0, 0, 0, 0.55),
      0 4px 12px -4px rgba(201, 168, 68, 0.40);
  }

  /* Focus visible accessible (sur or, on tape blanc 3 px) */
  .floating-cta:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 3px;
  }

  /* Respect prefers-reduced-motion : pas d'animation, halo statique discret */
  @media (prefers-reduced-motion: reduce) {
    .floating-cta { transition: none; }
    .floating-cta::before {
      animation: none;
      opacity: 0.45;
      transform: scale(1.02);
    }
    /* Pas d'animation de glissement : on coupe simplement l'affichage */
    .floating-cta.is-hidden { display: none; }
  }

  /* Mode haut contraste : bordure marquée */
  @media (prefers-contrast: more) {
    .floating-cta {
      border: 2px solid #07152A;
      box-shadow:
        0 18px 42px -8px rgba(0, 0, 0, 0.85),
        0 0 0 1px rgba(255, 255, 255, 0.20);
    }
    .floating-cta::before { display: none; }
  }

  /* État cd-off (clôture passée) — désactivation visuelle */
  html.cd-off .floating-cta {
    opacity: 0.55;
    pointer-events: none;
    cursor: not-allowed;
  }
  html.cd-off .floating-cta::before { animation: none; opacity: 0; }

  /* Padding bas du body pour que le CTA ne masque pas la fin du contenu */
  body {
    padding-bottom: calc(56px + 32px + env(safe-area-inset-bottom, 0px));
  }
}