/* ====== Orationes (prayers.html) — mobile-first ====== */

/* Palette & variables locales */
:root {
  --gold: #d8b566;
  --gold-strong: #caa24a;
  --ink: #111;
  --ink-soft: rgba(17,17,17,.7);
  --paper: #ffffff;
  --paper-soft: rgba(255,255,255,.7);
  --card-radius: 18px;
  --gap: 16px;
  --shadow: 0 8px 30px rgba(0,0,0,.25);
}

/* ====== Header collant, doux et lisible ====== */
.app-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 10px 12px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* Mode nuit / jour – fond translucide */
body.night-mode .app-header {
  background: linear-gradient(to bottom, rgba(0,0,0,.65), rgba(0,0,0,.35));
}
body.day-mode .app-header {
  background: linear-gradient(to bottom, rgba(255,255,255,.85), rgba(255,255,255,.65));
  border-bottom-color: rgba(0,0,0,.06);
}

/* Piles gauche/centre/droite */
.header-left,
.header-center,
.header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.header-center { justify-content: center; }
.header-left { justify-content: flex-start; }
.header-right { justify-content: flex-end; }

/* Logo */
.app-header .logo {
  height: 34px;
  width: auto;
  display: block;
  filter: drop-shadow(0 1px 8px rgba(0,0,0,.25));
}

/* Boutons ronds (menu / home / thème) */
.menu-toggle,
.home-btn,
.mode-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid transparent;
  text-decoration: none;
  font-size: 18px;
  line-height: 1;
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
  transition: transform .08s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}

/* Nuit */
body.night-mode .menu-toggle,
body.night-mode .home-btn,
body.night-mode .mode-toggle {
  background: rgba(255,255,255,.08);
  color: #fff;
  border-color: rgba(255,255,255,.12);
}

/* Jour */
body.day-mode .menu-toggle,
body.day-mode .home-btn,
body.day-mode .mode-toggle {
  background: rgba(0,0,0,.06);
  color: #111;
  border-color: rgba(0,0,0,.08);
}

/* Hover/active */
.menu-toggle:active,
.home-btn:active,
.mode-toggle:active {
  transform: translateY(1px);
  box-shadow: 0 3px 12px rgba(0,0,0,.18);
}

/* ====== Contenu principal ====== */
.prayers-container {
  max-width: 860px;
  margin: 14px auto 80px;
  padding: 0 14px 14px;
  display: grid;
  gap: var(--gap);
}

/* Titre principal */
.prayers-container h1 {
  margin: 8px 0 6px;
  font-size: 22px;
  letter-spacing: .5px;
  text-align: center;
  font-weight: 600;
  color: var(--gold);
  text-shadow: 0 1px 10px rgba(0,0,0,.25);
}

/* Carte de prière */
.prayer {
  border-radius: var(--card-radius);
  overflow: hidden;
  padding: 14px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,.08);
}

/* Nuit : carte sombre et lisible */
body.night-mode .prayer {
  background: linear-gradient(180deg, rgba(0,0,0,.75), rgba(0,0,0,.6));
  color: #f5f5f5;
}

/* Jour : carte claire et douce */
body.day-mode .prayer {
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.8));
  color: #222;
  border-color: rgba(0,0,0,.06);
}

/* Titre de prière */
.prayer h2 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 100;
  letter-spacing: .3px;
  color: var(--gold);
}

/* Audio plein largeur + espace */
.prayer audio {
  width: 100%;
  display: block;
  margin: 8px 0 10px;
}

/* Texte (respect des retours à la ligne) */
.prayer p {
  margin: 0;
  line-height: 1.6;
  font-size: 16px;
  white-space: pre-line;      /* respecte \n du JSON */
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

/* Grandes litanies : aère davantage */
#text-litaniae {
  line-height: 1.7;
}

/* Confort d’ancrage si on scrolle vers une section */
.prayer {
  scroll-margin-top: 90px; /* compense le header sticky */
}

/* ====== Side menu (non intrusif : juste quelques améliorations) ====== */
.side-menu {
  width: 78%;
  max-width: 320px;
  padding: 14px 14px 18px;
  box-shadow: 0 12px 34px rgba(0,0,0,.36);
}
body.night-mode .side-menu {
  background: rgba(0,0,0,.92);
  border-right: 1px solid rgba(255,255,255,.06);
}
body.day-mode .side-menu {
  background: rgba(255,255,255,.98);
  border-right: 1px solid rgba(0,0,0,.06);
}
.side-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.side-menu li a {
  display: block;
  padding: 11px 10px;
  border-radius: 10px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
}
body.night-mode .side-menu li a {
  color: #f0f0f0;
}
body.day-mode .side-menu li a {
  color: #222;
}
.side-menu li a.active {
  outline: 2px solid var(--gold);
}

/* Overlay (clic pour fermer) */
.overlay {
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}
body.night-mode .overlay {
  background: rgba(0,0,0,.45);
}
body.day-mode .overlay {
  background: rgba(0,0,0,.25);
}

/* ====== Petites touches typographiques ====== */
body.night-mode .prayers-container h1,
body.night-mode .prayer h2 {
  text-shadow: 0 1px 14px rgba(0,0,0,.45);
}
body.day-mode .prayers-container h1,
body.day-mode .prayer h2 {
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
}

/* ====== Spécificités écran > tablette ====== */
@media (min-width: 768px) {
  .app-header { padding: 12px 18px; }
  .app-header .logo { height: 38px; }
  .prayers-container { gap: 18px; }
  .prayer { padding: 16px; border-radius: 20px; }
  .prayer h2 { font-size: 19px; }
  .prayer p { font-size: 17px; }
}

/* ====== Optionnel : fond de page si non déjà géré par style.css ====== */
/* Décommente ces lignes SI tu veux forcer le fond Marie ici.
body.night-mode {
  background: #000 url('img/fond.webp') center center / contain no-repeat fixed;
}
body.day-mode {
  background: #fff url('img/fond.webp') center center / contain no-repeat fixed;
}
*/
/* ==== Overrides Florian — 2025-09-11 ==== */

/* 1) Header NON fixe */
.app-header { position: static !important; }

/* 2) Logo = même taille que sur index (max 150px) */
.app-header .logo,
#hero-logo.logo {
  max-width: 150px !important;
  height: auto !important;
}

/* Allège un peu la bande du logo */
.logo-strip { padding: 4px 0 !important; }

/* 3) Marie visible en permanence, fond immobile ancré en haut */
body.night-mode {
  background: #000 url('img/fond.webp') top center / contain no-repeat fixed !important;
}
body.day-mode {
  background: #fff url('img/fond.webp') top center / contain no-repeat fixed !important;
}

/* 4) Espace haut normal (car le header n'est plus sticky) */
.prayers-container { margin: 10px auto 80px !important; }

/* 5) Ancrage doux sur sections (plus besoin de compenser un header sticky) */
.prayer { scroll-margin-top: 16px !important; }
/* ===== Lettrines ===== */
.prayer-text .lettrine,
.prayer-text span.lettrine,
.prayer-text .dropcap {
  float: left;
  font-size: 2.6em;       /* taille de la grande lettre */
  line-height: 1;
  margin: 0 8px 2px 0;    /* espace à droite et en bas */
  font-weight: 100;
  color: var(--gold);     /* doré */
  background: transparent !important; /* pas de carré jaune */
  font-family: 'Cormorant Garamond', serif; /* même police que le texte */
}

/* Option : si certaines lettrines viennent avec un fond inline (style="background:...") */
.prayer-text [style*="background"] {
  background: transparent !important;
}
/* Lettrine — base */
.prayer-text .lettrine,
.prayer-text span.lettrine,
.prayer-text .dropcap {
  float: left;
  font-size: 2.8em;
  line-height: 1;
  margin: 0 8px 2px 0;
  font-weight: 100;
  font-family: 'Cormorant Garamond', serif;
  background: transparent !important;
}

/* Mode nuit → lettrine dorée brillante sur fond noir */
body.night-mode .prayer-text .lettrine,
body.night-mode .prayer-text span.lettrine,
body.night-mode .prayer-text .dropcap {
  color: #FFD700; /* or vif lisible */
  text-shadow: 0 0 6px rgba(255,215,0,.5); /* halo léger */
}

/* Mode jour → lettrine bien contrastée sur fond blanc */
body.day-mode .prayer-text .lettrine,
body.day-mode .prayer-text span.lettrine,
body.day-mode .prayer-text .dropcap {
  color: #8B7500; /* or sombre (brun-doré) */
  text-shadow: none;
}
/* ===== Lettrines forcées ===== */
.prayer-text .lettrine,
.prayer-text span.lettrine,
.prayer-text .dropcap {
  all: unset;                 /* on annule TOUT style hérité/inline */
  float: left !important;
  font-size: 2.8em !important;
  line-height: 1 !important;
  margin: 0 8px 2px 0 !important;
  font-weight: 100 !important;
  font-family: 'Cormorant Garamond', serif !important;
  background: transparent !important;
}

/* Mode nuit */
body.night-mode .prayer-text .lettrine,
body.night-mode .prayer-text span.lettrine,
body.night-mode .prayer-text .dropcap {
  color: #FFD700 !important;              /* or vif */
  text-shadow: 0 0 6px rgba(255,215,0,.6) !important;
}

/* Mode jour */
body.day-mode .prayer-text .lettrine,
body.day-mode .prayer-text span.lettrine,
body.day-mode .prayer-text .dropcap {
  color: #8B7500 !important;              /* brun-doré lisible */
  text-shadow: none !important;
}
/* ——— ANNULER les anciennes lettrines (images/spans) ——— */
.prayer-text span.lettrine,
.prayer-text span.dropcap,
.prayer-text img.lettrine,
.prayer-text img[class*="lettrine"],
.prayer-text img[alt*="ettrin"],
.prayer-text [style*="float:left"][style*="font-size"] {
  display: none !important;
}

/* ——— Dropcap REELLE sur la 1re lettre du 1er bloc de texte ——— */
.prayer-text :is(p,div):first-child {
  text-indent: 0 !important;
}

/* Style commun de la lettrine */
.prayer-text :is(p,div):first-child::first-letter {
  float: left;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 800;
  line-height: 1;
  margin: 0 10px 4px 0;
  font-size: 2.9em;        /* ajuste si tu veux plus grand/petit */
  background: transparent;
}

/* Nuit : or vif + léger contour sombre → hyper lisible sur noir */
body.night-mode .prayer-text :is(p,div):first-child::first-letter {
  color: #FFD766;                          /* or lumineux */
  -webkit-text-stroke: 0.5px rgba(0,0,0,.45);
  text-shadow:
    0 0 2px rgba(0,0,0,.45),
    0 0 10px rgba(255,215,0,.35);
}

/* Jour : or plus sombre + léger contour clair → lisible sur blanc */
body.day-mode .prayer-text :is(p,div):first-child::first-letter {
  color: #6B5200;                          /* brun-doré contrasté */
  -webkit-text-stroke: 0.4px rgba(0,0,0,.18);
  text-shadow: none;
}
/* Cache toute lettrine héritée du HTML d'origine */
.prayer-text span.lettrine,
.prayer-text span.dropcap,
.prayer-text img.lettrine,
.prayer-text img[class*="lettrine"],
.prayer-text img[alt*="ettrin"],
.prayer-text [style*="float:left"][style*="font-size"] {
  display: none !important;
}

/* Vraie lettrine injectée en JS */
.prayer-text .dropcap-real {
  float: left;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 800;
  line-height: 1;
  margin: 0 10px 4px 0;
  font-size: 3.1em;
  background: transparent !important;
}

/* Contraste top en nuit/jour */
body.night-mode .prayer-text .dropcap-real {
  color: #FFD766;
  -webkit-text-stroke: 0.5px rgba(0,0,0,.45);
  text-shadow: 0 0 2px rgba(0,0,0,.45), 0 0 10px rgba(255,215,0,.35);
}
body.day-mode .prayer-text .dropcap-real {
  color: #6B5200;
  -webkit-text-stroke: 0.4px rgba(0,0,0,.18);
  text-shadow: none;
}
/* === Lecteurs audio — style intégré Rosarium === */

/* Base commune */
.prayer audio {
  width: 100%;
  display: block;
  margin: 8px 0 10px;
  border-radius: 14px;
  background: transparent;          /* pas de fond gris par défaut */
  box-shadow: 0 6px 22px rgba(0,0,0,.18);
  outline: none;
}

/* Focus accessible (tab clavier) */
.prayer audio:focus-visible {
  box-shadow: 0 0 0 3px rgba(216,181,102,.55), 0 6px 22px rgba(0,0,0,.18);
}

/* -------- WebKit (Chrome, Edge, Safari) -------- */
.prayer audio::-webkit-media-controls-enclosure {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
}

/* Panneau des contrôles */
body.night-mode .prayer audio::-webkit-media-controls-panel {
  background: linear-gradient(180deg, rgba(15,15,15,.92), rgba(25,25,25,.86));
  color: #f3f3f3;
}
body.day-mode .prayer audio::-webkit-media-controls-panel {
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(245,245,245,.86));
  color: #1a1a1a;
  border-top: 1px solid rgba(0,0,0,.06);
}

/* Bouton lecture/pause : pastille arrondie dorée */
.prayer audio::-webkit-media-controls-play-button,
.prayer audio::-webkit-media-controls-pause-button {
  border-radius: 12px;
  margin: 0 6px;
  background: rgba(202,162,74,.18);
}
.prayer audio::-webkit-media-controls-play-button:hover,
.prayer audio::-webkit-media-controls-pause-button:hover {
  background: rgba(202,162,74,.28);
}

/* Timeline (barre de progression) */
.prayer audio::-webkit-media-controls-timeline {
  height: 4px;
  border-radius: 999px;
  margin: 0 10px;
  background: linear-gradient(90deg, rgba(202,162,74,.35), rgba(202,162,74,.2));
}

/* Timecodes */
.prayer audio::-webkit-media-controls-current-time-display,
.prayer audio::-webkit-media-controls-time-remaining-display {
  font-variant-numeric: tabular-nums;
  letter-spacing: .2px;
}
body.night-mode .prayer audio::-webkit-media-controls-current-time-display,
body.night-mode .prayer audio::-webkit-media-controls-time-remaining-display {
  color: #f0e6ce;
}
body.day-mode .prayer audio::-webkit-media-controls-current-time-display,
body.day-mode .prayer audio::-webkit-media-controls-time-remaining-display {
  color: #6b5200;
}

/* Mute & volume */
.prayer audio::-webkit-media-controls-mute-button { margin: 0 4px; }
.prayer audio::-webkit-media-controls-volume-slider {
  border-radius: 999px;
  background: rgba(202,162,74,.18);
}

/* Taille compacte sur petit écran */
@media (max-width: 420px) {
  .prayer audio { border-radius: 12px; }
  .prayer audio::-webkit-media-controls-enclosure { border-radius: 12px; }
}

/* -------- Firefox : habillage doux du conteneur (limité) -------- */
/* Firefox n’expose pas de sous-éléments stylables ; on soigne l’écrin */
@-moz-document url-prefix() {
  .prayer audio {
    background:
      linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,0)) padding-box;
    border: 1px solid rgba(255,255,255,.10);
  }
  body.day-mode .prayer audio {
    border-color: rgba(0,0,0,.08);
    box-shadow: 0 6px 22px rgba(0,0,0,.12);
  }
}

/* -------- Option: thème doré plus marqué -------- */
/* Ajoute la classe .audio--gold sur une section .prayer pour surligner */
.prayer.audio--gold audio::-webkit-media-controls-timeline {
  background: linear-gradient(90deg, rgba(216,181,102,.55), rgba(216,181,102,.25));
}
/* === Icône Play personnalisée sur le lecteur audio === */

/* Cache l’icône par défaut */
.prayer audio::-webkit-media-controls-play-button,
.prayer audio::-webkit-media-controls-pause-button {
  position: relative;
  background: rgba(202,162,74,.18) !important;
  border-radius: 50% !important;
  overflow: hidden;
}

/* Icône ▶ pour Play */
.prayer audio::-webkit-media-controls-play-button::before {
  content: "▶";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-45%, -50%); /* léger décalage car le triangle est asymétrique */
  font-size: 14px;
  font-weight: bold;
  color: var(--gold);
}

/* Icône ❚❚ pour Pause */
.prayer audio::-webkit-media-controls-pause-button::before {
  content: "❚❚";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  font-weight: bold;
  color: var(--gold);
}
/* === Lecteur audio custom Rosarium === */
.custom-player {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
}

.play-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: rgba(202,162,74,.18);
  color: var(--gold);
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
  transition: background .2s;
}
.play-btn:hover { background: rgba(202,162,74,.28); }

.progress-container {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: rgba(202,162,74,.2);
  cursor: pointer;
  position: relative;
}
.progress {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--gold);
  transition: width .1s linear;
}
.play-btn {
  font-family: "Cormorant Garamond", serif;
  font-size: 20px;
  font-weight: bold;
  color: var(--gold);
}