/* ============================================================
   LUMINEYES — Bouton "Glissez pour envoyer" (slide-to-submit)
   Vanilla. Piste sombre + remplissage doré qui suit la poignée,
   coche de validation à la fin, déclenche le vrai submit Netlify.
   ============================================================ */

.slide-submit {
  position: relative;
  height: 3.6rem;
  border-radius: 2rem;
  border: 1px solid var(--gold, #CD9847);
  background: rgba(8, 8, 7, 0.6);
  overflow: hidden;
  user-select: none;
  touch-action: pan-y;          /* permet le scroll vertical, on capte l'horizontal */
}

/* Remplissage doré (largeur pilotée par le JS via --p : 0 → 1) */
.slide-submit-fill {
  position: absolute;
  inset: 0;
  width: calc(var(--p, 0) * 100%);
  background: linear-gradient(90deg, rgba(205,152,71,0.85), var(--gold, #CD9847));
  transition: width 0.05s linear;
  pointer-events: none;
}

/* Libellé centré */
.slide-submit-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--mono, monospace);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(245, 240, 232, 0.85);
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.slide-submit-label i { font-style: normal; }

/* Poignée à glisser */
.slide-submit-handle {
  position: absolute;
  top: 50%;
  left: 0.3rem;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  border: 0;
  border-radius: 50%;
  background: var(--gold, #CD9847);
  color: #080807;
  font-size: 1.1rem;
  display: grid;
  place-items: center;
  cursor: grab;
  z-index: 2;
  box-shadow: 0 0.4rem 1.4rem rgba(0, 0, 0, 0.5);
  touch-action: none;           /* la poignée capte le geste horizontal */
  transition: transform 0.1s ease, box-shadow 0.2s ease;
}
.slide-submit-handle:active { cursor: grabbing; }
.slide-submit.dragging .slide-submit-handle { box-shadow: 0 0.4rem 2rem rgba(205,152,71,0.6); }

/* Pendant le glissement, le libellé s'estompe progressivement */
.slide-submit.dragging .slide-submit-label { opacity: calc(1 - var(--p, 0)); }

/* État complété : tout doré, coche centrale */
.slide-submit.completed { background: var(--gold, #CD9847); }
.slide-submit.completed .slide-submit-fill { width: 100%; }
.slide-submit.completed .slide-submit-label { opacity: 0; }
.slide-submit.completed .slide-submit-handle {
  left: calc(100% - 3.3rem);
  background: #080807;
  color: var(--gold, #CD9847);
}

.slide-submit.sending,
.slide-submit.sent {
  pointer-events: none;
}

.slide-submit.sending .slide-submit-label,
.slide-submit.sent .slide-submit-label {
  opacity: 1;
  z-index: 3;
  color: #080807;
  font-weight: 700;
}

.slide-submit.sending .slide-submit-handle,
.slide-submit.sent .slide-submit-handle {
  cursor: default;
}

/* Le vrai bouton submit est masqué (déclenché en JS) mais reste dans le DOM
   pour le fallback sans-JS : on le rend visible si le slide n'a pas pris. */
.slide-submit-real {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  color: transparent;
  cursor: pointer;
  z-index: 0;
}
/* Sans JS, .slide-submit n'a pas la classe 'ready' → on montre un bouton plein */
.slide-submit:not(.ready) .slide-submit-real {
  background: var(--gold, #CD9847);
  color: #080807;
  font-family: var(--mono, monospace);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  z-index: 5;
}
.slide-submit:not(.ready) .slide-submit-handle,
.slide-submit:not(.ready) .slide-submit-label { display: none; }

/* Réduction de mouvement : on cache la mécanique de slide, bouton simple */
@media (prefers-reduced-motion: reduce) {
  .slide-submit-handle, .slide-submit-label { display: none; }
  .slide-submit-real {
    background: var(--gold, #CD9847);
    color: #080807;
    font-family: var(--mono, monospace);
    font-size: 0.74rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    z-index: 5;
  }
}

@media (max-width: 640px) {
  .slide-submit-label { font-size: 0.66rem; }
}