/* Boîte à outils commune : chaque site définit ses couleurs avec les variables --kit-* sur :root
   et [data-theme="dark"]. Rien n'apparaît ni ne disparaît d'un coup ; tout mouvement est coupé si
   l'appareil demande moins d'animations (la classe .motion n'est alors pas posée). */

:root {
  --kit-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --kit-radius: 14px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  color-scheme: dark;
}

@view-transition {
  navigation: auto;
}
::view-transition-old(root) {
  animation: kit-fade 0.22s ease-in both reverse;
}
::view-transition-new(root) {
  animation: kit-fade 0.38s ease-out both;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

@keyframes kit-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes kit-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* La page arrive en fondu, au premier affichage comme à chaque changement de page. */
.motion body {
  animation: kit-fade 0.5s ease-out backwards;
}

/* ---------- Apparitions au défilement ---------- */
.motion [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.8s var(--kit-ease),
    transform 0.8s var(--kit-ease);
}
.motion [data-reveal="fade"] {
  transform: none;
}
.motion [data-reveal="zoom"] {
  transform: scale(0.96);
}
.motion [data-reveal].is-in {
  opacity: 1;
  transform: none;
}
.motion [data-reveal="stagger"] {
  opacity: 1;
  transform: none;
}
.motion [data-reveal="stagger"] > * {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.7s var(--kit-ease),
    transform 0.7s var(--kit-ease);
}
.motion [data-reveal="stagger"].is-in > * {
  opacity: 1;
  transform: none;
}
.motion [data-reveal="stagger"] > :nth-child(2) { transition-delay: 70ms; }
.motion [data-reveal="stagger"] > :nth-child(3) { transition-delay: 140ms; }
.motion [data-reveal="stagger"] > :nth-child(4) { transition-delay: 210ms; }
.motion [data-reveal="stagger"] > :nth-child(5) { transition-delay: 280ms; }
.motion [data-reveal="stagger"] > :nth-child(6) { transition-delay: 350ms; }
.motion [data-reveal="stagger"] > :nth-child(n + 7) { transition-delay: 420ms; }
/* Si le script ne tourne jamais, tout finit par s'afficher. */
.motion:not(.motion-ready) [data-reveal],
.motion:not(.motion-ready) [data-reveal="stagger"] > * {
  animation: kit-fade 0.6s 2.5s both;
}
@media print {
  [data-reveal],
  [data-reveal] > * {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---------- Accessibilité ---------- */
.kit-skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--kit-fg);
  color: var(--kit-bg);
  font-weight: 600;
  transition: top 0.2s var(--kit-ease);
}
.kit-skip:focus {
  top: 12px;
}
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
:focus-visible {
  outline: 2px solid var(--kit-accent);
  outline-offset: 3px;
}

/* ---------- Bandeau « site de démonstration » ---------- */
.demo-bar {
  position: relative;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 7px 44px 7px 16px;
  font: 500 13px/1.4 system-ui, sans-serif;
  letter-spacing: 0.01em;
  text-align: center;
  color: #e8ecf6;
  background: #0b1020;
  overflow: hidden;
  transition:
    opacity 0.32s ease,
    margin-top 0.36s var(--kit-ease);
}
.demo-bar a {
  color: #fff;
  text-underline-offset: 3px;
}
.demo-bar__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3d8bff, #ff8a1f);
  flex: none;
}
.demo-bar__close {
  position: absolute;
  right: 8px;
  top: 50%;
  translate: 0 -50%;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.demo-bar__close:hover {
  background: rgba(255, 255, 255, 0.1);
}
.demo-bar.is-leaving {
  opacity: 0;
  margin-top: -40px;
}

/* ---------- Bouton de thème ---------- */
.kit-theme {
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--kit-line);
  background: var(--kit-surface);
  color: var(--kit-fg);
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    transform 0.2s var(--kit-ease);
}
.kit-theme:hover {
  transform: rotate(-12deg);
}
.kit-theme svg {
  width: 18px;
  height: 18px;
}
.kit-theme .kit-theme__sun {
  display: none;
}
[data-theme="dark"] .kit-theme .kit-theme__sun {
  display: block;
}
[data-theme="dark"] .kit-theme .kit-theme__moon {
  display: none;
}

/* ---------- Appel BinuxLabs flottant ---------- */
.binux-cta {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 55;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 12px;
  border-radius: 999px;
  background: #0b1020;
  color: #fff;
  font: 600 14px/1.2 system-ui, sans-serif;
  text-decoration: none;
  box-shadow: 0 14px 40px -12px rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition:
    opacity 0.4s ease,
    transform 0.4s var(--kit-ease),
    box-shadow 0.25s ease;
}
.binux-cta.is-in {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.binux-cta:hover {
  box-shadow: 0 18px 46px -10px rgba(61, 139, 255, 0.55);
}
.binux-cta__mark {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #0070ff, #6534f8 55%, #fb840c);
  font-size: 12px;
  font-weight: 800;
}
.binux-cta small {
  display: block;
  font-weight: 500;
  font-size: 11px;
  opacity: 0.72;
}
@media (max-width: 560px) {
  .binux-cta {
    right: 12px;
    bottom: 12px;
    padding: 8px 12px 8px 8px;
    font-size: 13px;
  }
}

/* ---------- Signature ---------- */
.signe-binuxlabs {
  font-size: 13px;
  opacity: 0.75;
}
.signe-binuxlabs a {
  color: inherit;
  font-weight: 600;
  text-underline-offset: 3px;
}

/* ---------- Fenêtres ---------- */
dialog.kit-dialog {
  border: 0;
  padding: 0;
  max-width: min(640px, calc(100vw - 32px));
  width: 100%;
  max-height: calc(100dvh - 48px);
  border-radius: 20px;
  background: var(--kit-surface);
  color: var(--kit-fg);
  box-shadow: 0 40px 120px -30px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  transition:
    opacity 0.28s ease,
    transform 0.28s var(--kit-ease);
}
dialog.kit-dialog::backdrop {
  background: rgba(6, 8, 16, 0.55);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.28s ease;
}
dialog.kit-dialog.is-open {
  opacity: 1;
  transform: none;
}
dialog.kit-dialog.is-open::backdrop {
  opacity: 1;
}

/* ---------- Messages ---------- */
.kit-toasts {
  position: fixed;
  left: 50%;
  bottom: 22px;
  translate: -50% 0;
  z-index: 90;
  display: grid;
  gap: 8px;
  justify-items: center;
  pointer-events: none;
}
.kit-toast {
  padding: 11px 18px;
  border-radius: 999px;
  background: var(--kit-fg);
  color: var(--kit-bg);
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 14px 40px -14px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.32s ease,
    transform 0.32s var(--kit-ease);
}
.kit-toast.is-in {
  opacity: 1;
  transform: none;
}
.kit-toast--warn {
  background: #b4321f;
  color: #fff;
}

/* Bloc qui apparaît sur place (message, résultat, étape suivante). */
.kit-appear {
  animation: kit-rise 0.42s var(--kit-ease) backwards;
}