/* Horae : mobile d'abord, grands caractères, panneaux clairs sur le calque de fond (vitrail/ciel, js/ambiance.js).
   Allure de livre de prières : caractères Fell (IM Fell DW Pica, licence OFL, repris d'Oragotchi), vélin, encre,
   rubriques en rouge comme dans les missels, filets dorés. */
@font-face { font-family: "IM Fell DW Pica"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/im-fell-dw-pica.woff2) format("woff2"); }
@font-face { font-family: "IM Fell DW Pica"; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/im-fell-dw-pica-italic.woff2) format("woff2"); }
@font-face { font-family: "IM Fell DW Pica SC"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/im-fell-dw-pica-sc.woff2) format("woff2"); }
:root {
  font-size: 19px;
  --fond: #efe6cf;      /* vélin */
  --panneau: #f7f0dc;   /* feuillet */
  --texte: #1d1a16;     /* encre */
  --doux: #6c604c;
  --accent: #a3201a;    /* rubrique */
  --or: #b58a2c;
  --filet: #d4c59d;
  --capitales: "IM Fell DW Pica SC", "IM Fell DW Pica", Georgia, serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "IM Fell DW Pica", Georgia, "Times New Roman", serif;
  background: var(--fond);
  color: var(--texte);
  line-height: 1.5;
}
/* ---------- ambiance de fond (docs/visuel.md § Deux ambiances de fond) ---------- */
#fond-ambiance { position: fixed; inset: 0; z-index: -1; overflow: hidden; }
#fond-ambiance svg { display: block; }

@keyframes tourne-rayons { to { transform: rotate(360deg); } }
.rayons { transform-box: fill-box; transform-origin: center; animation: tourne-rayons 125s linear infinite; }   /* 0,05 rad/s, comme Oragotchi */
@media (prefers-reduced-motion: reduce) {
  .rayons { animation: none; }
}

button {
  font: inherit;
  color: inherit;
  background: var(--panneau);
  border: 1px solid var(--filet);
  border-radius: 0.6rem;
  padding: 0.6rem 1rem;
  cursor: pointer;
}
button:disabled { opacity: 0.4; cursor: default; }
button[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ---------- accueil ---------- */
.topbar { padding: 1rem 1.2rem 1.2rem; position: relative; }
.bouton-partage { position: absolute; top: 0.8rem; right: 0.8rem; background: none; border: 0; padding: 0.4rem; color: inherit; opacity: 0.85; line-height: 0; }
.topbar .date { padding-right: 2.2rem; }
.topbar p { margin: 0.15rem 0; }
.topbar .date { font-size: 1.15rem; font-weight: bold; text-transform: capitalize; }
.topbar .saint { font-size: 1rem; }
.topbar .temps, .topbar .mysteres, .topbar .messe, .topbar .discipline { font-size: 0.95rem; opacity: 0.9; }

.liste-jour { list-style: none; margin: 0; padding: 0.6rem; }
.priere {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--panneau); border-radius: 0.6rem; padding: 0.9rem 1rem; margin: 0.4rem 0;
  font-size: 1.1rem;
}
.priere-ouverte { cursor: pointer; }
.priere-faite { color: var(--doux); cursor: pointer; }
.priere-grisee { opacity: 0.55; cursor: pointer; }
.priere-fermee { opacity: 0.35; }
.priere .marque { font-size: 1.2rem; color: var(--accent); }

.a-tout-moment { padding: 0.6rem 1.2rem 2rem; }
.a-tout-moment h2 {
  display: inline-block; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.7;
  background: var(--panneau); padding: 0.2rem 0.5rem; border-radius: 0.4rem;
}
.a-tout-moment button { display: block; width: 100%; margin: 0.4rem 0; text-align: left; font-size: 1.1rem; }

/* ---------- écran de lecture ---------- */
.entete {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.8rem 1rem; background: var(--panneau); border-bottom: 1px solid var(--filet);
  position: sticky; top: 0;
}
.entete-titre { flex: 1; }
.entete .nom { margin: 0; font-size: 1.2rem; font-weight: bold; }
.entete .section { margin: 0.15rem 0 0; font-size: 0.9rem; opacity: 0.75; font-style: italic; }
.retour, .quitter { border: none; background: none; font-size: 1.4rem; padding: 0.2rem 0.5rem; }

.barre-options { display: flex; gap: 0.5rem; padding: 0.6rem 1rem; flex-wrap: wrap; }

.corps { padding: 1.4rem 1.2rem 2rem; font-size: 1.25rem; min-height: 40vh; background: var(--fond); }
.corps p { margin: 0 0 1rem; }
.corps .verset .marque, .corps .repons .marque { margin-right: 0.3rem; }
.corps .repons { font-weight: bold; }
.corps .litanie { margin: 0 0 0.15rem; }
.annonce-titre { font-size: 1.6rem; font-weight: bold; text-align: center; margin-top: 2rem; }

.pied { padding: 1rem 1.2rem 2rem; }
.pied button { width: 100%; font-size: 1.2rem; background: var(--accent); color: #fff; border: none; }

/* ---------- fêtes marquées ---------- */
.fetes { padding: 0.6rem 0.6rem 0; }
.fete-jour {
  background: var(--panneau); border-left: 0.35rem solid var(--accent); border-radius: 0.6rem;
  padding: 0.8rem 1rem; margin: 0.4rem 0; font-size: 1.1rem; font-weight: bold; cursor: pointer;
}
.fete-veille {
  background: var(--panneau); border-radius: 0.6rem; margin: 0.4rem 0; padding: 0.5rem 1rem;
  font-size: 0.9rem; opacity: 0.7; font-style: italic;
}

/* ---------- bibliothèque ---------- */
.bibliotheque { font-size: 1.05rem; }
.bibliotheque h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.7; margin: 1.4rem 0 0.4rem; }
.bibliotheque .famille ul { list-style: none; margin: 0; padding: 0; }
.bibliotheque .famille li {
  display: flex; justify-content: space-between; align-items: center; gap: 0.6rem;
  background: var(--panneau); border-radius: 0.6rem; padding: 0.7rem 1rem; margin: 0.4rem 0;
}
.bibliotheque .module-prive { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.bibliotheque .id-module { flex: 1; min-width: 10rem; font: inherit; padding: 0.6rem; border: 1px solid var(--filet); border-radius: 0.6rem; }
.bibliotheque .message-prive, .bibliotheque .hors-ligne { font-size: 0.95rem; color: var(--accent); }
.bibliotheque .confirmation-retrait { margin: 0 0 0.5rem; font-size: 0.95rem; }

/* ---------- écran de début de neuvaine ---------- */
.debut-neuvaine label { display: block; margin-bottom: 0.4rem; font-weight: bold; }
.debut-neuvaine input { width: 100%; font: inherit; padding: 0.7rem; border: 1px solid var(--filet); border-radius: 0.6rem; }
.debut-neuvaine .message { color: var(--accent); font-size: 0.95rem; }

/* ---------- cierges de la neuvaine (docs/visuel.md) ---------- */
.neuvaines { padding: 0.6rem 1.2rem 1.5rem; }
.neuvaines-compte {
  display: inline-block; font-size: 0.9rem; opacity: 0.7; margin: 0 0 0.4rem;
  background: var(--panneau); padding: 0.2rem 0.5rem; border-radius: 0.4rem;
}
.neuvaines-cierges { max-height: 16rem; overflow-y: auto; }
.rangee-neuvaine {
  background: var(--panneau); border-radius: 0.6rem; padding: 0.6rem 0.8rem; margin: 0.4rem 0; cursor: pointer;
}
.rangee-neuvaine.interrompue, .rangee-neuvaine.dite { cursor: default; }
.rangee-neuvaine .etat-neuvaine { margin: 0.1rem 0; font-size: 0.85rem; font-style: italic; opacity: 0.75; }
.rangee-neuvaine .titre-neuvaine { margin: 0; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rangee-neuvaine .intention { margin: 0 0 0.3rem; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rangee-neuvaine .cierges { display: flex; gap: 0.15rem; }
.rangee-neuvaine .cierge { width: 1.1rem; height: 3.3rem; }
.rangee-neuvaine.grande .cierge { width: 1.8rem; height: 5.4rem; }
.actions-neuvaine { display: flex; gap: 0.5rem; margin-top: 0.5rem; }

@keyframes vacille { 0%, 100% { transform: scale(1) translateY(0); opacity: 1; } 50% { transform: scale(0.92) translateY(0.5px); opacity: 0.85; } }
.cierge .flamme { animation: vacille 1.6s ease-in-out infinite; transform-origin: 10px 9px; }
@media (prefers-reduced-motion: reduce) { .cierge .flamme { animation: none; } }

/* ---------- rangée Bibliothèque · Bilans · Réglages ---------- */
.accueil-bas { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; padding: 0 1rem 2rem; opacity: 0.85; }
/* largeur selon le texte, jamais coupé : si les trois ne tiennent pas, la rangée passe sur deux lignes, centrée */
.accueil-bas button { flex: 0 1 auto; white-space: nowrap; padding: 0.5rem 0.9rem; font-size: 0.9rem; background: var(--panneau); }

/* ---------- bilans ---------- */
.onglets-bilan { display: flex; gap: 0.4rem; padding: 0.6rem 1.2rem 0; }
.onglets-bilan .onglet { flex: 1; }
.bilans { font-size: 1rem; }
.bilans h2 { font-size: 1rem; }
.nav-jour { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.8rem; }
.nav-jour button { border: none; background: none; font-size: 1.4rem; padding: 0.2rem 0.6rem; }
.nav-jour .jour-affiche { margin: 0; font-weight: bold; text-transform: capitalize; }
.liste-historique { list-style: none; margin: 0; padding: 0; }
.liste-historique li {
  display: flex; gap: 0.8rem; background: var(--panneau); border-radius: 0.5rem;
  padding: 0.6rem 0.9rem; margin: 0.3rem 0;
}
.liste-historique .heure { opacity: 0.6; font-variant-numeric: tabular-nums; }
.bilans .vide { opacity: 0.6; font-style: italic; }

.grille-bilan { overflow-x: auto; margin-bottom: 1rem; }
.grille-bilan table { border-collapse: collapse; width: 100%; }
.grille-bilan th, .grille-bilan td { padding: 0.25rem 0.35rem; text-align: center; white-space: nowrap; }
.grille-bilan thead th { font-size: 0.75rem; opacity: 0.7; font-weight: normal; }
.grille-bilan tbody th { text-align: left; font-weight: normal; font-size: 0.85rem; padding-right: 0.6rem; }
.pastille { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 50%; border: 1px solid var(--accent); }
.pastille.pleine { background: var(--accent); }
.totaux-bilan, .constats-bilan { list-style: none; margin: 0 0 1rem; padding: 0; font-size: 0.95rem; }
.totaux-bilan li, .constats-bilan li { padding: 0.2rem 0; }

.carte-annee { display: grid; grid-template-rows: repeat(7, 1fr); grid-auto-flow: column; grid-auto-columns: 0.7rem; gap: 2px; overflow-x: auto; padding-bottom: 0.4rem; }
.case-annee { width: 0.7rem; height: 0.7rem; border-radius: 2px; background: var(--accent); }
.case-annee.vide { background: none; }
.legende-annee { font-size: 0.85rem; opacity: 0.7; }

/* ---------- réglages ---------- */
.reglages h2 { font-size: 1rem; margin: 1.2rem 0 0.5rem; }
.ligne-fenetre {
  background: var(--panneau); border-radius: 0.6rem; padding: 0.7rem 0.9rem; margin: 0.4rem 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem;
}
.ligne-fenetre .libelle-fenetre { flex: 1 1 100%; margin: 0; font-weight: bold; }
.ligne-fenetre label { display: flex; align-items: center; gap: 0.3rem; font-size: 0.9rem; }
.ligne-fenetre input[type="time"] { font: inherit; }
.message-fenetres, .message-sauvegarde { color: var(--accent); font-size: 0.9rem; }
.fenetres-reglage button, .sauvegarde-reglage button { margin: 0.4rem 0.4rem 0.4rem 0; }
.langue-reglage label { display: inline-flex; align-items: center; gap: 0.3rem; margin-right: 1rem; }
.importer-label { display: inline-flex; align-items: center; gap: 0.4rem; }
.confirmation-import { background: var(--panneau); border-radius: 0.6rem; padding: 0.7rem 0.9rem; margin-top: 0.6rem; }
.confirmation-import p { margin: 0 0 0.5rem; }

/* ---------- partage (repris d'Oragotchi) ---------- */
.partage { border: 1px solid var(--filet); border-radius: 0.6rem; padding: 1.4rem 1.2rem 1.2rem; background: var(--panneau); color: var(--texte); width: min(22rem, calc(100% - 2rem)); text-align: center; font-family: inherit; font-size: 1.05rem; }
.partage::backdrop { background: rgba(29, 26, 22, 0.5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.partage h2 { font-style: italic; font-weight: normal; color: var(--accent); font-size: 1.5rem; margin: 0 0 0.3rem; }
.partage p { opacity: 0.75; margin: 0 0 1rem; }
.partage-fermer { position: absolute; top: 0.4rem; right: 0.4rem; background: none; border: 0; font-size: 1.1rem; padding: 0.4rem 0.6rem; }
.partage-qr { display: inline-block; background: #fff; padding: 0.8rem; border-radius: 0.4rem; line-height: 0; margin-bottom: 1rem; }
.partage-qr canvas { max-width: 100%; height: auto; }
.partage-url { display: flex; gap: 0.5rem; }
.partage-url input { flex: 1; min-width: 0; font: inherit; font-size: 0.9rem; padding: 0.4rem 0.6rem; border: 1px solid var(--filet); border-radius: 0.3rem; background: var(--fond); }
.partage-url button { padding: 0.4rem 0.9rem; background: var(--accent); color: #fff; border: none; border-radius: 0.3rem; white-space: nowrap; }

/* ---------- allure de livre de prières ---------- */
.priere, .fete-jour, .bibliotheque .famille li, .rangee-neuvaine { border: 1px solid var(--filet); }
.a-tout-moment h2, .bibliotheque h2, .reglages h2, .bilans h2 { font-family: var(--capitales); text-transform: none; letter-spacing: 0.04em; font-size: 1.1rem; color: var(--accent); opacity: 1; font-weight: 400; }
.topbar .date, .entete .nom, .annonce-titre, .partage h2 { font-family: var(--capitales); font-weight: 400; letter-spacing: 0.02em; }
.topbar .date, .nav-jour .jour-affiche { text-transform: none; }
.topbar .date::first-letter, .nav-jour .jour-affiche::first-letter { text-transform: uppercase; }
.corps .verset .marque, .corps .repons .marque { color: var(--accent); font-weight: 400; }
.entete { border-bottom: 2px solid var(--or); }
/* lettrine rouge au début du texte d'une prière (pas sur un verset ℣, ni sur l'annonce d'un mystère) */
.corps > p:first-child:not(.verset):not(.repons):not(.annonce-titre):not(.rubrique):not(.litanie)::first-letter {
  float: left; font-size: 3.3em; line-height: 0.8; margin: 0.06em 0.1em 0 0; color: var(--accent);
}

/* ---------- choix du mystère de la dizaine ---------- */
.choix-mystere button { display: block; width: 100%; text-align: left; margin: 0.5rem 0; font-size: 1.1rem; background: var(--panneau); }
.choix-mystere .propose { border: 2px solid var(--accent); }
.choix-mystere .rang { font-family: var(--capitales); color: var(--accent); margin-right: 0.3rem; }
.choix-mystere .suivant { font-style: italic; opacity: 0.7; font-size: 0.9rem; }

/* annonce du mystère : fruit et résumé de la scène (docs/lecture.md § Mystères) */
.annonce-fruit { text-align: center; font-style: italic; margin: 0.6rem 0 1.4rem; }
.annonce-fruit span { display: block; font-family: var(--capitales); font-style: normal; color: var(--accent); font-size: 0.9rem; letter-spacing: 0.04em; }
.annonce-resume { font-size: 1.05rem; line-height: 1.6; border-top: 1px solid var(--filet); padding-top: 1rem; }

/* compte du jour et chaîne en cours, dans « À tout moment » */
.a-tout-moment .compte { float: right; font-size: 0.85rem; font-style: italic; color: var(--accent); margin-top: 0.15rem; }

/* numéro de version, discret, en bas de l'accueil */
.version { text-align: center; font-size: 0.7rem; color: var(--doux); opacity: 0.7; margin: -1.2rem 0 1.5rem; }

.lien-apropos { background: none; border: 0; padding: 0.2rem 0.4rem; font: inherit; color: inherit; }
.apropos { text-align: left; }
.apropos h2 { text-align: center; }
.apropos .apropos-contact { text-align: center; opacity: 1; }
.apropos .apropos-contact a { color: var(--accent); }
.apropos .apropos-sources { font-size: 0.8rem; }
.apropos .apropos-version { font-size: 0.75rem; text-align: center; margin: 0; }
/* version complète / courte : à droite des boutons de langue */
.barre-options .choix-version { margin-left: auto; }

/* rubrique (consigne du missel, pas un texte à dire) au-dessus d'une pause silencieuse */
.corps .rubrique { font-style: italic; font-size: 1rem; color: var(--accent); }