:root {
  --nuit: #070F26;
  --surface: #0E1A3D;
  --trait: #2A3558;
  --or-fonce: #8C7543;
  --or: #D4AF6A;
  --or-clair: #EBD3A0;
  --ivoire: #F5EEDC;
  --texte: #DCD5C4;
  --doux: #A9B2C8;
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--nuit); color-scheme: dark; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--nuit);
  color: var(--ivoire);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
a { color: inherit; }
img { display: block; }
button { font-family: var(--sans); cursor: pointer; }
:focus-visible { outline: 2px solid var(--or-clair); outline-offset: 3px; }

.app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  position: relative;
  padding-bottom: env(safe-area-inset-bottom);
}
@media (min-width: 560px) {
  body { background: #040919; }
  .app { background: var(--nuit); border-left: 1px solid var(--trait); border-right: 1px solid var(--trait); }
}

.ecran { display: none; }
.ecran.actif { display: block; animation: apparait .35s ease; }
@keyframes apparait { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ecran.actif { animation: none; } }

/* ---------- Accueil ---------- */
.accueil-tete {
  position: relative;
  padding: calc(22px + env(safe-area-inset-top)) 24px 18px;
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
}
.surtitre { margin: 0; font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: var(--or); }
.logo {
  width: 170px; height: 170px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--or-fonce); box-shadow: 0 0 40px rgba(212,175,106,.28);
}
.titre-app { margin: 4px 0 0; font-family: var(--serif); font-size: 40px; font-weight: 600; line-height: 1; }
.filet { width: 100%; display: flex; align-items: center; gap: 12px; }
.filet::before, .filet::after { content: ''; flex: 1; height: 1px; background: var(--or-fonce); }
.filet span { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--doux); }
.filet.or span { font-size: 11px; letter-spacing: .28em; color: var(--or); }

.cloche {
  position: absolute; right: 14px; top: calc(12px + env(safe-area-inset-top));
  width: 44px; height: 44px; border-radius: 22px; border: 1px solid var(--or-fonce);
  display: flex; align-items: center; justify-content: center; color: var(--or); text-decoration: none;
}

.rubriques { padding: 6px 20px 28px; display: flex; flex-direction: column; gap: 10px; }
.rubrique {
  min-height: 64px; border-radius: 16px; background: var(--surface); border: 1px solid var(--trait);
  padding: 8px 14px; text-decoration: none; color: var(--ivoire);
  display: flex; align-items: center; gap: 14px; transition: border-color .2s;
}
.rubrique:hover { border-color: var(--or-fonce); }
.rubrique img { width: 46px; height: 46px; flex-shrink: 0; border-radius: 23px; object-fit: cover; border: 1px solid var(--or-fonce); }
.rubrique .txt { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.rubrique .nom { font-family: var(--serif); font-size: 21px; font-weight: 600; line-height: 1.1; }
.rubrique .sous { font-size: 12px; letter-spacing: .06em; color: var(--doux); }
.rubrique svg.fleche { flex-shrink: 0; color: var(--or); }

.rubrique.vedette { min-height: 82px; border-radius: 18px; background: var(--or); border: none; padding: 12px 16px; color: var(--nuit); }
.rubrique.vedette .rond { width: 52px; height: 52px; flex-shrink: 0; border-radius: 26px; background: var(--nuit); display: flex; align-items: center; justify-content: center; }
.rubrique.vedette .sous { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: #3B2E12; }
.rubrique.vedette .nom { font-size: 25px; font-weight: 700; line-height: 1.05; }
.rubrique.vedette svg.fleche { color: var(--nuit); }

/* ---------- Pages intérieures ---------- */
.page-tete {
  position: sticky; top: 0; z-index: 3; background: var(--nuit);
  padding: calc(12px + env(safe-area-inset-top)) 20px 18px;
  display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--trait);
}
.retour {
  width: 44px; height: 44px; margin-left: -6px; border-radius: 22px; border: 1px solid var(--or-fonce);
  display: flex; align-items: center; justify-content: center; color: var(--or); text-decoration: none;
}
.page-tete .surtitre { margin-top: 6px; letter-spacing: .28em; }
.page-tete h1 { margin: 0; font-family: var(--serif); font-size: 34px; font-weight: 600; line-height: 1.05; }
.page-corps { padding: 24px 20px 40px; display: flex; flex-direction: column; gap: 22px; }

.lettrine-texte { margin: 0; font-size: 16px; line-height: 1.75; color: var(--texte); }
.lettrine { float: left; margin: 4px 8px 0 0; font-family: var(--serif); font-size: 52px; line-height: .8; color: var(--or); }
.texte { margin: 0; font-size: 15px; line-height: 1.7; color: var(--texte); }

.carte-verset {
  border-radius: 20px; border: 1px solid var(--or-fonce); background: var(--surface);
  padding: 24px 20px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
}
.carte-verset .surtitre { letter-spacing: .3em; }
.citation { margin: 0; font-family: var(--serif); font-size: 24px; line-height: 1.38; font-style: italic; color: var(--ivoire); }
.citation.grande { font-size: 29px; line-height: 1.3; }
.citation.moyenne { font-size: 21px; line-height: 1.4; }
.citation.petite { font-size: 20px; line-height: 1.38; }
.ref { margin: 0; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--or); }
.guillemet { font-family: var(--serif); font-size: 64px; line-height: .5; height: 26px; color: var(--or); }

.boutons { display: flex; gap: 12px; }
.btn {
  flex: 1; min-height: 50px; border-radius: 25px; border: 1px solid var(--or-fonce); background: transparent;
  color: var(--or-clair); font-size: 14px; font-weight: 500; letter-spacing: .04em; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 18px;
}
.btn.plein { background: var(--or); border-color: var(--or); color: var(--nuit); }

.media {
  position: relative; overflow: hidden; border-radius: 18px; border: 1px solid var(--or-fonce); background: var(--surface);
}
.media.youtube { aspect-ratio: 16 / 9; }
.media.youtube img, .media.youtube iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.media.youtube button { position: absolute; inset: 0; background: transparent; border: 0; padding: 0; }
.lecture {
  position: absolute; right: 10px; bottom: 10px; width: 52px; height: 52px; border-radius: 26px; background: var(--or);
  box-shadow: 0 4px 16px rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center;
}
.media video { display: block; width: 100%; max-height: 70vh; background: #000; }
.a-venir { min-height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 20px; }
.a-venir img.fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .22; }
.a-venir .rond-or { position: relative; width: 60px; height: 60px; border-radius: 30px; border: 1px solid var(--or); display: flex; align-items: center; justify-content: center; }
.a-venir span { position: relative; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--or-clair); }

.titre-or { margin: 0; font-family: var(--serif); font-size: 27px; font-weight: 600; line-height: 1.15; color: var(--or-clair); }
.titre-or.italique { font-weight: 500; font-style: italic; line-height: 1.3; font-size: 25px; }
.petit { margin: 0; font-size: 13px; letter-spacing: .06em; color: var(--doux); }
.centre { text-align: center; }
.separe { padding-top: 18px; border-top: 1px solid var(--trait); }

.qr { display: flex; gap: 14px; align-items: flex-start; }
.qr .lettre { flex-shrink: 0; font-family: var(--serif); font-size: 44px; font-weight: 600; line-height: .9; color: var(--or); }
.qr h2 { margin: 0; font-family: var(--serif); font-size: 26px; font-weight: 500; line-height: 1.25; font-style: italic; }

.encadre { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--trait); background: var(--surface); display: flex; flex-direction: column; gap: 3px; }
.encadre .surtitre { font-size: 11px; letter-spacing: .24em; }
.encadre strong { font-family: var(--serif); font-size: 22px; font-weight: 600; }

/* ---------- Prière ---------- */
.heures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.heure {
  min-height: 52px; border-radius: 14px; border: 1px solid var(--trait); background: var(--surface);
  color: var(--texte); font-size: 15px; font-weight: 500;
}
.heure[aria-pressed="true"] { background: var(--or); border-color: var(--or); color: var(--nuit); }
.note { display: flex; gap: 12px; align-items: flex-start; border-top: 1px solid var(--trait); padding-top: 16px; }
.note p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--doux); }

.notif {
  border-radius: 20px; background: var(--ivoire); color: var(--nuit); padding: 14px 16px;
  display: flex; gap: 12px; align-items: center; box-shadow: 0 10px 30px rgba(0,0,0,.45); text-decoration: none;
}
.notif img { width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px; object-fit: cover; }
.notif .corps { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.notif .app-nom { font-size: 12px; color: #4A4A55; }
.notif strong { font-size: 15px; font-weight: 500; }
.notif .msg { font-size: 14px; color: #2E2E38; }

.bandeau-priere { position: fixed; left: 50%; transform: translateX(-50%); top: calc(12px + env(safe-area-inset-top)); width: min(456px, calc(100% - 24px)); z-index: 20; }
.bandeau-priere[hidden] { display: none; }

.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  background: var(--or); color: var(--nuit); padding: 12px 20px; border-radius: 24px; font-size: 14px; font-weight: 500;
  box-shadow: 0 8px 24px rgba(0,0,0,.5); z-index: 30; max-width: calc(100% - 32px); text-align: center;
}
.toast[hidden] { display: none; }

.pied { padding: 8px 20px 32px; text-align: center; font-size: 12px; color: var(--doux); }
.pied a { color: var(--or-clair); }