/* Couleurs de l'interface : blanc et noir seulement, la couleur vit dans la trame */
:root {
  --fond: #FFFFFF;
  --encre: #000000;
  --secondaire: #6C6C70;
  --filet: #E5E5EA;
}

/* Mode sombre : réglage du téléphone, ou bouton de la page */
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="clair"]) {
    --fond: #000000;
    --encre: #FFFFFF;
    --secondaire: #AEAEB2;
    --filet: #2C2C2E;
  }
}
:root[data-mode="sombre"] {
  --fond: #000000;
  --encre: #FFFFFF;
  --secondaire: #AEAEB2;
  --filet: #2C2C2E;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--fond);
  color: var(--encre);
  font-family: "Urbanist", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

main, .entete, .pied {
  max-width: 560px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* En-tête */
.entete {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  padding-bottom: 20px;
}
.marque { font-weight: 600; }
.bouton-mode {
  background: none;
  border: 1px solid var(--filet);
  color: var(--encre);
  font: inherit;
  font-size: 14px;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
}

/* Accroche */
.accroche { padding: 48px 0 40px; }
.accroche h1 {
  font-size: 40px;
  font-weight: 600;
  line-height: 1.1;
  margin-bottom: 16px;
}
.accroche p { color: var(--secondaire); max-width: 440px; }

/* Carte du chapitre du jour */
.carte {
  border: 1px solid var(--filet);
  border-radius: 24px;
  padding: 20px;
}
.carte-haut {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.date {
  font-family: "Doto", monospace;
  font-weight: 700;
  font-size: 19px;
}
.pastille {
  font-size: 14px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 999px;
}
.reference {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 16px;
}
.trame {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
}
.verset {
  font-family: "Libre Caslon Text", Georgia, serif;
  font-size: 19px;
  line-height: 1.55;
  margin-top: 20px;
}
.source {
  color: var(--secondaire);
  font-size: 14px;
  margin: 8px 0 20px;
}
.bouton {
  width: 100%;
  background: var(--encre);
  color: var(--fond);
  border: none;
  border-radius: 999px;
  font: inherit;
  font-weight: 500;
  padding: 16px;
  cursor: pointer;
}
.bouton:active { opacity: 0.8; }

/* La méthode */
.methode, .genres { padding-top: 64px; }
.methode h2, .genres h2 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 20px;
}
.methode ol { list-style: none; }
.methode li {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--filet);
}
.numero {
  font-family: "Doto", monospace;
  font-weight: 700;
  font-size: 18px;
  min-width: 32px;
}
.methode h3 { font-size: 18px; font-weight: 600; }
.methode p { color: var(--secondaire); }

/* Les genres */
.genres > p { color: var(--secondaire); margin-bottom: 16px; }
.liste-genres { display: flex; flex-wrap: wrap; gap: 8px; }
.liste-genres button {
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  border: none;
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
}
.liste-genres button[aria-pressed="true"] {
  outline: 2px solid var(--encre);
  outline-offset: 2px;
}

/* Pied de page */
.pied {
  color: var(--secondaire);
  font-size: 14px;
  padding-top: 64px;
  padding-bottom: 40px;
}

@media (max-width: 400px) {
  .accroche h1 { font-size: 32px; }
}

/* Animations : entrée douce des sections, et retour au toucher des boutons */
.apparait {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.apparait.visible { opacity: 1; transform: none; }
.carte.apparait { transition-delay: 0.12s; }

.methode li {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.methode.visible li { opacity: 1; transform: none; }
.methode.visible li:nth-child(2) { transition-delay: 0.08s; }
.methode.visible li:nth-child(3) { transition-delay: 0.16s; }
.methode.visible li:nth-child(4) { transition-delay: 0.24s; }
.methode.visible li:nth-child(5) { transition-delay: 0.32s; }

.bouton, .liste-genres button, .bouton-mode {
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.bouton:active, .liste-genres button:active, .bouton-mode:active { transform: scale(0.97); }

/* Pour qui a réduit les animations dans les réglages du téléphone */
@media (prefers-reduced-motion: reduce) {
  .apparait, .methode li { opacity: 1; transform: none; transition: none; }
}