/* ═══════════════════════════════════════════════════════════
   BYSAR — components.css
   Boutons · Animations reveal · Accessibilité · Print
   ═══════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────
   BOUTONS — MINIMAL LINE
   Principe : bordure gauche seule au repos,
   la ligne s'étend vers la droite au hover
   via un pseudo-élément ::before.
   Pas de rectangle complet — élégant, discret,
   cohérent avec l'esthétique galerie.
───────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  font-family: var(--font-body);
  font-size: .65rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: .7rem 0 .7rem 1.1rem;
  border: none;
  border-left: 1px solid var(--dark-mid);
  color: var(--grey);
  background: none;
  position: relative;
  cursor: pointer;
  transition: color var(--t), border-left-color var(--t);
  /* Pas de border-radius — tranchant, architectural */
}

/* Ligne du bas qui se déploie vers la droite */
.btn::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 1px;
  background: var(--off-white);
  transition: width var(--t-slow);
}

.btn:hover {
  color: var(--off-white);
  border-left-color: var(--off-white);
}
.btn:hover::after { width: 100%; }

/* Icône flèche — léger décalage au hover */
.btn i {
  font-size: .6rem;
  transition: transform var(--t);
}
.btn:hover i { transform: translateX(4px); }

/* ── Variante ghost
   Encore plus discret — pas de bordure gauche
   au repos, apparaît seulement au hover ── */
.btn-ghost {
  border-left-color: transparent;
  color: var(--grey);
}
.btn-ghost:hover {
  border-left-color: var(--grey-light);
  color: var(--grey-light);
}
.btn-ghost::after { background: var(--grey-light); }

/* ── Variante primary
   Utilisée pour les CTA forts — la ligne
   gauche est blanche dès le départ ── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  font-family: var(--font-body);
  font-size: .65rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: .7rem 0 .7rem 1.1rem;
  border: none;
  border-left: 1px solid var(--off-white);
  color: var(--off-white);
  background: none;
  position: relative;
  cursor: pointer;
  transition: color var(--t);
}
.btn-primary::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 1px;
  background: var(--pure-white);
  transition: width var(--t-slow);
}
.btn-primary:hover { color: var(--pure-white); }
.btn-primary:hover::after { width: 100%; }
.btn-primary i {
  font-size: .6rem;
  transition: transform var(--t);
}
.btn-primary:hover i { transform: translateX(4px); }

/* ── Variante secondary
   Identique à .btn, ton intermédiaire ── */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  font-family: var(--font-body);
  font-size: .65rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: .7rem 0 .7rem 1.1rem;
  border: none;
  border-left: 1px solid var(--mid);
  color: var(--grey-light);
  background: none;
  position: relative;
  cursor: pointer;
  transition: color var(--t), border-left-color var(--t);
}
.btn-secondary::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 1px;
  background: var(--grey-light);
  transition: width var(--t-slow);
}
.btn-secondary:hover {
  color: var(--off-white);
  border-left-color: var(--grey-light);
}
.btn-secondary:hover::after { width: 100%; }
.btn-secondary i {
  font-size: .6rem;
  transition: transform var(--t);
}
.btn-secondary:hover i { transform: translateX(4px); }

/* État loading — toutes variantes */
.btn.loading,
.btn-primary.loading,
.btn-secondary.loading {
  opacity: .45;
  pointer-events: none;
}

/* ─────────────────────────────────────────
   ANIMATIONS REVEAL AU SCROLL
───────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.reveal.in-view,
.reveal.in      { opacity: 1; transform: none; }

.reveal-d1 { transition-delay: .07s; }
.reveal-d2 { transition-delay: .14s; }
.reveal-d3 { transition-delay: .21s; }
.reveal-d4 { transition-delay: .28s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration:  .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  html    { scroll-behavior: auto; }
}

/* ─────────────────────────────────────────
   ACCESSIBILITÉ
───────────────────────────────────────── */
:focus-visible {
  outline: 1px solid var(--off-white);
  outline-offset: 3px;
}
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ─────────────────────────────────────────
   FORMULAIRE — Honeypot anti-spam
   Champ piège invisible pour les humains,
   mais rempli automatiquement par les bots.
───────────────────────────────────────── */
.form-honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}


/* ─────────────────────────────────────────
   PRINT
───────────────────────────────────────── */
@media print {
  #site-header, #mobile-menu, #back-to-top,
  #lightbox, .filters { display: none !important; }
  body { background: white; color: black; }
}