/*
  Stylesheet pour l’application de checklist Webflow
  L’interface est conçue pour être claire, moderne et agréable à utiliser. Les couleurs
  et les espacements sont choisis pour rappeler une interface de type SaaS tout en
  restant légère. Le thème se base sur des teintes de bleu et de vert pour
  symboliser la confiance et la réussite.
*/

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  margin: 0;
  background: #f5f7fb;
  color: #333;
  line-height: 1.5;
}

/* Header fixée en haut avec la barre de progression */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #ffffff;
  border-bottom: 1px solid #e0e6f0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
  z-index: 1000;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.header h1 {
  /* Le titre dans l'en-tête est maintenant intégré dans .logo-title,
     ces styles sont déplacés vers la classe .page-title */
}

/* Conteneur pour le logo et le titre dans l'en-tête */
.logo-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Logo Webflow */
.logo {
  height: 32px;
  width: auto;
  display: block;
}

/* Titre principal à côté du logo */
.page-title {
  font-size: 1.6rem;
  margin: 0;
  color: #333;
  font-weight: 600;
}

.url-input {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
}

.url-input label {
  font-weight: 600;
}

.url-input input {
  padding: 8px 10px;
  border: 1px solid #ccd4e0;
  border-radius: 4px;
  min-width: 260px;
  font-size: 0.9rem;
  outline: none;
  transition: border 0.2s;
}

.url-input input:focus {
  border-color: #3f7fe7;
  box-shadow: 0 0 0 2px rgba(63, 127, 231, 0.2);
}

/* Barre de progression */
.progress-bar {
  width: 100%;
  height: 6px;
  background: #e0e6f0;
  overflow: hidden;
}

.progress-bar .progress {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #6cbaff 0%, #3f7fe7 100%);
  transition: width 0.3s ease;
}

/* Espace principal du contenu */
main {
  margin-top: 120px; /* espace pour le header et la barre de progression */
  padding: 20px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* Sections de catégories */
.category {
  margin-bottom: 32px;
}

.category h2 {
  font-size: 1.4rem;
  color: #2f569a;
  margin-bottom: 12px;
  border-left: 4px solid #3f7fe7;
  padding-left: 10px;
}

.category ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.category li {
  background: #ffffff;
  padding: 12px 16px;
  margin-bottom: 8px;
  border-radius: 6px;
  display: flex;
  align-items: flex-start;
  transition: background 0.3s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.category li:last-child {
  margin-bottom: 0;
}

.category li.completed {
  background: #e7f7e7;
}

.category li.completed span {
  text-decoration: line-through;
  color: #2c7a3d;
}

.category input[type='checkbox'] {
  margin-right: 12px;
  transform: scale(1.2);
  cursor: pointer;
}

.category span {
  flex: 1;
}

/* Bouton de génération du PDF */
.pdf-action {
  text-align: center;
  margin: 40px 0;
}

.pdf-action button {
  background: #3f7fe7;
  color: #ffffff;
  padding: 12px 24px;
  font-size: 1rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.3s;
  outline: none;
}

.pdf-action button:hover {
  background: #3265c5;
}

/* ------------------------------------------- */
/* Confettis */
/* Conteneur et pièces de confettis pour l’animation de célébration */
.confetti-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 2000;
}

.confetti-piece {
  position: absolute;
  top: -10px;
  width: 8px;
  height: 8px;
  opacity: 0.9;
  border-radius: 2px;
  animation-name: confetti-fall;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes confetti-fall {
  to {
    transform: translateY(100vh) rotate(720deg);
  }
}